// Pricing, three audiences
const Pricing = ({ nav }) => {
  const [audience, setAudience] = React.useState('Operators');

  return (
    <div className="page">
      <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
        <div className="container-narrow" style={{ padding: '64px 32px 40px', textAlign: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Pricing</div>
          <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 'clamp(40px, 5vw, 64px)', margin: '0 0 16px', letterSpacing: '-0.03em', fontWeight: 400 }}>Built to be the front door of the industry.</h1>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', maxWidth: 640, margin: '0 auto', lineHeight: 1.5 }}>Free for clients, always. Every listed company starts free, you pay when the directory starts working for you.</p>
          <div style={{ marginTop: 32, display: 'inline-flex', background: 'var(--bg)', border: '1px solid var(--line-2)', borderRadius: 999, padding: 4 }}>
            {['Operators', 'Manufacturers', 'Designers'].map(a => (
              <button key={a} onClick={() => setAudience(a)}
                style={{
                  padding: '10px 20px', borderRadius: 999, fontSize: 13, fontWeight: 500,
                  background: audience === a ? 'var(--ink)' : 'transparent',
                  color: audience === a ? 'var(--bg)' : 'var(--ink-2)',
                }}>{a}</button>
            ))}
          </div>
        </div>
      </section>

      <div className="container" style={{ padding: '56px 32px 80px' }}>
        {audience === 'Operators' && <PricingTiers nav={nav} tiers={[
          { name: 'Basic', price: '$0', unit: '/mo', desc: 'Directory listing. The point is volume, every drone show company deserves to show up.', features: ['Directory listing', 'Company name & location', '1 hero photo', 'Basic fleet info', 'Standard search ranking'], cta: 'Claim profile', highlight: false },
          { name: 'Pro', price: '$149', unit: '/mo', desc: 'Full profile, lead form, analytics. For operators ready to grow inbound.', features: ['Everything in Basic', 'Full profile page', 'Inbound lead contact form', 'Analytics dashboard', 'Photo & video gallery (20)', 'SkyRender marketplace badge', 'Priority support'], cta: 'Start free trial', highlight: true },
          { name: 'Elite', price: '$349', unit: '/mo', desc: 'Featured placement, homepage rotation, priority lead routing.', features: ['Everything in Pro', 'Featured placement', 'Homepage rotation', 'Category top positioning', 'Priority lead routing', 'Unlimited portfolio', 'Quarterly strategy call'], cta: 'Start free trial', highlight: false },
        ]} />}

        {audience === 'Manufacturers' && <PricingTiers nav={nav} tiers={[
          { name: 'Basic', price: '$0', unit: '/mo', desc: 'Company listing in the manufacturers directory.', features: ['Directory listing', 'Product list (5)', 'Company page', 'Standard ranking'], cta: 'Claim profile', highlight: false },
          { name: 'Pro', price: '$299', unit: '/mo', desc: 'Full catalog, B2B lead capture, operator analytics.', features: ['Everything in Basic', 'Full product catalog', 'B2B lead capture forms', 'Operator traffic analytics', 'Social-proof tagging', 'Featured category listing'], cta: 'Start free trial', highlight: true },
          { name: 'Sponsored', price: '$1,500', unit: '/mo', desc: 'Featured on every operator profile across the directory.', features: ['Everything in Pro', 'Featured on every operator page', 'Homepage hero rotation', 'Newsletter inclusions (2/mo)', 'Dedicated category sponsor', 'Industry report co-branding'], cta: 'Talk to sales', highlight: false },
        ]} />}

        {audience === 'Designers' && <PricingTiers nav={nav} tiers={[
          { name: 'Listing', price: '$99', unit: '/mo', desc: 'Portfolio page + SkyRender marketplace access.', features: ['Portfolio page', 'Marketplace access', 'Sell formation packs', '30% platform commission', 'Standard search ranking'], cta: 'Start listing', highlight: false },
          { name: 'Pro', price: '$149', unit: '/mo', desc: 'Featured portfolio, custom commission inbox.', features: ['Everything in Listing', 'Featured designer placement', 'Custom commission requests', '20% platform commission', 'Sales analytics dashboard', 'Priority support'], cta: 'Start free trial', highlight: true },
          { name: 'Marketplace only', price: 'Free', unit: '', desc: 'List packs without a profile page. 30% commission.', features: ['Upload packs', 'Keep 70% of sales', 'No profile page', 'Appear in pack search only'], cta: 'Upload pack', highlight: false },
        ]} />}

        {/* Below-the-fold: Add-ons */}
        <div style={{ marginTop: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 16, textAlign: 'center' }}>Also available, à la carte</div>
          <div className="grid grid-3">
            {[
              { name: 'Sponsored placements', range: '$500–$2,000 /mo', desc: 'Homepage hero, category tops, email newsletter inclusions.' },
              { name: 'Lead referral stream', range: '10–15% of deal', desc: 'When a client inquiry can\'t be fulfilled, we route it. You pay only on won deals.' },
              { name: 'Directory API access', range: 'Custom', desc: 'For integrators, event agencies, and venue platforms.' },
            ].map(a => (
              <div key={a.name} className="card" style={{ padding: 24 }}>
                <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{a.name}</div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 10 }}>{a.range}</div>
                <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 13 }}>{a.desc}</p>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 64, textAlign: 'center' }}>
          <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 28, fontWeight: 400, margin: '0 0 8px' }}>Still deciding?</h3>
          <p className="muted" style={{ fontSize: 14, marginBottom: 16 }}>Claim your free listing now, upgrade whenever you're ready.</p>
          <button className="btn btn-primary btn-lg" onClick={() => nav({ page: 'admin' })}>Claim your profile →</button>
        </div>
      </div>
    </div>
  );
};

const PricingTiers = ({ tiers, nav }) => (
  <div className="grid grid-3">
    {tiers.map(t => (
      <div key={t.name} className="card" style={{ padding: 28, position: 'relative', borderColor: t.highlight ? 'var(--ink)' : undefined, borderWidth: t.highlight ? 2 : 1 }}>
        {t.highlight && <div style={{ position: 'absolute', top: -11, left: 20, background: 'var(--ink)', color: 'var(--bg)', padding: '3px 10px', fontFamily: 'var(--ff-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Most popular</div>}
        <div style={{ fontFamily: 'var(--ff-display)', fontSize: 24, fontWeight: 400, marginBottom: 12 }}>{t.name}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 14 }}>
          <span style={{ fontFamily: 'var(--ff-display)', fontSize: 44, letterSpacing: '-0.02em', lineHeight: 1 }}>{t.price}</span>
          <span className="muted" style={{ fontSize: 14 }}>{t.unit}</span>
        </div>
        <p style={{ margin: '0 0 20px', color: 'var(--ink-2)', fontSize: 13, minHeight: 56 }}>{t.desc}</p>
        <button className={`btn ${t.highlight ? 'btn-primary' : ''}`} style={{ width: '100%', marginBottom: 20 }} onClick={() => nav({ page: 'admin' })}>{t.cta}</button>
        <div style={{ height: 1, background: 'var(--line)', marginBottom: 16 }} />
        <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {t.features.map(f => (
            <li key={f} style={{ fontSize: 13, display: 'flex', gap: 10 }}>
              <span style={{ color: 'var(--accent)' }}>✓</span>{f}
            </li>
          ))}
        </ul>
      </div>
    ))}
  </div>
);

Object.assign(window, { Pricing });