// security.jsx — BuildQ Security & Compliance page.
// Modeled on the Legora security page; uses BuildQ tokens + system from styles.css.

/* Solutions hover-dropdown menu */
function SolutionsMenu({ active = false }) {
  const [open, setOpen] = React.useState(false);
  const closeTimer = React.useRef(null);
  const onEnter = () => {clearTimeout(closeTimer.current);setOpen(true);};
  const onLeave = () => {closeTimer.current = setTimeout(() => setOpen(false), 120);};
  const STAGES = [
  { n: "01", name: "Origination", desc: "Find the deals and sites worth pursuing.", href: "solutions/origination" },
  { n: "02", name: "Diligence", desc: "Get to a decision faster.", href: "solutions/diligence" },
  { n: "03", name: "Development", desc: "Stay ahead of every milestone.", href: "solutions/development" },
  { n: "04", name: "Financing", desc: "Make the project financeable.", href: "solutions/financing" },
  { n: "05", name: "Delivery", desc: "Get it built. Get it operating.", href: "solutions/delivery" }];

  return (
    <div onMouseEnter={onEnter} onMouseLeave={onLeave}
    style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
      <a href="solutions/" className="muted"
      style={{ color: active ? "var(--fg)" : undefined, display: "inline-flex", alignItems: "center", gap: 6, transition: "color .2s" }}>
        Solutions
        <svg width="9" height="9" viewBox="0 0 10 10" fill="none"
        style={{ transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform .25s ease" }}>
          <path d="M2 4 L5 7 L8 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </a>
      <div aria-hidden style={{ position: "absolute", top: "100%", left: -20, right: -20, height: 16, pointerEvents: open ? "auto" : "none" }} />
      <div role="menu" style={{
        position: "absolute", top: "calc(100% + 14px)", left: -24, minWidth: 380, padding: 8,
        background: "rgba(15, 20, 33, 0.92)",
        backdropFilter: "blur(16px) saturate(160%)", WebkitBackdropFilter: "blur(16px) saturate(160%)",
        border: "1px solid var(--border-2)", borderRadius: 8,
        boxShadow: "0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset",
        opacity: open ? 1 : 0, transform: open ? "translateY(0)" : "translateY(-6px)",
        pointerEvents: open ? "auto" : "none", transition: "opacity .25s ease, transform .25s ease", zIndex: 60
      }}>
        {STAGES.map((s) =>
        <a key={s.n} href={s.href}
        style={{ display: "grid", gridTemplateColumns: "32px 1fr", gap: 14, padding: "12px 14px", borderRadius: 6, alignItems: "baseline", color: "var(--fg)", transition: "background .2s ease" }}
        onMouseEnter={(e) => e.currentTarget.style.background = "rgba(229,162,105,0.08)"}
        onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
            <span className="num-serif" style={{ fontSize: 18, color: "var(--accent)", lineHeight: 1 }}>{s.n}</span>
            <span style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }}>
              <span style={{ fontSize: 14, color: "var(--fg)", letterSpacing: "-0.005em" }}>{s.name}</span>
              <span style={{ fontSize: 12, color: "var(--fg-3)", lineHeight: 1.4 }}>{s.desc}</span>
            </span>
          </a>
        )}
        <div style={{ marginTop: 4, paddingTop: 10, paddingBottom: 6, paddingLeft: 14, paddingRight: 14, borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <a href="solutions/" className="mono cap" style={{ color: "var(--fg-2)", fontSize: 10.5, letterSpacing: "0.12em" }}>All solutions</a>
          <span aria-hidden style={{ color: "var(--accent)", fontSize: 12 }}>→</span>
        </div>
      </div>
    </div>);

}


/* Industries hover-dropdown menu */
function IndustriesMenu({ prefix = "industries/", active = false }) {
  const [open, setOpen] = React.useState(false);
  const closeTimer = React.useRef(null);
  const onEnter = () => {clearTimeout(closeTimer.current);setOpen(true);};
  const onLeave = () => {closeTimer.current = setTimeout(() => setOpen(false), 120);};
  const INDS = [
  { name: "Energy", desc: "Solar, wind, storage, geothermal.", href: `${prefix}energy`, soon: false },
  { name: "Data centers", desc: "Speed-to-power for AI infrastructure.", href: `${prefix}data-centers`, soon: false },
  { name: "Commercial real estate", desc: "Project services for owners and investors.", href: `${prefix}real-estate`, soon: false }];

  return (
    <div onMouseEnter={onEnter} onMouseLeave={onLeave}
    style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
      <a href={`${prefix}data-centers`} className="muted"
      style={{ color: active ? "var(--fg)" : undefined, display: "inline-flex", alignItems: "center", gap: 6, transition: "color .2s" }}>
        Industries
        <svg width="9" height="9" viewBox="0 0 10 10" fill="none"
        style={{ transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform .25s ease" }}>
          <path d="M2 4 L5 7 L8 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </a>
      <div aria-hidden style={{ position: "absolute", top: "100%", left: -20, right: -20, height: 16, pointerEvents: open ? "auto" : "none" }} />
      <div role="menu" style={{
        position: "absolute", top: "calc(100% + 14px)", left: -24, minWidth: 380, padding: 8,
        background: "rgba(15, 20, 33, 0.92)",
        backdropFilter: "blur(16px) saturate(160%)", WebkitBackdropFilter: "blur(16px) saturate(160%)",
        border: "1px solid var(--border-2)", borderRadius: 8,
        boxShadow: "0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset",
        opacity: open ? 1 : 0, transform: open ? "translateY(0)" : "translateY(-6px)",
        pointerEvents: open ? "auto" : "none", transition: "opacity .25s ease, transform .25s ease", zIndex: 60
      }}>
        {INDS.map((s) =>
        <a key={s.name} href={s.href}
        style={{ display: "flex", flexDirection: "column", gap: 4, padding: "12px 14px", borderRadius: 6, color: "var(--fg)", transition: "background .2s ease" }}
        onMouseEnter={(e) => e.currentTarget.style.background = "rgba(229,162,105,0.08)"}
        onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
            <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ fontSize: 14, color: "var(--fg)", letterSpacing: "-0.005em" }}>{s.name}</span>
              {s.soon && <span className="mono cap" style={{ fontSize: 9, color: "var(--fg-3)", letterSpacing: "0.12em", padding: "2px 6px", border: "1px solid var(--border-2)", borderRadius: 3 }}>Coming soon</span>}
            </span>
            <span style={{ fontSize: 12, color: "var(--fg-3)", lineHeight: 1.4 }}>{s.desc}</span>
          </a>
        )}
      </div>
    </div>);

}

/* ────────────────────────── NAV ────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav
      style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        padding: scrolled ? "14px 0" : "22px 0",
        background: scrolled ? "rgba(10, 14, 24, 0.7)" : "rgba(10,14,24,0.4)",
        backdropFilter: "blur(14px) saturate(140%)",
        WebkitBackdropFilter: "blur(14px) saturate(140%)",
        borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent",
        transition: "all .35s ease"
      }}>
      <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <a href="/" style={{ display: "inline-flex", alignItems: "center", height: 36 }}>
          <img src="assets/buildq-logo-white.png" alt="BuildQ"
          style={{ height: 36, width: "auto", display: "block" }} />
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 32, fontSize: 14, whiteSpace: "nowrap" }}>
          <IndustriesMenu />
          <a href="company" className="muted">Company</a>
          <a href="security" className="muted" style={{ color: "var(--fg)" }}>Security</a>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <a href="https://app.buildq.ai/login" className="btn btn-ghost" style={{ padding: "10px 18px", fontSize: 13 }}>
              Log in
            </a>
            <a href="contact" className="btn btn-accent" style={{ padding: "10px 18px", fontSize: 13 }}>
              Get Started
              <span className="arrow" aria-hidden>→</span>
            </a>
          </div>
        </div>
      </div>
    </nav>);

}

/* ────────────────────────── HERO ────────────────────────── */
function Hero() {
  return (
    <section
      data-screen-label="01 Security hero"
      style={{
        position: "relative",
        paddingTop: "30vh",
        paddingBottom: "8vh",
        overflow: "hidden"
      }}>
      <div
        aria-hidden
        style={{
          position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
          background:
          "radial-gradient(60% 50% at 80% 0%, rgba(229,162,105,0.18) 0%, transparent 55%)," +
          "radial-gradient(60% 50% at 0% 20%, rgba(40,60,100,0.35) 0%, transparent 55%)"
        }} />
      {/* Soft lattice motif — quietly suggests grid / encryption without slop */}
      <svg
        aria-hidden
        viewBox="0 0 1200 600"
        preserveAspectRatio="none"
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 0,
          opacity: 0.16, pointerEvents: "none"
        }}>
        <defs>
          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--fg-3)" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>

      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ marginBottom: 24 }}>
          <span className="eyebrow">Security &amp; compliance</span>
        </div>
        <h1 className="display display-1" style={{ margin: 0, marginBottom: 32, maxWidth: 1100 }}>
          Your data is in safe hands.
        </h1>
        <p className="lede" style={{ maxWidth: 640, fontSize: "clamp(17px, 1.4vw, 21px)" }}>
          From encryption to access management, BuildQ enforces rigorous standards to keep your project data secure, private, and compliant — built for the confidentiality demands of capital-intensive infrastructure.
        </p>
        <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href="https://trust.buildq.ai/" target="_blank" rel="noopener noreferrer" className="btn">
            Go to Trust Center
            <span className="arrow" aria-hidden>→</span>
          </a>
          <a href="legal/security-addendum" className="btn btn-ghost">
            Security addendum
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>);

}

/* ────────────────────────── CERTIFICATIONS ────────────────────────── */
function CertBadge({ name, status, accent }) {
  // Stylized cert ring
  return (
    <div style={{
      position: "relative",
      width: 132, height: 132,
      borderRadius: 999,
      border: `1px solid ${accent ? "rgba(229,162,105,0.5)" : "var(--border-2)"}`,
      background: accent ?
      "radial-gradient(circle at 30% 25%, rgba(229,162,105,0.15) 0%, rgba(229,162,105,0.0) 65%)" :
      "linear-gradient(180deg, var(--bg-2) 0%, var(--surface) 100%)",
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center", gap: 4,
      boxShadow: accent ? "0 0 24px rgba(229,162,105,0.18)" : "none"
    }}>
      <svg width="132" height="132" viewBox="0 0 132 132" style={{ position: "absolute", inset: 0 }}>
        <circle cx="66" cy="66" r="56" fill="none" stroke={accent ? "var(--accent)" : "var(--border-strong)"} strokeWidth="0.5" strokeDasharray="2 6" opacity="0.6" />
      </svg>
      <div className="display" style={{
        fontSize: 22, letterSpacing: "-0.005em",
        color: accent ? "var(--fg)" : "var(--fg)",
        textAlign: "center", lineHeight: 1.05,
        position: "relative", zIndex: 1
      }}>
        {name}
      </div>
      {status &&
      <div className="mono cap" style={{
        fontSize: 9, color: accent ? "var(--accent)" : "var(--fg-3)", letterSpacing: "0.12em",
        position: "relative", zIndex: 1, textAlign: "center"
      }}>
          {status}
        </div>
      }
    </div>);

}

function Certifications() {
  return (
    <section data-screen-label="02 Certifications" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{ marginBottom: 64, maxWidth: 760 }}>
          <span className="eyebrow">Certified &amp; compliant</span>
          <h2 className="display display-2" style={{ marginTop: 18, marginBottom: 22 }}>
            Committed to the most rigorous data standards.
          </h2>
          <p className="lede" style={{ maxWidth: 640 }}>
            We meet the controls that lenders, counsel, and counterparties expect when sharing development materials, financial models, and confidential agreements.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(220px, 280px) 1fr",
          gap: 56,
          alignItems: "center",
          paddingTop: 36,
          borderTop: "1px solid var(--border-2)"
        }}>
          {/* The single, real badge */}
          <CertBadge name="SOC 2" status="Type 1" accent />

          <div style={{ maxWidth: 640 }}>
            <div className="display" style={{ fontSize: 28, letterSpacing: "-0.01em", marginBottom: 14 }}>
              SOC 2
            </div>
            <p style={{ margin: "0 0 18px", fontSize: 16, lineHeight: 1.6, color: "var(--fg-2)" }}>
              BuildQ has secured SOC 2 Type 1 certification, validating the design of our security controls across access, change management, encryption, and incident response.
            </p>
            <div style={{
              display: "inline-flex", flexWrap: "wrap", gap: 14, alignItems: "center",
              padding: "12px 16px",
              border: "1px solid var(--border-2)",
              borderRadius: 999
            }}>
              <span className="mono cap" style={{ color: "var(--fg-3)", fontSize: 10.5, letterSpacing: "0.14em" }}>Roadmap</span>
              <span style={{ color: "var(--border-strong)" }}>·</span>
              <span className="mono" style={{ color: "var(--fg-2)", fontSize: 12.5 }}>GDPR</span>
              <span className="mono" style={{ color: "var(--fg-2)", fontSize: 12.5 }}>ISO 27001</span>
              <span className="mono" style={{ color: "var(--fg-2)", fontSize: 12.5 }}>CCPA</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ────────────────────────── TRUSTED STORAGE ────────────────────────── */
function TrustedStorage() {
  const items = [
  {
    title: "Tiered storage",
    body: "Flexible storage options sized to data sensitivity and customer compliance requirements, from standard to dedicated workspaces."
  },
  {
    title: "US-based by default",
    body: "BuildQ operates US-based infrastructure with regional residency options available for enterprise customers under contract."
  },
  {
    title: "No model training on customer data",
    body: "Your confidential project data remains private. BuildQ does not use customer data to train or fine-tune any underlying AI models."
  }];

  return (
    <section data-screen-label="03 Trusted storage">
      <div className="wrap">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <span className="eyebrow">Trusted data storage</span>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 0,
          borderTop: "1px solid var(--border-2)",
          borderLeft: "1px solid var(--border-2)"
        }}>
          {items.map((it) =>
          <div key={it.title} style={{
            padding: "36px 32px",
            borderRight: "1px solid var(--border-2)",
            borderBottom: "1px solid var(--border-2)",
            display: "flex", flexDirection: "column", gap: 14,
            minHeight: 220
          }}>
              <div className="display" style={{ fontSize: 22, letterSpacing: "-0.005em", lineHeight: 1.15 }}>
                {it.title}
              </div>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--fg-2)" }}>{it.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── ARCHITECTURE PILLARS ────────────────────────── */
function Architecture() {
  const items = [
  {
    title: "Zero-trust design",
    body: "We follow Zero Trust principles: no user or system is inherently trusted. Access is always verified, time-bound, and logged."
  },
  {
    title: "Your approval required",
    body: "Access to customer data is strictly controlled. Engineers may only access data for support-related issues with written customer approval."
  },
  {
    title: "Continuous security testing",
    body: "Regular penetration testing covering the full platform scope, paired with an \u201Cassume breach\u201D methodology to proactively identify and mitigate risks."
  },
  {
    title: "Auditable AI",
    body: "Every AI inference is traceable to the source data and prompt that produced it. You can review reasoning, examine sources, and verify conclusions."
  }];

  return (
    <section data-screen-label="04 Architecture" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow">Infrastructure-grade security</span>
          <h2 className="display display-2" style={{ marginTop: 18 }}>
            Built to the bar capital expects.
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
          gap: 0,
          borderTop: "1px solid var(--border-2)",
          borderLeft: "1px solid var(--border-2)"
        }}>
          {items.map((it) =>
          <div key={it.title} style={{
            padding: "40px 36px",
            borderRight: "1px solid var(--border-2)",
            borderBottom: "1px solid var(--border-2)",
            display: "flex", flexDirection: "column", gap: 16,
            minHeight: 220
          }}>
              <div className="display" style={{ fontSize: 26, letterSpacing: "-0.005em", lineHeight: 1.15 }}>
                {it.title}
              </div>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "var(--fg-2)", maxWidth: 520 }}>
                {it.body}
              </p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── CONTROLS / DATA OWNERSHIP ────────────────────────── */
function ControlIcon({ kind }) {
  const c = "var(--accent)";
  const dim = "var(--fg-3)";
  const common = { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", style: { display: "block" } };
  if (kind === "retention") {
    return (
      <svg {...common}>
        <circle cx="16" cy="16" r="11" stroke={dim} strokeWidth="1" />
        <path d="M 16 8 V 16 L 22 19" stroke={c} strokeWidth="1.25" strokeLinecap="round" />
      </svg>);

  }
  if (kind === "governance") {
    return (
      <svg {...common}>
        <rect x="6" y="6" width="20" height="20" stroke={dim} strokeWidth="1" />
        <line x1="6" y1="13" x2="26" y2="13" stroke={dim} strokeWidth="1" />
        <line x1="13" y1="6" x2="13" y2="26" stroke={dim} strokeWidth="1" />
        <circle cx="20" cy="20" r="2.5" fill={c} />
      </svg>);

  }
  if (kind === "encryption") {
    return (
      <svg {...common}>
        <rect x="8" y="14" width="16" height="12" stroke={dim} strokeWidth="1" />
        <path d="M 12 14 V 10 A 4 4 0 0 1 20 10 V 14" stroke={c} strokeWidth="1.25" fill="none" />
        <circle cx="16" cy="20" r="1.5" fill={c} />
      </svg>);

  }
  if (kind === "auth") {
    return (
      <svg {...common}>
        <circle cx="16" cy="12" r="4" stroke={dim} strokeWidth="1" />
        <path d="M 8 26 Q 16 18 24 26" stroke={dim} strokeWidth="1" fill="none" />
        <path d="M 21 8 L 24 11 L 28 6" stroke={c} strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      </svg>);

  }
  return null;
}

function Controls() {
  const items = [
  { icon: "retention", title: "Data retention", body: "Set and manage data retention periods to align with your internal policies and regulatory requirements." },
  { icon: "governance", title: "Data governance", body: "Real-time insight into who is accessing your data and when, with full audit logging." },
  { icon: "encryption", title: "Encryption management", body: "Data encrypted in transit (TLS 1.2+) and at rest (AES-256). BYOK options available for enterprise customers." },
  { icon: "auth", title: "User authentication", body: "SSO/SAML integration gives you complete control over end-user authentication and access management." }];

  return (
    <section data-screen-label="05 Controls">
      <div className="wrap">
        <div style={{ marginBottom: 48, maxWidth: 760 }}>
          <span className="eyebrow">Your data. Your decisions.</span>
          <h2 className="display display-2" style={{ marginTop: 18 }}>
            You maintain control at all times.
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
          gap: 0,
          borderTop: "1px solid var(--border-2)",
          borderLeft: "1px solid var(--border-2)"
        }}>
          {items.map((it) =>
          <div key={it.title} style={{
            padding: "32px 28px",
            borderRight: "1px solid var(--border-2)",
            borderBottom: "1px solid var(--border-2)",
            display: "flex", flexDirection: "column", gap: 18,
            minHeight: 240
          }}>
              <ControlIcon kind={it.icon} />
              <div className="display" style={{ fontSize: 19, letterSpacing: "-0.005em" }}>{it.title}</div>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: "var(--fg-2)" }}>{it.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── FAQ ────────────────────────── */
function FAQ() {
  const items = [
  {
    q: "How does BuildQ encrypt data?",
    a: "All data is encrypted in transit using TLS 1.2 or higher, and at rest with AES-256. Enterprise customers can request bring-your-own-key (BYOK) configurations for additional control."
  },
  {
    q: "How does BuildQ manage customer data?",
    a: "Customer data is accessible only to your authorized users. BuildQ will not access your data without explicit written consent, and only for support-related issues. We do not use customer data to train or fine-tune AI models."
  },
  {
    q: "How does BuildQ handle AI transparency?",
    a: "Every AI inference produced in BuildQ is traceable back to the source documents and prompt that produced it. You can always review the AI\u2019s reasoning, examine the sources it relied on, and verify its conclusions."
  },
  {
    q: "What happens to our data when we stop using BuildQ?",
    a: "When your contract ends, all of your data and any dedicated storage resources associated with your account are permanently deleted. Before this happens, you may request a full export to retain anything you need."
  },
  {
    q: "Can BuildQ sign enterprise security agreements?",
    a: "Yes. We have a Security Addendum, DPAs, and BAA-equivalent agreements ready for execution. Contact security@buildq.ai to begin."
  }];

  const [open, setOpen] = React.useState(0);
  return (
    <section data-screen-label="06 FAQ" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{ marginBottom: 48, maxWidth: 760 }}>
          <span className="eyebrow">FAQ</span>
          <h2 className="display display-2" style={{ marginTop: 18 }}>
            Questions, answered.
          </h2>
        </div>
        <div style={{ borderTop: "1px solid var(--border-2)" }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: "1px solid var(--border-2)" }}>
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%", textAlign: "left",
                    padding: "26px 0",
                    display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24,
                    color: "var(--fg)", cursor: "pointer"
                  }}>
                  <span className="display" style={{ fontSize: "clamp(18px, 1.6vw, 22px)", letterSpacing: "-0.005em" }}>
                    {it.q}
                  </span>
                  <span aria-hidden style={{
                    width: 28, height: 28, flex: "0 0 auto",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    border: `1px solid ${isOpen ? "var(--accent)" : "var(--border-2)"}`,
                    borderRadius: 999,
                    color: isOpen ? "var(--accent)" : "var(--fg-2)",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                    transition: "all .3s ease"
                  }}>
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                      <path d="M5 1 V9 M1 5 H9" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                    </svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 320 : 0,
                  overflow: "hidden",
                  transition: "max-height .5s cubic-bezier(0.22,1,0.36,1)"
                }}>
                  <p style={{
                    margin: "0 0 26px",
                    fontSize: 15.5, lineHeight: 1.6, color: "var(--fg-2)",
                    maxWidth: 820
                  }}>
                    {it.a}
                  </p>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── CTA ────────────────────────── */
function CTA() {
  return (
    <section data-screen-label="07 CTA">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <span className="eyebrow">Serious about security?</span>
          <h2 className="display display-2" style={{ marginTop: 18 }}>
            Talk to our team.
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <a href="mailto:security@buildq.ai" className="btn" style={{ alignSelf: "flex-start" }}>
            security@buildq.ai
            <span className="arrow" aria-hidden>→</span>
          </a>
          <a href="legal" className="btn btn-ghost" style={{ alignSelf: "flex-start" }}>
            Legal documents
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>);

}

/* ────────────────────────── FOOTER ────────────────────────── */
function Footer() {
  return <buildq-footer></buildq-footer>;
}

/* ────────────────────────── APP ────────────────────────── */
function App() {
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Certifications />
        <TrustedStorage />
        <Architecture />
        <Controls />
        <FAQ />
        <CTA />
      </main>
      <Footer />
    </>);

}

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