// Compliance section — animated stacking of audit "receipts" +
// a ring of compliance badges that fill in as they verify.
const { useState: useStateCp, useEffect: useEffectCp, useRef: useRefCp } = React;

function AuditStack() {
  const [count, setCount] = useStateCp(0);
  const entries = [
    { t: "14:22:08.104", v: "ALLOW", d: "agent:rag-pipeline → vector_query", hash: "7e4a..02c1" },
    { t: "14:22:08.291", v: "ALLOW", d: "agent:compiler-7 → read_file", hash: "a1b2..9f7d" },
    { t: "14:22:08.405", v: "DENY",  d: "agent:ops-runner → http_post", hash: "3c9e..6b04" },
    { t: "14:22:08.512", v: "ESCAL", d: "agent:deploy-agent → fetch_secret", hash: "5de7..1a88" },
    { t: "14:22:08.623", v: "ALLOW", d: "agent:governor-1 → list_resources", hash: "b228..44c9" },
  ];

  useEffectCp(() => {
    const id = setInterval(() => setCount((c) => (c + 1) % (entries.length + 3)), 900);
    return () => clearInterval(id);
  }, []);

  const visible = entries.slice(0, Math.min(count, entries.length));
  const vColor = (v) => v === "ALLOW" ? "oklch(0.80 0.14 145)" : v === "DENY" ? "oklch(0.70 0.18 25)" : "oklch(0.82 0.14 75)";

  return (
    <div
      style={{
        position: "relative",
        height: 340,
        border: "1px solid var(--line)",
        borderRadius: 8,
        background: "linear-gradient(180deg, rgba(10,10,12,0.9), rgba(5,5,6,0.95))",
        padding: "18px 18px 20px",
        overflow: "hidden",
      }}
    >
      <div
        className="mono"
        style={{
          fontSize: 10,
          letterSpacing: "0.22em",
          color: "var(--text-faint)",
          textTransform: "uppercase",
          marginBottom: 14,
        }}
      >
        tamper-evident audit log
      </div>
      <div style={{ position: "relative" }}>
        {visible.map((e, i) => (
          <div
            key={i}
            className="mono"
            style={{
              border: "1px solid var(--line)",
              borderRadius: 6,
              padding: "10px 14px",
              marginBottom: 8,
              fontSize: 12,
              display: "grid",
              gridTemplateColumns: "100px 70px 1fr 80px",
              gap: 12,
              alignItems: "center",
              background: "rgba(14,14,16,0.8)",
              opacity: 0,
              animation: "slideIn .45s ease forwards",
            }}
          >
            <span style={{ color: "var(--text-faint)" }}>{e.t}</span>
            <span style={{ color: vColor(e.v), fontWeight: 600 }}>{e.v}</span>
            <span style={{ color: "var(--text)" }}>{e.d}</span>
            <span style={{ color: "var(--text-faint)", textAlign: "right" }}>#{e.hash}</span>
          </div>
        ))}
      </div>
      <style>{`
        @keyframes slideIn {
          from { opacity: 0; transform: translateY(-8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
      <div
        aria-hidden
        style={{
          position: "absolute", left: 0, right: 0, bottom: 0,
          height: 60,
          background: "linear-gradient(180deg, transparent, rgba(5,5,6,1))",
          pointerEvents: "none",
        }}
      />
    </div>
  );
}

function ComplianceBadge({ name, delay }) {
  const [verified, setVerified] = useStateCp(false);
  useEffectCp(() => {
    const id = setTimeout(() => setVerified(true), delay);
    const id2 = setInterval(() => setVerified((v) => !v), 5000 + delay);
    return () => { clearTimeout(id); clearInterval(id2); };
  }, [delay]);
  return (
    <div
      style={{
        border: "1px solid " + (verified ? "oklch(0.82 0.14 75 / 0.5)" : "var(--line)"),
        borderRadius: 6,
        padding: "16px 14px",
        display: "flex",
        alignItems: "center",
        gap: 12,
        background: verified
          ? "linear-gradient(180deg, rgba(40,30,10,0.4), rgba(14,14,16,0.6))"
          : "rgba(14,14,16,0.5)",
        transition: "all .5s",
      }}
    >
      <div style={{ position: "relative", width: 22, height: 22, flex: "0 0 auto" }}>
        <svg width="22" height="22" viewBox="0 0 22 22">
          <circle cx="11" cy="11" r="10" fill="none"
                  stroke={verified ? "var(--amber)" : "var(--text-faint)"}
                  strokeWidth="1.2"
                  strokeDasharray={verified ? "63" : "63"}
                  strokeDashoffset={verified ? "0" : "63"}
                  style={{ transition: "stroke-dashoffset .8s ease" }}
                  transform="rotate(-90 11 11)" />
          <path d="M6 11 L10 15 L16 8"
                fill="none"
                stroke={verified ? "var(--amber)" : "transparent"}
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                style={{ transition: "stroke .4s" }} />
        </svg>
      </div>
      <div>
        <div className="mono" style={{ fontSize: 12, fontWeight: 600, color: verified ? "var(--text)" : "var(--text-dim)" }}>
          {name}
        </div>
        <div className="mono" style={{ fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.1em", marginTop: 2 }}>
          {verified ? "VERIFIED" : "CHECKING…"}
        </div>
      </div>
    </div>
  );
}

function Compliance() {
  return (
    <section
      id="compliance"
      style={{
        padding: "120px 28px",
        borderBottom: "1px solid var(--line)",
        position: "relative",
      }}
    >
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "start" }}>
          <div>
            <div
              className="mono"
              style={{
                fontSize: 10,
                letterSpacing: "0.3em",
                color: "var(--text-faint)",
                textTransform: "uppercase",
                marginBottom: 16,
              }}
            >
              ▸ Proof, on demand
            </div>
            <h2
              style={{
                fontSize: 44,
                margin: "0 0 20px",
                letterSpacing: "-0.02em",
                fontWeight: 600,
                lineHeight: 1.1,
              }}
            >
              Every decision is a receipt.
            </h2>
            <p style={{ fontSize: 16, color: "var(--text-dim)", lineHeight: 1.65, margin: "0 0 28px" }}>
              Each allow, deny, and escalation is signed, hash-chained, and
              exportable as a compliance artifact. Hand the log to an auditor
              as-is — no reconstruction required.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
              <ComplianceBadge name="SOC 2 Type II"  delay={200} />
              <ComplianceBadge name="GDPR"          delay={500} />
              <ComplianceBadge name="HIPAA"         delay={800} />
              <ComplianceBadge name="ISO 27001"     delay={1100} />
              <ComplianceBadge name="OWASP Agentic" delay={1400} />
              <ComplianceBadge name="NIST AI RMF"   delay={1700} />
            </div>
          </div>
          <AuditStack />
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section
      style={{
        padding: "140px 28px 120px",
        position: "relative",
        borderBottom: "1px solid var(--line)",
        overflow: "hidden",
      }}
    >
      <Starfield opacity={0.4} density={0.00015} />
      <div
        aria-hidden
        style={{
          position: "absolute",
          inset: 0,
          background: "radial-gradient(ellipse 50% 60% at 50% 50%, oklch(0.82 0.14 75 / 0.08), transparent 70%)",
          pointerEvents: "none",
        }}
      />
      <div style={{ maxWidth: 900, margin: "0 auto", textAlign: "center", position: "relative", zIndex: 2 }}>
        <h2
          style={{
            fontSize: 60,
            margin: "0 0 24px",
            letterSpacing: "-0.02em",
            fontWeight: 600,
            lineHeight: 1.05,
          }}
        >
          Be ready for whatever<br />your agents do next.
        </h2>
        <p style={{ fontSize: 17, color: "var(--text-dim)", margin: "0 0 40px", lineHeight: 1.55 }}>
          Drop Aurek between your agent framework and the outside world.
          Ship in an afternoon. Sleep tonight.
        </p>
        <div style={{ display: "inline-flex", gap: 14 }}>
          <a
            href="mailto:manasgarg02@gmail.com?subject=Aurek%20Early%20Access"
            className="mono"
            style={{
              padding: "14px 28px",
              background: "var(--amber)",
              color: "#111",
              fontSize: 13,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              fontWeight: 600,
              borderRadius: 2,
              boxShadow: "0 0 40px var(--amber-glow)",
            }}
          >
            Request early access →
          </a>

        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Compliance, AuditStack, ComplianceBadge, FinalCTA });