// ── Veritee · Overview section (the pitch, top of "What is Veritee") ───────
const Overview = ({ goExplorer, docsUrl }) => {
  return (
    <section style={{ borderBottom: "var(--v-border)", background: "var(--v-surface)", position: "relative", overflow: "hidden" }}>
      {/* dither strip along the bottom edge */}
      <div style={{ position: "absolute", inset: "auto 0 0 0", height: 22, background: "repeating-conic-gradient(var(--v-teal-tint) 0 25%, transparent 0 50%) 0 0/8px 8px", opacity: 0.5 }} />
      <div className="tem-section" style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 56px 72px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 440px), 1fr))", gap: 56, alignItems: "center", position: "relative" }}>
        <div>
          <Eyebrow style={{ marginBottom: 14 }}>What is Veritee</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(44px,5.2vw,72px)", fontWeight: 400, lineHeight: 0.96, margin: "0 0 20px", textWrap: "balance" }}>
            Trust any off-chain compute, <span style={{ color: "var(--v-teal)" }}>your data seen by no one</span>.
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.65, margin: 0, opacity: 0.86, maxWidth: 520 }}>
            Veritee binds your application's full identity (silicon, boot, OS, and application code) into
            one Build-Reproduced TEE Image, logged on-chain at registration and re-verified at runtime by
            the Warden. Runtime decisions are stored immutably and committed to Midnight in Merkle batches.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
            <Button variant="primary" onClick={goExplorer}>Open the explorer <Icon.ArrowRight /></Button>
            <Button variant="secondary" as="a" href={docsUrl}>Read the docs</Button>
          </div>
        </div>

        <div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>
            <span>The full stack, sealed</span>
            <span style={{ color: "var(--v-teal)" }}>= one identity</span>
          </div>
          <StackedLayers />
          <p style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, lineHeight: 1.5, color: "var(--v-teal)", margin: "14px 0 0" }}>
            measured&nbsp;→&nbsp;dm-verity&nbsp;→&nbsp;PCR&nbsp;15&nbsp;→&nbsp;Warden&nbsp;→&nbsp;Midnight
          </p>
        </div>
      </div>
    </section>
  );
};
window.Overview = Overview;