// Three-product architecture overview: SDK, Fleet, Trust.
// Three large cards with distinct visual language for each product.
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

function ProductGlyph({ kind }) {
  // Each product gets a small animated mark
  if (kind === "sdk") {
    return (
      <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden>
        <g stroke="var(--amber)" strokeWidth="1" fill="none">
          <rect x="6" y="6" width="32" height="32" rx="2"/>
          <path d="M14 16 L20 22 L14 28" strokeWidth="1.5"/>
          <line x1="24" y1="28" x2="32" y2="28" strokeWidth="1.5"/>
        </g>
      </svg>
    );
  }
  if (kind === "fleet") {
    return (
      <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden>
        <g stroke="var(--amber)" strokeWidth="1" fill="none">
          <circle cx="22" cy="22" r="3" fill="var(--amber)" fillOpacity="0.6"/>
          {[0,1,2,3,4,5].map(i => {
            const a = (i/6) * Math.PI * 2;
            const x = 22 + Math.cos(a) * 14;
            const y = 22 + Math.sin(a) * 14;
            return <g key={i}>
              <circle cx={x} cy={y} r="2.2"/>
              <line x1="22" y1="22" x2={x} y2={y} opacity="0.3"/>
            </g>;
          })}
        </g>
      </svg>
    );
  }
  // trust
  return (
    <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden>
      <g stroke="var(--amber)" strokeWidth="1" fill="none">
        <path d="M22 6 L36 12 L36 22 Q 36 32 22 38 Q 8 32 8 22 L8 12 Z" />
        <path d="M16 22 L20 26 L28 17" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" stroke="var(--amber)"/>
      </g>
    </svg>
  );
}

function ProductCard({ kind, badge, title, tagline, bullets, footer, viz }) {
  const [hover, setHover] = useStateP(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        border: "1px solid " + (hover ? "oklch(0.82 0.14 75 / 0.45)" : "var(--line)"),
        borderRadius: 10,
        padding: 28,
        background: "linear-gradient(180deg, rgba(14,14,16,0.7), rgba(8,8,10,0.5))",
        transition: "all .3s ease",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <ProductGlyph kind={kind} />
        <span
          className="mono"
          style={{
            fontSize: 9,
            letterSpacing: "0.22em",
            color: "var(--text-faint)",
            border: "1px solid var(--line-strong)",
            padding: "3px 8px",
            borderRadius: 2,
          }}
        >
          {badge}
        </span>
      </div>
      <h3 style={{ fontSize: 26, margin: "0 0 6px", fontWeight: 600, letterSpacing: "-0.01em" }}>
        Aurek <span style={{ color: "var(--amber)" }}>{title}</span>
      </h3>
      <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 16 }}>
        {tagline}
      </div>
      <div style={{ marginBottom: 18 }}>{viz}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, flex: 1 }}>
        {bullets.map((b, i) => (
          <li key={i} className="mono" style={{ fontSize: 12, color: "var(--text-dim)", padding: "6px 0", borderBottom: "1px dashed var(--line)", display: "flex", gap: 10 }}>
            <span style={{ color: "var(--amber)" }}>›</span>
            <span>{b}</span>
          </li>
        ))}
      </ul>
      <div className="mono" style={{ marginTop: 18, fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.1em" }}>
        {footer}
      </div>
    </div>
  );
}

function MiniSparkline() {
  const ref = useRefP(null);
  useEffectP(() => {
    const el = ref.current;
    const ctx = el.getContext("2d");
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const W = 220, H = 50;
    el.width = W * dpr; el.height = H * dpr;
    el.style.width = W + "px"; el.style.height = H + "px";
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    let raf, t = 0;
    function tick() {
      t += 0.02;
      ctx.clearRect(0, 0, W, H);
      ctx.strokeStyle = "oklch(0.82 0.14 75 / 0.6)";
      ctx.lineWidth = 1.2;
      ctx.beginPath();
      for (let x = 0; x < W; x++) {
        const v = 25 + Math.sin(x * 0.08 + t) * 8 + Math.sin(x * 0.21 + t * 1.4) * 5;
        if (x === 0) ctx.moveTo(x, v); else ctx.lineTo(x, v);
      }
      ctx.stroke();
      // dot at end
      const x = W - 1;
      const v = 25 + Math.sin(x * 0.08 + t) * 8 + Math.sin(x * 0.21 + t * 1.4) * 5;
      ctx.fillStyle = "var(--amber)";
      ctx.beginPath();
      ctx.arc(x - 4, v, 2.5, 0, Math.PI * 2);
      ctx.fill();
      raf = requestAnimationFrame(tick);
    }
    tick();
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ display: "block" }} />;
}

function FleetBadge() {
  return (
    <div className="mono" style={{
      border: "1px solid var(--line)",
      borderRadius: 6,
      padding: "10px 12px",
      background: "rgba(8,8,10,0.6)",
      fontSize: 11,
      lineHeight: 1.6,
    }}>
      <div style={{ color: "var(--text-faint)", marginBottom: 4 }}>fleet posture</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
        <span style={{ fontSize: 22, color: "var(--amber)", fontWeight: 600 }}>7.2</span>
        <span style={{ color: "var(--text-faint)" }}>/ 10</span>
        <span style={{ marginLeft: "auto", color: "oklch(0.70 0.18 25)" }}>● HIGH RISK</span>
      </div>
      <div style={{
        height: 4, marginTop: 8, borderRadius: 2,
        background: "rgba(255,255,255,0.08)",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0, width: "72%",
          background: "linear-gradient(90deg, oklch(0.70 0.18 25), var(--amber))",
        }}/>
      </div>
    </div>
  );
}

function TrustStamp() {
  return (
    <div className="mono" style={{
      border: "1px solid var(--line)",
      borderRadius: 6,
      padding: "10px 12px",
      background: "rgba(8,8,10,0.6)",
      fontSize: 11,
      lineHeight: 1.55,
      display: "flex",
      alignItems: "center",
      gap: 12,
    }}>
      <svg width="34" height="34" viewBox="0 0 34 34">
        <circle cx="17" cy="17" r="15" stroke="oklch(0.80 0.14 145)" strokeWidth="1" fill="oklch(0.80 0.14 145 / 0.08)"/>
        <path d="M11 17 L15 21 L23 13" stroke="oklch(0.80 0.14 145)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <div>
        <div style={{ color: "var(--text)" }}>Verified by Aurek</div>
        <div style={{ color: "var(--text-faint)", fontSize: 10 }}>app.aurek.dev/verify/your-product</div>
      </div>
    </div>
  );
}

function ProductsOverview() {
  return (
    <section
      id="products"
      style={{
        padding: "120px 28px 80px",
        position: "relative",
        borderBottom: "1px solid var(--line)",
      }}
    >
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--text-faint)", textTransform: "uppercase", marginBottom: 16 }}>
          ▸ Three products. One control plane.
        </div>
        <h2 style={{ fontSize: 52, margin: "0 0 16px", letterSpacing: "-0.02em", fontWeight: 600, lineHeight: 1.05 }}>
          Govern. Discover.<br/>
          <span style={{ color: "var(--text-dim)" }}>Prove.</span>
        </h2>
        <p style={{ fontSize: 16, color: "var(--text-dim)", maxWidth: 680, lineHeight: 1.65, margin: "0 0 50px" }}>
          Aurek is a stack. The SDK enforces policy in your runtime. Fleet
          discovers and scores the agents already running across your
          organization. Trust turns the audit trail into a public verification
          page anyone can check.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          <ProductCard
            kind="sdk"
            badge="SDK · GA"
            title="SDK"
            tagline="Policy at the action layer"
            bullets={[
              "Intercept every tool call, resource access, and inter-agent message",
              "Deterministic allow / deny / escalate decisions",
              "Tamper-evident audit log per action",
              "Drop in: 4 lines of code, framework-agnostic",
            ]}
            footer="// pip install aurek · npm i @aurek/sdk"
            viz={<MiniSparkline/>}
          />
          <ProductCard
            kind="fleet"
            badge="FLEET · BETA"
            title="Fleet"
            tagline="Discovery, posture, and drift"
            bullets={[
              "Detect every agent already running — registered or not",
              "Score posture against OWASP, EU AI Act, NIST AI RMF",
              "Behavioral baselines + anomaly alerts",
              "Block unregistered agents from production",
            ]}
            footer="// aurek fleet scan --org acme"
            viz={<FleetBadge/>}
          />
          <ProductCard
            kind="trust"
            badge="TRUST · NEW"
            title="Trust"
            tagline="External proof surface"
            bullets={[
              "Public verification page per product slug",
              "Live policy coverage + latest audit attestation",
              "Embeddable trust badge for your site",
              "Cryptographic proof customers can verify themselves",
            ]}
            footer="// app.aurek.dev/verify/{slug}"
            viz={<TrustStamp/>}
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProductsOverview });