// hero.jsx: PH hero with a LIVE Manila dispatch map + tracking phone
function Hero() {
  const T = window.l2uTokens;
  const m = window.useIsMobile();
  return (
    <section style={{
      background: T.cream,
      fontFamily: T.fontSans, position: "relative", overflow: "hidden",
      paddingBottom: m ? 44 : 110,
    }}>
      <div style={{
        display: "grid", gridTemplateColumns: "1.02fr 1fr", gap: m ? 28 : 56,
        padding: m ? "24px 20px 0" : "56px 80px 0", maxWidth: 1440, margin: "0 auto",
        alignItems: "center",
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 26 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 10, alignSelf: "flex-start",
            padding: "7px 14px", borderRadius: 999, background: "#fff",
            border: "1px solid rgba(28,62,97,0.10)", color: T.bluishGrey, fontSize: 12,
            fontFamily: T.fontMono, letterSpacing: "0.8px",
          }}>
            <window.L2U_Dot color={T.success} pulse />
            <span>NOW LIVE IN METRO MANILA · CEBU · DAVAO</span>
          </span>
          <h1 style={{
            margin: 0, fontWeight: 900, fontSize: 68, lineHeight: "74px",
            letterSpacing: "-2.2px", color: T.bluishGrey, textWrap: "balance",
          }}>
            Delivery management software built for{" "}
            <span style={{ color: T.primary }}>Philippine fleets.</span>
          </h1>
          <p style={{
            margin: 0, fontSize: 18, lineHeight: "30px",
            color: T.mute, maxWidth: 540,
          }}>
            Route smarter, track every driver, and give your customers a tracking link they actually trust. From 5 drivers to 100+, made for businesses across Metro Manila, Cebu, and Davao.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <window.L2U_Btn variant="primaryLg" glow href="/request-access">
              Request Access
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
            </window.L2U_Btn>
            <window.L2U_Btn variant="secondary" onClick={() => { window.location.href = "/pricing"; }}>See pricing in pesos</window.L2U_Btn>
          </div>
          <div style={{
            display: "flex", flexWrap: "wrap", gap: 22,
            fontFamily: T.fontMono, fontSize: 12, color: T.mute2,
            letterSpacing: "0.3px", marginTop: 4,
          }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <CheckIcon /> 30-day money-back guarantee
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <CheckIcon /> Save with annual billing
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <CheckIcon /> Setup in 1 week
            </span>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <HeroMock mobile={m} />
        </div>
      </div>
    </section>
  );
}

function CheckIcon() {
  const T = window.l2uTokens;
  return (
    <span style={{
      width: 18, height: 18, borderRadius: "50%", background: "rgba(45,210,122,0.14)",
      display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
    }}>
      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={T.success} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
  );
}

// Count-up hook: eases a number from 0 → target on mount.
function useCountUp(target, dur = 1500) {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    let raf, start;
    const tick = (ts) => {
      if (!start) start = ts;
      const p = Math.min(1, (ts - start) / dur);
      setV(target * (1 - Math.pow(1 - p, 3)));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, dur]);
  return v;
}

// The signature route geometry (viewBox 0 0 600 540).
const HERO_ROUTE = "M250 452 C 330 416 378 332 446 252 C 492 198 526 122 548 60";
// Map coords → percentage of the (preserveAspectRatio=none) box, so HTML pins
// line up exactly with the route SVG regardless of the box's aspect.
const px = (x) => (x / 600) * 100 + "%";
const py = (y) => (y / 540) * 100 + "%";

function HeroMock({ mobile }) {
  return (
    <div style={{
      position: "relative", width: "100%",
      maxWidth: mobile ? 460 : 660, margin: mobile ? "0 auto" : "0 0 0 auto",
      minHeight: mobile ? 320 : 440,
    }}>
      <DispatchMap />
      <PhoneTracker />
    </div>
  );
}

function DispatchMap() {
  const T = window.l2uTokens;
  const pathRef = React.useRef(null);
  const markerRef = React.useRef(null);

  // Drive the courier marker along the route, forever.
  React.useEffect(() => {
    const path = pathRef.current, marker = markerRef.current;
    if (!path || !marker) return;
    let raf, start;
    const len = path.getTotalLength();
    const dur = 7600;
    const loop = (ts) => {
      if (!start) start = ts;
      const p = (((ts - start) % dur) / dur);
      const pt = path.getPointAtLength(p * len);
      marker.style.left = (pt.x / 600 * 100) + "%";
      marker.style.top = (pt.y / 540 * 100) + "%";
      marker.style.opacity = p < 0.02 || p > 0.98 ? "0" : "1";
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  const drivers = useCountUp(12, 1100);
  const stops = useCountUp(184, 1600);
  const ontime = useCountUp(94, 1900);

  return (
    <div style={{
      width: "88%", marginLeft: "auto",
      background: "#0B1F33", borderRadius: 22,
      border: "1px solid rgba(255,255,255,0.08)",
      boxShadow: "0 40px 80px rgba(15,31,56,0.28)",
      overflow: "hidden",
    }}>
      {/* Window chrome */}
      <div style={{
        height: 44, display: "flex", alignItems: "center", gap: 10, padding: "0 16px",
        borderBottom: "1px solid rgba(255,255,255,0.06)", background: "#0A1A2B",
      }}>
        <span style={{ display: "inline-flex", gap: 7 }}>
          <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#FF5F57" }}/>
          <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#FEBC2E" }}/>
          <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#28C840" }}/>
        </span>
        <div style={{
          flex: 1, height: 26, borderRadius: 7, background: "rgba(255,255,255,0.05)",
          display: "flex", alignItems: "center", padding: "0 12px",
          fontFamily: T.fontMono, fontSize: 11.5, color: "rgba(255,255,255,0.62)",
        }}>locate2u.com/ph/dispatch · Manila Hub</div>
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 7,
          fontFamily: T.fontMono, fontSize: 11, color: T.success, letterSpacing: "1px", fontWeight: 700,
        }}>
          <window.L2U_Dot pulse /> LIVE
        </span>
      </div>

      {/* Map area */}
      <div style={{ position: "relative", aspectRatio: "1.05 / 1", background: "#0C2237" }}>
        {/* Real Manila street map */}
        <img src={(window.__resources && window.__resources.webMap) || "assets/webscreen.png"} alt=""
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>

        {/* Route + animated layers (none = linear map, aligns with % pins) */}
        <svg viewBox="0 0 600 540" width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, overflow: "visible" }}>
          {/* glow base */}
          <path d={HERO_ROUTE} stroke="rgba(43,147,255,0.25)" strokeWidth="11" fill="none" strokeLinecap="round" vectorEffect="non-scaling-stroke"/>
          {/* solid route, draws in */}
          <path ref={pathRef} d={HERO_ROUTE} stroke="#2B93FF" strokeWidth="5" fill="none" strokeLinecap="round"
            vectorEffect="non-scaling-stroke"
            style={{ strokeDasharray: 1100, animation: "l2uDraw 1.9s cubic-bezier(0.2,0.8,0.2,1) forwards" }}/>
          {/* flowing pulse */}
          <path d={HERO_ROUTE} stroke="#9FD2FB" strokeWidth="5" fill="none" strokeLinecap="round"
            vectorEffect="non-scaling-stroke"
            style={{ strokeDasharray: "6 254", animation: "l2uFlow 2.4s linear infinite", opacity: 0.95 }}/>
        </svg>

        {/* Pins (HTML, percentage-positioned to match route box) */}
        <Pin x={548} y={60} style={{ animationDelay: "1.5s" }} />
        <Pin x={446} y={252} style={{ animationDelay: "1.0s" }} />
        <HomePin x={250} y={452} />

        {/* Live courier marker, driven by rAF */}
        <div ref={markerRef} style={{
          position: "absolute", left: "41%", top: "83%", transform: "translate(-50%,-50%)",
          width: 26, height: 26, zIndex: 4, pointerEvents: "none",
          transition: "opacity .3s ease",
        }}>
          <span style={{
            position: "absolute", left: "50%", top: "50%", width: 26, height: 26,
            borderRadius: "50%", background: "rgba(43,147,255,0.35)",
            animation: "l2uRing 1.8s ease-out infinite",
          }}/>
          <span style={{
            position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)",
            width: 20, height: 20, borderRadius: "50%", background: T.primary,
            border: "3px solid #fff", boxShadow: "0 3px 10px rgba(0,0,0,0.4)",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="#fff"><path d="M3 13l1-5h13l3 4v3h-2a2 2 0 1 1-4 0H9a2 2 0 1 1-4 0H3z"/></svg>
          </span>
        </div>

        {/* Stat card */}
        <div style={{
          position: "absolute", left: 16, top: 16,
          background: "rgba(11,31,51,0.86)", border: "1px solid rgba(255,255,255,0.10)",
          borderRadius: 14, padding: "14px 16px", backdropFilter: "blur(4px)",
          color: "#fff", fontFamily: T.fontSans, minWidth: 200, zIndex: 5,
        }}>
          <div style={{ fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.2px", color: T.muteOnDark }}>
            ACTIVE ROUTES · METRO MANILA
          </div>
          <div style={{ display: "flex", gap: 16, marginTop: 12 }}>
            <Stat label="Drivers" value={Math.round(drivers)} />
            <Stat label="Stops" value={Math.round(stops)} />
            <Stat label="On-time" value={Math.round(ontime) + "%"} color={T.success} />
          </div>
        </div>

        {/* Geofence alert */}
        <div style={{
          position: "absolute", right: 18, top: "22%", width: 232,
          background: "#fff", borderRadius: 14, padding: "13px 15px",
          boxShadow: T.shadowToast, display: "flex", gap: 11, alignItems: "flex-start", zIndex: 5,
        }}>
          <span style={{
            width: 26, height: 26, borderRadius: "50%", background: "rgba(244,161,29,0.16)",
            color: T.warn, display: "inline-flex", alignItems: "center", justifyContent: "center",
            fontWeight: 900, fontSize: 14, flexShrink: 0,
            animation: "l2uPulse 1.8s ease-in-out infinite",
          }}>!</span>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: T.fontMono, fontSize: 9, letterSpacing: "1.2px", color: T.warn, fontWeight: 700 }}>GEOFENCE ALERT</div>
            <div style={{ fontWeight: 600, fontSize: 12.5, color: T.bluishGrey, marginTop: 4, lineHeight: 1.35 }}>Driver entered EDSA buffer zone · 09:38</div>
          </div>
        </div>

        {/* Driver card */}
        <div style={{
          position: "absolute", right: 18, bottom: 18, width: 248,
          background: "#fff", borderRadius: 16, padding: "14px 16px",
          boxShadow: T.shadowToast, zIndex: 5,
        }}>
          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <span style={{
              width: 38, height: 38, borderRadius: "50%", background: T.primary,
              color: "#fff", fontWeight: 700, fontSize: 13,
              display: "inline-flex", alignItems: "center", justifyContent: "center",
            }}>JC</span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 14, color: T.bluishGrey }}>JC Angeles</div>
              <div style={{ fontFamily: T.fontMono, fontSize: 10, color: T.mute2, marginTop: 2 }}>STOP 7 OF 14 · MULTICAB</div>
            </div>
          </div>
          <div style={{
            marginTop: 11, paddingTop: 11, borderTop: "1px solid rgba(28,62,97,0.08)",
            display: "flex", justifyContent: "space-between",
            fontFamily: T.fontMono, fontSize: 11, color: T.bluishGrey,
          }}>
            <span>ETA <strong style={{ color: T.primaryDeep }}>10:14</strong></span>
            <span>· 2.6 km</span>
            <span style={{ color: T.success, display: "inline-flex", alignItems: "center", gap: 5 }}>
              <window.L2U_Dot color={T.success} size={6} pulse /> ON TIME
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Pin({ x, y, style }) {
  const T = window.l2uTokens;
  return (
    <span style={{
      position: "absolute", left: px(x), top: py(y),
      width: 18, height: 18, borderRadius: "50%", background: "#fff",
      border: "3px solid " + T.primary, boxShadow: "0 3px 10px rgba(0,0,0,0.4)",
      transform: "translate(-50%,-50%)", zIndex: 3,
      animation: "l2uPinPop .5s cubic-bezier(0.2,0.8,0.2,1) both",
      ...(style || {}),
    }}/>
  );
}

function HomePin({ x, y }) {
  const T = window.l2uTokens;
  return (
    <div style={{ position: "absolute", left: px(x), top: py(y), transform: "translate(-50%,-50%)", zIndex: 3 }}>
      <span style={{
        position: "absolute", left: "50%", top: "50%", width: 36, height: 36,
        borderRadius: "50%", background: "rgba(255,255,255,0.25)",
        animation: "l2uRing 2.2s ease-out infinite",
      }}/>
      <span style={{
        position: "relative", display: "flex", alignItems: "center", justifyContent: "center",
        width: 34, height: 34, borderRadius: "50%", background: T.bluishGrey,
        border: "3px solid #fff", boxShadow: "0 4px 12px rgba(0,0,0,0.45)",
      }}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5"/>
        </svg>
      </span>
    </div>
  );
}

function Stat({ label, value, color }) {
  const T = window.l2uTokens;
  return (
    <div>
      <div style={{ fontWeight: 900, fontSize: 24, lineHeight: 1, color: color || "#fff", letterSpacing: "-0.6px" }}>{value}</div>
      <div style={{ fontSize: 10, color: T.muteOnDark, marginTop: 5, letterSpacing: "0.4px" }}>{label}</div>
    </div>
  );
}

// Floating phone: overlaps the window bottom-left, with a live tracking page.
function PhoneTracker() {
  const T = window.l2uTokens;
  const [mins, setMins] = React.useState(22);
  React.useEffect(() => {
    const id = setInterval(() => setMins((m) => (m <= 18 ? 22 : m - 1)), 4200);
    return () => clearInterval(id);
  }, []);
  const dotRef = React.useRef(null);
  const miniRef = React.useRef(null);
  React.useEffect(() => {
    const path = miniRef.current, dot = dotRef.current;
    if (!path || !dot) return;
    let raf, start; const len = path.getTotalLength(); const dur = 5200;
    const loop = (ts) => {
      if (!start) start = ts;
      const p = (((ts - start) % dur) / dur);
      const pt = path.getPointAtLength(p * len);
      dot.setAttribute("cx", pt.x); dot.setAttribute("cy", pt.y);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <div style={{
      position: "absolute", left: 0, bottom: -44,
      width: 218, borderRadius: 34,
      background: "#0A1A2B", border: "9px solid #050E18",
      boxShadow: "0 34px 70px rgba(0,0,0,0.45)",
      overflow: "hidden", display: "flex", flexDirection: "column", zIndex: 8,
    }}>
      {/* status bar */}
      <div style={{
        height: 28, background: "#fff", display: "flex",
        alignItems: "center", justifyContent: "space-between", padding: "0 16px",
        fontFamily: T.fontMono, fontSize: 10, color: T.bluishGrey, fontWeight: 700,
      }}>
        <span>10:12</span>
        <span style={{ display: "inline-flex", gap: 5, alignItems: "center" }}>
          <svg width="13" height="9" viewBox="0 0 13 9" fill="none"><rect x="0" y="4" width="2" height="5" fill={T.bluishGrey}/><rect x="3.5" y="2.5" width="2" height="6.5" fill={T.bluishGrey}/><rect x="7" y="1" width="2" height="8" fill={T.bluishGrey}/><rect x="10.5" y="0" width="2" height="9" fill="rgba(28,62,97,0.35)"/></svg>
          <span style={{ fontSize: 9 }}>4G</span>
          <span>83</span>
        </span>
      </div>
      <div style={{ background: "#fff", flex: 1, position: "relative", overflow: "hidden" }}>
        <div style={{
          background: T.bluishGrey, color: "#fff", padding: "14px 16px",
          display: "flex", flexDirection: "column", gap: 4,
        }}>
          <div style={{ fontFamily: T.fontMono, fontSize: 9, letterSpacing: "1.2px", color: "#6EC1F7" }}>ORDER #M2K-4421</div>
          <div style={{ fontWeight: 700, fontSize: 15 }}>Your order is on the way</div>
          <div style={{ fontSize: 11, color: "rgba(255,255,255,0.7)" }}>JC Angeles · arriving in <strong style={{ color: "#fff" }}>{mins} min</strong></div>
        </div>
        {/* mini map */}
        <div style={{ position: "relative", height: 118, background: "#E8F1FA" }}>
          <img src={(window.__resources && window.__resources.phoneMap) || "assets/phonescreen.png"} alt=""
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
          <svg viewBox="0 0 218 118" width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0 }}>
            <path ref={miniRef} d="M 28 96 L 55 78 L 70 84 L 96 56 L 130 60 L 158 40 L 190 26"
              stroke="#2B93FF" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <circle cx="28" cy="96" r="6" fill="#1C3E61" stroke="#fff" strokeWidth="2"/>
            <circle cx="190" cy="26" r="6" fill="#2DD27A" stroke="#fff" strokeWidth="2"/>
            <circle ref={dotRef} cx="96" cy="56" r="6" fill="#2B93FF" stroke="#fff" strokeWidth="2.5"/>
          </svg>
        </div>
        <div style={{ padding: "13px 16px 16px" }}>
          <div style={{ fontFamily: T.fontMono, fontSize: 9, letterSpacing: "1.2px", color: T.primary, fontWeight: 700 }}>DELIVER TO</div>
          <div style={{ fontWeight: 700, fontSize: 12.5, color: T.bluishGrey, marginTop: 4, lineHeight: 1.4 }}>
            14 Scout Borromeo St,<br/>Quezon City, NCR 1103
          </div>
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 9 }}>
            {[
              { l: "Order received", t: "09:14", done: true },
              { l: "Driver assigned", t: "09:38", done: true },
              { l: "Out for delivery", t: "10:02", done: true, current: true },
              { l: "Delivered", t: "-", done: false },
            ].map((s, i) => (
              <div key={i} style={{ display: "flex", gap: 9, alignItems: "center" }}>
                <span style={{
                  position: "relative", width: 12, height: 12, borderRadius: "50%",
                  background: s.current ? T.primary : (s.done ? T.success : "rgba(28,62,97,0.14)"),
                }}>
                  {s.current && <span style={{
                    position: "absolute", left: "50%", top: "50%", width: 12, height: 12, borderRadius: "50%",
                    background: "rgba(43,147,255,0.4)", animation: "l2uRing 1.8s ease-out infinite",
                  }}/>}
                </span>
                <span style={{
                  flex: 1, fontSize: 11, color: s.done ? T.bluishGrey : T.mute2,
                  fontWeight: s.current ? 700 : 500,
                }}>{s.l}</span>
                <span style={{ fontFamily: T.fontMono, fontSize: 9.5, color: T.mute2 }}>{s.t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.L2U_Hero = Hero;