// ReportBand — what the deliverable actually is.
//
// The hero asks for an email and promises a report within 24 hours. The
// immediate next question is "a report containing what?", so it is answered
// before the coverage pitch rather than after it.
//
// What this shows is the report's STRUCTURE, not example findings. That is a
// deliberate constraint: site-improvement-plan.md §1 diagnoses the site's
// central credibility problem as every proof artifact being scripted (the
// fictional acme-payments-api scan, the s3://card-vault attack graph) and
// notes that a security buyer recognises a demo instantly. A mocked-up
// findings list with invented CVSS scores would reproduce exactly that
// failure. Section names mirror the real pipeline in data/pipelinePhases.js.

function ReportBand() {
  const { React } = window;
  const sections = window.ReportSections || [];

  return (
    <section className="ah-report" data-screen-label="04 What comes back — the report">
      <div className="ah-report-inner">
        <div className="ah-report-head">
          <h2 className="ah-h2">Scanners emit scores. Sekura emits proof.</h2>
          <p className="ah-sub">
            Not a dashboard of alerts to triage. A report you can hand to an
            engineer, an auditor, or a board — every finding carrying the request
            and response that prove it.
          </p>
          <div className="ah-report-cta">
            <a className="ah-btn" href="/sample-report.pdf" target="_blank" rel="noopener">
              Download a sample report
            </a>
            <a className="ah-link" href="/product/">
              See how a scan works<span className="ah-chev">›</span>
            </a>
          </div>
        </div>

        <window.ProofPoints />

        {sections.length > 0 && (
          <figure className="ah-doc">
            <figcaption className="ah-doc-bar">
              <window.AhDots />
              <span className="ah-doc-name">Security assessment · every report contains</span>
            </figcaption>
            <div className="ah-doc-sections">
              {sections.map((s) => (
                <div className="ah-doc-sec" key={s.n}>
                  <div className="ah-doc-sec-n">{s.n}</div>
                  <h3 className="ah-doc-sec-t">{s.title}</h3>
                  <p className="ah-doc-sec-b ah-small">{s.body}</p>
                </div>
              ))}
            </div>
          </figure>
        )}
      </div>
    </section>
  );
}

// Window-chrome dots. Signals "this is a document view" without a screenshot
// we would have to fabricate.
function AhDots() {
  const { React } = window;
  const dots = ['#ff5f57', '#febc2e', '#28c840'];
  return (
    <span style={{ display: 'inline-flex', gap: '6px' }} aria-hidden="true">
      {dots.map((c) => (
        <span key={c} style={{
          width: '10px', height: '10px', borderRadius: '999px', background: c,
        }} />
      ))}
    </span>
  );
}

window.AhDots = AhDots;
window.ReportBand = ReportBand;