// /premium — for people who stopped wanting to know

function PremiumPage({ onNav }) {
  const [billing, setBilling] = React.useState('annual');

  return (
    <div className="page">
      <DocBar onNav={onNav} crumb="PREMIUM · AUD" />
      <Subnav page="/premium" onNav={onNav} />

      <section className="page-hero">
        <div className="eyebrow">FAMILY · UNLIMITED · CANCEL IN 2 TAPS</div>
        <h1>For people<br/>who stopped<br/>wanting to know.</h1>
        <p className="lede">Free is fine. Free tells you, "this is a 23." Premium tells you what to buy instead, before you walk into the aisle.</p>
      </section>

      {/* Billing toggle */}
      <div className="variant-row" role="tablist" style={{ paddingTop: 20 }}>
        {[
          ['annual', 'Annual · save 50%'],
          ['monthly', 'Monthly'],
        ].map(([k, l]) => (
          <button key={k} className={'variant-chip' + (billing === k ? ' active' : '')} onClick={() => setBilling(k)}>{l}</button>
        ))}
      </div>

      <div className="tier">
        <div className="crown">PLASSIC PREMIUM</div>
        {billing === 'annual' ? (
          <>
            <div className="price">$24<span className="per">/yr · AUD</span></div>
            <div className="alt-price">= $2.00/mo · vs $3.99/mo billed monthly</div>
          </>
        ) : (
          <>
            <div className="price">$3.99<span className="per">/mo · AUD</span></div>
            <div className="alt-price">Switch to annual · $24/yr · save 50%</div>
          </>
        )}
        <ul>
          <li><span className="check">✓</span><span><strong>Alternatives surfaced before you buy.</strong> Walk into Coles, scan a 23, see the 88 next to it on the shelf.</span></li>
          <li><span className="check">✓</span><span><strong>Family sharing · up to 6.</strong> One subscription, your household's history rolled up into a weekly digest.</span></li>
          <li><span className="check">✓</span><span><strong>Full scan history · forever.</strong> Free is 30 days. Premium keeps everything.</span></li>
          <li><span className="check">✓</span><span><strong>Weekly digest · Sunday 8am.</strong> Your average score, trend, and the worst 3 things you bought.</span></li>
          <li><span className="check">✓</span><span><strong>Brand alerts.</strong> Get notified when your repeat brands change packaging — better or worse.</span></li>
          <li><span className="check">✓</span><span><strong>Receipt CSV export.</strong> Year-end tax-style summary, for the people who want it.</span></li>
        </ul>

        <div style={{ marginTop: 24 }}>
          <a className="btn coral" href="#" onClick={(e) => e.preventDefault()}>
            <Icon.apple /> Get Premium · {billing === 'annual' ? '$24/yr' : '$3.99/mo'}
          </a>
        </div>
        <div className="mono mute" style={{ marginTop: 12, fontSize: 10, color: 'var(--plassic-bone-300)' }}>
          NO TRIAL · NO LOCK-IN · CANCEL IN 2 TAPS · BILLING VIA APP STORE
        </div>
      </div>

      {/* Comparison strip */}
      <div className="section-h" style={{ marginTop: 16 }}>
        <span>FREE VS PREMIUM</span>
        <span>EXACT DIFFERENCE</span>
      </div>
      <div style={{ borderTop: '1.5px solid var(--plassic-jungle-950)' }}>
        {[
          ['Scan a barcode', 'Unlimited', 'Unlimited'],
          ['Score history', '30 days', 'Forever'],
          ['Alternatives in-aisle', '—', 'Yes'],
          ['Family sharing', '—', '6 members'],
          ['Brand-change alerts', '—', 'Yes'],
          ['Weekly digest', '—', 'Sunday 8am'],
          ['CSV export', '—', 'Yes'],
          ['Ads', 'None', 'None'],
        ].map(([k, free, prem], i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1fr 70px 70px',
            padding: '12px 20px', borderBottom: '1px solid var(--plassic-line-200)',
            alignItems: 'center'
          }}>
            <span style={{ fontFamily: 'var(--plassic-font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase' }}>{k}</span>
            <span style={{ fontFamily: 'var(--plassic-font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--plassic-mute-400)', textAlign: 'right' }}>{free}</span>
            <span style={{ fontFamily: 'var(--plassic-font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--plassic-coral-500)', fontWeight: 700, textAlign: 'right' }}>{prem}</span>
          </div>
        ))}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 70px 70px',
          padding: '12px 20px', background: 'var(--plassic-kraft-100)'
        }}>
          <span></span>
          <span style={{ fontFamily: 'var(--plassic-font-display)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 1, textAlign: 'right' }}>FREE</span>
          <span style={{ fontFamily: 'var(--plassic-font-display)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 1, color: 'var(--plassic-coral-500)', textAlign: 'right' }}>PREMIUM</span>
        </div>
      </div>

      {/* Trust block */}
      <div className="section-h" style={{ marginTop: 24 }}>
        <span>WHY WE CHARGE</span>
        <span>NO BRAND PAYS US</span>
      </div>
      <div className="prose">
        <p>The brand wall doesn't have a "boost" tier. The score isn't pay-to-clean. The data isn't sold to advertisers, packaging consultants, or anyone else.</p>
        <p>Premium pays for the dataset, the team, and keeping the free version free. That's the whole pitch.</p>
      </div>

      <Foot onNav={onNav} />
    </div>
  );
}

window.PremiumPage = PremiumPage;