/* Auditly — Home. Why AI systems must be audited. */
const { Button: HBtn, Badge: HBadge, Icon: HIcon } = window.AuditlyDesignSystem_ddf94a;
const H = window.Site;

const HERO_ROWS = [
  { label: "System", kind: "mono", text: "Claims Decision Assistant" },
  { label: "Risk Classification", kind: "pill", tone: "bad", text: "High" },
  { label: "Risk Appetite", kind: "pill", tone: "warn", text: "Near Threshold" },
  { label: "Control Coverage", kind: "meter", tone: "cyan", pct: 78, text: "78%" },
  { label: "Evidence Quality", kind: "pill", tone: "warn", text: "Moderate" },
  { label: "Human Oversight", kind: "pill", tone: "bad", text: "Weak" },
  { label: "Red-Team Status", kind: "pill", tone: "warn", text: "Exceptions Open" },
  { label: "Assurance View", kind: "pill", tone: "warn", text: "Partially Effective" },
];

const MARQUEE = [
  "AI System Audit", "Risk Appetite Testing", "Control Effectiveness", "Evidence Quality",
  "Automated Oversight", "Continuous Monitoring", "Adversarial Stress Testing", "AI Red Teaming",
  "Regulatory Compliance Assurance", "Board Reporting",
];

function HeroSection() {
  return (
    <section className="section bg-grid" style={{ paddingTop: 92, paddingBottom: 96, position: "relative" }}>
      <H.NodeField tone="light" density={0.7} style={{ WebkitMaskImage: "radial-gradient(ellipse 70% 80% at 70% 30%, #000 30%, transparent 80%)", maskImage: "radial-gradient(ellipse 70% 80% at 70% 30%, #000 30%, transparent 80%)", opacity: 0.6 }} />
      <div className="container hero-2col" style={{ position: "relative", zIndex: 2, display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 64, alignItems: "center" }}>
        <div>
          <H.Reveal as="h1" className="h-display" style={{ fontSize: 62, maxWidth: 640 }}>
            Audit the AI your business is betting on.
          </H.Reveal>
          <H.Reveal as="p" className="lede" delay={90} style={{ marginTop: 24, maxWidth: 552 }}>
            Auditly is the independent AI audit and assurance platform, grounded in academic
            research, that proves whether your AI systems are controlled, evidenced, tested and
            operating within risk appetite.
          </H.Reveal>
          <H.Reveal delay={170} style={{ display: "flex", gap: 12, marginTop: 34, flexWrap: "wrap" }}>
            <HBtn size="lg" iconRight={<HIcon name="arrow-right" size={18} />} onClick={H.goToContact}>Book a demo</HBtn>
            <HBtn size="lg" variant="secondary" onClick={H.goToContact}>Get started</HBtn>
          </H.Reveal>
        </div>
        <H.Reveal variant="left" delay={120}>
          <H.AuditFilePanel id="AUD-0421 · LIVE" rows={HERO_ROWS} />
        </H.Reveal>
      </div>
    </section>
  );
}

function MarqueeBand() {
  return (
    <div className="section--surface" style={{ padding: "22px 0" }}>
      <H.Marquee items={MARQUEE} />
    </div>
  );
}

const WHY_CARDS = [
  { icon: "waves", title: "AI changes the control environment", body: "AI risk is dynamic and probabilistic. Systems that pass launch tests still drift, degrade, hallucinate, amplify bias and fail under adversarial pressure." },
  { icon: "scale", title: "Assertions are not assurance", body: "Boards and audit committees need independent assurance over AI governance, risk and controls, not management's word that controls exist." },
  { icon: "folder-check", title: "Trust runs on evidence", body: "Trust depends on evidence: registers, controls, testing, oversight logs and red-team results that are sufficient, reliable and traceable." },
];

function WhyAudit() {
  return (
    <section className="section section--pad">
      <div className="container">
        <H.Reveal><H.SectionBar /></H.Reveal>
        <H.Reveal as="h2" className="h-section" delay={50} style={{ fontSize: 42, marginTop: 22, maxWidth: 840 }}>
          AI makes the decisions. Trust has to be proven.
        </H.Reveal>
        <H.Reveal as="p" className="lede" delay={110} style={{ fontSize: 19.5, marginTop: 20, maxWidth: 820 }}>
          AI systems influence decisions, process sensitive data and increasingly execute workflows.
          If they can't be independently audited, no one can say whether AI risk is controlled, or
          already outside appetite.
        </H.Reveal>
        <div className="card-grid" style={{ gridTemplateColumns: "repeat(3,1fr)", marginTop: 52 }}>
          {WHY_CARDS.map((c, i) => (
            <H.Reveal key={c.title} variant="up" delay={i * 90}>
              <div className="gc gc--hover gc--graph" style={{ height: "100%" }}>
                <span className="gc__ico"><HIcon name={c.icon} size={22} /></span>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            </H.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Pinned Assurance Model tour ── */
function OntologyPanel() {
  const nodes = ["Business Use Case", "Audit Program", "AI System", "Auditing Algorithm"];
  return (
    <div className="afile">
      <div className="afile__head"><span className="afile__dot" style={{ background: "#5A8CFF" }} /><span className="afile__title">Ontology-linked audit file</span><span className="afile__id">4 / 4 mapped</span></div>
      <div className="afile__body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, paddingTop: 16, paddingBottom: 20 }}>
        {nodes.map((n, i) => (
          <div key={n} style={{ border: "1px solid rgba(255,255,255,0.1)", borderRadius: 10, padding: "16px 14px", background: "rgba(255,255,255,0.03)" }}>
            <div className="mono" style={{ fontSize: 10, color: "#5E7491", letterSpacing: "0.08em" }}>ONT-{String(i + 1).padStart(2, "0")}</div>
            <div style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 15, color: "#E8F0FA", marginTop: 6 }}>{n}</div>
            <div className="mono" style={{ fontSize: 11, color: "#6FE0F5", marginTop: 8, display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 5, height: 5, borderRadius: 9, background: "#6FE0F5", display: "inline-block" }} />linked</div>
          </div>
        ))}
      </div>
    </div>
  );
}

const APP_ROWS = [
  { label: "Strategic AI risk", kind: "meter", tone: "ok", pct: 62, text: "In" },
  { label: "Model risk", kind: "meter", tone: "warn", pct: 88, text: "Near" },
  { label: "Agentic AI risk", kind: "meter", tone: "bad", pct: 104, text: "Out" },
  { label: "Data & privacy risk", kind: "meter", tone: "ok", pct: 54, text: "In" },
  { label: "Cyber / adversarial", kind: "meter", tone: "warn", pct: 81, text: "Near" },
];
function AppetitePanel() {
  return (
    <div className="afile">
      <div className="afile__head"><span className="afile__dot" style={{ background: "#F4B549" }} /><span className="afile__title">AI risk appetite map</span><span className="afile__id">vs. threshold</span></div>
      <div className="afile__body">
        {APP_ROWS.map((r) => (
          <div className="arow" key={r.label}>
            <span className="arow__label" style={{ width: 150 }}>{r.label}</span>
            <span className="arow__val"><H.Meter pct={Math.min(r.pct, 100)} tone={r.tone} width={120} /><span className="mono" style={{ width: 38, textAlign: "right", color: H.toneColor(r.tone) }}>{r.text}</span></span>
          </div>
        ))}
      </div>
    </div>
  );
}

const REDTEAM_ROWS = [
  { id: "RT-118", t: "Prompt injection → tool call", sev: "bad", s: "Critical" },
  { id: "RT-126", t: "RAG source poisoning", sev: "warn", s: "High" },
  { id: "RT-131", t: "Sensitive data disclosure", sev: "warn", s: "High" },
  { id: "RT-140", t: "Agentic overreach / scope", sev: "bad", s: "Critical" },
  { id: "RT-147", t: "Guardrail bypass (jailbreak)", sev: "info", s: "Medium" },
];
function RedTeamPanel() {
  return (
    <div className="afile">
      <div className="afile__head"><span className="afile__dot" style={{ background: "#FF7B7B" }} /><span className="afile__title">Automated oversight · adversarial log</span><span className="afile__id">5 findings</span></div>
      <div className="afile__body">
        {REDTEAM_ROWS.map((r) => (
          <div className="arow" key={r.id} style={{ gap: 12 }}>
            <span className="mono" style={{ fontSize: 11, color: "#5E7491", width: 52, flex: "none" }}>{r.id}</span>
            <span style={{ fontSize: 13.5, color: "#E8F0FA" }}>{r.t}</span>
            <span className="arow__val"><H.Pill tone={r.sev}>{r.s}</H.Pill></span>
          </div>
        ))}
      </div>
    </div>
  );
}

function AssuranceModelTour() {
  const stages = [
    { num: "01 / 03", title: "Ontology-driven audit structuring", body: "Auditly maps the AI system through connected ontologies. Business use case, audit program, AI system and auditing algorithm are structured into one audit file that links purpose, risks, controls, evidence and findings.", panel: <OntologyPanel /> },
    { num: "02 / 03", title: "AI risk appetite & control assurance", body: "Auditly tests whether AI risk-taking is deliberate, measurable, authorised and monitored, then links appetite thresholds to control requirements, evidence, lifecycle stages and assurance coverage.", panel: <AppetitePanel /> },
    { num: "03 / 03", title: "Automated oversight under pressure", body: "Continuous monitoring, adversarial stress testing and AI red teaming check whether systems hold up against real failure modes, prompt injection, drift, disclosure, unsafe tool use and agentic overreach.", panel: <RedTeamPanel /> },
  ];
  return (
    <section className="section section--dark section--pad">
      <H.NodeField tone="dark" density={1} />
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 12 }}>
          <H.Reveal><H.SectionBar ink /></H.Reveal>
          <H.Reveal as="h2" className="h-section" delay={50} style={{ fontSize: 42, marginTop: 22 }}>The Auditly Assurance Model.</H.Reveal>
          <H.Reveal as="p" className="lede" delay={110} style={{ marginTop: 18 }}>
            An assurance model anchored in academic research, built on ontologies, AI risk appetite,
            risk and control mapping, automated oversight, and regulatory compliance assurance.
          </H.Reveal>
        </div>
      </div>
      <div className="container">
        <H.PinnedTour stages={stages} />
      </div>
    </section>
  );
}

/* ── Differentiators ── */
const DIFF = [
  { icon: "flask-conical", title: "Research-based assurance logic", body: "Auditly translates evidence-based academic research into a practical AI audit model for enterprise assurance teams." },
  { icon: "network", title: "Ontology-driven audit files", body: "Every audit is structured around connected AI system, business use case, audit program and testing ontologies." },
  { icon: "route", title: "Risk appetite → control traceability", body: "Auditly links AI risk appetite to control expectations, evidence requirements, testing procedures, exceptions and conclusions." },
  { icon: "swords", title: "Automated oversight & red teaming", body: "Continuous monitoring, adversarial stress testing and AI red-team evidence are built into the assurance view." },
];
function Differentiators() {
  return (
    <section className="section section--pad">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <H.Reveal><H.SectionBar /></H.Reveal>
          <H.Reveal as="h2" className="h-section" delay={50} style={{ fontSize: 42, marginTop: 22 }}>An audit engine built for AI.</H.Reveal>
        </div>
        <div className="card-grid" style={{ gridTemplateColumns: "repeat(2,1fr)" }}>
          {DIFF.map((d, i) => (
            <H.Reveal key={d.title} variant="up" delay={(i % 2) * 80}>
              <div className="gc gc--hover" style={{ display: "flex", gap: 20, alignItems: "flex-start", height: "100%" }}>
                <span className="gc__ico gc__ico--cyan" style={{ marginBottom: 0, flex: "none" }}><HIcon name={d.icon} size={22} /></span>
                <div><h3>{d.title}</h3><p>{d.body}</p></div>
              </div>
            </H.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Product screenshots: a look inside Auditly ── */
function AuditlyMark({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 240 240" fill="none" role="img" aria-label="Auditly">
      <line x1="166" y1="44" x2="38" y2="121" stroke="#5B7B9C" strokeWidth="8" strokeLinecap="round" />
      <line x1="166" y1="44" x2="166" y2="198" stroke="#5B7B9C" strokeWidth="8" strokeLinecap="round" />
      <line x1="38" y1="121" x2="166" y2="198" stroke="#5B7B9C" strokeWidth="8" strokeLinecap="round" />
      <circle cx="166" cy="121" r="13" fill="#38D6F2" />
      <circle cx="166" cy="198" r="19" fill="#6F9BC4" />
      <circle cx="38" cy="121" r="27" fill="#8BAFD6" />
      <circle cx="166" cy="44" r="35" fill="#E8F0FA" />
    </svg>
  );
}

function AppWindow({ route, system, status, statusTone, capTitle, capMeta, children }) {
  return (
    <div className="ashot">
      <div className="ashot__bar">
        <span className="ashot__brand"><AuditlyMark size={20} /><b>Auditly</b><span className="ashot__l3">L3</span></span>
        <span className="ashot__crumb">{route}</span>
        <span className="ashot__sys">{system}<H.Pill tone={statusTone}>{status}</H.Pill></span>
      </div>
      <div className="ashot__body">
        <div className="ashot__cap"><h4>{capTitle}</h4><span>{capMeta}</span></div>
        {children}
      </div>
    </div>
  );
}

const ONT_NODES = [
  { code: "ONT-01", icon: "target", name: "Business Use Case", desc: "Purpose, value and the people each AI decision affects." },
  { code: "ONT-02", icon: "box", name: "AI System", desc: "Models, agents, data sources and vendors in scope." },
  { code: "ONT-03", icon: "clipboard-check", name: "Audit Program", desc: "Risks, controls, tests and evidence requirements." },
  { code: "ONT-04", icon: "workflow", name: "Auditing Algorithm", desc: "Procedures that generate findings and the opinion." },
];
const ONT_CHAIN = ["Purpose", "Risks", "Controls", "Evidence", "Findings", "Opinion"];
function OntologyShot() {
  return (
    <AppWindow route="AI Audit Universe" system="Claims Triage Agent" status="Critical" statusTone="bad" capTitle="Ontology-linked audit file" capMeta="4 / 4 mapped">
      <div className="ont">
        {ONT_NODES.map((n) => (
          <div className="ont__node" key={n.code}>
            <span className="ont__ico"><HIcon name={n.icon} size={17} /></span>
            <div style={{ minWidth: 0 }}>
              <div className="ont__code">{n.code}</div>
              <div className="ont__name">{n.name}</div>
              <div className="ont__desc">{n.desc}</div>
            </div>
            <span className="ont__link">linked</span>
          </div>
        ))}
      </div>
      <div className="ont__chain">
        {ONT_CHAIN.map((c, i) => (
          <React.Fragment key={c}>
            <span className="ont__chip">{c}</span>
            {i < ONT_CHAIN.length - 1 && <span className="ont__arrow"><HIcon name="arrow-right" size={13} /></span>}
          </React.Fragment>
        ))}
      </div>
    </AppWindow>
  );
}

const APT_DOMAINS = [
  { dom: "Model Risk", thr: "Model drift MSI < 0.20", status: "Near Threshold", tone: "warn", pct: 62 },
  { dom: "Agentic AI Risk", thr: "0 critical unresolved red-team findings", status: "Breach", tone: "bad", pct: 26 },
  { dom: "Data Risk", thr: "0 unauthorised sensitive disclosures", status: "Within Appetite", tone: "ok", pct: 90 },
  { dom: "Fairness Risk", thr: "Disparity ratio within approved band", status: "Near Threshold", tone: "warn", pct: 62 },
  { dom: "Cyber & Adversarial", thr: "Prompt-injection success rate < 2%", status: "Breach", tone: "bad", pct: 26 },
];
function AppetiteShot() {
  return (
    <AppWindow route="Risk Appetite" system="Claims Triage Agent" status="Breach" statusTone="bad" capTitle="Enterprise-to-AI appetite mapping" capMeta="5 domains">
      <div className="apt">
        {APT_DOMAINS.map((d) => (
          <div className="apt__r" key={d.dom}>
            <div className="apt__top">
              <span className="apt__dom">{d.dom}</span>
              <span className="apt__pill"><H.Pill tone={d.tone}>{d.status}</H.Pill></span>
            </div>
            <div className="apt__thr"><H.Meter pct={d.pct} tone={d.tone} width={88} />{d.thr}</div>
          </div>
        ))}
      </div>
    </AppWindow>
  );
}

const CTL_ROWS = [
  { id: "CTL-001", obj: "Use case within approved AI & enterprise appetite", dom: "Risk Appetite", dep: ["Partial", "warn"], des: ["Partial", "warn"], op: ["Ineffective", "bad"] },
  { id: "CTL-014", obj: "Independent model validation before deployment", dom: "Model Risk", dep: ["Yes", "ok"], des: ["Effective", "ok"], op: ["Partial", "warn"] },
  { id: "CTL-028", obj: "Bounded tools, approval points and kill-switch", dom: "Agentic AI", dep: ["Partial", "warn"], des: ["Partial", "warn"], op: ["Ineffective", "bad"] },
  { id: "CTL-037", obj: "Human review competent, evidenced and QA'd", dom: "Human Oversight", dep: ["Partial", "warn"], des: ["Partial", "warn"], op: ["Partial", "warn"] },
  { id: "CTL-041", obj: "High-risk GenAI red-team tested before go-live", dom: "Adversarial Resilience", dep: ["Partial", "warn"], des: ["Effective", "ok"], op: ["Partial", "warn"] },
  { id: "CTL-052", obj: "Drift & appetite breaches monitored and escalated", dom: "Monitoring", dep: ["Yes", "ok"], des: ["Effective", "ok"], op: ["Partial", "warn"] },
];
function ControlsShot() {
  return (
    <AppWindow route="Risk & Controls" system="Claims Triage Agent" status="Partial" statusTone="warn" capTitle="Applicable controls" capMeta="6 of 6 assessed">
      <table className="ctbl">
        <thead>
          <tr>
            <th>Control</th>
            <th className="c">Deployed</th>
            <th className="c">Design</th>
            <th className="c">Operating</th>
          </tr>
        </thead>
        <tbody>
          {CTL_ROWS.map((r) => (
            <tr key={r.id}>
              <td>
                <div className="ctbl__id">{r.id}</div>
                <div className="ctbl__obj">{r.obj}</div>
                <div className="ctbl__dom">{r.dom}</div>
              </td>
              <td className="c"><H.Pill tone={r.dep[1]}>{r.dep[0]}</H.Pill></td>
              <td className="c"><H.Pill tone={r.des[1]}>{r.des[0]}</H.Pill></td>
              <td className="c"><H.Pill tone={r.op[1]}>{r.op[0]}</H.Pill></td>
            </tr>
          ))}
        </tbody>
      </table>
    </AppWindow>
  );
}

const SCREENS = [
  {
    ey: "Ontologies", title: "Every audit is built on a connected model",
    body: "Auditly structures each engagement as four linked ontologies. Because the business use case, AI system, audit program and auditing algorithm are modelled as related entities, purpose, risks, controls, evidence and findings stay traceable to one another across the whole audit file.",
    pts: [["One linked file", "change a risk and the controls, tests and evidence it touches stay connected."], ["Full traceability", "every finding traces back to a use case and forward to an opinion."], ["No orphaned work", "nothing in the engagement sits outside the model."]],
    shot: <OntologyShot />,
  },
  {
    ey: "Risk appetite", title: "Risk appetite, mapped to measurable thresholds",
    body: "Each AI risk domain is tied to its enterprise appetite and a measurable threshold, then scored against live evidence. Auditly shows whether a system is within appetite, near threshold or in breach, so AI risk-taking is deliberate, authorised and monitored rather than implicit.",
    pts: [["Enterprise-aligned", "every AI domain maps to an existing enterprise risk appetite."], ["Measured, not asserted", "thresholds are quantified KRIs scored from evidence."], ["Breaches surface early", "status escalates the moment a threshold is crossed."]],
    shot: <AppetiteShot />, flip: true,
  },
  {
    ey: "Control effectiveness", title: "Controls assessed on three independent axes",
    body: "A control that exists on paper isn't assurance. Auditly rates every applicable control on whether it is deployed, whether its design is effective and whether it is operating effectively, so partial deployment and design-only controls can never be mistaken for working ones.",
    pts: [["Deployed isn't effective", "three separate verdicts, never a single tick."], ["Evidence-backed", "operating effectiveness is graded from sampled evidence."], ["Gaps become findings", "weak operation routes straight to a rated finding."]],
    shot: <ControlsShot />,
  },
];

function ProductScreens() {
  return (
    <section className="section section--surface section--pad">
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 64 }}>
          <H.Reveal><H.SectionBar /></H.Reveal>
          <H.Reveal as="h2" className="h-section" delay={50} style={{ fontSize: 42, marginTop: 22 }}>A look inside the product.</H.Reveal>
          <H.Reveal as="p" className="lede" delay={110} style={{ fontSize: 19, marginTop: 18 }}>
            Three of the screens assurance teams work in every day: how Auditly structures an audit,
            tests risk appetite and grades whether controls actually work.
          </H.Reveal>
        </div>
        <div className="pshots">
          {SCREENS.map((s, i) => (
            <div className={"pshot" + (s.flip ? " pshot--flip" : "")} key={s.ey}>
              <H.Reveal className="pshot__copy" variant={s.flip ? "right" : "left"}>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                <ul className="pshot__pts">
                  {s.pts.map((p, pi) => (
                    <li key={p[0]}><span className="pshot__bullet" style={{ animationDelay: pi * 360 + "ms" }} /><span><b>{p[0]}</b>: {p[1]}</span></li>
                  ))}
                </ul>
              </H.Reveal>
              <H.Reveal variant={s.flip ? "left" : "right"} delay={90}>{s.shot}</H.Reveal>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Critical questions ── */
const QUESTIONS = [
  "Could a single AI failure become tomorrow's reputation crisis?",
  "Are high-risk AI systems operating within approved risk appetite?",
  "Are AI controls designed, deployed and operating effectively?",
  "Is human oversight meaningful, or just a rubber stamp?",
  "Have these systems been adversarially tested before deployment?",
  "Can we evidence our AI position to the board, customers and regulators?",
];
function CriticalQuestions() {
  return (
    <section className="section section--dark section--pad">
      <H.NodeField tone="dark" density={0.85} />
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <H.Reveal><H.SectionBar ink /></H.Reveal>
          <H.Reveal as="h2" className="h-section" delay={50} style={{ fontSize: 42, marginTop: 22 }}>Six questions every board must answer.</H.Reveal>
        </div>
        <div className="card-grid" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
          {QUESTIONS.map((q, i) => (
            <H.Reveal key={i} variant="up" delay={(i % 3) * 80}>
              <div className="gc" style={{ height: "100%", display: "flex", flexDirection: "column", gap: 18 }}>
                <span className="idx">Q{String(i + 1).padStart(2, "0")}</span>
                <p style={{ fontFamily: "var(--font-heading)", fontWeight: 500, fontSize: 19, lineHeight: 1.4, color: "#F3F8FF", margin: 0, letterSpacing: "-0.01em" }}>{q}</p>
                <span style={{ marginTop: "auto", color: "#38D6F2", display: "inline-flex" }}><HIcon name="help-circle" size={20} /></span>
              </div>
            </H.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Product preview ── */
const STATS = [
  { to: 64, suffix: "", label: "AI systems brought into scope", tone: "accent" },
  { to: 78, suffix: "%", label: "Control coverage evidenced", tone: "cyan" },
  { to: 5, suffix: "×", label: "Faster audit evidence cycles", tone: "ok" },
];
const MODULES = [
  ["layout-grid", "AI Audit Universe"], ["list", "AI Register"], ["box", "Model Risk Register"], ["bot", "Agent Risk Register"],
  ["gauge", "Risk Appetite Map"], ["shield-check", "AI Risk & Control Library"], ["folder-check", "Evidence Review"], ["activity", "Continuous Monitoring"],
  ["crosshair", "Adversarial Test Tracker"], ["swords", "AI Red-Team Evidence"], ["flag", "Findings & Ratings"], ["file-text", "Compliance Reporting"],
];
function ProductPreview() {
  return (
    <section className="section section--pad">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <H.Reveal><H.SectionBar /></H.Reveal>
          <H.Reveal as="h2" className="h-section" delay={50} style={{ fontSize: 42, marginTop: 22 }}>Every AI audit, in one workspace.</H.Reveal>
        </div>
        <div className="stat-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, marginBottom: 28 }}>
          {STATS.map((s, i) => (
            <H.Reveal key={s.label} variant="up" delay={i * 80}>
              <div className="gc" style={{ height: "100%" }}>
                <div style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 46, letterSpacing: "-0.02em", color: "var(--color-primary)" }}>
                  <H.CountUp to={s.to} suffix={s.suffix} />
                </div>
                <p style={{ marginTop: 8, fontSize: 15, color: "var(--color-text-soft)" }}>{s.label}</p>
                <H.ProgressBar pct={i === 1 ? 78 : i === 0 ? 86 : 92} tone={s.tone} delay={120} />
              </div>
            </H.Reveal>
          ))}
        </div>
        <div className="modgrid">
          {MODULES.map((m, i) => (
            <H.Reveal key={m[1]} variant="up" delay={(i % 4) * 50}>
              <div className="mod"><span className="mod__i"><HIcon name={m[0]} size={20} /></span><span className="mod__t">{m[1]}</span></div>
            </H.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClosingCTA() {
  return (
    <section className="section" style={{ paddingTop: 24, paddingBottom: 104 }}>
      <div className="container">
        <H.Reveal variant="scale">
          <H.CtaPanel
            title="Stop asserting your AI is safe. Start proving it."
            body="Auditly moves you from AI confidence by assertion to AI confidence by independent, defensible evidence."
            primary="Book a demo"
            secondary="Get started"
          />
        </H.Reveal>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <div style={{ background: "var(--color-bg)" }}>
      <H.SiteNav active="home" />
      <HeroSection />
      <MarqueeBand />
      <WhyAudit />
      <AssuranceModelTour />
      <Differentiators />
      <ProductScreens />
      <CriticalQuestions />
      <ProductPreview />
      <ClosingCTA />
      <H.SiteFooter />
    </div>
  );
}
window.HomePage = HomePage;
