// coverage_check.jsx - interactive self-check for blind spots

const COVERAGE_QUESTIONS = [
  { id: "siem",     q: "Do you aggregate logs from prod, cloud, and SaaS into one place?",     weight: 14 },
  { id: "ep",       q: "Is there an EDR / endpoint agent on every workstation and server?",     weight: 12 },
  { id: "cloud",    q: "Are AWS/GCP/Azure CloudTrail + GuardDuty events normalized and monitored?", weight: 12 },
  { id: "iam",      q: "Are privileged role changes alerted within minutes?",                   weight: 10 },
  { id: "mfa",      q: "Is MFA enforced everywhere - including break-glass?",                   weight: 8 },
  { id: "oauth",    q: "Do you review third-party OAuth grants weekly?",                        weight: 8 },
  { id: "patch",    q: "Does someone triage CVEs within 72 hours of disclosure?",               weight: 10 },
  { id: "runbook",  q: "Do you have a tested incident-response runbook (not just a doc)?",      weight: 10 },
  { id: "24x7",     q: "Would an alert at 03:00 UTC on Sunday actually be seen?",               weight: 10 },
  { id: "audit",    q: "Can you produce 90 days of audit evidence in under an hour?",           weight: 6 },
];

function CoverageCheck() {
  const [answers, setAnswers] = React.useState({});
  const [revealed, setRevealed] = React.useState(false);

  const totalWeight = COVERAGE_QUESTIONS.reduce((s, q) => s + q.weight, 0);
  const covered = COVERAGE_QUESTIONS.reduce((s, q) => s + (answers[q.id] === "yes" ? q.weight : 0), 0);
  const gap = totalWeight - covered;
  const pct = Math.round((covered / totalWeight) * 100);
  const gapPct = 100 - pct;

  const answered = Object.keys(answers).length;
  const complete = answered === COVERAGE_QUESTIONS.length;

  return (
    <div style={{
      border: "1px solid var(--line)",
      background: "var(--bg-1)",
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 14,
        padding: "16px 24px", borderBottom: "1px solid var(--line)",
        background: "var(--bg-2)",
      }}>
        <Mono style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em" }}>
          COVERAGE GAP SELF-CHECK · {answered}/{COVERAGE_QUESTIONS.length} ANSWERED
        </Mono>
        <span style={{ flex: 1 }} />
        <Mono style={{ fontSize: 11, color: "var(--fg-dim)" }}>
          ~ 60 seconds · private, not sent anywhere
        </Mono>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr" }}>
        {/* Questions */}
        <div style={{ padding: 8, borderRight: "1px solid var(--line-soft)" }}>
          {COVERAGE_QUESTIONS.map((q, i) => (
            <div key={q.id} style={{
              display: "grid",
              gridTemplateColumns: "28px 1fr auto",
              gap: 16, alignItems: "center",
              padding: "14px 16px",
              borderBottom: i < COVERAGE_QUESTIONS.length - 1 ? "1px solid var(--line-soft)" : "none",
            }}>
              <Mono style={{ fontSize: 11, color: "var(--fg-dim)" }}>
                {String(i + 1).padStart(2, "0")}
              </Mono>
              <div style={{ fontSize: 14, color: "var(--fg)", lineHeight: 1.45 }}>
                {q.q}
              </div>
              <div style={{ display: "flex", gap: 4 }}>
                {["yes", "no"].map(v => {
                  const active = answers[q.id] === v;
                  return (
                    <button key={v}
                      onClick={() => setAnswers(a => ({ ...a, [q.id]: v }))}
                      style={{
                        padding: "6px 14px",
                        fontFamily: "var(--mono)",
                        fontSize: 11, letterSpacing: "0.08em",
                        textTransform: "uppercase",
                        border: "1px solid " + (active ? (v === "yes" ? "var(--accent)" : "var(--warn)") : "var(--line)"),
                        background: active ? (v === "yes" ? "var(--accent)" : "var(--warn)") : "transparent",
                        color: active ? "#000" : "var(--fg-mute)",
                        transition: "all 140ms",
                      }}>
                      {v}
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        {/* Result panel */}
        <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24, minHeight: 500 }}>
          <div>
            <Label>ESTIMATED COVERAGE</Label>
            <div className="serif" style={{
              fontSize: 104, lineHeight: 0.9, letterSpacing: "-0.03em",
              color: pct < 60 ? "var(--warn)" : pct < 85 ? "var(--fg)" : "var(--accent)",
              marginTop: 8,
            }}>
              {pct}<span style={{ fontSize: 40, color: "var(--fg-dim)" }}>%</span>
            </div>
            <div style={{
              marginTop: 20,
              height: 6, background: "var(--line-soft)",
              position: "relative", overflow: "hidden",
            }}>
              <div style={{
                position: "absolute", inset: 0,
                width: pct + "%",
                background: "linear-gradient(to right, var(--accent), var(--accent-d))",
                transition: "width 400ms ease",
              }} />
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <Divider label="BLIND SPOT" />
            <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
              <span className="serif" style={{ fontSize: 44, color: "var(--warn)" }}>
                {gapPct}%
              </span>
              <Mono style={{ fontSize: 12, color: "var(--fg-mute)" }}>
                of your attack surface is estimated uncovered
              </Mono>
            </div>
          </div>

          {complete && (
            <div style={{
              marginTop: "auto",
              padding: 20,
              border: "1px solid var(--accent)",
              background: "oklch(0.82 0.17 155 / 0.06)",
              animation: "fadeUp 400ms ease",
            }}>
              <Label color="var(--accent)">▶ NEXT STEP</Label>
              <p style={{ margin: "10px 0 14px", fontSize: 14, color: "var(--fg)", lineHeight: 1.55 }}>
                {gapPct > 40
                  ? "That's a meaningful gap. A 30-minute call with our lead analyst will map the specific misses for your stack - no pitch, no obligation."
                  : gapPct > 15
                  ? "You're in better shape than most, but pockets of exposure remain. Let's pressure-test the hard cases."
                  : "Strong coverage on paper. In our experience, what looks like 95% is usually 85% in production - happy to prove it."}
              </p>
              <button className="btn btn-primary"
                onClick={() => window.dispatchEvent(new CustomEvent("nav", { detail: "contact" }))}
                style={{ width: "100%", justifyContent: "center" }}>
                Book a 30-min coverage review →
              </button>
            </div>
          )}

          {!complete && (
            <div style={{
              marginTop: "auto",
              fontSize: 12, color: "var(--fg-dim)", lineHeight: 1.55,
            }}>
              <Mono style={{ color: "var(--fg-mute)" }}>
                {COVERAGE_QUESTIONS.length - answered} question{COVERAGE_QUESTIONS.length - answered === 1 ? "" : "s"} remaining
              </Mono>
              <br/>
              Answer honestly - the goal is a useful number, not a pretty one.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CoverageCheck });