// v4/shared.jsx — shared theme + chrome for the brutalist site.

window.v4 = {
  bg: '#f2f0e9',
  paper: '#ffffff',
  ink: '#0d0d0d',
  inkSoft: '#2a2a2a',
  inkMuted: '#5e5e5e',
  inkDim: '#9e9e9e',
  line: '#0d0d0d',
  lineSoft: '#d6d4cc',
  yellow: '#f2e600',
  red: '#e83d2c',
  sans: '"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif',
  mono: '"Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace',
};

const v4 = window.v4;

const V4_CLOCKS = [
  ['AKL', 'Pacific/Auckland'], ['LON', 'Europe/London'],
  ['NYC', 'America/New_York'], ['HKG', 'Asia/Hong_Kong'],
];

function v4ClockString() {
  const now = new Date();
  return V4_CLOCKS.map(([code, tz]) => {
    try {
      const t = new Intl.DateTimeFormat('en-GB', { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: false }).format(now);
      return `${code} ${t}`;
    } catch (e) { return code; }
  }).join(' · ');
}

function V4UtilityBar({ live = '● Chapter 01 free · No card · No email' }) {
  const [clock, setClock] = React.useState(v4ClockString);
  React.useEffect(() => {
    const id = setInterval(() => setClock(v4ClockString()), 30000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="gc-util" style={{
      background: v4.ink, color: v4.bg, padding: '8px 36px',
      display: 'flex', justifyContent: 'space-between', fontFamily: v4.mono,
      fontSize: 11, letterSpacing: 2, textTransform: 'uppercase',
    }}>
      <span>{live}</span>
      <span>EN / 中文</span>
      <span>{clock}</span>
    </div>
  );
}

function V4Nav({ current }) {
  const items = [
    ['Curriculum', 'chapter.html'],
    ['Tools', 'tools.html'],
    ['Calculator', 'bridge.html'],
    ['Cases', 'article.html'],
    ['Pricing', 'pricing.html'],
  ];
  const access = window.useVCAccess ? window.useVCAccess() : null;
  const cta = access && access.product ? ['Library →', 'library.html'] : ['Start Free ↗', 'landing.html#cta'];
  return (
    <div className="gc-nav" style={{
      padding: '24px 36px', display: 'flex', justifyContent: 'space-between',
      alignItems: 'center', borderBottom: `1.5px solid ${v4.ink}`, background: v4.bg,
    }}>
      <a href="landing.html" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', color: v4.ink }}>
        {/* Brand mark (images/brand/, 2026-10-26): at icon sizes it is always the yellow V on an ink square. */}
        <svg width="40" height="40" viewBox="0 0 128 128" role="img" aria-label="Keelvalue" style={{ flex: 'none', display: 'block' }}>
          <rect width="128" height="128" fill={v4.ink} />
          <g transform="translate(-1 1)" fill={v4.yellow}><path d="M26 26H48L65 84V100H55Z" /><path d="M81 26H104L77 100H67V84Z" /></g>
        </svg>
        <div>
          <div style={{ fontWeight: 700, fontSize: 23, lineHeight: 1 }}>keelvalue</div>
          <div className="gc-logo-sub" style={{ fontSize: 11, color: v4.inkMuted, fontFamily: v4.mono, letterSpacing: 2, marginTop: 4, textTransform: 'uppercase' }}>SME Valuation · Curriculum &amp; Tools</div>
        </div>
      </a>
      <div className="gc-nav-links" style={{ display: 'flex', gap: 8 }}>
        {items.map(([label, href]) => (
          <a key={label} href={href} style={{
            padding: '8px 14px', border: `1.5px solid ${v4.ink}`,
            fontSize: 12, fontWeight: 600, fontFamily: v4.mono,
            letterSpacing: 1.5, textTransform: 'uppercase',
            background: current === label ? v4.ink : v4.bg,
            color: current === label ? v4.bg : v4.ink,
            textDecoration: 'none',
          }}>{label}</a>
        ))}
        <a href={cta[1]} style={{
          padding: '8px 14px', background: v4.yellow, color: v4.ink,
          border: `1.5px solid ${v4.ink}`,
          fontSize: 12, fontWeight: 700, fontFamily: v4.mono,
          letterSpacing: 1.5, textTransform: 'uppercase', textDecoration: 'none',
        }}>{cta[0]}</a>
      </div>
    </div>
  );
}

function V4Footer() {
  return (
    <>
      <div style={{ padding: '64px 36px', borderTop: `1.5px solid ${v4.ink}`, background: v4.ink, color: v4.bg }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: v4.yellow, textTransform: 'uppercase', marginBottom: 14 }}>The newsletter · launching soon</div>
            <h2 style={{ fontSize: 72, fontWeight: 800, letterSpacing: -3, lineHeight: 0.9, margin: 0 }}>
              One case.<br/>Every Tuesday.
            </h2>
            <p style={{ fontSize: 16, color: '#bdbdbd', maxWidth: 540, marginTop: 18 }}>
              SME valuation cases, opened up. The broker&rsquo;s number, the buyer&rsquo;s number, and the three judgment calls in between. Sign-up opens with the first issue.
            </p>
          </div>
          <div>
            <a href="article.html" style={{
              display: 'block', textAlign: 'center', background: v4.yellow, color: v4.ink,
              border: `1.5px solid ${v4.yellow}`, padding: '18px 22px', fontFamily: v4.mono,
              fontSize: 13, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', textDecoration: 'none',
            }}>Read case №047 free →</a>
            <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, color: '#888', marginTop: 12, textTransform: 'uppercase' }}>
              Until then: Chapter 01 and all 8 tools are free on the site.
            </div>
          </div>
        </div>
      </div>
      <div className="gc-foot-bar" style={{ padding: '20px 36px', background: v4.ink, color: '#888', display: 'flex', justifyContent: 'space-between', fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', borderTop: '1px solid #2a2a2a' }}>
        <span>© 2026 KEELVALUE</span>
        <span style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <a href="terms.html#terms" style={{ color: '#bdbdbd' }}>Terms</a>
          <a href="terms.html#refunds" style={{ color: '#bdbdbd' }}>Refunds</a>
          <a href="terms.html#privacy" style={{ color: '#bdbdbd' }}>Privacy</a>
          {window.VC_CONTACT_EMAIL ? <a href={`mailto:${window.VC_CONTACT_EMAIL}`} style={{ color: '#bdbdbd', textTransform: 'none' }}>{window.VC_CONTACT_EMAIL}</a> : <a href="terms.html#contact" style={{ color: '#bdbdbd' }}>Contact</a>}
        </span>
        <a href="#" onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ color: '#888', textDecoration: 'none' }}>↑ TO TOP</a>
      </div>
    </>
  );
}

/* ── Contact: the one place the public email address is set (footer, terms page, library, pricing) ── */
window.VC_CONTACT_EMAIL = 'hello@keelvalue.com';

/* ── Seller name on the site: empty on purpose. Michael 2026-10-26: the site does not show the company behind
   Keelvalue (same as Greenwake Isle). Stripe holds the legal entity; customers see "Keelvalue". If ever filled,
   the terms page shows it; nothing depends on it. ── */
window.VC_SELLER = '';

/* ── Pricing: single source of truth (landing, pricing page, chapters, lessons, tools) ── */
window.VC_TIERS = [
  { id: 'free', name: 'Free', price: '0', per: '', sub: 'No card · no email',
    perks: ['Chapter 01, in full', 'The first lesson of every chapter', 'All 8 tools as CSV and print-ready pages', 'The earnings-bridge calculator, on screen'],
    cta: 'Start reading →', href: 'chapter-01.html' },
  { id: 'deal', name: 'Deal Pack', price: '249', per: 'one payment', sub: 'For a live deal · 90 days',
    perks: ['Every lesson, for 90 days', '4 Excel workbooks with live formulas', 'Earnings-bridge exports: one-page PDF + Excel'],
    cta: 'Get the Deal Pack →', href: 'pricing.html#deal' },
  { id: 'full', name: 'Complete', price: '490', per: 'one payment', sub: 'No expiry',
    perks: ['Every lesson, no expiry', 'All 6 Excel workbooks', 'Earnings-bridge exports: one-page PDF + Excel', 'Chapter quizzes and completion records'],
    cta: 'Get Complete →', href: 'pricing.html#full' },
];

window.VC_WORKBOOKS = [
  { id: 'bridge', cover: 'earnings-bridge', t: 'Earnings Bridge', d: 'Reported to transferable EBITDA, line by line, with a value range.', tier: 'deal' },
  { id: 'qofe', cover: 'qofe-checklist', t: 'Quality of Earnings Checklist', d: 'All 47 items, classification drop-downs and running totals.', tier: 'deal' },
  { id: 'multiples', cover: 'multiples-scorecard', t: 'Multiples Quality Scorecard', d: 'Twelve factors, weights and a ±50% cap, to a concluded multiple.', tier: 'deal' },
  { id: 'earnout', cover: 'earnout-structuring', t: 'Earn-out Structuring', d: 'Close, earn-out and escrow split, and the present value of the contingent part.', tier: 'deal' },
  { id: 'wacc', cover: 'nz-wacc-buildup', t: 'NZ WACC Build-up', d: 'Risk-free, ERP, size and specific risk, debt and weights, with a source and date per input.', tier: 'full' },
  { id: 'compset', cover: 'comparable-set-audit', t: 'Comparable-Set Audit', d: 'Six tests per comparable, and the median multiple of the ones that pass.', tier: 'full' },
];

/** React hook over window.VCAccess (access.js): re-renders when an access code is redeemed or cleared. */
window.useVCAccess = function useVCAccess() {
  const get = () => (window.VCAccess ? window.VCAccess.state() : { product: null });
  const [st, setSt] = React.useState(get);
  React.useEffect(() => {
    const h = () => setSt(get());
    window.addEventListener('vc-access', h);
    if (window.VCAccess) window.VCAccess.ready.then(h);
    return () => window.removeEventListener('vc-access', h);
  }, []);
  return st;
};

/** "Two ways in" block: what the paid tiers actually contain. */
function V4PaidOffer({ kicker = 'What unlocks the rest', title = <>Two ways in.</> }) {
  const tiers = window.VC_TIERS.filter(t => t.id !== 'free');
  return (
    <div style={{ background: v4.ink, color: v4.bg, padding: '64px 36px' }}>
      <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: v4.yellow, textTransform: 'uppercase', marginBottom: 14 }}>§ {kicker}</div>
      <h2 style={{ fontSize: 72, fontWeight: 800, letterSpacing: -3, lineHeight: 0.92, margin: '0 0 36px' }}>{title}</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', border: `1.5px solid ${v4.bg}` }}>
        {tiers.map((t, i) => (
          <a key={t.id} href={t.href} style={{ padding: '28px 26px', borderRight: i === 0 ? `1.5px solid ${v4.bg}` : 'none', textDecoration: 'none', color: v4.bg, background: i === 1 ? '#1d1c18' : 'transparent', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: v4.yellow, textTransform: 'uppercase' }}>{t.sub}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 34, fontWeight: 800, letterSpacing: -1 }}>{t.name}</span>
              <span style={{ fontFamily: v4.mono, fontSize: 15, color: '#bdbdbd' }}>NZD {t.price} · {t.per}</span>
            </div>
            {t.perks.map(p => <div key={p} style={{ fontSize: 15, color: '#d8d6cf' }}>+ {p}</div>)}
            <div style={{ marginTop: 8, fontFamily: v4.mono, fontSize: 12, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', color: v4.yellow }}>{t.cta}</div>
          </a>
        ))}
      </div>
    </div>
  );
}

/** Access-code entry. Verifies the signature in this browser (access.js); nothing is sent anywhere. */
function V4CodeForm({ dark = false, onDone }) {
  const access = window.useVCAccess();
  const [code, setCode] = React.useState('');
  const [msg, setMsg] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const fg = dark ? v4.bg : v4.ink, bg = dark ? v4.ink : v4.paper;
  const submit = async (e) => {
    e.preventDefault();
    if (!code.trim() || !window.VCAccess) return;
    setBusy(true); setMsg(null);
    const r = await window.VCAccess.redeem(code);
    setBusy(false);
    if (r.ok) { setCode(''); setMsg({ ok: true, t: 'Unlocked in this browser.' }); if (onDone) onDone(); }
    else setMsg({ ok: false, t: r.reason });
  };
  return (
    <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <label htmlFor="vc-code" style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: dark ? '#bdbdbd' : v4.inkMuted }}>Access code</label>
      <textarea id="vc-code" value={code} onChange={e => setCode(e.target.value)} rows={3} spellCheck={false} autoCapitalize="off" autoCorrect="off"
        placeholder="VC1.…" style={{ width: '100%', boxSizing: 'border-box', padding: '12px', fontFamily: v4.mono, fontSize: 13, lineHeight: 1.4, border: `1.5px solid ${fg}`, background: bg, color: fg, borderRadius: 0, resize: 'vertical', wordBreak: 'break-all' }} />
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <button type="submit" disabled={busy} style={{ background: v4.yellow, color: v4.ink, border: `1.5px solid ${v4.ink}`, padding: '12px 18px', fontFamily: v4.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', cursor: 'pointer' }}>{busy ? 'Checking…' : 'Unlock →'}</button>
        {msg ? <span role="status" style={{ fontSize: 14, color: msg.ok ? fg : v4.red }}>{msg.ok ? '✓ ' : ''}{msg.t}</span> : null}
      </div>
      {access && access.product ? <div style={{ fontSize: 13, color: dark ? '#bdbdbd' : v4.inkMuted }}>This browser has {access.name}{access.until ? `, until ${access.until}` : ', no expiry'}.</div> : null}
    </form>
  );
}

/** "What one line of judgment is worth" — value arithmetic from the site's own teaching case №047.
 *  Shows the size of one judgment call; it is not a promise about anyone's deal. No fear framing. */
const VC_VALUE_LINE = { amount: 225000, ask: 4.5, paid: 2.1 };   // article.html: rent line −$225k; ask $5.4M on $1.2M = 4.5×; buyer paid 2.1×

function V4ValueMath({ compact = false }) {
  const { amount, ask, paid } = VC_VALUE_LINE;
  const fmt = (n) => '$' + Math.round(n).toLocaleString('en-NZ');
  const atAsk = amount * ask, atPaid = amount * paid;
  const million = (n) => '$' + (n / 1e6).toFixed(2) + 'M';
  if (compact) return (
    <div style={{ display: 'flex', gap: 18, alignItems: 'baseline', flexWrap: 'wrap', padding: '18px 22px', border: `1.5px solid ${v4.ink}`, borderBottom: 0, background: v4.paper }}>
      <span style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: v4.inkMuted }}>What one line is worth</span>
      <span style={{ fontSize: 16, flex: '1 1 420px' }}>
        In teaching case №047, the related-party rent line took <b>{fmt(amount)}</b> off EBITDA. At the <b>{ask}×</b> asking multiple that one line is about <b style={{ background: v4.yellow, padding: '0 4px' }}>{million(atAsk)}</b> of price. Illustrative: it shows what a judgment call is worth, not what your deal will be.
      </span>
      <a href="pricing.html#value" style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase' }}>See the arithmetic →</a>
    </div>
  );
  const term = (big, label, hl) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 72, fontWeight: 800, letterSpacing: -3, lineHeight: 1, background: hl ? v4.yellow : 'transparent', padding: hl ? '0 10px' : 0 }}>{big}</span>
      <span style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: v4.inkMuted }}>{label}</span>
    </div>
  );
  const op = (c) => <span style={{ fontSize: 44, fontWeight: 300, color: v4.inkMuted, alignSelf: 'flex-start', marginTop: 10 }}>{c}</span>;
  return (
    <div id="value" style={{ padding: '56px 36px', borderBottom: `1.5px solid ${v4.ink}`, background: v4.paper, scrollMarginTop: 12 }}>
      <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: v4.inkMuted, textTransform: 'uppercase', marginBottom: 22 }}>§ What one line of judgment is worth · teaching case №047</div>
      <div style={{ display: 'flex', gap: 22, alignItems: 'flex-start', flexWrap: 'wrap' }}>
        {term('−' + fmt(amount), 'One EBITDA line: related-party rent')}
        {op('×')}
        {term(ask + '×', 'The multiple in the asking price')}
        {op('=')}
        {term('≈ ' + million(atAsk), `${fmt(amount)} × ${ask} = ${fmt(atAsk)} of price`, true)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, marginTop: 34, maxWidth: 1100 }}>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: v4.inkSoft, margin: 0 }}>
          In the case, the company rented its warehouse from the owners’ family at about 40% of the market rate. A new owner pays market rent, so bringing the rent to market took {fmt(amount)} a year off EBITDA. The asking price was $5.4M on $1.2M of reported EBITDA, which is {ask}×. At that multiple, this single line accounts for about {million(atAsk)} of the price.
        </p>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: v4.inkSoft, margin: 0 }}>
          The multiple matters as much as the line. At the {paid}× the buyer finally paid, the same line is about {fmt(Math.round(atPaid / 10000) * 10000)}. That is the point of showing the arithmetic: one well-defended line changes the price by a multiple of itself, in either direction. Chapter III is about finding and defending lines like this one.
        </p>
      </div>
      <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', alignItems: 'center', marginTop: 24 }}>
        <a href="article.html" style={{ fontFamily: v4.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', padding: '11px 14px', border: `1.5px solid ${v4.ink}`, textDecoration: 'none' }}>Read the case, free →</a>
        <a href="bridge.html" style={{ fontFamily: v4.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', padding: '11px 14px', border: `1.5px solid ${v4.ink}`, background: v4.yellow, textDecoration: 'none' }}>Run your own numbers →</a>
      </div>
      <div style={{ fontSize: 12.5, color: v4.inkMuted, marginTop: 18, maxWidth: 900 }}>
        Case №047 is an illustrative teaching case, not a real transaction. The arithmetic shows what one judgment call can be worth on that file. It says nothing about what any other business is worth, and it is not a promise of any result.
      </div>
    </div>
  );
}

Object.assign(window, { V4UtilityBar, V4Nav, V4Footer, V4PaidOffer, V4CodeForm, V4ValueMath });