/* global React, ReactDOM */
const { useState, useEffect } = React;
const { BrandMark, HeroMap, DemoMap, DemoPanel, FeatureViz, VehicleDiagram, DriverAiViz, MarqueeIcon } = window.GroppFlowComponents;
const { DriverAiPage, PlatformSection, AgentsSection, AgentsPage, PlatformPage, HardwarePage } = window;
const { TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, useTweaks } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "language": "es",
  "accent": "#2F6FE8",
  "showMarquee": true,
  "heroVariant": "map"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  "Blue": "#2F6FE8",
  "Indigo": "#4B5EE8",
  "Teal": "#0E9A9A",
  "Lime": "#A8E640",
};

// === AI Agents Console ===
function AgentsConsole({ agents, callout, cta }) {
  const [active, setActive] = useState(0);
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 2200);
    return () => clearInterval(id);
  }, []);
  const agent = agents[active];

  return (
    <div className="agents-console">
      {/* Roster */}
      <div className="agents-roster">
        <div className="agents-roster-head mono">
          <span className="agents-dot"></span>
          <span>GROPP · AGENT MESH</span>
          <span className="agents-roster-count">{agents.length}/5</span>
        </div>
        {agents.map((a, i) => (
          <button
            key={a.code}
            className={`agent-row ${i === active ? "is-active" : ""}`}
            onClick={() => setActive(i)}
          >
            <span className="agent-code mono">{a.code}</span>
            <span className="agent-row-body">
              <span className="agent-row-name">{a.name}</span>
              <span className="agent-row-desc">{a.desc.split(".")[0]}.</span>
            </span>
            <span className={`agent-tag mono ${a.tag.toLowerCase() === "beta" ? "is-beta" : ""}`}>{a.tag}</span>
          </button>
        ))}
        <div className="agents-callout">
          <span className="agents-callout-mark mono">[ note ]</span>
          <p>{callout}</p>
        </div>
      </div>

      {/* Detail panel */}
      <div className="agents-detail">
        <div className="agents-detail-head">
          <div className="agent-portrait">
            <AgentGlyph code={agent.code} tick={tick} />
            <span className="agent-portrait-code mono">{agent.code}</span>
          </div>
          <div>
            <div className="agents-detail-eyebrow mono">AGENT · {String(active + 1).padStart(2, "0")}</div>
            <h3>{agent.name}</h3>
          </div>
          <span className={`agent-tag mono ${agent.tag.toLowerCase() === "beta" ? "is-beta" : ""}`}>● {agent.tag}</span>
        </div>
        <p className="agents-detail-desc">{agent.desc}</p>

        <div className="agents-stream">
          <div className="agents-stream-head mono">
            <span>LIVE FEED · {agent.code}</span>
            <span className="agents-stream-status">
              <span className="agents-stream-dot"></span>
              streaming
            </span>
          </div>
          <AgentStream agent={agent} tick={tick} />
        </div>

        <div className="agents-detail-foot">
          <a className="btn btn-primary" href="#cta">{cta}</a>
          <span className="mono agents-foot-meta">latency · 142ms · region: SAE-1</span>
        </div>
      </div>
    </div>
  );
}

function AgentGlyph({ code, tick }) {
  // Each agent gets a distinct minimal SVG
  if (code === "RT") {
    return (
      <svg viewBox="0 0 60 60" className="agent-glyph">
        <circle cx="30" cy="30" r="28" fill="none" stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 3" />
        <path d="M 12 42 Q 22 18, 36 28 T 50 18" fill="none" stroke="var(--accent)" strokeWidth="1.6" />
        <circle cx="12" cy="42" r="2.4" fill="var(--accent)" />
        <circle cx="50" cy="18" r="2.4" fill="var(--accent)" />
        <circle r="2" fill="var(--ink)">
          <animateMotion dur="3s" repeatCount="indefinite" path="M 12 42 Q 22 18, 36 28 T 50 18" />
        </circle>
      </svg>
    );
  }
  if (code === "CX") {
    return (
      <svg viewBox="0 0 60 60" className="agent-glyph">
        <rect x="8" y="14" width="30" height="22" rx="3" fill="none" stroke="var(--accent)" strokeWidth="1.4" />
        <rect x="22" y="26" width="30" height="22" rx="3" fill="var(--accent)" opacity="0.18" stroke="var(--accent)" strokeWidth="1.4" />
        <line x1="14" y1="22" x2="32" y2="22" stroke="var(--accent)" strokeWidth="1" />
        <line x1="14" y1="28" x2="26" y2="28" stroke="var(--accent)" strokeWidth="1" />
        <circle cx="30" cy="44" r="1.6" fill="var(--accent)">
          <animate attributeName="opacity" values="1;0.2;1;0.2;1" dur="1.2s" repeatCount="indefinite" />
        </circle>
        <circle cx="36" cy="44" r="1.6" fill="var(--accent)">
          <animate attributeName="opacity" values="0.2;1;0.2;1;0.2" dur="1.2s" repeatCount="indefinite" />
        </circle>
        <circle cx="42" cy="44" r="1.6" fill="var(--accent)">
          <animate attributeName="opacity" values="1;0.2;1;0.2;1" dur="1.2s" repeatCount="indefinite" begin="0.4s" />
        </circle>
      </svg>
    );
  }
  if (code === "SF") {
    return (
      <svg viewBox="0 0 60 60" className="agent-glyph">
        <path d="M 30 6 L 50 14 L 50 32 Q 50 46, 30 54 Q 10 46, 10 32 L 10 14 Z" fill="none" stroke="var(--accent)" strokeWidth="1.4" />
        <circle cx="30" cy="30" r="6" fill="var(--accent)" opacity="0.3">
          <animate attributeName="r" values="6;10;6" dur="2s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.4;0;0.4" dur="2s" repeatCount="indefinite" />
        </circle>
        <circle cx="30" cy="30" r="3.5" fill="var(--accent)" />
      </svg>
    );
  }
  if (code === "AN") {
    return (
      <svg viewBox="0 0 60 60" className="agent-glyph">
        <line x1="10" y1="50" x2="50" y2="50" stroke="var(--accent)" strokeWidth="1" />
        <line x1="10" y1="50" x2="10" y2="10" stroke="var(--accent)" strokeWidth="1" />
        {[
          { x: 16, h: 18 },
          { x: 24, h: 28 },
          { x: 32, h: 14 },
          { x: 40, h: 32 },
        ].map((b, i) => (
          <rect key={i} x={b.x} y={50 - b.h} width="5" height={b.h} fill="var(--accent)">
            <animate attributeName="height" values={`${b.h};${b.h * 0.6};${b.h}`} dur="2.4s" repeatCount="indefinite" begin={`${i * 0.3}s`} />
            <animate attributeName="y" values={`${50 - b.h};${50 - b.h * 0.6};${50 - b.h}`} dur="2.4s" repeatCount="indefinite" begin={`${i * 0.3}s`} />
          </rect>
        ))}
      </svg>
    );
  }
  if (code === "DI") {
    return (
      <svg viewBox="0 0 60 60" className="agent-glyph">
        <ellipse cx="30" cy="14" rx="18" ry="6" fill="none" stroke="var(--accent)" strokeWidth="1.4" />
        <path d="M 12 14 L 12 46 Q 12 52, 30 52 Q 48 52, 48 46 L 48 14" fill="none" stroke="var(--accent)" strokeWidth="1.4" />
        <ellipse cx="30" cy="28" rx="18" ry="5" fill="none" stroke="var(--accent)" strokeWidth="0.8" opacity="0.6" />
        <ellipse cx="30" cy="40" rx="18" ry="5" fill="none" stroke="var(--accent)" strokeWidth="0.8" opacity="0.6" />
        <circle cx="42" cy="40" r="3" fill="var(--accent)">
          <animate attributeName="opacity" values="1;0.3;1" dur="1.4s" repeatCount="indefinite" />
        </circle>
      </svg>
    );
  }
  return null;
}

function AgentStream({ agent, tick }) {
  // Generate 4 rotating log lines per agent
  const streams = {
    RT: [
      { t: "14:02:11", lvl: "INFO", msg: "traffic delta detected · MVD-04 · +18% on Av. Italia" },
      { t: "14:02:12", lvl: "PLAN", msg: "re-sequencing 14 stops · ΔETA −9 min" },
      { t: "14:02:14", lvl: "PUSH", msg: "dispatched to driver Cabrera · acked" },
      { t: "14:02:18", lvl: "OK",   msg: "route locked · saved 38 km" },
    ],
    CX: [
      { t: "14:02:10", lvl: "MSG",  msg: "wa+598..342 → 'a qué hora llega?'" },
      { t: "14:02:10", lvl: "PLAN", msg: "ETA window 16:20–16:50 · stop #7" },
      { t: "14:02:11", lvl: "REPLY", msg: "auto-reply sent · es-UY · friendly" },
      { t: "14:02:11", lvl: "OK",   msg: "CSAT signal +1 · ticket closed" },
    ],
    SF: [
      { t: "14:02:08", lvl: "WATCH", msg: "cabin cam · driver Pereyra · attention 0.62" },
      { t: "14:02:09", lvl: "WARN", msg: "yawn detected · 2nd in 6 min" },
      { t: "14:02:09", lvl: "ACT",  msg: "in-cabin nudge · 'tomate 5, te invitamos un café'" },
      { t: "14:02:10", lvl: "OK",   msg: "attention 0.91 · resumed" },
    ],
    AN: [
      { t: "14:02:00", lvl: "PULL", msg: "ingest · 12.4k events from last 24h" },
      { t: "14:02:02", lvl: "DIFF", msg: "on-time ↓ 3.1% in Zona 4 vs. 7d avg" },
      { t: "14:02:03", lvl: "WHY",  msg: "root cause · light @ 18 de Julio (3 stops downstream)" },
      { t: "14:02:04", lvl: "PLAN", msg: "experiment proposed · reroute via Galicia · ETA Mon" },
    ],
    DI: [
      { t: "14:02:05", lvl: "SCAN", msg: "audit · 312 stops · 4 anomalies" },
      { t: "14:02:05", lvl: "FIX",  msg: "address normalized · 'Bv Artigas 1234' → canonical" },
      { t: "14:02:06", lvl: "WARN", msg: "sensor drift · GPS fix var > 30m on VAN-09" },
      { t: "14:02:07", lvl: "OK",   msg: "47 fixes applied · 3 escalated" },
    ],
  };
  const lines = streams[agent.code] || [];
  const visible = lines.slice(0, Math.min(lines.length, 1 + (tick % lines.length) + 1));
  return (
    <div className="agents-stream-body">
      {lines.map((l, i) => {
        const shown = i <= (tick % lines.length);
        return (
          <div key={i} className={`agent-log ${shown ? "is-shown" : ""}`}>
            <span className="agent-log-t mono">{l.t}</span>
            <span className={`agent-log-lvl mono lvl-${l.lvl.toLowerCase()}`}>{l.lvl}</span>
            <span className="agent-log-msg">{l.msg}</span>
          </div>
        );
      })}
      <div className="agents-sample mono">
        <span className="agents-sample-mark">↳</span> {agent.sample}
      </div>
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.language || "en";
  const t = window.GROPP_COPY[lang];

  // Page state: "home" or "driver-ai"
  const [page, setPage] = useState(() => {
    if (typeof window !== "undefined" && window.location.hash === "#driver-ai-page") return "driver-ai";
    if (typeof window !== "undefined" && window.location.hash === "#agents-page") return "agents";
    if (typeof window !== "undefined" && window.location.hash === "#platform-page") return "platform";
    if (typeof window !== "undefined" && window.location.hash === "#hardware-page") return "hardware";
    return "home";
  });
  const goDriverAi = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    setPage("driver-ai");
    window.history.replaceState(null, "", "#driver-ai-page");
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const goPlatform = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    setPage("platform");
    window.history.replaceState(null, "", "#platform-page");
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const goAgents = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    setPage("agents");
    window.history.replaceState(null, "", "#agents-page");
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const goHome = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    setPage("home");
    window.history.replaceState(null, "", "#");
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const goHardware = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    setPage("hardware");
    window.history.replaceState(null, "", "#hardware-page");
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // Hash listener (back / forward)
  useEffect(() => {
    const onHash = () => {
      if (window.location.hash === "#driver-ai-page") setPage("driver-ai");
      else if (window.location.hash === "#agents-page") setPage("agents");
      else if (window.location.hash === "#platform-page") setPage("platform");
      else if (window.location.hash === "#hardware-page") setPage("hardware");
      else setPage("home");
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    // lime stays as the consistent secondary accent
    document.documentElement.style.setProperty("--accent-2", "#A8E640");
  }, [tweaks.accent]);

  // === HARDWARE PAGE VIEW ===
  if (page === "hardware") {
    return (
      <>
        <nav className="nav">
          <div className="container nav-inner">
            <a className="brand" href="#" onClick={goHome}>
              <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
              <span className="brand-chip">Flow</span>
            </a>
            <div className="nav-links">
              <a href="#" onClick={goHome}>{lang === "es" ? "Inicio" : "Home"}</a>
              <a href="#" className="is-current" onClick={(e) => { e.preventDefault(); window.scrollTo({top:0,behavior:"smooth"}); }}>Hardware</a>
              <a href="#" onClick={goDriverAi}>Driver AI</a>
              <a href="#" onClick={goPlatform}>{lang === "es" ? "Plataforma" : "Platform"}</a>
              <a href="#" onClick={goAgents}>{lang === "es" ? "Agentes IA" : "AI Agents"}</a>
            </div>
            <div className="nav-actions">
              <div className="lang-toggle">
                <button className={lang === "en" ? "on" : ""} onClick={() => setTweak("language", "en")}>EN</button>
                <button className={lang === "es" ? "on" : ""} onClick={() => setTweak("language", "es")}>ES</button>
              </div>
              <a className="btn btn-ghost" href="#">{t.nav.login}</a>
              <a className="btn btn-primary" href="#hw-cta">{t.nav.demo} <span className="btn-arrow">→</span></a>
            </div>
          </div>
        </nav>

        <HardwarePage lang={lang} onBack={goHome} />

        <footer className="footer">
          <div className="container">
            <div className="footer-top">
              <div className="footer-brand">
                <a className="brand" href="#" onClick={goHome}>
                  <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
                  <span className="brand-chip">Flow</span>
                </a>
                <p>{t.footer.tag}</p>
              </div>
              <div>
                <h5>Product</h5>
                <ul>{t.footer.product.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
              <div>
                <h5>Company</h5>
                <ul>{t.footer.company.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
              <div>
                <h5>Legal</h5>
                <ul>{t.footer.legal.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
            </div>
            <div className="footer-bottom">
              <span>{t.footer.copyright}</span>
              <span>{t.footer.version}</span>
            </div>
          </div>
        </footer>

        <TweaksPanel>
          <TweakSection label="Language" />
          <TweakRadio label="Locale" value={tweaks.language} options={["en", "es"]} onChange={(v) => setTweak("language", v)} />
          <TweakSection label="Accent" />
          <TweakColor label="Color" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
          <TweakRadio label="Preset" value={tweaks.accent} options={Object.values(ACCENT_PRESETS)} onChange={(v) => setTweak("accent", v)} />
        </TweaksPanel>
      </>
    );
  }

  // === PLATFORM PAGE VIEW ===
  if (page === "platform") {
    return (
      <>
        <nav className="nav">
          <div className="container nav-inner">
            <a className="brand" href="#" onClick={goHome}>
              <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
              <span className="brand-chip">Flow</span>
            </a>
            <div className="nav-links">
              <a href="#" onClick={goHome}>{lang === "es" ? "Inicio" : "Home"}</a>
              <a href="#" onClick={goHardware}>Hardware</a>
              <a href="#" onClick={goDriverAi}>Driver AI</a>
              <a href="#" className="is-current" onClick={(e) => { e.preventDefault(); window.scrollTo({top:0, behavior:"smooth"}); }}>{lang === "es" ? "Plataforma" : "Platform"}</a>
              <a href="#" onClick={goAgents}>{lang === "es" ? "Agentes IA" : "AI Agents"}</a>
            </div>
            <div className="nav-actions">
              <div className="lang-toggle">
                <button className={lang === "en" ? "on" : ""} onClick={() => setTweak("language", "en")}>EN</button>
                <button className={lang === "es" ? "on" : ""} onClick={() => setTweak("language", "es")}>ES</button>
              </div>
              <a className="btn btn-ghost" href="#">{t.nav.login}</a>
              <a className="btn btn-primary" href="#cta">{t.nav.demo} <span className="btn-arrow">→</span></a>
            </div>
          </div>
        </nav>

        <PlatformPage lang={lang} onBack={goHome} />

        <footer className="footer">
          <div className="container">
            <div className="footer-top">
              <div className="footer-brand">
                <a className="brand" href="#" onClick={goHome}>
                  <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
                  <span className="brand-chip">Flow</span>
                </a>
                <p>{t.footer.tag}</p>
              </div>
              <div>
                <h5>Product</h5>
                <ul>{t.footer.product.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
              <div>
                <h5>Company</h5>
                <ul>{t.footer.company.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
              <div>
                <h5>Legal</h5>
                <ul>{t.footer.legal.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
            </div>
            <div className="footer-bottom">
              <span>{t.footer.copyright}</span>
              <span>{t.footer.version}</span>
            </div>
          </div>
        </footer>

        <TweaksPanel>
          <TweakSection label="Language" />
          <TweakRadio label="Locale" value={tweaks.language} options={["en", "es"]} onChange={(v) => setTweak("language", v)} />
          <TweakSection label="Accent" />
          <TweakColor label="Color" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
          <TweakRadio label="Preset" value={tweaks.accent} options={Object.values(ACCENT_PRESETS)} onChange={(v) => setTweak("accent", v)} />
        </TweaksPanel>
      </>
    );
  }

  // === AGENTS PAGE VIEW ===
  if (page === "agents") {
    return (
      <>
        <nav className="nav">
          <div className="container nav-inner">
            <a className="brand" href="#" onClick={goHome}>
              <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
              <span className="brand-chip">Flow</span>
            </a>
            <div className="nav-links">
              <a href="#" onClick={goHome}>{lang === "es" ? "Inicio" : "Home"}</a>
              <a href="#" onClick={goHardware}>Hardware</a>
              <a href="#" onClick={goDriverAi}>Driver AI</a>
              <a href="#" className="is-current" onClick={(e) => { e.preventDefault(); window.scrollTo({top:0, behavior:"smooth"}); }}>{lang === "es" ? "Agentes IA" : "AI Agents"}</a>
            </div>
            <div className="nav-actions">
              <div className="lang-toggle">
                <button className={lang === "en" ? "on" : ""} onClick={() => setTweak("language", "en")}>EN</button>
                <button className={lang === "es" ? "on" : ""} onClick={() => setTweak("language", "es")}>ES</button>
              </div>
              <a className="btn btn-ghost" href="#">{t.nav.login}</a>
              <a className="btn btn-primary" href="#cta">{t.nav.demo} <span className="btn-arrow">→</span></a>
            </div>
          </div>
        </nav>

        <AgentsPage copy={t.agents} lang={lang} onBack={goHome} />

        <footer className="footer">
          <div className="container">
            <div className="footer-top">
              <div className="footer-brand">
                <a className="brand" href="#" onClick={goHome}>
                  <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
                  <span className="brand-chip">Flow</span>
                </a>
                <p>{t.footer.tag}</p>
              </div>
              <div>
                <h5>Product</h5>
                <ul>{t.footer.product.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
              <div>
                <h5>Company</h5>
                <ul>{t.footer.company.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
              <div>
                <h5>Legal</h5>
                <ul>{t.footer.legal.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
            </div>
            <div className="footer-bottom">
              <span>{t.footer.copyright}</span>
              <span>{t.footer.version}</span>
            </div>
          </div>
        </footer>

        <TweaksPanel>
          <TweakSection label="Language" />
          <TweakRadio label="Locale" value={tweaks.language} options={["en", "es"]} onChange={(v) => setTweak("language", v)} />
          <TweakSection label="Accent" />
          <TweakColor label="Color" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
          <TweakRadio label="Preset" value={tweaks.accent} options={Object.values(ACCENT_PRESETS)} onChange={(v) => setTweak("accent", v)} />
        </TweaksPanel>
      </>
    );
  }

  // === DRIVER AI PAGE VIEW ===
  if (page === "driver-ai") {
    const dap = t.driverAiPage;
    return (
      <>
        <nav className="nav">
          <div className="container nav-inner">
            <a className="brand" href="#" onClick={goHome}>
              <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
              <span className="brand-chip">Flow</span>
            </a>
            <div className="nav-links">
              <a href="#" onClick={goHome}>{lang === "es" ? "Inicio" : "Home"}</a>
              <a href="#" onClick={goHardware}>Hardware</a>
              <a href="#" className="is-current" onClick={(e) => { e.preventDefault(); window.scrollTo({top: 0, behavior: "smooth"}); }}>Driver AI</a>
              <a href="#" onClick={goAgents}>Agentes IA</a>
            </div>
            <div className="nav-actions">
              <div className="lang-toggle">
                <button className={lang === "en" ? "on" : ""} onClick={() => setTweak("language", "en")}>EN</button>
                <button className={lang === "es" ? "on" : ""} onClick={() => setTweak("language", "es")}>ES</button>
              </div>
              <a className="btn btn-ghost" href="#">{t.nav.login}</a>
              <a className="btn btn-primary" href="#dap-cta">{t.nav.demo} <span className="btn-arrow">→</span></a>
            </div>
          </div>
        </nav>

        <DriverAiPage copy={dap} lang={lang} onBack={goHome} />

        <footer className="footer">
          <div className="container">
            <div className="footer-top">
              <div className="footer-brand">
                <a className="brand" href="#" onClick={goHome}>
                  <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
                  <span className="brand-chip">Flow</span>
                </a>
                <p>{t.footer.tag}</p>
              </div>
              <div>
                <h5>Product</h5>
                <ul>{t.footer.product.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
              <div>
                <h5>Company</h5>
                <ul>{t.footer.company.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
              <div>
                <h5>Legal</h5>
                <ul>{t.footer.legal.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
              </div>
            </div>
            <div className="footer-bottom">
              <span>{t.footer.copyright}</span>
              <span>{t.footer.version}</span>
            </div>
          </div>
        </footer>

        <TweaksPanel>
          <TweakSection label="Language" />
          <TweakRadio label="Locale" value={tweaks.language} options={["en", "es"]} onChange={(v) => setTweak("language", v)} />
          <TweakSection label="Accent" />
          <TweakColor label="Color" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
          <TweakRadio label="Preset" value={tweaks.accent} options={Object.values(ACCENT_PRESETS)} onChange={(v) => setTweak("accent", v)} />
        </TweaksPanel>
      </>
    );
  }

  return (
    <>
      {/* NAV */}
      <nav className="nav">
        <div className="container nav-inner">
          <a className="brand" href="#">
            <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
            <span className="brand-chip">Flow</span>
          </a>
          <div className="nav-links">
            <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({top:0, behavior:"smooth"}); }}>{lang === "es" ? "Inicio" : "Home"}</a>
            <a href="#" onClick={goHardware}>Hardware</a>
            <a href="#driver-ai-page" onClick={goDriverAi}>Driver AI</a>
            <a href="#platform-page" onClick={goPlatform}>{lang === "es" ? "Plataforma" : "Platform"}</a>
            <a href="#agents-page" onClick={goAgents}>{lang === "es" ? "Agentes IA" : "AI Agents"}</a>
          </div>
          <div className="nav-actions">
            <div className="lang-toggle">
              <button className={lang === "en" ? "on" : ""} onClick={() => setTweak("language", "en")}>EN</button>
              <button className={lang === "es" ? "on" : ""} onClick={() => setTweak("language", "es")}>ES</button>
            </div>
            <a className="btn btn-ghost" href="#">{t.nav.login}</a>
            <a className="btn btn-primary" href="#cta">{t.nav.demo} <span className="btn-arrow">→</span></a>
          </div>
        </div>
      </nav>

      {/* HERO */}
      <section className="hero">
        <div className="hero-bg"></div>
        <div className="hero-grid-bg"></div>
        <div className="container hero-inner">
          <div className="hero-copy">
            <h1>
              {t.hero.title_a} <span className="accent">{t.hero.title_b}</span><br />
              {t.hero.title_c}
            </h1>
            <p className="hero-sub">{t.hero.sub}</p>
            <div className="hero-cta">
              <a className="btn btn-primary" href="#cta">{t.hero.cta_a} <span className="btn-arrow">→</span></a>
              <a className="btn btn-ghost" href="#">▶ &nbsp;{t.hero.cta_b}</a>
            </div>
            <div className="hero-meta">
              {t.hero.meta.map((m, i) => (
                <div key={i} className="hero-meta-item">
                  <div className="hero-meta-num">
                    {m.arrow === "down" && (
                      <svg className="hero-meta-arrow" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="M12 4v16M5 13l7 7 7-7"/>
                      </svg>
                    )}
                    {m.arrow === "up" && (
                      <svg className="hero-meta-arrow" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="M12 20V4M5 11l7-7 7 7"/>
                      </svg>
                    )}
                    {m.prefix && <span className="hero-meta-prefix">{m.prefix}</span>}
                    {m.num}<span className="unit">{m.unit}</span>
                  </div>
                  <div className="hero-meta-label">{m.label}</div>
                </div>
              ))}
            </div>
          </div>
          <HeroMap copy={t.map} lang={lang} />
        </div>
      </section>

      {/* MARQUEE */}
      {tweaks.showMarquee && (
        <section className="marquee">
          <div className="marquee-track">
            {[...t.marquee, ...t.marquee, ...t.marquee].map((m, i) => (
              <span key={i} className="marquee-item">
                <span className="sep"></span>
                <span className="marquee-icon"><MarqueeIcon name={m.icon} /></span>
                <span className="accent">{m.label}</span>
              </span>
            ))}
          </div>
        </section>
      )}

      {/* DEMO */}
      <section className="section section--mist" id="demo">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>
                {t.demo.title_a}<span className="accent">{t.demo.title_b}</span>{t.demo.title_c}
              </h2>
            </div>
            <p>{t.demo.sub}</p>
          </div>
          <div className="demo">
            <DemoPanel copy={t.demo} />
            <DemoMap chips={t.demo.chips} lang={lang} />
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section className="section" id="features">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>
                {t.features.title_a}<span className="accent">{t.features.title_b}</span>{t.features.title_c}
              </h2>
            </div>
            <p>{t.features.sub}</p>
          </div>
          <div className="features">
            {t.features.items.map((f, i) => (
              <div className="feature" key={i}>
                <h3>{f.title}</h3>
                <p>{f.body}</p>
                <div className="feature-visual">
                  <FeatureViz kind={["routing", "eta", "copilot", "driver"][i]} lang={lang} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="section section--mist" id="how">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>
                {t.how.title_a}<span className="accent">{t.how.title_b}</span>{t.how.title_c}
              </h2>
            </div>
            <p>{t.how.sub}</p>
          </div>
          <div className="steps">
            {t.how.steps.map((s, i) => (
              <div className="step" key={i}>
                <div className="step-num">{String(i + 1).padStart(2, "0")}</div>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* METRICS */}
      <section className="section section--ink tight">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>
                {t.metrics.title_a}<span className="accent">{t.metrics.title_b}</span>{t.metrics.title_c}
              </h2>
            </div>
            <p>{t.metrics.sub}</p>
          </div>
          <div className="metrics">
            {t.metrics.items.map((m, i) => (
              <div className="metric" key={i} style={{ "--w": `${[78, 92, 96, 64][i]}%` }}>
                <div className="metric-num">{m.num}<span className="unit">{m.unit}</span></div>
                <div className="metric-label">{m.label}</div>
                <div className="metric-bar"></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* VEHICLE INTELLIGENCE */}
      <section className="section" id="vehicle">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>
                {t.vehicle.title_a}<span className="accent">{t.vehicle.title_b}</span>{t.vehicle.title_c}
              </h2>
            </div>
            <p>{t.vehicle.sub}</p>
          </div>
          <VehicleDiagram sensors={t.vehicle.sensors} />
        </div>
      </section>

      {/* DRIVER AI */}
      <section className="section section--ink" id="driver-ai">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>
                {t.driverAi.title_a}<span className="accent">{t.driverAi.title_b}</span>{t.driverAi.title_c}
              </h2>
            </div>
            <p>{t.driverAi.sub}</p>
          </div>
          <div className="driver-ai-grid">
            {t.driverAi.items.map((it, i) => (
              <div className="driver-ai-card" key={i}>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
                <div className="driver-ai-viz">
                  <DriverAiViz kind={["fatigue", "score", "coaching", "evidence"][i]} lang={lang} />
                </div>
              </div>
            ))}
          </div>
          <div className="driver-ai-more">
            <a className="btn btn-primary" href="#driver-ai-page" onClick={goDriverAi}>
              {lang === "es" ? "Conocer Driver AI en detalle" : "Explore Driver AI in depth"} <span className="btn-arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      {/* PLATFORM */}
      <PlatformSection copy={t.platform} lang={lang} />

      {/* AI AGENTS */}
      <AgentsSection copy={t.agents} lang={lang} />

      {/* CTA */}
      <section className="cta" id="cta">
        <svg className="cta-bg-routes" viewBox="0 0 1600 600" preserveAspectRatio="none">
          <path d="M 0 400 Q 300 200, 600 320 T 1200 280 Q 1400 250, 1600 350" stroke="var(--accent-2)" strokeWidth="2" fill="none" strokeDasharray="6 4">
            <animate attributeName="stroke-dashoffset" from="0" to="-200" dur="8s" repeatCount="indefinite" />
          </path>
          <path d="M 0 500 Q 300 400, 600 480 T 1200 460 Q 1400 440, 1600 500" stroke="var(--accent)" strokeWidth="1.5" fill="none" strokeDasharray="4 3" />
          <path d="M 0 200 Q 300 100, 600 180 T 1200 160 Q 1400 140, 1600 200" stroke="var(--accent-2)" strokeWidth="1.5" fill="none" strokeDasharray="3 5" />
        </svg>
        <div className="container cta-inner">
          <h2>
            {t.cta.title_a}<span className="ink-accent">{t.cta.title_b}</span>{t.cta.title_c}
          </h2>
          <div>
            <p>{t.cta.sub}</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="#">{t.cta.cta_a} <span className="btn-arrow">→</span></a>
              <a className="btn btn-ghost" href="#">{t.cta.cta_b}</a>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="footer">
        <div className="container">
          <div className="footer-top">
            <div className="footer-brand">
              <a className="brand" href="#">
                <img className="brand-logo" src="assets/gropp-logo.png" alt="Gropp" />
                <span className="brand-chip">Flow</span>
              </a>
              <p>{t.footer.tag}</p>
            </div>
            <div>
              <h5>Product</h5>
              <ul>{t.footer.product.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
            </div>
            <div>
              <h5>Company</h5>
              <ul>{t.footer.company.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
            </div>
            <div>
              <h5>Legal</h5>
              <ul>{t.footer.legal.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
            </div>
          </div>
          <div className="footer-bottom">
            <span>{t.footer.copyright}</span>
            <span>{t.footer.version}</span>
          </div>
        </div>
      </footer>

      {/* TWEAKS */}
      <TweaksPanel>
        <TweakSection label="Language" />
        <TweakRadio
          label="Locale"
          value={tweaks.language}
          options={["en", "es"]}
          onChange={(v) => setTweak("language", v)}
        />
        <TweakSection label="Accent" />
        <TweakColor
          label="Color"
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label="Preset"
          value={tweaks.accent}
          options={Object.values(ACCENT_PRESETS)}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Layout" />
        <TweakToggle
          label="Marquee"
          value={tweaks.showMarquee}
          onChange={(v) => setTweak("showMarquee", v)}
        />
      </TweaksPanel>
    </>
  );
}

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