// IntegrationsBand — "Works with" + "Maps to" two-column section on
// /product/. Surfaces the integrations and compliance frameworks that are
// scattered across the slide deck, init page, and FAQs into a single
// explicit list.
//
// Compliance framework list mirrors StoryView slide 06 fw-grid — keep
// these two arrays in sync.

function IntegrationsBand() {
  const { React } = window;

  const INTEGRATIONS = [
    {
      group: 'IDEs (via MCP)',
      items: ['Claude Code', 'Cursor', 'VS Code', 'Windsurf'],
    },
    {
      group: 'CI/CD',
      items: ['GitHub Actions', 'Self-hosted runners'],
    },
    {
      group: 'LLM providers',
      items: ['Anthropic Claude', 'OpenAI GPT', 'Private endpoints (Enterprise)'],
    },
    {
      group: 'Notifications + fixes',
      items: ['Slack', 'Outlook', 'Teams', 'Jira', 'Confluence'],
    },
  ];

  const FRAMEWORKS = [
    'SOC 2', 'ISO 27001', 'HIPAA', 'PCI DSS',
    'NIST CSF', 'NIST 800-53', 'GDPR', 'CCPA',
    'FedRAMP', 'HITRUST', 'FFIEC', 'CIS', 'GLBA', 'CMMC',
  ];

  return (
    <section className="integrations-section" aria-labelledby="integrations-heading">
      <div className="integrations-inner">
        <p className="integrations-eyebrow">integrations + compliance</p>
        <h2 id="integrations-heading" className="integrations-heading">
          Works where you already work. <em>Maps to what you already report.</em>
        </h2>

        <div className="integrations-grid">
          <div className="integrations-col">
            <h3 className="integrations-col-title">Works with</h3>
            <div className="integrations-groups">
              {INTEGRATIONS.map((g, i) => (
                <div key={i} className="integrations-group">
                  <h4 className="integrations-group-title">{g.group}</h4>
                  <ul className="integrations-chips">
                    {g.items.map((item, j) => (
                      <li key={j} className="integrations-chip">{item}</li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>

          <div className="integrations-col">
            <h3 className="integrations-col-title">Maps to</h3>
            <p className="integrations-col-sub">
              Findings auto-mapped to <strong>{FRAMEWORKS.length} compliance frameworks.</strong>
              Audit prep as a byproduct of every scan.
            </p>
            <ul className="integrations-fw-grid">
              {FRAMEWORKS.map((fw, i) => (
                <li key={i} className="integrations-fw-chip">{fw}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.IntegrationsBand = IntegrationsBand;