/* ============================================================
   Innoveev — Superwhisper-style home (aurora / midnight glass).
   Reuses Brand, Arrow, AmbientGlobe + the shared Tweaks panel.
   ============================================================ */

/* ---------- robust reveal (safety timeout) ---------- */
function JReveal({ children, delay = 0, className = "", ...rest }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let done = false;
    const show = () => { if (done) return; done = true; setTimeout(() => setShown(true), delay); cleanup(); };
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) show(); }), { threshold: 0.12 });
    const check = () => { const r = el.getBoundingClientRect(); if (r.top < window.innerHeight * 0.94 && r.bottom > 0) show(); };
    const safety = setTimeout(show, 1300);
    function cleanup() { io.disconnect(); window.removeEventListener("scroll", check); clearTimeout(safety); }
    io.observe(el);
    window.addEventListener("scroll", check, { passive: true });
    requestAnimationFrame(check);
    return cleanup;
  }, [delay]);
  return <div ref={ref} className={`reveal ${shown ? "reveal--in" : ""} ${className}`} {...rest}>{children}</div>;
}

/* ---------- icons ---------- */
function Ico({ d, size = 22, sw = 1.6 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
    </svg>
  );
}
const Chevron = ({ s = 10 }) => (
  <svg width={s} height={s} viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M3 5.5 7 9.5l4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

/* ---------- counters / clocks ---------- */
function StatCounter({ to, suffix, prefix, decimals }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  const started = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const dur = 1700;
          const tick = (now) => {
            const t = Math.min(1, (now - start) / dur);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(to * eased);
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.5 });
    io.observe(el);
    const safety = setTimeout(() => { if (!started.current) { started.current = true; setVal(to); } }, 1500);
    return () => { io.disconnect(); clearTimeout(safety); };
  }, [to]);
  const shown = decimals
    ? (to % 1 === 0 ? Math.round(val) : val.toFixed(to < 10 ? 1 : 2))
    : Math.round(val).toLocaleString("en-US");
  return <span ref={ref}>{prefix ? <span className="suffix">{prefix}</span> : null}{shown}<span className="suffix">{suffix}</span></span>;
}

function OfficeClock({ tz }) {
  const [t, setT] = React.useState("--:--");
  React.useEffect(() => {
    const fmt = () => {
      try { return new Intl.DateTimeFormat("en-GB", { timeZone: tz, hour: "2-digit", minute: "2-digit", hour12: false }).format(new Date()); }
      catch { return "--:--"; }
    };
    setT(fmt());
    const id = setInterval(() => setT(fmt()), 1000 * 20);
    return () => clearInterval(id);
  }, [tz]);
  return <span className="office__time">{t}</span>;
}

/* ============================ NAV ============================ */
/* The header comes from the original components/nav.jsx (window.Nav),
   loaded before this script. */

/* ============================ HERO ============================ */
function Hero() {
  const cardRef = React.useRef(null);
  const heroRef = React.useRef(null);
  React.useEffect(() => {
    const card = cardRef.current, hero = heroRef.current;
    if (!card || !hero) return;
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const range = hero.offsetHeight - window.innerHeight;
        const p = range > 0 ? Math.max(0, Math.min(1, window.scrollY / range)) : 0;
        const e = p * p * (3 - 2 * p); // smoothstep
        card.style.inset = `${e * 4}vh ${e * 6}vw`;
        card.style.borderRadius = `${e * 30}px`;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  return (
    <section className="hero" id="top" ref={heroRef}>
      <div className="hero__sticky">
        <div className="hero__card" ref={cardRef}>
          <div className="hero__inner">
          <span className="hero__eyebrow"><span className="dot"></span>Software studio · Dubai</span>
          <h1 className="hero__title">We build apps the world actually uses.</h1>
          <p className="hero__lede">
            From the first commit to the first million users — Innoveev designs and ships
            mobile, web and AI products from Dubai.
          </p>
          <div className="hero__ctas">
            <a href="contact.html" className="abtn abtn--white">Start a project <Arrow /></a>
            <a href="apps.html" className="abtn abtn--dark">See our work</a>
          </div>
          <p className="hero__fine">10 apps shipped · 1.2M daily users · four offices, one team</p>
        </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ STATS ============================ */
const STATS = [
  { to: 10, suffix: "", label: "Apps shipped to date",
    note: "Across the region, Europe and the Gulf." },
  { to: 99.98, suffix: "%", label: "Production uptime", decimals: true,
    note: "Measured on everything we run — not just demos." },
  { to: 10, prefix: "$", suffix: "M", label: "Raised in funding in 2025",
    note: "By the founders we build alongside." },
];
function Stats() {
  return (
    <section className="section stats-section">
      <div className="container">
        <JReveal className="stats-head">
          <span className="eyebrow"><span className="dot"></span>By the numbers</span>
          <h2 className="section-head__title">Proof, not <span className="sig">promises.</span></h2>
        </JReveal>
        <JReveal>
          <div className="stats">
            {STATS.map((s, i) => (
              <div key={i} className="stat">
                <div className="stat__val"><StatCounter to={s.to} suffix={s.suffix} prefix={s.prefix} decimals={s.decimals} /></div>
                <div className="stat__label">{s.label}</div>
                {s.note && <div className="stat__note">{s.note}</div>}
              </div>
            ))}
          </div>
        </JReveal>
      </div>
    </section>
  );
}

/* ============================ SERVICES ============================ */
const SERVICES = [
  { title: "Feasibility Study", c: "#e0556e", slot: "svc-feasibility",
    desc: "Market, technical and commercial validation — before a line of code.",
    tags: ["Market", "Technical", "Costing"],
    icon: ["M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14z", "M21 21l-5-5"] },
  { title: "UI/UX Design", c: "#d96ce0", slot: "svc-design",
    desc: "Research, flows and a design system that ships in the same repo as the code.",
    tags: ["Research", "UX/UI", "Design systems"],
    icon: ["M12 19l7-7a2.8 2.8 0 0 0-4-4l-7 7", "M8 15l-2 5 5-2", "M14 6l4 4"] },
  { title: "Development", c: "#6a8dff", slot: "svc-development",
    desc: "iOS, Android, web and AI from one team — native quality, no lost handoff.",
    tags: ["iOS · Android", "Web", "AI"],
    icon: ["M8 9l-4 3 4 3", "M16 9l4 3-4 3", "M13 6l-2 12"] },
  { title: "Marketing", c: "#0088ff", slot: "svc-marketing",
    desc: "Positioning, launch and growth — the campaigns that bring the right users in.",
    tags: ["Brand", "Launch", "Growth"],
    icon: ["M4 10v4l9 4V6l-9 4z", "M13 8l5-2v12l-5-2", "M6 14v3a2 2 0 0 0 4 1"] },
  { title: "Operations", c: "#00b37e", slot: "svc-operations",
    desc: "Process, tooling and the systems that keep a company running day to day.",
    tags: ["Process", "Tooling", "Hiring"],
    icon: ["M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z", "M19.4 13a7.8 7.8 0 0 0 0-2l2-1.5-2-3.5-2.4 1a7.8 7.8 0 0 0-1.7-1L15 2.5H9.9L9.6 5a7.8 7.8 0 0 0-1.7 1l-2.4-1-2 3.5 2 1.5a7.8 7.8 0 0 0 0 2l-2 1.5 2 3.5 2.4-1a7.8 7.8 0 0 0 1.7 1l.3 2.5h5.1l.3-2.5a7.8 7.8 0 0 0 1.7-1l2.4 1 2-3.5z"] },
  { title: "Compliance", c: "#14b8c4", slot: "svc-compliance",
    desc: "Licensing, data and the regulatory groundwork to operate across markets.",
    tags: ["Licensing", "Data", "Legal"],
    icon: ["M12 3l7 3v6c0 4-3 7-7 8-4-1-7-4-7-8V6z", "M9 12l2 2 4-4"] },
  { title: "Funding", c: "#9f62ea", slot: "svc-funding",
    desc: "Raise-ready decks, models and warm intros to help you close the round.",
    tags: ["Deck", "Model", "Intros"],
    icon: ["M3 7h18v10H3z", "M12 9.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z", "M6 10v4", "M18 10v4"] },
  { title: "Exit", c: "#f5a524", slot: "svc-exit",
    desc: "Diligence-ready data rooms, clean books and a story buyers trust.",
    tags: ["Data room", "Diligence", "M&A"],
    icon: ["M14 4h5v16h-5", "M3 12h11", "M11 8l4 4-4 4"] },
];
function Services() {
  return (
    <section className="section" id="services">
      <div className="container">
        <JReveal className="section-head">
          <span className="eyebrow"><span className="dot"></span>How we work</span>
          <h2 className="section-head__title">More than build — <span className="sig">we help you win.</span></h2>
          <p className="section-head__lede">
            Design and engineering are just the start. We carry the parts most studios won't —
            so a product becomes a company. Drop an image onto any card.
          </p>
        </JReveal>
      </div>
      <div className="whats__scroll">
        <div className="svcrow">
          {SERVICES.map((s, i) => (
            <JReveal key={s.title} delay={(i % 4) * 70} className="svccard" style={{ "--c": s.c }}>
              <div className="svccard__bg">
                <image-slot id={s.slot} shape="rect"
                  placeholder={`Drop ${s.title} image`}
                  style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
              </div>
              <div className="svccard__fade"></div>
              <button type="button" className="svccard__edit"
                onClick={(e) => { e.preventDefault(); e.currentTarget.closest(".svccard").classList.toggle("svccard--editing"); }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>
                <span>Edit image</span>
              </button>
              <div className="svccard__hint">Hover the image for <b>Replace</b> · double-click then drag to reposition · <b>Esc</b> when done</div>
              <div className="svccard__content">
                <span className="svccard__icon"><Ico d={s.icon} size={22} /></span>
                <h3 className="svccard__title">{s.title}</h3>
                <p className="svccard__desc">{s.desc}</p>
                <div className="svccard__tags">{s.tags.map((t) => <span key={t} className="svccard__tag">{t}</span>)}</div>
              </div>
            </JReveal>
          ))}
          <div className="appsrow__pad" aria-hidden="true"></div>
        </div>
      </div>
    </section>
  );
}

/* ============================ APPS SHOWCASE ============================ */
function AppIcon({ name }) {
  const c = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "Logi": // truck
      return (<svg {...c}><path d="M3 6.5h10v8H3z" /><path d="M13 9h4l3 3v2.5h-7" /><circle cx="7" cy="17" r="1.8" /><circle cx="17" cy="17" r="1.8" /></svg>);
    case "Tamam": // services / bag
      return (<svg {...c}><path d="M6 8h12l-1 11H7z" /><path d="M9 8a3 3 0 0 1 6 0" /></svg>);
    case "Dealio": // tag
      return (<svg {...c}><path d="M4 12.5 11.5 5H19v7.5L11.5 20z" /><circle cx="15.5" cy="8.5" r="1.2" fill="currentColor" stroke="none" /></svg>);
    case "PO8": // POS terminal / card
      return (<svg {...c}><rect x="3.5" y="6" width="17" height="12" rx="2" /><path d="M3.5 10h17" /><path d="M7 14h4" /></svg>);
    case "Que": // qr
      return (<svg {...c}><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="14" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><path d="M14 14h2v2M20 14v2M16 18v2h4M20 20v0" /></svg>);
    case "WeSyria": // landmark
      return (<svg {...c}><path d="M4 9 12 4l8 5" /><path d="M5 9v9M19 9v9M9.5 9v9M14.5 9v9" /><path d="M3.5 19h17" /></svg>);
    case "DocDoc": // medical
      return (<svg {...c}><rect x="4" y="5" width="16" height="15" rx="2.5" /><path d="M4 9h16" /><path d="M12 12v5M9.5 14.5h5" /></svg>);
    default:
      return (<svg {...c}><circle cx="12" cy="12" r="8" /></svg>);
  }
}

const SHOWCASE = [
  { name: "Logi", c: "#f34147", slot: "app-logi", market: "United Arab Emirates",
    desc: "Logistics platform for fleets and last-mile delivery teams.",
    tagline: "Routes, drivers and parcels — tracked in real time." },
  { name: "Tamam", c: "#58a0f5", slot: "app-tamam", market: "United Arab Emirates",
    desc: "On-demand services marketplace connecting people to local pros.",
    tagline: "Book a pro for anything, in minutes." },
  { name: "Dealio", c: "#fa2f63", slot: "app-dealio", market: "Syria",
    desc: "A buy-and-sell marketplace built for the Syrian market.",
    tagline: "List it, find it, deal it — locally." },
  { name: "PO8", c: "#9f62ea", slot: "app-po8", market: "Estonia",
    desc: "Point-of-sale system for restaurants — tables, orders and payments.",
    tagline: "One till for the whole floor." },
  { name: "Que", c: "#00b37e", slot: "app-que", market: "Germany & Syria",
    desc: "QR-code menu system for restaurants, synced live to PO8.",
    tagline: "Scan, browse, order — no app needed." },
  { name: "WeSyria", c: "#0e3933", slot: "app-wesyria", market: "Syria",
    desc: "A government services platform bringing public services online.",
    tagline: "Public services, finally in one place." },
  { name: "DocDoc", c: "#247cff", slot: "app-docdoc", market: "Palestine",
    desc: "Appointment booking that connects patients with doctors.",
    tagline: "Find a doctor, book a visit — done." },
  { name: "Veev", c: "#6a61bc", slot: "app-veev", market: "For agencies",
    desc: "AI ad manager for agencies — every client's campaigns in one place.",
    tagline: "Run all your clients' ad accounts from one AI workspace." },
];

function useDominantCardColors() {
  React.useEffect(() => {
    let stop = false, timer = null;
    const last = new WeakMap();
    const sample = (img) => {
      const w = 24, h = 24;
      const cv = document.createElement("canvas"); cv.width = w; cv.height = h;
      const ctx = cv.getContext("2d");
      let d;
      try { ctx.drawImage(img, 0, 0, w, h); d = ctx.getImageData(0, 0, w, h).data; } catch (e) { return null; }
      const buckets = {}; let best = null, bestN = 0;
      for (let i = 0; i < d.length; i += 4) {
        const r = d[i], g = d[i + 1], b = d[i + 2], a = d[i + 3];
        if (a < 128) continue;
        const max = Math.max(r, g, b), min = Math.min(r, g, b);
        const lum = (r + g + b) / 3;
        if (lum < 26 || lum > 234) continue;
        if (max - min < 22) continue; // skip greys
        const key = ((r >> 4) << 8) | ((g >> 4) << 4) | (b >> 4);
        const n = (buckets[key] = (buckets[key] || 0) + 1);
        if (n > bestN) { bestN = n; best = [r, g, b]; }
      }
      if (!best) {
        let r = 0, g = 0, b = 0, c = 0;
        for (let i = 0; i < d.length; i += 4) { r += d[i]; g += d[i + 1]; b += d[i + 2]; c++; }
        best = [(r / c) | 0, (g / c) | 0, (b / c) | 0];
      }
      return `rgb(${best[0]}, ${best[1]}, ${best[2]})`;
    };
    const tick = () => {
      if (stop) return;
      document.querySelectorAll(".appcard").forEach((card) => {
        const slot = card.querySelector(".appcard__bg image-slot");
        const img = slot && slot.shadowRoot && slot.shadowRoot.querySelector("img");
        const src = img && (img.currentSrc || img.src);
        if (!img || !src || !img.complete || !img.naturalWidth) return;
        if (last.get(card) === src) return;
        const col = sample(img);
        if (col) { card.style.setProperty("--c", col); last.set(card, src); }
      });
      timer = setTimeout(tick, 700);
    };
    timer = setTimeout(tick, 500);
    return () => { stop = true; if (timer) clearTimeout(timer); };
  }, []);
}

function AppsShowcase() {
  return (
    <section className="section whats" id="work">
      <div className="container">
        <JReveal className="whats__head">
          <span className="eyebrow eyebrow--mag"><span className="dot"></span>Our apps</span>
          <h2 className="section-head__title">Products we've shipped,<br />across the region.</h2>
          <p className="section-head__lede">
            Seven live products across logistics, marketplaces, hospitality, government
            and healthcare — drag a screenshot onto any card to drop in its visual.
          </p>
        </JReveal>
      </div>
      <div className="whats__scroll">
        <div className="appsrow">
          {SHOWCASE.map((a, i) => (
            <JReveal key={a.name} delay={(i % 4) * 70} className="appcard" style={{ "--c": a.c }}>
              <div className="appcard__bg">
                <image-slot id={a.slot} shape="rect"
                  placeholder={`Drop ${a.name} screenshot`}
                  style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
              </div>
              <div className="appcard__fade"></div>
              <button type="button" className="appcard__edit"
                onClick={(e) => { e.preventDefault(); e.currentTarget.closest(".appcard").classList.toggle("appcard--editing"); }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>
                <span>Edit image</span>
              </button>
              <div className="appcard__hint">Hover the image for <b>Replace</b> · double-click then drag to reposition · <b>Esc</b> when done</div>
              <div className="appcard__content">
                <div className="appcard__head">
                  <span className="appcard__icon">
                    <image-slot id={`${a.slot}-icon`} shape="rounded" radius="9" placeholder="icon"
                      style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
                  </span>
                  <span className="appcard__title">{a.name}</span>
                  <span className="appcard__market">{a.market}</span>
                </div>
                <p className="appcard__desc">{a.desc}</p>
                <p className="appcard__tagline">{a.tagline}</p>
              </div>
            </JReveal>
          ))}
          <div className="appsrow__pad" aria-hidden="true"></div>
        </div>
      </div>
    </section>
  );
}

/* ============================ TECH MARQUEE ============================ */
function TechApp({ tech }) {
  return (
    <a className="techapp" href={`technology.html?slug=${tech.slug}`} title={tech.name} data-cursor="Open">
      <span className="techapp__tile"><TechTile tech={tech} size={76} /></span>
      <span className="techapp__name">{tech.name}</span>
      <span className="techapp__role">{tech.domain}</span>
    </a>
  );
}

function TechRow({ items, dir, dur }) {
  const loop = items.concat(items);
  return (
    <div className="techmq" data-dir={dir} style={{ "--dur": dur }}>
      <div className="techmq__track">
        {loop.map((t, i) => <TechApp key={t.slug + "-" + i} tech={t} />)}
      </div>
    </div>
  );
}

function TechMarquee() {
  const techs = (window.TECHS || []).filter((t) => t.slug);
  // Mix domains across three rows by striping every 3rd item, so each row is
  // a deliberate jumble rather than grouped-by-category.
  const rows = [[], [], []];
  techs.forEach((t, i) => rows[i % 3].push(t));
  const dirs = ["l", "r", "l"];
  const durs = ["54s", "68s", "48s"];
  return (
    <section className="section techmq-section" id="stack">
      <div className="container">
        <JReveal className="kbd-head">
          <span className="eyebrow"><span className="dot"></span>Our stack</span>
          <h2 className="kbd-head__title">The tools behind<br /><span className="dim">every app we ship.</span></h2>
          <p className="kbd-head__lede">Every language, framework and platform we build on — hover to pause, tap any one to see how we use it and what we weigh it against.</p>
        </JReveal>
      </div>
      <JReveal className="techmq-rows">
        {rows.map((r, i) => <TechRow key={i} items={r} dir={dirs[i]} dur={durs[i]} />)}
      </JReveal>
    </section>
  );
}

/* ============================ OFFICES ============================ */
const OFFICES = [
  { flag: "🇦🇪", city: "Dubai", role: "HQ — design, engineering & management", tz: "Asia/Dubai", hq: true },
  { flag: "🇸🇾", city: "Damascus", role: "Operational office", tz: "Asia/Damascus" },
  { flag: "🇹🇷", city: "Istanbul", role: "Operational office", tz: "Europe/Istanbul" },
  { flag: "🇪🇪", city: "Tallinn", role: "Expansion office", tz: "Europe/Tallinn" },
];
function Offices({ accent }) {
  return (
    <section className="section" id="global">
      <div className="container">
        <JReveal>
          <div className="offices">
            <div className="offices__panel">
              <span className="eyebrow"><span className="dot"></span>Where we work</span>
              <h2 className="section-head__title">Built in <span className="sig">Dubai.</span></h2>
              <p className="offices__lede">
                Everything — design, engineering and management — runs from our UAE headquarters.
                Damascus and Istanbul are operational offices; Tallinn is our base into Europe.
              </p>
              <ul className="offices__list">
                {OFFICES.map((o) => (
                  <li key={o.city} className={`office ${o.hq ? "office--hq" : ""}`}>
                    <span className="office__flag" aria-hidden="true">{o.flag}</span>
                    <span>
                      <span className="office__city">{o.city}</span>
                      <span className="office__role">{o.role}</span>
                    </span>
                    <OfficeClock tz={o.tz} />
                  </li>
                ))}
              </ul>
            </div>
            <div className="offices__viz">
              <div className="offices__viz-inner">
                <AmbientGlobe
                  dotColor="rgba(96,165,250,0.45)"
                  pinColor={accent}
                  arcColor={accent}
                  coreColor="#020912"
                  showLabels={true}
                  spin={0.00016}
                />
              </div>
              <span className="offices__viz-cap">4 offices · follow-the-sun</span>
            </div>
          </div>
        </JReveal>
      </div>
    </section>
  );
}

/* ============================ FINAL CTA ============================ */
function FinalCTA() {
  return (
    <section className="fcta" id="contact">
      <div className="container">
        <JReveal className="fcta__card">
          <div className="fcta__inner">
            <h2 className="fcta__title">Let's build something worth shipping.</h2>
            <p className="fcta__lede">
              Tell us about your product. We read every message and reply within one business day.
            </p>
            <div className="fcta__ctas">
              <a href="contact.html" className="abtn abtn--white">Start a project <Arrow /></a>
              <a href="mailto:info@innoveev.com" className="abtn abtn--dark">info@innoveev.com</a>
            </div>
            <p className="fcta__meta">Dubai · Damascus · Istanbul · Tallinn</p>
          </div>
        </JReveal>
      </div>
    </section>
  );
}

/* ============================ FOOTER ============================ */
/* ============================ FOOTER ============================ */
/* The footer comes from the original components/closer.jsx (window.Footer),
   loaded before this script. */

/* ============================ TWEAKS ============================ */
const AURORAS = {
  classic: "linear-gradient(180deg, #000000 0.85%, #0a1c4d 24%, #112d72 38%, #4b52aa 56%, #a887dc 76%, #e6c4e7 94%, #fcdbef 106%)",
  cool:    "linear-gradient(180deg, #000000 0.85%, #04233f 24%, #0a4a73 40%, #1f7fb8 58%, #6fc3e0 78%, #bfeaf2 95%, #e6fbff 107%)",
  violet:  "linear-gradient(180deg, #000000 0.85%, #1a0a3a 24%, #3a1d72 40%, #6b3bb0 56%, #b15fe0 76%, #e6b8ec 94%, #ffd9f4 106%)",
};
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "signal": "#0088ff",
  "aurora": "classic",
  "tracking": -0.055
}/*EDITMODE-END*/;

/* ============================ APP ============================ */
function AuroraHome() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const rootStyle = {
    "--signal": t.signal,
    "--aurora": AURORAS[t.aurora] || AURORAS.classic,
    "--track-display": t.tracking + "em",
  };
  return (
    <div className="ahome" style={rootStyle}>
      <Nav />
      <main>
        <Hero />
        <Stats />
        <Services />
        <AppsShowcase />
        <TechMarquee />
        <Offices accent={t.signal} />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor label="Signal" value={t.signal}
          options={["#0088ff", "#60a5fa", "#27c93f", "#b855e7"]}
          onChange={(v) => setTweak("signal", v)} />
        <TweakSection label="Hero aurora" />
        <TweakRadio label="Gradient" value={t.aurora}
          options={["classic", "cool", "violet"]}
          onChange={(v) => setTweak("aurora", v)} />
        <TweakSlider label="Headline tracking" value={t.tracking} min={-0.08} max={0} step={0.005} unit="em"
          onChange={(v) => setTweak("tracking", v)} />
      </TweaksPanel>
    </div>
  );
}

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