// v4/landing-page.jsx — full landing page in brutalist style, with tweaks.

const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio } = window;

function V4Landing() {
  const v4 = window.v4;
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#f2e600",
    "secondary": "#e83d2c",
    "density": "comfortable"
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent;
  const accent2 = t.secondary;
  const padScale = t.density === 'tight' ? 0.75 : 1;

  return (
    <div style={{
      width: '100%', background: v4.bg, color: v4.ink,
      fontFamily: v4.sans, fontSize: 15, lineHeight: 1.5, minHeight: '100vh',
    }}>
      <V4UtilityBar />
      <V4Nav current="" />

      {/* HERO */}
      <div style={{ borderBottom: `4px solid ${v4.ink}`, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr' }}>
          <div style={{ padding: `${56*padScale}px 40px 44px`, borderRight: `1.5px solid ${v4.ink}`, position: 'relative' }}>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 18, marginBottom: 22,
              fontFamily: v4.mono, fontSize: 12, letterSpacing: 2, textTransform: 'uppercase',
            }}>
              <span style={{ background: v4.ink, color: accent, padding: '4px 10px', fontWeight: 700 }}>THESIS №01</span>
              <span style={{ color: v4.inkMuted }}>The founding claim · why this exists</span>
            </div>

            <h1 style={{
              fontFamily: v4.sans, fontSize: 60, fontWeight: 800, letterSpacing: -2.2,
              lineHeight: 1.02, margin: 0, color: v4.ink,
            }}>
              SME valuation is<br/>
              <span style={{
                background: accent, padding: '0 8px', boxDecorationBreak: 'clone',
                WebkitBoxDecorationBreak: 'clone',
                boxShadow: `3px 3px 0 ${v4.ink}`,
              }}>70% judgment</span>.
            </h1>

            <p style={{ fontSize: 19, lineHeight: 1.5, color: v4.inkSoft, margin: '28px 0 0', maxWidth: 620, fontWeight: 500 }}>
              Ninety percent of the published material teaches the other thirty. A curriculum for practitioners on the part that actually decides whether a deal closes — for bankers, brokers, accountants and owners.
            </p>

            {/* The mismatch visual */}
            <div style={{ marginTop: 36, paddingTop: 28, borderTop: `1.5px solid ${v4.ink}` }}>
              <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: v4.inkMuted, textTransform: 'uppercase', marginBottom: 16 }}>↘ The mismatch — visualised</div>

              {[
                { label: 'What 90% of valuation content teaches', math: 90, judg: 10, mathTxt: 'Math · DCF · WACC · multiples', judgTxt: '' },
                { label: 'What actually decides a deal',           math: 30, judg: 70, mathTxt: '',                            judgTxt: 'Judgment · method · QofE · context' },
              ].map((row, i) => (
                <div key={i} style={{ marginBottom: i === 0 ? 14 : 4 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6, gap: 12 }}>
                    <span style={{ fontSize: 13.5, fontWeight: 700, color: v4.ink }}>{row.label}</span>
                    <span style={{ fontFamily: v4.mono, fontSize: 11, color: v4.inkMuted, letterSpacing: 1.5, textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{row.math}% · {row.judg}%</span>
                  </div>
                  <div style={{ display: 'flex', height: 44, border: `1.5px solid ${v4.ink}` }}>
                    <div style={{
                      width: `${row.math}%`, background: v4.ink, color: v4.bg,
                      display: 'flex', alignItems: 'center', padding: '0 14px',
                      fontFamily: v4.mono, fontSize: 12, fontWeight: 700,
                      letterSpacing: 1, textTransform: 'uppercase',
                      borderRight: `1.5px solid ${v4.ink}`,
                      whiteSpace: 'nowrap', overflow: 'hidden',
                    }}>{row.mathTxt}</div>
                    <div style={{
                      width: `${row.judg}%`, background: accent, color: v4.ink,
                      display: 'flex', alignItems: 'center', padding: '0 14px',
                      fontFamily: v4.mono, fontSize: 12, fontWeight: 700,
                      letterSpacing: 1, textTransform: 'uppercase',
                      whiteSpace: 'nowrap', overflow: 'hidden',
                    }}>{row.judgTxt}</div>
                  </div>
                </div>
              ))}

              <div style={{
                marginTop: 14, padding: '10px 14px', background: accent2, color: v4.bg,
                fontFamily: v4.mono, fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase',
                fontWeight: 700, display: 'inline-block',
              }}>
                ↑ The proportions are inverted. The gap is what we teach.
              </div>
            </div>

            <div style={{ display: 'flex', gap: 0, marginTop: 32 }} id="cta">
              <a href="article.html" style={{
                background: v4.ink, color: v4.bg, border: `1.5px solid ${v4.ink}`,
                padding: '16px 24px', fontFamily: v4.mono, fontSize: 13, fontWeight: 700,
                letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer', textDecoration: 'none',
              }}>↗ Read a free case</a>
              <a href="bridge.html" style={{
                background: v4.yellow, color: v4.ink, border: `1.5px solid ${v4.ink}`,
                borderLeft: 0, padding: '16px 24px', fontFamily: v4.mono, fontSize: 13, fontWeight: 700,
                letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer', textDecoration: 'none',
              }}>Run your numbers →</a>
              <a href="chapter.html" style={{
                background: v4.bg, color: v4.ink, border: `1.5px solid ${v4.ink}`,
                borderLeft: 0, padding: '16px 24px', fontFamily: v4.mono, fontSize: 13, fontWeight: 700,
                letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer', textDecoration: 'none',
              }}>→ See curriculum</a>
            </div>
          </div>

          {/* Right hero — case anatomy */}
          <div style={{ padding: '48px 36px', background: v4.ink, color: v4.bg, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 24, right: 24, fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: accent }}>CASE №047 ◆</div>
            <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: v4.inkDim, textTransform: 'uppercase' }}>The broker's number</div>
            <div style={{ fontSize: 56, fontWeight: 800, letterSpacing: -2, marginTop: 4, color: v4.bg }}>$5,400,000</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '20px 0' }}>
              <div style={{ flex: 1, height: 1.5, background: v4.bg }} />
              <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: accent, textTransform: 'uppercase' }}>−81%</div>
              <div style={{ flex: 1, height: 1.5, background: v4.bg }} />
            </div>
            <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: v4.inkDim, textTransform: 'uppercase' }}>The buyer paid</div>
            <div style={{ fontSize: 56, fontWeight: 800, letterSpacing: -2, marginTop: 4, color: accent }}>$1,008,000</div>
            <div style={{ marginTop: 36, padding: 16, border: `1.5px solid ${v4.bg}` }}>
              <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: v4.inkDim, textTransform: 'uppercase', marginBottom: 12 }}>What sits in the gap</div>
              {[
                ['01', 'Owner remuneration adjustment'],
                ['02', 'Family members on payroll'],
                ['03', 'Personal expenses through company'],
                ['04', 'Below-market related-party rent'],
              ].map(([n, label]) => (
                <div key={n} style={{ display: 'flex', gap: 14, padding: '8px 0', borderTop: `1px solid ${v4.inkDim}`, fontSize: 14 }}>
                  <span style={{ fontFamily: v4.mono, color: accent, fontWeight: 700 }}>{n}</span>
                  <span>{label}</span>
                </div>
              ))}
            </div>
            <a href="article.html" style={{ display: 'inline-block', fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, color: accent, textTransform: 'uppercase', marginTop: 16, textDecoration: 'underline', textUnderlineOffset: 4 }}>
              ↳ Read the full teardown
            </a>
          </div>
        </div>
      </div>

      {/* PROBLEM strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderBottom: `1.5px solid ${v4.ink}` }}>
        {[
          ['90%', 'of public content teaches the 30% part', v4.bg],
          ['3×', 'spread between low and high broker estimates', v4.bg],
          ['80%', 'of real work happens in Quality of Earnings', accent],
          ['$0', 'cost to read Chapter 01 — free, no email', v4.bg],
        ].map(([num, label, bg], i) => (
          <div key={i} style={{
            padding: '32px 24px', background: bg,
            borderRight: i === 3 ? 'none' : `1.5px solid ${v4.ink}`,
          }}>
            <div style={{ fontSize: 64, fontWeight: 800, letterSpacing: -3, lineHeight: 1, margin: 0 }}>{num}</div>
            <div style={{ fontSize: 13.5, color: v4.inkSoft, marginTop: 12, lineHeight: 1.4 }}>{label}</div>
          </div>
        ))}
      </div>

      {/* CURRICULUM */}
      <div style={{ padding: '64px 36px' }} id="curriculum">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 40 }}>
          <div>
            <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: v4.inkMuted, textTransform: 'uppercase', marginBottom: 12 }}>§02 · The Curriculum</div>
            <h2 style={{ fontSize: 88, fontWeight: 800, letterSpacing: -3.5, lineHeight: 0.92, margin: 0, maxWidth: 800 }}>
              Seven chapters.<br/><span style={{ color: accent2 }}>One discipline.</span>
            </h2>
          </div>
          <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 1.5, color: v4.inkMuted, textAlign: 'right', textTransform: 'uppercase' }}>
            <div>59 LESSONS</div><div>~3.5 HRS READING</div><div>8 FREE TOOLS</div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1.5px solid ${v4.ink}` }}>
          {[
            { n: '01', t: 'The Nature of Value', d: 'Value vs price vs worth. Why SME differs from listed. Bias, uncertainty, complexity.', tag: 'FREE', tagBg: accent, href: 'chapter-01.html' },
            { n: '02', t: 'The Methods Map', d: 'Income, Market, Asset. When to use which. SDE vs EBITDA vs Net Profit by buyer.', tag: 'PAID', href: 'chapter-02.html' },
            { n: '03', t: 'Quality of Earnings', d: '80% of the work. Add-backs, family payroll, working capital, capex split, off-balance items.', tag: 'CORE', tagBg: accent2, tagColor: v4.bg, href: 'chapter.html' },
            { n: '04', t: 'The Art of Multiples', d: 'Why "industry 4×" is a trap. 12 quality factors. Size, key person, customer concentration.', tag: 'PAID', href: 'chapter-04.html' },
            { n: '05', t: 'DCF, Used Correctly', d: 'Three SME traps. NZ WACC build-up. Terminal value alternatives. When to abandon.', tag: 'PAID', href: 'chapter-05.html' },
            { n: '06', t: 'Valuation in Context', d: 'Lending vs sale vs MBO vs matrimonial vs distress. Cross-border CN↔NZ adjustments.', tag: 'PAID', href: 'chapter-06.html' },
            { n: '07', t: 'Reading a Report', d: '30-minute scan. Assumption-sheet red flags. Disclaimer trick. Comparable-set audit.', tag: 'PAID', href: 'chapter-07.html' },
          ].map((c, i) => {
            const dark = i === 2;
            const Tag = c.href ? 'a' : 'div';
            return (
              <Tag key={c.n} href={c.href} style={{
                padding: '28px 22px', minHeight: 230,
                borderRight: i % 3 === 2 ? 'none' : `1.5px solid ${v4.ink}`,
                borderBottom: i < 4 ? `1.5px solid ${v4.ink}` : (i === 4 ? `1.5px solid ${v4.ink}` : 'none'),
                background: dark ? v4.ink : v4.paper,
                color: dark ? v4.bg : v4.ink,
                position: 'relative', display: 'block', textDecoration: 'none',
                cursor: c.href ? 'pointer' : 'default',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 18 }}>
                  <span style={{ fontSize: 90, fontWeight: 800, letterSpacing: -4, lineHeight: 0.85, color: dark ? accent : v4.ink }}>{c.n}</span>
                  <span style={{
                    padding: '4px 10px', background: c.tagBg || (dark ? accent : v4.ink),
                    color: c.tagColor || (c.tagBg === accent ? v4.ink : (dark ? v4.ink : v4.bg)),
                    fontFamily: v4.mono, fontSize: 10.5, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
                  }}>{c.tag}</span>
                </div>
                <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.7, margin: '0 0 10px', lineHeight: 1.05 }}>{c.t}</h3>
                <p style={{ fontSize: 14, color: dark ? '#bdbdbd' : v4.inkMuted, lineHeight: 1.5, margin: 0 }}>{c.d}</p>
              </Tag>
            );
          })}
          <a href="pricing.html" style={{
            padding: '28px 22px', minHeight: 230, background: accent, color: v4.ink, textDecoration: 'none',
            borderRight: `1.5px solid ${v4.ink}`,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          }}>
            <div>
              <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: v4.ink, textTransform: 'uppercase' }}>↘ All together</div>
              <h3 style={{ fontSize: 30, fontWeight: 800, letterSpacing: -1.2, lineHeight: 1, margin: '14px 0 0' }}>Get the whole curriculum →</h3>
            </div>
            <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase' }}>FROM NZD 249 · ONE PAYMENT</div>
          </a>
          <div style={{ padding: '28px 22px', minHeight: 230 }}>
            <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: v4.inkMuted, textTransform: 'uppercase', marginBottom: 14 }}>Plus the capstone</div>
            <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.5, margin: '0 0 10px' }}>One sample report, worked to a one-page verdict.</h3>
            <p style={{ fontSize: 13.5, color: v4.inkMuted, margin: 0 }}>Lesson 7.09: the scan, the flags, the ranking.</p>
          </div>
        </div>
      </div>

      {/* FREE TOOLS */}
      <div style={{ background: v4.ink, color: v4.bg, padding: '64px 36px' }} id="tools">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 36 }}>
          <div>
            <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: accent, textTransform: 'uppercase', marginBottom: 12 }}>§03 · Take these</div>
            <h2 style={{ fontSize: 88, fontWeight: 800, letterSpacing: -3.5, lineHeight: 0.92, margin: 0 }}>
              Free<br/><span style={{ color: accent }}>tools</span>.
            </h2>
          </div>
          <div style={{ maxWidth: 380, fontSize: 16, color: '#bdbdbd', lineHeight: 1.5 }}>
            Working spreadsheets and checklists, built for real files. Take them whether or not you ever pay us a cent.
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', border: `1.5px solid ${v4.bg}` }}>
          {[
            { id: 'T-01', t: 'Quality of Earnings Checklist', d: '47 items', fmt: 'CSV', highlight: true },
            { id: 'T-02', t: 'Multiples Scorecard', d: '12 factors', fmt: 'CSV' },
            { id: 'T-03', t: 'Report Review Checklist', d: '30-min scan', fmt: 'Printable page' },
            { id: 'T-04', t: 'SME WACC Build-up', d: 'NZ inputs, May 2026', fmt: 'CSV' },
            { id: 'T-05', t: 'Sample Chapter', d: 'Ch 3, QofE', fmt: 'Printable page' },
          ].map((tool, i) => (
            <a key={tool.id} href={`tool.html?id=${tool.id}`} style={{
              padding: '20px 18px', borderRight: i === 4 ? 'none' : `1.5px solid ${v4.bg}`,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: 220, background: tool.highlight ? accent : v4.ink,
              color: tool.highlight ? v4.ink : v4.bg, textDecoration: 'none',
            }}>
              <div>
                <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, opacity: 0.7, marginBottom: 14 }}>{tool.id}</div>
                <h4 style={{ fontSize: 19, fontWeight: 700, letterSpacing: -0.4, margin: '0 0 8px', lineHeight: 1.1 }}>{tool.t}</h4>
                <div style={{ fontSize: 13, opacity: 0.7 }}>{tool.d}</div>
              </div>
              <div>
                <div style={{ fontFamily: v4.mono, fontSize: 10.5, letterSpacing: 1.5, opacity: 0.6, marginBottom: 8 }}>{tool.fmt}</div>
                <div style={{ fontFamily: v4.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase' }}>
                  ↓ Get it free
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>

      {/* QUOTE */}
      <div style={{ padding: '88px 36px', background: accent, borderTop: `1.5px solid ${v4.ink}`, borderBottom: `1.5px solid ${v4.ink}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, marginBottom: 24, textTransform: 'uppercase' }}>"</div>
          <p style={{ fontSize: 52, fontWeight: 700, letterSpacing: -1.6, lineHeight: 1.05, margin: 0 }}>
            A valuation is a <em style={{ fontStyle: 'italic', fontWeight: 800 }}>structured guess</em> about a future cash flow, made by someone with a stake in the answer. Everything else is the discipline of making that guess credible.
          </p>
          <div style={{ marginTop: 28, fontFamily: v4.mono, fontSize: 12, letterSpacing: 2, textTransform: 'uppercase' }}>— Keelvalue, Chapter 01</div>
        </div>
      </div>

      {/* PRICING */}
      <div style={{ padding: '64px 36px' }} id="pricing">
        <div style={{ marginBottom: 36 }}>
          <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: v4.inkMuted, textTransform: 'uppercase', marginBottom: 12 }}>§04 · Pricing</div>
          <h2 style={{ fontSize: 88, fontWeight: 800, letterSpacing: -3.5, lineHeight: 0.92, margin: 0 }}>Three tiers.<br/>One payment.</h2>
        </div>
        <V4ValueMath compact />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', border: `1.5px solid ${v4.ink}` }}>
          {window.VC_TIERS.map(t => ({ tier: t.name.toUpperCase(), sub: t.sub, price: t.price, per: t.per, accent: t.id === 'deal' ? accent : v4.bg, perks: t.perks, cta: t.cta, href: t.href })).map((p, i) => (
            <div key={p.tier} style={{
              padding: '32px 26px', borderRight: i === 2 ? 'none' : `1.5px solid ${v4.ink}`,
              background: p.accent, minHeight: 420, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              position: 'relative',
            }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 24 }}>
                  <h3 style={{ fontSize: 28, fontWeight: 800, letterSpacing: -0.8, margin: 0 }}>{p.tier}</h3>
                  <span style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, color: v4.inkMuted, textTransform: 'uppercase' }}>{p.sub}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontSize: 14 }}>NZD</span>
                  <span style={{ fontSize: 88, fontWeight: 800, letterSpacing: -4, lineHeight: 0.9 }}>${p.price}</span>
                  {p.per && <span style={{ fontSize: 14 }}>{p.per}</span>}
                </div>
                <div style={{ marginTop: 28, paddingTop: 22, borderTop: `1.5px solid ${v4.ink}` }}>
                  {p.perks.map(perk => (
                    <div key={perk} style={{ display: 'flex', gap: 12, padding: '6px 0', fontSize: 14 }}>
                      <span style={{ fontFamily: v4.mono, fontWeight: 700 }}>+</span>
                      <span>{perk}</span>
                    </div>
                  ))}
                </div>
              </div>
              {p.href ? (
                <a href={p.href} style={{
                  marginTop: 28, background: v4.ink, color: v4.bg, border: 0, display: 'block', textAlign: 'center',
                  padding: '14px 0', fontFamily: v4.mono, fontSize: 13, fontWeight: 700,
                  letterSpacing: 2, textTransform: 'uppercase', textDecoration: 'none',
                }}>{p.cta}</a>
              ) : (
                <div aria-disabled="true" style={{
                  marginTop: 28, background: 'transparent', color: v4.ink, border: `1.5px dashed ${v4.ink}`, textAlign: 'center',
                  padding: '13px 0', fontFamily: v4.mono, fontSize: 13, fontWeight: 700,
                  letterSpacing: 2, textTransform: 'uppercase', cursor: 'default',
                }}>{p.cta}</div>
              )}
            </div>
          ))}
        </div>
      </div>

      <V4Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Color" />
        <TweakColor label="Primary"   value={t.accent}    options={['#f2e600', '#e83d2c', '#2d8c5b', '#3a4cff', '#ff7a1a', '#ffffff']} onChange={(v) => setTweak('accent', v)} />
        <TweakColor label="Secondary" value={t.secondary} options={['#e83d2c', '#f2e600', '#3a4cff', '#2d8c5b', '#9d4edd', '#0d0d0d']} onChange={(v) => setTweak('secondary', v)} />
        <TweakSection label="Layout" />
        <TweakRadio  label="Density"  value={t.density}   options={[{ value: 'comfortable', label: 'Roomy' }, { value: 'tight', label: 'Tight' }]} onChange={(v) => setTweak('density', v)} />
      </TweaksPanel>
    </div>
  );
}

window.V4Landing = V4Landing;