// ────────────────────────────────────────────────────────────
// Landing v2 — Pricing module
// ────────────────────────────────────────────────────────────
const { useState: useStateP } = React;

const PRICING_TIERS = [
  {
    id: 'starter',
    name: 'Starter',
    tagline: 'For solo operators getting WhatsApp under control',
    priceMonthly: 199,
    priceAnnual: 169,
    cta: 'Start a 14-day trial',
    ctaHref: 'https://wa.me/60123455720',
    accent: 'navy',
    features: [
      { text: '1 WhatsApp number', strong: true },
      { text: 'Reply FAQ — auto-answers from your docs' },
      { text: 'Booking — Cal.com / Google Calendar sync' },
      { text: 'Qualify — basic lead scoring' },
      { text: 'Email + WhatsApp support · 24h' },
    ],
  },
  {
    id: 'growth',
    name: 'Growth',
    tagline: 'For multi-location service businesses',
    priceMonthly: 399,
    priceAnnual: 339,
    cta: 'Book a 20-min demo',
    ctaHref: 'https://wa.me/60123455720',
    accent: 'blue',
    badge: 'Most popular',
    features: [
      { text: 'Up to 3 WhatsApp numbers', strong: true },
      { text: 'Everything in Starter, plus:' },
      { text: 'Follow-up — silent-lead re-engagement' },
      { text: 'Send image + PDF attachments' },
      { text: 'Multi-provider routing + handover triggers' },
      { text: 'Knowledge base · unlimited docs' },
      { text: 'Priority WhatsApp support · 4h' },
    ],
  },
  {
    id: 'scale',
    name: 'Scale',
    tagline: 'For chains, franchises, and high-volume operators',
    priceLabel: 'Custom',
    priceMonthly: null,
    priceAnnual: null,
    cta: 'Talk to founders',
    ctaHref: 'https://wa.me/60123455720',
    accent: 'navy-dark',
    features: [
      { text: 'Unlimited WhatsApp numbers', strong: true },
      { text: 'Custom vertical playbooks' },
      { text: 'Dedicated implementation manager' },
      { text: 'SLA · 99.9% uptime · 1h response' },
      { text: 'API access + custom integrations' },
      { text: 'Quarterly business review' },
    ],
  },
];

function PricingSection() {
  const [annual, setAnnual] = useStateP(true);

  return (
    <section className="pr-section" id="pricing">
      <div className="container">
        <div className="pr-head">
          <span className="eyebrow-pill pr-eyebrow">
            <span className="dot">F</span>
            Pricing
          </span>
          <h2 className="pr-h2">
            One installed system.<br />
            <span className="hl-blue">Pays for itself in week one.</span>
          </h2>
          <p className="pr-sub">
            Monthly or annual billing in MYR. Annual plans paid upfront at a lower rate. No setup fee. No contract. Cancel anytime.
          </p>

          <div className="pr-toggle" role="tablist" aria-label="Billing cycle">
            <button
              role="tab"
              aria-selected={!annual}
              className={'pr-toggle-btn' + (!annual ? ' is-active' : '')}
              onClick={() => setAnnual(false)}
            >
              Monthly
            </button>
            <button
              role="tab"
              aria-selected={annual}
              className={'pr-toggle-btn' + (annual ? ' is-active' : '')}
              onClick={() => setAnnual(true)}
            >
              Annual
              <span className="pr-toggle-save">Save 15%</span>
            </button>
          </div>
        </div>

        <div className="pr-grid">
          {PRICING_TIERS.map((t) => (
            <div key={t.id} className={'pr-card pr-accent-' + t.accent + (t.badge ? ' is-featured' : '')}>
              {t.badge && <div className="pr-badge">{t.badge}</div>}
              <div className="pr-card-head">
                <div className="pr-name">{t.name}</div>
                <div className="pr-tagline">{t.tagline}</div>
              </div>

              <div className="pr-price">
                {t.priceMonthly !== null ? (
                  <>
                    <span className="pr-price-prefix">RM</span>
                    <span className="pr-price-num">{(annual ? t.priceAnnual : t.priceMonthly).toLocaleString()}</span>
                    <span className="pr-price-suffix">/ month</span>
                  </>
                ) : (
                  <span className="pr-price-custom">{t.priceLabel}</span>
                )}
              </div>
              <div className="pr-price-sub">
                {t.priceMonthly !== null
                  ? (annual ? 'Billed annually · ' + ('RM ' + (t.priceAnnual * 12).toLocaleString()) + ' / year' : 'Billed monthly · no commitment')
                  : 'Volume-based · talk to us'}
              </div>

              <a className={'pr-cta' + (t.accent === 'blue' ? ' pr-cta-primary' : '')} href={t.ctaHref}>
                {t.cta}
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
              </a>

              <div className="pr-feat-label">What's included</div>
              <ul className="pr-feats">
                {t.features.map((f, i) => (
                  <li key={i} className={f.strong ? 'is-strong' : ''}>
                    <span className="pr-tick">
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    {f.text}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="pr-foot">
          <div className="pr-foot-item">
            <span className="pr-foot-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            2–4 week installation
          </div>
          <div className="pr-foot-item">
            <span className="pr-foot-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            No setup fee
          </div>
          <div className="pr-foot-item">
            <span className="pr-foot-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            Cancel anytime
          </div>
        </div>
      </div>
    </section>
  );
}

window.PricingSection = PricingSection;