// Quill Keyboard — bring-your-own-key / privacy + FAQ
function FlowNode({ icon, title, sub, tile }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, textAlign: 'center', minWidth: 0 }}>
      <div style={{ width: 76, height: 76, borderRadius: 22, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: tile || '#fff', boxShadow: 'var(--shadow-md)' }}>
        {typeof icon === 'string' ? <Icon name={icon} size={30} color={tile ? '#fff' : 'var(--accent)'} /> : icon}
      </div>
      <div>
        <div style={{ fontSize: 15.5, fontWeight: 700, color: 'var(--fg1)' }}>{title}</div>
        <div style={{ fontSize: 13.5, color: 'var(--fg3)', marginTop: 2 }}>{sub}</div>
      </div>
    </div>
  );
}
function FlowArrow() {
  return (
    <div style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', color: 'var(--fg4)', paddingBottom: 30 }}>
      <Icon name="arrow-right" size={26} color="var(--fg4)" />
    </div>
  );
}

function Privacy() {
  const points = [
    ['shield-check', 'No middleman', 'The keyboard talks straight to Anthropic. We don’t host the model or see a single token of your usage.'],
    ['user-x', 'No accounts', 'No sign-up, no profile. Nothing to breach because there’s nothing stored.'],
    ['chart-no-axes-column', 'No analytics SDKs', 'No trackers bundled in. We don’t log prompts, keystrokes, or what app you’re in.'],
  ];
  return (
    <section id="privacy" style={{ paddingTop: 60, paddingBottom: 100 }}>
      <div className="wrap">
        <SectionHead eyebrow="Bring your own key" title="Your text. Your key. Anthropic."
          sub="There’s no keyboard company sitting between you and the model. You supply an Anthropic API key, and prompts go directly to Anthropic over HTTPS." />

        {/* the flow diagram */}
        <div className="glass-card byok-flow" style={{ borderRadius: 28, padding: '40px 32px', margin: '48px auto 0', maxWidth: 720,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, background: 'var(--surface)', boxShadow: 'var(--shadow-lg)' }}>
          <FlowNode icon="smartphone" title="What you type" sub="in any app" />
          <FlowArrow />
          <FlowNode icon="key-round" title="Your API key" sub="stored on device" />
          <FlowArrow />
          <FlowNode tile="var(--spirit-gradient)" icon={<img src="assets/quill-mark.svg" width="40" height="40" alt="" />} title="Anthropic" sub="Claude responds" />
        </div>
        <p style={{ textAlign: 'center', fontSize: 14, color: 'var(--fg3)', marginTop: 16 }}>
          <Icon name="circle-slash" size={14} color="var(--fg3)" style={{ display: 'inline-block', verticalAlign: '-2px', marginRight: 6 }} />
          No server of ours in the middle. We’re precise about this on purpose.
        </p>

        <div className="byok-grid feat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, marginTop: 48 }}>
          {points.map(([ic, t, b]) => (
            <div key={t} style={{ background: 'var(--surface)', borderRadius: 18, padding: 24, boxShadow: 'var(--shadow-sm)' }}>
              <span className="tint" style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--accent-soft)' }}>
                <Icon name={ic} size={20} color="var(--accent)" />
              </span>
              <div style={{ fontSize: 16.5, fontWeight: 700, color: 'var(--fg1)', marginTop: 14 }}>{t}</div>
              <div style={{ fontSize: 14.5, lineHeight: 1.5, color: 'var(--fg2)', marginTop: 5 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqItem({ q, a, open, onClick }) {
  return (
    <div style={{ borderBottom: '1px solid var(--separator)' }}>
      <button onClick={onClick} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        padding: '20px 4px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', font: 'inherit' }}>
        <span style={{ fontSize: 17.5, fontWeight: 650, color: 'var(--fg1)', letterSpacing: '-0.01em' }}>{q}</span>
        <Icon name={open ? 'minus' : 'plus'} size={20} color="var(--fg3)" />
      </button>
      <div style={{ maxHeight: open ? 240 : 0, overflow: 'hidden', transition: 'max-height var(--dur-base) var(--ease-out)' }}>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 4px 22px', maxWidth: 720 }}>{a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    ['What does it cost?', 'You pay Anthropic directly for what you use — usually pennies a day. There’s no subscription and no per-token markup from us. Quill Keyboard itself is the app you download; the usage is between you and Anthropic.'],
    ['What’s an API key, and how do I get one?', 'A key is a private token from Anthropic that lets the keyboard ask Claude to do things on your behalf. Create one at console.anthropic.com, then paste it into Settings once. We walk you through it on first launch.'],
    ['Why does the keyboard need Full Access?', 'Full Access is what lets the keyboard reach the network to send your prompt to Anthropic. Without it, iOS blocks the connection and the actions can’t run. It’s the only reason it’s needed.'],
    ['What don’t you collect?', 'No analytics SDKs, no accounts, no prompt logging. Your prompts go straight to Anthropic over HTTPS using your key — not through our servers.'],
    ['Which languages are supported?', 'English and Persian (فارسی) ship with full layouts — letters, numbers, symbols, emoji — and the same AI actions in both. Translation covers English, German, and Persian out of the box.'],
    ['Can I choose the model?', 'Yes. Switch between Claude Opus, Sonnet, and Haiku in Settings. The list pulls the latest available models from Anthropic directly, so new releases appear automatically.'],
  ];
  return (
    <section id="faq" className="wrap" style={{ paddingTop: 40, paddingBottom: 90, maxWidth: 860 }}>
      <SectionHead eyebrow="Questions" title="Good to know" />
      <div style={{ marginTop: 40 }}>
        {items.map(([q, a], i) => (
          <FaqItem key={q} q={q} a={a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
        ))}
      </div>
    </section>
  );
}
Object.assign(window, { Privacy, FAQ, FlowNode });