// /pricing/ — the envelope model. You license an attack surface, not a scan
// count; scans inside it are unlimited and what is metered is concurrent lanes.
//
// Rendered inside the `.ah` wrapper (app/page.jsx) so it shares the landing
// page's white/SF Pro system rather than the cream brand. All content comes
// from data/pricingPlans.js.
//
// The sizer is deliberately client-only and sends nothing anywhere — a buyer
// evaluating a security product should be able to price it without entering
// their asset counts into someone else's CRM. That is the same "no demo wall"
// argument the rest of the site makes, applied to the pricing page itself.

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

  const plans = window.PricingPlans || [];
  const dims = window.PricingDimensions || [];
  const ladder = window.PricingLadder || [];
  const rules = window.EnvelopeRules || [];
  const groups = window.PricingGroups || {};
  const tiers = window.PricingTiers || [];

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

  return (
    <div className="ah-pricing">
      <section className="ah-price-hero">
        <div className="ah-price-inner">
          <p className="ah-eyebrow">Pricing</p>
          <h1 className="ah-h1">You license an attack surface, not a scan count.</h1>
          <p className="ah-sub">
            Tell us what you&rsquo;re protecting — repositories, live targets, hosts,
            cloud accounts — and that&rsquo;s your envelope. <strong>Scans inside it are unlimited.</strong>{' '}
            Test on every commit without watching a meter.
          </p>
        </div>
      </section>

      <window.EnvelopeSizer tiers={tiers} />

      <section className="ah-plans-section" id="plans">
        <div className="ah-price-inner">
          <h2 className="ah-h2">Pay as you go, or license an envelope.</h2>
          <p className="ah-sub ah-plans-sub">
            Your first full scan is free. After that, $199 buys a managed assessment
            on demand, or $49 a month gives you unlimited self-service scanning. The
            envelopes bundle capacity for teams; network testing needs a runner inside
            your perimeter, so it starts at Business.
          </p>

          <div className="ah-plans" role="table" aria-label="Plans">
            {plans.map((pl, i) => renderPlan(pl, dims, {
              // The box enclosing the network-security tiers is drawn from the
              // first of them as a pseudo-element stretching over its neighbour.
              // A wrapper element would become its own grid (rows sized to two
              // columns, not the table's), and a spanning overlay child would
              // reserve those cells and push both cards onto a second row.
              groupFirst: !!pl.group && plans[i - 1]?.group !== pl.group,
              groupLabel: groups[pl.group],
            }))}
          </div>

          <div className="ah-ladder">
            <h3 className="ah-h3">The ladder is capability, not volume.</h3>
            <p className="ah-body">
              Developer runs locally against your own model key, so the free tier costs
              us almost nothing to keep open. Each step up adds something you could not
              do before — not just more of the same.
            </p>
            <dl className="ah-ladder-rows">
              {ladder.map(([step, unlocks]) => (
                <div className="ah-ladder-row" key={step}>
                  <dt>{step}</dt>
                  <dd>{unlocks}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </section>

      <section className="ah-meter" id="scans">
        <div className="ah-price-inner">
          <p className="ah-eyebrow">What we meter</p>
          <h2 className="ah-h2">Unlimited scans. Metered lanes.</h2>
          <p className="ah-sub ah-plans-sub">
            Charging per scan makes teams test less, which defeats the point of
            continuous validation. So we don&rsquo;t. We meter the thing that actually
            consumes compute: how many scans run at once.
          </p>
          <div className="ah-meter-cards">
            <div className="ah-meter-card">
              <p className="ah-eyebrow ah-meter-tag is-unlimited">Unlimited</p>
              <h3 className="ah-h3">Scans</h3>
              <p className="ah-body">
                Run on every commit, every pull request, every deploy, and again after
                each fix. Nobody on your team should have to decide whether a change is
                worth testing.
              </p>
            </div>
            <div className="ah-meter-card">
              <p className="ah-eyebrow ah-meter-tag is-metered">Metered</p>
              <h3 className="ah-h3">Concurrent lanes</h3>
              <p className="ah-body">
                A lane is one scan running at a time. A full eight-phase scan takes
                10–15 minutes, so lanes decide how fast a busy pipeline clears — not
                whether you&rsquo;re allowed to test.
              </p>
            </div>
          </div>

          {/* The number is the argument. Without it "unlimited" reads as a launch
              offer that gets withdrawn once usage grows. */}
          <div className="ah-arith">
            <p className="ah-arith-lead ah-h3">Unlimited isn&rsquo;t generosity. It&rsquo;s arithmetic.</p>
            <p className="ah-body ah-arith-body">
              A full scan costs us between <strong>$0.20 and $2.00</strong> to run. Most of
              what a scan needs to know is pre-computed in our own vulnerability corpus
              rather than re-derived from a model every time, so the marginal cost of you
              testing again is close to nothing. That is why unlimited scanning is a
              structural promise rather than a launch offer — and why anyone charging you
              per scan is charging for the meter, not the compute.
            </p>
          </div>
        </div>
      </section>

      <section className="ah-mech" id="sizing">
        <div className="ah-price-inner">
          <p className="ah-eyebrow">The mechanics</p>
          <h2 className="ah-h2">How an envelope is counted.</h2>

          <div className="ah-mech-grid">
            <div>
              <table className="ah-table">
                <thead>
                  <tr><th>Asset class</th><th>How it counts</th></tr>
                </thead>
                <tbody>
                  {rules.map(([a, b]) => (
                    <tr key={a}><td>{a}</td><td className="ah-table-n">{b}</td></tr>
                  ))}
                </tbody>
              </table>

              <table className="ah-table ah-table--gap">
                <thead>
                  <tr><th>Tier</th><th>Concurrent lanes</th></tr>
                </thead>
                <tbody>
                  {plans.map((p) => (
                    <tr key={p.k}>
                      <td>{p.name}</td>
                      <td className="ah-table-n">{p.cells.lanes}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="ah-mech-copy">
              <p className="ah-body">
                Most repositories take one slot. A large monorepo takes four, because it
                genuinely costs four times as much to test — and pretending otherwise
                would mean charging small teams to subsidise large ones.
              </p>
              <p className="ah-body">
                Capacity is expressed in lanes instead. A lane is one scan running at a
                time, so what you license is how fast your pipeline clears — never how
                many times you&rsquo;re allowed to test.
              </p>
              <p className="ah-body">
                Hosts are counted in blocks of 256. Cloud accounts count as one each,
                whatever their size. You will never see a line item measured in lines
                of code.
              </p>
            </div>
          </div>

          <dl className="ah-notes">
            <div className="ah-note">
              <dt>Where it runs</dt>
              <dd>Sekura cloud, your cloud, or fully on-premises including air-gapped networks. Network testing needs a runner inside the perimeter it&rsquo;s testing, so it&rsquo;s available from Business up.</dd>
            </div>
            <div className="ah-note">
              <dt>Inference</dt>
              <dd>Bring your own model key on Team and Business, or take ours. Enterprise includes inference — the only on-premises option in this category that doesn&rsquo;t hand you a model procurement problem.</dd>
            </div>
            <div className="ah-note">
              <dt>Going over</dt>
              <dd>Nothing breaks and no scan is blocked. We&rsquo;ll tell you which asset class you&rsquo;ve outgrown and what the next envelope costs.</dd>
            </div>
            <div className="ah-note">
              <dt>Continuous scanning</dt>
              <dd>From Team upward. Native GitHub Actions, GitLab CI, Jenkins and Azure DevOps — gates on every commit, PR and deploy, SARIF into your security tab, and fix PRs raised automatically. Developer scans on demand from the IDE, not in the pipeline.</dd>
            </div>
            <div className="ah-note">
              <dt>Working solo</dt>
              <dd>Developer installs into your editor as an MCP server and uses your existing model key, so there is nothing to provision. Move to Team when you want scans running in the pipeline rather than on your laptop.</dd>
            </div>
            <div className="ah-note">
              <dt>Design partners</dt>
              <dd>Early customers get significant discounts against these prices in exchange for a feedback commitment. The list price is what your renewal is measured against, so we publish it.</dd>
            </div>
          </dl>

          <p className="ah-caption ah-price-foot">Prices in USD, billed annually.</p>
        </div>
      </section>

      {/* Crawlable FAQ — kept in sync with the envelope model, not the old
          per-user/LLM-token one. */}
      <section className="pricing-faq seo-only">
        <h2>Common questions</h2>
        <dl>
          <dt>How is Sekura priced?</dt>
          <dd>By attack surface envelope, not per scan. You license a number of repositories, live targets, and networks; scans inside that envelope are unlimited. What is metered is concurrent lanes — how many scans run at the same time.</dd>

          <dt>What is a concurrent lane?</dt>
          <dd>One scan running at a time. A full eight-phase scan takes 10–15 minutes, so lanes determine how fast a busy pipeline clears, not how many times you are allowed to test.</dd>

          <dt>What happens if I go over my envelope?</dt>
          <dd>Nothing breaks and no scan is blocked. We tell you which asset class you have outgrown and what the next envelope costs.</dd>

          <dt>Do you see my source code?</dt>
          <dd>Not on Business or Enterprise — those deploy in your own cloud or on-premises, including air-gapped networks, so nothing leaves your environment.</dd>

          <dt>Who pays for model inference?</dt>
          <dd>Bring your own model key on Team and Business, or use ours. Enterprise includes inference, so an on-premises deployment does not come with a model procurement problem attached.</dd>
        </dl>
      </section>
    </div>
  );
}

// One plan column. Every plan renders all nine rows so the columns line up;
// a plan that repurposes a slot supplies its own label via `rowLabels`.
function renderPlan(p, dims, opts = {}) {
  const { React } = window;
  return (
    <div
      className={`ah-plan ah-plan--${p.k} ${p.group ? 'is-grouped' : ''} ${opts.groupFirst ? 'is-group-first' : ''}`}
      key={p.k}
      role="row"
    >
      {opts.groupFirst && (
        <span className="ah-plan-groupmark">{opts.groupLabel}</span>
      )}
      <h3 className="ah-plan-name">{p.name}</h3>
      <p className="ah-plan-price">
        {p.price}
        {p.priceNote && <span className="ah-plan-per"> {p.priceNote}</span>}
      </p>
      <p className="ah-plan-who">{p.who}</p>
      <a className="ah-plan-cta" href={p.cta.href}>
        {p.cta.label}<span className="ah-chev">›</span>
      </a>
      <dl className="ah-plan-rows">
        {dims.map((d) => {
          const raw = p.cells[d.k];
          const cell = (raw && typeof raw === 'object') ? raw : { v: raw };
          const label = (p.rowLabels && p.rowLabels[d.k]) || d.label;
          return (
            <div
              className={`ah-plan-row ${cell.on ? 'is-on' : ''} ${cell.off ? 'is-off' : ''}`}
              key={d.k}
            >
              <dt>{label}</dt>
              <dd>{cell.v}</dd>
            </div>
          );
        })}
      </dl>
    </div>
  );
}

window.PricingPage = PricingPage;