/* Integrations strip + "Structured for AI-native debugging" + CTA + footer */

const INTEGRATIONS = [
  { name: "Retell",     logo: "retell.svg" },
  { name: "Vapi",       logo: "vapi.svg" },
  { name: "Bland",      logo: "bland.svg" },
  { name: "Twilio",     logo: "twilio.svg" },
  { name: "LiveKit",    logo: "livekit.svg" },
  { name: "ElevenLabs", logo: "elevenlabs.svg" },
];

function IntegrationsSection() {
  return (
    <section className="block section-soft" style={{ paddingTop: 100, paddingBottom: 100 }} data-screen-label="04 integrations">
      <div className="wrap">
        <div className="how-head">
          <div className="section-eyebrow">Wired into the stack you already run</div>
          <h2 className="section-title how-title-lg">
            One integration. <span className="ink-soft">Every call, observable.</span>
          </h2>
          <p className="section-sub">
            One read-only hookup to your logs and recordings. No SDK, no proxy, no hot-path code.
          </p>
        </div>

        <div className="integ-row">
          {INTEGRATIONS.map((it, i) => (
            <div className="integ" key={i}>
              <img className="integ-logo" src={it.logo} alt={it.name}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Cluster failures — find every other call that broke the same way */
function AiDebugSection() {
  return (
    <section className="block" data-screen-label="05 cluster">
      <div className="wrap">
        <div className="grid-2" style={{ alignItems: "center" }}>
          <div>
            <div className="section-eyebrow">Pattern, not transcript</div>
            <h2 className="section-title">
              Find every other call <span className="ink-soft">that broke the same way.</span>
            </h2>
            <p className="section-sub" style={{ marginTop: 18 }}>
              Audia clusters calls by conversational signature — barge-in, silence, recovery, tool timeout —
              not by lexical match. One customer complaint surfaces the 37 other calls hiding behind it,
              ranked by similarity.
            </p>
            <div className="cluster-stats">
              <div className="cs-row"><span className="cs-n">38</span><span className="cs-l">barge-in cohort</span></div>
              <div className="cs-row"><span className="cs-n">24</span><span className="cs-l">silence cohort</span></div>
              <div className="cs-row"><span className="cs-n">12</span><span className="cs-l">tool timeouts</span></div>
            </div>
          </div>
          <div className="cluster-hero">
            <ClusterVis/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ClusterVis() {
  /* Stylized 2D cluster scatter — pure decorative */
  const groups = [
    { x: 78,  y: 60,  r: 38, color: "var(--accent-b)", label: "barge-in cluster", n: 38 },
    { x: 200, y: 95,  r: 26, color: "var(--accent-a)", label: "silence cluster",  n: 24 },
    { x: 285, y: 50,  r: 22, color: "var(--accent-c)", label: "recovery",         n: 16 },
    { x: 160, y: 150, r: 18, color: "var(--warn)",     label: "tool timeouts",    n: 12 },
  ];
  const pts = useMemoH(() => {
    const out = [];
    const rng = mulberry(42);
    for (const g of groups) {
      for (let k = 0; k < g.n; k++) {
        const a = rng() * Math.PI * 2, rr = Math.sqrt(rng()) * g.r;
        out.push({ x: g.x + Math.cos(a) * rr, y: g.y + Math.sin(a) * rr, c: g.color });
      }
    }
    return out;
  }, []);
  return (
    <svg viewBox="0 0 360 220" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style={{ display: "block", border: "1px solid var(--hair)", borderRadius: 14, background: "color-mix(in oklab, var(--bg) 35%, var(--panel))" }}>
      {groups.map((g, i) => (
        <circle key={"r"+i} cx={g.x} cy={g.y} r={g.r + 6} fill={g.color} opacity="0.10"/>
      ))}
      {pts.map((p, i) => <circle key={i} cx={p.x} cy={p.y} r="1.8" fill={p.c} opacity="0.85"/>)}
      {groups.map((g, i) => (
        <text key={"t"+i} x={g.x} y={g.y + g.r + 16} fontFamily="Geist Mono" fontSize="10" fill="var(--mute)" textAnchor="middle">{g.label} · {g.n}</text>
      ))}
    </svg>
  );
}

function LoopVis() { return null; /* unused — kept for backward compat */ }

function CtaSection() {
  return (
    <section className="cta" data-screen-label="06 cta">
      <div className="wrap">
        <div className="cta-card">
          <h3>Put an AI forward deployed engineer on every failed call.</h3>
          <p>Audia triages every failed call, finds the root cause across prompt and workflow, and ships the fix — so your engineers stop hand-debugging transcripts.</p>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn primary" onClick={() => window.openEarlyAccess && window.openEarlyAccess()}>Get early access</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="root">
      <div className="wrap row">
        <div className="brand"><span className="dot"/>Audia</div>
        <div className="mono" style={{ fontSize: 11, color: "var(--mute-2)" }}>© 2026 · audia.ai</div>
      </div>
    </footer>
  );
}

Object.assign(window, { IntegrationsSection, AiDebugSection, CtaSection, Footer });