/* global React */
// Cue landing page — sections. Uses the Cue design-system components
// (Button, Chip) from window.CueDesignSystem_89ac8b, plus the authentic
// <cue-logo> animated logomark web component from @qaecy/cue-ui.

const { Button, Chip } = window.CueDesignSystem_89ac8b;
const { useTweaks, TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakSelect, TweakSlider } = window;
const { useEffect, useRef, useState } = React;

function Icon({ name, size, style }) {
  return <span className="cue-icon" style={{ fontSize: size, ...style }}>{name}</span>;
}

// Custom Cue Agent icon — inline SVG so it inherits currentColor from the
// parent tile (blue in both the diagram hub area and the platform list).
function CueAgentIcon({ size = 26 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 300 300" fill="none"
    stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"
    strokeMiterlimit="40" strokeWidth="20" overflow="visible">
      {/* head */}
      <rect x="68" y="54" width="163" height="101" rx="42" ry="42"
      strokeDasharray="none" />
      {/* shoulder / body outline */}
      <path strokeLinecap="square"
      d="M 230.48 250.02 C 230.27 226.64 211.39 207.88 187.96 207.88
           L 109.77 207.88 C 86.42 207.88 67.58 226.51 67.25 249.78" />
      
      
      
      
      {/* neck */}
      <path strokeLinecap="butt" strokeLinejoin="miter"
      d="M 150.28 164.90 L 150.31 198.42" />
      {/* eyes */}
      <ellipse cx="120.56" cy="105.70" rx="9.96" ry="12.04"
      fill="currentColor" stroke="none" />
      <ellipse cx="180.21" cy="105.56" rx="9.96" ry="12.04"
      fill="currentColor" stroke="none" />
    </svg>);

}
window.CueAgentIcon = CueAgentIcon;

// Hero headlines — the live draft + the A/B alternates from the copy doc.
const HEADLINES = [
{ lead: "Turn your Document Library into", emph: "valuable Organizational Knowledge." },
{ lead: "Stop digging through documents.", emph: "Start asking questions." },
{ lead: "The bridge between", emph: "your documents and your AI." },
{ lead: "Turn document chaos", emph: "into decisions." }];


const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "logoActive": true,
  "headline": "Turn your Document Library into",
  "accent": "Blue",
  "heroVisual": "Knowledge graph",
  "dataFlow": true,
  "rhythm": 1
} /*EDITMODE-END*/;

/* ---------------- Reveal hook ----------------
   Re-scans on every route change: when the SPA returns to the home tree the
   freshly-remounted [data-reveal] elements need new scroll watchers, otherwise
   they stay at opacity:0 and the page looks empty. */
function useReveal(route) {
  useEffect(() => {
    requestAnimationFrame(() => {
      document.querySelectorAll("[data-reveal], [data-stagger]").forEach((el) => {
        if (el.dataset.revealWatched === "1") return;
        el.dataset.revealWatched = "1";
        window.__cueWatch(el, () => {
          el.classList.add("in");
          setTimeout(() => el.classList.add("rdone"), 1400);
        }, 0.92);
      });
    });
  }, [route]);
}

/* ---------------- Hash router ----------------
   Home renders at any hash that isn't a known sub-page (so anchor links like
   #problem / #how keep working). "#/responsible-use" renders the doc page. */
const DOC_ROUTES = { "responsible-use": true, "use-of-ai": true, "about": true, "terms-of-use": true, "aaas-agreement": true, "slo-agreement": true, "responsibility": true, "security": true, "privacy-policy": true, "legal-notice": true };
const LEGAL_ROUTES = { "terms-of-use": true, "aaas-agreement": true, "slo-agreement": true, "responsibility": true, "security": true, "privacy-policy": true, "legal-notice": true };
function useRoute() {
  const parse = () => {
    const h = location.hash.replace(/^#\/?/, "");
    return DOC_ROUTES[h] ? h : "home";
  };
  const [route, setRoute] = useState(parse);
  const prev = useRef(route);
  useEffect(() => {
    const on = () => {
      const next = parse();
      const wasDoc = DOC_ROUTES[prev.current];
      prev.current = next;
      setRoute(next);
      if (DOC_ROUTES[next]) {
        window.scrollTo(0, 0);
      } else if (wasDoc) {
        // returning home from a doc page — honour an anchor target if present
        const h = location.hash;
        const id = h && h.length > 1 && h !== "#top" ? h.slice(1).replace(/^\//, "") : null;
        requestAnimationFrame(() => {
          const el = id && document.getElementById(id);
          if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64 });
          else window.scrollTo(0, 0);
        });
      }
    };
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return route;
}

/* ---------------- Nav ---------------- */
function Nav() {
  const ref = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (ref.current) ref.current.classList.toggle("scrolled", window.scrollY > 12);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className="nav" ref={ref}>
      <div className="container nav__inner">
        <a href="#top" aria-label="Qaecy home"><img className="qaecy-logo ql-nav" src="assets/qaecy-logo.svg" alt="Qaecy" /></a>
        <div className="nav__links">
          <a className="nav__link" href="#problem">Why Cue</a>
          <a className="nav__link" href="#how">How it works</a>
          <a className="nav__link" href="#platform">Platform</a>
        </div>
        <div className="nav__cta">
          <a href="https://calendar.app.google/NPs1XYcJBhn6wuKq9" target="_blank" rel="noopener noreferrer"><Button variant="tertiary" size="s">Book a demo</Button></a>
          <a href="https://cue.qaecy.com/" target="_blank" rel="noopener noreferrer"><Button variant="primary" size="s" trailingIcon="arrow_forward">Get started</Button></a>
        </div>
      </div>
    </nav>);

}

/* ---------------- Hero ---------------- */
function AskCard() {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current) window.__cueWatch(ref.current, () => {
      ref.current.classList.add("run");
      setTimeout(() => ref.current && ref.current.classList.add("acdone"), 2600);
    }, 0.85);
  }, []);
  return (
    <div className="askcard" ref={ref}>
      <div style={{ background: "var(--cue-color-white)", border: "1px solid var(--cue-border-color)", borderRadius: "var(--cue-radius-card)", padding: "26px 26px 24px", boxShadow: "0 1px 1.5em rgba(0,0,0,0.12)" }}>
        <div className="askcard__head">
          <div className="askcard__dot"><Icon name="prompt_suggestion" /></div>
          <div className="askcard__title">Ask Cue</div>
          <div className="askcard__live"><span className="pip" /> Live</div>
        </div>
        <div className="askcard__q">
          <Icon name="search" />
          What's the fire rating on the Level 3 corridor walls?
        </div>
        <div className="askplan">
          <div className="askstep done"><span className="askstep__ring"><Icon name="check" size={11} /></span> Searched the Index across 1,284 documents</div>
          <div className="askstep done"><span className="askstep__ring"><Icon name="check" size={11} /></span> Connected the spec, the drawings and the latest RFI</div>
          <div className="askstep done"><span className="askstep__ring"><Icon name="check" size={11} /></span> Grounded the answer in 6 sources</div>
        </div>
        <div className="askanswer">
          The Level 3 corridor walls are rated for <b>60-minute fire resistance</b> (Type X, two layers each face), per the architectural spec
          <span className="cite">08 11 13</span> and confirmed against
          <span className="cite">RFI-241</span>.
        </div>
        <div className="asksources">
          <Chip size="s" icon="description">Spec 08 11 13 · p.12</Chip>
          <Chip size="s" icon="forum">RFI-241</Chip>
          <Chip size="s" icon="architecture">A-301 rev C</Chip>
        </div>
        <div className="askfoot">
          <Icon name="verified" size={15} style={{ color: "var(--cue-color-success)" }} />
          Grounded in <span className="num">6</span> sources · <span className="num">1,284</span> documents indexed
        </div>
      </div>
    </div>);

}

function Hero({ headline, visual }) {
  const h = HEADLINES.find((x) => x.lead === headline) || HEADLINES[0];
  return (
    <header className="hero section section--canvas" id="top" data-screen-label="Hero">
      <div className="hero__bg" />
      <div className="hero__grid-lines" />
      <div className="container hero__inner">
        <div className="hero__copy">
          <p className="eyebrow" data-reveal>Built for AEC & real estate</p>
          <h1 className="h1" data-reveal style={{ transitionDelay: ".05s" }}>
            {h.lead} <span className="hl-blue">{h.emph}</span>
          </h1>
          <p className="lead hero__sub" data-reveal style={{ transitionDelay: ".12s" }}>
            Cue analyses your project documents, links the information and makes it accessible to AI tools, including those already used by your team.
          </p>
          <div className="hero__actions" data-reveal style={{ transitionDelay: ".18s" }}>
            <Button variant="primary" size="l" trailingIcon="arrow_forward">Get started</Button>
            <Button variant="secondary" size="l" leadingIcon="play_circle">See how it works</Button>
          </div>
          <div className="hero__meta" data-reveal style={{ transitionDelay: ".24s" }}>
            <Icon name="lock" size={15} /> No tagging. No folders. No restructuring how you work.
          </div>
        </div>
        <div data-reveal style={{ transitionDelay: ".15s" }}>
          {visual === "Ask Cue card" ?
          <AskCard /> :
          <div className="hero-graph"><window.CueGraph theme="light" density="balanced" /></div>}
        </div>
      </div>
    </header>);

}

/* ---------------- Problem ---------------- */
const scatterTiles = [
{ ico: "architecture", label: "Drawing set", meta: "rev C", left: "6%", top: "1%", rot: "rotate(-9deg)" },
{ ico: "gavel", label: "Contract", meta: "clause 14.2", left: "40%", top: "-2%", rot: "rotate(7deg)" },
{ ico: "photo_library", label: "Photo log", meta: "site", left: "52%", top: "8%", rot: "rotate(-6deg)" },
{ ico: "forum", label: "RFI-241", meta: "open", left: "20%", top: "11%", rot: "rotate(-3deg)" },
{ ico: "description", label: "Spec 08 11 13", meta: "p.12", left: "44%", top: "18%", rot: "rotate(10deg)" },
{ ico: "fact_check", label: "Inspection", meta: "p.180", left: "2%", top: "20%", rot: "rotate(5deg)" },
{ ico: "request_quote", label: "Cost plan", meta: "Q3", left: "30%", top: "26%", rot: "rotate(-7deg)" },
{ ico: "summarize", label: "Submittal", meta: "pending", left: "50%", top: "30%", rot: "rotate(6deg)" },
{ ico: "home_work", label: "Lease pack", meta: "Unit B", left: "10%", top: "33%", rot: "rotate(-11deg)" },
{ ico: "map", label: "Site survey", meta: "2019", left: "38%", top: "40%", rot: "rotate(8deg)" },
{ ico: "verified", label: "Permit", meta: "approved", left: "22%", top: "47%", rot: "rotate(-4deg)" },
{ ico: "landscape", label: "Geotech", meta: "borehole 7", left: "48%", top: "50%", rot: "rotate(9deg)" },
{ ico: "menu_book", label: "O&M manual", meta: "vol 3", left: "0%", top: "53%", rot: "rotate(5deg)" },
{ ico: "published_with_changes", label: "Change order", meta: "#28", left: "34%", top: "60%", rot: "rotate(-8deg)" },
{ ico: "checklist", label: "Snag list", meta: "Level 3", left: "16%", top: "68%", rot: "rotate(7deg)" },
{ ico: "real_estate_agent", label: "Title deed", meta: "plot A", left: "46%", top: "71%", rot: "rotate(-10deg)" },
{ ico: "local_fire_department", label: "Fire strategy", meta: "rev B", left: "4%", top: "79%", rot: "rotate(4deg)" },
{ ico: "engineering", label: "MEP layout", meta: "Level 2", left: "30%", top: "84%", rot: "rotate(-5deg)" },
{ ico: "trending_up", label: "Valuation", meta: "FY24", left: "50%", top: "88%", rot: "rotate(8deg)" },
{ ico: "picture_as_pdf", label: "Report", meta: "2 yrs ago", left: "20%", top: "93%", rot: "rotate(-6deg)" }];

function Problem() {
  return (
    <section className="section section--white" id="problem" data-screen-label="The problem">
      <div className="container split">
        <div>
          <p className="eyebrow" data-reveal>The problem</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>The information is in there.<br />But how to access?</h2>
          <p className="p" data-reveal style={{ marginTop: 26, transitionDelay: ".1s" }}>
            Every project generates a huge amount of files, such as drawings, specifications, contracts, leases, requests for information (RFIs), submittals, inspection reports and cost plans. Across formats. Across folders. Across teams and tools.
          </p>
          <p className="p" data-reveal style={{ marginTop: 18, transitionDelay: ".15s" }}>
            The answer you need could be a clause in a contract, a figure in a two-year-old report or a detail buried on page 180 of a PDF. Finding it takes time you don't have, and if you miss it, the consequences can be costly.
          </p>
          <p className="p" data-reveal style={{ marginTop: 18, transitionDelay: ".2s", color: "var(--cue-color-darkgray)", fontWeight: 500 }}>Meanwhile, you have capable AI assistants at your fingertips every day. But they can't see any of this.
          </p>
          <p className="p" data-reveal style={{ marginTop: 18, transitionDelay: ".25s" }}>Point one at a folder and it works. Point it at hundreds of thousands of files and it falls apart: matching text, returning fragments, missing the picture. That's the demo that never ships.
You need highest quality but that does not require the most expensive mode, feeding a index will save input tokens too.
</p>
          <p className="problem__punch" data-reveal style={{ transitionDelay: ".3s" }}>
            <span className="hl-lime">Real</span> estate needs <span className="hl-lime">real</span> data.
          </p>
        </div>
        <div className="scatter" data-stagger>
          {scatterTiles.map((t, i) =>
          <div key={i} className="scatter__tile" style={{ left: t.left, top: t.top, "--rot": t.rot, transitionDelay: `${i * 0.07}s` }}>
              <span className="tile-ico"><Icon name={t.ico} /></span>
              <span><b>{t.label}</b> · {t.meta}</span>
            </div>
          )}
          <div className="scatter__tile scatter__buried" style={{ "--rot": "translate(-50%,-50%)" }}>
            <span className="tile-ico"><Icon name="search" /></span>
            <span><b>The answer</b> · buried</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- Solution ---------------- */
const uses = [
{ ico: "question_answer", title: "Ask a question", body: "Get an answer grounded in your real documents — with the sources cited, every time." },
{ ico: "monitoring", title: "Build a live dashboard", body: "Turn the connected Index into views that update as your project does." },
{ ico: "bolt", title: "Run a week's analysis in minutes", body: "Work that used to take days of digging now runs across everything at once." }];

function Solution() {
  return (
    <section className="section section--solution" data-screen-label="The solution">
      <div className="container">
        <div style={{ maxWidth: 760 }}>
          <p className="eyebrow eyebrow--accent" data-reveal>The solution</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>Point Cue at the mess.<br /><span className="hl-lime">It will take care of the rest.</span></h2>
          <p className="lead" data-reveal style={{ marginTop: 24, transitionDelay: ".1s" }}>
            It reads through everything automatically, extracting what matters and connecting it into one knowledge graph that understands how your project's data fits together. No tagging required. No manual organising. It then opens up that knowledge to the AI agents you already use, as well as to the apps you build on top of them.
          </p>
        </div>
        <div className="usegrid">
          {uses.map((u, i) =>
          <div key={i} className="usecard" data-reveal style={{ transitionDelay: `${0.1 + i * 0.08}s` }}>
              <div className="usecard__ico"><Icon name={u.ico} /></div>
              <h3 className="h3">{u.title}</h3>
              <p style={{ marginTop: 10 }}>{u.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- How it works (diagram) ---------------- */
function How() {
  return (
    <section className="section section--white" id="how" data-screen-label="How Cue works" style={{ background: 'linear-gradient(175deg, rgba(110,245,255,0.07) 0%, rgba(40,132,255,0.05) 40%, var(--cue-color-white) 70%)' }}>
      <div className="container">
        <div style={{ maxWidth: 740, margin: "0 auto", textAlign: "center" }}>
          <p className="eyebrow" data-reveal style={{ justifyContent: "center" }}>How Cue works</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>One foundation. Many ways to use Cue.</h2>
          <p className="lead" data-reveal style={{ marginTop: 22, transitionDelay: ".1s", marginLeft: "auto", marginRight: "auto" }}>
            Everything in Cue starts with — and connects back to — the Index: the missing link between your document archive and the world of AI agents.
          </p>
        </div>
        <div style={{ marginTop: 56 }} data-reveal>
          <window.CueDiagram />
        </div>
      </div>
    </section>);

}

/* ---------------- Platform ---------------- */
const platform = [
{ core: true, ico: "hub", name: "Index", tag: "The core of knowledge", pill: { c: "blue", t: "Core" },
  body: "Point Cue at your documents and it builds the connected foundation underneath everything — all the information your projects hold, extracted and linked automatically, ready to answer any question. Everything else plugs into it." },
{ ico: "tune", name: "Tuner", tag: "Shape it, tune it", pill: { c: "soon", t: "Optional" },
  body: "Teach the Index your business. Define the entities, relationships and rules that matter to your firm — so Cue understands a \"submittal\" or a \"lease abstract\" exactly the way you do." },
{ ico: "bolt", name: "Connect your AI", tag: "Use it where you want to",
  body: "Plug the Index straight into Claude, ChatGPT or Gemini — the fastest way to put your own documents to work, in the tools your team already uses every day." },
{ ico: "dashboard_customize", name: "Studio", tag: "Unlock endless possibilities", pill: { c: "soon", t: "Optional" },
  body: "Use ready-made apps today, like document search — or build your own use-case-specific tools on top of the Index. New off-the-shelf apps added every month." },
{ ico: "neurology", name: "Agent", tag: "Enter domain intelligence", pill: { c: "soon", t: "Optional" },
  body: "A specialist AI agent built to get the absolute most out of your Index, with deep AEC and real-estate expertise built in. It knows the vertical better than any general-purpose assistant." }];

function Platform() {
  return (
    <section className="section section--canvas" id="platform" data-screen-label="The platform">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <p className="eyebrow" data-reveal>The platform</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>The Cue platform.</h2>
        </div>
        <div className="platlist" style={{ marginTop: 44 }}>
          {platform.map((p, i) =>
          <div key={i} className={`platrow ${p.core ? "platrow--core" : ""}`} data-reveal style={{ transitionDelay: `${i * 0.06}s` }}>
              <div className="platrow__ico">
                {p.name === "Agent" ?
              <CueAgentIcon size={28} /> :
              <Icon name={p.ico} size={28} />}
              </div>
              <div>
                <div className="platrow__name">
                  <h3 className="h3">{p.name}</h3>
                  {p.pill ? <span className={`pill-soft pill-soft--${p.pill.c}`}>{p.pill.t}</span> : null}
                </div>
                <p className="p" style={{ fontFamily: "Poppins" }}>{p.body}</p>
              </div>
              <div className="platrow__tag">{p.tag}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Ecosystem / testimonials ---------------- */
const ecosystem = [
  {
    logo: "assets/ecosystem/ebp.webp",
    name: "EBP",
    quote: "Qaecy mixt kühne Ideen mit High-End-KI und katapultiert Datenmanagement in eine andere Liga … in die Champions League.",
    author: "C. Maier",
    lang: "de",
  },
  {
    logo: "assets/ecosystem/sieber-partners.webp",
    name: "Sieber & Partners",
    quote: "QAECY sind herausragende Experten im Bereich der digitalen Transformation der Bau- und Immobilienbranche mit Schwerpunkt Digital Twin. Wir sind sehr stolz, mit ihnen zusammen die Grenzen der technologischen Graphen- und KI-Möglichkeiten auszureizen und Systemlösungen für Kunden zu entwickeln.",
    author: "L. Caracciolo",
    lang: "de",
  },
  {
    logo: "assets/ecosystem/amberg-group.webp",
    name: "Amberg Group",
    quote: "I just call them CRAZY — and that describes pretty much what they do.",
    author: "F. Amberg",
    lang: "en",
  },
];

function Ecosystem() {
  return (
    <section className="section section--white" id="ecosystem" data-screen-label="Ecosystem">
      <div className="container">
        <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
          <p className="eyebrow" data-reveal style={{ justifyContent: "center" }}>Our ecosystem</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>The ecosystem we love working with.</h2>
        </div>
        <div className="eco-grid">
          {ecosystem.map((e, i) => (
            <figure key={i} className="eco-card" data-reveal style={{ transitionDelay: `${0.08 + i * 0.08}s` }}>
              <div className="eco-card__logo">
                <img src={e.logo} alt={e.name} loading="lazy" />
              </div>
              <blockquote className="eco-card__quote" lang={e.lang}>{e.quote}</blockquote>
              <figcaption className="eco-card__author">
                <span className="eco-card__name">{e.author}</span>
                <span className="eco-card__org">{e.name}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>);

}
function ClosingCTA() {
  return (
    <section className="section section--white" data-screen-label="Closing CTA">
      <div className="container">
        <div className="cta" data-reveal>
          <div className="cta__glow" />
          <div className="cta__inner">
            <h2 className="h2">Stop searching. Start doing.</h2>
            <p className="lead cta__sub">Your AI is smart. Now make it knowledgeable.</p>
            <div className="cta__actions">
              <a href="https://cue.qaecy.com/auth/sign-in" target="_blank" rel="noopener noreferrer"><Button variant="accent" size="l" trailingIcon="arrow_forward">Get started</Button></a>
              <a href="https://calendar.app.google/NPs1XYcJBhn6wuKq9" target="_blank" rel="noopener noreferrer"><Button variant="tertiary" size="l" leadingIcon="calendar_month" style={{ color: "var(--cue-color-white)" }}>Book a demo</Button></a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- Footer ---------------- */
const footerCols = [
{ h: "Products", links: [{ label: "Cue AI Agent", href: "#how" }, { label: "Cue Index", href: "#how" }, { label: "Forward deployed engineering", href: "#how" }] },
{ h: "Developers", links: [{ label: "QAECY Schemas", href: "https://github.com/qaecy/schemas" }, { label: "API Reference", href: "https://github.com/qaecy/api-docs" }, { label: "Responsible Use", href: "#/responsible-use" }, { label: "Use of AI", href: "#/use-of-ai" }] },
{ h: "Company", links: [{ label: "About", href: "#/about" }, { label: "Blog", href: "https://medium.com/qaecy" }] },
{ h: "Privacy", links: [{ label: "Terms of Use", href: "#/terms-of-use" }, { label: "AaaS Agreement", href: "#/aaas-agreement" }, { label: "SLO Agreement", href: "#/slo-agreement" }, { label: "Responsibility", href: "#/responsibility" }, { label: "Security", href: "#/security" }, { label: "Privacy Policy", href: "#/privacy-policy" }, { label: "Legal Notice", href: "#/legal-notice" }] }];

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            <img className="qaecy-logo ql-footer" src="assets/qaecy-logo.svg" alt="Qaecy" />
            <p className="footer__tag">The intelligent data layer for AEC and real estate.</p>
            <div className="footer__contact">
              <div className="footer__contact-row">
                <span className="cue-icon">location_on</span>
                <span>QAECY AG<br />Trockenloostrasse 21<br />8105 Regensdorf, Switzerland</span>
              </div>
              <div className="footer__contact-row">
                <span className="cue-icon">phone</span>
                <a href="tel:+41443332211">+41 44 333 22 11</a>
              </div>
              <div className="footer__contact-row">
                <span className="cue-icon">mail</span>
                <a href="mailto:mail@qaecy.com">mail@qaecy.com</a>
              </div>
            </div>
          </div>
          {footerCols.map((c, i) =>
          <div key={i} className="footer__col">
              <h4>{c.h}</h4>
              {c.links.map((l, j) => {
                const label = typeof l === "string" ? l : l.label;
                const href = typeof l === "string" ? "#top" : l.href;
                const ext = href.startsWith("http");
                return <a key={j} href={href} {...(ext ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{label}</a>;
              })}
            </div>
          )}
        </div>
        <div className="footer__bottom">
          <span>© 2026 Cue. All rights reserved.</span>
          <span>Built for AEC & real estate</span>
        </div>
      </div>
    </footer>);

}

/* ---------------- App ---------------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useRoute();
  useReveal(route);

  // Logomark animation — toggle the `active` attribute on each <cue-logo>.
  // The nav/footer marks activate immediately; the diagram hub mark is left
  // to the Diagram component, which fires its draw when scrolled into view.
  useEffect(() => {
    document.documentElement.dataset.cueLogo = t.logoActive ? "on" : "off";
    document.querySelectorAll("cue-logo").forEach((el) => {
      if (!t.logoActive) {el.removeAttribute("active");return;}
      // hub waits until its diagram is in view (handled in diagram.jsx)
      if (el.classList.contains("cl-hub") && !document.querySelector(".dg-stage.run")) return;
      el.setAttribute("active", "true");
    });
  }, [t.logoActive]);

  // Highlight accent (hero emphasis): Blue (default) ↔ Lime wash.
  useEffect(() => {
    document.body.classList.toggle("accent-lime", t.accent === "Lime");
  }, [t.accent]);

  // Diagram data-flow packets on/off.
  useEffect(() => {
    document.body.classList.toggle("no-dataflow", !t.dataFlow);
  }, [t.dataFlow]);

  // Section rhythm (vertical spacing scale).
  useEffect(() => {
    document.documentElement.style.setProperty("--rhythm", t.rhythm);
  }, [t.rhythm]);

  return (
    <React.Fragment>
      <Nav />
      {route === "responsible-use"
        ? <window.ResponsibleUse />
        : route === "use-of-ai"
        ? <window.UseOfAI />
        : route === "about"
        ? <window.About />
        : LEGAL_ROUTES[route]
        ? <window.LegalPage route={route} />
        : <main>
            <Hero headline={t.headline} visual={t.heroVisual} />
            <Problem />
            <Solution />
            <How />
            <Platform />
            <ClosingCTA />
          </main>}
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakToggle
          label="Logomark animation"
          value={t.logoActive}
          onChange={(v) => setTweak("logoActive", v)} />
        
        <TweakSection label="Content" />
        <TweakSelect
          label="Hero headline"
          value={t.headline}
          options={HEADLINES.map((h) => h.lead)}
          onChange={(v) => setTweak("headline", v)} />
        
        <TweakRadio
          label="Highlight accent"
          value={t.accent}
          options={["Blue", "Lime"]}
          onChange={(v) => setTweak("accent", v)} />
        
        <TweakRadio
          label="Hero visual"
          value={t.heroVisual}
          options={["Knowledge graph", "Ask Cue card"]}
          onChange={(v) => setTweak("heroVisual", v)} />
        
        <TweakSection label="Layout & motion" />
        <TweakSlider
          label="Section rhythm"
          value={t.rhythm}
          min={0.8}
          max={1.35}
          step={0.05}
          onChange={(v) => setTweak("rhythm", v)} />
        
        <TweakToggle
          label="Diagram data flow"
          value={t.dataFlow}
          onChange={(v) => setTweak("dataFlow", v)} />
        
      </TweaksPanel>
    </React.Fragment>);

}

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