// Router + app — Auto Paniagua · Propuesta v3 "Pista"
// (tema claro por defecto, tipografía Archivo + Space Grotesk, geometría angular)
const { useState: useStateAppV3, useEffect: useEffectAppV3 } = React;

function NosotrosScreenV3({ go }) {
  const stats = [
    { n: "1994", l: "Año de fundación" },
    { n: "30+", l: "Años en el mercado" },
    { n: "4", l: "Sucursales en RD" },
    { n: "10k+", l: "Clientes satisfechos" },
  ];
  return (
    <div className="ap-page">
      <div className="ap-listing-hero">
        <div className="ap-wrap">
          <button className="ap-back" onClick={() => go("home")}>{Icons.arrowLeft({ size: 16 })} Inicio</button>
          <p className="ap-overline ap-overline-light">Nosotros</p>
          <h1 className="ap-listing-title">Tres décadas moviendo a RD</h1>
          <p className="ap-listing-sub">Desde 1994, Auto Paniagua es sinónimo de confianza en la compra de vehículos nuevos y semi-nuevos.</p>
        </div>
      </div>
      <div className="ap-wrap ap-section">
        <div className="ap-about-stats">
          {stats.map((s) => (
            <div className="ap-about-stat" key={s.l}>
              <p className="ap-about-stat-n">{s.n}</p>
              <p className="ap-about-stat-l">{s.l}</p>
            </div>
          ))}
        </div>
        <div className="ap-about-copy">
          <p>Lo que comenzó como un sueño familiar en 1994 hoy es una de las casas de vehículos de mayor confianza en República Dominicana. Cada unidad que entra a nuestro inventario pasa por una inspección rigurosa de 150 puntos, porque entendemos que comprar un vehículo es una de las decisiones más importantes para una familia.</p>
          <p>Trabajamos con las principales entidades financieras del país para que estrenar sea posible, con planes de pago a tu medida y un acompañamiento honesto de principio a fin.</p>
        </div>
        <CTABand />
      </div>
    </div>
  );
}

function ContactFormV3() {
  const D = window.AP_DATA;
  const sucs = D.SUCURSALES;
  const [f, setF] = React.useState({ nombre: "", tel: "", email: "", interes: "", mensaje: "" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setF((x) => ({ ...x, [k]: e.target.value }));

  const validate = () => {
    const er = {};
    if (!f.nombre.trim()) er.nombre = "Escribe tu nombre";
    if (!f.tel.trim() && !f.email.trim()) { er.tel = "Indica teléfono o correo"; er.email = " "; }
    if (f.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) er.email = "Correo no válido";
    if (!f.mensaje.trim()) er.mensaje = "Cuéntanos en qué podemos ayudarte";
    setErrors(er);
    return Object.keys(er).length === 0;
  };

  const submit = (e) => {
    e.preventDefault();
    if (!validate()) return;
    // 1) Guarda el lead en la API (no bloquea la apertura de WhatsApp si falla).
    fetch("/api/public/contacto", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        nombre: f.nombre, tel: f.tel, email: f.email, interes: f.interes, mensaje: f.mensaje,
      }),
    }).catch(function () {});
    // 2) Abre WhatsApp con el mensaje (comportamiento existente).
    const msg =
      `Hola Auto Paniagua, me gustaría más información.\n\n` +
      `Nombre: ${f.nombre}\n` +
      (f.tel ? `Teléfono: ${f.tel}\n` : "") +
      (f.email ? `Correo: ${f.email}\n` : "") +
      (f.interes ? `Interés: ${f.interes}\n` : "") +
      `\nMensaje: ${f.mensaje}`;
    const waLinkId = D.CONTACTO && D.CONTACTO.waVentas && D.CONTACTO.waVentas.link;
    if (waLinkId) {
      window.open(`https://wa.me/${waLinkId}?text=${encodeURIComponent(msg)}`, "_blank", "noopener");
    }
    setSent(true);
  };

  if (sent) {
    return (
      <div className="ap-form-card ap-form-done">
        <span className="ap-form-done-ico">{Icons.whatsapp({ size: 30 })}</span>
        <h3 className="ap-form-done-title">¡Mensaje listo!</h3>
        <p className="ap-form-done-sub">Abrimos WhatsApp con tu mensaje. Si no se abrió, escríbenos directamente y un asesor te atenderá enseguida.</p>
        <div className="ap-form-done-actions">
          <a className="ap-branch-wa" href={waLink("Hola Auto Paniagua, quisiera información.")} target="_blank" rel="noopener">
            {Icons.whatsapp({ size: 16 })} Abrir WhatsApp
          </a>
          <button className="ap-branch-call" onClick={() => { setSent(false); setF({ nombre: "", tel: "", email: "", interes: "", mensaje: "" }); }}>
            Enviar otro mensaje
          </button>
        </div>
      </div>
    );
  }

  return (
    <form className="ap-form-card" onSubmit={submit} noValidate>
      <div className="ap-form-row">
        <div className="ap-field">
          <label htmlFor="cf-nombre">Nombre completo</label>
          <input id="cf-nombre" className={errors.nombre ? "is-error" : ""} type="text" value={f.nombre}
            onChange={set("nombre")} placeholder="Tu nombre" />
          {errors.nombre ? <span className="ap-field-err">{errors.nombre}</span> : null}
        </div>
        <div className="ap-field">
          <label htmlFor="cf-tel">Teléfono</label>
          <input id="cf-tel" className={errors.tel ? "is-error" : ""} type="tel" value={f.tel}
            onChange={set("tel")} placeholder="809-000-0000" />
          {errors.tel ? <span className="ap-field-err">{errors.tel}</span> : null}
        </div>
      </div>
      <div className="ap-form-row">
        <div className="ap-field">
          <label htmlFor="cf-email">Correo electrónico</label>
          <input id="cf-email" className={errors.email && errors.email.trim() ? "is-error" : ""} type="email" value={f.email}
            onChange={set("email")} placeholder="tucorreo@ejemplo.com" />
          {errors.email && errors.email.trim() ? <span className="ap-field-err">{errors.email}</span> : null}
        </div>
        <div className="ap-field">
          <label htmlFor="cf-interes">Me interesa</label>
          <SearchSelect value={f.interes} onChange={(val) => setF((x) => ({ ...x, interes: val }))} placeholder="Selecciona una opción"
            options={[
              { value: "", label: "Selecciona una opción" },
              { value: "Comprar un vehículo", label: "Comprar un vehículo" },
              { value: "Financiamiento", label: "Financiamiento" },
              { value: "Vender mi vehículo", label: "Vender mi vehículo" },
              ...sucs.map((s) => ({ value: s.nombre, label: s.nombre })),
            ]} />
        </div>
      </div>
      <div className="ap-field">
        <label htmlFor="cf-msg">Mensaje</label>
        <textarea id="cf-msg" className={errors.mensaje ? "is-error" : ""} rows={4} value={f.mensaje}
          onChange={set("mensaje")} placeholder="Cuéntanos qué vehículo buscas o en qué te ayudamos…"></textarea>
        {errors.mensaje ? <span className="ap-field-err">{errors.mensaje}</span> : null}
      </div>
      <div className="ap-form-foot">
        <p className="ap-form-note">Te responderemos por WhatsApp en horario laboral.</p>
        <button type="submit" className="ap-btn ap-btn-primary ap-btn-lg ap-form-submit">
          <span className="ap-btn-ico">{Icons.whatsapp({ size: 18 })}</span>
          <span>Enviar mensaje</span>
        </button>
      </div>
    </form>
  );
}

function BranchExplorerV3() {
  const D = window.AP_DATA;
  const sucs = D.SUCURSALES;
  const toyotaIdx = Math.max(0, sucs.findIndex((s) => s.marca === "Toyota"));
  const [sel, setSel] = React.useState(toyotaIdx);
  const s = sucs[sel];
  const waBranch = `https://wa.me/${D.CONTACTO.waVentas.link}?text=${encodeURIComponent("Hola Auto Paniagua, quisiera información sobre la " + s.nombre + ".")}`;
  return (
    <div className="ap-branch-explorer">
      <div className="ap-branch-tabs" role="tablist">
        {sucs.map((b, i) => (
          <button key={b.nombre} role="tab" aria-selected={i === sel}
            className={`ap-branch-tab ${i === sel ? "is-active" : ""}`}
            onClick={() => setSel(i)}>
            <span className="ap-dot"></span>
            <span className="ap-branch-tab-txt">
              <span className="ap-branch-tab-name">{b.nombre.replace("Sucursal ", "")}</span>
              <span className="ap-branch-tab-zona">{b.zona.split(",")[0]}</span>
            </span>
          </button>
        ))}
      </div>

      <div className="ap-branch-stage">
        <div className="ap-branch-mapwrap">
          <iframe className="ap-branch-bigmap" key={s.embed} src={s.embed} loading="lazy"
            title={s.nombre} referrerPolicy="no-referrer-when-downgrade"></iframe>
        </div>

        <div className="ap-branch-panel">
          <span className="ap-branch-badge"><span className="ap-dot"></span>{s.marca}</span>
          <h3 className="ap-branch-panel-name">{s.nombre}</h3>

          <div className="ap-branch-row">{Icons.pin({ size: 18 })}<span>{s.dir}<br /><span className="ap-branch-zona-2">{s.zona}</span></span></div>
          <div className="ap-branch-row">{Icons.phone({ size: 18 })}<span>{s.tel}{s.ext ? ` · ${s.ext}` : ""}</span></div>
          <div className="ap-branch-row">{Icons.clock({ size: 18 })}<span>Lun–Vie 9:00 a.m. – 6:00 p.m.<br /><span className="ap-branch-zona-2">Sáb 9:00 a.m. – 1:00 p.m.</span></span></div>

          <div className="ap-branch-panel-actions">
            <a className="ap-branch-dir-link" href={s.maps} target="_blank" rel="noopener">
              {Icons.pin({ size: 16 })} Cómo llegar
            </a>
            <a className="ap-branch-wa" href={waBranch} target="_blank" rel="noopener">
              {Icons.whatsapp({ size: 16 })} WhatsApp
            </a>
            <a className="ap-branch-call" href="tel:+18094827301">
              {Icons.phone({ size: 16 })} Llamar
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

function ContactoScreenV3({ go }) {
  const D = window.AP_DATA;
  const C = D.CONTACTO;
  const metodos = [
    { tipo: "wa", ico: Icons.whatsapp({ size: 24 }), label: C.waAdm.label, val: C.waAdm.num, href: waLink("Hola Auto Paniagua, quisiera información.") },
    { tipo: "wa", ico: Icons.whatsapp({ size: 24 }), label: C.waVentas.label, val: C.waVentas.num, href: `https://wa.me/${C.waVentas.link}?text=${encodeURIComponent("Hola Auto Paniagua, quisiera información de ventas.")}` },
    { tipo: "tel", ico: Icons.phone({ size: 22 }), label: "Teléfono", val: C.tel, href: "tel:+18094827301" },
    { tipo: "mail", ico: Icons.mail({ size: 22 }), label: "Correo electrónico", val: C.email, href: `mailto:${C.email}` },
  ];
  return (
    <div className="ap-page">
      <div className="ap-listing-hero">
        <div className="ap-wrap">
          <button className="ap-back" onClick={() => go("home")}>{Icons.arrowLeft({ size: 16 })} Inicio</button>
          <p className="ap-overline ap-overline-light">Contacto</p>
          <h1 className="ap-listing-title">Hablemos</h1>
          <p className="ap-listing-sub">Un asesor te responde por el canal que prefieras, o visítanos en cualquiera de nuestras sucursales.</p>
        </div>
      </div>

      <div className="ap-wrap ap-section">
        <div className="ap-contact-methods">
          {metodos.map((m, i) => (
            <a key={i} className={`ap-contact-card ${m.tipo === "wa" ? "ap-contact-wa" : ""}`}
              href={m.href} target={m.tipo === "wa" ? "_blank" : undefined} rel="noopener">
              <span className="ap-contact-ico">{m.ico}</span>
              <span className="ap-contact-card-text">
                <span className="ap-contact-card-l">{m.label}</span>
                <span className="ap-contact-card-v">{m.val}</span>
              </span>
              <span className="ap-contact-card-arrow">{Icons.arrowRight({ size: 18 })}</span>
            </a>
          ))}
        </div>

        <div className="ap-contactform-head">
          <p className="ap-overline">Escríbenos</p>
          <h2 className="ap-sectitle">Cuéntanos qué buscas</h2>
          <p className="ap-branches-sub">Déjanos tus datos y un asesor te contacta. Recibirás respuesta por WhatsApp.</p>
        </div>
        <ContactFormV3 />

        <div className="ap-branches-head">
          <p className="ap-overline">Visítanos</p>
          <h2 className="ap-sectitle">Nuestras 4 sucursales</h2>
          <p className="ap-branches-sub">Todas en Santo Domingo · Elige una sucursal para ver su ubicación y detalles.</p>
        </div>

        <BranchExplorerV3 />
      </div>
    </div>
  );
}

const TWEAK_DEFAULTS_V3 = /*EDITMODE-BEGIN*/{
  "accent": "#FE6711",
  "displayFont": "Archivo",
  "radius": "recto"
}/*EDITMODE-END*/;

function LegalScreen({ go, title, children }) {
  return (
    <div className="ap-page">
      <div className="ap-listing-hero">
        <div className="ap-wrap">
          <button className="ap-back" onClick={() => go("home")}>{Icons.arrowLeft({ size: 16 })} Inicio</button>
          <p className="ap-overline ap-overline-light">Legal</p>
          <h1 className="ap-listing-title">{title}</h1>
        </div>
      </div>
      <div className="ap-wrap ap-section">
        <div className="ap-legal-body">{children}</div>
      </div>
    </div>
  );
}

function TerminosScreen({ go }) {
  return (
    <LegalScreen go={go} title="Términos y Condiciones">
      <p><strong>Última actualización:</strong> junio 2025</p>
      <h2>1. Aceptación</h2>
      <p>Al acceder y utilizar el sitio web de Auto Paniagua (autopaniagua.com), usted acepta quedar sujeto a estos Términos y Condiciones. Si no está de acuerdo con alguna parte, le pedimos no utilizar nuestro sitio.</p>
      <h2>2. Uso del sitio</h2>
      <p>El sitio es de uso exclusivamente informativo. La información sobre vehículos, precios y disponibilidad está sujeta a cambios sin previo aviso. Los precios publicados son en dólares estadounidenses (USD) salvo indicación contraria, y pueden variar según condiciones de financiamiento, impuestos y tasas vigentes.</p>
      <h2>3. Exactitud de la información</h2>
      <p>Nos esforzamos por mantener la información actualizada y precisa, pero no garantizamos que esté libre de errores. Las imágenes de los vehículos son referenciales y pueden diferir del producto final. Para confirmar disponibilidad y precio definitivo, contáctenos directamente.</p>
      <h2>4. Propiedad intelectual</h2>
      <p>Todo el contenido del sitio — textos, imágenes, logotipos, íconos y código — es propiedad de Auto Paniagua o de sus proveedores de contenido, y está protegido por las leyes de propiedad intelectual de República Dominicana. Queda prohibida su reproducción total o parcial sin autorización escrita.</p>
      <h2>5. Formularios y contacto</h2>
      <p>Al enviar un formulario de contacto, usted autoriza a Auto Paniagua a comunicarse con usted mediante los datos proporcionados (teléfono, correo electrónico, WhatsApp) para atender su consulta. No compartimos su información con terceros ajenos a la empresa.</p>
      <h2>6. Limitación de responsabilidad</h2>
      <p>Auto Paniagua no será responsable por daños directos, indirectos o consecuentes derivados del uso o la imposibilidad de usar este sitio, incluyendo interrupciones del servicio.</p>
      <h2>7. Modificaciones</h2>
      <p>Nos reservamos el derecho de actualizar estos Términos en cualquier momento. Los cambios entran en vigor al ser publicados. El uso continuado del sitio implica la aceptación de la versión vigente.</p>
      <h2>8. Ley aplicable</h2>
      <p>Estos Términos se rigen por las leyes de la República Dominicana. Cualquier controversia se someterá a los tribunales competentes de Santo Domingo.</p>
      <h2>Contacto</h2>
      <p>¿Preguntas? Escríbenos a <a href="mailto:info@autopaniagua.com">info@autopaniagua.com</a> o llámanos al <a href="tel:+18094827301">809-482-7301</a>.</p>
    </LegalScreen>
  );
}

function PrivacidadScreen({ go }) {
  return (
    <LegalScreen go={go} title="Política de Privacidad">
      <p><strong>Última actualización:</strong> junio 2025</p>
      <h2>1. Responsable del tratamiento</h2>
      <p>Auto Paniagua, empresa domiciliada en Ave. Rómulo Betancourt #2080, Santo Domingo, República Dominicana, es responsable del tratamiento de los datos personales recopilados a través de este sitio.</p>
      <h2>2. Datos que recopilamos</h2>
      <p>Recopilamos únicamente los datos que usted nos proporciona voluntariamente a través de nuestros formularios:</p>
      <ul>
        <li>Nombre completo</li>
        <li>Número de teléfono</li>
        <li>Correo electrónico</li>
        <li>Mensaje o consulta</li>
      </ul>
      <p>También podemos recopilar datos técnicos de navegación de forma anónima (tipo de dispositivo, navegador, páginas visitadas) con fines estadísticos.</p>
      <h2>3. Finalidad del uso</h2>
      <p>Sus datos se utilizan exclusivamente para:</p>
      <ul>
        <li>Responder su consulta o solicitud de información</li>
        <li>Enviarle información sobre vehículos de su interés</li>
        <li>Mejorar la experiencia en nuestro sitio</li>
      </ul>
      <p>No utilizamos sus datos para publicidad de terceros ni los vendemos bajo ninguna circunstancia.</p>
      <h2>4. Compartir información</h2>
      <p>Sus datos no se comparten con terceros, salvo cuando sea estrictamente necesario para prestar el servicio solicitado (ej. entidades financieras para trámites de financiamiento, con su previo consentimiento).</p>
      <h2>5. Conservación</h2>
      <p>Conservamos sus datos durante el tiempo necesario para atender su solicitud, o el tiempo que la ley dominicana exija. Puede solicitarnos la eliminación de sus datos en cualquier momento.</p>
      <h2>6. Sus derechos</h2>
      <p>Usted tiene derecho a acceder, rectificar, cancelar u oponerse al tratamiento de sus datos personales, conforme a la Ley 172-13 sobre Protección de Datos Personales de República Dominicana. Para ejercer estos derechos, contáctenos.</p>
      <h2>7. Seguridad</h2>
      <p>Aplicamos medidas técnicas y organizativas razonables para proteger sus datos contra accesos no autorizados, pérdida o divulgación indebida.</p>
      <h2>8. Cookies</h2>
      <p>Nuestro sitio puede usar cookies técnicas necesarias para su funcionamiento (ej. preferencias de tema). No utilizamos cookies de rastreo publicitario de terceros.</p>
      <h2>Contacto</h2>
      <p>Para cualquier consulta sobre privacidad: <a href="mailto:info@autopaniagua.com">info@autopaniagua.com</a> · <a href="tel:+18094827301">809-482-7301</a>.</p>
    </LegalScreen>
  );
}

// --- Enrutado con History API (URLs limpias, crawlables por buscadores) ---
function routeToPath(route) {
  switch (route.name) {
    case "listing": {
      const d = route.data || {};
      const q = [];
      if (d.marca) q.push("marca=" + encodeURIComponent(d.marca));
      if (d.tipo) q.push("tipo=" + encodeURIComponent(d.tipo));
      if (d.maxPrecio) q.push("maxPrecio=" + d.maxPrecio);
      if (d.favs) q.push("favs=1");
      return "/vehiculos" + (q.length ? "?" + q.join("&") : "");
    }
    case "detail":
      return "/vehiculo/" + (route.data && route.data.id ? route.data.id : "");
    case "calculator":
      return "/calculadora" + (route.data && route.data.id ? "?vehiculo=" + encodeURIComponent(route.data.id) : "");
    case "nosotros": return "/nosotros";
    case "contacto": return "/contacto";
    case "terminos": return "/terminos";
    case "privacidad": return "/privacidad";
    default: return "/";
  }
}

function pathToRoute(pathAndSearch) {
  const D = window.AP_DATA;
  const [rawPath, query] = (pathAndSearch || "/").split("?");
  const parts = rawPath.split("/").filter(Boolean);
  if (parts[0] === "vehiculos") {
    const params = new URLSearchParams(query || "");
    const data = {};
    if (params.get("marca")) data.marca = params.get("marca");
    if (params.get("tipo")) data.tipo = params.get("tipo");
    if (params.get("maxPrecio")) data.maxPrecio = parseInt(params.get("maxPrecio"), 10) || undefined;
    if (params.get("favs")) data.favs = true;
    return { name: "listing", data: Object.keys(data).length ? data : null };
  }
  if (parts[0] === "vehiculo" && parts[1]) {
    const v = D.VEHICLES.find((x) => x.id === parts[1]);
    return v ? { name: "detail", data: v } : { name: "listing", data: null };
  }
  if (parts[0] === "calculadora") {
    const params = new URLSearchParams(query || "");
    const slug = params.get("vehiculo");
    const v = slug ? D.VEHICLES.find((x) => x.id === slug) : null;
    return { name: "calculator", data: v || null };
  }
  if (parts[0] === "nosotros") return { name: "nosotros", data: null };
  if (parts[0] === "contacto") return { name: "contacto", data: null };
  if (parts[0] === "terminos") return { name: "terminos", data: null };
  if (parts[0] === "privacidad") return { name: "privacidad", data: null };
  return { name: "home", data: null };
}

function AppV3() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_V3);
  const [route, setRoute] = useStateAppV3(() => pathToRoute(window.location.pathname + window.location.search));
  const [theme, setTheme] = useStateAppV3(() => {
    try { return localStorage.getItem("ap-theme-v3") || "light"; } catch (e) { return "light"; }
  });
  const scrollRef = React.useRef(null);

  useEffectAppV3(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("ap-theme-v3", theme); } catch (e) {}
  }, [theme]);
  const toggleTheme = () => setTheme((x) => (x === "light" ? "dark" : "light"));

  useEffectAppV3(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    const fonts = { "Sora": '"Sora", system-ui, sans-serif', "Space Grotesk": '"Space Grotesk", system-ui, sans-serif', "Archivo": '"Archivo", system-ui, sans-serif' };
    r.style.setProperty("--font-display", fonts[t.displayFont] || fonts.Archivo);
    const radii = { "recto": ["6px", "4px", "9px"], "suave": ["16px", "11px", "22px"], "redondo": ["24px", "16px", "30px"] };
    const [rad, radSm, radLg] = radii[t.radius] || radii.recto;
    r.style.setProperty("--radius", rad);
    r.style.setProperty("--radius-sm", radSm);
    r.style.setProperty("--radius-lg", radLg);
  }, [t.accent, t.displayFont, t.radius]);

  const go = (name, data = null) => {
    const next = { name, data };
    const newPath = routeToPath(next);
    const currentPath = window.location.pathname + (window.location.search || "");
    if (currentPath === newPath) setRoute(next);
    else { history.pushState({ name, data }, "", newPath); setRoute(next); }
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  };

  // El historial del navegador es la fuente de verdad de la ruta.
  useEffectAppV3(() => {
    const onPop = (e) => {
      if (e.state && e.state.name) setRoute(e.state);
      else setRoute(pathToRoute(window.location.pathname + window.location.search));
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  useEffectAppV3(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  }, [route]);

  React.useLayoutEffect(() => {
    // antes del paint: ocultar y observar los elementos de la nueva pantalla
    if (window.APReveal) window.APReveal.scan();
  }, [route]);

  // Registra una vista al abrir el detalle de un vehículo (estadísticas del admin).
  useEffectAppV3(() => {
    if (route.name === "detail" && route.data && route.data.id) {
      fetch("/api/public/track", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ slug: route.data.id }),
      }).catch(function () {});
    }
  }, [route]);

  let screen;
  if (route.name === "home") screen = <HomeScreen go={go} />;
  else if (route.name === "listing") screen = <ListingScreen go={go} initial={route.data} />;
  else if (route.name === "detail") screen = <DetailScreen go={go} vehicle={route.data} />;
  else if (route.name === "calculator") screen = <CalculatorScreen go={go} initial={route.data} />;
  else if (route.name === "nosotros") screen = <NosotrosScreenV3 go={go} />;
  else if (route.name === "contacto") screen = <ContactoScreenV3 go={go} />;
  else if (route.name === "terminos") screen = <TerminosScreen go={go} />;
  else if (route.name === "privacidad") screen = <PrivacidadScreen go={go} />;
  else screen = <HomeScreen go={go} />;

  const navCurrent = ["home", "listing", "calculator", "nosotros", "contacto"].includes(route.name)
    ? route.name : (route.name === "detail" ? "listing" : "home");

  return (
    <div className="ap-app">
      <Header go={go} current={navCurrent} theme={theme} toggleTheme={toggleTheme} />
      <main className="ap-scroll" ref={scrollRef}>
        {screen}
        <Footer go={go} />
      </main>
      <WhatsAppFab />
      <TweaksPanel>
        <TweakSection label="Marca" />
        <TweakColor label="Color de acento" value={t.accent}
          options={["#FE6711", "#FF8534", "#E85D04", "#F59E0B", "#58595B", "#0A0A0C"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Tipografía" />
        <TweakRadio label="Fuente de títulos" value={t.displayFont}
          options={["Archivo", "Space Grotesk", "Sora"]}
          onChange={(v) => setTweak("displayFont", v)} />
        <TweakSection label="Estilo" />
        <TweakRadio label="Bordes" value={t.radius}
          options={["recto", "suave", "redondo"]}
          onChange={(v) => setTweak("radius", v)} />
      </TweaksPanel>
    </div>
  );
}

// Espera a que los datos lleguen de la API (window.AP_DATA_READY) antes de renderizar,
// para que window.AP_DATA ya tenga el inventario al primer pintado.
(window.AP_DATA_READY || Promise.resolve()).then(function () {
  ReactDOM.createRoot(document.getElementById("root")).render(<AppV3 />);
});