// legal.jsx — BuildQ legal index page.
// Links to all legal agreements as separate sub-pages under /legal.
// Top nav is rendered globally via <buildq-nav> (see nav.js).

/* ────────────────────────── HERO ────────────────────────── */
function Hero() {
  return (
    <section
      data-screen-label="01 Legal hero"
      style={{
        position: "relative",
        paddingTop: "30vh",
        paddingBottom: "6vh",
        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%)"
        }} />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <span className="eyebrow">Legal</span>
        <h1 className="display display-1" style={{ marginTop: 22, maxWidth: 1100, marginBottom: 28 }}>
          Agreements &amp; policies.
        </h1>
        <p className="lede" style={{ maxWidth: 720, fontSize: "clamp(17px, 1.4vw, 21px)" }}>
          BuildQ&rsquo;s goal is to make AI useful for the people executing the most critical infrastructure projects. This page collects the agreements and policies that govern that service. From time to time these documents may change as we update and improve them to better serve our customers.
        </p>
      </div>
    </section>
  );
}

/* ────────────────────────── DOCUMENT GROUPS ────────────────────────── */
const GROUPS = [
  {
    title: "Terms of service",
    docs: [
      { name: "BuildQ Services Agreement", href: "legal/services-agreement", body: "Master agreement covering BuildQ\u2019s services, licenses, payment, confidentiality, IP, and warranties." },
      { name: "Terms of Use",              href: "legal/terms-of-use",       body: "Terms governing access to the BuildQ website and product, including user obligations and prohibited conduct." }
    ]
  },
  {
    title: "Addenda",
    docs: [
      { name: "Security Addendum",       href: "legal/security-addendum",       body: "Technical and organizational measures BuildQ maintains to safeguard customer data." },
      { name: "Acceptable Use Policy",   href: "legal/acceptable-use-policy",   body: "Practices required of customers and end-users when accessing BuildQ services." }
    ]
  },
  {
    title: "Privacy",
    docs: [
      { name: "Privacy Policy", href: "legal/privacy",        body: "How BuildQ collects, uses, stores, and protects personal information across our website and product." },
      { name: "Cookie Policy",  href: "legal/cookie-policy",  body: "Cookies and similar technologies used by BuildQ websites and how to control them." }
    ]
  }
];

function DocCard({ doc }) {
  return (
    <a href={doc.href}
      style={{
        display: "block",
        padding: "26px 28px",
        border: "1px solid var(--border-2)",
        borderRadius: 6,
        background: "var(--bg-2)",
        color: "var(--fg)",
        transition: "border-color .25s ease, background .25s ease, transform .25s ease",
        textDecoration: "none"
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = "rgba(229,162,105,0.55)";
        e.currentTarget.style.transform = "translateY(-1px)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.borderColor = "var(--border-2)";
        e.currentTarget.style.transform = "translateY(0)";
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, marginBottom: 10 }}>
        <p className="lede-lg" style={{ margin: 0, color: "var(--fg)" }}>
          {doc.name}
        </p>
        <span aria-hidden style={{
          width: 28, height: 28, flex: "0 0 auto",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          border: "1px solid var(--border-2)", borderRadius: 999,
          color: "var(--fg-2)"
        }}>
          <svg width="11" height="11" viewBox="0 0 14 14" fill="none">
            <path d="M2 7 H11 M8 4 L11 7 L8 10" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </div>
      <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--fg-2)", maxWidth: 460 }}>
        {doc.body}
      </div>
      <div className="mono cap" style={{ color: "var(--fg-3)", marginTop: 18, fontSize: 11 }}>
        Read document →
      </div>
    </a>
  );
}

function DocumentGroups() {
  return (
    <section data-screen-label="02 Documents">
      <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 64 }}>
        {GROUPS.map((g) => (
          <div key={g.title}>
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "baseline",
              marginBottom: 24, paddingBottom: 16, borderBottom: "1px solid var(--border-2)"
            }}>
              <h2 className="display display-3" style={{ letterSpacing: "-0.01em" }}>{g.title}</h2>
              <span className="mono cap" style={{ color: "var(--fg-3)" }}>{g.docs.length} docs</span>
            </div>
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))",
              gap: 16
            }}>
              {g.docs.map((d) => <DocCard key={d.name} doc={d} />)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ────────────────────────── CONTACT ────────────────────────── */
function Contact() {
  return (
    <section data-screen-label="03 Contact" style={{ background: "var(--bg-2)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <span className="eyebrow">Questions</span>
          <h2 className="display display-2" style={{ marginTop: 18, marginBottom: 16 }}>
            Need a redlined or executable copy?
          </h2>
          <p className="lede" style={{ maxWidth: 480 }}>
            For procurement teams, counsel, or compliance reviewers: contact our legal team for executable copies, custom MSAs, DPAs, and security addenda.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <a href="mailto:legal@buildq.ai" className="btn" style={{ alignSelf: "flex-start" }}>
            legal@buildq.ai
            <span className="arrow" aria-hidden>→</span>
          </a>
          <a href="security" className="btn btn-ghost" style={{ alignSelf: "flex-start" }}>
            Security &amp; compliance
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

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

function App() {
  return (
    <>
      <main>
        <Hero />
        <DocumentGroups />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

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