// Pricing - 3 plans + Enterprise strip
const { useState: useStatePr } = React;

const TIERS_MO = [
  {
    name: 'Continuous',
    price: '2,500',
    pricingNote: '/ mo',
    desc: 'AI-led continuous vulnerability assessment with dedupe + noise filtering.',
    feats: [
      'Continuous AI agents · 1 application',
      'Dedupe + noise reduction layer',
      'Confidence-scored findings dashboard',
      'Monthly trend report',
      'Slack & Jira integration',
      '24h SLA on critical findings',
    ],
    muted: [
      'Human validation',
      'Manual reports + video PoCs',
    ],
    cta: 'Start with Continuous',
  },
  {
    name: 'Hybrid', featured: true, badge: 'Flagship',
    price: '6,900',
    pricingNote: '/ mo',
    desc: 'AI continuous assessment validated by senior pentesters. The flagship offering.',
    feats: [
      'Continuous AI · up to 10 assets',
      'Human validation · low → critical',
      'Exploitability confirmation + sandbox replay',
      'Manual-quality reports + video PoCs',
      'Retest support included',
      'Per-PR delta scanning',
      'Compliance-mapped report formats',
      '4h SLA on critical findings',
    ],
    muted: ['Red team / adversary sim'],
    cta: 'Talk to a pentester',
  },
  {
    name: 'Manual',
    price: '14,500',
    pricingNote: '/ engagement',
    desc: 'Full expert-led manual pentest, recon to retest.',
    feats: [
      'Web · API · Mobile · Network · Cloud',
      'Business logic + auth/access testing',
      'OWASP Top 10 + custom scenarios',
      'Executive summary + technical report',
      'Video PoCs · screenshots · payloads',
      'Retest included',
      'Compliance-mapped deliverables',
      'Scoped within 5 business days',
    ],
    muted: [],
    cta: 'Scope a pentest',
  },
];

function Pricing() {
  const [annual, setAnnual] = useStatePr(true);

  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head">
          <div className="section-head__title">
            <span className="eyebrow">08 · Pricing</span>
            <h2 style={{ marginTop: 18 }}>One platform, three plans.<br/>Continuous security without continuous procurement.</h2>
            <p style={{ marginTop: 14, maxWidth: 520 }}>Flat pricing. No per-finding fees. Manual credits roll over. Talk to us; quotes inside one business day.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 14 }}>
            <div className="price-toggle">
              <button className={`price-toggle__btn${!annual ? ' price-toggle__btn--active' : ''}`} onClick={() => setAnnual(false)}>Monthly</button>
              <button className={`price-toggle__btn${annual ? ' price-toggle__btn--active' : ''}`} onClick={() => setAnnual(true)}>Annual · −20%</button>
            </div>
            <div className="section-head__meta">[ usd · pricing applies to monthly tiers ]</div>
          </div>
        </div>

        <div className="price-grid">
          {TIERS_MO.map((t, i) => {
            const isPerEngagement = t.pricingNote === '/ engagement';
            const n = parseFloat(t.price.replace(/,/g,''));
            const adj = (annual && !isPerEngagement) ? Math.round(n * 0.8) : n;
            const priceDisplay = adj.toLocaleString();
            return (
              <div key={i} className={`price-card${t.featured ? ' price-card--featured' : ''}`}>
                {t.badge && <div className="price-card__badge">{t.badge}</div>}
                <div className="price-card__name">{t.name}</div>
                <div className="price-card__price">
                  <span style={{ fontFamily: 'Space Grotesk', fontSize: 28, color: 'var(--text-2)', alignSelf: 'flex-start', marginRight: -4 }}>{isPerEngagement ? 'from $' : '$'}</span>
                  <span className="price-card__amount">{priceDisplay}</span>
                  <span className="price-card__per">{t.pricingNote}</span>
                </div>
                <div className="price-card__desc">{t.desc}</div>
                <div className="price-card__feats">
                  {t.feats.map((f, j) => (
                    <div key={j} className="price-card__feat">
                      <span className="price-card__feat-bullet">→</span>
                      <span>{f}</span>
                    </div>
                  ))}
                  {t.muted.map((f, j) => (
                    <div key={`m${j}`} className="price-card__feat price-card__feat--muted">
                      <span className="price-card__feat-bullet">·</span>
                      <span style={{ textDecoration: 'line-through', textDecorationColor: 'rgba(154,163,188,0.3)' }}>{f}</span>
                    </div>
                  ))}
                </div>
                <div className="price-card__cta">
                  <a className={`btn${t.featured ? '' : ' btn--ghost'}`} href="#contact" style={{ width: '100%', justifyContent: 'center' }}>
                    {t.cta}
                    <span className="btn__arrow">→</span>
                  </a>
                </div>
              </div>
            );
          })}
        </div>

        <div className="enterprise-strip">
          <div>
            <div className="enterprise-strip__eyebrow">ENTERPRISE</div>
            <div className="enterprise-strip__title">Multi-BU, multi-cloud, regulated environments.</div>
            <div className="enterprise-strip__sub">Dedicated pentesters · custom AI agents · on-prem deployment · 1h SLA · 24/7 incident channel · quarterly executive briefings.</div>
          </div>
          <a className="btn btn--ghost" href="#contact">Talk to sales <span className="btn__arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });