/* ============================================================
   Pricing — value-based starting packages for business systems.
   ============================================================ */
const PLANS = [
  {
    name: 'A) Beginner Website', price: '₹29,999+', period: 'starting from',
    blurb: 'For businesses that need a premium online presence and clear enquiry flow.',
    features: ['Modern one-page or compact website', 'Mobile-first design', 'Basic SEO setup', 'Contact / WhatsApp enquiry flow'],
    cta: 'Start online', featured: false,
  },
  {
    name: 'B) Intermediate Website + Bot', price: '₹69,999+', period: 'starting from',
    blurb: 'For businesses that want a stronger website with faster customer response.',
    features: ['Multi-section or multi-page website', 'AI chatbot or WhatsApp FAQ flow', 'Lead capture setup', 'Analytics and conversion improvements'],
    cta: 'Build growth system', featured: true,
  },
  {
    name: 'C) Value-Driven Lead System', price: '₹2,00,000+', period: 'starting from',
    blurb: 'For teams that need organised leads, follow-ups and less manual coordination.',
    features: ['CRM or lead tracker', 'Automated follow-up flows', 'Dashboard for enquiries and status', 'Key business integrations'],
    cta: 'Automate follow-up', featured: false,
  },
  {
    name: 'D) Premium Business System', price: '₹3,00,000–₹5,00,000+', period: 'starting from',
    blurb: 'For businesses needing a custom digital system.',
    features: ['Custom CRM and dashboards', 'Workflow automation and AI agents', 'Calling / WhatsApp flows', 'Database-backed system, integrations and ongoing optimization'],
    cta: 'Plan premium system', featured: false,
  },
];

function PlanCard({ p, i }) {
  return (
    <Reveal delay={i * 110} className="plan-card"
      style={{
        position: 'relative', display: 'flex', flexDirection: 'column', padding: p.featured ? '38px 30px 34px' : '32px 30px 30px',
        borderRadius: '24px', background: p.featured ? 'rgba(155,232,221,0.06)' : 'rgba(255,255,255,0.035)',
        border: `1px solid ${p.featured ? 'rgba(155,232,221,0.32)' : 'rgba(255,255,255,0.09)'}`,
        transform: p.featured ? 'translateY(-10px)' : 'none', overflow: 'hidden',
        boxShadow: p.featured ? '0 24px 60px rgba(139,92,246,0.18)' : 'none',
        transition: 'border-color 0.3s ease',
      }}>
      {p.featured ? (
        <>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(400px 220px at 50% -10%, rgba(139,92,246,0.18), transparent 65%)', pointerEvents: 'none' }} />
          <span style={{ position: 'absolute', top: '18px', right: '18px', padding: '5px 12px', borderRadius: '9999px', background: 'var(--grad-accent)', color: '#0A0C18', fontSize: '0.7rem', fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Popular</span>
        </>
      ) : null}
      <div style={{ position: 'relative' }}>
        <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '1.3rem', color: '#fff', margin: '0 0 8px' }}>{p.name}</h3>
        <p style={{ fontSize: '0.92rem', lineHeight: 1.5, color: 'rgba(236,234,242,0.66)', margin: '0 0 22px', minHeight: '60px' }}>{p.blurb}</p>
        <div style={{ marginBottom: '24px' }}>
          <span style={{ display: 'block', fontSize: '0.78rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#9BE8DD', marginBottom: '8px' }}>{p.period}</span>
          <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 'clamp(1.65rem, 2.7vw, 2.35rem)', color: '#fff', letterSpacing: '-0.02em', lineHeight: 1 }}>{p.price}</span>
        </div>
        <a href="#contact" onClick={(e) => heroScrollTo(e, '#contact')} className={p.featured ? 'cta-btn' : 'ghost-btn'}
          style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '9px', textDecoration: 'none',
            padding: '14px', borderRadius: '50px', fontWeight: 700, fontSize: '0.98rem', marginBottom: '26px',
            background: p.featured ? 'var(--grad-accent)' : 'rgba(255,255,255,0.05)',
            color: p.featured ? '#0A0C18' : '#ECEAF2',
            border: p.featured ? 'none' : '1px solid rgba(255,255,255,0.18)',
            boxShadow: p.featured ? '0 4px 22px rgba(139,92,246,0.34)' : 'none',
          }}>
          {p.cta}
        </a>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '13px' }}>
          {p.features.map((f) => (
            <li key={f} style={{ display: 'flex', alignItems: 'center', gap: '11px', fontSize: '0.94rem', color: 'rgba(236,234,242,0.82)' }}>
              <span style={{ flex: '0 0 auto', width: '20px', height: '20px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(155,232,221,0.14)' }}>
                <Icon name="Check" size={13} style={{ color: '#9BE8DD' }} strokeWidth={2.6} />
              </span>
              {f}
            </li>
          ))}
        </ul>
      </div>
    </Reveal>
  );
}

function Pricing() {
  return (
    <Section id="pricing" data-screen-label="Pricing">
      <SectionHead
        eyebrow="Pricing" eyebrowIcon="TrendingUp" align="center" maxW="720px"
        title="Value-based packages that"
        titleAccent="grow with your business"
        sub="Choose a starting point, then we shape the final system around your goals, customer journey and automation needs."
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: '20px', marginTop: 'clamp(48px,5.5vw,68px)', alignItems: 'start' }} className="plans-grid">
        {PLANS.map((p, i) => <PlanCard key={p.name} p={p} i={i} />)}
      </div>
      <Reveal delay={140}>
        <p style={{ textAlign: 'center', margin: '30px auto 0', maxWidth: '760px', fontSize: '0.92rem', lineHeight: 1.6, color: 'rgba(236,234,242,0.58)' }}>
          Final pricing depends on scope, integrations, automation complexity, and support requirements. <a href="#contact" onClick={(e) => heroScrollTo(e, '#contact')} style={{ color: '#9BE8DD', textDecoration: 'none', fontWeight: 600 }}>Ask us for a tailored quote</a>.
        </p>
      </Reveal>
    </Section>
  );
}

Object.assign(window, { Pricing });