const Pricing = ({ highlight = 'Single' }) => {
  const plans = [
  {
    name: 'Single',
    price: '$39',
    sub: 'one-time · lifetime updates',
    desc: 'For individuals. One Mac user, one license, every future 1.x update included.',
    features: [
    'All features',
    'All 8 AI providers (BYOK)',
    'Per-account voice learning',
    'Unlimited mail accounts',
    'Lifetime 1.x updates'],

    cta: '14-day free trial, then $39',
    buyURL: 'https://shop.mailtwin.ai/buy/1604039'
  },
  {
    name: '5-pack',
    price: '$99',
    sub: 'one-time · 5 licenses',
    desc: 'For families or small teams. Five activations to share, lifetime updates included.',
    features: [
    'Everything in Single',
    '5 license activations',
    'Share with family or teammates',
    'Lifetime 1.x updates'],

    cta: '14-day free trial, then $99',
    featured: true,
    buyURL: 'https://shop.mailtwin.ai/buy/1607296'
  }];


  return (
    <section id="pricing" style={{ background: 'var(--bg)' }}>
      <div className="container-tight">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}><span className="dot" /> Pricing</div>
          <h2 style={{ marginTop: 18 }}>Pay once.<br /><span className="serif" style={{ fontStyle: 'italic' }}>Not every month.</span></h2>
          <p className="lede" style={{ marginTop: 22, maxWidth: 600, marginInline: 'auto' }}>
            MailTwin is a one-time purchase with lifetime 1.x updates. Token cost goes
            straight to whichever provider's key you've supplied — usually pennies a day,
            sometimes zero.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, maxWidth: 760, margin: '0 auto' }}>
          {plans.map((p) => {
            const isHi = p.name === highlight || highlight === undefined && p.featured;
            return (
              <div key={p.name} style={{
                padding: 36, borderRadius: 'var(--radius-lg)',
                background: isHi ? 'var(--ink)' : 'white',
                color: isHi ? 'white' : 'var(--ink)',
                border: isHi ? '1px solid var(--ink)' : '1px solid var(--line)',
                position: 'relative',
                transform: isHi ? 'scale(1.02)' : 'none',
                boxShadow: isHi ? '0 30px 60px -25px rgba(155,111,224,0.5)' : 'none',
                overflow: 'hidden'
              }}>
                {isHi &&
                <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: 'linear-gradient(90deg,#F4A6C8,#C26FD9,#7B7BE8,#6BA0F0)' }} />
                }
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 14, fontWeight: 600, opacity: 0.7 }}>{p.name}</div>
                  {isHi && <span style={{ fontSize: 11, padding: '3px 10px', borderRadius: 999, background: 'linear-gradient(135deg,#C26FD9,#7B7BE8)', color: 'white', fontWeight: 600 }}>Amazing offer</span>}
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 16 }}>
                  <div style={{ fontSize: 64, fontWeight: 600, letterSpacing: '-0.04em' }}>{p.price}</div>
                  <div style={{ fontSize: 14, opacity: 0.6, fontWeight: "400" }}>{p.sub}</div>
                </div>
                <div style={{ fontSize: 14, opacity: 0.7, marginTop: 8, minHeight: 42 }}>{p.desc}</div>
                <a href={p.buyURL} target="_blank" rel="noopener" className={isHi ? 'btn btn-primary' : 'btn btn-dark'} style={{ marginTop: 24, width: '100%', justifyContent: 'center', padding: '14px 22px' }}>{p.cta}</a>
                <ul style={{ listStyle: 'none', padding: 0, margin: '28px 0 0', display: 'grid', gap: 12 }}>
                  {p.features.map((f) =>
                  <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14 }}>
                      <Icons.Check size={18} stroke={2.4} style={{ color: isHi ? 'var(--pink)' : 'var(--purple)', flexShrink: 0, marginTop: 1 }} />
                      <span>{f}</span>
                    </li>
                  )}
                </ul>
              </div>);

          })}
        </div>

        <div style={{ marginTop: 32, textAlign: 'center', color: 'var(--muted)', fontSize: 13, maxWidth: 720, margin: '32px auto 0' }}>14-day full-feature trial. After day 14, the app keeps working but is limited to 1 AI call per day until you activate a license. 

        </div>
      </div>
    </section>);

};

window.Pricing = Pricing;