/* parts1.jsx — Navbar · Hero (3 variantes) · Métricas */

/* ── Ruta real por calles vía Mapbox Directions API ─────────────── */
async function fetchStreetRoute(waypoints) {
  if (typeof TREEGO_CONFIG === 'undefined' || !TREEGO_CONFIG.mapboxToken) return null;
  if (!Array.isArray(waypoints) || waypoints.length < 2) return null;
  const coords = waypoints.map(([lng, lat]) => `${lng},${lat}`).join(';');
  const url = `https://api.mapbox.com/directions/v5/mapbox/driving/${coords}?geometries=geojson&overview=full&steps=false&access_token=${TREEGO_CONFIG.mapboxToken}`;
  try {
    const res = await fetch(url);
    if (!res.ok) return null;
    const data = await res.json();
    if (data.routes && data.routes.length > 0) {
      return { type: 'Feature', geometry: data.routes[0].geometry };
    }
  } catch (e) { /* network / parse error — use straight-line fallback */ }
  return null;
}

function Nav({ onContacto, onLogin, onRegister }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const links = [
    ["Cómo funciona", "#como"], ["Repartidores", "#repartidores"],
    ["Planes", "#planes"], ["Testimonios", "#testimonios"], ["FAQ", "#faq"],
  ];
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a href="#top"><img loading="lazy" className="nav-logo" src="/assets/streego-logo.png?v=2" alt="Treego" /></a>
        <div className="nav-links">
          {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
        </div>
        <div className="nav-cta">
          <button className="nav-login" onClick={onLogin}
                  style={{ background: "none", border: "none", cursor: "pointer", padding: 0, font: "inherit" }}>
            Iniciar sesión
          </button>
          <button className="btn btn-primary" onClick={onContacto}>Contáctanos</button>
        </div>
      </div>
    </nav>
  );
}

/* ---- tarjeta de seguimiento en vivo (visual del hero A) ---- */
const HERO_STAGES = [
  "En camino al restaurante", "En restaurante", "Recogió pedido",
  "En camino al cliente", "Entregado",
];

/* Coordenadas demo del hero. En producción vienen de la BD:
   restaurante ← restaurantes.latitud/longitud, cliente ← geocoding,
   punto de salida ← primera fila de repartidor_tracking. */
const HERO_DRIVER_START = [-74.024476, 4.917737]; // Punto de salida del repartidor
const HERO_ORG          = [-74.025642, 4.917296]; // Restaurante (fijo landing)
const HERO_DEST         = [-74.024365, 4.938275]; // Cliente     (fijo landing)

const HERO_ICON_BASE = '/assets/tracking/opt/';

function LiveTrackCard() {
  const [active, setActive] = useState(0);
  const mapContainerRef = useRef(null);
  const mapInitRef      = useRef(false);

  /* Mapa + simulación — misma lógica que el panel (tracking-sim.js) */
  useEffect(() => {
    if (mapInitRef.current || !mapContainerRef.current) return;
    if (typeof mapboxgl === 'undefined') return;
    if (typeof TREEGO_CONFIG === 'undefined' || !TREEGO_CONFIG.mapboxToken) return;
    if (typeof createTrackingSimulation === 'undefined') return;

    mapInitRef.current = true;
    mapboxgl.accessToken = TREEGO_CONFIG.mapboxToken;

    const mapEl = mapContainerRef.current;
    /* el mapa nace encuadrado a la ruta (sin centro/zoom fijos): así el
       encuadre es correcto sin importar el tamaño de pantalla o un refresh */
    const rutaBase = [HERO_DRIVER_START, HERO_ORG, HERO_DEST];
    const boundsIni = rutaBase.reduce((b, c) => b.extend(c),
      new mapboxgl.LngLatBounds(rutaBase[0], rutaBase[0]));
    const map = new mapboxgl.Map({
      container:        mapEl,
      style:            TREEGO_CONFIG.mapboxStyleUrl || 'mapbox://styles/mapbox/streets-v12',
      bounds:           boundsIni,
      fitBoundsOptions: { padding: 55, maxZoom: 14.5 },
      attributionControl: false,
      logoPosition:     'bottom-right',
    });

    map.scrollZoom.disable();
    const onEnter = () => map.scrollZoom.enable();
    const onLeave = () => map.scrollZoom.disable();
    mapEl.addEventListener('mouseenter', onEnter);
    mapEl.addEventListener('mouseleave', onLeave);

    /* Estado mutable del marcador (cerrado por las funciones de abajo) */
    let driverMarker = null;
    let lastPos      = null;
    let pending      = { pos: null, rot: 0, legs: null };
    let mapAlive     = true;
    let lastTrip     = null; /* última ruta encuadrada, para re-fit al redimensionar */

    const fitTrip = (extra, animate) => {
      if (extra) lastTrip = extra;
      const b = new mapboxgl.LngLatBounds();
      [HERO_DRIVER_START, HERO_ORG, HERO_DEST].forEach((c) => b.extend(c));
      if (lastTrip) lastTrip.forEach((c) => b.extend(c));
      map.fitBounds(b, { padding: 55, maxZoom: 14.5, duration: animate ? 800 : 0 });
    };

    /* si el contenedor cambia de tamaño (refresh con layout a medias,
       rotación del celular, resize de ventana) → re-encuadrar la ruta */
    const ro = new ResizeObserver(() => {
      if (!mapAlive) return;
      map.resize();
      fitTrip(null, false);
    });
    ro.observe(mapEl);

    /* ══ API lista para producción ══════════════════════════════════
       Único punto de entrada de datos. Hoy las llama el simulador; con
       datos reales, cada fila GPS de `repartidor_tracking` llama a
       updateDriverLocation y cada evento de `pedido_eventos` llama a
       updateTimelineStatus — nada más cambia. */
    const updateDriverLocation = (lat, lng) => {
      if (driverMarker) driverMarker.setLngLat([lng, lat]);
      else pending.pos = [lng, lat];
      /* Rotación por bearing (la moto cenital apunta al norte en reposo) */
      if (lastPos) {
        const dLat = lat - lastPos.lat;
        const dLng = lng - lastPos.lng;
        if (Math.hypot(dLng, dLat) > 1e-6) {
          const bearing = Math.atan2(
            dLng * Math.cos(lat * Math.PI / 180), dLat
          ) * 180 / Math.PI;
          if (driverMarker) driverMarker.setRotation(bearing);
          else pending.rot = bearing;
        }
      }
      lastPos = { lat, lng };
    };
    const updateTimelineStatus = (statusId) => setActive(statusId);

    map.on('load', () => {
      if (!mapAlive) return;

      /* Rutas: dos tramos continuos (azul = recogida, naranja = entrega) */
      const legA = (pending.legs && pending.legs.a) || [HERO_DRIVER_START, HERO_ORG];
      const legB = (pending.legs && pending.legs.b) || [HERO_ORG, HERO_DEST];
      map.addSource('hero-pre',  { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: legA } } });
      map.addSource('hero-post', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: legB } } });
      map.addLayer({ id: 'hero-pre', type: 'line', source: 'hero-pre',
        layout: { 'line-join': 'round', 'line-cap': 'round' },
        paint: { 'line-color': '#3B82F6', 'line-width': 3.5, 'line-opacity': 0.9 } });
      map.addLayer({ id: 'hero-post', type: 'line', source: 'hero-post',
        layout: { 'line-join': 'round', 'line-cap': 'round' },
        paint: { 'line-color': window.TREEGO_BRAND.primary, 'line-width': 3.5, 'line-opacity': 0.9 } });

      /* Marcadores con los iconos isométricos de assets/tracking/opt */
      const restEl = document.createElement('img');
      restEl.src = HERO_ICON_BASE + 'restaurante.png?v=2';
      restEl.alt = 'Restaurante';
      restEl.style.cssText = 'width:58px;height:auto;display:block;cursor:pointer;filter:drop-shadow(0 7px 9px rgba(0,0,0,.35));';
      new mapboxgl.Marker({ element: restEl, anchor: 'center' }).setLngLat(HERO_ORG).addTo(map);

      const destEl = document.createElement('img');
      destEl.src = HERO_ICON_BASE + 'cliente.png?v=2';
      destEl.alt = 'Cliente';
      destEl.style.cssText = 'width:46px;height:auto;display:block;cursor:pointer;filter:drop-shadow(0 7px 9px rgba(0,0,0,.35));';
      new mapboxgl.Marker({ element: destEl, anchor: 'center' }).setLngLat(HERO_DEST).addTo(map);

      /* Moto cenital: el <img> es el elemento del marcador; rota por bearing
         vía marker.setRotation (nunca transform manual — lo usa Mapbox). */
      const motoEl = document.createElement('img');
      motoEl.src = HERO_ICON_BASE + 'moto-bien.png?v=2';
      motoEl.alt = 'Moto del domiciliario';
      motoEl.className = 'treego-moto-img';
      motoEl.style.cssText = 'width:60px;height:60px;object-fit:contain;transform-origin:center;display:block;cursor:pointer;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));';
      driverMarker = new mapboxgl.Marker({
        element: motoEl,
        anchor:  'center',
        rotationAlignment: 'map',
        pitchAlignment:    'map',
        rotation: pending.rot,
      })
        .setLngLat(pending.pos || HERO_DRIVER_START)
        .addTo(map);

      fitTrip(legA.concat(legB), false);
      pending.pos = null;
    });

    /* ── Simulador en bucle (60 s) — reemplazable por eventos reales ── */
    const sim = createTrackingSimulation({
      coords: {
        motoStart:   { lat: HERO_DRIVER_START[1], lng: HERO_DRIVER_START[0] },
        restaurante: { lat: HERO_ORG[1],          lng: HERO_ORG[0] },
        cliente:     { lat: HERO_DEST[1],         lng: HERO_DEST[0] },
      },
      onLocation: updateDriverLocation,
      onStatus:   updateTimelineStatus,
      onRoute:    (a, b) => {
        const srcA = map.getSource('hero-pre');
        const srcB = map.getSource('hero-post');
        if (srcA && srcB) {
          srcA.setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: a } });
          srcB.setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: b } });
          fitTrip(a.concat(b), true);
        } else {
          pending.legs = { a, b };
        }
      },
    });
    sim.start();

    return () => {
      mapAlive = false;
      ro.disconnect();
      sim.destroy();
      driverMarker = null;
      mapEl.removeEventListener('mouseenter', onEnter);
      mapEl.removeEventListener('mouseleave', onLeave);
      map.remove();
      mapInitRef.current = false;
    };
  }, []);

  return (
    <div className="track-card">
      <div className="track-map" style={{ overflow: 'hidden', position: 'relative' }}>
        <div ref={mapContainerRef} style={{ position: 'absolute', inset: 0 }} />
        <div style={{
          position: "absolute", left: "16px", bottom: "12px", zIndex: 2,
          display: "flex", alignItems: "center", gap: 6,
          fontSize: 11, fontWeight: 600, color: "var(--ink-2)",
          background: "rgba(255,255,255,.88)", padding: "5px 10px", borderRadius: 999,
        }}>
          <span style={{ color: "var(--g3)", display: "grid" }}>
            <Icon name="pin" style={{ width: 13, height: 13 }} />
          </span>
          Cajicá · Zona norte
        </div>
      </div>
      <div className="track-head">
        <div className="track-driver">
          <div style={{ width: 42, height: 42, borderRadius: "50%", overflow: "hidden", flex: "none", border: "2px solid var(--surface)", boxShadow: "0 0 0 1.5px var(--line)" }}>
            <Avatar name="Andrés Mejía" />
          </div>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14.5 }}>Andrés M.</div>
            <div style={{ fontSize: 12, color: "var(--ink-3)", display: "flex", alignItems: "center", gap: 4 }}>
              <span style={{ color: "var(--g2)", display: "grid", width: 12, height: 12 }}><Star /></span> 4.97 · 1.240 entregas
            </div>
          </div>
        </div>
        <div className="track-eta">
          <div className="n">8 min</div>
          <div className="l">ETA pedido</div>
        </div>
      </div>
      <div className="track-stages">
        {HERO_STAGES.map((s, i) => (
          <div key={s} className={"tstage" + (i < active ? " done" : i === active ? " active" : "")}>
            <span className="ring">{i < active && <Icon name="check" />}</span>
            <span className="ln"></span>
            <span className="lbl">{s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero({ onContacto }) {
  return (
    <header className="hero" id="top">
      {/* Variante A — editorial split */}
      <section className="hero-variant hero-a">
        <div className="hero-glow a1"></div>
        <div className="wrap heroA-grid">
          <div className="heroA">
            <span className="eyebrow heroA-eyebrow">Domicilios premium para restaurantes</span>
            <h1>La reputación de su cocina llega <em className="grad-text">intacta</em> hasta el último kilómetro.</h1>
            <p className="heroA-sub">Repartidores capacitados, puntualidad garantizada e higiene impecable.</p>
            <div className="heroA-actions">
              <button className="btn btn-primary btn-lg" onClick={onContacto}>Contáctanos <Icon name="arrow" /></button>
              <a className="hero-link" href="#planes">o explore los planes →</a>
            </div>
            <div className="heroA-trust">
              <div className="trust-stat"><div className="n grad-text">12 min</div><div className="l">Llegada promedio al restaurante</div></div>
              <div className="trust-stat"><div className="n grad-text">99,2%</div><div className="l">Entregas puntuales</div></div>
              <div className="trust-stat"><div className="n grad-text">4,9★</div><div className="l">Calificación de repartidores</div></div>
            </div>
          </div>
          <div className="track-wrap"><LiveTrackCard /></div>
        </div>
      </section>

      {/* Variante B — centrado con banda de imagen */}
      <section className="hero-variant hero-b">
        <div className="hero-glow b1"></div>
        <div className="wrap">
          <span className="eyebrow center heroB-eyebrow">Domicilios premium para restaurantes</span>
          <h1>Su cocina merece <span className="grad-text">llegar perfecta.</span></h1>
          <p className="heroB-sub">Repartidores capacitados, puntualidad garantizada e higiene impecable.</p>
          <div className="heroB-actions">
            <button className="btn btn-primary btn-lg" onClick={onContacto}>Contáctanos <Icon name="arrow" /></button>
            <a className="hero-link" href="#planes">o explore los planes →</a>
          </div>
          <div className="heroA-trust" style={{ justifyContent: "center", marginTop: 40 }}>
            <div className="trust-stat"><div className="n grad-text">12 min</div><div className="l">Llegada al restaurante</div></div>
            <div className="trust-stat"><div className="n grad-text">99,2%</div><div className="l">Entregas puntuales</div></div>
            <div className="trust-stat"><div className="n grad-text">4,9★</div><div className="l">Repartidores</div></div>
          </div>
        </div>
        <div className="wrap heroB-stage">
          <div className="heroB-band"><Placeholder label="cocina · plato emplatado en alta gama" /></div>
          <div className="heroB-chips">
            <div className="float-chip" style={{ top: "8%", left: "3%", animationDelay: "0s" }}>
              <span className="ic"><Icon name="clock" /></span>
              <div><div className="t">A tiempo, siempre</div><div className="s">Llegada en ~12 min</div></div>
            </div>
            <div className="float-chip" style={{ top: "20%", right: "2%", animationDelay: "1.4s" }}>
              <span className="ic"><Icon name="shield" /></span>
              <div><div className="t">Higiene certificada</div><div className="s">Protocolo en cada turno</div></div>
            </div>
            <div className="float-chip" style={{ bottom: "12%", left: "8%", animationDelay: ".8s" }}>
              <span className="ic"><Icon name="star" /></span>
              <div><div className="t">4,9 / 5</div><div className="s">Repartidores calificados</div></div>
            </div>
          </div>
        </div>
      </section>

      {/* Variante C — oscuro dramático */}
      <section className="hero-variant hero-c">
        <div className="hero-glow"></div>
        <svg className="heroC-route" viewBox="0 0 1440 600" preserveAspectRatio="xMidYMid slice">
          <path d="M-50 480 C 300 480, 360 220, 720 240 S 1180 120, 1500 90"
                fill="none" stroke="url(#cg)" strokeWidth="2.5" strokeDasharray="2 12" opacity=".55" />
          <defs><linearGradient id="cg" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0" stopColor={window.TREEGO_BRAND.light} stopOpacity="0" /><stop offset=".5" stopColor={window.TREEGO_BRAND.primary} /><stop offset="1" stopColor={window.TREEGO_BRAND.dark} />
          </linearGradient></defs>
        </svg>
        <div className="wrap" style={{ position: "relative" }}>
          <span className="eyebrow center">Domicilios premium para restaurantes</span>
          <h1>El último kilómetro, <span className="grad-text">dominado.</span></h1>
          <p className="heroC-sub">Repartidores capacitados, puntualidad garantizada e higiene impecable.</p>
          <div className="heroC-actions">
            <button className="btn btn-primary btn-lg" onClick={onContacto}>Contáctanos <Icon name="arrow" /></button>
            <a className="hero-link onDark" href="#planes">o explore los planes →</a>
          </div>
          <div className="heroC-stats">
            <div><div className="n grad">12 min</div><div className="l">Llegada promedio al restaurante</div></div>
            <div><div className="n grad">99,2%</div><div className="l">Entregas puntuales</div></div>
            <div><div className="n grad">+180</div><div className="l">Restaurantes aliados</div></div>
          </div>
        </div>
      </section>
    </header>
  );
}

function Metrics() {
  const data = [
    ["12 min", "Llegada promedio al restaurante"],
    ["99,2%", "Entregas puntuales"],
    ["4,9 / 5", "Calificación de repartidores"],
    ["+180", "Restaurantes aliados"],
  ];
  return (
    <section className="metrics">
      <div className="wrap"><div className="metrics-grid">
        {data.map(([n, l]) => (
          <div className="metric" key={l}><div className="n grad-text">{n}</div><div className="l">{l}</div></div>
        ))}
      </div></div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Metrics });