// ─────────────────────────────────────────────────────────
//  Pricing / Engagement Tiers
// ─────────────────────────────────────────────────────────

function formatPrice(range) {
  return range.split(' – ').map(part => '$' + part).join(' – ');
}

const TIERS = [
  {
    name: 'Sprint',
    h: 'Audit, landing, or one focused deliverable.',
    tagline: 'For founders who need momentum.',
    price: '1K – 5K',
    term: '1 – 2 weeks',
    items: [
      'Full conversion audit + Loom walkthrough',
      'Landing page or single-flow redesign',
      'Direct access · Mon–Fri',
      '14-day post-launch fixes included',
    ],
    cta: 'Book a sprint →',
  },
  {
    name: 'Build',
    h: 'Full platform — design, build, automate.',
    tagline: 'For brands shipping their next chapter.',
    price: '1K – 75K',
    term: '4 – 8 weeks',
    items: [
      'Custom design system from your brand DNA',
      'Production build · Lighthouse 95+ enforced',
      'Full n8n / CRM / WhatsApp automation graph',
      'CMS training · founder + ops team',
      '30-day post-launch retainer included',
    ],
    cta: 'Start a build →',
    featured: true,
    badge: 'Most chosen',
  },
  {
    name: 'Retainer',
    h: 'Studio on tap. Ongoing partnership.',
    tagline: 'For teams with a roadmap, not a project.',
    price: '1K – 10K',
    term: 'per month · 3-month min',
    items: [
      'Dedicated weekly capacity',
      'Continuous design, ship, and tune cycle',
      'Direct Slack / WhatsApp channel',
      'Quarterly strategy review',
      'Priority queue · always',
    ],
    cta: 'Discuss retainer →',
  },
];

function Pricing() {
  return (
    <section className="section shell" data-screen-label="Engagement">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
        <div>
          <div className="kicker">§Engagement · Three ways in</div>
          <h2 style={{
            fontFamily:'var(--serif)', fontWeight:400,
            fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
            letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'18ch',
            textWrap:'balance',
          }}>
            Transparent pricing.<br/>
            <span style={{fontStyle:'italic', color:'var(--accent)'}}>No discovery calls.</span>
          </h2>
        </div>
        <div style={{
          fontFamily:'var(--mono)', fontSize:11,
          letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--muted)',
          textAlign:'right', lineHeight:1.8,
        }}>
          INR available on request<br/>
          GST + payment terms negotiable
        </div>
      </div>

      <div className="pricing-grid">
        {TIERS.map(t => (
          <div key={t.name} className={`tier ${t.featured ? 'featured' : ''}`}>
            {t.badge && <div className="badge">{t.badge}</div>}
            <div className="tier-name">{t.name}</div>
            <h4>{t.h}</h4>
            <div className="tier-tagline">{t.tagline}</div>

            <div className="tier-price">
              <span className="amount">{formatPrice(t.price)}</span>
              <span className="term">{t.term}</span>
            </div>

            <ul>
              {t.items.map(i => <li key={i}>{i}</li>)}
            </ul>

            <a href="#booking" className="tier-cta magnetic-trigger">
              <span>{t.cta}</span>
              <span>→</span>
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Pricing = Pricing;