/* parts2.jsx — Pilares · Cómo funciona · Repartidores · Puntualidad (Diferenciador + Multas fusionados) */

function Pillars() {
  const items = [
  ["chef", "Repartidores capacitados", "Cada repartidor pasa por formación en manejo de alimentos, atención al cliente y conducción segura antes de su primer turno."],
  ["clock", "Puntualidad garantizada", "Llegada al restaurante dentro de un rango constante y optimizado. Si lo hacemos esperar, usted no asume el costo."],
  ["shield", "Higiene impecable", "Maletas térmicas selladas, cadena de frío, protocolo de limpieza por turno y verificación de presentación en cada salida."]];

  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">POR QUÉ TREEGO</span>
          <h2>Tres promesas que no negociamos.</h2>
          <p>Construimos cada entrega alrededor de lo único que de verdad importa: que su marca llegue tan bien cuidada como salió de su cocina.</p>
        </div>
        <div className="pillars">
          {items.map(([ic, t, d], i) =>
          <div className="pillar reveal" key={t} style={{ transitionDelay: `${i * 90}ms` }}>
              <div className="pic"><Icon name={ic} /></div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---- Cómo funciona ---- */
const FLOW = [
["En camino al restaurante", "truck"],
["En restaurante", "building"],
["Recogió pedido", "pkg"],
["En camino al cliente", "route"],
["Entregado", "check"]];

/* Coordenadas demo de "Cómo funciona". En producción vienen de la BD:
   restaurante ← restaurantes.latitud/longitud, cliente ← geocoding,
   punto de salida ← primera fila de repartidor_tracking. */
const SV_DRIVER_START = [-74.024476, 4.917737]; // Punto de salida del repartidor
const SV_ORG          = [-74.025642, 4.917296]; // Restaurante
const SV_DEST         = [-74.024365, 4.938275]; // Cliente

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

/* Chips de etapa (mismos del panel/test). "Entregado" usa el check por defecto. */
const SV_STAGE_ICONS = [
  SV_ICON_BASE + 'etapa-camino-restaurante.png',
  SV_ICON_BASE + 'etapa-en-restaurante.png',
  SV_ICON_BASE + 'etapa-recogio-pedido.png',
  SV_ICON_BASE + 'etapa-camino-cliente.png',
  null,
];

function StageVisual() {
  const [step, setStep] = useState(0);
  const svMapRef  = useRef(null);
  const svInitRef = useRef(false);

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

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

    const mapEl = svMapRef.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 = [SV_DRIVER_START, SV_ORG, SV_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: 52, 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);

    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();
      [SV_DRIVER_START, SV_ORG, SV_DEST].forEach((c) => b.extend(c));
      if (lastTrip) lastTrip.forEach((c) => b.extend(c));
      map.fitBounds(b, { padding: 52, 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 ══════════════════════════════════
       updateDriverLocation(lat, lng) ← cada fila GPS de repartidor_tracking
       updateTimelineStatus(id)      ← cada evento de pedido_eventos */
    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) => setStep(statusId);

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

      /* Rutas: dos tramos continuos (azul = recogida, naranja = entrega) */
      const legA = (pending.legs && pending.legs.a) || [SV_DRIVER_START, SV_ORG];
      const legB = (pending.legs && pending.legs.b) || [SV_ORG, SV_DEST];
      map.addSource('sv-pre',  { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: legA } } });
      map.addSource('sv-post', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: legB } } });
      map.addLayer({ id: 'sv-pre', type: 'line', source: 'sv-pre',
        layout: { 'line-join': 'round', 'line-cap': 'round' },
        paint: { 'line-color': '#3B82F6', 'line-width': 3.5, 'line-opacity': 0.9 } });
      map.addLayer({ id: 'sv-post', type: 'line', source: 'sv-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 rEl = document.createElement('img');
      rEl.src = SV_ICON_BASE + 'restaurante.png?v=2';
      rEl.alt = 'Restaurante';
      rEl.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: rEl, anchor: 'center' }).setLngLat(SV_ORG).addTo(map);

      const dEl = document.createElement('img');
      dEl.src = SV_ICON_BASE + 'cliente.png?v=2';
      dEl.alt = 'Cliente';
      dEl.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: dEl, anchor: 'center' }).setLngLat(SV_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 mvEl = document.createElement('img');
      mvEl.src = SV_ICON_BASE + 'moto-bien.png?v=2';
      mvEl.alt = 'Moto del domiciliario';
      mvEl.className = 'treego-moto-img';
      mvEl.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: mvEl,
        anchor:  'center',
        rotationAlignment: 'map',
        pitchAlignment:    'map',
        rotation: pending.rot,
      })
        .setLngLat(pending.pos || SV_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: SV_DRIVER_START[1], lng: SV_DRIVER_START[0] },
        restaurante: { lat: SV_ORG[1],          lng: SV_ORG[0] },
        cliente:     { lat: SV_DEST[1],         lng: SV_DEST[0] },
      },
      onLocation: updateDriverLocation,
      onStatus:   updateTimelineStatus,
      onRoute:    (a, b) => {
        const srcA = map.getSource('sv-pre');
        const srcB = map.getSource('sv-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();
      svInitRef.current = false;
    };
  }, []);

  const pct = step / (FLOW.length - 1) * 100;
  return (
    <div className="stage-visual reveal">
      <div className="sv-head">
        <span className="sv-pill">Seguimiento en vivo</span>
        <span className="sv-order">Pedido #2847</span>
      </div>
      <div className="sv-map" style={{ position: 'relative', overflow: 'hidden' }}>
        <div ref={svMapRef} style={{ position: 'absolute', inset: 0 }} />
        <span className="sv-coord" style={{ position: 'absolute', zIndex: 2, pointerEvents: 'none' }}>Cajicá → Capellanía</span>
      </div>
      <div className="sv-track"><div className="fill" style={{ width: pct + "%" }}></div></div>
      <div className="sv-nodes">
        {FLOW.map(([cap, ic], i) => {
          /* completada → círculo naranja + check; actual/pendiente → chip con icono */
          const showImg = i >= step && SV_STAGE_ICONS[i];
          return (
            <div className={"sv-node" + (i <= step ? " on" : "") + (showImg ? " pic" : "")} key={cap}>
              <span className="d">
                {i < step
                  ? <Icon name="check" />
                  : showImg
                    ? <img loading="lazy" src={SV_STAGE_ICONS[i]} alt={cap} />
                    : <Icon name={ic} />}
              </span>
              <span className="cap">{cap}</span>
            </div>
          );
        })}
      </div>
      <div className="sv-foot">
        <div style={{ width: 40, height: 40, 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 style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 14 }}>{FLOW[step][0]}</div>
          <div style={{ fontSize: 12.5, color: "var(--ink-3)" }}>Actualizado hace 3 s · Andrés M.</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, color: "var(--g3)" }}>8 min</div>
          <div style={{ fontSize: 11, color: "var(--ink-3)" }}>ETA cliente</div>
        </div>
      </div>
    </div>);

}
function How() {
  const steps = [
  ["Solicita el domicilio", "Desde el panel o la app, en dos toques. Sin llamadas ni esperas."],
  ["Asignamos al mejor repartidor", "El algoritmo elige al repartidor capacitado más cercano y disponible."],
  ["Llega a tu restaurante a tiempo", "Dentro del rango prometido de tu plan. Verás su recorrido en vivo."],
  ["Recoge y entrega con trazabilidad", "Cada etapa visible en tiempo real, hasta la confirmación del cliente."],
  ["Confirmas y calificas", "Cierre con foto de entrega y calificación que alimenta la calidad del servicio."]];

  return (
    <section className="section how" id="como">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">Cómo funciona</span>
          <h2>Del pedido a la puerta, sin fricción.</h2>
          <p>Cinco etapas, totalmente trazables. Usted siempre sabe dónde está su domicilio — y su cliente también.</p>
        </div>
        <div className="how-grid">
          <div className="how-steps reveal">
            {steps.map(([t, d], i) =>
            <div className={"how-step" + (i === 0 ? " lead" : "")} key={t}>
                <span className="num">{i + 1}</span>
                <div><h4>{t}</h4><p>{d}</p></div>
              </div>
            )}
          </div>
          <StageVisual />
        </div>
      </div>
    </section>);

}

/* ---- Repartidores ---- */
function DriverCard({ feat, name, yrs, rating, deliveries, punct, hyg, tags, badge, foto }) {
  return (
    <div className={"driver" + (feat ? " feat" : "")}>
      <div className="driver-photo">
        {foto
          ? <img loading="lazy" src={foto} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          : <Avatar name={name} shape="tile" watermark />}
        {badge && <div className="driver-badge"><span className="star" style={{ display: "grid", width: 13, height: 13 }}><Star /></span>{badge}</div>}
      </div>
      <div className="driver-body">
        <div className="driver-name"><h4>{name}</h4><span className="yrs">{yrs}</span></div>
        <div className="driver-stats">
          <div className="dstat"><div className="n">{rating}</div><div className="l">Calificación</div></div>
          <div className="dstat"><div className="n">{punct}</div><div className="l">Puntualidad</div></div>
          <div className="dstat"><div className="n">{hyg}</div><div className="l">Higiene</div></div>
        </div>
        <div className="driver-tags">
          {tags.map((t) => <span className="dtag" key={t}><Icon name="check" />{t}</span>)}
        </div>
      </div>
    </div>);

}
/* tags por defecto para los perfiles que vienen de la base de datos */
const DRV_TAGS = [
  ["Manejo de alimentos", "Cadena de frío", "Conducción segura", "Atención al cliente"],
  ["Manejo de alimentos", "Atención al cliente"],
  ["Cadena de frío", "Conducción segura"],
];

function Drivers() {
  /* repartidores reales (con foto de Supabase Storage); si la base de
     datos no responde, se mantienen las tarjetas de muestra */
  const [reps, setReps] = useState(null);
  useEffect(() => {
    if (!window.treego_db) return;
    let on = true;
    window.treego_db
      .from("repartidores")
      .select("id, nombre_completo, foto_url, calificacion_promedio, fecha_ingreso")
      .eq("activo", true)
      .order("calificacion_promedio", { ascending: false })
      .limit(3)
      .then(({ data }) => {
        if (!on || !data || !data.length) return;
        window.TREEGO_FOTOS = window.TREEGO_FOTOS || {};
        data.forEach((r) => { if (r.foto_url) window.TREEGO_FOTOS[r.nombre_completo] = r.foto_url; });
        setReps(data);
      });
    return () => { on = false; };
  }, []);

  const anios = (iso) => {
    if (!iso) return "1 año";
    const a = Math.max(1, Math.round((Date.now() - new Date(iso)) / 31557600000));
    return `${a} año${a > 1 ? "s" : ""}`;
  };

  return (
    <section className="section" id="repartidores">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Nuestros repartidores</span>
          <h2>La cara de su marca en la calle.</h2>
          <p>No son "domiciliarios cualquiera". Son profesionales seleccionados, capacitados y evaluados continuamente. Cada perfil es visible para usted.</p>
        </div>
        <div className="drivers-grid reveal">
          {reps ? reps.map((r, i) => (
            <DriverCard key={r.id}
              feat={i === 0}
              badge={i === 0 ? "Top 1% Treego" : undefined}
              name={r.nombre_completo}
              foto={r.foto_url || null}
              yrs={anios(r.fecha_ingreso)}
              rating={Number(r.calificacion_promedio || 5).toFixed(2).replace(".", ",")}
              punct={["99,6%", "99,1%", "98,8%"][i]}
              hyg={["100%", "100%", "99,4%"][i]}
              tags={DRV_TAGS[i] || DRV_TAGS[1]} />
          )) : (
            <React.Fragment>
              <DriverCard feat badge="Top 1% Treego" name="Andrés Mejía" yrs="3 años" rating="4,97" deliveries="1.240" punct="99,6%" hyg="100%"
              tags={["Manejo de alimentos", "Cadena de frío", "Conducción segura", "Atención al cliente"]} />
              <DriverCard name="Valentina Ríos" yrs="2 años" rating="4,93" punct="99,1%" hyg="100%"
              tags={["Manejo de alimentos", "Atención al cliente"]} />
              <DriverCard name="Camilo Ortiz" yrs="4 años" rating="4,95" punct="98,8%" hyg="99,4%"
              tags={["Cadena de frío", "Conducción segura"]} />
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

}

/* ====== PUNTUALIDAD — Diferenciador + Multas fusionados ====== */
function ToleranceBand() {
  const [p, setP] = useState(18);
  useEffect(() => {
    let raf,t0 = performance.now();
    const loop = (t) => {
      const e = (t - t0) / 9000 % 1;
      setP(+(e * 100).toFixed(1));
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const OK = 52,GR = 70; // límites de zona en %
  const zone = p < OK ? "ok" : p < GR ? "grace" : "fine";
  const minute = p / 100 * 18; // mapeo a minutos (0–18)
  return (
    <div className="tband reveal">
      <div className="tband-head">
        <div>
          <div className="tband-kicker">La regla, sin letra pequeña</div>
          <h3>Tolerancia → Cortesía → Multa</h3>
        </div>
        <div className={"tband-fee" + (zone === "fine" ? " lit" : "")}>
          <span className="amt">$800</span><span className="per">COP / min</span>
          <span className="cap">igual para todos los planes · tras 5 min de cortesía</span>
        </div>
      </div>
      <div className="tband-bar">
        <div className="tband-ok" style={{ width: OK + "%" }}>
          <span className="zl"><b>Tolerancia</b><span>5 min · sin costo</span></span>
        </div>
        <div className="tband-grace" style={{ width: GR - OK + "%" }}>
          <span className="zl"><b>Cortesía</b><span>+2 min de gracia</span></span>
        </div>
        <div className="tband-fine" style={{ width: 100 - GR + "%" }}>
          <span className="zl"><b>Multa</b><span>$800 / min</span></span>
        </div>
        <div className="tband-marker" style={{ left: p + "%" }}>
          <span className="tband-clock">{minute.toFixed(0)}:{String(Math.floor(minute % 1 * 60)).padStart(2, "0")}</span>
        </div>
      </div>
      <p className="tband-note">El repartidor de su restaurante espera con paciencia. Pasada la ventana de tolerancia de 5 minutos y los 5 minutos de cortesía, cada minuto extra cuesta $800 COP — igual en todos los planes — registrado y visible en su panel. Transparencia total, en ambas vías.</p>
    </div>);

}
function Diff() {
  return (
    <section className="section diff" id="puntualidad">
      <div className="wrap">
        <div className="section-head center reveal" style={{ maxWidth: 780 }}>
          <span className="eyebrow center">Puntualidad en ambas vías</span>
          <h2 style={{ color: "var(--on-dark)" }}>El tiempo es el ingrediente que nadie ve.</h2>
          <p style={{ color: "var(--on-dark-2)" }}>Otros prometen "lo antes posible". Nosotros prometemos un rango y lo cumplimos. Y pedimos lo mismo de vuelta: respeto por el tiempo de su repartidor.</p>
        </div>
        <div className="diff-grid">
          <div className="gauge reveal">
            <div className="gauge-top">
              <div className="gauge-big">12<small> min</small></div>
              <div className="gauge-label">Llegada promedio al restaurante este mes</div>
            </div>
            <div className="gauge-bar">
              <div className="gauge-zone" style={{ left: "21%", width: "36%" }}></div>
              <div className="gauge-needle" style={{ left: "50%" }}></div>
            </div>
            <div className="gauge-marks"><span>9 min</span><span>Rango óptimo</span><span>14 min</span></div>
          </div>
          <div className="reveal">
            <div className="diff-list">
              {[
              ["Rango garantizado, no estimado", "Sabe exactamente cuándo planear el empaque."],
              ["Asignación inteligente por cercanía", "El repartidor disponible más cercano, cada vez."],
              ["Prioridad en horas pico", "En alta demanda, sus pedidos se asignan primero."],
              ["Si lo hacemos esperar, no paga", "La puntualidad es nuestra responsabilidad, no su costo."]].
              map(([b, s]) =>
              <div className="diff-li" key={b}><span className="ck"><Icon name="check" /></span><div><b>{b}</b> <span>— {s}</span></div></div>
              )}
            </div>
          </div>
        </div>
        <ToleranceBand />
      </div>
    </section>);

}

Object.assign(window, { Pillars, How, Drivers, Diff });