// v4/chapter-page.jsx — Chapter III detail (curriculum sample / paid product).

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

  const lessons = [
    { n: '3.01', t: 'What "Quality of Earnings" actually means',   d: 'Reported vs sustainable vs transferable earnings — three layers, one number on the page.',          mins: 4,  free: true },
    { n: '3.02', t: 'The five categories of normalisation',       d: 'Owner, family, related-party, non-recurring, accounting policy. Why each requires a different lens.', mins: 4, free: true },
    { n: '3.03', t: 'Owner remuneration: replacement-cost framing', d: 'The role is rarely one role. How to defend a market-salary substitute the buyer cannot pick apart.',  mins: 5 },
    { n: '3.04', t: 'Family on payroll',                          d: 'Spouse, child, parent: defensible, partially defensible, indefensible. A column for each in your file.', mins: 4 },
    { n: '3.05', t: 'The car, the trip, the credit card',         d: 'The three categories of personal mix that show up on every SME P&L, and how to bound them.',          mins: 4 },
    { n: '3.06', t: 'Related-party rent and royalties',           d: 'Arm\'s-length is a test, not a checkbox. Building a defensible comparable for property leases.',       mins: 4 },
    { n: '3.07', t: 'Working capital, properly normalised',       d: 'Not just average days. The mid-cycle problem, the seasonality problem, the supply-shock problem.',     mins: 4 },
    { n: '3.08', t: 'Capex: maintenance vs growth',               d: 'The split most analysts get wrong, and why it changes both FCF and the multiple you can support.',    mins: 4 },
    { n: '3.09', t: 'Off-balance-sheet and contingent items',     d: 'IP held personally. Personal guarantees. Operating leases pre-IFRS 16. The hidden liabilities.',       mins: 4 },
  ];

  return (
    <div style={{ width: '100%', background: v4.bg, color: v4.ink, fontFamily: v4.sans, fontSize: 15, lineHeight: 1.5 }}>
      <V4UtilityBar live="● CHAPTER III · 3.01–3.02 free · Rest in the paid tiers" />
      <V4Nav current="Curriculum" />

      {/* Breadcrumb */}
      <div style={{ padding: '14px 36px', borderBottom: `1.5px solid ${v4.ink}`, display: 'flex', gap: 12, fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: v4.inkMuted }}>
        <a href="landing.html" style={{ color: v4.inkMuted, textDecoration: 'none' }}>Keelvalue</a>
        <span>/</span>
        <a href="landing.html#curriculum" style={{ color: v4.inkMuted, textDecoration: 'none' }}>Curriculum</a>
        <span>/</span>
        <span style={{ color: v4.ink }}>§ III · Quality of Earnings</span>
      </div>

      {/* HERO — chapter cover */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: `4px solid ${v4.ink}` }}>
        <div style={{ padding: '64px 36px', borderRight: `1.5px solid ${v4.ink}` }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, fontFamily: v4.mono, fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 28 }}>
            <span style={{ background: accent2, color: v4.bg, padding: '4px 10px', fontWeight: 700 }}>CHAPTER §III</span>
            <span style={{ color: v4.inkMuted }}>The 80% chapter</span>
          </div>
          <h1 style={{
            fontSize: 120, fontWeight: 800, letterSpacing: -6, lineHeight: 0.88, margin: 0,
          }}>
            Quality of<br/>
            <span style={{ color: accent2 }}>Earnings.</span>
          </h1>
          <img
            src="images/chapters/ch03.webp"
            alt="Translucent adjustment blocks extend beyond an opaque core whose shorter shadow represents transferable earnings."
            width={1600} height={900} decoding="async"
            style={{ display: 'block', width: '100%', height: 'auto', marginTop: 32 }}
          />
          <p style={{ fontSize: 19, lineHeight: 1.5, color: v4.inkSoft, marginTop: 28, maxWidth: 520 }}>
            The earnings figure printed on the financial statements is rarely the earnings figure a buyer is willing to capitalise. This chapter is the bridge between them — nine lessons, a 47-item checklist and one worked case.
          </p>
          <div style={{ display: 'flex', gap: 24, marginTop: 36, paddingTop: 22, borderTop: `1.5px solid ${v4.ink}`, fontFamily: v4.mono, fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase' }}>
            <div><div style={{ fontSize: 36, fontWeight: 800, letterSpacing: -1.2 }}>9</div><div style={{ color: v4.inkMuted, marginTop: 4 }}>lessons</div></div>
            <div><div style={{ fontSize: 36, fontWeight: 800, letterSpacing: -1.2 }}>37m</div><div style={{ color: v4.inkMuted, marginTop: 4 }}>reading</div></div>
            <div><div style={{ fontSize: 36, fontWeight: 800, letterSpacing: -1.2 }}>47</div><div style={{ color: v4.inkMuted, marginTop: 4 }}>checklist items</div></div>
            <div><div style={{ fontSize: 36, fontWeight: 800, letterSpacing: -1.2 }}>3</div><div style={{ color: v4.inkMuted, marginTop: 4 }}>worked cases</div></div>
          </div>
        </div>

        <div style={{ padding: '64px 36px', background: v4.ink, color: v4.bg, position: 'relative' }}>
          <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 3, color: accent, textTransform: 'uppercase' }}>The shock chart</div>
          <h3 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, margin: '10px 0 24px', lineHeight: 1.1, color: v4.bg }}>
            One real business. Four entries. <span style={{ color: accent }}>$720,000 of EBITDA</span> — gone.
          </h3>

          {/* Mini bar chart */}
          <div style={{ marginTop: 8 }}>
            {[
              { label: 'Reported EBITDA',   val: 1200, color: v4.bg, pct: 100 },
              { label: 'After owner adjustment',     val: 1020, color: '#dcdcdc', pct: 85 },
              { label: 'After family payroll',       val: 800,  color: '#bcbcbc', pct: 67 },
              { label: 'After personal mix',         val: 705,  color: '#9a9a9a', pct: 59 },
              { label: 'After related-party rent',   val: 480,  color: accent,    pct: 40 },
            ].map(r => (
              <div key={r.label} style={{ marginBottom: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: '#bdbdbd', fontFamily: v4.mono, letterSpacing: 0.5, marginBottom: 5 }}>
                  <span>{r.label}</span>
                  <span style={{ color: v4.bg }}>${r.val}K</span>
                </div>
                <div style={{ height: 14, background: '#2a2a2a', border: `1px solid #3a3a3a` }}>
                  <div style={{ height: '100%', width: `${r.pct}%`, background: r.color }} />
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 28, padding: 18, background: accent, color: v4.ink }}>
            <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 6 }}>The Lesson</div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.4, lineHeight: 1.3 }}>
              At 4.5× the broker priced $5.4M. At 2.1× the buyer paid $1.0M. Same numbers, different EBITDA.
            </div>
          </div>
        </div>
      </div>

      {/* LESSONS TABLE */}
      <div style={{ padding: '64px 36px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 28 }}>
          <h2 style={{ fontSize: 72, fontWeight: 800, letterSpacing: -3, lineHeight: 0.92, margin: 0 }}>
            The nine lessons.
          </h2>
          <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 1.5, color: v4.inkMuted, textTransform: 'uppercase', textAlign: 'right' }}>
            <div>Start anywhere</div>
          </div>
        </div>

        <div style={{ border: `1.5px solid ${v4.ink}`, background: v4.paper }}>
          {/* table head */}
          <div style={{
            display: 'grid', gridTemplateColumns: '90px 1.2fr 2.2fr 100px 120px',
            background: v4.ink, color: v4.bg, padding: '14px 22px', fontFamily: v4.mono,
            fontSize: 10.5, letterSpacing: 2, textTransform: 'uppercase',
          }}>
            <span>№</span><span>Lesson</span><span>Brief</span><span>Length</span><span style={{ textAlign: 'right' }}>Access</span>
          </div>
          {lessons.map((l, i) => (
            <a key={l.n} href={`lesson-3-${l.n.split('.')[1]}.html`} style={{
              textDecoration: 'none', color: v4.ink,
              display: 'grid', gridTemplateColumns: '90px 1.2fr 2.2fr 100px 120px',
              padding: '20px 22px', borderTop: i === 0 ? 'none' : `1px solid ${v4.lineSoft}`,
              alignItems: 'center', gap: 12,
            }}>
              <span style={{ fontFamily: v4.mono, fontSize: 14, fontWeight: 700, color: i === 0 ? accent2 : v4.ink }}>{l.n}</span>
              <span style={{ fontSize: 17, fontWeight: 700, letterSpacing: -0.3 }}>{l.t}</span>
              <span style={{ fontSize: 13.5, color: v4.inkMuted, lineHeight: 1.5 }}>{l.d}</span>
              <span style={{ fontFamily: v4.mono, fontSize: 13, color: v4.inkMuted }}>{l.mins} min</span>
              <span style={{ textAlign: 'right' }}>
                <span style={{
                  padding: '4px 10px', background: l.free ? accent : v4.ink,
                  color: l.free ? v4.ink : v4.bg, fontFamily: v4.mono, fontSize: 10.5,
                  fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
                }}>{l.free ? 'Read free ▸' : 'Paid'}</span>
              </span>
            </a>
          ))}
        </div>
      </div>

      {/* WHAT THE PAID TIERS CONTAIN */}
      <V4PaidOffer />

      {/* INSTRUCTOR / METHOD STRIP */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr', borderBottom: `1.5px solid ${v4.ink}` }}>
        <div style={{ padding: '64px 36px', borderRight: 'none' }}>
          <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: v4.inkMuted, textTransform: 'uppercase', marginBottom: 14 }}>§ Method note</div>
          <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: -2.2, lineHeight: 0.96, margin: '0 0 24px' }}>
            How this chapter is built.
          </h2>
          <p style={{ fontSize: 16.5, color: v4.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 720 }}>
            The 47-item checklist is organised around the five normalisation categories, and every item is there for one reason: it is the kind of line that moves a price between reported and transferable earnings. Nothing is included for completeness alone.
          </p>
          <p style={{ fontSize: 16.5, color: v4.inkSoft, lineHeight: 1.6, margin: 0, maxWidth: 720 }}>
            It treats owner-occupier leases in the light of IFRS 16, which changed how operating leases sit on SME books, and gives family payroll a lesson of its own (3.04).
          </p>
        </div>
      </div>

      {/* CTA / paywall */}
      <div style={{ padding: '80px 36px', background: accent, borderBottom: `1.5px solid ${v4.ink}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase', marginBottom: 14 }}>↘ Access</div>
            <h2 style={{ fontSize: 84, fontWeight: 800, letterSpacing: -3.4, lineHeight: 0.9, margin: 0 }}>
              Two free lessons.<br/>Seven in the paid tiers.
            </h2>
            <p style={{ fontSize: 17, color: v4.inkSoft, maxWidth: 540, marginTop: 18 }}>
              You can read 3.01 and 3.02 right now — no card, no email. The other seven unlock with the Deal Pack or Complete, along with the Quality of Earnings workbook.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href="lesson-3-01.html" style={{
              background: v4.ink, color: v4.bg, padding: '20px 24px',
              fontFamily: v4.mono, fontSize: 14, fontWeight: 700, letterSpacing: 2,
              textTransform: 'uppercase', textDecoration: 'none', textAlign: 'center',
            }}>▸ Read lesson 3.01 — free</a>
            <a href="pricing.html" style={{
              background: v4.bg, color: v4.ink, padding: '20px 24px',
              border: `1.5px solid ${v4.ink}`,
              fontFamily: v4.mono, fontSize: 14, fontWeight: 700, letterSpacing: 2,
              textTransform: 'uppercase', textDecoration: 'none', textAlign: 'center',
            }}>See pricing · from NZD 249 →</a>
            <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, color: v4.inkMuted, textTransform: 'uppercase', textAlign: 'center', marginTop: 8 }}>
              Deal Pack NZD 249 · Complete NZD 490
            </div>
          </div>
        </div>
      </div>

      <V4Footer />
    </div>
  );
}

window.V4Chapter = V4Chapter;