// ======== PRICING ========
const PRICING = [
  {
    price: '$1,000',
    label: 'MVP',
    tag: '1–2 WEEKS',
    desc: 'Your idea in real users\' hands. A focused MVP, built and shipped to production.',
    items: ['Core user flow', 'Auth & database', 'Deployed live', 'Source code yours'],
    featured: true,
  },
  {
    price: '$5,000',
    label: 'LAUNCH',
    tag: '4 WEEKS',
    desc: 'A complete launch-ready product with the polish to charge real customers.',
    items: ['Auth & billing', 'Admin panel', 'Marketing site', 'Analytics & telemetry'],
  },
  {
    price: '$15,000',
    label: 'PRODUCTION',
    tag: '8 WEEKS',
    desc: 'A full web or mobile product, engineered for scale from day one.',
    items: ['Web or mobile', 'Typed APIs', 'AI features', '30-day stabilization'],
  },
  {
    price: '$50,000+',
    label: 'PLATFORM',
    tag: 'ONGOING',
    desc: 'Multi-surface products, platform work, or a monthly retainer with a dedicated team.',
    items: ['Multiple surfaces', 'Dedicated team', 'Monthly retainer', 'SLAs on request'],
  },
];

function Pricing() {
  return (
    <section className="section page" id="pricing">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 80, gap: 48, flexWrap:'wrap'}}>
        <div>
          <div className="eyebrow" style={{marginBottom: 32}}>
            <span>[ 06 / Pricing ]</span>
          </div>
          <h2 className="display" style={{fontSize:'clamp(48px, 8vw, 140px)'}}>
            <RevealLine as="span" className="word-block">Fixed</RevealLine>
            <RevealLine as="span" className="word-block" delay={100}><span className="serif">prices.</span></RevealLine>
          </h2>
        </div>
        <FadeUp delay={300}>
          <p style={{maxWidth: 360, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.5}}>
            Quoted after a scoping call. No hourly billing, no surprise invoices.
          </p>
        </FadeUp>
      </div>

      <div className="pricing-grid">
        {PRICING.map((p, i) => (
          <FadeUp key={p.price} delay={i*80} className={`pricing-card ${p.featured ? 'featured' : ''}`}>
            <div className="pricing-top">
              <div className="pricing-tag">{p.tag}</div>
              <div className="pricing-label">{p.label}</div>
            </div>
            <div className="pricing-price">{p.price}<span className="pricing-usd"> USD</span></div>
            <p className="pricing-desc">{p.desc}</p>
            <ul className="pricing-list">
              {p.items.map((it) => (
                <li key={it}>
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M2 6L5 9L10 3" stroke="currentColor" strokeWidth="1.5" />
                  </svg>
                  {it}
                </li>
              ))}
            </ul>
            <a href="#contact" className="pricing-cta" data-cursor="hover">
              Start here
              <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
                <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" />
              </svg>
            </a>
          </FadeUp>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });