const { useState: useStateP } = React;

function PricingTiers() {
  const [tier, setTier] = useStateP('pro');
  const engineFor = (key) => key === 'concierge' ? 799 : 599;
  const tiers = {
    essentials: {
      name: 'Essentials',
      price: 299,
      tagline: 'Light-touch oversight. Monthly sign-off.',
      cadence: 'MONTHLY',
      includes: ['Weekly AI audit', '1 specialist review / mo', 'Monthly strategy call', 'Email support'],
      accent: 'cyan'
    },
    pro: {
      name: 'Pro',
      price: 599,
      tagline: 'The signature on every week. Most teams start here.',
      cadence: 'WEEKLY',
      includes: ['2 weekly AI audits', '1 specialist review / wk', 'Bi-weekly strategy call', 'Shared Slack channel', 'Creative review queue'],
      accent: 'purple',
      featured: true
    },
    concierge: {
      name: 'Concierge',
      price: 1799,
      tagline: 'A named team. A line into the engine room.',
      cadence: 'DAILY',
      includes: ['Daily AI audit', 'Named specialist team', 'Weekly strategy call', 'Direct Slack + phone', 'Custom creative studio', 'Quarterly business review'],
      accent: 'magenta'
    }
  };
  const t = tiers[tier];
  return (
    <section id="pricing" className="pricing-section">
      <div className="section-inner">
        <div className="section-head centered">
          <div className="eyebrow">PRICING</div>
          <h2 className="section-title">Pay once for the AI.<br/><span className="muted">Choose your human layer.</span></h2>
          <p className="section-sub">A flat engine fee gets you the AI. Pick how often a specialist looks in.</p>
        </div>

        <div className="tier-toggle" role="tablist">
          {Object.entries(tiers).map(([key, v]) => (
            <button
              key={key}
              role="tab"
              aria-selected={tier === key}
              className={'tier-tab ' + (tier === key ? 'active ' + v.accent : '')}
              onClick={() => setTier(key)}
            >
              <span className="tier-tab-name">{v.name}</span>
              <span className="tier-tab-cadence">{v.cadence}</span>
            </button>
          ))}
        </div>

        <div className="pricing-card glass-card">
          <div className="pricing-left">
            <div className={'eyebrow ' + t.accent}>{t.name.toUpperCase()} · OVERSIGHT</div>
            <div className="pricing-price">
              <span className="pricing-euro">€</span>
              <span className="pricing-num">{(engineFor(tier) + t.price).toLocaleString()}</span>
              <span className="pricing-per">/ MO</span>
            </div>
            <div className="pricing-breakdown">
              €{engineFor(tier)} engine <span className="plus">+</span> €{t.price.toLocaleString()} oversight
            </div>
            <p className="pricing-tag">{t.tagline}</p>
            <a href="https://app.growth-dna.ai/signup" className="btn-pulse btn-lg">Start now <span>→</span></a>
            <div className="pricing-fine">No credit card. Cancel any time.</div>
          </div>
          <div className="pricing-right">
            <div className="mono-label">WHAT'S INCLUDED</div>
            <ul className="check-list">
              {t.includes.map((it, i) => (
                <li key={i}>
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="url(#gdna-gradient)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M20 6L9 17l-5-5"/>
                  </svg>
                  <span>{it}</span>
                </li>
              ))}
              <li className="muted-row">
                <span className="plus-icon">+</span>
                <span>Everything in the AI engine tier</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.PricingTiers = PricingTiers;