// Pricing — Free vs Pro $4/mo, positioned against $10 generalists.

function Pricing() {
  return (
    <section id="pricing" style={pr.section}>
      <div style={pr.glow} />
      <div className="container-tight reveal" style={{ position:'relative' }}>
        <div style={pr.head}>
          <span className="eyebrow" style={{ justifyContent:'center' }}>Pricing</span>
          <h2 className="sec-title" style={{ marginTop:16 }}>Half the price. <span className="grad-text">Twice the focus.</span></h2>
          <p className="sec-lede" style={{ margin:'14px auto 0', maxWidth:540 }}>
            The generalists charge $10/month to do everything adequately. Backread is $4 and does X brilliantly.
          </p>
        </div>

        <div style={pr.grid} className="stack-sm">
          {/* Free */}
          <div style={pr.card}>
            <div style={pr.cardTop}><span style={pr.tier}>Free</span><span className="mono" style={pr.tag}>GET STARTED</span></div>
            <p style={pr.pitch}>Your recent bookmarks, categorised and searchable. See what Backread does with your own saves.</p>
            <div style={pr.priceRow}><span style={pr.price}>$0</span></div>
            <ul style={pr.list}>
              <Li>Categorised Inbox of recent bookmarks</Li>
              <Li>Semantic + keyword search</Li>
              <Li>Star to keep</Li>
              <Li>Web, Mac &amp; iPhone</Li>
            </ul>
            <span style={{ flex:1 }} />
            <a href="/auth/x/start" className="btn-ghost" style={{ width:'100%', justifyContent:'center', gap:9 }}><IcoX size={15}/> Sign in with X</a>
          </div>

          {/* Pro */}
          <div style={{ ...pr.card, ...pr.cardPro }}>
            <div style={pr.proGlow} />
            <div style={pr.proInner}>
              <div style={pr.cardTop}><span style={pr.tier}>Pro</span><span style={pr.badge}>FULL WORKSPACE</span></div>
              <p style={pr.pitch}>The complete archive, synced continuously — every save, ranked, actionable, kept forever.</p>
              <div style={pr.priceRow}><span style={{ ...pr.price }} className="grad-text">$4</span><span style={pr.unit}>/ month</span></div>
              <ul style={pr.list}>
                <Li hot>Full archive + continuous sync</Li>
                <Li hot>AI Council — next step on every Action</Li>
                <Li hot>AI Organise in plain English</Li>
                <Li hot>Vault — keep posts forever</Li>
                <Li hot>Counter-view &amp; advanced filters</Li>
              </ul>
              <span style={{ flex:1 }} />
              <a href="/auth/x/start" className="btn-primary" style={{ width:'100%', justifyContent:'center' }}>Start free trial <IcoArrow/></a>
            </div>
          </div>
        </div>

        <div style={pr.compare}>
          <span className="mono" style={pr.compareItem}><b style={{ color:'var(--text)' }}>$4</b> Backread · built only for X</span>
          <span style={pr.vs}>vs</span>
          <span className="mono" style={pr.compareItem}><span style={{ textDecoration:'line-through', opacity:.7 }}>$10</span> generalists · X is one format among many</span>
        </div>
      </div>
    </section>
  );
}

function Li({ children, hot }) {
  return (
    <li style={{ display:'flex', alignItems:'flex-start', gap:10, fontSize:14.5, color:'var(--text-dim)' }}>
      <span style={{ width:17, height:17, borderRadius:999, flexShrink:0, marginTop:2, display:'grid', placeItems:'center',
        background: hot ? 'var(--grad)' : 'var(--surface-3)', color: hot ? '#fff' : 'var(--text-mute)' }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
      </span>
      <span>{children}</span>
    </li>
  );
}

const pr = {
  section: { padding:'80px 0 70px', position:'relative', overflow:'hidden' },
  glow: { position:'absolute', top:0, left:'50%', transform:'translateX(-50%)', width:700, height:400, background:'radial-gradient(ellipse at center, rgba(139,92,246,0.12), transparent 65%)', filter:'blur(30px)', pointerEvents:'none' },
  head: { textAlign:'center', marginBottom:44 },
  grid: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, alignItems:'stretch' },
  card: { background:'var(--surface-1)', border:'0.5px solid var(--border)', borderRadius:'var(--radius-lg)', padding:30, display:'flex', flexDirection:'column', gap:16, position:'relative', overflow:'hidden', boxShadow:'var(--shadow-card)' },
  cardPro: { border:'0.5px solid rgba(139,92,246,0.35)', background:'linear-gradient(180deg, color-mix(in srgb, var(--purple) 6%, var(--surface-1)), var(--surface-1))' },
  proInner: { position:'relative', display:'flex', flexDirection:'column', gap:16, flex:1 },
  proGlow: { position:'absolute', top:'-40%', right:'-30%', width:420, height:420, background:'radial-gradient(circle at center, rgba(236,72,153,0.16), transparent 60%)', pointerEvents:'none' },
  cardTop: { display:'flex', justifyContent:'space-between', alignItems:'center' },
  tier: { fontSize:20, fontWeight:600, letterSpacing:'-0.015em' },
  tag: { fontSize:10.5, color:'var(--text-mute)', letterSpacing:'.1em' },
  badge: { fontSize:10, fontWeight:600, color:'#fff', background:'var(--grad)', padding:'4px 10px', borderRadius:999, letterSpacing:'.04em', fontFamily:"'Geist Mono', monospace", boxShadow:'0 6px 18px -4px rgba(236,72,153,0.5)', whiteSpace:'nowrap' },
  pitch: { fontSize:14.5, lineHeight:1.5, color:'var(--text-dim)', margin:0, maxWidth:360 },
  priceRow: { display:'flex', alignItems:'baseline', gap:7, marginTop:6 },
  price: { fontSize:60, fontWeight:700, letterSpacing:'-0.04em', lineHeight:1 },
  unit: { color:'var(--text-mute)', fontSize:15, whiteSpace:'nowrap' },
  list: { listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:11 },
  compare: { marginTop:34, display:'flex', alignItems:'center', justifyContent:'center', gap:18, flexWrap:'wrap', fontSize:13, color:'var(--text-dim)' },
  compareItem: { display:'inline-flex', alignItems:'center', gap:8 },
  vs: { fontSize:11, color:'var(--text-mute)', textTransform:'uppercase', letterSpacing:'.1em' },
};

window.Pricing = Pricing;