// Reports preview: report quality + compliance-mapped output
function Reports() {
  return (
    <section className="section" id="reports">
      <div className="container">
        <div className="section-head">
          <div className="section-head__title">
            <span className="eyebrow">07 · Reports</span>
            <h2 style={{ marginTop: 18 }}>Manual-pentest-quality reports.<br/>Not a scanner dump.</h2>
            <p style={{ marginTop: 14, maxWidth: 580 }}>
              Every validated finding ships with description, business + technical impact, reproduction steps, evidence, video PoC where needed, and remediation guidance. Map output to whatever framework your auditors care about.
            </p>
          </div>
          <div className="section-head__meta">[ pdf · html · sarif · jira · linear ]</div>
        </div>

        <div className="report">
          <div className="report__preview">
            <div className="report__doc">
              <div className="report__doc-bar">
                <span className="report__doc-dot"></span>
                <span className="report__doc-dot"></span>
                <span className="report__doc-dot"></span>
                <span className="report__doc-name">CIP-8821 · finding.pdf</span>
                <span className="report__doc-actions">
                  <span>PDF</span><span>HTML</span><span>SARIF</span>
                </span>
              </div>
              <div className="report__doc-body">
                <div className="report__doc-eyebrow">FINDING · CIP-8821</div>
                <div className="report__doc-title">Broken Object-Level Authorization on <span className="mono">/v1/users/&#123;id&#125;/billing</span></div>

                <div className="report__doc-row">
                  <div className="report__doc-meta">
                    <div className="report__doc-meta-k">Severity</div>
                    <div className="report__doc-meta-v">
                      <span className="vuln-row__sev vuln-row__sev--crit">Critical</span>
                    </div>
                  </div>
                  <div className="report__doc-meta">
                    <div className="report__doc-meta-k">CVSS 3.1</div>
                    <div className="report__doc-meta-v" style={{ color: 'var(--danger)' }}>9.1</div>
                  </div>
                  <div className="report__doc-meta">
                    <div className="report__doc-meta-k">CWE</div>
                    <div className="report__doc-meta-v">CWE-639</div>
                  </div>
                  <div className="report__doc-meta">
                    <div className="report__doc-meta-k">Validated by</div>
                    <div className="report__doc-meta-v">@harsh</div>
                  </div>
                </div>

                <div className="report__doc-section">
                  <div className="report__doc-h">Description</div>
                  <p className="report__doc-p">
                    The endpoint accepts an arbitrary <span className="mono">user_id</span> path parameter and returns billing data without verifying the requesting token's tenant. A user holding any valid token can enumerate sequential IDs and read foreign tenants' billing records.
                  </p>
                </div>

                <div className="report__doc-section">
                  <div className="report__doc-h">Business Impact</div>
                  <p className="report__doc-p">Cross-tenant PII and PCI-scoped data exposure. Single curl reproduces. Affects 100% of paying customers.</p>
                </div>

                <div className="report__doc-section">
                  <div className="report__doc-h">Reproduction</div>
                  <pre className="report__doc-pre"><code>$ curl -H "Authorization: Bearer $T_A" \
       https://api.acme.com/v1/users/43/billing
{`{`}
  "tenant_id": "widgetco",
  "card_last4": "4242",
  ...
{`}`}</code></pre>
                </div>

                <div className="report__doc-section report__doc-section--row">
                  <div className="report__doc-evidence">
                    <div className="report__doc-evidence-tag">VIDEO POC</div>
                    <div className="report__doc-evidence-body">
                      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--accent-hi)' }}>
                        <polygon points="6 4 20 12 6 20" fill="currentColor" />
                      </svg>
                      <div>
                        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--text)' }}>cip-8821-bola.mp4</div>
                        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--text-3)' }}>0:47 · cross-tenant data retrieval</div>
                      </div>
                    </div>
                  </div>
                  <div className="report__doc-evidence">
                    <div className="report__doc-evidence-tag">REPLAY</div>
                    <div className="report__doc-evidence-body">
                      <span className="mono" style={{ color: 'var(--accent-hi)', fontSize: 11 }}>$ ciphryn replay CIP-8821</span>
                      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--ok)', marginTop: 6 }}>✓ reproduced in sandbox</div>
                    </div>
                  </div>
                </div>

                <div className="report__doc-section">
                  <div className="report__doc-h">Remediation</div>
                  <p className="report__doc-p">
                    Enforce tenant scoping at the data layer. Reject any request where <span className="mono">token.tenant_id</span> ≠ <span className="mono">resource.tenant_id</span>. Patch shipped as draft PR <span className="mono" style={{ color: 'var(--accent-hi)' }}>#4192</span>.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="report__side">
            <div>
              <div className="report__side-eyebrow">EVERY FINDING SHIPS WITH</div>
              <div className="report__side-list">
                {[
                  'Title · severity · CVSS · CWE',
                  'Description + business impact',
                  'Reproduction steps + payloads',
                  'Screenshots + HTTP evidence',
                  'Video PoC where needed',
                  'Remediation guidance',
                  'Retest status + timeline',
                ].map((x, i) => (
                  <div key={i} className="report__side-item">
                    <span className="report__side-bullet">→</span> {x}
                  </div>
                ))}
              </div>
            </div>

            <div className="report__side-card">
              <div className="report__side-eyebrow">COMPLIANCE-MAPPED OUTPUT</div>
              <p style={{ fontSize: 13.5, color: 'var(--text-2)', marginTop: 12, lineHeight: 1.55 }}>
                Need the report formatted for SOC 2, ISO 27001, HIPAA, PCI-DSS, FedRAMP, or DORA?
                Tell us the framework, and the same finding is structured to satisfy the controls your auditor checks.
              </p>
              <div className="report__frames">
                {['SOC 2', 'ISO 27001', 'HIPAA', 'PCI-DSS', 'GDPR', 'FedRAMP', 'DORA', 'NIS2', 'CSA STAR'].map((f, i) => (
                  <span key={i} className="report__frame">{f}</span>
                ))}
              </div>
            </div>

            <div className="report__side-card">
              <div className="report__side-eyebrow">EXPORT &amp; SYNC</div>
              <div className="report__exports">
                {['PDF', 'HTML', 'CSV', 'SARIF', 'Jira', 'Linear', 'GitHub', 'Slack', 'Webhook'].map((x, i) => (
                  <span key={i} className="chip">{x}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reports });