/* PRICING / engagement models */

function SvcPricing() {
  const isMobile = useWindowWidth() < 768;

  const tiers = [
    {
      name: 'Sprint',
      tag: 'BEST FOR ONE-OFF NEEDS',
      price: '$15K',
      unit: 'project',
      desc: 'A 3–6 week scoped engagement to ship one outcome — a PDP refactor, a creative testing sprint, an analytics rebuild.',
      features: [
        '1 senior squad (3 people)',
        '14-day sprint cycle',
        'Weekly demos + reports',
        'Hand-off documentation',
        '30-day post-launch support',
      ],
      cta: 'Start a sprint',
      featured: false,
    },
    {
      name: 'Growth Partner',
      tag: 'MOST POPULAR',
      price: '$9K',
      unit: 'per month',
      desc: 'Embedded squad running performance marketing, CRO and storefront ops on an ongoing basis. Built for $1M–$50M brands scaling weekly.',
      features: [
        'Embedded senior squad (4–6 people)',
        'Weekly experimentation cadence',
        'Channel-mix optimization',
        'Lifecycle + retention layer',
        'Quarterly business review',
        'Slack channel, async-first',
        'Cancel anytime, month-to-month',
      ],
      cta: 'Book a scoping call',
      featured: true,
    },
    {
      name: 'Performance Share',
      tag: 'FOR SELECT BRANDS',
      price: 'Variable',
      unit: 'base + % upside',
      desc: 'For brands ready to bet on outcomes. Lower base fee + revenue share on incremental lift. We only win when you do.',
      features: [
        'Lower upfront fee',
        'Revenue share on incremental lift',
        'Quarterly true-up + transparent reporting',
        'Co-owned attribution model',
        'Same squad, same cadence',
        'Application-only · 4 spots / quarter',
      ],
      cta: 'Apply for fit',
      featured: false,
    },
  ];

  return (
    <section data-screen-label="Pricing" id="pricing" style={{ paddingTop: 64, paddingBottom: 64, background: 'var(--bg-2)' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Engagement models"
          title={<>Pricing that fits <span className="accent">how you actually grow.</span></>}
          lead="Three ways to work with us. All transparent, no annual contracts, no surprise invoices."
          align="center"
        />

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 18 }}>
          {tiers.map((t, i) => (
            <Reveal key={t.name} delay={i * 100}>
              <PricingCard tier={t} />
            </Reveal>
          ))}
        </div>

        {/* Bottom note row */}
        <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 18 }}>
          {[
            ['No long-term contracts', 'Month-to-month, cancel with 30-day notice'],
            ['Transparent timesheets',  'You see exactly what hours go where, every week'],
            ['Senior-only team',        '7+ years average. No juniors silently learning on your account'],
          ].map(([t, d]) => (
            <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{ flexShrink: 0, marginTop: 2, width: 20, height: 20, borderRadius: '50%', background: 'var(--green)', color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon.Check size={11} />
              </span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 2 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingCard({ tier }) {
  return (
    <div style={{
      background: tier.featured ? 'var(--ink)' : 'white',
      color: tier.featured ? 'white' : 'var(--ink)',
      border: `1px solid ${tier.featured ? 'var(--ink)' : 'var(--hairline-2)'}`,
      borderRadius: 20, padding: 28,
      display: 'flex', flexDirection: 'column', gap: 18,
      position: 'relative',
      boxShadow: tier.featured ? '0 40px 80px -30px rgba(15,191,97,.25)' : 'none',
      overflow: 'hidden',
      height: '100%', boxSizing: 'border-box',
    }}>
      {tier.featured && (
        <div aria-hidden style={{
          position: 'absolute', top: -80, right: -80, width: 240, height: 240,
          background: 'radial-gradient(circle, rgba(15,191,97,0.4), transparent 60%)',
          filter: 'blur(40px)', pointerEvents: 'none',
        }}></div>
      )}

      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div className="mono-label" style={{ color: tier.featured ? 'var(--green-bright)' : 'var(--green-deep)' }}>{tier.tag}</div>
          <h3 style={{ fontSize: 26, fontWeight: 500, marginTop: 8, letterSpacing: '-0.02em' }}>{tier.name}</h3>
        </div>
        {tier.featured && (
          <span style={{ padding: '4px 10px', background: 'var(--green)', borderRadius: 999, fontSize: 11, fontWeight: 600, color: 'white', fontFamily: 'var(--font-mono)' }}>POPULAR</span>
        )}
      </div>

      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span className="num" style={{ fontSize: 48, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1 }}>{tier.price}</span>
          <span style={{ fontSize: 13, color: tier.featured ? 'rgba(255,255,255,.6)' : 'var(--ink-soft)' }}>{tier.unit}</span>
        </div>
        <p style={{ fontSize: 14, color: tier.featured ? 'rgba(255,255,255,.7)' : 'var(--ink-soft)', margin: '10px 0 0 0', lineHeight: 1.5 }}>{tier.desc}</p>
      </div>

      <div style={{ position: 'relative', height: 1, background: tier.featured ? 'rgba(255,255,255,.1)' : 'var(--hairline)' }}></div>

      <ul style={{ position: 'relative', listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
        {tier.features.map(f => (
          <li key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14 }}>
            <span style={{ flexShrink: 0, marginTop: 4, width: 14, height: 14, borderRadius: '50%', background: tier.featured ? 'var(--green)' : 'var(--green-soft)', color: tier.featured ? 'white' : 'var(--green-deep)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon.Check size={9} />
            </span>
            <span style={{ color: tier.featured ? 'rgba(255,255,255,.9)' : 'var(--ink)' }}>{f}</span>
          </li>
        ))}
      </ul>

      <div style={{ position: 'relative', marginTop: 6 }}>
        {tier.featured ? (
          <BtnGreen style={{ width: '100%', justifyContent: 'center' }} onClick={() => window.open('https://calendly.com/ecomlifters/30min', '_blank')}>{tier.cta}</BtnGreen>
        ) : (
          <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'space-between' }} onClick={() => window.open(tier.name === 'Performance Share' ? 'mailto:ecomlifters@gmail.com' : 'https://wa.me/917982069421', '_blank')}>
            <span>{tier.cta}</span>
            <Icon.Arrow size={14} />
          </button>
        )}
      </div>
    </div>
  );
}

window.SvcPricing = SvcPricing;