// Aurek Trust — public verification page mockup.
// Renders a "browser window" with the verification surface visitors see.
const { useState: useStateT, useEffect: useEffectT } = React;

function BrowserChrome({ children, url }) {
  return (
    <div style={{
      border: "1px solid var(--line-strong)",
      borderRadius: 10,
      background: "#0c0c0e",
      overflow: "hidden",
      boxShadow: "0 30px 80px rgba(0,0,0,0.5)",
    }}>
      <div style={{
        padding: "10px 14px",
        background: "#15151a",
        borderBottom: "1px solid var(--line)",
        display: "flex",
        alignItems: "center",
        gap: 10,
      }}>
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#ff5f57" }}/>
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#febc2e" }}/>
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#28c840" }}/>
        <div className="mono" style={{
          marginLeft: 14,
          flex: 1,
          padding: "4px 10px",
          background: "#0a0a0c",
          border: "1px solid var(--line)",
          borderRadius: 4,
          fontSize: 11,
          color: "var(--text-dim)",
          display: "flex",
          alignItems: "center",
          gap: 8,
        }}>
          <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden>
            <rect x="2" y="5" width="7" height="5" rx="0.7" fill="none" stroke="oklch(0.80 0.14 145)" strokeWidth="0.8"/>
            <path d="M3.5 5 V3.5 a2 2 0 0 1 4 0 V5" fill="none" stroke="oklch(0.80 0.14 145)" strokeWidth="0.8"/>
          </svg>
          <span style={{ color: "oklch(0.80 0.14 145)" }}>https://</span>
          {url}
        </div>
      </div>
      <div>{children}</div>
    </div>
  );
}

function TrustBadge() {
  return (
    <div className="mono" style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      padding: "8px 12px",
      background: "#0c0c0e",
      border: "1px solid var(--line-strong)",
      borderRadius: 6,
      fontSize: 11,
    }}>
      <svg width="22" height="22" viewBox="0 0 22 22">
        <circle cx="11" cy="11" r="10" fill="oklch(0.80 0.14 145 / 0.1)" stroke="oklch(0.80 0.14 145)" strokeWidth="1"/>
        <path d="M6 11 L9.5 14.5 L16 7.5" fill="none" stroke="oklch(0.80 0.14 145)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <div>
        <div style={{ color: "var(--text)", fontWeight: 600, letterSpacing: "0.05em" }}>VERIFIED BY AUREK</div>
        <div style={{ color: "var(--text-faint)", fontSize: 9 }}>Last attested 2 min ago</div>
      </div>
    </div>
  );
}

function TrustSection() {
  const [pulse, setPulse] = useStateT(0);
  useEffectT(() => {
    const id = setInterval(() => setPulse((p) => p + 1), 2200);
    return () => clearInterval(id);
  }, []);
  return (
    <section id="trust" style={{ padding: "120px 28px", borderBottom: "1px solid var(--line)", position: "relative" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 60, alignItems: "start" }}>
          <div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--text-faint)", textTransform: "uppercase", marginBottom: 16 }}>
              ▸ Aurek Trust
            </div>
            <h2 style={{ fontSize: 44, margin: "0 0 18px", letterSpacing: "-0.02em", fontWeight: 600, lineHeight: 1.08 }}>
              Compliance is private.<br/>
              <span style={{ color: "var(--amber)" }}>Trust is public.</span>
            </h2>
            <p style={{ fontSize: 16, color: "var(--text-dim)", lineHeight: 1.65, margin: "0 0 24px" }}>
              Trust turns the audit log into a verification surface anyone can
              check. A live page at <code style={{ color: "var(--amber)", fontFamily: "JetBrains Mono, monospace" }}>app.aurek.dev/verify/{"{slug}"}</code> shows your
              latest attestation, policy coverage, and incident history —
              cryptographically signed, externally verifiable.
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px" }}>
              {[
                "Embed a Trust Badge on your site",
                "Customers verify against your public ed25519 key",
                "Attestations refreshed continuously, not annually",
                "Incident disclosure is mechanical, not optional",
              ].map((x) => (
                <li key={x} className="mono" style={{ fontSize: 13, padding: "10px 0", borderBottom: "1px dashed var(--line)", color: "var(--text-dim)", display: "flex", gap: 10 }}>
                  <span style={{ color: "var(--amber)" }}>›</span>{x}
                </li>
              ))}
            </ul>
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--text-faint)", textTransform: "uppercase", marginBottom: 10 }}>
                badge preview
              </div>
              <TrustBadge/>
            </div>
          </div>

          <BrowserChrome url="app.aurek.dev/verify/acme-financial-copilot">
            <div style={{ padding: "26px 28px 22px", color: "var(--text)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 22 }}>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
                    <div style={{
                      width: 32, height: 32, borderRadius: 6,
                      background: "linear-gradient(135deg, var(--amber), oklch(0.80 0.14 145))",
                    }}/>
                    <div>
                      <div style={{ fontSize: 18, fontWeight: 600 }}>Acme Financial Copilot</div>
                      <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)" }}>by Acme Corp · slug: acme-financial-copilot</div>
                    </div>
                  </div>
                </div>
                <div style={{
                  border: "1px solid oklch(0.80 0.14 145 / 0.4)",
                  borderRadius: 999,
                  padding: "5px 12px",
                  fontSize: 11,
                  color: "oklch(0.80 0.14 145)",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 6,
                }} className="mono">
                  <span style={{
                    width: 6, height: 6, borderRadius: "50%",
                    background: "oklch(0.80 0.14 145)",
                    boxShadow: "0 0 6px oklch(0.80 0.14 145 / 0.8)",
                    animation: "pulseT 1.6s infinite",
                  }}/>
                  ATTESTED · 2m AGO
                </div>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 18 }}>
                {[
                  ["Policy coverage", "100%", "every action governed"],
                  ["Decisions / 30d", "1.4M", "0 unsigned"],
                  ["Open incidents", "0", "↓ from 1 (resolved)"],
                ].map(([k,v,sub]) => (
                  <div key={k} style={{
                    border: "1px solid var(--line)",
                    borderRadius: 6,
                    padding: "12px 14px",
                    background: "rgba(14,14,16,0.6)",
                  }}>
                    <div className="mono" style={{ fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em", textTransform: "uppercase" }}>{k}</div>
                    <div style={{ fontSize: 22, fontWeight: 600, marginTop: 4, color: "var(--amber)" }}>{v}</div>
                    <div className="mono" style={{ fontSize: 10, color: "var(--text-faint)", marginTop: 2 }}>{sub}</div>
                  </div>
                ))}
              </div>

              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--text-faint)", textTransform: "uppercase", marginBottom: 8 }}>
                attestations
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 18 }}>
                {["SOC 2 Type II", "GDPR", "HIPAA", "ISO 27001", "EU AI Act", "OWASP Agentic", "NIST AI RMF"].map(b => (
                  <span key={b} className="mono" style={{
                    border: "1px solid oklch(0.82 0.14 75 / 0.35)",
                    color: "var(--amber)",
                    fontSize: 10,
                    padding: "4px 10px",
                    borderRadius: 999,
                    letterSpacing: "0.06em",
                  }}>✓ {b}</span>
                ))}
              </div>

              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--text-faint)", textTransform: "uppercase", marginBottom: 8 }}>
                latest attestation
              </div>
              <div className="mono" style={{
                border: "1px solid var(--line)",
                borderRadius: 6,
                background: "rgba(14,14,16,0.7)",
                padding: "12px 14px",
                fontSize: 11,
                color: "var(--text-dim)",
                lineHeight: 1.7,
                wordBreak: "break-all",
              }}>
                <span style={{ color: "var(--text-faint)" }}>signature:</span>{" "}
                <span style={{ color: "var(--amber)" }}>ed25519:9f3a..c821</span>{" "}
                <span style={{ color: "var(--text-faint)" }}>· issued 14:22:08 UTC · valid until 14:24:08 UTC</span>
                <div style={{ marginTop: 6 }}>
                  <span style={{ color: "var(--text-faint)" }}>verify ↓</span>
                </div>
                <div style={{ color: "var(--text)" }}>
                  $ aurek verify acme-financial-copilot
                </div>
                <div style={{ color: "oklch(0.80 0.14 145)" }}>
                  ✓ signature valid · ✓ chain intact · ✓ no gaps detected
                </div>
              </div>
            </div>
            <style>{`@keyframes pulseT { 0%,100%{opacity:1} 50%{opacity:0.35} }`}</style>
          </BrowserChrome>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TrustSection });