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

function PricingPage() {
  const { React } = window;
  const { useEffect } = React;

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

  const tiers = [
    {
      name: 'Free',
      tagline: 'Public repos, SAST + crypto.',
      price: '$0',
      priceSuffix: '/month',
      cta: { label: 'Start free', href: '#init' },
      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">
      <header className="pricing-header">
        <a href="#" className="pricing-logo">SEKURA</a>
        <nav>
          <a href="#init">get started</a>
          <a href="#cicd">ci/cd</a>
        </nav>
      </header>

      <section className="pricing-hero">
        <h1>Predictable pricing. No runner-minutes math.</h1>
        <p>
          We meter exactly one thing: LLM tokens. Scan minutes come out of your
          existing GitHub Actions quota — unlimited for public repos, 2,000
          free/month for private. Your code never leaves GitHub.
        </p>
      </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-faq">
        <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>

      <window.SiteFooter />
    </div>
  );
}

window.PricingPage = PricingPage;