const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "palette": "cyan",
  "heroLayout": "split",
  "badgeStyle": "hex",
  "demoAgent": "atlas-7b"
}/*EDITMODE-END*/;

const AGENTS = {
  "atlas-7b": {
    name: "Atlas-7B",
    org: "Helix Labs",
    tier: "Gold",
    score: 87,
    scores: { negotiation: 84, math: 92, coding: 88, reasoning: 90, tool_use: 78, communication: 86 },
    latency: "412ms",
    runs: "12.4K",
  },
  "kestrel-mini": {
    name: "Kestrel-Mini",
    org: "Northbeam",
    tier: "Silver",
    score: 71,
    scores: { negotiation: 62, math: 78, coding: 80, reasoning: 70, tool_use: 74, communication: 64 },
    latency: "218ms",
    runs: "44.1K",
  },
  "orion-pro": {
    name: "Orion-Pro",
    org: "Telos AI",
    tier: "Platinum",
    score: 94,
    scores: { negotiation: 96, math: 89, coding: 93, reasoning: 95, tool_use: 92, communication: 99 },
    latency: "624ms",
    runs: "3.2K",
  },
  "rover-2": {
    name: "Rover-2",
    org: "Inkwell",
    tier: "Bronze",
    score: 58,
    scores: { negotiation: 50, math: 64, coding: 72, reasoning: 60, tool_use: 56, communication: 46 },
    latency: "186ms",
    runs: "98.7K",
  },
};

const CAP_INFO = {
  negotiation:   { name: "Negotiation",  desc: "Multi-turn bargaining, concession strategy, BATNA awareness." },
  math:          { name: "Math",         desc: "Symbolic, numerical, and proof-style reasoning across MATH, GSM8K-Hard." },
  coding:        { name: "Coding",       desc: "Repo-scale edits, test-driven completion, refactor under constraints." },
  reasoning:     { name: "Reasoning",    desc: "Multi-step logic, planning, counterfactuals, abstraction transfer." },
  tool_use:      { name: "Tool use",     desc: "Function calling, retrieval, web/automation chains, error recovery." },
  communication: { name: "Communication", desc: "Clarity, refusal calibration, instruction following, register." },
};

function Logo() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 21,7 21,17 12,22 3,17 3,7"
               fill="none" stroke="currentColor" strokeWidth="1.5"/>
      <polygon points="12,7 17,9.5 17,14.5 12,17 7,14.5 7,9.5"
               fill="var(--accent)" stroke="none" opacity="0.9"/>
    </svg>
  );
}

function Nav() {
  return (
    <div className="nav">
      <div className="shell nav-inner">
        <div className="logo">
          <Logo/>
          <span>islegit<span className="dot">.</span>ai</span>
        </div>
        <nav className="nav-links">
          <a href="#capabilities">Capabilities</a>
          <a href="#how">How it works</a>
          <a href="#certificate">Certificate</a>
          <a href="#methodology">Methodology</a>
          <a href="#developers">Developers</a>
          <a href="#pricing">Pricing</a>
        </nav>
        <div className="nav-cta">
          <a className="btn" href="#verify">Verify a badge</a>
          <a className="btn btn-primary" href="#cta">Submit agent <span className="arrow">→</span></a>
        </div>
      </div>
    </div>
  );
}

function Hero({ tweaks, setTweak }) {
  const layout = tweaks.heroLayout || "split";
  const agentKey = tweaks.demoAgent;
  const agent = AGENTS[agentKey];
  const [hover, setHover] = useState(null);
  const [animKey, setAnimKey] = useState(0);
  const wrapRef = useRef(null);

  useEffect(() => { setAnimKey(k => k + 1); }, [agentKey, tweaks.palette, tweaks.theme]);

  const tipPos = useMemo(() => {
    if (!hover) return null;
    const N = 6;
    const idx = Object.keys(CAP_INFO).indexOf(hover);
    const angle = (360 / N) * idx - 90;
    const r = 0.55;
    return {
      left: `${50 + r * 50 * Math.cos(angle * Math.PI/180)}%`,
      top:  `${50 + r * 50 * Math.sin(angle * Math.PI/180)}%`,
    };
  }, [hover]);

  return (
    <section className="hero">
      <div className="bg-frame"/>
      <div className="shell">
        <div className={`hero-grid layout-${layout}`}>
          <div>
            <h1>
              Is this AI agent <em>actually</em> capable?
            </h1>
            <p className="lead">
              Independent capability evaluation for autonomous AI agents.
              We benchmark across six dimensions, issue tamper-evident credentials,
              and let buyers verify what an agent can really do — before it ships into production.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary" href="#cta">Submit your agent <span className="arrow">→</span></a>
              <a className="btn" href="#methodology">Read methodology</a>
            </div>

            <div className="hero-stats">
              <div className="hero-stat">
                <div className="v">2,184</div>
                <div className="l">Agents certified</div>
              </div>
              <div className="hero-stat">
                <div className="v">6</div>
                <div className="l">Capability axes</div>
              </div>
              <div className="hero-stat">
                <div className="v">41M+</div>
                <div className="l">Eval runs / mo</div>
              </div>
              <div className="hero-stat">
                <div className="v">99.94%</div>
                <div className="l">Cert verifiability</div>
              </div>
            </div>
          </div>

          <div className="hex-panel" ref={wrapRef}>
            <div className="hex-panel-head">
              <span><span className="blink"/>EVAL · LIVE</span>
              <span>{agent.name}</span>
            </div>

            <div className="agent-tabs">
              {Object.entries(AGENTS).map(([k, a]) => (
                <button key={k}
                        className={`agent-tab ${k === agentKey ? "active" : ""}`}
                        onClick={() => setTweak('demoAgent', k)}>
                  <span className="swatch"/> {a.name}
                </button>
              ))}
            </div>

            <div style={{ position: "relative" }}>
              <Hexagon
                size={520}
                scores={agent.scores}
                accent="var(--accent)"
                animateKey={animKey}
                onHoverAxis={setHover}
                highlight={hover}
              />
              {hover && (
                <div className="axis-tip" style={tipPos}>
                  {CAP_INFO[hover].name}<span className="v">{agent.scores[hover]}</span>
                  <div className="meta">tail-p95 · {Math.round(agent.scores[hover] * 0.92)} · stable</div>
                </div>
              )}
            </div>

            <div className="hex-panel-foot">
              <div className="row"><span>legit score</span><span>{agent.score} / 100</span></div>
              <div className="row"><span>tier</span><span>{agent.tier}</span></div>
              <div className="row"><span>latency p50</span><span>{agent.latency}</span></div>
              <div className="row"><span>eval runs</span><span>{agent.runs}</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CapIcon({ id }) {
  const common = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6 };
  switch (id) {
    case "negotiation": return <svg {...common}><path d="M3 12 L9 6 L12 9 L15 6 L21 12 L15 18 L12 15 L9 18 Z"/></svg>;
    case "math":        return <svg {...common}><path d="M5 5 L19 5 M5 9 L19 9 M5 14 L19 14 M9 14 L9 19 M15 14 L15 19"/></svg>;
    case "coding":      return <svg {...common}><path d="M8 8 L4 12 L8 16 M16 8 L20 12 L16 16 M14 6 L10 18"/></svg>;
    case "reasoning":   return <svg {...common}><circle cx="12" cy="12" r="3"/><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="5" cy="18" r="2"/><circle cx="19" cy="18" r="2"/><path d="M7 7 L10 10 M17 7 L14 10 M7 17 L10 14 M17 17 L14 14"/></svg>;
    case "tool_use":    return <svg {...common}><path d="M14 6 L18 10 L10 18 L6 14 Z M16 4 L20 8 M9 17 L4 22 Z"/></svg>;
    case "communication": return <svg {...common}><path d="M4 6 H20 V16 H13 L9 20 V16 H4 Z"/></svg>;
    default: return null;
  }
}

function Capabilities() {
  const data = [
    { id: "negotiation",  benches: "DealNet · BARGAIN-Hard · NegoEval-v3",  weight: "16%" },
    { id: "math",         benches: "MATH · GSM8K-Hard · ProofBench-2k",     weight: "16%" },
    { id: "coding",       benches: "SWE-Bench Live · MultiPL-E · RepoEdit", weight: "20%" },
    { id: "reasoning",    benches: "ARC-AGI-2 · BBH-Plus · MuSR",           weight: "20%" },
    { id: "tool_use",     benches: "ToolBench-X · BrowseGym · FnCall-Live", weight: "16%" },
    { id: "communication",benches: "MT-Bench-2 · IFEval · RefuseRight",     weight: "12%" },
  ];
  return (
    <section id="capabilities">
      <div className="shell">
        <div className="section-head">
          <div className="label">/ 01 — Capabilities</div>
          <div>
            <h2>Six axes of agent capability, <em>continuously evaluated</em>.</h2>
            <p className="sub">Every certified agent is scored on the same six dimensions, against a private rolling test set.
            Benchmarks rotate quarterly to prevent overfitting.</p>
          </div>
        </div>

        <div className="cap-grid">
          {data.map((c, i) => {
            const info = CAP_INFO[c.id];
            return (
              <div className="cap" key={c.id}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div className="cap-num">CAP / {String(i + 1).padStart(2, "0")}</div>
                  <div className="cap-icon"><CapIcon id={c.id}/></div>
                </div>
                <h3>{info.name}</h3>
                <p>{info.desc}</p>
                <div className="cap-meta">
                  <div className="row"><span>weight</span><span>{c.weight}</span></div>
                  <div className="row"><span>refresh</span><span>quarterly</span></div>
                  <div className="row" style={{ gridColumn: "1 / -1" }}>
                    <span>benches</span><span style={{ textAlign: "right" }}>{c.benches}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section id="how">
      <div className="shell">
        <div className="section-head">
          <div className="label">/ 02 — How it works</div>
          <div>
            <h2>From submission to verifiable credential in <em>under 72 hours</em>.</h2>
            <p className="sub">A reproducible pipeline. We don't see your weights — agents are evaluated through a sandboxed adapter that mirrors your production runtime.</p>
          </div>
        </div>

        <div className="how-grid">
          <div className="how-step">
            <div className="step-no">STEP / 01</div>
            <h3>Submit</h3>
            <p>Connect your agent via our SDK or HTTP adapter. Declare tools, system prompts, and runtime constraints.</p>
            <div className="vis"><HowVis kind="submit"/></div>
          </div>
          <div className="how-step">
            <div className="step-no">STEP / 02</div>
            <h3>Evaluate</h3>
            <p>The agent runs against ~14,000 sealed tasks across all six axes. Each run is logged and signed.</p>
            <div className="vis"><HowVis kind="eval"/></div>
          </div>
          <div className="how-step">
            <div className="step-no">STEP / 03</div>
            <h3>Certify</h3>
            <p>Receive a tamper-evident badge with public verification URL, score breakdown, and embeddable hexagon.</p>
            <div className="vis"><HowVis kind="cert"/></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowVis({ kind }) {
  if (kind === "submit") {
    return (
      <svg viewBox="0 0 240 100" width="100%" height="100%">
        <rect x="20" y="35" width="60" height="30" rx="2" fill="none" stroke="var(--accent)" strokeWidth="1"/>
        <text x="50" y="54" textAnchor="middle" fontSize="9" fontFamily="var(--mono)" fill="var(--accent)">AGENT</text>
        <path d="M85 50 L155 50" stroke="var(--accent)" strokeDasharray="3 3"/>
        <polygon points="155,46 161,50 155,54" fill="var(--accent)"/>
        <rect x="165" y="35" width="60" height="30" rx="2" fill="none" stroke="var(--muted)" strokeWidth="1"/>
        <text x="195" y="54" textAnchor="middle" fontSize="9" fontFamily="var(--mono)" fill="var(--muted)">ADAPTER</text>
      </svg>
    );
  }
  if (kind === "eval") {
    return (
      <svg viewBox="0 0 240 100" width="100%" height="100%">
        {Array.from({ length: 12 }).map((_, i) => (
          <rect key={i} x={20 + i * 17} y={70 - (i * 3 + 10) % 40} width="10" height={(i * 3 + 10) % 40 + 10}
                fill="var(--accent)" opacity={0.2 + (i % 5) * 0.16}/>
        ))}
        <line x1="14" y1="78" x2="226" y2="78" stroke="var(--border-2)"/>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 240 100" width="100%" height="100%">
      <polygon points="120,20 160,42 160,78 120,90 80,78 80,42" fill="none" stroke="var(--accent)" strokeWidth="1.5"/>
      <text x="120" y="60" textAnchor="middle" fontSize="14" fontFamily="var(--mono)" fontWeight="700" fill="var(--fg)">87</text>
      <text x="120" y="74" textAnchor="middle" fontSize="7" fontFamily="var(--mono)" fill="var(--muted)" letterSpacing="2">CERTIFIED</text>
    </svg>
  );
}

function CertificateSection({ tweaks, setTweak }) {
  const agent = AGENTS[tweaks.demoAgent];
  const [verify, setVerify] = useState({ value: "IL-7F2A-3CD9", state: "ok" });
  const onVerify = () => {
    const v = verify.value.trim().toUpperCase();
    if (v.startsWith("IL-")) setVerify({ value: v, state: "ok" });
    else setVerify({ value: v, state: "bad" });
  };

  return (
    <section id="certificate">
      <div className="shell">
        <div className="section-head">
          <div className="label">/ 03 — Certificate</div>
          <div>
            <h2>One badge. <em>Verifiable</em> in a click. Embeddable anywhere.</h2>
            <p className="sub">Every certified agent gets a public credential page, an embeddable score widget, and a signed JWT for machine verification.</p>
          </div>
        </div>

        <div className="badge-stage">
          <div>
            <div className="badge-picker">
              {[["hex","Hex"],["seal","Seal"],["tier","Tier"]].map(([k, l]) => (
                <button key={k}
                        className={`pick ${tweaks.badgeStyle === k ? "active" : ""}`}
                        onClick={() => setTweak('badgeStyle', k)}>{l}</button>
              ))}
            </div>
            <Badge style={tweaks.badgeStyle} agent={agent.name.toLowerCase()} score={agent.score} tier={agent.tier}/>
          </div>

          <div className="badge-side">
            <div className="verify-box" id="verify">
              <div className="tag no-dot">VERIFY A BADGE</div>
              <h3 style={{ margin: "10px 0 4px", fontWeight: 500, fontSize: 22 }}>Paste a credential ID</h3>
              <p style={{ color: "var(--muted)", margin: 0, fontSize: 14 }}>Confirms the badge was issued by islegit.ai and hasn't been revoked.</p>
              <div className="verify-input">
                <input value={verify.value}
                       onChange={(e) => setVerify({ value: e.target.value, state: null })}
                       placeholder="IL-XXXX-XXXX" />
                <button onClick={onVerify}>Verify</button>
              </div>
              {verify.state === "ok" && (
                <div className="verify-result ok">
                  <span>✓ valid · issued 2026-04-22 · {agent.name} · {agent.tier}</span>
                  <span style={{ color: "var(--muted)" }}>signature: ed25519:7f2a…3cd9 · revoked: false</span>
                </div>
              )}
              {verify.state === "bad" && (
                <div className="verify-result bad">
                  <span>✗ invalid format · expected IL-XXXX-XXXX</span>
                </div>
              )}
            </div>

            <div className="terminal">
              <div className="terminal-bar">
                <div className="dots"><span/><span/><span/></div>
                <span>embed.html · paste anywhere</span>
              </div>
              <pre>
{'<script '}<span className="k">src</span>{'='}<span className="s">"https://islegit.ai/embed.js"</span>{'\n        '}<span className="k">data-id</span>{'='}<span className="s">"IL-7F2A-3CD9"</span>{'\n        async></script>'}
              </pre>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Methodology() {
  const rows = [
    { n: "M.01", h: "Sealed test sets",      d: "Tasks are held in escrow and rotated quarterly. Submitters never see them.", v: 92 },
    { n: "M.02", h: "Adversarial probing",   d: "Red-team suites probe jailbreaks, prompt injection, and reward hacking.",    v: 78 },
    { n: "M.03", h: "Multi-judge consensus", d: "Free-form responses graded by ≥3 independent judges; ties trigger human review.", v: 88 },
    { n: "M.04", h: "Reproducibility",       d: "Every run pinned to a deterministic seed, environment hash, and tool ledger.", v: 96 },
    { n: "M.05", h: "Drift monitoring",      d: "Re-tested every 30 days; tier downgrades automatically on regression.",      v: 84 },
    { n: "M.06", h: "Open scorecard",        d: "Per-task pass/fail trace published with each certificate.",                  v: 99 },
  ];
  return (
    <section id="methodology">
      <div className="shell">
        <div className="section-head">
          <div className="label">/ 04 — Methodology</div>
          <div>
            <h2>How we keep the score <em>honest</em>.</h2>
            <p className="sub">Six controls designed to prevent overfitting, gaming, and credential drift. The methodology is open; the test sets are not.</p>
          </div>
        </div>

        <div className="method-grid">
          <div className="method-list">
            {rows.map((r) => (
              <div className="method-row" key={r.n}>
                <div className="n">{r.n}</div>
                <div>
                  <h4>{r.h}</h4>
                  <p>{r.d}</p>
                </div>
                <div className="meter"><span style={{ width: `${r.v}%` }}/></div>
              </div>
            ))}
          </div>
          <div className="method-list" style={{ padding: 24 }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", letterSpacing: ".14em", textTransform: "uppercase", marginBottom: 14 }}>
              SCORE COMPOSITION · LEGIT ∈ [0,100]
            </div>
            <ScoreFormula/>
            <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)", marginTop: 18, lineHeight: 1.7 }}>
              <div>w₁..w₆ = capability weights (sum=1)</div>
              <div>cᵢ = trimmed-mean capability score, p10–p90</div>
              <div>r = adversarial robustness coefficient, [0.85, 1.0]</div>
              <div>d = drift penalty, applied retroactively on regression</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ScoreFormula() {
  return (
    <div style={{
      padding: 24, border: "1px dashed var(--border)", borderRadius: 4,
      fontFamily: "var(--mono)", fontSize: 18, color: "var(--fg)",
      background: "var(--bg)", textAlign: "center", lineHeight: 1.8
    }}>
      <span style={{ color: "var(--accent)" }}>LEGIT</span> = r · (1 − d) · Σ <span style={{ color: "var(--muted)" }}>(wᵢ · cᵢ)</span>
    </div>
  );
}

function Developers() {
  return (
    <section id="developers">
      <div className="shell">
        <div className="section-head">
          <div className="label">/ 05 — For developers</div>
          <div>
            <h2>Wire up your agent in <em>four lines</em>.</h2>
            <p className="sub">Python and TypeScript SDKs. Or hit the HTTP adapter directly. We capture traces, scores, and replay artifacts automatically.</p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 24 }} className="dev-grid">
          <div className="terminal">
            <div className="terminal-bar">
              <div className="dots"><span/><span/><span/></div>
              <span>eval.py · python ≥ 3.11</span>
            </div>
            <pre>
<span className="c"># pip install islegit</span>{'\n'}
<span className="k">from</span>{' islegit '}<span className="k">import</span>{' Evaluator, Agent\n\n'}
{'agent = Agent.from_callable(my_agent_fn, tools=['}<span className="s">"web"</span>{', '}<span className="s">"python"</span>{'])\n'}
{'report = Evaluator(suite='}<span className="s">"core-v4"</span>{').run(agent, runs='}<span className="n">512</span>{')\n\n'}
<span className="k">print</span>{'(report.legit_score)   '}<span className="c"># → 87.4</span>{'\n'}
<span className="k">print</span>{'(report.cert_id)       '}<span className="c"># → IL-7F2A-3CD9</span>{'\n'}
{'report.publish()              '}<span className="c"># → public verifiable URL</span>
            </pre>
          </div>

          <div className="terminal">
            <div className="terminal-bar">
              <div className="dots"><span/><span/><span/></div>
              <span>verify.sh · curl</span>
            </div>
            <pre>
<span className="p">$</span>{' curl https://api.islegit.ai/v1/verify \\\n'}
{'   -d '}<span className="s">{`'{"cert_id":"IL-7F2A-3CD9"}'`}</span>{'\n\n'}
{'{\n  '}<span className="k">"valid"</span>{': '}<span className="n">true</span>{',\n  '}
<span className="k">"agent"</span>{': '}<span className="s">"atlas-7b"</span>{',\n  '}
<span className="k">"legit_score"</span>{': '}<span className="n">87</span>{',\n  '}
<span className="k">"tier"</span>{': '}<span className="s">"Gold"</span>{',\n  '}
<span className="k">"issued"</span>{': '}<span className="s">"2026-04-22"</span>{',\n  '}
<span className="k">"signature"</span>{': '}<span className="s">"ed25519:7f2a..3cd9"</span>{'\n}'}
            </pre>
          </div>
        </div>
      </div>
    </section>
  );
}

function Trust() {
  const items = [
    { h: "Cryptographic signing", d: "Ed25519 signatures over the full scorecard. Forge-proof, offline-verifiable.",
      icon: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3 L20 7 V12 C20 17 16 20 12 21 C8 20 4 17 4 12 V7 Z"/><path d="M9 12 L11 14 L15 10"/></svg> },
    { h: "Sealed test sets", d: "We never share live evals. Submitters can't memorize answers because they never see them.",
      icon: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="4" y="10" width="16" height="11" rx="1"/><path d="M8 10 V7 a4 4 0 0 1 8 0 V10"/></svg> },
    { h: "Public revocation", d: "If an agent regresses or violates terms, the badge revokes in real time. Embeds update.",
      icon: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M5 5 L19 19"/></svg> },
    { h: "Anti-collusion", d: "Multi-judge consensus across independent labs. No single party can rubber-stamp a score.",
      icon: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="8" cy="9" r="3"/><circle cx="16" cy="9" r="3"/><path d="M3 19 c0-3 3-5 5-5 M21 19 c0-3-3-5-5-5"/></svg> },
    { h: "Reproducible runs", d: "Every score reproducible from a sealed environment hash. Open audits welcome.",
      icon: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 12 a8 8 0 1 1 3 6"/><path d="M4 18 V12 H10"/></svg> },
    { h: "No agent weights", d: "We evaluate behavior, not internals. Your model never leaves your infra.",
      icon: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3 L20 8 L12 13 L4 8 Z"/><path d="M4 14 L12 19 L20 14"/></svg> },
  ];
  return (
    <section id="trust">
      <div className="shell">
        <div className="section-head">
          <div className="label">/ 06 — Trust</div>
          <div>
            <h2>A badge is only as legit as the system <em>behind</em> it.</h2>
            <p className="sub">Six guarantees that make islegit.ai credentials forge-resistant, regression-aware, and audit-ready.</p>
          </div>
        </div>
        <div className="trust-grid">
          {items.map((it, i) => (
            <div className="trust-cell" key={i}>
              <div className="icon" style={{ color: "var(--accent)" }}>{it.icon}</div>
              <h4>{it.h}</h4>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const tiers = [
    { name: "Starter", price: "$0", per: "/ free for OSS", desc: "For open-source agents and academic submissions.",
      features: ["1 agent submission / mo", "Core capability eval", "Public certificate page", "Hex / Seal / Tier badge"] },
    { name: "Team", price: "$2,400", per: "/ month", featured: true, desc: "For commercial agents and AI product teams.",
      features: ["10 agents · unlimited reruns", "Drift monitoring + alerts", "Private scorecards", "Embeddable widget + JWT", "SLA: 72h certification"] },
    { name: "Enterprise", price: "Talk to us", per: "", desc: "For platforms certifying many third-party agents.",
      features: ["Unlimited agents + sub-orgs", "Custom capability axes", "On-prem judge runners", "Co-branded certificate", "Dedicated audit liaison"] },
  ];
  return (
    <section id="pricing">
      <div className="shell">
        <div className="section-head">
          <div className="label">/ 07 — Pricing</div>
          <div>
            <h2>Simple tiers. <em>Transparent</em> evaluation costs.</h2>
            <p className="sub">No per-eval fees. Compute is bundled. Scale up without surprise charges.</p>
          </div>
        </div>
        <div className="pricing-grid">
          {tiers.map((t) => (
            <div className={`price-card ${t.featured ? "featured" : ""}`} key={t.name}>
              <div className="name">{t.name}</div>
              <div className="price">
                <span className="num">{t.price}</span>
                <span className="per">{t.per}</span>
              </div>
              <div className="desc">{t.desc}</div>
              <ul>{t.features.map((f) => <li key={f}>{f}</li>)}</ul>
              <div/>
              <a className={`btn ${t.featured ? "btn-primary" : ""}`} href="#cta">
                {t.name === "Enterprise" ? "Contact sales" : "Get started"} <span className="arrow">→</span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const qs = [
    { q: "How is the LEGIT score computed?",
      a: "It's a weighted sum of six capability scores, multiplied by an adversarial-robustness coefficient and a drift penalty. The exact weights are published quarterly; the test sets are sealed." },
    { q: "Can a vendor game the score?",
      a: "Test sets are held in escrow and rotated quarterly. Free-form responses are graded by ≥3 independent judges. Every score is reproducible from a sealed environment hash, and we re-test certified agents every 30 days." },
    { q: "Do you see our weights or system prompt?",
      a: "No. Agents run in your infra, behind a sandboxed adapter that exchanges only inputs and outputs. We capture traces and tool calls — not internals." },
    { q: "What happens if my agent regresses?",
      a: "Drift monitoring re-tests every 30 days. If the score drops below tier threshold, the badge auto-downgrades, and embeds update in real time. You'll get an alert before any public change." },
    { q: "Can I add custom capability axes?",
      a: "Yes — Enterprise customers can define one or more proprietary axes, hosted alongside the public six. These appear on the hexagon as additional spokes with their own weight." },
    { q: "How do you prevent badge forgery?",
      a: "Each certificate is signed with Ed25519 over the full scorecard. Verification works offline with our public key. Forging a badge requires breaking the signature scheme." },
  ];
  return (
    <section id="faq">
      <div className="shell">
        <div className="section-head">
          <div className="label">/ 08 — FAQ</div>
          <div>
            <h2>Common questions.</h2>
          </div>
        </div>
        <div className="faq">
          {qs.map((it, i) => (
            <details key={i} open={i === 0}>
              <summary>{it.q}</summary>
              <p>{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section id="cta" style={{ paddingTop: 32 }}>
      <div className="shell">
        <div style={{
          padding: 56, border: "1px solid var(--border)",
          background: "var(--surface)", borderRadius: 6, position: "relative",
          overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", inset: 0, opacity: 0.4,
            backgroundImage: "linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)",
            backgroundSize: "40px 40px",
            maskImage: "radial-gradient(ellipse at right, black, transparent 70%)"
          }}/>
          <div style={{ position: "relative", maxWidth: 720 }}>
            <span className="tag">SUBMIT YOUR AGENT</span>
            <h2 style={{ fontSize: 44, margin: "16px 0 12px", fontWeight: 500, letterSpacing: "-0.02em" }}>
              Stop telling people your agent is good.<br/>
              <em style={{ color: "var(--accent)", fontStyle: "normal" }}>Prove it.</em>
            </h2>
            <p style={{ color: "var(--muted)", maxWidth: 560 }}>
              Submission takes 5 minutes. First eval is free for open-source agents.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="#">Submit agent <span className="arrow">→</span></a>
              <a className="btn" href="#">Read the docs</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: "Product", links: ["Capabilities", "Methodology", "Pricing", "Changelog"] },
    { h: "Developers", links: ["Docs", "Python SDK", "TypeScript SDK", "API reference"] },
    { h: "Resources", links: ["Blog", "Research", "Press kit", "Status"] },
    { h: "Company", links: ["About", "Careers", "Security", "Contact"] },
  ];
  return (
    <footer>
      <div className="shell">
        <div className="foot-grid">
          <div>
            <div className="logo" style={{ marginBottom: 14 }}>
              <Logo/>
              <span>islegit<span className="dot">.</span>ai</span>
            </div>
            <p style={{ color: "var(--muted)", fontSize: 13, maxWidth: 280, margin: 0 }}>
              Independent capability evaluation and credentialing for AI agents.
              Built in Brooklyn & Zürich.
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <h5>{c.h}</h5>
              <ul>
                {c.links.map((l) => <li key={l}><a href="#">{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="foot-bottom">
          <span>© 2026 islegit, inc · all rights reserved</span>
          <span>build · 2026.04.22 · sha · 7f2a3cd9</span>
        </div>
      </div>
    </footer>
  );
}

function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection title="Theme">
        <TweakRadio label="Mode"
                    value={tweaks.theme}
                    options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
                    onChange={(v) => setTweak('theme', v)}/>
        <TweakSelect label="Palette"
                     value={tweaks.palette}
                     options={[
                       { value: "cyan", label: "Cyan (default)" },
                       { value: "navy-gold", label: "Navy + gold" },
                       { value: "violet", label: "Violet" },
                       { value: "lime", label: "Lime" },
                     ]}
                     onChange={(v) => setTweak('palette', v)}/>
      </TweakSection>

      <TweakSection title="Hero">
        <TweakRadio label="Layout"
                    value={tweaks.heroLayout}
                    options={[
                      { value: "split", label: "Split" },
                      { value: "left", label: "Left-heavy" },
                      { value: "stacked", label: "Stacked" },
                    ]}
                    onChange={(v) => setTweak('heroLayout', v)}/>
        <TweakSelect label="Demo agent"
                     value={tweaks.demoAgent}
                     options={Object.entries(AGENTS).map(([k, a]) => ({ value: k, label: `${a.name} · ${a.tier}` }))}
                     onChange={(v) => setTweak('demoAgent', v)}/>
      </TweakSection>

      <TweakSection title="Badge">
        <TweakRadio label="Style"
                    value={tweaks.badgeStyle}
                    options={[
                      { value: "hex", label: "Hex" },
                      { value: "seal", label: "Seal" },
                      { value: "tier", label: "Tier" },
                    ]}
                    onChange={(v) => setTweak('badgeStyle', v)}/>
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.setAttribute("data-palette", tweaks.palette);
  }, [tweaks.theme, tweaks.palette]);

  return (
    <>
      <Nav/>
      <Hero tweaks={tweaks} setTweak={setTweak}/>
      <Capabilities/>
      <HowItWorks/>
      <CertificateSection tweaks={tweaks} setTweak={setTweak}/>
      <Methodology/>
      <Developers/>
      <Trust/>
      <Pricing/>
      <FAQ/>
      <CTA/>
      <Footer/>
      <TweaksUI tweaks={tweaks} setTweak={setTweak}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);