/* 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;
const t = window.t || ((s) => s);

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, "unsubscribe": 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;
}

/* ---------------- Language selector ---------------- */
function LangSelect() {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  const locales = window.__LOCALES || [{ code: "en", label: "English", short: "EN" }];
  const cur = locales.find((l) => l.code === (window.__LOCALE || "en")) || locales[0];
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, []);
  return (
    <div className="langsel" ref={ref}>
      <button className="langsel__btn" onClick={() => setOpen((o) => !o)} aria-label="Choose language" aria-expanded={open}>
        <span className="cue-icon">language</span>
        <span className="langsel__code">{cur.short}</span>
        <span className="cue-icon langsel__chev">{open ? "expand_less" : "expand_more"}</span>
      </button>
      {open ?
      <div className="langsel__menu">
          {locales.map((l) =>
        <button
          key={l.code}
          className={`langsel__item ${l.code === cur.code ? "is-active" : ""}`}
          onClick={() => window.__setLocale(l.code)}>
              <span>{l.label}</span>
              {l.code === cur.code ? <span className="cue-icon">check</span> : null}
            </button>
        )}
        </div> : null}
    </div>);

}

/* ---------------- 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">{t("Why Cue")}</a>
          <a className="nav__link" href="#how">{t("How it works")}</a>
          <a className="nav__link" href="#platform">{t("Platform")}</a>
        </div>
        <div className="nav__cta">
          <LangSelect />
          <a href="https://calendar.app.google/NPs1XYcJBhn6wuKq9" target="_blank" rel="noopener noreferrer"><Button variant="tertiary" size="s">{t("Book a demo")}</Button></a>
          <a href="https://cue.qaecy.com/" target="_blank" rel="noopener noreferrer"><Button variant="primary" size="s" trailingIcon="arrow_forward">{t("Sign in")}</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>{t("Built for AEC & real estate")}</p>
          <h1 className="h1" data-reveal style={{ transitionDelay: ".05s" }}>
            {t(h.lead)} <span className="hl-blue">{t(h.emph)}</span>
          </h1>
          <p className="lead hero__sub" data-reveal style={{ transitionDelay: ".12s" }}>
            {t("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" onClick={() => window.dispatchEvent(new CustomEvent("cue:open-waitlist"))}>{t("Join the waiting list")}</Button>
            <Button variant="secondary" size="l" leadingIcon="play_circle" onClick={() => window.dispatchEvent(new CustomEvent("cue:open-animation"))}>{t("See how it works")}</Button>
          </div>
          <div className="hero__meta" data-reveal style={{ transitionDelay: ".24s" }}>
            <Icon name="lock" size={15} /> {t("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>{t("The problem")}</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>{t("The information is in there.")}<br />{t("But how to access?")}</h2>
          <p className="p" data-reveal style={{ marginTop: 26, transitionDelay: ".1s" }}>
            {t("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" }}>
            {t("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 }}>{t("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" }}>{t("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" }}>
            {window.__LOCALE && window.__LOCALE !== "en" ?
            t("Real estate needs real data.") :
            <React.Fragment><span className="hl-lime">Real</span> estate needs <span className="hl-lime">real</span> data.</React.Fragment>}
          </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>{t("The answer")}</b> · {t("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>{t("The solution")}</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>{t("Point Cue at the mess.")}<br /><span className="hl-lime">{t("It will take care of the rest.")}</span></h2>
          <p className="lead" data-reveal style={{ marginTop: 24, transitionDelay: ".1s" }}>
            {t("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">{t(u.title)}</h3>
              <p style={{ marginTop: 10 }}>{t(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" }}>{t("How Cue works")}</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>{t("One foundation. Many ways to use Cue.")}</h2>
          <p className="lead" data-reveal style={{ marginTop: 22, transitionDelay: ".1s", marginLeft: "auto", marginRight: "auto" }}>
            {t("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 or ChatGPT — 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>{t("The platform")}</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>{t("The Cue platform.")}</h2>
        </div>
        <div className="platlist" style={{ marginTop: 44 }}>
          {platform.map((p, i) => {
          const popEvent = p.name === "Tuner" ? "cue:open-tuner" : p.name === "Connect your AI" ? "cue:open-connect" : p.name === "Studio" ? "cue:open-studio" : null;
          return (
          <div key={i} className={`platrow ${p.core ? "platrow--core" : ""} ${popEvent ? "platrow--click" : ""}`} onClick={popEvent ? () => window.dispatchEvent(new CustomEvent(popEvent)) : undefined} 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">{t(p.name)}</h3>
                  {p.pill ? <span className={`pill-soft pill-soft--${p.pill.c}`}>{t(p.pill.t)}</span> : null}
                </div>
                <p className="p" style={{ fontFamily: "Poppins" }}>{t(p.body)}</p>
              </div>
              <div className="platrow__tag">{popEvent ? <span className="platrow__more">{t("View details")} <span className="cue-icon">arrow_forward</span></span> : t(p.tag)}</div>
            </div>
          );
        })}
        </div>
      </div>
    </section>);

}

/* ---------------- How to start ---------------- */
const fastPath = [
{ ico: "person_add", label: "Create an account" },
{ ico: "upload_file", label: "Drop in your files" },
{ ico: "bolt", label: "Connect your agent" },
{ ico: "rocket_launch", label: "Start working" }];

const startSteps = [
{ n: "01", phase: "Learn", title: "Workshop or training day",
  body: "Book a meeting and let us organise a workshop and training day. It's one day packed with the latest technology — and with learning how to make use of BIM and all your industry-specific documents using graphRAG and AI in your own business context.",
  link: { label: "Book a meeting", href: "https://calendar.app.google/NPs1XYcJBhn6wuKq9" } },
{ n: "02", phase: "Prove", title: "Production test or PoC",
  body: "With the results of the workshop, let us run a PoC (proof of concept) — or better, a production test. Based on a data dump, we prove you can gain valuable insights into your documents and data better than ever. It requires little time on your part, and you receive reliable statements for a potential analysis." },
{ n: "03", phase: "Scale", title: "Platform as a Service, or forward-deployed engineering",
  body: "If the production test was a success and you want to use the service, we build the appropriate connectors in the next step — if necessary — to ensure seamless integration. We run a simple pay per use pricing model." }];

function Start() {
  return (
    <section className="section section--white" id="start" data-screen-label="How to start">
      <div className="container">
        <div className="start-head">
          <p className="eyebrow" data-reveal>{t("Getting started")}</p>
          <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>{t("How to start?")}</h2>
          <p className="lead" data-reveal style={{ marginTop: 22, transitionDelay: ".1s" }}>
            {t("The easiest way? Create an account, drop in some files, connect your agent and start working. Or follow our guided three-step plan.")}
          </p>
        </div>

        <div className="startfast" data-reveal style={{ transitionDelay: ".12s" }}>
          <div className="startfast__head">
            <div className="startfast__kicker">
              <span className="startfast__kicker-ico"><Icon name="bolt" /></span>
              <span>
                <b>{t("The fast track")}</b>
                <span>{t("Set up in minutes — no help needed.")}</span>
              </span>
            </div>
          </div>
          <div className="startfast__flow">
            {fastPath.map((s, i) =>
            <React.Fragment key={i}>
                {i > 0 ? <div className="ffarrow"><Icon name="arrow_forward" /></div> : null}
                <div className="ffstep">
                  <span className="ffstep__ico"><Icon name={s.ico} /></span>
                  <span className="ffstep__label">{t(s.label)}</span>
                </div>
              </React.Fragment>
            )}
          </div>
        </div>

        <div className="startor" data-reveal><span>{t("Or follow our three-step plan")}</span></div>

        <div className="startsteps">
          {startSteps.map((s, i) =>
          <div key={i} className="startstep" data-reveal style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="startstep__top">
                <span className="startstep__n">{s.n}</span>
                <span className="startstep__phase">{t(s.phase)}</span>
              </div>
              <h3 className="h3">{t(s.title)}</h3>
              <p className="startstep__body">{t(s.body)}</p>
              {s.pills ?
              <div className="startstep__pills">
                  {s.pills.map((p, j) => <Chip key={j} size="s" icon="check">{p}</Chip>)}
                </div> : null}
              {s.link ?
              <a className="startstep__link" href={s.link.href} target="_blank" rel="noopener noreferrer">
                  {t(s.link.label)}<Icon name="arrow_forward" />
                </a> : null}
            </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">{t("The answer was always in your files.\nYou just paid for not finding it.")}</h2>
            <p className="lead cta__sub">{t("Your AI is smart. Now make it knowledgeable.")}</p>
            <div className="cta__actions">
              <Button variant="accent" size="l" leadingIcon="notifications_active" onClick={() => window.dispatchEvent(new CustomEvent("cue:open-waitlist"))}>{t("Join waiting list")}</Button>
              <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)" }}>{t("Book a demo")}</Button></a>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

/* ---------------- Footer ---------------- */
const footerCols = [
{ h: "Offering", 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" }, { label: "Join waiting list", event: "cue:open-waitlist" }] },
{ 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" }, { label: "Unsubscribe", href: "#/unsubscribe" }] }];

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">{t("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 className="footer__roots" aria-label="A European company — Switzerland and Denmark">
              <span className="footer__roots-flag" title="European Union">
                <svg viewBox="0 0 36 24" aria-hidden="true"><rect width="36" height="24" fill="#003399" /><g fill="#FFCC00"><circle cx="18" cy="5.2" r="0.9" /><circle cx="18" cy="18.8" r="0.9" /><circle cx="11.2" cy="12" r="0.9" /><circle cx="24.8" cy="12" r="0.9" /><circle cx="13.6" cy="6.6" r="0.9" /><circle cx="22.4" cy="6.6" r="0.9" /><circle cx="13.6" cy="17.4" r="0.9" /><circle cx="22.4" cy="17.4" r="0.9" /><circle cx="11.8" cy="9" r="0.9" /><circle cx="24.2" cy="9" r="0.9" /><circle cx="11.8" cy="15" r="0.9" /><circle cx="24.2" cy="15" r="0.9" /></g></svg>
              </span>
              <span className="footer__roots-flag" title="Switzerland">
                <svg viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" fill="#D52B1E" /><rect x="13" y="6.5" width="6" height="19" fill="#fff" /><rect x="6.5" y="13" width="19" height="6" fill="#fff" /></svg>
              </span>
              <span className="footer__roots-flag" title="Denmark">
                <svg viewBox="0 0 40 32" aria-hidden="true"><rect width="40" height="32" fill="#C8102E" /><rect x="12" y="0" width="5" height="32" fill="#fff" /><rect x="0" y="13.5" width="40" height="5" fill="#fff" /></svg>
              </span>
              <span className="footer__roots-text">{t("Proudly European · Swiss & Danish roots")}</span>
            </div>
          </div>
          {footerCols.map((c, i) =>
          <div key={i} className="footer__col">
              <h4>{t(c.h)}</h4>
              {c.links.map((l, j) => {
              const label = typeof l === "string" ? l : l.label;
              if (l && l.event) {
                return <a key={j} href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent(l.event)); }}>{t(label)}</a>;
              }
              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" } : {}}>{t(label)}</a>;
            })}
            </div>
          )}
        </div>
        <div className="footer__bottom">
          <span>{t("© 2026 Cue. All rights reserved.")}</span>
          <span>{t("Built for AEC & real estate")}</span>
        </div>
      </div>
    </footer>);

}

/* ---------------- Animation modal ----------------
   Opens the Cue Product Animation (a DC HTML in this project) in an overlay.
   The iframe src is only set while open, so the animation auto-plays fresh on
   each open and stops consuming resources when closed. */
function AnimationModal() {
  const [open, setOpen] = useState(false);
  const frameRef = useRef(null);
  useEffect(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener("cue:open-animation", onOpen);
    return () => window.removeEventListener("cue:open-animation", onOpen);
  }, []);
  useEffect(() => {
    if (!open) return;
    const anim = () => {
      const f = frameRef.current;
      try { return f && f.contentWindow && f.contentWindow.__cueAnim; } catch (e) { return null; }
    };
    const onKey = (e) => {
      if (e.key === "Escape") { setOpen(false); return; }
      const a = anim();
      if (!a) return;
      if (e.key === "p" || e.key === "P") { e.preventDefault(); a.replay(); }
      else if (e.key === " " || e.code === "Space") { e.preventDefault(); a.togglePause(); }
      else if (e.key === "ArrowRight") { e.preventDefault(); a.next(); }
      else if (e.key === "ArrowLeft") { e.preventDefault(); a.prev(); }
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    // give the iframe focus too, so its own key handler works if clicked into
    const f = frameRef.current;
    if (f) setTimeout(() => { try { f.focus(); } catch (e) {} }, 100);
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);
  if (!open) return null;
  return (
    <div className="animodal" onClick={() => setOpen(false)}>
      <div className="animodal__frame" onClick={(e) => e.stopPropagation()}>
        <button className="animodal__close" onClick={() => setOpen(false)} aria-label="Close">
          <span className="cue-icon">close</span>
        </button>
        <iframe ref={frameRef} className="animodal__iframe" src="Cue Product Animation.dc.html" title="Cue product animation" loading="eager"></iframe>
      </div>
    </div>);

}

/* ---------------- 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 /> :
      route === "unsubscribe" ?
      <window.Unsubscribe /> :
      LEGAL_ROUTES[route] ?
      <window.LegalPage route={route} /> :
      <main>
            <Hero headline={t.headline} visual={t.heroVisual} />
            <Problem />
            <Solution />
            <How />
            <Platform />
            <Start />
            <ClosingCTA />
          </main>}
      <Footer />

      <AnimationModal />
      <window.WaitlistModal />
      <window.TunerModal />
      <window.ConnectModal />
      <window.StudioModal />

      <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>);

}

(window.__i18nReady || Promise.resolve()).then(function () {
  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
});