/* VALDEX — shared components (Header, Footer, masthead pieces) */

const NAV = [
  { href: "/", label: "Home" },
  { href: "/services", label: "Services" },
  { href: "/work", label: "Work" },
  { href: "/process", label: "Process" },
  { href: "/pricing", label: "Pricing" },
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" },
];

function currentPath() {
  const p = location.pathname;
  if (p === "" || p === "/" || p === "/index.html") return "/";
  // Strip trailing slash and .html so direct .html visits still match clean NAV hrefs.
  return p.replace(/\/+$/, "").replace(/\.html$/, "");
}

/* Cosmic V mark — two strokes meeting at a glowing nucleus, with halo rings
   and a starfield spark. Designed to read tiny in the nav and large on hero. */
function OrbitMark() {
  return (
    <span className="logo-mark" aria-hidden="true">
      <svg viewBox="0 0 44 44">
        <defs>
          <radialGradient id="lm-nucleus" cx="50%" cy="50%" r="50%">
            <stop offset="0%"   stopColor="oklch(0.92 0.20 290)" />
            <stop offset="55%"  stopColor="oklch(0.72 0.24 290)" />
            <stop offset="100%" stopColor="oklch(0.48 0.22 290)" />
          </radialGradient>
          <linearGradient id="lm-stroke-l" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%"   stopColor="currentColor" stopOpacity="0.55" />
            <stop offset="100%" stopColor="oklch(0.78 0.24 290)" stopOpacity="1" />
          </linearGradient>
          <linearGradient id="lm-stroke-r" x1="100%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%"   stopColor="currentColor" stopOpacity="0.55" />
            <stop offset="100%" stopColor="oklch(0.78 0.24 290)" stopOpacity="1" />
          </linearGradient>
          <radialGradient id="lm-halo" cx="50%" cy="68%" r="55%">
            <stop offset="0%"   stopColor="oklch(0.78 0.24 290)" stopOpacity="0.45" />
            <stop offset="100%" stopColor="oklch(0.78 0.24 290)" stopOpacity="0" />
          </radialGradient>
        </defs>
        {/* Soft nebula halo behind nucleus */}
        <circle cx="22" cy="30" r="14" fill="url(#lm-halo)" />
        {/* Outer halo ring */}
        <circle cx="22" cy="30" r="11" fill="none" stroke="currentColor" strokeWidth="0.7" strokeOpacity="0.22" />
        {/* Inner halo ring */}
        <circle cx="22" cy="30" r="7"  fill="none" stroke="currentColor" strokeWidth="0.7" strokeOpacity="0.42" />
        {/* The V — two strokes meeting at the nucleus */}
        <path d="M8 7 L22 30" fill="none" stroke="url(#lm-stroke-l)" strokeWidth="2.4" strokeLinecap="round" />
        <path d="M36 7 L22 30" fill="none" stroke="url(#lm-stroke-r)" strokeWidth="2.4" strokeLinecap="round" />
        {/* Nucleus core */}
        <circle cx="22" cy="30" r="3.4" fill="url(#lm-nucleus)" />
        <circle cx="22" cy="30" r="1.4" fill="oklch(0.98 0.05 290)" opacity="0.9" />
        {/* Star sparks at the V tips */}
        <g fill="currentColor">
          <circle cx="8"  cy="7" r="1.4" />
          <circle cx="36" cy="7" r="1.1" opacity="0.65" />
        </g>
        {/* Tiny stardust */}
        <g fill="currentColor" opacity="0.55">
          <circle cx="3"  cy="22" r="0.7" />
          <circle cx="41" cy="20" r="0.7" />
          <circle cx="6"  cy="38" r="0.6" />
          <circle cx="38" cy="38" r="0.6" />
        </g>
      </svg>
    </span>
  );
}

function Logo() {
  return (
    <a href="/" className="logo" aria-label="VALDEX — home">
      <OrbitMark />
      <span className="logo-word">
        <b><span className="vk">V</span>ALDEX</b>
      </span>
    </a>
  );
}

function Header() {
  const [shrunk, setShrunk] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const path = currentPath();

  React.useEffect(() => {
    const onScroll = () => setShrunk(window.scrollY > 16);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);

  React.useEffect(() => {
    if (document.getElementById("valdex-org-schema")) return;
    const graph = {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": ["Organization", "ProfessionalService", "LocalBusiness"],
          "@id": "https://valdexai.com/#org",
          "name": "VALDEX LLC",
          "alternateName": "Valdex",
          "url": "https://valdexai.com/",
          "logo": "https://valdexai.com/apple-touch-icon.svg",
          "image": "https://valdexai.com/og-image.png",
          "description": "Digital advertising agency engineering visibility inside generative engines (ChatGPT, Perplexity, Claude, Gemini) and traditional search. GEO, SEO, paid acquisition, AI content engineering, attribution analytics, and agent workflows. Sheridan, Wyoming.",
          "foundingDate": "2025",
          "foundingLocation": "Sheridan, Wyoming, United States",
          "address": {
            "@type": "PostalAddress",
            "streetAddress": "1309 Coffeen Ave, Ste 1200",
            "addressLocality": "Sheridan",
            "addressRegion": "WY",
            "postalCode": "82801",
            "addressCountry": "US"
          },
          "geo": {
            "@type": "GeoCoordinates",
            "latitude": 44.7977,
            "longitude": -106.9559
          },
          "telephone": "+1-762-760-1179",
          "email": "hello@valdexai.com",
          "areaServed": [
            { "@type": "Country", "name": "United States" },
            { "@type": "Country", "name": "Canada" },
            { "@type": "Country", "name": "United Kingdom" }
          ],
          "openingHoursSpecification": [{
            "@type": "OpeningHoursSpecification",
            "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
            "opens": "09:00",
            "closes": "17:00"
          }],
          "priceRange": "$$$",
          "knowsAbout": [
            "Generative Engine Optimization",
            "GEO",
            "Search Engine Optimization",
            "SEO",
            "AI content engineering",
            "Paid acquisition",
            "Attribution analytics",
            "Agent workflows",
            "ChatGPT citation tracking",
            "Perplexity ranking",
            "Schema.org",
            "Entity graph"
          ],
          "sameAs": []
        },
        {
          "@type": "WebSite",
          "@id": "https://valdexai.com/#site",
          "url": "https://valdexai.com/",
          "name": "VALDEX",
          "description": "GEO + SEO agency for the AI era. Get cited inside ChatGPT, Perplexity, Claude, and Gemini.",
          "publisher": { "@id": "https://valdexai.com/#org" },
          "inLanguage": "en-US"
        }
      ]
    };
    const s = document.createElement("script");
    s.type = "application/ld+json";
    s.id = "valdex-org-schema";
    s.textContent = JSON.stringify(graph);
    document.head.appendChild(s);
  }, []);

  return (
    <React.Fragment>
      <header className={`hdr ${shrunk ? "shrunk" : ""}`}>
        <a className="skip" href="#main">Skip to content</a>
        <div className="wrap hdr-inner">
          <Logo />
          <nav className="hdr-nav" aria-label="Primary">
            {NAV.map((n) => (
              <a key={n.href} href={n.href} className={path === n.href ? "active" : ""}>{n.label}</a>
            ))}
          </nav>
          <div className="hdr-right">
            <a className="btn btn-ghost btn-sm hdr-cta-desk secondary" href="/contact#audit">Free GEO audit</a>
            <a className="btn btn-primary btn-sm hdr-cta-desk" href="/contact">Book intake →</a>
            <button className="hamburger" aria-label="Open menu" aria-expanded={open} onClick={() => setOpen(true)}>
              <svg width="18" height="12" viewBox="0 0 18 12" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M0 1h18M0 6h18M0 11h12" /></svg>
            </button>
          </div>
        </div>
      </header>
      {/* Drawer renders as a sibling of <header>, not a child, so its
          `position: fixed; inset: 0` resolves to the viewport. If it lived
          inside <header>, the header's backdrop-filter would make it the
          containing block and the drawer would be sized to the header only. */}
      <div className={`drawer ${open ? "open" : ""}`}>
        <button className="drawer-close" onClick={() => setOpen(false)} aria-label="Close menu">✕</button>
        {NAV.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
        <div className="drawer-cta">
          <a className="btn btn-primary" href="/contact">Book intake →</a>
        </div>
      </div>
    </React.Fragment>
  );
}

/* Top status bar — live Mountain time + intake availability */
function Ticker() {
  const [time, setTime] = React.useState("");
  React.useEffect(() => {
    const tick = () => {
      const d = new Date();
      const fmt = new Intl.DateTimeFormat("en-US", { hour: "2-digit", minute: "2-digit", timeZone: "America/Denver", hour12: false }).format(d);
      setTime(`${fmt} MT`);
    };
    tick();
    const i = setInterval(tick, 30000);
    return () => clearInterval(i);
  }, []);
  return (
    <div className="ticker">
      <div className="wrap">
        <div className="ticker-inner">
          <span className="live">Intake open · Q3 2026 waitlist active</span>
          <span className="ticker-mid">
            <span>Reply within 24 business hours · Mon–Fri</span>
          </span>
          <span>{time || "—"}</span>
        </div>
      </div>
    </div>
  );
}

/* Masthead — gazette-style headline framing */
function Masthead({ left = "Vol. II — § Home", mid = "VISIBILITY INSIDE THE ANSWER ENGINES", right = "Updated 05.18.26" }) {
  return (
    <div className="masthead-top">
      <span className="left">{left}</span>
      <span className="mid">{mid}</span>
      <span className="right">{right}</span>
    </div>
  );
}

/* Decorative orbit — concentric ellipses with animated orbiting engine dots */
function OrbitStage() {
  // engines on different rings — radius, initial angle, period (sec), size, hi
  const engines = [
    { r:  60, a:   0, dur:  42, sz: 4 },
    { r: 110, a: 200, dur:  70, sz: 5, hi: true },
    { r: 110, a:  20, dur:  70, sz: 3.5 },
    { r: 160, a:  80, dur:  98, sz: 4 },
    { r: 160, a: 260, dur:  98, sz: 3 },
    { r: 220, a: 130, dur: 140, sz: 3.5 },
    { r: 220, a: 310, dur: 140, sz: 3 },
  ];
  return (
    <div className="orbit-stage" aria-hidden="true">
      <svg viewBox="0 0 460 460">
        <defs>
          <radialGradient id="vio" cx="50%" cy="50%" r="50%">
            <stop offset="0%"   stopColor="oklch(0.55 0.22 290)" />
            <stop offset="100%" stopColor="oklch(0.42 0.22 290)" />
          </radialGradient>
        </defs>
        <g fill="none" stroke="rgba(14,15,20,0.42)" strokeWidth="1">
          <circle cx="230" cy="230" r="60" />
          <circle cx="230" cy="230" r="110" strokeDasharray="2 4" />
          <circle cx="230" cy="230" r="160" />
          <circle cx="230" cy="230" r="220" strokeDasharray="2 4" />
        </g>
        {engines.map((e, i) => (
          <g key={i}>
            <circle cx={230 + e.r} cy="230" r={e.sz}
              fill={e.hi ? "url(#vio)" : "rgba(14,15,20,0.78)"} />
            <animateTransform
              attributeName="transform"
              type="rotate"
              from={`${e.a} 230 230`}
              to={`${e.a + 360} 230 230`}
              dur={`${e.dur}s`}
              repeatCount="indefinite"
            />
          </g>
        ))}
        <circle cx="230" cy="230" r="16" fill="url(#vio)" />
        <circle cx="230" cy="230" r="22" fill="none" stroke="oklch(0.42 0.22 290)" strokeWidth="1" strokeOpacity="0.4">
          <animate attributeName="r" values="20;30;20" dur="3.5s" repeatCount="indefinite" />
          <animate attributeName="stroke-opacity" values="0.45;0;0.45" dur="3.5s" repeatCount="indefinite" />
        </circle>
        <text x="230" y="234" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#fff" letterSpacing="0.1em">YOU</text>
      </svg>
    </div>
  );
}

/* FAQ */
function FAQ({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq" role="region" aria-label="Frequently asked questions">
      {items.map((it, i) => (
        <div className="faq-item" key={i}>
          <button className="faq-q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <span className="ic">+</span>
          </button>
          <div className="faq-a" style={{ maxHeight: open === i ? 500 : 0 }}>
            <div className="faq-a-inner">{it.a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

const FAQ_HOME_ITEMS = [
  { q: "What is GEO and why now?", a: "Generative Engine Optimization is the practice of getting cited inside the answers ChatGPT, Perplexity, Claude, Gemini, and Copilot give to your buyers. About 38% of U.S. commercial queries now resolve inside an AI answer instead of a blue-link page. If your brand isn't in the citation list, the click never happens. We engineer the retrieval surface (structured pages, fact-graphs, third-party signals) so the models reach for you when they answer." },
  { q: "Is this just SEO with a new acronym?", a: "No. Traditional SEO rewards keyword breadth, backlinks, and time-on-page. Generative engines reward verifiable claims, schema-defined entities, sentence-level retrievability, and corroborating sources. The plays overlap. The tactics, formats, and measurement do not. We run both stacks in parallel because Google still moves more low-funnel revenue than every AI engine combined." },
  { q: "How do you measure GEO results?", a: "Three layers, no smoke. (1) Citation share: how often you're named across a tracked set of 250 buying-intent prompts on five engines, sampled twice weekly. (2) Retrieval inclusion: whether your canonical entity pages live in each engine's training and live retrieval corpus. (3) Downstream conversion: assisted revenue from AI-referred sessions in your analytics. The dashboard is in your inbox from week one." },
  { q: "How long until I see results?", a: "Citation share starts moving in four to six weeks once structured content is published. Traditional SEO compounds over 90 to 180 days. You get a Tuesday status note and a Friday metrics drop from the first week of the engagement, so you're watching the line move, not the calendar." },
  { q: "Who actually does the work?", a: "Three principals: a strategy lead, a content engineering lead, and an analytics lead. No subcontractors, no offshore teams, no AI slop pipelines. We use models heavily for drafting and analysis. Every published claim is fact-checked by a human against a primary source before it ships. Every time." },
  { q: "Do you guarantee #1 in ChatGPT?", a: "Nobody honest can. The rankings are stochastic and engine-internal. What we guarantee is the work itself: a tracked prompt set, structured page production, monthly citation reports, a quarterly strategy review, and the right to terminate after 90 days if citation share hasn't moved. Half the last month is refunded if you invoke it." },
  { q: "Where are you based?", a: "Sheridan, Wyoming. We work remote with clients across the U.S., and we'll fly out to your office once a quarter if you want a face-to-face. Full mailing address is in the footer. The coffee's already on if you want to stop by." },
];

function injectFaqSchema(id, items) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": items.map((it) => ({
      "@type": "Question",
      "name": it.q,
      "acceptedAnswer": { "@type": "Answer", "text": it.a }
    }))
  };
  const s = document.createElement("script");
  s.type = "application/ld+json";
  s.id = id;
  s.textContent = JSON.stringify(schema);
  document.head.appendChild(s);
}

function FaqHome() {
  React.useEffect(() => { injectFaqSchema("valdex-faq-home-schema", FAQ_HOME_ITEMS); }, []);
  return (
    <section className="section section-tight">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 07</span><b>FAQ</b></div>
          <div>
            <h2>Things prospective <span className="serif-it">operators</span> ask first.</h2>
          </div>
        </div>
        <FAQ items={FAQ_HOME_ITEMS} />
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final">
      <div className="wrap">
        <span className="eyebrow no-rule" style={{ justifyContent: "center", color: "rgba(255,255,255,0.7)" }}>
          <span className="dot"></span>SIGNAL OUT
        </span>
        <h2 style={{ marginTop: 18 }}>Be the answer, <span className="it">not the link.</span></h2>
        <p>Thirty minutes on a call. You name your category and the prompts your buyers actually run. We tell you, on the call, whether GEO is the right play right now and what citation share is reachable in ninety days. If it isn't, we'll tell you that too.</p>
        <div className="final-cta">
          <a className="btn btn-primary" href="/contact">Book the intake →</a>
          <a className="btn btn-ghost" href="/contact#audit">Request a free GEO audit</a>
        </div>
        <div className="final-meta">Intake open · Q3 2026 waitlist active · reply within 24 business hours</div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr-masthead">
          <div className="ftr-masthead-l">
            <span className="ftr-vol">Vol. II · Issue 18.05.26</span>
          </div>
          <div className="ftr-masthead-m">
            <span className="ftr-rule" aria-hidden="true"></span>
            <span className="ftr-imprint">An imprint of VALDEX LLC · Sheridan, Wyoming</span>
            <span className="ftr-rule" aria-hidden="true"></span>
          </div>
          <div className="ftr-masthead-r">
            <span className="ftr-vol">Mon–Fri · 09:00–17:00 MT</span>
          </div>
        </div>

        <div className="ftr-top">
          <div className="ftr-brand">
            <Logo />
            <p>A digital advertising agency engineering visibility inside generative engines and traditional search. Small team. Plain-spoken. Results put in writing every Friday by four.</p>
            <div className="ftr-cta-row">
              <a className="btn btn-primary btn-sm" href="/contact">Book intake →</a>
              <a className="btn btn-ghost btn-sm" href="/contact#audit">Free GEO audit</a>
            </div>
          </div>

          <div className="ftr-col">
            <h4>Practices</h4>
            <a href="/services#geo">Generative Engine Optimization</a>
            <a href="/services#seo">Search Engine Optimization</a>
            <a href="/services#content">AI content engineering</a>
            <a href="/services#ads">Paid acquisition</a>
            <a href="/services#analytics">Attribution &amp; analytics</a>
          </div>

          <div className="ftr-col">
            <h4>Company</h4>
            <a href="/work">Case studies</a>
            <a href="/process">Operating system</a>
            <a href="/about">About</a>
            <a href="/pricing">Engagements</a>
            <a href="/contact">Contact</a>
          </div>

          <div className="ftr-col ftr-col-legal">
            <h4>Legal &amp; trust</h4>
            <a href="/privacy">Privacy notice</a>
            <a href="/cookie-policy">Cookie policy</a>
            <a href="/terms">Terms of engagement</a>
            <a href="/dpa">Data Processing Addendum</a>
            <a href="/subprocessors">Subprocessors</a>
            <a href="/trust">Trust &amp; security</a>
            <a href="/accessibility">Accessibility statement</a>
            <a href="/citation-policy">Citation policy</a>
            <a href="#cookie-preferences" data-vc-open>Cookie preferences</a>
          </div>

          <div className="ftr-col ftr-col-office">
            <h4>Office of record</h4>
            <address className="ftr-addr">
              <b>VALDEX LLC</b>
              1309 Coffeen Ave, Ste 1200<br />
              Sheridan, WY 82801
            </address>
            <div className="ftr-contacts">
              <a href="mailto:intake@valdexai.com">intake@valdexai.com</a>
              <a href="mailto:press@valdexai.com">press@valdexai.com</a>
              <span className="ftr-phone">(762) 760-1179</span>
            </div>
          </div>
        </div>

        <div className="ftr-bottom">
          <span className="ftr-copy">© 2026 VALDEX LLC · All rights reserved</span>
          <span className="ftr-tagline" aria-hidden="true">SHERIDAN&nbsp;&nbsp;↔&nbsp;&nbsp;THE&nbsp;OPEN&nbsp;INTERNET</span>
          <a className="ftr-ccpa" href="/privacy#california">
            <span className="ftr-ccpa-dot" aria-hidden="true"></span>
            Your California privacy choices
          </a>
        </div>
      </div>
    </footer>
  );
}

/* Marquee strip — runs between sections on home */
function Marquee() {
  const item = (i) => (
    <span key={i}>
      Generative Engine Optimization <span className="star">✸</span>{" "}
      Search Engine Optimization <span className="star">✸</span>{" "}
      AI Content Engineering <span className="star">✸</span>{" "}
      Paid Acquisition <span className="star">✸</span>{" "}
      Attribution &amp; Analytics <span className="star">✸</span>{" "}
      Agent Workflows <span className="star">✸</span>{" "}
    </span>
  );
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">{[0,1,2,3].map(item)}</div>
    </div>
  );
}

function installPageTransitions() {
  document.body.classList.add("pt-entering");
  setTimeout(() => document.body.classList.remove("pt-entering"), 400);
}

/* Shared shell for legal/policy pages */
const LEGAL_NAV_GROUPS = [
  {
    label: "Public-facing",
    items: [
      { href: "/privacy", label: "Privacy notice" },
      { href: "/cookie-policy", label: "Cookie policy" },
      { href: "/citation-policy", label: "Citation policy" },
    ],
  },
  {
    label: "Client agreements",
    items: [
      { href: "/terms", label: "Terms of engagement" },
      { href: "/dpa", label: "Data Processing Addendum" },
      { href: "/subprocessors", label: "Subprocessors" },
    ],
  },
  {
    label: "Operations",
    items: [
      { href: "/trust", label: "Trust & security" },
      { href: "/accessibility", label: "Accessibility statement" },
    ],
  },
];

function LegalShell({ title, updated, intro, sections, children }) {
  React.useEffect(() => { installPageTransitions(); }, []);
  const path = currentPath();
  const totalDocs = LEGAL_NAV_GROUPS.reduce((n, g) => n + g.items.length, 0);
  const currentIndex = (() => {
    let i = 0;
    for (const g of LEGAL_NAV_GROUPS) {
      for (const it of g.items) {
        i++;
        if (it.href === path) return i;
      }
    }
    return null;
  })();
  return (
    <React.Fragment>
      <Header />
      <Ticker />
      <main id="main">
        <section className="legal">
          <div className="wrap">
            <div className="legal-grid">
              <aside className="legal-aside" aria-label="Documents of record">
                <div className="legal-aside-head">
                  <span className="legal-aside-eyebrow">§ Documents of record</span>
                  <span className="legal-aside-count">
                    {currentIndex ? `${String(currentIndex).padStart(2, "0")} / ${String(totalDocs).padStart(2, "0")}` : `${String(totalDocs).padStart(2, "0")} on file`}
                  </span>
                </div>
                {LEGAL_NAV_GROUPS.map((group, gi) => (
                  <div className="legal-aside-group" key={gi}>
                    <div className="legal-aside-group-label">{group.label}</div>
                    <div className="legal-aside-links">
                      {group.items.map((n) => {
                        const active = path === n.href;
                        return (
                          <a
                            key={n.href}
                            href={n.href}
                            className={active ? "active" : ""}
                            aria-current={active ? "page" : undefined}
                          >
                            <span className="legal-aside-marker" aria-hidden="true">{active ? "▸" : "·"}</span>
                            <span className="legal-aside-label">{n.label}</span>
                          </a>
                        );
                      })}
                    </div>
                  </div>
                ))}
                <div className="legal-aside-office">
                  <div className="legal-aside-group-label">Office of record</div>
                  <address className="legal-aside-addr">
                    <b>VALDEX LLC</b>
                    1309 Coffeen Ave, Ste 1200<br />
                    Sheridan, WY 82801<br />
                    <a href="mailto:legal@valdexai.com">legal@valdexai.com</a><br />
                    <span className="legal-aside-phone">(762) 760-1179</span>
                  </address>
                </div>
              </aside>
              <div className="legal-body">
                <div className="legal-meta">
                  <span><b>Document</b></span>
                  <span>{title}</span>
                  <span><b>Updated</b> {updated}</span>
                </div>
                <h1>{title}</h1>
                <div className="legal-callout">
                  <strong>Drafted in-house by VALDEX LLC.</strong>{" "}
                  This is the operative document and reflects how we actually handle the
                  thing it describes. It is not legal advice and does not create an
                  attorney–client relationship. If you intend to rely on it as a counterparty,
                  review it with your own counsel. We update the document when our practice
                  changes and note the change date at the top.
                </div>
                {intro}
                {sections.map((s, i) => (
                  <section key={i} id={s.id}>
                    <h2>{s.h}</h2>
                    {s.body}
                  </section>
                ))}
                {children}
                <p style={{ marginTop: 56, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-mute)", letterSpacing: "0.06em" }}>
                  Last updated {updated}. Questions about this document: <a href="mailto:legal@valdexai.com" style={{ color: "var(--violet)" }}>legal@valdexai.com</a>.
                </p>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </React.Fragment>
  );
}

Object.assign(window, {
  Header, Footer, Logo, Ticker, Masthead, OrbitStage, OrbitMark,
  FAQ, FaqHome, FinalCTA, Marquee, installPageTransitions, LegalShell,
  injectFaqSchema,
});
