// Quill Keyboard — two-up comparison, lives-where-text, action gallery
function SectionHead({ eyebrow, title, sub, light, max = 620 }) {
  return (
    <div style={{ textAlign: 'center', maxWidth: max, margin: '0 auto' }}>
      <div className="eyebrow" style={{ color: light ? 'rgba(255,255,255,0.85)' : 'var(--accent)' }}>{eyebrow}</div>
      <h2 style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-0.03em', color: light ? '#fff' : 'var(--fg1)', margin: '12px 0 0', textShadow: light ? '0 2px 24px rgba(0,0,0,0.16)' : 'none' }}>{title}</h2>
      {sub && <p style={{ fontSize: 18, lineHeight: 1.5, color: light ? 'rgba(255,255,255,0.9)' : 'var(--fg2)', margin: '14px auto 0' }}>{sub}</p>}
    </div>
  );
}

function TwoUp() {
  return (
    <section id="howitworks" className="mesh-soft" style={{ paddingTop: 96, paddingBottom: 96 }}>
      <div className="wrap">
        <SectionHead eyebrow="The difference" title="Same keys. A row that thinks."
          sub="Your usual keyboard types letters. Quill Keyboard adds a tab of one-tap actions right above them — so the rewrite happens in the field you're already in." />
        <div className="twoup-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, marginTop: 56, alignItems: 'start', justifyItems: 'center' }}>
          {[['standard', 'Any keyboard', 'You type. Then you switch apps, paste into a chatbot, copy the answer, switch back, paste again.'],
            ['ai', 'Quill Keyboard', 'Tap Summarize. Claude reads the field and rewrites it in place — no app-switching, no clipboard relay.']].map(([kind, name, body]) => (
            <div key={kind} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', maxWidth: 360 }}>
              <Phone w={300} kind={kind} draft="hey, following up on the proposal we talked about — wanted to check the timing still works for you and the team" label={'Compare — ' + name} />
              <div style={{ marginTop: 22, textAlign: 'center' }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  {kind === 'ai' && <img src="assets/quill-mark.svg" width="22" height="22" alt="" />}
                  <span style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--fg1)' }}>{name}</span>
                </div>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--fg2)', margin: '8px auto 0', maxWidth: 320 }}>{body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LivesWhereText() {
  const points = [
    ['layers-2', 'Stays in context', 'It acts on the surrounding text in the field you’re in — Messages, Mail, Notes, Slack, Safari.'],
    ['arrow-down-to-line', 'Insert or read first', 'Each action either types the result straight in, or shows it in a popup you Insert with one tap.'],
    ['clipboard-list', 'Clipboard on hand', 'Your last 20 copies sit in their own tab, ready to drop into any field.'],
  ];
  return (
    <section className="wrap lwt-grid" style={{ paddingTop: 100, paddingBottom: 100, display: 'grid', gridTemplateColumns: '0.86fr 1fr', gap: 56, alignItems: 'center' }}>
      <div className="center-mobile" style={{ display: 'flex', justifyContent: 'center' }}>
        <Phone w={310} kind="ai" popup={true} draft="hey, following up on the proposal we talked about — wanted to check the timing still works" label="Lives where the text is" />
      </div>
      <div>
        <div className="eyebrow" style={{ color: 'var(--accent)' }}>Lives where the text is</div>
        <h2 style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--fg1)', margin: '12px 0 18px' }}>You never leave the app.</h2>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg2)', margin: '0 0 28px', maxWidth: 460 }}>
          The action runs where your text already is. The result lands inline, or appears in a quick glass popup above the keys that you can read, then insert.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {points.map(([ic, t, b]) => (
            <div key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <span className="tint" style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--accent-soft)', flexShrink: 0 }}>
                <Icon name={ic} size={19} color="var(--accent)" />
              </span>
              <div>
                <div style={{ fontSize: 16.5, fontWeight: 650, color: 'var(--fg1)' }}>{t}</div>
                <div style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--fg2)', marginTop: 2, maxWidth: 420 }}>{b}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ActionGallery() {
  const show = ACTIONS;
  return (
    <section id="actions" className="wrap" style={{ paddingTop: 60, paddingBottom: 100 }}>
      <SectionHead eyebrow="Action library" title="30+ actions, one tap each"
        sub="A curated library that updates over the air — new prompts show up without an App Store update. Pin your eight favorites to Quick Slots." />
      <div className="feat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, marginTop: 52 }}>
        {show.map(a => (
          <div key={a.name} style={{ background: 'var(--surface)', borderRadius: 18, padding: 22, boxShadow: 'var(--shadow-sm)', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <span className="tint" style={{ width: 42, height: 42, borderRadius: 12, background: a.soft, flexShrink: 0 }}>
              <Icon name={a.icon} size={21} color={a.deep} />
            </span>
            <div>
              <div style={{ fontSize: 16.5, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--fg1)' }}>{a.name}</div>
              <div style={{ fontSize: 14, lineHeight: 1.45, color: 'var(--fg2)', marginTop: 3 }}>{a.desc}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 32 }}>
        <a href="#" className="btn btn-ghost" style={{ fontSize: 15 }}>
          <Icon name="code-xml" size={17} color="var(--fg1)" />See the full action library
        </a>
      </div>
    </section>
  );
}
Object.assign(window, { TwoUp, LivesWhereText, ActionGallery, SectionHead });