// Quill Keyboard — hero (direction A: vivid mesh, product-shot led)
function TrustLine({ light }) {
  const c = light ? 'rgba(255,255,255,0.92)' : 'var(--fg2)';
  const items = [['key-round', 'Bring your own key'], ['credit-card', 'No subscription'], ['lock', 'Text never hits our servers']];
  return (
    <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', justifyContent: 'inherit' }}>
      {items.map(([ic, t]) => (
        <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, color: c, fontWeight: 500 }}>
          <Icon name={ic} size={15} color={c} />{t}
        </span>
      ))}
    </div>
  );
}

function Hero() {
  return (
    <header id="overview" className="mesh" style={{ paddingTop: 104, paddingBottom: 90, marginTop: -64, overflow: 'hidden' }}>
      <div className="wrap hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 0.82fr', gap: 40, alignItems: 'center', position: 'relative', zIndex: 2 }}>
        <div className="hero-copy" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
          <div className="rise" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 13px', borderRadius: 999,
            background: 'rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.32)',
            WebkitBackdropFilter: 'blur(10px)', backdropFilter: 'blur(10px)', color: '#fff', fontSize: 13, fontWeight: 600 }}>
            <Icon name="sparkles" size={14} color="#fff" />
            Powered by Anthropic Claude
          </div>
          <h1 className="hero-h rise" style={{ fontSize: 62, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.04,
            color: '#fff', margin: '22px 0 0', textShadow: '0 2px 30px rgba(0,0,0,0.16)' }}>
            The keyboard,<br />with Claude built in.
          </h1>
          <p className="rise" style={{ fontSize: 20, lineHeight: 1.5, color: 'rgba(255,255,255,0.92)', maxWidth: 460, margin: '20px 0 0', fontWeight: 450 }}>
            Summarize, fix grammar, change tone, or run any prompt on what you're typing — right above the keys, in any app. No copy-paste, no second tab.
          </p>
          <div className="rise" style={{ display: 'flex', gap: 13, marginTop: 30, flexWrap: 'wrap' }}>
            <AppStoreBadge />
            <a href="#waitlist" className="btn btn-glass-d" style={{ padding: '13px 22px' }}>
              <Icon name="laptop" size={18} color="#fff" />Join the Mac waitlist
            </a>
          </div>
          <div className="rise" style={{ marginTop: 26 }}>
            <TrustLine light />
          </div>
        </div>

        <div className="rise center-mobile" style={{ display: 'flex', justifyContent: 'center' }}>
          <Phone w={336} kind="ai" label="Hero — Quill keyboard" />
        </div>
      </div>
    </header>
  );
}
Object.assign(window, { Hero, TrustLine });