// v4/tools-page.jsx — Free tools index page.

function V4Tools() {
  const v4 = window.v4;
  const accent = v4.yellow;
  const accent2 = v4.red;

  const allTools = window.V4_TOOLS;
  const FILTERS = [
    { label: 'All', test: () => true },
    { label: 'Spreadsheets (CSV)', test: t => /\.csv$/.test(t.file) },
    { label: 'Print-ready pages', test: t => /\.html$/.test(t.file) },
  ];
  const [filter, setFilter] = React.useState('All');
  const tools = allTools.filter((FILTERS.find(f => f.label === filter) || FILTERS[0]).test);

  return (
    <div style={{ width: '100%', background: v4.bg, color: v4.ink, fontFamily: v4.sans, fontSize: 15, lineHeight: 1.5 }}>
      <V4UtilityBar live="● FREE · 8 tools · No email needed" />
      <V4Nav current="Tools" />

      {/* HERO */}
      <div style={{ padding: '64px 36px', borderBottom: `4px solid ${v4.ink}`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'end' }}>
          <div>
            <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: v4.inkMuted, textTransform: 'uppercase', marginBottom: 14 }}>§ The workshop</div>
            <h1 style={{ fontSize: 156, fontWeight: 800, letterSpacing: -7, lineHeight: 0.86, margin: 0 }}>
              Take<br/>
              <span style={{ background: accent, padding: '0 16px' }}>the tools.</span>
            </h1>
          </div>
          <div>
            <p style={{ fontSize: 18, color: v4.inkSoft, lineHeight: 1.55, margin: '0 0 20px' }}>
              Working spreadsheets and checklists, built for real files. Take them whether you buy anything from us or not — the judgment is the product, these are the appendices.
            </p>
            <div className="gc-keep-cols" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1.5px solid ${v4.ink}` }}>
              {[
                ['8', 'Tools'],
                ['8', 'No email'],
                ['$0', 'Price'],
              ].map(([n, l], i) => (
                <div key={l} style={{ padding: '16px 18px', borderRight: i === 2 ? 'none' : `1.5px solid ${v4.ink}`, background: i === 1 ? accent : v4.bg }}>
                  <div style={{ fontSize: 42, fontWeight: 800, letterSpacing: -2, lineHeight: 0.9 }}>{n}</div>
                  <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, color: v4.inkMuted, textTransform: 'uppercase', marginTop: 6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* FILTER BAR */}
      <div className="gc-filter-bar" style={{ padding: '20px 36px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1.5px solid ${v4.ink}`, background: v4.bg }}>
        <div className="gc-filters" style={{ display: 'flex', gap: 8 }}>
          {FILTERS.map(f => ({ ...f, active: f.label === filter })).map(f => (
            <button type="button" key={f.label} onClick={() => setFilter(f.label)} style={{
              padding: '8px 14px', border: `1.5px solid ${v4.ink}`,
              fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5,
              textTransform: 'uppercase', fontWeight: 600,
              background: f.active ? v4.ink : v4.bg, color: f.active ? v4.bg : v4.ink,
              cursor: 'pointer',
            }}>{f.label}</button>
          ))}
        </div>
        <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: v4.inkMuted }}>
          {tools.length} of {allTools.length} shown
        </div>
      </div>

      {/* TOOLS GRID */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', border: `1.5px solid ${v4.ink}`, borderTop: 0 }}>
        {tools.map((tool, i) => {
          const isHero = i === 0;
          return (
            <a key={tool.id} href={`tool.html?id=${tool.id}`} style={{
              padding: '32px 28px', borderRight: i % 2 === 0 ? `1.5px solid ${v4.ink}` : 'none',
              borderTop: i < 2 ? 'none' : `1.5px solid ${v4.ink}`,
              background: isHero ? accent : v4.paper,
              minHeight: 280, position: 'relative', textDecoration: 'none', color: v4.ink,
              display: 'grid', gridTemplateColumns: '70px 1fr', gap: 22,
            }}>
              <div>
                <div style={{ fontFamily: v4.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5 }}>{tool.id}</div>
                <div style={{ marginTop: 16, fontSize: 56, fontWeight: 800, letterSpacing: -2.5, lineHeight: 0.85, color: isHero ? v4.ink : v4.inkSoft }}>{String(i + 1).padStart(2, '0')}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: v4.mono, fontSize: 10.5, letterSpacing: 1.5, color: v4.inkMuted, textTransform: 'uppercase' }}>{tool.fmt}</span>
                  {tool.tag && <span style={{
                    fontFamily: v4.mono, fontSize: 10.5, letterSpacing: 1.5, fontWeight: 700,
                    padding: '2px 8px', textTransform: 'uppercase',
                    background: tool.tag === 'Gated' ? v4.ink : (tool.tag === 'New' ? accent2 : v4.ink),
                    color: tool.tag === 'Gated' || tool.tag === 'New' ? v4.bg : (isHero ? accent : v4.bg),
                  }}>{tool.tag}</span>}
                </div>
                <h3 style={{ fontSize: 26, fontWeight: 800, letterSpacing: -0.8, margin: 0, lineHeight: 1.05 }}>{tool.t}</h3>
                <p style={{ fontSize: 14.5, color: v4.inkSoft, lineHeight: 1.55, margin: 0, flex: 1 }}>{tool.d}</p>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 16, borderTop: `1px solid ${v4.ink}`, marginTop: 6 }}>
                  <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, color: v4.inkMuted, textTransform: 'uppercase' }}>
                    {tool.v} · updated {tool.updated}
                  </div>
                  <span style={{
                    background: v4.ink, color: tool.gated ? accent : v4.bg, border: `1.5px solid ${v4.ink}`,
                    padding: '10px 16px', fontFamily: v4.mono, fontSize: 12, fontWeight: 700,
                    letterSpacing: 1.5, textTransform: 'uppercase',
                  }}>{tool.gated ? '✉ Email →' : '↓ Download'}</span>
                </div>
              </div>
            </a>
          );
        })}
      </div>

      {/* WHY FREE */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: `1.5px solid ${v4.ink}` }}>
        <div style={{ padding: '64px 36px', borderRight: `1.5px solid ${v4.ink}` }}>
          <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: accent2, textTransform: 'uppercase', marginBottom: 14 }}>§ Why these are free</div>
          <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: -2.2, lineHeight: 0.96, margin: '0 0 22px' }}>
            The judgment is the product.<br/>The templates are the appendix.
          </h2>
          <p style={{ fontSize: 16.5, color: v4.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 540 }}>
            Anyone with a spreadsheet can recreate any of these tools in an afternoon. What is hard, and what we sell, is the discipline that uses them — the chapter explaining what the 47 items <em>do</em>, and the case studies showing them in motion.
          </p>
          <p style={{ fontSize: 16.5, color: v4.inkSoft, lineHeight: 1.6, margin: 0, maxWidth: 540 }}>
            Take the tools. Use them on next week's deal. If, six months from now, you find yourself reaching for a 48th item — that is what Chapter III is for.
          </p>
        </div>
        <div style={{ padding: '64px 36px', background: v4.ink, color: v4.bg }}>
          <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: accent, textTransform: 'uppercase', marginBottom: 14 }}>§ Excel workbooks · paid tiers</div>
          <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: -2.2, lineHeight: 0.96, margin: '0 0 22px' }}>
            The same tools,<br/>with live formulas.
          </h2>
          <p style={{ fontSize: 16.5, color: '#bdbdbd', lineHeight: 1.6, marginBottom: 28, maxWidth: 460 }}>
            The free versions are CSV and print-ready pages. The paid tiers add Excel workbooks that do the arithmetic for you — four with the Deal Pack, all six with Complete.
          </p>
          <div style={{ border: `1.5px solid ${v4.bg}` }}>
            {window.VC_WORKBOOKS.map((w, i) => (
              <div key={w.id} style={{ padding: '12px 16px', display: 'flex', justifyContent: 'space-between', gap: 12, borderTop: i ? '1px solid #3a3a3a' : 'none', fontFamily: v4.mono, fontSize: 12, letterSpacing: 1, fontWeight: 600 }}>
                <span>+ {w.t}</span><span style={{ color: w.tier === 'deal' ? accent : '#bdbdbd' }}>{w.tier === 'deal' ? 'DEAL PACK + COMPLETE' : 'COMPLETE'}</span>
              </div>
            ))}
          </div>
          <a href="pricing.html" style={{
            display: 'inline-block', marginTop: 28,
            background: accent, color: v4.ink, padding: '14px 22px',
            fontFamily: v4.mono, fontSize: 13, fontWeight: 700, letterSpacing: 2,
            textTransform: 'uppercase', textDecoration: 'none',
          }}>See pricing · from NZD 249 →</a>
          <a href="bridge.html" style={{
            display: 'block', marginTop: 18, color: v4.bg,
            fontFamily: v4.mono, fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase',
          }}>Or run the earnings-bridge calculator, free on screen →</a>
          <a href="keel.html" style={{
            display: 'block', marginTop: 10, color: v4.bg,
            fontFamily: v4.mono, fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase',
          }}>Or check how many months your cash lasts →</a>
        </div>
      </div>

      <V4Footer />
    </div>
  );
}

window.V4Tools = V4Tools;