// Caret landing — Section 8 (pricing), 9 (FAQ), 10 (final CTA), 11 (footer)

const PRICE_FEATURES = [
  `${window.CARET_ACTIONS.length} current AI actions, with a growing library`,
  'App launching and file browsing',
  'Text and image clipboard history',
  'Text snippets that expand as you type',
  'Bring your own key — Anthropic, OpenAI, Google',
  'Local models — Ollama, LM Studio, llama.cpp, vLLM',
  'Per-action model and panel-local shortcut',
  'Vision actions from your clipboard',
  'Notarized direct download · free updates',
];

function Pricing() {
  return (
    <section id="pricing" className="section">
      <div className="wrap">
        <Reveal><SectionHead center eyebrow="Pricing" title="One price. No subscription."
          sub="Buy it once. Bring your own API key, so the only ongoing cost is the tokens you choose to spend." /></Reveal>
        <Reveal delay={80} style={{ marginTop: 44 }}>
          <div className="card price-card" style={{ padding: 36 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <span style={{ fontSize: 22, fontWeight: 600, color: 'var(--fg3)', alignSelf: 'flex-start', marginTop: 8 }}>$</span>
                  <span className="amt">29</span>
                  <span style={{ fontSize: 17, color: 'var(--fg3)' }}>one-time</span>
                </div>
                <div style={{ fontSize: 15, color: 'var(--fg2)', marginTop: 6 }}>Caret for macOS · single licence</div>
              </div>
              <img src="assets/caret-mark.svg" alt="Caret" style={{ width: 56, borderRadius: 14, boxShadow: 'var(--shadow-md)' }} />
            </div>
            <div style={{ height: 1, background: 'var(--separator)', margin: '24px 0' }} />
            <div>
              {PRICE_FEATURES.map((f) => (
                <div className="price-feat" key={f}>
                  <Icon name="check" size={18} color="var(--green)" stroke={3} style={{ marginTop: 2 }} />
                  <span>{f}</span>
                </div>
              ))}
            </div>
            <a className="btn btn-primary" href="https://github.com/arjmandi/caret-releases/releases/latest/download/Caret.dmg" style={{ width: '100%', justifyContent: 'center', marginTop: 26, padding: '15px 24px' }}>
              <Icon name="arrow-down-to-line" size={18} color="#fff" /> Download for macOS
            </a>
            <div style={{ textAlign: 'center', marginTop: 14, fontSize: 13.5, color: 'var(--fg3)', fontFamily: 'var(--font-mono)' }}>
              7-day free trial · macOS 14+
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Section 9 — FAQ ———
const FAQS = [
  [
    "Do I need an API key for everything?",
    "No. Apps, Files, Clipboard and Snippets work without an AI key. AI actions use your chosen cloud provider or local model server."
  ],
  [
    "Does it work in my app?",
    "Selection and insertion use macOS Accessibility. Support can vary by app and input method; secure input is excluded from snippet expansion."
  ],
  [
    "Why does it need Accessibility permission?",
    "For reading selected context, inserting or pasting results, and detecting and expanding snippet keywords. You can revoke access in System Settings. App launching and file browsing do not need it."
  ],
  [
    "What stays on my Mac?",
    "App launching, file browsing, clipboard history and snippets work locally. AI requests go to your chosen provider using your key. Caret also downloads its shared action catalog."
  ],
  [
    "Does clipboard search read text inside images?",
    "No. Text entries are searchable; images have previews and searchable metadata, without OCR in clipboard history. Separate Vision actions can extract text when you explicitly run them."
  ],
  [
    "How long is clipboard history kept?",
    "Up to 200 entries, 30 days and 100 MB, stored on your Mac. Pause recording or clear history in Settings."
  ],
  [
    "Will snippets open Caret?",
    "No. Save one in Settings and its case-sensitive keyword expands immediately as you type, without a trailing space. Accessibility access is required; secure input is excluded. Snippets leave the clipboard unchanged."
  ],
  [
    "Can I change the shortcut?",
    "Yes. Set the summon shortcut and Clipboard History’s dedicated shortcut in General Settings. Action shortcuts run inside Caret."
  ],
  [
    "Can more actions be added?",
    "Yes. The shared JSON catalog can grow, and Caret can refresh it. Choose which supplied actions appear, organize their tabs, and pick a model and shortcut for each. The catalog supplies prompts and read-only aliases; a self-service marketplace editor is not available."
  ],
  [
    "Can I run local models?",
    "Yes. Connect an OpenAI-compatible local server, such as Ollama, LM Studio or llama.cpp."
  ],
  [
    "Do Vision actions need Screen Recording?",
    "No. They use images from the clipboard. Copy an image, then explicitly run a Vision action."
  ],
  [
    "Is it on the App Store?",
    "Caret ships as a notarized direct download."
  ]
];

function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section seam">
      <div className="wrap">
        <Reveal><SectionHead center eyebrow="FAQ" title="The questions a power user asks." /></Reveal>
        <Reveal delay={80} style={{ marginTop: 36 }}>
          <div className="faq">
            {FAQS.map(([q, a], i) => (
              <div className={'faq-item' + (open === i ? ' open' : '')} key={i}>
                <button className="faq-q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{q}</span>
                  <Icon name="chevron-down" size={20} className="chev" style={{ transition: 'transform .26s var(--ease-out)' }} />
                </button>
                <div className="faq-a"><div className="faq-a-inner">{a}</div></div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Section 10 — final CTA ———
function FinalCta() {
  return (
    <section className="section">
      <div className="wrap">
        <Reveal>
          <div className="mesh" style={{ borderRadius: 'var(--r-2xl)', padding: '72px 40px', textAlign: 'center', overflow: 'hidden', boxShadow: 'var(--shadow-xl)' }}>
            <img src="assets/caret-mark.svg" alt="" style={{ width: 64, margin: '0 auto 22px', display: 'block', filter: 'drop-shadow(0 10px 26px rgba(8,12,26,0.35))' }} />
            <h2 style={{ color: '#fff', fontSize: 'clamp(30px, 4.5vw, 48px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.05, textShadow: '0 2px 24px rgba(0,0,0,0.18)' }}>
              Your day, a little more direct.
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.9)', fontSize: 19, maxWidth: 480, margin: '16px auto 0' }}>
              Apps, files, clipboard, snippets and AI actions. Keep the things you need close to your keyboard.
            </p>
            <div style={{ marginTop: 30 }}>
              <a className="btn btn-light" href="https://github.com/arjmandi/caret-releases/releases/latest/download/Caret.dmg" style={{ padding: '15px 30px', fontSize: 17 }}>
                <Icon name="arrow-down-to-line" size={19} color="var(--accent)" /> Download Caret for macOS
              </a>
            </div>
            <div style={{ marginTop: 18, fontSize: 13.5, color: 'rgba(255,255,255,0.75)', fontFamily: 'var(--font-mono)' }}>
              macOS 14 Sonoma or later · 7-day free trial · Notarized
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Section 11 — footer ———
function Footer() {
  const links = [
    ['Releases on GitHub', 'github', 'https://github.com/arjmandi/caret-releases'],
    ['Changelog · RSS', 'rss', 'https://github.com/arjmandi/caret-releases/releases.atom'],
    ['hi@oddproof.ai', 'mail', 'mailto:hi@oddproof.ai'],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <img src="assets/caret-wordmark.svg" alt="Caret" style={{ height: 28 }} />
            <div style={{ fontSize: 13.5, color: 'var(--fg3)', marginTop: 12, maxWidth: 280, lineHeight: 1.5 }}>
              Your keyboard companion for macOS. Everyday utilities and AI actions, close at hand.
            </div>
          </div>
          <div className="foot-links">
            {links.map(([t, ic, href]) => {
              const ext = href.startsWith('http');
              return (
                <a href={href} key={t} {...(ext ? { target: '_blank', rel: 'noopener' } : {})}><Icon name={ic === 'github' ? 'github' : ic === 'rss' ? 'rss' : 'mail'} size={15} /> {t}</a>
              );
            })}
          </div>
        </div>
        <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--separator-soft)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 13, color: 'var(--fg4)' }}>
          <span>© 2026 Caret. Built for the keyboard.</span>
          <span style={{ fontFamily: 'var(--font-mono)' }}>Made on a Mac.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Pricing, Faq, FinalCta, Footer });