// `#pricing` — Free / Pro / Enterprise tier table.
// Mirrors the gating table in docs/distribution-model-plan.md.

function PricingPage() {
  const { React } = window;
  const { useEffect } = React;
  const scans = window.ScanPricing || {};

  useEffect(() => {
    document.title = 'Sekura — pricing';
  }, []);

  // One-off managed scans, cheapest first — gives the homepage's "managed from
  // $199" a real home and keeps /pricing consistent with the ways-to-start ladder.
  const managedScans = [scans.skill, scans.sast, scans.dast, scans.both].filter(Boolean);

  const tiers = [
    {
      name: 'Free',
      tagline: 'Public repos, SAST + crypto.',
      price: '$0',
      priceSuffix: '/month',
      cta: { label: 'Start free', href: '/#scan' },
      features: [
        'Public repos only',
        'SAST + crypto-agility scans',
        '2M LLM tokens / month',
        '200k LLM tokens / scan cap',
        'PR review comments + SARIF',
        '7-day retention',
        'Best-effort support',
      ],
    },
    {
      name: 'Pro',
      tagline: 'Private repos, auto-fix PRs.',
      price: '$49',
      priceSuffix: '/user / month',
      featured: true,
      cta: { label: 'Sign up', href: '/init/' },
      features: [
        'Everything in Free',
        'Private repos',
        'Auto-fix-PR mode',
        '50M LLM tokens / month',
        '5M LLM tokens / scan cap',
        'HTML reports',
        '90-day retention',
        '99.5% control-plane SLA',
      ],
    },
    {
      name: 'Enterprise',
      tagline: 'DAST, compliance, self-hosted runners.',
      price: 'Contact',
      priceSuffix: ' sales',
      cta: { label: 'Talk to sales', href: '/poc/' },
      features: [
        'Everything in Pro',
        'DAST + exploit chain',
        'Self-hosted runner support',
        'Compliance frameworks (PCI, SOC 2, HIPAA)',
        'Executive PDF reports',
        'Unlimited retention',
        'Usage-based billing on LLM tokens',
        '99.9% SLA + custom support',
      ],
    },
  ];

  return (
    <div className="pricing-page">
      <section className="pricing-hero">
        <h1>Start free. See the price.</h1>
        <p>
          Four ways to start — scan a repo free, order a one-off managed scan,
          run continuous CI, or deploy on-prem. Public prices, no “request a demo”
          wall. For continuous plans we meter exactly one thing: LLM tokens —
          scan minutes come from your existing GitHub Actions quota, and your
          code never leaves GitHub.
        </p>
      </section>

      <section className="pricing-tier-group">
        <p className="pricing-group-eyebrow">continuous · cli &amp; ci</p>
        <h2 className="pricing-group-title">Every PR, every push</h2>
      </section>

      <section className="pricing-tiers">
        {tiers.map((t) => (
          <div key={t.name} className={`pricing-tier ${t.featured ? 'featured' : ''}`}>
            <h2>{t.name}</h2>
            <p className="pricing-tagline">{t.tagline}</p>
            <p className="pricing-price">
              <span className="amount">{t.price}</span>
              <span className="suffix">{t.priceSuffix}</span>
            </p>
            <a href={t.cta.href} className="pricing-cta">{t.cta.label}</a>
            <ul>
              {t.features.map((f, i) => <li key={i}>{f}</li>)}
            </ul>
          </div>
        ))}
      </section>

      <section className="pricing-managed">
        <div className="pricing-managed-inner">
          <p className="pricing-group-eyebrow">one-off · pay per scan</p>
          <h2 className="pricing-group-title">Managed scans</h2>
          <p className="pricing-managed-sub">
            No subscription. We run the scan and deliver a full report — every
            finding with a proof-of-exploit. From ${managedScans.length ? Math.min(...managedScans.map(s => s.price)) : 199}.
          </p>
          <div className="managed-grid">
            {managedScans.map((s) => (
              <div className="managed-card" key={s.label}>
                <div className="managed-price">${s.price}</div>
                <h3 className="managed-label">{s.label}</h3>
                <p className="managed-blurb">{s.blurb}</p>
                <a className="managed-cta" href="/managed-scan/">order this scan →</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="pricing-faq seo-only">
        <h2>Common questions</h2>
        <dl>
          <dt>Do you see my source code?</dt>
          <dd>No. The scanner runs entirely in your GitHub Actions runner. We see prompts and responses to the LLM (briefly, through proxy.sekura.ai) but never your repo contents.</dd>

          <dt>What counts as an LLM token?</dt>
          <dd>Standard Anthropic / OpenAI input + output tokens. The proxy returns the exact count on every response so you can see usage in the dashboard live.</dd>

          <dt>Can I run on a self-hosted runner?</dt>
          <dd>Yes — Pro and Enterprise. Useful for scanning private targets that public GitHub runners can't reach (internal staging, VPN-only deployments).</dd>

          <dt>What about my existing CI?</dt>
          <dd>One workflow file gets added to your repo on install. Edit it freely; running `npx sekura ci-setup` again won't overwrite your changes.</dd>
        </dl>
      </section>



    </div>
  );
}

window.PricingPage = PricingPage;