// Caret landing — Section 2 (the loop it removes) + Section 3 (the demo, a Mac-window faux recording)

function SectionHead({ eyebrow, title, sub, center, light }) {
  return (
    <div className={'shead' + (center ? ' center' : '')}>
      <Eyebrow onMesh={light}>{eyebrow}</Eyebrow>
      <h2 style={light ? { color: '#fff' } : null}>{title}</h2>
      {sub && <p style={light ? { color: 'rgba(255,255,255,0.9)' } : null}>{sub}</p>}
    </div>
  );
}

// ——— Section 2 — the loop it removes ———
function TheLoop() {
  const before = [
    'Copy the text',
    '⌘Tab to ChatGPT',
    '⌘V, type a prompt',
    'Wait. Read. ⌘C',
    '⌘Tab back, ⌘V',
  ];
  return (
    <section id="how" className="section">
      <div className="wrap">
        <Reveal><SectionHead eyebrow="The loop it removes" title="A short sequence. A lot less switching."
          sub="The daily copy → switch → paste → prompt → copy → paste loop, replaced by a short keyboard sequence that keeps you in your app." /></Reveal>
        <Reveal delay={80} style={{ marginTop: 44 }}>
          <div className="ba-grid">
            <div className="ba-col ba-before">
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 14 }}>
                <Icon name="rotate-ccw" size={17} color="var(--fg3)" />
                <span className="eyebrow">Before</span>
              </div>
              {before.map((b, i) => (
                <div className="ba-step" key={i}>
                  <span className="n">{String(i + 1).padStart(2, '0')}</span>
                  <span className="ba-strike">{b}</span>
                </div>
              ))}
              <div style={{ marginTop: 14, fontSize: 14, color: 'var(--fg3)' }}>Lose your place. Repeat 30× a day.</div>
            </div>

            <div className="ba-arrow"><Icon name="arrow-right" size={26} /></div>

            <div className="ba-col ba-after">
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 18 }}>
                <Icon name="zap" size={17} color="var(--accent)" fill="var(--accent)" stroke={0} />
                <span className="eyebrow" style={{ color: 'var(--accent)' }}>After</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <Combo keys={['⌥', 'Space']} lg /><Icon name="chevron-right" size={18} color="var(--fg4)" />
                <Key lg>ss</Key><Icon name="chevron-right" size={18} color="var(--fg4)" />
                <Key lg>↩</Key><Icon name="chevron-right" size={18} color="var(--fg4)" />
                <Combo keys={['⌘', '⇧', '↩']} lg />
              </div>
              <div style={{ marginTop: 22, padding: 16, borderRadius: 12, background: 'var(--accent-soft)' }}>
                <div style={{ fontSize: 13, color: 'var(--fg3)', textDecoration: 'line-through', marginBottom: 6 }}>
                  I just wanted to quickly circle back and follow up on the thing we discussed…
                </div>
                <div style={{ fontSize: 15, color: 'var(--accent-press)', fontWeight: 600 }}>
                  Following up on last week's timeline — any further thoughts?
                </div>
              </div>
              <div style={{ marginTop: 16, fontSize: 14.5, color: 'var(--fg2)', fontWeight: 500 }}>Never leave the app.</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Section 3 — the demo (animated Mac window) ———
const DEMO_A = 'Following up on last week\u2019s timeline — any further thoughts?'.split(' ');
const DEMO_B = 'Matches an E.164 phone number: an optional +, a non-zero first digit, then up to 14 more digits.'.split(' ');

const DEMO_INIT = { app: 'mail', visible: false, query: '', showCursor: false, mode: 'list', activeAlias: null, result: '', streaming: false, keyflash: null, mailReplaced: false, resultLabel: 'Summarize · result' };
const DEMO_STATIC = { app: 'code', visible: true, query: 'ex', showCursor: false, mode: 'result', activeAlias: 'ex', result: DEMO_B.join(' '), streaming: false, keyflash: null, mailReplaced: true, resultLabel: 'Explain this · result' };

const DEMO_EVENTS = [
  // scene A — summarize a paragraph in Mail
  { t: 400,  patch: { keyflash: 'summon' } },
  { t: 650,  patch: { visible: true, showCursor: true } },
  { t: 1050, patch: { keyflash: null } },
  { t: 1350, patch: { query: 's', keyflash: 'type' } },
  { t: 1500, patch: { query: 'ss', activeAlias: 'ss' } },
  { t: 1800, patch: { keyflash: null } },
  { t: 2100, patch: { keyflash: 'run' } },
  { t: 2280, patch: { mode: 'result', streaming: true, showCursor: false, result: '', resultLabel: 'Summarize · result' } },
  ...streamEvents(DEMO_A, 2420, 90),
  { t: 2700, patch: { keyflash: null } },
  { t: 3650, patch: { streaming: false } },
  { t: 4250, patch: { keyflash: 'replace' } },
  { t: 4450, patch: { mailReplaced: true } },
  { t: 4900, patch: { visible: false, keyflash: null, mode: 'list', query: '', activeAlias: null } },
  // scene B — explain a regex in code
  { t: 5400, patch: { app: 'code', result: '' } },
  { t: 5550, patch: { keyflash: 'summon', visible: true, showCursor: true } },
  { t: 5950, patch: { keyflash: null } },
  { t: 6250, patch: { query: 'e', keyflash: 'typeB' } },
  { t: 6400, patch: { query: 'ex', activeAlias: 'ex' } },
  { t: 6700, patch: { keyflash: null } },
  { t: 7000, patch: { keyflash: 'run' } },
  { t: 7180, patch: { mode: 'result', streaming: true, showCursor: false, result: '', resultLabel: 'Explain this · result' } },
  ...streamEvents(DEMO_B, 7320, 80),
  { t: 7600, patch: { keyflash: null } },
  { t: 8900, patch: { streaming: false } },
  { t: 9700, patch: { visible: false, keyflash: null } },
  // reset
  { t: 10200, patch: { app: 'mail', mailReplaced: false, mode: 'list', query: '', activeAlias: null, result: '' } },
];
const DEMO_LOOP = 10900;

function MailDoc({ replaced }) {
  return (
    <div style={{ padding: '26px 30px', minHeight: 320 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 14, borderBottom: '1px solid var(--separator)' }}>
        <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'linear-gradient(145deg,#FF9F2E,#FB4D3D)', flexShrink: 0 }} />
        <div>
          <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg1)' }}>Reply to Dana Cole</div>
          <div style={{ fontSize: 13, color: 'var(--fg3)' }}>Re: Q3 timeline</div>
        </div>
      </div>
      <p style={{ fontSize: 15.5, lineHeight: 1.7, color: replaced ? 'var(--fg1)' : 'var(--fg2)', marginTop: 18,
        fontWeight: replaced ? 500 : 400, transition: 'all .3s var(--ease-out)' }}>
        <span className={replaced ? '' : 'doc-sel'} style={{ padding: replaced ? 0 : '2px 4px' }}>
          {replaced
            ? 'Following up on last week\u2019s timeline — any further thoughts?'
            : 'I just wanted to quickly circle back and follow up on the thing we discussed last week regarding the timeline, and see whether you had any further thoughts you wanted to share at this point.'}
        </span>
      </p>
    </div>
  );
}

function CodeDoc() {
  const c = { kw: '#FF7AB6', fn: '#79C0FF', str: '#7EE787', def: '#E6EDF3', cm: '#8B949E', num: '#FFA657' };
  const lines = [
    [['function ', c.kw], ['validatePhone', c.fn], ['(input) {', c.def]],
    [['  const ', c.kw], ['re', c.def], [' = ', c.def], ['/^\\+?[1-9]\\d{1,14}$/', c.num], [';', c.def]],
    [['  return ', c.kw], ['re', c.def], ['.test(input.trim());', c.def]],
    [['}', c.def]],
  ];
  return (
    <div style={{ background: '#0D1117', minHeight: 320, padding: '22px 0', fontFamily: 'var(--font-mono)', fontSize: 14.5, lineHeight: 1.85 }}>
      {lines.map((ln, i) => (
        <div key={i} style={{ display: 'flex', background: i === 1 ? 'rgba(31,107,255,0.16)' : 'transparent', padding: '0 24px',
          boxShadow: i === 1 ? 'inset 3px 0 0 var(--accent)' : 'none' }}>
          <span style={{ color: '#484F58', width: 28, flexShrink: 0, userSelect: 'none' }}>{i + 1}</span>
          <span>{ln.map(([t, col], j) => <span key={j} style={{ color: col, whiteSpace: 'pre' }}>{t}</span>)}</span>
        </div>
      ))}
    </div>
  );
}

function DemoWindow({ reduced }) {
  const s = useTimeline(DEMO_EVENTS, DEMO_INIT, DEMO_LOOP, !reduced, DEMO_STATIC);
  const isMail = s.app === 'mail';
  return (
    <div className="macwin">
      <div className="macbar">
        <div className="lights"><span className="light r" /><span className="light y" /><span className="light g" /></div>
        <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--fg2)' }}>{isMail ? 'Mail — Reply' : 'phone.js — caret-demo'}</div>
      </div>
      <div className="mac-menubar">
        <img src="assets/caret-mark.svg" alt="" style={{ height: 15, marginRight: 2 }} />
        <span className="mi bold">{isMail ? 'Mail' : 'Code'}</span>
        <span className="mi">File</span><span className="mi">Edit</span><span className="mi">View</span>
        <span style={{ flex: 1 }} />
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--fg3)' }}>
          <Icon name="chevron-up" size={13} color="var(--accent)" />Caret
        </span>
      </div>
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        {isMail ? <MailDoc replaced={s.mailReplaced} /> : <CodeDoc />}
        {/* the floating panel inside the window */}
        <div style={{ position: 'absolute', left: '50%', top: isMail ? '30%' : '26%', width: 'min(520px, 88%)',
          translate: '-50% 0', zIndex: 3,
          opacity: s.visible ? 1 : 0, scale: s.visible ? '1' : '0.96',
          transition: 'opacity .3s var(--ease-out), scale .3s var(--ease-spring)' }}>
          <div style={{ position: 'relative' }}>
            <CaretPanel query={s.query} showCursor={s.showCursor} mode={s.mode} activeAlias={s.activeAlias}
              result={s.result} streaming={s.streaming} resultLabel={s.resultLabel} />
            <KeyFlash flash={s.keyflash === 'typeB' ? 'type' : s.keyflash} />
          </div>
        </div>
      </div>
    </div>
  );
}

function DemoSection({ reduced }) {
  return (
    <section id="demo" className="section seam">
      <div className="wrap">
        <Reveal><SectionHead center eyebrow="See it run" title="Keyboard only. No window to leave."
          sub="An animated illustration of two flows: summarize a paragraph in Mail, then explain a regex in code. No mouse, no app-switching." /></Reveal>
        <Reveal delay={80} style={{ marginTop: 44, maxWidth: 880, margin: '44px auto 0' }}>
          <DemoWindow reduced={reduced} />
          <p className="feature-note">Illustrated AI walkthrough · <a href="#features">Explore everyday features →</a></p>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, TheLoop, DemoSection });