// ——— Section 5 — bring your own everything ———
const PROVIDERS = ['Anthropic', 'OpenAI', 'Google', 'Ollama', 'LM Studio', 'llama.cpp'];
const MODEL_MAP = [
  { i: 'pen-line', n: 'Writing', m: 'Claude Sonnet', cls: 't-writing' },
  { i: 'code', n: 'Code', m: 'GPT-5', cls: 't-code' },
  { i: 'eye', n: 'Images', m: 'Qwen-VL · local', cls: 't-vision' },
];
const HOTKEY_MAP = [
  { n: 'Summon Caret · default', keys: ['⌥', 'Space'] },
  { n: 'Clipboard · default', keys: ['⌘', '⇧', 'V'] },
  { n: 'Summarize · inside Caret', keys: ['ss', '↩'] },
];

function Byo() {
  return (
    <section id="byo" className="section seam">
      <div className="wrap">
        <Reveal><SectionHead eyebrow="Bring your own everything" title="Caret is the interface. You choose the brain."
          sub="No exclusivity, no “powered by” lock-in. Point Caret at any provider — or your own machine — and pin a different model per action." /></Reveal>
        <Reveal delay={80} style={{ marginTop: 44 }}>
          <div className="prov-grid">
            <div className="card" style={{ padding: 24 }}>
              <div className="prov-col"><h3>Providers</h3><p>Cloud or fully local — OpenAI-compatible servers included.</p></div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 18 }}>
                {PROVIDERS.map((p) => <div className="logo-slot" key={p}>{p}</div>)}
              </div>
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="prov-col"><h3>Per-action models</h3><p>Use Sonnet for writing, GPT-5 for code, a local VLM for images.</p></div>
              <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {MODEL_MAP.map((m) => (
                  <div key={m.n} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                    <div className={'tabicon ' + m.cls} style={{ width: 30, height: 30, borderRadius: 9 }}><Icon name={m.i} size={15} color="#fff" /></div>
                    <span style={{ fontSize: 14.5, color: 'var(--fg2)', width: 64 }}>{m.n}</span>
                    <Icon name="arrow-right" size={15} color="var(--fg4)" />
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--fg1)', background: 'var(--fill-3)', padding: '5px 10px', borderRadius: 8 }}>{m.m}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="prov-col"><h3>Make the keyboard flow yours</h3><p>Choose Caret’s global shortcut and a separate shortcut for clipboard history. Inside Caret, run actions by alias or their configured shortcut.</p></div>
              <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {HOTKEY_MAP.map((h) => (
                  <div key={h.n} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                    <span style={{ fontSize: 14.5, color: 'var(--fg1)' }}>{h.n}</span>
                    <Combo keys={h.keys} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Section 6 — privacy ———
function Privacy() {
  return (
    <section id="privacy" className="section">
      <div className="wrap">
        <Reveal>
          <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
            <div style={{ display: 'inline-flex', marginBottom: 22 }}>
              <Icon name="lock-keyhole" size={26} color="var(--accent)" />
            </div>
            <Eyebrow>Privacy</Eyebrow>
            <p style={{ fontSize: 'clamp(22px, 3vw, 30px)', lineHeight: 1.45, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--fg1)', margin: '14px 0 0' }}>
              App launching, file browsing, clipboard history and snippets work locally. Clipboard history is stored on your Mac and can be paused or cleared. AI requests go to the provider you choose, using your key; Caret also downloads its shared action catalog.
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Section 7 — first minute ———
const FM = [
  { t: <span><b>Download Caret</b> and drag it to Applications.</span>, mock: 'install' },
  { t: <span>Use your configured shortcut. <b>Launch an app or browse Files</b> — no AI key needed.</span>, mock: 'apps' },
  { t: <span>For AI, open <b>Settings</b> and connect your provider.</span>, mock: 'key' },
  { t: <span>Grant <b>Accessibility</b> for selection capture, insertion and snippets.</span>, mock: 'grant' },
  { t: <span>Select text, summon Caret and run <b>ss</b> for a summary.</span>, mock: 'run' },
];

function FmMock({ kind }) {
  if (kind === 'apps') return <div className="fm-mock" style={{alignItems: 'center'}}><Icon name="search" /><span>Apps · Files</span><Key>↩</Key></div>;
  if (kind === 'install') return (
    <div className="fm-mock" style={{ alignItems: 'center', flexDirection: 'row', justifyContent: 'center', gap: 14 }}>
      <img src="assets/caret-mark.svg" alt="" style={{ width: 40 }} />
      <Icon name="arrow-right" size={18} color="var(--fg4)" />
      <Icon name="folder" size={34} color="var(--accent)" />
    </div>
  );
  if (kind === 'grant') return (
    <div className="fm-mock" style={{ alignItems: 'center' }}>
      <Combo keys={['⌥', 'Space']} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
        <span style={{ fontSize: 12.5, color: 'var(--fg2)' }}>Accessibility</span>
        <div style={{ width: 34, height: 20, borderRadius: 999, background: 'var(--green)', position: 'relative' }}>
          <div style={{ width: 16, height: 16, borderRadius: '50%', background: '#fff', position: 'absolute', top: 2, right: 2 }} />
        </div>
      </div>
    </div>
  );
  if (kind === 'key') return (
    <div className="fm-mock">
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg3)' }}>API key</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--fill-3)', borderRadius: 8, padding: '8px 10px' }}>
        <Icon name="key-round" size={14} color="var(--accent)" />
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: 2, color: 'var(--fg2)' }}>sk-••••••••</span>
      </div>
    </div>
  );
  if (kind === 'run') return (
    <div className="fm-mock" style={{ padding: 0, justifyContent: 'flex-start' }}>
      <div style={{ background: 'rgba(28,30,38,0.92)', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 12px', gap: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="chevron-right" size={14} color="var(--accent)" stroke={2.6} />
          <span style={{ color: '#fff', fontFamily: 'var(--font-mono)', fontSize: 13 }}>ss</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--accent)', borderRadius: 6, padding: '5px 8px' }}>
          <Icon name="align-left" size={13} color="#fff" />
          <span style={{ color: '#fff', fontSize: 12.5 }}>Summarize</span>
        </div>
      </div>
    </div>
  );
  return (
    <div className="fm-mock" style={{ alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', justifyContent: 'center' }}>
        <Combo keys={['⌘', '↩']} /><Combo keys={['⌘', 'C']} /><Key>esc</Key>
      </div>
    </div>
  );
}

function FirstMinute() {
  return (
    <section className="section seam">
      <div className="wrap">
        <Reveal><SectionHead eyebrow="Get started" title="Useful from the first launch." /></Reveal>
        <Reveal delay={80} style={{ marginTop: 40 }}>
          <div className="fm-grid">
            {FM.map((step, i) => (
              <div className="fm-step" key={i}>
                <div className="fm-num">{i + 1}</div>
                <FmMock kind={step.mock} />
                <p>{step.t}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28, fontSize: 15, color: 'var(--fg3)', textAlign: 'center' }}>
            Tip: Settings → Snippets → Add Snippet. Save a keyword for text you type often. Apps and Files do not require Accessibility access.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Byo, Privacy, FirstMinute });