// StartPaths — "3 ways to start", ordered by commitment, replacing the
// confusing three-funnel layout (site-improvement-plan §4). One surface:
// free scan → managed scan → continuous (CLI/CI) → enterprise (on-prem).

function StartPaths() {
  const { React } = window;
  const pricing = window.ScanPricing || {};
  // Managed scans range across SAST / DAST / both / AI-skill; the headline
  // "from $X" must be the cheapest of them (the AI-skill scan), not SAST —
  // otherwise it disagrees with the WedgesBand copy. Derive the floor.
  const managedPrices = Object.values(pricing)
    .map(s => s && s.price)
    .filter(n => typeof n === 'number');
  const managedFloor = managedPrices.length ? Math.min(...managedPrices) : 199;

  const paths = [
    {
      k: 'free',
      name: 'Scan a repo — free',
      price: '$0',
      body: 'Paste a repo, see real findings in minutes. No card.',
      cta: { label: 'scan now', href: '/#scan' },
    },
    {
      k: 'managed',
      name: 'Managed scan',
      price: `from $${managedFloor}`,
      body: 'One-off SAST / DAST / AI-skill scan, full report delivered. Pay per scan.',
      cta: { label: 'run a managed scan', href: '/managed-scan/' },
    },
    {
      k: 'continuous',
      name: 'Continuous (CLI / CI)',
      price: '$49/user-mo',
      body: 'Wire Sekura into your pipeline — every PR, every push. Freemium.',
      cta: { label: 'get the CLI', href: '/init/' },
    },
    {
      k: 'enterprise',
      name: 'Enterprise · on-prem',
      price: "let's talk",
      body: 'Deployed behind your firewall. SSO, compliance, your data stays put.',
      cta: { label: 'talk to sales', href: '/poc/' },
    },
  ];

  return (
    <section className="startpaths-section" data-screen-label="4 ways to start">
      <div className="startpaths-inner">
        <p className="startpaths-eyebrow">four ways to start</p>
        <h2 className="startpaths-heading">pick your level of commitment.</h2>
        <div className="startpaths-grid">
          {paths.map(p => (
            <div className={`startpath startpath--${p.k}`} key={p.k}>
              <div className="startpath-top">
                <h3 className="startpath-name">{p.name}</h3>
                <div className="startpath-price">{p.price}</div>
              </div>
              <p className="startpath-body">{p.body}</p>
              <a className="startpath-cta" href={p.cta.href}>{p.cta.label} →</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.StartPaths = StartPaths;