/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;

/* ─────────── Constants ─────────── */
const EMAIL    = "contact@siaconsulting.ai";
const MAILTO   = `mailto:${EMAIL}`;
const LINKEDIN = "https://www.linkedin.com/in/emadkarim/";

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cursor": "dot",
  "pulseSpeed": 1.0
}/*EDITMODE-END*/;

/* ─────────── SIA Logomark — 6-petal block, matches Artboard 2.svg ─────────── */
// Petal path data (no "sia" text — just the mark block in viewBox 0..240 area)
const SIA_PETAL_PATHS = [
  "M14.37,90.19v30.28c21.01,0,38.04-17.03,38.04-38.04H22.13c-4.28,0-7.75,3.47-7.75,7.75Z",
  "M21.58,158.51h30.83c0-21.01-17.03-38.04-38.04-38.04v30.83c0,3.98,3.23,7.21,7.21,7.21Z",
  "M90.45,150.83v-30.36c-21.01,0-38.04,17.03-38.04,38.04h30.36c4.24,0,7.68-3.44,7.68-7.68Z",
  "M82.14,82.44h-29.73c0,21.01,17.03,38.04,38.04,38.04v-29.73c0-4.59-3.72-8.3-8.3-8.3Z",
  "M90.45,90.19v30.28c21.01,0,38.04-17.03,38.04-38.04h-30.28c-4.28,0-7.75,3.47-7.75,7.75Z",
  "M97.65,158.51h30.83c0-21.01-17.03-38.04-38.04-38.04v30.83c0,3.98,3.23,7.21,7.21,7.21Z",
];

// SIA mark + "sia" text inline (the full logo)
function SiaLogo({ withText = true, color, accent, style, className }) {
  // viewBox is sized generously so the "sia" text (scaled 1.09×) never clips
  // on the right edge of small nav containers.
  const vbX = 10, vbY = 70;
  const vbW = withText ? 240 : 124;
  const vbH = 100;
  return (
    <svg
      viewBox={`${vbX} ${vbY} ${vbW} ${vbH}`}
      preserveAspectRatio="xMidYMid meet"
      style={{ display: "block", color: color || "currentColor", overflow: "visible", ...style }}
      className={className}
      aria-hidden
    >
      {SIA_PETAL_PATHS.map((d, i) => (
        <path key={i} d={d} fill="currentColor" />
      ))}
      {withText && (
        <text
          x="134" y="158"
          transform="scale(1.09 1) translate(-12 0)"
          fontFamily="NHaasGrotesk, Helvetica Neue, Arial, sans-serif"
          fontWeight="600"
          fontSize="74"
          letterSpacing="-2"
          fill={accent || "currentColor"}
          style={{ dominantBaseline: "alphabetic" }}
        >sia</text>
      )}
    </svg>
  );
}

// 4-pointed sparkle star (used in approach principles and hero decoration)
function Sparkle({ size = 24, color = "currentColor", style }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}
         style={{ color, display: "block", ...style }} aria-hidden>
      <path d="M12 0 L13.7 10.3 L24 12 L13.7 13.7 L12 24 L10.3 13.7 L0 12 L10.3 10.3 Z" fill="currentColor" />
    </svg>
  );
}

// Mark-only SIA logo (the 6 petals, no "sia" text) used as section eyebrows.
function SiaMark({ size = 36, color = "currentColor", style }) {
  return (
    <svg viewBox="10 76 124 86" width={size} height={size}
         style={{ color, display: "block", ...style }} aria-hidden>
      {SIA_PETAL_PATHS.map((d, i) => <path key={i} d={d} fill="currentColor" />)}
    </svg>
  );
}

// Chevron-quote mark (»») used as the OUR SERVICES eyebrow, per wireframe.
function ChevronQuote({ size = 36, color = "currentColor", style }) {
  return (
    <svg viewBox="0 0 48 32" width={size * 1.4} height={size}
         style={{ color, display: "block", ...style }} aria-hidden>
      <path d="M6 4 L18 16 L6 28" fill="none" stroke="currentColor" strokeWidth="5" strokeLinecap="square" strokeLinejoin="miter" />
      <path d="M26 4 L38 16 L26 28" fill="none" stroke="currentColor" strokeWidth="5" strokeLinecap="square" strokeLinejoin="miter" />
    </svg>
  );
}

// Half-circle "petal" shape used in the footer decorative row.
// orientation: "top" (dome up, flat bottom) or "bottom" (bowl, flat top)
function FooterPetal({ orientation = "top", color = "currentColor", style }) {
  const d = orientation === "top"
    ? "M0,100 A100,100 0 0 1 200,100 L0,100 Z"   // dome
    : "M0,0 L200,0 A100,100 0 0 1 0,0 Z";        // bowl
  return (
    <svg viewBox="0 0 200 100" preserveAspectRatio="xMidYMax meet"
         style={{ color, display: "block", width: "100%", height: "100%", ...style }} aria-hidden>
      <path d={d} fill="currentColor" />
    </svg>
  );
}

/* ─────────── Inline SVG icon component ─────────── */
// Fetches an SVG file and inlines its markup so CSS can theme its
// `.b` (body) paths via `currentColor` and `.c`/`.d` (accent) via --ic-accent.
const svgCache = new Map();

function InlineIcon({ src, size, className, style }) {
  const [markup, setMarkup] = useState(svgCache.get(src) || "");
  useEffect(() => {
    let cancelled = false;
    if (svgCache.has(src)) { setMarkup(svgCache.get(src)); return; }
    fetch(src).then((r) => r.text()).then((txt) => {
      const clean = txt.replace(/<\?xml[^?]*\?>/, "").trim();
      svgCache.set(src, clean);
      if (!cancelled) setMarkup(clean);
    });
    return () => { cancelled = true; };
  }, [src]);

  return (
    <span
      className={`svg-box ${className || ""}`}
      style={{ width: size, height: size, ...style }}
      dangerouslySetInnerHTML={{ __html: markup }}
    />
  );
}

function Arrow({ size = 14 }) {
  return <span className="arrow" style={{ width: size + 4, height: size - 2 }} aria-hidden />;
}

/* ─────────── Cursor ─────────── */
function Cursor({ mode }) {
  const ref = useRef(null);
  const [hover, setHover] = useState(false);
  useEffect(() => {
    let raf = 0;
    let tx = 0, ty = 0, cx = 0, cy = 0;
    const move = (e) => { tx = e.clientX; ty = e.clientY; };
    const tick = () => {
      cx += (tx - cx) * 0.32;
      cy += (ty - cy) * 0.32;
      if (ref.current) ref.current.style.transform = `translate(${cx}px, ${cy}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener("mousemove", move);
    raf = requestAnimationFrame(tick);
    const over = (e) => setHover(Boolean(e.target.closest("a, button, .btn, [data-cursor-hover]")));
    window.addEventListener("mouseover", over);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseover", over);
    };
  }, []);
  const cls = "cursor"
    + (mode === "off" ? " is-off" : "")
    + (mode === "blob" ? " is-blob" : "")
    + (hover ? " is-hover" : "");
  return <div ref={ref} className={cls} />;
}

/* ─────────── Nav ─────────── */
const NAV_ITEMS = [
  { id: "about",    label: "About" },
  { id: "services", label: "Services" },
  { id: "approach", label: "Approach" },
  { id: "sectors",  label: "Sectors" },
  { id: "contact",  label: "Contact" },
];

function Nav({ activeId, tone }) {
  const go = (e, id) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <nav className="nav nav--blue">
      <a className="nav__brand" href="#top" onClick={(e) => go(e, "top")} aria-label="SIA home">
        <SiaLogo style={{ width: 78, height: 32 }} color="#ffffff" accent="#ffffff" />
      </a>
      <div className="nav__links">
        {NAV_ITEMS.map((it) => (
          <a key={it.id} href={`#${it.id}`}
             className={activeId === it.id ? "is-active" : ""}
             onClick={(e) => go(e, it.id)}>
            {it.label}
          </a>
        ))}
      </div>
    </nav>
  );
}

/* ─────────── Hero ─────────── */
const HERO_IMAGES = [
  "assets/hero/lobos.jpg",
  "assets/hero/neom.jpg",
  "assets/hero/nasa.jpg",
];

function Hero() {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const i = setInterval(() => setIdx((v) => (v + 1) % HERO_IMAGES.length), 5800);
    return () => clearInterval(i);
  }, []);

  return (
    <section id="top" className="hero" data-section-tone="paper">
      <div className="hero__grid">
        {/* LEFT */}
        <div className="hero__left">
          <h1 className="hero__heading">
            Intelligent
            <span className="em">foresight</span>
          </h1>
          <p className="hero__lead">
            SIA partners with governments, international organizations, and
            development institutions to design AI strategies that are
            responsible, inclusive, and built to last.
          </p>
        </div>

        {/* CENTER — blue panel with SIA petals cut out, photo behind */}
        <div className="hero__center">
          <div className="hero__photo">
            {HERO_IMAGES.map((src, i) => (
              <img key={src} src={src} alt="" className={i === idx ? "is-active" : ""} />
            ))}
          </div>
          <svg className="hero__cutout"
               viewBox="0 0 140 100"
               preserveAspectRatio="xMidYMid slice"
               aria-hidden>
            <defs>
              <mask id="hero-mask" maskUnits="userSpaceOnUse">
                <rect width="140" height="100" fill="white" />
                {/* Six SIA petals laid out in viewBox 0..240. Larger size for impact. */}
                <svg x="32" y="12" width="76" height="76" viewBox="14 76 116 84" preserveAspectRatio="xMidYMid meet">
                  {SIA_PETAL_PATHS.map((d, i) => <path key={i} d={d} fill="black" />)}
                </svg>
              </mask>
            </defs>
            <rect width="140" height="100" fill="#043ada" mask="url(#hero-mask)" />
          </svg>
        </div>

        {/* RIGHT */}
        <div className="hero__right">
          <div className="hero__dots-grid" aria-hidden>
            <span className="pulse-dot" />
            <span className="pulse-dot" style={{ animationDelay: "-0.6s" }} />
            <span className="pulse-dot" style={{ animationDelay: "-1.2s" }} />
            <span className="pulse-dot" style={{ animationDelay: "-1.8s" }} />
          </div>
          <div className="hero__vlabel">AI strategy &amp; transformation</div>
          <div />
        </div>
      </div>

      {/* Green CTA strip below the hero panels */}
      <div className="hero__cta-strip">
        <a href={MAILTO}>Schedule a consultation <Arrow /></a>
        <a href="#services" onClick={(e) => { e.preventDefault(); document.getElementById("services")?.scrollIntoView({ behavior: "smooth" }); }}>
          Explore our services <Arrow />
        </a>
        <span className="hero__cta-spacer" aria-hidden />
      </div>
    </section>
  );
}

/* ─────────── Stats ─────────── */
function Stats() {
  return (
    <section className="section section--paper" data-section-tone="paper"
             style={{ paddingTop: "clamp(56px, 6vw, 88px)", paddingBottom: "clamp(56px, 6vw, 88px)" }}>
      <div className="wrap">
        <div className="stats-row">
          <div className="stat">
            <InlineIcon src="assets/icons/icon-01.svg" size={56} className="stat__icon"
                        style={{ color: "var(--sia-blue)", "--ic-accent": "var(--sia-green)" }} />
            <div className="stat__n">5,000<span className="em" style={{ color: "var(--sia-blue)" }}>+</span></div>
            <div className="stat__l">professionals trained</div>
          </div>
          <div className="stat">
            <InlineIcon src="assets/icons/icon-03.svg" size={56} className="stat__icon"
                        style={{ color: "var(--sia-blue)", "--ic-accent": "var(--sia-green)" }} />
            <div className="stat__n">18<span className="em" style={{ color: "var(--sia-blue)" }}>+</span></div>
            <div className="stat__l">years of experience</div>
          </div>
          <div className="stat">
            <InlineIcon src="assets/icons/icon-02-dots.svg" size={56} className="stat__icon"
                        style={{ color: "var(--sia-blue)", "--ic-accent": "var(--sia-green)" }} />
            <div className="stat__n">7</div>
            <div className="stat__l">practice areas</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── About SIA ─────────── */
function About() {
  return (
    <section id="about" className="section section--paper" data-section-tone="paper"
             style={{ paddingTop: "clamp(48px, 5vw, 80px)" }}>
      <div className="wrap">
        <div className="about-eyebrow">
          <SiaMark size={44} color="var(--sia-black)" />
          <h2>ABOUT SIA</h2>
        </div>
        <div className="about-grid">
          <div className="about-text">
            <h3>AI transformation built for the institutions that matter most.</h3>
            <p>
              SIA is an independent AI strategy and transformation consultancy
              that works exclusively with governments, international
              organizations, private sector, and development institutions. We
              help the world's most complex organizations navigate AI adoption
              with confidence — delivering the strategies, governance
              frameworks, workforce capabilities, and custom tools they need
              to harness AI responsibly and at scale.
            </p>
            <p style={{ opacity: 0.78 }}>
              We combine deep institutional expertise rooted in over 18 years
              of experience within the United Nations system and international
              development with hands-on AI technical fluency. We operate at
              the intersection where AI capability meets institutional reality.
            </p>
          </div>
          <div className="about-mark" aria-hidden>
            <SiaLogo color="#ffffff" accent="#ffffff"
                     style={{ width: "72%", height: "auto", maxWidth: 320 }} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Approach ─────────── */
const PRINCIPLES = [
  { n: "01", t: "Perception before prescription", d: "We listen deeply, assess rigorously, and understand institutional context before recommending any solution." },
  { n: "02", t: "Responsible innovation",         d: "Ethics, privacy, inclusion, and human rights are embedded in everything we design — not added as compliance checkboxes." },
  { n: "03", t: "Institutional empowerment",      d: "We build capacity, not dependency. Our goal is to leave every institution stronger and more autonomous in their AI journey." },
];

function Approach() {
  return (
    <section id="approach" className="section section--paper" data-section-tone="paper"
             style={{ paddingTop: "clamp(24px, 3vw, 40px)" }}>
      <div className="wrap">
        <div className="principles">
          {PRINCIPLES.map((p) => (
            <div key={p.n} className="principle">
              <div className="principle__top">
                <span className="principle__n">{p.n}</span>
                <Sparkle size={28} color="var(--sia-green)" className="principle__star" />
              </div>
              <div className="principle__t">{p.t}</div>
              <div className="principle__d">{p.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Services ─────────── */
// Layout per wireframe (3-col grid):
//   Col 1 row 1: Intro     Col 2 row 1: Strategy (WHITE)        Col 3 row 1: Workforce (BLUE)
//   Col 1 rows 2-4: Image  Col 2 row 2: Tools (BLUE)             Col 3 row 2: Responsible (WHITE)
//                          Col 2 row 3: Public Sector (WHITE)    Col 3 row 3: Ecosystem (WHITE)
//                          Col 2 row 4: Research (BLUE)          Col 3 row 4: Get to know (GREEN)
const SERVICES_MID = [
  { t: "AI Strategy & Digital Transformation",
    i: "icon-19.svg", variant: "white",
    d: "Institutional AI roadmaps, adoption frameworks, workflow integration, and organizational change management." },
  { t: "AI Tools & Workflow Automation",
    i: "icon-10.svg", variant: "blue",
    d: "Custom AI assistants and tools for institutional workflows — research synthesis, policy drafting, and knowledge systems." },
  { t: "AI for Public Sector & Development",
    i: "icon-12.svg", variant: "white",
    d: "AI applications aligned with SDGs, inclusive digital development, humanitarian coordination, and public administration." },
  { t: "Research, Policy & Thought Leadership",
    i: "icon-11.svg", variant: "blue",
    d: "AI policy research, strategic foresight, future-of-work studies, and knowledge products." },
];
const SERVICES_RIGHT = [
  { t: "AI Workforce Upskilling & Capacity Development",
    i: "icon-09.svg", variant: "blue",
    d: "AI literacy-to-fluency programs for policymakers — bootcamps, executive briefings, and training-of-trainers models." },
  { t: "Responsible AI Governance",
    i: "icon-21.svg", variant: "white",
    d: "Responsible AI frameworks, safety, ethics, privacy, digital rights, and policy advisory for public-sector AI." },
  { t: "Ecosystem Partnerships & Innovation",
    i: "icon-13.svg", variant: "white",
    d: "Multi-stakeholder AI coalitions, innovation program design, and strategic technology partnerships." },
];

function ServiceCard({ s }) {
  return (
    <article className={`s-card ${s.variant === "blue" ? "s-card--blue" : ""}`}>
      <InlineIcon src={`assets/icons/${s.i}`} size={null}
                  className="s-card__icon"
                  style={{ width: 50, height: 50 }} />
      <h3 className="s-card__title">{s.t}</h3>
      <p className="s-card__desc">{s.d}</p>
    </article>
  );
}

function Services() {
  return (
    <section id="services" className="section section--paper" data-section-tone="paper">
      <div className="wrap">
        <div className="services-eyebrow">
          <ChevronQuote size={40} color="var(--sia-black)" />
          <h2 className="services-title">OUR SERVICES</h2>
        </div>

        <div className="services-grid">
          {/* Col 1 row 1 */}
          <div className="s-intro">
            <h3>End-to-end AI transformation</h3>
            <p>From first assessment to full-scale deployment, SIA provides the strategic, technical, and human infrastructure for responsible AI adoption.</p>
          </div>

          {/* Col 1 rows 2-4 - image */}
          <div className="s-image"
               style={{ backgroundImage: "url('assets/imagery/astronaut-ufo.jpg')" }}
               aria-hidden />

          {/* Col 2 (rows 1..4) and Col 3 (rows 1..4): interleave them */}
          {[0,1,2,3].map((row) => (
            <React.Fragment key={row}>
              <ServiceCard s={SERVICES_MID[row]} />
              {row < 3 ? (
                <ServiceCard s={SERVICES_RIGHT[row]} />
              ) : (
                <article className="s-card s-card--cta">
                  <InlineIcon src="assets/icons/icon-14.svg" size={null}
                              className="s-card__icon"
                              style={{ width: 50, height: 50 }} />
                  <h3>Get to know how SIA can help transform your work</h3>
                  <a href={MAILTO}>Schedule a consultation</a>
                </article>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Methodology ─────────── */
const PHASES = [
  { t: "Discover", d: "Institutional landscape assessment, AI readiness audits, stakeholder mapping, and opportunity identification.", i: "icon-15.svg" },
  { t: "Design",   d: "Co-creation of AI strategies, governance frameworks, and transformation roadmaps with your teams.",            i: "icon-16.svg" },
  { t: "Develop",  d: "Building the tools, training programs, and systems that bring your strategy to life.",                          i: "icon-17.svg" },
  { t: "Deploy",   d: "Implementation support with change management, training-of-trainers, and ongoing advisory.",                    i: "icon-18.svg" },
];

function Methodology() {
  return (
    <section className="section section--paper" data-section-tone="paper"
             style={{ paddingTop: "clamp(24px, 3vw, 40px)" }}>
      <div className="wrap">
        <div className="method">
          <div className="method__inner">
            <div className="method__head">
              <SiaMark size={40} color="#ffffff" />
              <div className="method__title">OUR<br />APPROACH</div>
              <div className="method__sub">From insight to impact</div>
              <div className="method__copy">
                Every engagement follows our four-phase methodology, adapted
                to each institution's unique context and readiness level.
              </div>
            </div>
            <div className="method__phases">
              {PHASES.map((p) => (
                <div key={p.t} className="phase-card">
                  <InlineIcon src={`assets/icons/${p.i}`} size={null}
                              className="phase-card__icon"
                              style={{ width: 40, height: 40 }} />
                  <div className="phase-card__t">{p.t}</div>
                  <div className="phase-card__d">{p.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Sectors ─────────── */
const SECTORS = [
  "Governments & Public Sector",
  "Innovation Ecosystems",
  "Development Agencies & NGOs",
  "Higher Education & Research",
  "International Organizations",
];

const SECTOR_STARS = [
  { x: 12, y: 16, s: 10, d: 0.0 },
  { x: 88, y: 24, s: 12, d: 0.8 },
  { x: 52, y: 8,  s: 8,  d: 1.6 },
  { x: 6,  y: 70, s: 10, d: 0.4 },
  { x: 94, y: 60, s: 8,  d: 2.2 },
  { x: 22, y: 88, s: 12, d: 1.0 },
  { x: 76, y: 92, s: 10, d: 1.7 },
];

function Sectors() {
  return (
    <section id="sectors" className="section sectors" data-section-tone="dark">
      <div className="wrap">
        <div className="sectors__head">
          <SiaMark size={48} color="#ffffff" className="sectors__icon" />
          <h2 className="sectors__title">SECTORS WE SERVE</h2>
        </div>
        <div className="sectors__divider" />

        <div className="sectors__field">
          <div className="constellation" aria-hidden>
            {SECTOR_STARS.map((s, i) => (
              <span key={i} className="star" style={{
                left: `${s.x}%`, top: `${s.y}%`,
                width: s.s, height: s.s,
                animationDelay: `-${s.d}s`,
              }} />
            ))}
          </div>
          <div className="sectors__sub">Trusted across institutions that shape the world</div>
          <div className="sectors__pills">
            {SECTORS.map((s, i) => (
              <div key={s} className="pill" data-cursor-hover>
                <span className="pill__n">{String(i + 1).padStart(2, "0")}</span>
                {s}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Founder ─────────── */
function Founder() {
  return (
    <section id="founder" className="section section--paper" data-section-tone="paper">
      <div className="wrap">
        <div className="founder">
          <div className="founder__col">
            <div className="h-eyebrow" style={{ marginBottom: 8 }}>
              <InlineIcon src="assets/icons/sia-star.svg" size={null}
                          style={{ width: 22, height: 22, color: "var(--sia-black)", "--ic-accent": "var(--sia-green)" }} />
              Our Founder
            </div>
            <h2 className="founder__title">OUR FOUNDER</h2>
            <div className="founder__name">Emad Karim, CEO</div>
            <p className="founder__bio">
              Global expert in advocacy, innovation, and AI transformation
              with over 18 years of experience across Asia-Pacific, the MENA
              region, and the United Nations system. Founded the UN Women AI
              School, equipping 5,000+ professionals to build and govern
              safe, inclusive AI. M.A. in Educational Communication and
              Technology from New York University. Microsoft Certified
              Solutions and Applications Developer.
            </p>
            <a href={LINKEDIN} target="_blank" rel="noreferrer" className="founder__link">
              Connect on LinkedIn <Arrow />
            </a>
            <Sparkle size={28} color="var(--sia-black)" style={{ position: "absolute", right: 28, bottom: 28 }} />
          </div>

          <div className="founder__quote-col">
            <div className="founder__qmark">"</div>
            <p className="founder__quote">
              AI will reshape every institution on earth. The question is
              whether that reshaping will be driven by those who understand
              technology, or by those who understand both the technology and
              the people it must serve.{" "}
              <span className="em-end">I founded SIA to be the latter.</span>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Bottom CTA ─────────── */
function CtaBottom() {
  return (
    <section id="contact" className="cta-bottom" data-section-tone="paper">
      <div className="cta-bottom__grid">
        <div>
          <p className="cta-bottom__lead">
            Whether you are beginning your AI journey, scaling existing
            initiatives, or navigating complex governance challenges — we
            are here to help.
          </p>
          <div className="cta-bottom__buttons">
            <a href={MAILTO} className="btn btn-green">Email us <Arrow /></a>
            <a href={LINKEDIN} target="_blank" rel="noreferrer" className="btn btn-ghost-dark">
              Connect on LinkedIn <Arrow />
            </a>
          </div>
        </div>
        <h2 className="cta-bottom__heading">
          <span className="cta-bottom__line">
            LET'S SHAPE
            <Sparkle size={32} color="var(--sia-black)" />
          </span>
          <span className="cta-bottom__line">THE FUTURE OF</span>
          <span className="cta-bottom__line">
            AI <span className="em-italic" style={{ color: "var(--sia-blue)" }}>TOGETHER</span>
          </span>
        </h2>
      </div>
    </section>
  );
}

/* ─────────── Footer ─────────── */
function Footer() {
  const scrollTo = (e, id) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };
  return (
    <footer className="footer" data-section-tone="dark">
      <div className="footer__top">
        <div className="footer__brandcol">
          <div className="footer__mark">
            <SiaLogo color="var(--sia-green)" accent="var(--sia-green)"
                     style={{ width: 92, height: 40 }} />
          </div>
          <p className="footer__addr">
            Meydan Grandstand, 6th floor<br />
            Meydan Road, Nad Al Sheba<br />
            Dubai, UAE
          </p>
        </div>
        <div>
          <h4>Navigate</h4>
          <ul>
            <li><a href="#about" onClick={(e) => scrollTo(e, "about")}>About</a></li>
            <li><a href="#services" onClick={(e) => scrollTo(e, "services")}>Services</a></li>
            <li><a href="#approach" onClick={(e) => scrollTo(e, "approach")}>Approach</a></li>
            <li><a href="#sectors" onClick={(e) => scrollTo(e, "sectors")}>Sectors</a></li>
            <li><a href="#contact" onClick={(e) => scrollTo(e, "contact")}>Contact</a></li>
          </ul>
        </div>
        <div className="footer__contact">
          <h4>Get in touch</h4>
          <a href={MAILTO}>{EMAIL}</a>
          <a href="https://siaconsulting.ai" target="_blank" rel="noreferrer">siaconsulting.ai</a>
        </div>
      </div>

      {/* Decorative petals row with giant "sia" wordmark, per wireframe */}
      <div className="footer__decor" aria-hidden>
        <div className="pet pet-blue"  ><FooterPetal orientation="top" /></div>
        <div className="pet pet-paper" ><FooterPetal orientation="bottom" /></div>
        <div className="pet pet-gray"  ><FooterPetal orientation="top" /></div>
        <div className="footer__word">sia</div>
        <div className="pet pet-green" ><FooterPetal orientation="top" /></div>
      </div>

      <div className="footer__bottom">
        <div>© {new Date().getFullYear()} SIA Consulting — All rights reserved</div>
        <div>Strategic · Inclusive · Adaptive</div>
      </div>
    </footer>
  );
}

/* ─────────── Active section tracker ─────────── */
function useActiveSection(ids) {
  const [active, setActive] = useState({ id: ids[0], tone: "paper" });
  useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        let best = null;
        for (const e of entries) {
          if (e.isIntersecting) {
            if (!best || e.boundingClientRect.top < best.boundingClientRect.top) best = e;
          }
        }
        if (best) {
          setActive({
            id: best.target.id,
            tone: best.target.dataset.sectionTone || "paper",
          });
        }
      },
      { rootMargin: "-30% 0px -60% 0px", threshold: 0 }
    );
    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, [ids.join("|")]);
  return active;
}

/* ─────────── App ─────────── */
function App() {
  const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { tweaks: TWEAK_DEFAULTS, setTweak: () => {} };
  const tweaks = t.tweaks || t;
  const setTweak = t.setTweak || (() => {});

  const ids = useMemo(() => ["top", "about", "approach", "services", "sectors", "founder", "contact"], []);
  const active = useActiveSection(ids);
  const activeNavId = active.id === "founder" ? "sectors"
    : active.id === "top" ? null
    : active.id;

  useEffect(() => {
    document.documentElement.style.setProperty("--pulse-speed", tweaks.pulseSpeed || 1);
  }, [tweaks.pulseSpeed]);
  useEffect(() => {
    document.body.style.cursor = (tweaks.cursor === "off") ? "auto" : "none";
  }, [tweaks.cursor]);

  return (
    <React.Fragment>
      <Cursor mode={tweaks.cursor} />
      <Nav activeId={activeNavId} tone={active.tone} />
      <main>
        <Hero />
        <Stats />
        <About />
        <Approach />
        <Services />
        <Methodology />
        <Sectors />
        <Founder />
        <CtaBottom />
        <Footer />
      </main>

      {window.TweaksPanel ? (
        <window.TweaksPanel title="Tweaks">
          {window.TweakSection ? (
            <window.TweakSection title="Cursor">
              <window.TweakRadio
                label="Style"
                value={tweaks.cursor}
                onChange={(v) => setTweak("cursor", v)}
                options={[
                  { value: "dot",  label: "Dot" },
                  { value: "blob", label: "Blob" },
                  { value: "off",  label: "Off" },
                ]}
              />
            </window.TweakSection>
          ) : null}
          {window.TweakSection ? (
            <window.TweakSection title="Pulse dots">
              <window.TweakSlider
                label="Speed"
                min={0.2} max={3} step={0.1}
                value={tweaks.pulseSpeed}
                onChange={(v) => setTweak("pulseSpeed", v)}
                format={(v) => `${v.toFixed(1)}×`}
              />
            </window.TweakSection>
          ) : null}
        </window.TweaksPanel>
      ) : null}
    </React.Fragment>
  );
}

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