/* 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;

// Tints the three artifact nouns in the hero headline, per locale.
const LEAD_TINTS = [
  [/(real estate & construction documents)/i, "#03347A"],
  [/(real estate|ejendoms?|immobilien|immobiliers?|immobiliari|inmobiliarios?)/i, "#03347A"],
  [/(construction|constructión|construcción|costruzione|bygge|bau)/i, "#03347A"],
  [/(documents?|dokumente?t?|documento)/i, "#03347A"],
  [/(drawings?|tegning(en)?|zeichnung|plans?|disegno|plano)/i, "#1CC8CC"],
  [/(models?|modell?|modèles?|modello|modelo)/i, "#CFE600"]
];
function colorLead(str) {
  if (typeof str !== "string") return str;
  const rx = new RegExp("(" + LEAD_TINTS.map((p) => p[0].source).join("|") + ")", "gi");
  const out = []; let last = 0, m;
  while ((m = rx.exec(str))) {
    if (m.index > last) out.push(str.slice(last, m.index));
    const hit = LEAD_TINTS.find((p) => new RegExp("^(?:" + p[0].source + ")$", "i").test(m[0]));
    out.push(<span key={m.index} style={{ color: hit ? hit[1] : "inherit" }}>{m[0]}</span>);
    last = m.index + m[0].length;
  }
  if (last < str.length) out.push(str.slice(last));
  return out;
}
// Hero headlines — the live draft + the A/B alternates from the copy doc.
const HEADLINES = [
{ lead: "Make Your Real Estate & Construction Documents", emph: "Talk to Your AI." },
{ 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": "Make Your Real Estate & Construction Documents",
  "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 COURSE_ON = !!(window.CUE_FEATURES && window.CUE_FEATURES.course);
const DOC_ROUTES = { "responsible-use": true, "use-of-ai": true, "about": true, "course": COURSE_ON, "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>
          {COURSE_ON ? <a className="nav__link" href="#/course">{t("Course")}</a> : null}
        </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>
            {window.__LOCALE && window.__LOCALE !== "en" ?
            t("Built for AEC & real estate") :
            <React.Fragment>Built for <span className="eyebrow__hl">AEC</span> &amp; <span className="eyebrow__hl">real estate</span></React.Fragment>}
          </p>
          <h1 className="h1" data-reveal style={{ transitionDelay: ".05s" }}>
            {colorLead(t(h.lead))} <span className="hl-blue">{t(h.emph)}</span>
          </h1>
          <p className="lead hero__sub" data-reveal style={{ transitionDelay: ".12s" }}>
            {t("Connect your scattered contracts, plans, and reports directly to the AI tools you already use. Surface hidden portfolio risks and indexation dates in seconds.")}
          </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 ---------------- */
/* A collapsing mountain of hand-drawn AEC artifacts — CAD sheets with title
   blocks (plans, sections, structural grids, rebar mesh, wiring schematics),
   plus sketched building, bridge, tower and site-map scenes. The whole stack
   reacts to the pointer and crushes down toward you when touched. */
const svgP = { fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" };
const svgT = { ...svgP, strokeWidth: 0.85 };
/* --- inner drawing geometries, drawn in a 132×92 box --- */
function PlanGeo() {
  return (
    <React.Fragment>
      <path d="M14 18 H118 V74 H14 Z" {...svgP} />
      <path d="M14 46 H70 M70 18 V74 M70 44 H118 M40 46 V74 M92 44 V74" {...svgT} />
      <path d="M22 46 V32 H40 M50 46 V60 H70" strokeDasharray="4 4" {...svgT} />
      <path d="M118 30 h8 M118 58 h8" {...svgT} />
    </React.Fragment>);
}
function SectionGeo() {
  return (
    <React.Fragment>
      <rect x="16" y="16" width="100" height="60" {...svgP} />
      <path d="M16 36 H116 M16 56 H116" {...svgT} />
      <path d="M16 16 L26 26 M30 16 L40 26 M44 16 L54 26 M58 16 L68 26 M72 16 L82 26 M86 16 L96 26 M100 16 L110 26" {...svgT} />
      <path d="M46 36 V76 M78 56 V76" {...svgT} />
    </React.Fragment>);
}
function StructGeo() {
  /* node grid on columns with footings — like the sketch */
  const cols = [26, 52, 78, 104];
  const rows = [30, 56];
  return (
    <React.Fragment>
      {rows.map((y) => <path key={"b" + y} d={`M18 ${y} H112`} {...svgT} />)}
      {cols.map((x) => <path key={"c" + x} d={`M${x} 30 V82`} {...svgT} />)}
      {cols.map((x) => rows.map((y) =>
      <React.Fragment key={x + "-" + y}>
          <circle cx={x} cy={y} r="7" {...svgP} />
          <path d={`M${x - 7} ${y} h14 M${x} ${y - 7} v14`} {...svgT} />
        </React.Fragment>))}
      {cols.map((x) => <path key={"f" + x} d={`M${x - 6} 78 v6 h12 v-6`} {...svgP} />)}
    </React.Fragment>);
}
function RebarGeo() {
  /* irregular reinforcement mesh */
  return (
    <React.Fragment>
      {[22, 38, 54, 70].map((y, i) => <path key={"h" + y} d={`M14 ${y + (i % 2 ? 2 : -1)} H120`} {...svgP} />)}
      {[26, 44, 62, 80, 98, 114].map((x, i) => <path key={"v" + x} d={`M${x} 14 V${78 + (i % 2 ? 2 : -2)}`} {...svgP} />)}
    </React.Fragment>);
}
function MepGeo() {
  /* wiring / control schematic */
  return (
    <React.Fragment>
      <rect x="16" y="20" width="26" height="18" {...svgT} />
      <rect x="76" y="18" width="22" height="16" {...svgT} />
      <rect x="52" y="52" width="20" height="18" {...svgT} />
      <path d="M42 29 H62 V52 M72 61 H100 V34 M28 38 V64 H52 M98 26 H116" {...svgT} />
      <path d="M16 46 H36 M16 52 H30" strokeDasharray="3 3" {...svgT} />
      {[[42, 29], [76, 26], [52, 52], [100, 61]].map(([x, y], i) => <circle key={i} cx={x} cy={y} r="2.6" {...svgP} />)}
    </React.Fragment>);
}
function SiteGeo() {
  /* cadastral parcels + road */
  return (
    <React.Fragment>
      <path d="M10 70 C40 58 60 66 92 50 S120 40 124 34" {...svgP} />
      <path d="M14 78 C44 66 64 74 96 58 S124 48 128 42" {...svgT} />
      <path d="M34 20 h30 v22 h-30 Z M70 16 h24 v20 h-24 Z M44 48 h26 v18 h-26 Z M84 44 h22 v16 h-22 Z" {...svgT} />
      <rect x="40" y="24" width="18" height="12" fill="currentColor" opacity="0.14" stroke="none" />
      <rect x="76" y="20" width="12" height="12" fill="currentColor" opacity="0.14" stroke="none" />
      <path d="M18 30 h12 v40 M112 22 v46" strokeDasharray="4 3" {...svgT} />
    </React.Fragment>);
}
/* --- sketched scenes (full-bleed, never framed) --- */
function BuildingArt() {
  /* stepped massing, two blocks */
  return (
    <svg viewBox="0 0 132 92" className="sheet__svg" preserveAspectRatio="none">
      <path d="M30 40 H70 V80 H30 Z" {...svgP} />
      <path d="M30 40 L44 28 L84 28 L70 40" {...svgP} />
      <path d="M70 40 L84 28 L84 66 L70 80" {...svgP} />
      {[46, 54, 62].map((y) => [36, 46, 56].map((x) =>
      <circle key={x + "-" + y} cx={x} cy={y} r="1.6" {...svgT} />))}
      <path d="M74 56 H108 V82 H74 Z" {...svgP} />
      <path d="M74 56 L84 48 L118 48 L108 56" {...svgP} />
      <path d="M108 56 L118 48 L118 72 L108 82" {...svgP} />
      {[64, 72].map((y) => [80, 90, 100].map((x) =>
      <circle key={"b" + x + "-" + y} cx={x} cy={y} r="1.5" {...svgT} />))}
    </svg>);
}
function BridgeArt() {
  return (
    <svg viewBox="0 0 132 92" className="sheet__svg" preserveAspectRatio="none">
      <path d="M6 58 H126" {...svgP} />
      <path d="M6 63 H126" {...svgT} />
      <path d="M42 58 V16 M90 58 V16" {...svgP} />
      {[14, 24, 34].map((d) => <path key={"a" + d} d={`M42 19 L${42 - d} 58 M42 19 L${42 + d} 58`} {...svgT} />)}
      {[14, 24, 34].map((d) => <path key={"b" + d} d={`M90 19 L${90 - d} 58 M90 19 L${90 + d} 58`} {...svgT} />)}
      <path d="M42 63 V82 M90 63 V82 M20 63 V78 M112 63 V78" {...svgP} />
    </svg>);
}
function TowersArt() {
  /* twin cylindrical high-rise with floor bands */
  return (
    <svg viewBox="0 0 132 92" className="sheet__svg" preserveAspectRatio="none">
      <path d="M34 24 V80 M70 24 V80" {...svgP} />
      <path d="M34 24 C34 16 70 16 70 24" {...svgP} />
      <path d="M34 80 C34 86 70 86 70 80" {...svgT} />
      {[34, 42, 50, 58, 66, 74].map((y) => <path key={"l" + y} d={`M34 ${y} C40 ${y + 3} 64 ${y + 3} 70 ${y}`} {...svgT} />)}
      <path d="M78 30 V82 M102 30 V82" {...svgP} />
      <path d="M78 30 C78 24 102 24 102 30" {...svgP} />
      {[38, 46, 54, 62, 70, 78].map((y) => <path key={"r" + y} d={`M78 ${y} H102`} {...svgT} />)}
      {[36, 48, 60, 72].map((y) => <circle key={"d" + y} cx={106} cy={y} r="1.4" {...svgT} />)}
    </svg>);
}
function DocArt() {
  return (
    <svg viewBox="0 0 92 120" className="sheet__svg" preserveAspectRatio="none">
      <rect x="14" y="14" width="34" height="12" {...svgP} />
      {[0, 1, 2, 3, 4, 5, 6].map((i) =>
      <path key={i} d={`M14 ${42 + i * 11} h${i % 3 === 2 ? 42 : 64}`} {...svgP} />)}
    </svg>);
}
/* --- CAD sheet: border + right title margin + bottom title block --- */
function CadSheet({ Geo }) {
  return (
    <svg viewBox="0 0 150 100" className="sheet__svg" preserveAspectRatio="none">
      <rect x="6" y="6" width="138" height="88" {...svgP} />
      <g transform="translate(9 8) scale(0.92)"><Geo /></g>
      {/* title block, bottom-right */}
      <rect className="tb-mask" x="110" y="74" width="34" height="20" {...svgP} />
      <path d="M110 81 H144 M110 88 H144 M127 74 V94" {...svgT} />
      <rect x="110" y="74" width="34" height="7" className="tb-head" stroke="none" />
    </svg>);
}
const geoMap = { plan: PlanGeo, section: SectionGeo, struct: StructGeo, rebar: RebarGeo, mep: MepGeo, site: SiteGeo };
function SheetArt({ kind, framed }) {
  if (kind === "building") return <BuildingArt />;
  if (kind === "bridge") return <BridgeArt />;
  if (kind === "towers") return <TowersArt />;
  if (kind === "doc") return <DocArt />;
  const Geo = geoMap[kind] || PlanGeo;
  if (framed) return <CadSheet Geo={Geo} />;
  return (
    <svg viewBox="0 0 132 92" className="sheet__svg" preserveAspectRatio="none">
      <Geo />
    </svg>);
}
/* --- Document avalanche: a mound of AEC documents builds up; the cursor stirs
   them like wind, tiles flutter in 3D and settle back. Ported from the
   Document Avalanche design. --- */
const AV_LAYERS = [18, 15, 13, 11, 9, 7, 5, 3, 2];
const AV_WIND = 60 / 60;
const AV_REACH = 200;
const AV_INTERVAL = 400 - (6 - 1) / 9 * 330;
const AV_POOL = ["report","report","report","excel","excel","excel","plan","plan","plan","minutes","minutes","minutes","gis","bridge","massing","wiring","towers","columns","rebar"];
function avTileHTML(type) {
  const ink = 'stroke="#131f31" stroke-linecap="butt" stroke-linejoin="miter" fill="none"';
  const thin = 'stroke="#8394b0" fill="none" stroke-linecap="butt"';
  const B = {
    massing: `<g ${ink} stroke-width="1.4"><path d="M20 32 L46 24 L64 31 L38 39 Z"/><path d="M20 32 L20 52 L38 59 L38 39"/><path d="M38 39 L38 59 L64 51 L64 31"/><path d="M48 46 L70 40 L88 46 L66 52 Z"/><path d="M48 46 L48 60 L66 66 L66 52"/><path d="M66 52 L66 66 L88 60 L88 46"/></g><g ${thin} stroke-width="1"><path d="M24 44 L30 42 M24 48 L30 46 M24 52 L30 50"/></g>`,
    bridge: `<g ${ink} stroke-width="1.4"><path d="M10 50 L96 50"/><path d="M35 50 L34 16 M71 50 L72 16"/><path d="M30 50 L30 66 M76 50 L76 66"/><path d="M8 66 L98 66"/></g><g stroke="#2859e1" stroke-width="1" fill="none" stroke-linecap="butt"><path d="M34 18 L18 49 M34 18 L26 49 M34 18 L34 49 M34 18 L44 49 M34 18 L52 49"/><path d="M72 18 L54 49 M72 18 L64 49 M72 18 L72 49 M72 18 L82 49 M72 18 L92 49"/></g>`,
    towers: `<g ${ink} stroke-width="1.4"><path d="M22 24 L22 62 L44 62 L44 24 Z"/><path d="M56 18 L56 62 L78 62 L78 18 Z"/></g><g ${thin} stroke-width="1"><path d="M22 32 H44 M22 40 H44 M22 48 H44 M22 56 H44"/><path d="M28 24 V62 M36 24 V62"/><path d="M56 26 H78 M56 34 H78 M56 42 H78 M56 50 H78 M56 58 H78"/><path d="M63 18 V62 M71 18 V62"/></g>`,
    columns: `<g ${ink} stroke-width="1.4"><path d="M16 24 H76 M16 44 H76"/><path d="M24 18 V62 M40 18 V62 M56 18 V62 M72 18 V62"/></g><g ${thin} stroke-width="1"><path d="M86 14 V64 M90 30 h8 M90 36 h5 M90 46 h10 M90 52 h5"/></g><g fill="none" stroke="#2859e1" stroke-width="1.2"><path d="M21 21 h6 v6 h-6 Z" transform="translate(1 0)"/><path d="M37 21 h6 v6 h-6 Z"/><path d="M53 21 h6 v6 h-6 Z"/><path d="M69 21 h6 v6 h-6 Z"/><path d="M21 41 h6 v6 h-6 Z" transform="translate(1 0)"/><path d="M37 41 h6 v6 h-6 Z"/><path d="M53 41 h6 v6 h-6 Z"/><path d="M69 41 h6 v6 h-6 Z"/></g>`,
    plan: `<g ${ink} stroke-width="1.4"><path d="M14 16 H90 V56 H14 Z"/><path d="M40 16 V40 M40 40 H66 M66 16 V40"/><path d="M58 40 V56 M28 40 V56"/></g><g ${thin} stroke-width="1" stroke-dasharray="2 3"><path d="M14 30 H40 M78 16 V56 M40 48 H66"/></g>`,
    wiring: `<g ${ink} stroke-width="1.3"><path d="M12 16 H78 V60 H12 Z"/><rect x="18" y="24" width="14" height="10"/><rect x="44" y="22" width="12" height="9"/><rect x="60" y="40" width="12" height="10"/></g><g stroke="#8394b0" stroke-width="1" fill="none" stroke-linecap="butt"><path d="M32 29 H44 M56 27 H68 V40 M24 34 V50 H40 M40 44 H60 M50 31 V50"/></g><g ${thin} stroke-width="1"><path d="M86 14 V64 M90 28 h8 M90 34 h5 M90 44 h9 M90 50 h6"/></g><g fill="#2859e1"><circle cx="32" cy="50" r="1.4"/><circle cx="60" cy="50" r="1.4"/><circle cx="50" cy="31" r="1.4"/></g>`,
    gis: `<g ${thin} stroke-width="1"><path d="M8 28 L44 22 L98 32"/><path d="M42 10 L46 40 L40 66"/><path d="M14 34 L30 32 L33 46 L16 48 Z"/><path d="M18 52 L34 51 L36 63 L20 64 Z"/><path d="M78 34 L92 36 L90 54 L80 52 Z"/></g><g fill="rgba(0,202,204,.14)" stroke="#00cacc" stroke-width="1.1" stroke-linejoin="miter"><path d="M54 40 L72 40 L74 56 L56 58 Z"/><path d="M50 20 L66 19 L68 31 L52 33 Z"/></g>`,
    rebar: `<g ${ink} stroke-width="1.3"><path d="M20 12 V62 M34 12 V62 M48 12 V62 M62 12 V62 M76 12 V62 M90 12 V62"/></g><g ${thin} stroke-width="1"><path d="M12 22 H96 M12 34 H96 M12 46 H96 M12 58 H96"/></g><g fill="#131f31"><circle cx="20" cy="22" r="1.3"/><circle cx="48" cy="22" r="1.3"/><circle cx="76" cy="22" r="1.3"/><circle cx="34" cy="46" r="1.3"/><circle cx="62" cy="46" r="1.3"/><circle cx="90" cy="46" r="1.3"/></g>`,
    report: `<g ${thin} stroke-width="1.4"><path d="M18 34 H86 M18 42 H74 M18 50 H88 M18 58 H62"/></g><rect x="18" y="15" width="30" height="8" fill="#2859e1"/>`,
    excel: `<g ${ink} stroke-width="1.2"><path d="M14 14 H90 V60 H14 Z"/></g><g fill="rgba(0,202,204,.14)"><rect x="14" y="14" width="19" height="11.5"/><rect x="52" y="37" width="19" height="11.5"/></g><g ${thin} stroke-width="1"><path d="M33 14 V60 M52 14 V60 M71 14 V60"/><path d="M14 25.5 H90 M14 37 H90 M14 48.5 H90"/></g><g ${thin} stroke-width="1.2"><path d="M20 55 H28 M39 55 H47 M58 55 H66 M77 55 H85"/></g>`,
    minutes: `<g fill="#2859e1"><circle cx="19" cy="20" r="1.6"/></g><g fill="#8394b0"><circle cx="19" cy="31" r="1.6"/><circle cx="19" cy="42" r="1.6"/><circle cx="19" cy="53" r="1.6"/></g><g ${thin} stroke-width="1.3"><path d="M26 20 H82 M26 31 H74 M26 42 H86 M26 53 H68"/></g><g ${thin} stroke-width="1"><path d="M26 24.5 H60 M26 46.5 H56"/></g><rect x="64" y="60" width="22" height="6" fill="#2859e1"/>`
  };
  return `<svg viewBox="0 0 104 72" width="104" height="72" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision">${B[type] || B.report}</svg>`;
}
function avBuildSlots(layers) {
  const cx = 320, cy = 350, baseR = 222;
  const slots = [];
  layers.forEach((n, L) => {
    const R = baseR * (1 - L * 0.115);
    for (let i = 0; i < n; i++) {
      const ang = i * 2.399963;
      const rr = R * Math.sqrt((i + 0.5) / n);
      const x = cx + Math.cos(ang) * rr + (Math.random() - 0.5) * 26;
      const y = cy - L * 7 + Math.sin(ang) * rr * 0.78 + (Math.random() - 0.5) * 22;
      slots.push({ x, y, rot: (Math.random() - 0.5) * 22, sc: 0.9 + L * 0.055, L });
    }
  });
  return slots;
}
function ProblemPile() {
  const frameRef = React.useRef(null);
  const stageRef = React.useRef(null);
  React.useEffect(() => {
    const frameEl = frameRef.current, stage = stageRef.current;
    if (!frameEl || !stage) return;
    const reduced = !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
    const eng = { slots: avBuildSlots(AV_LAYERS), tiles: [], count: 0, T: 0, start: 0,
      lastSpawn: -1, raf: 0, ro: null, ground: null, cur: { x: -999, y: -999, vx: 0, vy: 0, on: false } };
    function fit() { const k = frameEl.clientWidth / 640; if (k > 0) stage.style.transform = `scale(${k})`; }
    function makeGround() {
      stage.innerHTML = "";
      const g = document.createElement("div");
      g.style.cssText = "position:absolute;left:50%;top:56%;width:470px;height:410px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side, rgba(18,28,43,.14), rgba(18,28,43,0));filter:blur(9px);z-index:0;pointer-events:none;opacity:0;";
      stage.appendChild(g); eng.ground = g;
    }
    function spawn() {
      const s = eng.slots[eng.count]; if (!s) return;
      const el = document.createElement("div");
      el.style.cssText = `position:absolute;left:0;top:0;width:104px;height:72px;background:linear-gradient(135deg,#fff 55%,#eef0f4);border:1px solid #d9d9d9;border-radius:4px 4px 12px 4px;overflow:hidden;box-shadow:0 ${1 + s.L * 2}px ${5 + s.L * 4}px rgba(18,28,43,${(0.08 + s.L * 0.022).toFixed(3)});will-change:transform,opacity;pointer-events:none;opacity:0;backface-visibility:hidden;`;
      el.innerHTML = avTileHTML(AV_POOL[(Math.random() * AV_POOL.length) | 0]);
      stage.appendChild(el);
      const t = { el, hx: s.x, hy: s.y, hr: s.rot, sc: s.sc, L: s.L, base: eng.count + 1,
        ph: Math.random() * 6.28, ff: 0.9 + Math.random() * 1.1, drag: 0.951 + Math.random() * 0.016,
        born: eng.T, x: s.x, y: s.y, rot: s.rot, vx: 0, vy: 0, vr: 0, air: 0, edge: 6 + Math.random() * 26, zHi: 0 };
      el.style.zIndex = t.base;
      eng.tiles.push(t); eng.count++; eng.lastSpawn = eng.T;
    }
    function wt(t, x, y, rot, S, op, rx, ry) {
      t.el.style.transform = `translate(${(x - 52).toFixed(2)}px,${(y - 36).toFixed(2)}px) perspective(760px) rotateX(${rx.toFixed(1)}deg) rotateY(${ry.toFixed(1)}deg) rotate(${rot.toFixed(2)}deg) scale(${S.toFixed(3)})`;
      t.el.style.opacity = op;
    }
    function ext(rot, S, edge) {
      const a = rot * Math.PI / 180, ca = Math.abs(Math.cos(a)), sa = Math.abs(Math.sin(a));
      return { ex: 52 * S * ca + 36 * S * sa + edge, ey: 52 * S * sa + 36 * S * ca + edge };
    }
    function soft(v, lo, hi) {
      if (hi - lo <= 0) return (lo + hi) / 2;
      const m = Math.min(50, (hi - lo) / 2);
      return v > hi - m ? hi - m + m * Math.tanh((v - hi + m) / m)
        : v < lo + m ? lo + m - m * Math.tanh((lo + m - v) / m) : v;
    }
    function stir() {
      const c = eng.cur;
      const sp = Math.min(1, Math.hypot(c.vx, c.vy) / 26);
      const R = AV_REACH, W = AV_WIND;
      for (const t of eng.tiles) {
        const dx = t.x - c.x, dy = t.y - c.y;
        const d = Math.hypot(dx, dy);
        if (d > R) continue;
        const f = 1 - d / R;
        const n = d > 1 ? { x: dx / d, y: dy / d } : { x: Math.random() - 0.5, y: Math.random() - 0.5 };
        const push = (0.9 + sp * 5.2) * f * f * W;
        t.vx += n.x * push + (-n.y) * push * 0.85 + c.vx * 0.055 * f * W;
        t.vy += n.y * push + (n.x) * push * 0.85 + c.vy * 0.055 * f * W;
        t.vr += (Math.random() - 0.5) * (5 + sp * 16) * f;
        t.air = Math.min(1, t.air + f * f * (0.05 + sp * 0.34));
      }
    }
    function step() {
      const T = eng.T;
      if (eng.count < eng.slots.length && (T - eng.lastSpawn) * 1000 > AV_INTERVAL) spawn();
      if (eng.cur.on) stir();
      eng.cur.vx *= 0.82; eng.cur.vy *= 0.82;
      for (const t of eng.tiles) {
        const rest = 1 - t.air * 0.88;
        t.vx += (t.hx - t.x) * 0.010 * rest;
        t.vy += (t.hy - t.y) * 0.010 * rest;
        if (t.air > 0.02) {
          const a0 = t.air;
          t.vx += Math.sin(T * 0.8 + t.ph) * 0.20 * a0;
          t.vy += (Math.cos(T * 0.65 + t.ph * 1.3) * 0.18 - 0.10) * a0;
        }
        t.vx *= t.drag; t.vy *= t.drag;
        t.x += t.vx; t.y += t.vy;
        t.vr += (t.hr - t.rot) * 0.008 * (1 - t.air * 0.9);
        t.vr *= 0.955; t.rot += t.vr; t.air *= 0.9865;
        const a = t.air;
        const S = t.sc * (1 + 0.20 * a);
        const rx = Math.sin(T * 2.2 * t.ff + t.ph) * 46 * a;
        const ry = Math.cos(T * 1.85 * t.ff + t.ph * 1.4) * 52 * a;
        const b = ext(t.rot, S, t.edge);
        t.x = soft(t.x, b.ex, 640 - b.ex);
        t.y = soft(t.y, b.ey, 640 - b.ey);
        const hi = a > 0.06 ? 1 : 0;
        if (hi !== t.zHi) { t.zHi = hi; t.el.style.zIndex = hi ? 900 + t.base : t.base; }
        if (hi) t.el.style.boxShadow = `0 ${(6 + 16 * a).toFixed(0)}px ${(14 + 26 * a).toFixed(0)}px rgba(18,28,43,${(0.10 + 0.12 * a).toFixed(3)})`;
        const age = T - t.born;
        if (age < 0.5) {
          const p = age / 0.5, e2 = 1 - Math.pow(1 - p, 3);
          wt(t, t.x, t.y - 22 * (1 - e2), t.rot, S * (1 + 0.26 * (1 - e2)), Math.min(1, age / 0.15), rx, ry);
        } else { wt(t, t.x, t.y, t.rot, S, 1, rx, ry); }
      }
      if (eng.ground) eng.ground.style.opacity = Math.min(0.9, eng.count / 16).toFixed(3);
    }
    makeGround(); fit();
    if (reduced) {
      eng.T = 100;
      while (eng.count < eng.slots.length) spawn();
      for (const t of eng.tiles) wt(t, t.hx, t.hy, t.hr, t.sc, 1, 0, 0);
      if (eng.ground) eng.ground.style.opacity = 0.9;
      return () => { stage.innerHTML = ""; };
    }
    const to = (e) => {
      const r = frameEl.getBoundingClientRect();
      const k = r.width / 640 || 1;
      return { x: (e.clientX - r.left) / k, y: (e.clientY - r.top) / k };
    };
    const onEnter = (e) => { const p = to(e); eng.cur.x = p.x; eng.cur.y = p.y; eng.cur.vx = 0; eng.cur.vy = 0; eng.cur.on = true; };
    const onMove = (e) => {
      const p = to(e);
      if (eng.cur.on) { eng.cur.vx = p.x - eng.cur.x; eng.cur.vy = p.y - eng.cur.y; }
      eng.cur.x = p.x; eng.cur.y = p.y; eng.cur.on = true;
    };
    const onLeave = () => { eng.cur.on = false; eng.cur.x = -999; eng.cur.y = -999; };
    const onTouch = (e) => { const tp = e.touches[0]; if (tp) onMove(tp); };
    frameEl.addEventListener("mouseenter", onEnter);
    frameEl.addEventListener("mousemove", onMove);
    frameEl.addEventListener("mouseleave", onLeave);
    frameEl.addEventListener("touchmove", onTouch, { passive: true });
    frameEl.addEventListener("touchend", onLeave);
    try { if (window.ResizeObserver) { eng.ro = new ResizeObserver(fit); eng.ro.observe(frameEl); } } catch (_) {}
    eng.start = performance.now();
    for (let i = 0; i < 6; i++) spawn();
    const loop = (now) => { eng.raf = requestAnimationFrame(loop); eng.T = (now - eng.start) / 1000; step(); };
    eng.raf = requestAnimationFrame(loop);
    return () => {
      cancelAnimationFrame(eng.raf);
      if (eng.ro) eng.ro.disconnect();
      frameEl.removeEventListener("mouseenter", onEnter);
      frameEl.removeEventListener("mousemove", onMove);
      frameEl.removeEventListener("mouseleave", onLeave);
      frameEl.removeEventListener("touchmove", onTouch);
      frameEl.removeEventListener("touchend", onLeave);
      stage.innerHTML = "";
    };
  }, []);
  return (
    <div className="avalanche-wrap" aria-hidden="true">
      <div ref={frameRef} className="avalanche">
        <div ref={stageRef} className="avalanche__stage"></div>
      </div>
    </div>);
}
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>
        <ProblemPile />
      </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>);

}
const CFO_QA = [
{ q: "Why can't the team just point ChatGPT at our files themselves?", a: "Because it works on a folder and breaks on a portfolio. Point a general assistant at a handful of documents and it's genuinely useful. Point it at hundreds of thousands of files across formats, folders and systems and it matches text, returns fragments and misses the picture. Cue is the layer that makes the AI we already pay for usable." },
{ q: "What does this actually cost once we scale agents across the portfolio?", a: "What scales isn't licenses, it's tokens. Without a structured index, every agent reads whole documents on every question, and re-reads them at every step of its reasoning. That cost grows with your document sizes and with every new use case. Cue's Index lets agents query a structured knowledge layer instead of re-reading raw files — the same answer, at a fraction of the tokens." },
{ q: "Where's the payback?", a: "Two places. Time recovered — search and retrieval in document-heavy phases drops an estimated 40–70%, and end-of-project handover into your ERP or CAFM drops 30–50%. And losses avoided — a missed rent indexation, a contract expiry caught too late, a counterparty insolvency spotted after the guarantee lapsed. Any one of those dwarfs a year of the platform." },
{ q: "Aren't we locking ourselves into another vendor?", a: "The opposite. Cue runs on open, machine-readable formats. The Index is portable and stays under our control. If we switch models (from Claude to ChatGPT, or Gemini) or change infrastructure providers, we can do that without rebuilding the foundation underneath. We own the knowledge layer; the models are interchangeable on top of it." },
{ q: "What happens when AI prices move?", a: "Today's rates are widely understood to be subsidized. The harder our agents lean on loading whole documents into context, the more exposed we are when that changes. An index insulates us: we pay to produce structured knowledge once, not to re-read the same PDFs every time — even when the price regime shifts." },
{ q: "What's the cost of waiting?", a: "The information is already in our archive. Today it sits filed and unfindable — the answer surfaces too late, or not at all, and the loss lands quietly: as rework, as a missed increase, as a compliance gap found at audit. Standing still isn't holding position. It's paying that cost every month until we close the gap." }
];
function CfoModal({ open, onClose }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="cfo-overlay" role="dialog" aria-modal="true" aria-label="Taking Cue to your CFO" onClick={onClose}>
      <div className="cfo-modal" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="cfo-modal__close" aria-label="Close" onClick={onClose}><span className="cue-icon">close</span></button>
        <h3 className="cfo-modal__title">Taking Cue to your CFO</h3>
        <p className="cfo-modal__sub">The questions they'll ask, if you want to start using Cue — and short answers.</p>
        <div className="cfo-modal__body">
          {CFO_QA.map((item, i) =>
            <details key={i} className="cfo-qa" open={i === 0}>
              <summary className="cfo-qa__q"><span>{item.q}</span><span className="cue-icon cfo-qa__chev">expand_more</span></summary>
              <p className="cfo-qa__a">{item.a}</p>
            </details>
          )}
        </div>
      </div>
    </div>);
}
function ClosingCTA() {
  const [cfoOpen, setCfoOpen] = React.useState(false);
  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>
            <button type="button" className="cfo-card" onClick={() => setCfoOpen(true)}>
              <span className="cfo-card__text">
                <span className="cfo-card__h">Taking Cue to your CFO</span>
                <span className="cfo-card__s">The questions they'll ask, if you want to start using Cue — and short answers.</span>
              </span>
              <span className="cue-icon cfo-card__arrow">arrow_forward</span>
            </button>
          </div>
        </div>
      </div>
      <CfoModal open={cfoOpen} onClose={() => setCfoOpen(false)} />
    </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" }, ...(window.CUE_FEATURES && window.CUE_FEATURES.course ? [{ label: "Course", href: "#/course" }] : []), { 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 === "course" ?
      <window.CoursePage /> :
      route === "unsubscribe" ?
      <window.Unsubscribe /> :
      LEGAL_ROUTES[route] ?
      <window.LegalPage route={route} /> :
      <main>
            <Hero headline={t.headline} visual={t.heroVisual} />
            <Problem />
            <Solution />
            <How />
            <Platform />
            <Start />
            {COURSE_ON ? <window.CourseTeaser /> : null}
            <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 />);
});