// product-page.jsx: reusable feature/product page.
// Renders a full feature page (hero, problem, payoff, how-it-works, why, who-it's-for,
// FAQ, CTA) from a content object keyed by slug. Used by route-optimization.html,
// customer-tracking.html, proof-of-delivery.html, driver-app.html,
// dispatch-dashboard.html and api-integrations.html.

const PP_LIGHT = "#6EC1F7";
const ppDot = (c) => ({ width: 9, height: 9, borderRadius: "50%", background: c });

// ── Icons (feather-style) for the "who it's for" cards ────────────────────
function PPIcon({ name, size = 22 }) {
  const T = window.l2uTokens;
  const P = {
    food: (<g><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/></g>),
    water: (<path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"/>),
    wrench: (<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>),
    pill: (<g><path d="m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z"/><path d="m8.5 8.5 7 7"/></g>),
    bag: (<g><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></g>),
    box: (<g><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></g>),
    truck: (<g><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></g>),
    store: (<g><path d="m2 7 2-3h16l2 3"/><path d="M4 7v13a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7"/><path d="M4 7h16"/></g>),
    file: (<g><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v5h5"/></g>),
    code: (<g><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></g>),
    users: (<g><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></g>),
    layers: (<g><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 12.09-9.17 4.16a2 2 0 0 1-1.66 0L2 12.09"/></g>),
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={T.primary} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{P[name] || P.box}</svg>
  );
}

// ── Device card frame (dark browser/phone chrome) ─────────────────────────
function DeviceCard({ url, children, height }) {
  const T = window.l2uTokens;
  return (
    <div style={{ background: T.navy, border: "1px solid rgba(255,255,255,0.08)", borderRadius: 24, overflow: "hidden", boxShadow: "0 30px 70px rgba(1,16,31,0.30)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 16px", borderBottom: "1px solid rgba(255,255,255,0.07)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, minWidth: 0 }}>
          <span style={{ display: "flex", gap: 6 }}><span style={ppDot("#FE5425")} /><span style={ppDot(T.warn)} /><span style={ppDot(T.success)} /></span>
          <span style={{ fontFamily: T.fontMono, fontSize: 11, color: "rgba(255,255,255,0.62)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{url}</span>
        </div>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: T.fontMono, fontSize: 10.5, letterSpacing: "1px", color: T.success }}>
          <window.L2U_Dot color={T.success} size={7} pulse /> LIVE
        </span>
      </div>
      <div style={{ position: "relative", minHeight: height === "auto" ? 0 : (height || 440), background: T.navyMid, overflow: "hidden" }}>{children}</div>
    </div>
  );
}

function GridBg() {
  return (
    <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.16 }}>
      <defs><pattern id="ppgrid" width="52" height="52" patternUnits="userSpaceOnUse"><path d="M 52 0 L 0 0 0 52" fill="none" stroke="rgba(110,193,247,0.6)" strokeWidth="0.5" /></pattern></defs>
      <rect width="100%" height="100%" fill="url(#ppgrid)" />
    </svg>
  );
}

function StopDot({ left, top, n, color }) {
  const T = window.l2uTokens;
  return (
    <span style={{ position: "absolute", left, top, width: 22, height: 22, borderRadius: "50%", background: color || T.primary, border: "2px solid #fff", transform: "translate(-50%,-50%)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: T.fontMono, fontSize: 11, fontWeight: 700, color: color === T.success ? T.darkBlue : "#fff" }}>{n}</span>
  );
}

// ── Per-feature hero visual ───────────────────────────────────────────────
function HeroVisual({ slug }) {
  const T = window.l2uTokens;
  const mono = T.fontMono;

  if (slug === "route-optimization") {
    // "Route optimizer" map, composited from:
    //   assets/routeopt_map.png   — dark Manila map (background; defines the box)
    //   the route line            — drawn inline as an SVG polyline below (no image)
    //   assets/stop.png           — one stop marker, dropped on each route vertex
    //   assets/home-icon.png      — the origin/home pin
    // The blue route line is drawn as an inline SVG polyline (no image), traced from
    // the reference route. ROUTE_PTS are points on the map box (percent). It is drawn
    // twice — a dark outline under a blue line — to match the look of the old asset.
    // STOPS sit on the line; the home marks the line's start.
    const ROUTE_PTS = "188.3,733 251.9,882 277.7,890 302.1,878 304.8,851 287.2,800 335.9,732 360.3,720 415.8,725 467.3,704 494.4,706 577,727 617.7,762 642,766 661,744 680,692 632.6,537 632.6,510 704.3,467 891.3,423 911.6,406 911.6,379 921.1,353 963,319 1014.5,164 1041.6,118 1124.2,118 1202.8,92";
    const STOPS = [
      ["24.8%", "73.2%"], ["36.5%", "70.6%"], ["50.2%", "69.2%"],
      ["46.7%", "51%"], ["65.8%", "42.3%"], ["76.9%", "11.8%"], ["88.8%", "9.2%"],
    ];
    return (
      <DeviceCard url="locate2u.com/ph/dispatch · Route optimizer" height="auto">
        <img src="assets/routeopt_map.png" alt="" aria-hidden="true" style={{ display: "block", width: "100%", height: "auto" }} />
        <svg viewBox="0 0 1354.5 1000" preserveAspectRatio="none" role="img" aria-label="Optimized delivery route across Metro Manila" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
          {/* dark outline + blue line, both draw on from the start (like the homepage hero) */}
          <polyline points={ROUTE_PTS} fill="none" stroke="#0A1524" strokeWidth="22" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.6s cubic-bezier(0.2,0.8,0.2,1) 1.1s both" }} />
          <polyline points={ROUTE_PTS} fill="none" stroke={T.primary} strokeWidth="14" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.6s cubic-bezier(0.2,0.8,0.2,1) 1.1s both" }} />
          {/* a light pulse travels along the route once it's drawn */}
          <polyline points={ROUTE_PTS} fill="none" stroke="#BFE0FF" strokeWidth="14" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: "3 97", opacity: 0, animation: "l2uFadeIn 0.4s ease 2.7s forwards, l2uFlowN 2.6s linear 2.7s infinite" }} />
        </svg>
        {STOPS.map(([left, top], i) => (
          <img key={i} src="assets/stop.png" alt="" aria-hidden="true" style={{ position: "absolute", left, top, width: "4%", transform: "translate(-50%,-50%)", pointerEvents: "none", animation: `l2uPinPop 0.45s cubic-bezier(0.2,0.8,0.2,1) ${(0.1 + i * 0.09).toFixed(2)}s both` }} />
        ))}
        <img src="assets/home-icon.png" alt="Route origin" style={{ position: "absolute", left: "13.9%", top: "73.3%", width: "5%", transform: "translate(-50%,-75.7%)", pointerEvents: "none", animation: "l2uFadeIn 0.4s ease 0.05s both" }} />
        <div style={{ position: "absolute", left: 16, top: 16, background: "#fff", borderRadius: 12, padding: "12px 15px", boxShadow: "0 8px 24px rgba(0,0,0,0.28)" }}>
          <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "1.3px", color: T.primary, fontWeight: 500 }}>OPTIMIZED ROUTE</div>
          <div style={{ fontWeight: 700, fontSize: 17, color: T.bluishGrey, marginTop: 4, whiteSpace: "nowrap" }}>33.9 km · 2 hr 6 min</div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 5, fontSize: 11.5, color: T.success, fontWeight: 500 }}>↓ 37% less drive time</div>
        </div>
      </DeviceCard>
    );
  }

  if (slug === "customer-tracking") {
    // Live tracking card the customer sees. Map = assets/custtracking-map.png with the
    // blue route + start dot + orange destination pin drawn on top.
    // Route points in the map's own 452x310 space (matches the container aspect,
    // so the stroke scales evenly without vector-effect and the draw dash works).
    const TRACK_ROUTE = "72.3,244.9 108.5,272.8 149.2,229.4 189.8,145.7 239.6,201.5 266.7,164.3 284.8,189.1 302.8,151.9 330,105.4";
    return (
      <div style={{ width: "100%", maxWidth: 430, margin: "0 auto", background: "#fff", borderRadius: 24, overflow: "hidden", border: "1px solid " + T.border, boxShadow: "0 1px 2px rgba(15,31,56,0.04), 0 30px 70px rgba(15,31,56,0.16)" }}>
        <div style={{ position: "relative", aspectRatio: "452 / 310", background: T.navyMid, overflow: "hidden" }}>
          <img src="assets/custtracking-map.png?v=2" alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", left: 18, top: 15, fontFamily: mono, fontSize: 12, fontWeight: 600, letterSpacing: "0.4px", color: PP_LIGHT, animation: "l2uFadeIn 0.4s ease 0.15s both" }}>Order #L2UPH-4421</div>
          <svg viewBox="0 0 452 310" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
            <polyline points={TRACK_ROUTE} fill="none" stroke="#0A1524" strokeWidth="13.5" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.15s cubic-bezier(0.2,0.8,0.2,1) 0.35s both" }} />
            <polyline points={TRACK_ROUTE} fill="none" stroke={T.primary} strokeWidth="8" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.15s cubic-bezier(0.2,0.8,0.2,1) 0.35s both" }} />
            <polyline points={TRACK_ROUTE} fill="none" stroke="#BFE0FF" strokeWidth="8" strokeLinecap="round" strokeLinejoin="round" pathLength="100" style={{ strokeDasharray: "3 97", opacity: 0, animation: "l2uFadeIn 0.4s ease 1.7s forwards, l2uFlowN 2.6s linear 1.7s infinite" }} />
          </svg>
          {/* origin: live location dot (blue dot + white ring + soft halo) */}
          <span style={{ position: "absolute", left: "16%", top: "79%", width: 44, height: 44, transform: "translate(-50%,-50%)", pointerEvents: "none", animation: "l2uPopS 0.5s cubic-bezier(0.2,0.9,0.3,1.2) 0.15s both" }}>
            <span style={{ position: "absolute", left: "50%", top: "50%", width: 42, height: 42, marginLeft: -21, marginTop: -21, borderRadius: "50%", background: "rgba(43,147,255,0.22)", animation: "l2uPulse 1.9s ease-in-out infinite" }} />
            <span style={{ position: "absolute", left: "50%", top: "50%", width: 26, height: 26, marginLeft: -13, marginTop: -13, borderRadius: "50%", background: "#fff", boxShadow: "0 2px 6px rgba(0,0,0,0.4)" }} />
            <span style={{ position: "absolute", left: "50%", top: "50%", width: 13, height: 13, marginLeft: -6.5, marginTop: -6.5, borderRadius: "50%", background: T.primary }} />
          </span>
          <svg width="42" height="50" viewBox="0 0 60 71" fill="none" style={{ position: "absolute", left: "73%", top: "34%", transform: "translate(-50.8%,-79.6%)", filter: "drop-shadow(0 3px 5px rgba(0,0,0,0.35))", transformOrigin: "50% 90%", animation: "l2uPopS 0.5s cubic-bezier(0.2,0.9,0.3,1.3) 1.45s both" }}>
            <circle cx="30.5" cy="56.5" r="14.5" fill="#0C2035" />
            <circle cx="30.5" cy="56.5" r="10.875" fill="#fff" />
            <circle cx="30.5" cy="56.5" r="5.4375" fill="#0C2035" />
            <path d="M31 7C20.5 7 11 15.05 11 27.5C11 35.8 17.675 45.625 31 57C44.325 45.625 51 35.8 51 27.5C51 15.05 41.5 7 31 7ZM31 32C28.25 32 26 29.75 26 27C26 24.25 28.25 22 31 22C33.75 22 36 24.25 36 27C36 29.75 33.75 32 31 32Z" fill="#FE5425" />
            <path d="M31 32C28.25 32 26 29.75 26 27C26 24.25 28.25 22 31 22C33.75 22 36 24.25 36 27C36 29.75 33.75 32 31 32Z" fill="#fff" />
          </svg>
        </div>
        <div style={{ padding: "20px 22px 22px" }}>
          <div style={{ fontFamily: mono, fontSize: 12, fontWeight: 600, letterSpacing: "1.5px", textTransform: "uppercase", color: T.primary, animation: "l2uFadeUp 0.5s ease 0.5s both" }}>Your service is on its way</div>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 8, gap: 12, animation: "l2uFadeUp 0.5s ease 0.62s both" }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
              <span style={{ fontSize: 44, fontWeight: 900, letterSpacing: "-1.5px", color: T.darkBlue, lineHeight: 1 }}>12</span>
              <span style={{ fontSize: 17, fontWeight: 600, color: T.mute }}>min</span>
            </div>
            <span style={{ fontFamily: mono, fontSize: 12, color: T.mute, whiteSpace: "nowrap" }}>between 2:26 - 3:30 PM</span>
          </div>
          <div style={{ position: "relative", marginTop: 16, animation: "l2uFadeUp 0.5s ease 0.74s both" }}>
            <div style={{ height: 6, borderRadius: 3, background: "#E4E8EE", overflow: "hidden" }}>
              <div style={{ width: "64%", height: "100%", borderRadius: 3, background: T.primary, transformOrigin: "left", animation: "l2uGrowX 0.9s cubic-bezier(0.2,0.8,0.2,1) 0.95s both" }} />
            </div>
            {/* live progress head, blinking */}
            <span style={{ position: "absolute", left: "64%", top: "50%", transform: "translate(-50%,-50%)", width: 11, height: 11, borderRadius: "50%", background: T.primary, border: "2px solid #fff", boxShadow: "0 0 6px rgba(43,147,255,0.7)", animation: "l2uFadeIn 0.3s ease 1.75s both, l2uBlink 1.1s ease-in-out 2.05s infinite" }} />
          </div>
          <div style={{ borderTop: "1px solid " + T.border, marginTop: 18 }} />
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 16, animation: "l2uFadeUp 0.5s ease 0.92s both" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
              <img src="assets/driver-ronreyes.png?v=1" alt="Ron Reyes" style={{ width: 44, height: 44, borderRadius: "50%", objectFit: "cover", objectPosition: "42% 28%", flexShrink: 0 }} />
              <span style={{ minWidth: 0 }}>
                <span style={{ display: "block", fontWeight: 700, fontSize: 15, color: T.bluishGrey }}>Ron Reyes</span>
                <span style={{ display: "block", fontSize: 12.5, color: T.mute }}>Driver</span>
              </span>
            </div>
            <div style={{ display: "flex", gap: 10, flexShrink: 0 }}>
              <span style={{ width: 42, height: 42, borderRadius: "50%", border: "1px solid " + T.border, background: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={T.bluishGrey} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
              </span>
              <span style={{ width: 42, height: 42, borderRadius: "50%", background: T.primary, display: "flex", alignItems: "center", justifyContent: "center", boxShadow: T.shadowCTA }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></svg>
              </span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (slug === "proof-of-delivery") {
    return (
      <div style={{ width: "100%", maxWidth: 430, margin: "0 auto", background: "#fff", borderRadius: 24, border: "1px solid " + T.border, boxShadow: "0 1px 2px rgba(15,31,56,0.04), 0 30px 70px rgba(15,31,56,0.16)", padding: "26px 26px 24px" }}>
        <div style={{ fontFamily: mono, fontSize: 12, fontWeight: 600, letterSpacing: "1.6px", textTransform: "uppercase", color: T.primary, animation: "l2uFadeUp 0.5s ease 0.1s both" }}>Proof of delivery</div>
        <img src="assets/l2uphPODimage.png" alt="Parcels delivered at the doorstep" style={{ display: "block", width: "100%", height: "auto", borderRadius: 14, margin: "14px 0 22px", animation: "l2uFadeUp 0.55s ease 0.22s both" }} />
        <div style={{ fontFamily: mono, fontSize: 11, fontWeight: 600, letterSpacing: "1.6px", textTransform: "uppercase", color: T.mute2, marginBottom: 10, animation: "l2uFadeUp 0.5s ease 0.45s both" }}>Signature</div>
        <div style={{ background: "#F1F3F6", borderRadius: 14, minHeight: 96, display: "flex", alignItems: "center", justifyContent: "center", padding: "14px 16px", animation: "l2uFadeUp 0.5s ease 0.55s both" }}>
          <img src="assets/l2uphPODsign.png" alt="Recipient signature" style={{ width: "auto", height: 56, maxWidth: "72%", objectFit: "contain", animation: "l2uFadeIn 0.6s ease 0.85s both" }} />
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 20, gap: 12, animation: "l2uFadeUp 0.5s ease 0.78s both" }}>
          <span style={{ fontSize: 16, fontWeight: 800, color: T.bluishGrey }}>Delivered · 2:14 PM</span>
          <span style={{ fontSize: 14, color: T.mute }}>Signed: J. Santos</span>
        </div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 7, marginTop: 12, fontFamily: mono, fontSize: 13, color: T.mute, animation: "l2uFadeUp 0.5s ease 0.92s both" }}>
          <svg width="13" height="16" viewBox="0 0 24 30" fill="none" aria-hidden="true"><path d="M12 0C5.4 0 0 5.4 0 12c0 8.4 12 18 12 18s12-9.6 12-18C24 5.4 18.6 0 12 0z" fill="#FE5425" /><circle cx="12" cy="12" r="4" fill="#fff" /></svg>
          14.5896, 121.0359 · Quezon City
        </div>
      </div>
    );
  }

  if (slug === "driver-app") {
    const NAVY = "#0A1B2E";
    // Route + stop markers drawn over the (route-less) base map, in its 551x400 space.
    const ROUTE = "46,180 37,193 40,207 58,214 72,220 83,222 98,213 112,205 128,192 143,204 158,212 185,220 240,230 295,237 332,243 352,245 334,210 316,180 302,152 298,143 300,128 282,129 263,131 248,120 233,110 216,120 207,148 203,172 204,190";
    const mapStops = [[83, 224], [204, 191], [352, 245]];
    const stops = [
      ["12 Katipunan Ave", "Quezon City", "8:24 AM"],
      ["88 Ortigas Ave", "Pasig", "8:45 AM"],
      ["5 Shaw Blvd", "Mandaluyong", "9:16 AM"],
      ["30 Aurora Blvd", "San Juan", "9:45 AM"],
    ];
    const navItems = [
      ["Home", <path key="h" d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" />, true],
      ["Scan", <g key="s"><path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3" /><path d="M4 12h16" /></g>, false],
      ["Alerts", <path key="a" d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0" />, false],
    ];
    return (
      <div style={{ width: "100%", maxWidth: 300, margin: "0 auto" }}>
        <div style={{ background: NAVY, borderRadius: 42, padding: 9, boxShadow: "0 30px 70px rgba(15,31,56,0.28)" }}>
          <div style={{ background: "#fff", borderRadius: 33, overflow: "hidden" }}>
            {/* map (status bar + optimized route baked into the graphic) */}
            <div style={{ position: "relative", background: "#0A1B2E", animation: "l2uFadeIn 0.55s ease 0.05s both" }}>
              <img src="assets/driverapp-hero-map.png?v=5" alt="Optimized driver route across Metro Manila" style={{ display: "block", width: "100%", height: "auto" }} />
              <svg viewBox="0 0 395 321" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }} aria-hidden="true">
                <polyline points={ROUTE} fill="none" stroke={NAVY} strokeWidth="18" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.2s cubic-bezier(0.2,0.8,0.2,1) 0.72s both" }} />
                <polyline points={ROUTE} fill="none" stroke={T.primary} strokeWidth="11" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.2s cubic-bezier(0.2,0.8,0.2,1) 0.72s both" }} />
                <polyline points={ROUTE} fill="none" stroke="#BFE0FF" strokeWidth="11" strokeLinecap="round" strokeLinejoin="round" pathLength="100" style={{ strokeDasharray: "3 97", opacity: 0, animation: "l2uFadeIn 0.4s ease 2.1s forwards, l2uFlowN 2.6s linear 2.1s infinite" }} />
              </svg>
              {mapStops.map(([x, y], i) => (
                <img key={i} src="assets/stop.png" alt="" aria-hidden="true" style={{ position: "absolute", left: (x / 395 * 100) + "%", top: (y / 321 * 100) + "%", width: "7%", transform: "translate(-50%,-50%)", transformOrigin: "center", animation: "l2uPopS 0.4s cubic-bezier(0.2,0.9,0.3,1.2) " + (0.15 + i * 0.12) + "s both", pointerEvents: "none" }} />
              ))}
              <svg viewBox="0 0 60 71" fill="none" style={{ position: "absolute", left: (46 / 395 * 100) + "%", top: (180 / 321 * 100) + "%", width: "13%", aspectRatio: "60 / 71", transform: "translate(-50%,-79.6%)", transformOrigin: "50% 79.6%", filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.35))", animation: "l2uPopS 0.45s cubic-bezier(0.2,0.9,0.3,1.3) 0.5s both", pointerEvents: "none" }} aria-hidden="true">
                <circle cx="30.5" cy="56.5" r="14.5" fill="#0C2035" />
                <circle cx="30.5" cy="56.5" r="10.875" fill="#fff" />
                <circle cx="30.5" cy="56.5" r="5.4375" fill="#0C2035" />
                <path d="M31 7C20.5 7 11 15.05 11 27.5C11 35.8 17.675 45.625 31 57C44.325 45.625 51 35.8 51 27.5C51 15.05 41.5 7 31 7ZM31 32C28.25 32 26 29.75 26 27C26 24.25 28.25 22 31 22C33.75 22 36 24.25 36 27C36 29.75 33.75 32 31 32Z" fill="#FE5425" />
                <path d="M31 32C28.25 32 26 29.75 26 27C26 24.25 28.25 22 31 22C33.75 22 36 24.25 36 27C36 29.75 33.75 32 31 32Z" fill="#fff" />
              </svg>
              <div style={{ position: "absolute", top: 0, left: 0, right: 0, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 18px 0" }}>
                <span style={{ fontSize: 13, fontWeight: 700, color: "#fff" }}>7:21</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <svg width="17" height="12" viewBox="0 0 18 12" fill="#fff"><rect x="0" y="8" width="3" height="4" rx="1" /><rect x="5" y="5" width="3" height="7" rx="1" /><rect x="10" y="2" width="3" height="10" rx="1" /><rect x="15" y="0" width="3" height="12" rx="1" /></svg>
                  <svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke="#fff" /><rect x="2.5" y="2.5" width="14" height="7" rx="1.5" fill="#fff" /><rect x="21.5" y="4" width="2" height="4" rx="1" fill="#fff" /></svg>
                </span>
              </div>
            </div>
            {/* route summary */}
            <div style={{ padding: "14px 18px 10px", animation: "l2uFadeUp 0.5s ease 0.3s both" }}>
              <div style={{ fontSize: 16, fontWeight: 800, color: T.bluishGrey }}>Thursday, 1 Aug</div>
              <div style={{ fontSize: 12.5, color: T.mute, marginTop: 3 }}>12.3 km · 23 min · 4 stops</div>
            </div>
            {/* stop list */}
            <div>
              {stops.map(([addr, city, eta], i) => (
                <div key={addr} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 18px", borderTop: "1px solid " + T.border, animation: "l2uFadeUp 0.45s ease " + (0.42 + i * 0.09) + "s both" }}>
                  <span style={{ width: 22, height: 22, borderRadius: "50%", background: NAVY, color: "#fff", fontFamily: mono, fontSize: 11, fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{i + 1}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: T.bluishGrey, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{addr}</div>
                    <div style={{ fontSize: 11.5, color: T.mute }}>{city} · ETA {eta}</div>
                  </div>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={T.mute2} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6" /></svg>
                </div>
              ))}
            </div>
            {/* bottom nav */}
            <div style={{ display: "flex", borderTop: "1px solid " + T.border, animation: "l2uFadeIn 0.5s ease 0.85s both" }}>
              {navItems.map(([label, icon, active]) => (
                <div key={label} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 3, padding: "9px 0 12px", color: active ? T.primary : T.mute2 }}>
                  <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">{icon}</svg>
                  <span style={{ fontSize: 10, fontWeight: active ? 700 : 500 }}>{label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (slug === "dispatch-dashboard") {
    const ST = {
      delivered: { label: "Delivered", dot: "#2DD27A", bg: "rgba(45,210,122,0.12)", fg: "#178A4C" },
      transit: { label: "In transit", dot: T.primary, bg: "rgba(43,147,255,0.12)", fg: T.primaryDeep },
      scheduled: { label: "Scheduled", dot: "#7B5FD2", bg: "rgba(123,95,210,0.13)", fg: "#6244B8" },
      hold: { label: "On hold", dot: "#F5A623", bg: "rgba(245,166,35,0.16)", fg: "#A9701A" },
      prepared: { label: "Prepared", dot: "#8798AD", bg: "rgba(28,62,97,0.07)", fg: T.mute },
      failed: { label: "Delivery failed", dot: "#E5533C", bg: "rgba(229,83,60,0.12)", fg: "#BE3A28" },
    };
    const rows = [
      ["ORD-2041", "Bayani Hardware", ST.delivered],
      ["ORD-2042", "Metro Pharmacy", ST.transit],
      ["ORD-2043", "Island Appliances", ST.scheduled],
      ["ORD-2044", "Kubo Furniture", ST.hold],
      ["ORD-2045", "Sari Fresh Grocer", ST.prepared],
      ["ORD-2046", "Aloha Water & LPG", ST.failed],
    ];
    const col = "84px 1fr auto";
    return (
      <div style={{ width: "100%", maxWidth: 460, margin: "0 auto", background: "#fff", borderRadius: 24, border: "1px solid " + T.border, boxShadow: "0 1px 2px rgba(15,31,56,0.04), 0 30px 70px rgba(15,31,56,0.16)", padding: "22px 22px 14px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", animation: "l2uFadeIn 0.5s ease 0.05s both" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
            <span style={{ fontSize: 22, fontWeight: 900, letterSpacing: "-0.5px", color: T.bluishGrey }}>Orders</span>
            <span style={{ fontFamily: mono, fontSize: 12, color: T.mute }}>23 orders</span>
          </div>
          <span aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(28,62,97,0.045)", color: T.mute, border: "1px solid " + T.border, borderRadius: 10, padding: "8px 12px", fontSize: 13, fontWeight: 600 }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={T.mute2} strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg> Create order
          </span>
        </div>
        <div style={{ display: "flex", gap: 22, margin: "16px 0 2px", borderBottom: "1px solid " + T.border, animation: "l2uFadeIn 0.5s ease 0.14s both" }}>
          {[["All orders", true], ["In transit", false], ["Delivered", false]].map(([t, active]) => (
            <span key={t} style={{ paddingBottom: 10, fontSize: 13.5, fontWeight: active ? 700 : 500, color: active ? T.primary : T.mute, borderBottom: active ? "2px solid " + T.primary : "2px solid transparent" }}>{t}</span>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: col, gap: 10, padding: "12px 2px 8px", animation: "l2uFadeIn 0.5s ease 0.2s both" }}>
          {["ORDER #", "CUSTOMER", "STATUS"].map((h, i) => (
            <span key={h} style={{ fontFamily: mono, fontSize: 9.5, letterSpacing: "1px", color: T.mute2, justifySelf: i === 2 ? "end" : "start" }}>{h}</span>
          ))}
        </div>
        {rows.map(([id, cust, s], i) => (
          <div key={id} style={{ display: "grid", gridTemplateColumns: col, gap: 10, alignItems: "center", padding: "11px 2px", borderTop: "1px solid " + T.border, animation: "l2uFadeUp 0.5s cubic-bezier(0.2,0.8,0.2,1) " + (0.28 + i * 0.09) + "s both" }}>
            <span style={{ fontFamily: mono, fontSize: 12.5, fontWeight: 600, color: T.bluishGrey }}>{id}</span>
            <span style={{ fontSize: 13.5, color: T.bluishGrey, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{cust}</span>
            <span style={{ justifySelf: "end", display: "inline-flex", alignItems: "center", gap: 6, background: s.bg, color: s.fg, borderRadius: 999, padding: "4px 10px", fontSize: 12, fontWeight: 600, whiteSpace: "nowrap" }}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: s.dot }} />{s.label}
            </span>
          </div>
        ))}
      </div>
    );
  }

  // api-integrations
  const chip = (t, i) => (<span key={t} style={{ fontFamily: mono, fontSize: 11, color: "#fff", background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 999, padding: "5px 11px", animation: "l2uFadeUp 0.4s ease " + (0.95 + i * 0.07) + "s both" }}>{t}</span>);
  return (
    <DeviceCard url="api.locate2u.com/v1 · REST + webhooks">
      <div style={{ padding: 20 }}>
        <div style={{ background: "#061321", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 12, padding: 16, fontFamily: mono, fontSize: 12.5, lineHeight: "22px", overflowX: "auto", animation: "l2uFadeUp 0.5s ease 0.1s both" }}>
          <div><span style={{ color: T.success }}>POST</span> <span style={{ color: PP_LIGHT }}>/v1/stops</span></div>
          <div style={{ color: "rgba(255,255,255,0.55)" }}>{"{"}</div>
          <div style={{ color: "rgba(255,255,255,0.85)", paddingLeft: 16 }}>"address": <span style={{ color: T.warn }}>"14 Scout Borromeo St, QC"</span>,</div>
          <div style={{ color: "rgba(255,255,255,0.85)", paddingLeft: 16 }}>"window": <span style={{ color: T.warn }}>"09:00-12:00"</span></div>
          <div style={{ color: "rgba(255,255,255,0.55)" }}>{"}"}</div>
          <div style={{ marginTop: 10, color: T.success, animation: "l2uFadeIn 0.45s ease 0.7s both" }}>→ 200 OK <span style={{ color: "rgba(255,255,255,0.7)" }}>{"{ \"id\": \"stp_8f2\", \"eta\": \"10:14\" }"}</span></div>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 16 }}>{["Shopify", "WooCommerce", "Xero", "QuickBooks", "Zapier", "ERP"].map(chip)}</div>
        <div style={{ marginTop: 16, fontFamily: mono, fontSize: 11.5, color: "rgba(255,255,255,0.7)", animation: "l2uFadeIn 0.5s ease 1.35s both" }}>
          <span style={{ color: T.success }}>webhook</span> delivery.completed → <span style={{ color: PP_LIGHT }}>your-store.com/hooks</span>
        </div>
      </div>
    </DeviceCard>
  );
}

// ── Small shared blocks ───────────────────────────────────────────────────
function PlanRow({ variant, tag, title, sub, map, art }) {
  const T = window.l2uTokens;
  const good = variant === "good";
  return (
    <div style={{ display: "flex", gap: 13, alignItems: "center", background: good ? "rgba(45,210,122,0.08)" : T.cream2, border: good ? "1px solid rgba(45,210,122,0.22)" : "1px solid " + T.border, borderRadius: 14, padding: 14, marginTop: good ? 12 : 0 }}>
      <div style={{ width: 74, height: 56, borderRadius: 9, background: T.navyMid, flexShrink: 0, overflow: "hidden", position: "relative" }}>
        {map && <img src={map} alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", zIndex: 0 }} />}
        <svg viewBox="0 0 74 56" width="100%" height="100%" style={{ position: "relative", zIndex: 1, display: "block" }}>
          {art === "no-tracking" ? (
            <g>
              {/* "where is my order?" chat bubble */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#FE5425" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
                <path d="M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3" />
                <path d="M12 17h.01" />
              </svg>
              {/* count badge (matches the "×7" title) */}
              <circle cx="60" cy="12" r="9" fill="#FE5425" />
              <text x="60" y="16" textAnchor="middle" fontFamily={T.fontMono} fontSize="11" fontWeight="700" fill="#fff">7</text>
            </g>
          ) : art === "live-tracking" ? (
            <g>
              {/* live location pin */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={T.primary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                <circle cx="12" cy="10" r="3" fill={T.primary} stroke="none" />
              </svg>
              {/* live indicator */}
              <circle cx="61" cy="11" r="10" fill="rgba(45,210,122,0.16)" />
              <circle cx="61" cy="11" r="5" fill={T.success} />
            </g>
          ) : art === "no-pod" ? (
            <g>
              {/* file marked failed / no proof */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#FE5425" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
                <polyline points="13 2 13 9 20 9" />
                <path d="M9.5 11.8l5 5" />
                <path d="M14.5 11.8l-5 5" />
              </svg>
              {/* alert badge */}
              <circle cx="60" cy="12" r="9" fill="#FE5425" />
              <path d="M60 8v4.4" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
              <circle cx="60" cy="15.8" r="1.2" fill="#fff" />
            </g>
          ) : art === "pod" ? (
            <g>
              {/* file with proof captured */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={T.primary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
                <polyline points="13 2 13 9 20 9" />
                <path d="M8.8 14l2.3 2.3 4.3-4.7" />
              </svg>
              {/* verified indicator */}
              <circle cx="61" cy="11" r="10" fill="#0E3E2B" />
              <circle cx="61" cy="11" r="5" fill={T.success} />
            </g>
          ) : art === "guess-order" ? (
            <g>
              {/* phone / screenshot with a question */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#FE5425" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="5" y="2" width="14" height="20" rx="2.5" />
                <path d="M9.5 8.2a2.5 2.5 0 0 1 4.7 1.1c0 1.7-2.5 2-2.5 3.2" />
                <path d="M11.9 16h.01" />
              </svg>
              <circle cx="60" cy="12" r="9" fill="#FE5425" />
              <path d="M60 8v4.4" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
              <circle cx="60" cy="15.8" r="1.2" fill="#fff" />
            </g>
          ) : art === "driver-nav" ? (
            <g>
              {/* turn-by-turn navigation arrow */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={T.primary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polygon points="3 11 22 2 13 21 11 13 3 11" />
              </svg>
              <circle cx="61" cy="11" r="10" fill="rgba(45,210,122,0.16)" />
              <circle cx="61" cy="11" r="5" fill={T.success} />
            </g>
          ) : art === "calls-chaos" ? (
            <g>
              {/* endless calls */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#FE5425" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
              </svg>
              <circle cx="60" cy="12" r="9" fill="#FE5425" />
              <path d="M60 8v4.4" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
              <circle cx="60" cy="15.8" r="1.2" fill="#fff" />
            </g>
          ) : art === "board" ? (
            <g>
              {/* dispatch board / dashboard */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={T.primary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2.5" />
                <path d="M3 9h18" />
                <path d="M9 21V9" />
              </svg>
              <circle cx="61" cy="11" r="10" fill="rgba(45,210,122,0.16)" />
              <circle cx="61" cy="11" r="5" fill={T.success} />
            </g>
          ) : art === "manual-entry" ? (
            <g>
              {/* retyping the same thing in many places */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#FE5425" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="9" y="9" width="12" height="12" rx="2.5" />
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
              </svg>
              <circle cx="60" cy="12" r="9" fill="#FE5425" />
              <path d="M60 8v4.4" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
              <circle cx="60" cy="15.8" r="1.2" fill="#fff" />
            </g>
          ) : art === "integrated" ? (
            <g>
              {/* connected / integrated systems */}
              <svg x="22" y="13" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={T.primary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="18" cy="5" r="3" />
                <circle cx="6" cy="12" r="3" />
                <circle cx="18" cy="19" r="3" />
                <path d="M8.6 13.5l6.8 4" />
                <path d="M15.4 6.5l-6.8 4" />
              </svg>
              <circle cx="61" cy="11" r="10" fill="rgba(45,210,122,0.16)" />
              <circle cx="61" cy="11" r="5" fill={T.success} />
            </g>
          ) : good
            ? (<g><path d="M 10 46 C 26 38 30 26 42 22 C 54 18 58 12 62 8" stroke={T.primary} strokeWidth="3" fill="none" strokeLinecap="round" /><circle cx="10" cy="46" r="3.5" fill="#fff" /><circle cx="62" cy="8" r="3.5" fill={T.primary} /></g>)
            : (<g><path d="M 10 44 C 40 38 20 12 44 18 C 60 22 30 42 58 10" stroke="#FE5425" strokeWidth="2.5" strokeDasharray="4 4" fill="none" strokeLinecap="round" /><circle cx="10" cy="44" r="3.5" fill="#fff" /><circle cx="58" cy="10" r="3.5" fill="#FE5425" /></g>)}
        </svg>
      </div>
      <div>
        <div style={{ fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.2px", color: good ? T.success : "#FE5425", fontWeight: 500 }}>{tag}</div>
        <div style={{ fontWeight: 700, fontSize: 15, color: T.bluishGrey, marginTop: 3 }}>{title}</div>
        <div style={{ fontSize: 12, color: T.mute, marginTop: 2 }}>{sub}</div>
      </div>
    </div>
  );
}

function VsX() { const T = window.l2uTokens; return (<span style={{ width: 19, height: 19, borderRadius: "50%", background: "rgb(239,242,246)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1 }}><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={T.mute} strokeWidth="2.5" strokeLinecap="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg></span>); }
function VsCheck() { const T = window.l2uTokens; return (<span style={{ width: 19, height: 19, borderRadius: "50%", background: "rgba(45,210,122,0.16)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1 }}><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={T.success} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>); }

function ProductPage({ slug }) {
  const T = window.l2uTokens;
  const d = PP_PAGES[slug] || PP_PAGES["route-optimization"];
  const [openFaq, setOpenFaq] = React.useState(0);
  const goPricing = () => { window.location.href = "pricing.html"; };

  const heroCTAs = (onDark) => (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 14, alignItems: "center", marginTop: 4 }}>
      <window.L2U_Btn variant="primaryLg" glow arrow href="/request-access">Request Access</window.L2U_Btn>
      <window.L2U_Btn variant="secondary" onDark={onDark} onClick={goPricing}>See pricing in pesos</window.L2U_Btn>
    </div>
  );

  return (
    <React.Fragment>
      {/* HERO */}
      <window.L2U_Section background={T.cream} padding="64px 80px 88px">
        <div style={{ display: "grid", gridTemplateColumns: "1.04fr 1fr", gap: 56, alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 22, minWidth: 0 }}>
            <window.L2U_Eyebrow>{d.eyebrow}</window.L2U_Eyebrow>
            <h1 style={{ margin: 0, fontWeight: 900, fontSize: 52, lineHeight: "57px", letterSpacing: "-1.8px", color: T.bluishGrey, textWrap: "balance" }}>{d.title}<span style={{ color: T.primary }}>{d.accent}</span></h1>
            <p style={{ margin: 0, fontSize: 18, lineHeight: "29px", color: T.body, maxWidth: 540 }}>{d.body}</p>
            {heroCTAs(false)}
            <div style={{ display: "inline-flex", alignItems: "center", gap: 9, marginTop: 4, fontSize: 14, color: T.mute2 }}><window.L2U_Dot color={T.success} /> {d.builtFor}</div>
          </div>
          <div style={{ position: "relative", minWidth: 0 }}><HeroVisual slug={slug} /></div>
        </div>
      </window.L2U_Section>

      {/* PROBLEM */}
      <window.L2U_Section background={T.cream} padding="84px 80px" style={{ borderTop: "1px solid " + T.border }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.12fr 0.88fr", gap: 56, alignItems: "start" }}>
          <div>
            <window.L2U_Eyebrow>{d.problem.eyebrow}</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px 0 24px", fontWeight: 900, fontSize: 40, lineHeight: "47px", letterSpacing: "-1.2px", color: T.bluishGrey }}>{d.problem.title}</h2>
            {d.problem.paras.map((p, i) => (<p key={i} style={{ margin: "0 0 18px", fontSize: 16.5, lineHeight: "27px", color: T.body }}>{p}</p>))}
          </div>
          <div style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 22, padding: 22 }}>
            <div style={{ fontFamily: T.fontMono, fontSize: 10.5, letterSpacing: "1.3px", color: T.mute2, textTransform: "uppercase", marginBottom: 16 }}>{d.problem.compare.label}</div>
            <PlanRow variant="bad" tag={d.problem.compare.before.tag} title={d.problem.compare.before.title} sub={d.problem.compare.before.sub} map={d.problem.compare.map} art={d.problem.compare.before.art} />
            <PlanRow variant="good" tag={d.problem.compare.after.tag} title={d.problem.compare.after.title} sub={d.problem.compare.after.sub} map={d.problem.compare.map} art={d.problem.compare.after.art} />
          </div>
        </div>
      </window.L2U_Section>

      {/* PAYOFF (dark) */}
      <window.L2U_Section background={T.darkBlue} padding="84px 80px">
        <window.L2U_SectionHead eyebrow={d.payoff.eyebrow} title={d.payoff.title} onDark />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20 }}>
          {d.payoff.stats.map((s) => (
            <div key={s.label} style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 18, padding: 26 }}>
              <div style={{ fontWeight: 900, fontSize: 40, lineHeight: 1, letterSpacing: "-1.5px", color: "#fff" }}>{s.big}</div>
              <div style={{ fontWeight: 700, fontSize: 16, color: "#fff", margin: "14px 0 8px" }}>{s.label}</div>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: "21px", color: "rgb(200,210,226)" }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </window.L2U_Section>

      {/* HOW IT WORKS */}
      <window.L2U_Section background={T.cream} padding="84px 80px">
        <window.L2U_SectionHead eyebrow="How it works" title={d.how.title} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24 }}>
          {d.how.steps.map((s, i) => (
            <div key={i}>
              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 42, height: 42, borderRadius: "50%", background: T.primary, color: "#fff", fontWeight: 900, fontSize: 18 }}>{i + 1}</span>
              <h3 style={{ margin: "18px 0 9px", fontWeight: 700, fontSize: 18, color: T.bluishGrey }}>{s.title}</h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: "23px", color: T.mute }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </window.L2U_Section>

      {/* WHY */}
      <window.L2U_Section background={T.cream} padding="84px 80px" style={{ borderTop: "1px solid " + T.border }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 56, alignItems: "center" }}>
          <div>
            <window.L2U_Eyebrow>Why Locate2u</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px 0 22px", fontWeight: 900, fontSize: 40, lineHeight: "47px", letterSpacing: "-1.2px", color: T.bluishGrey }}>{d.why.title}</h2>
            {d.why.paras.map((p, i) => (<p key={i} style={{ margin: "0 0 18px", fontSize: 16.5, lineHeight: "27px", color: T.body }}>{p}</p>))}
          </div>
          <div style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 22, padding: 26, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
            <div>
              <div style={{ fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.1px", color: T.mute2, textTransform: "uppercase", marginBottom: 16 }}>{d.why.vs.old}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {d.why.vs.oldItems.map((t) => (<span key={t} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 13.5, lineHeight: "19px", color: T.mute }}><VsX />{t}</span>))}
              </div>
            </div>
            <div style={{ borderLeft: "1px solid " + T.border, paddingLeft: 22 }}>
              <div style={{ fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.1px", color: T.primary, textTransform: "uppercase", marginBottom: 16 }}>Locate2u</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {d.why.vs.newItems.map((t) => (<span key={t} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 13.5, lineHeight: "19px", color: T.bluishGrey, fontWeight: 500 }}><VsCheck />{t}</span>))}
              </div>
            </div>
          </div>
        </div>
        {d.why.quote && (
          <div style={{ maxWidth: 820, margin: "56px auto 0", textAlign: "center" }}>
            <div style={{ fontWeight: 900, fontSize: 52, lineHeight: 0.6, color: T.primary }}>“</div>
            <p style={{ margin: "14px 0 18px", fontSize: 23, lineHeight: "36px", fontWeight: 500, color: T.bluishGrey, letterSpacing: "-0.3px" }}>{d.why.quote}</p>
            <div style={{ fontFamily: T.fontMono, fontSize: 12, letterSpacing: "0.4px", color: T.mute }}>The kind of shift PH operators see in the first weeks</div>
          </div>
        )}
      </window.L2U_Section>

      {/* WHO IT'S FOR */}
      <window.L2U_Section background={T.cream} padding="84px 80px" style={{ borderTop: "1px solid " + T.border }}>
        <window.L2U_SectionHead eyebrow="Who it's for" title={d.whoFor.title} body={d.whoFor.subtitle} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 18 }}>
          {d.whoFor.cards.map((c) => (
            <div key={c.title} style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 18, padding: "24px 20px" }}>
              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 44, height: 44, borderRadius: 11, background: "rgba(43,147,255,0.10)" }}><PPIcon name={c.icon} /></span>
              <h3 style={{ margin: "16px 0 7px", fontWeight: 700, fontSize: 16, color: T.bluishGrey, lineHeight: 1.3 }}>{c.title}</h3>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: "21px", color: T.mute }}>{c.desc}</p>
            </div>
          ))}
        </div>
        {d.whoFor.footnote && (<p style={{ maxWidth: 760, margin: "32px auto 0", textAlign: "center", fontSize: 16, lineHeight: "26px", color: T.body }}>{d.whoFor.footnote}</p>)}
      </window.L2U_Section>

      {/* FAQ */}
      <window.L2U_Section background={T.cream} padding="84px 80px" style={{ borderTop: "1px solid " + T.border }}>
        <div style={{ maxWidth: 780, margin: "0 auto" }}>
          <window.L2U_SectionHead eyebrow="Before you start" title="Frequently asked questions." />
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {d.faqs.map((f, i) => {
              const open = openFaq === i;
              return (
                <div key={i} onClick={() => setOpenFaq(open ? -1 : i)} style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 14, padding: "19px 22px", cursor: "pointer" }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
                    <div style={{ fontWeight: 600, fontSize: 16, color: T.bluishGrey, lineHeight: 1.4 }}>{f.q}</div>
                    <span style={{ width: 27, height: 27, borderRadius: "50%", background: "rgba(43,147,255,0.12)", color: T.primary, display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 17, flexShrink: 0 }}>{open ? "−" : "+"}</span>
                  </div>
                  {open && (<div style={{ marginTop: 13, fontSize: 15, lineHeight: "24px", color: T.body }}>{f.a}</div>)}
                </div>
              );
            })}
          </div>
        </div>
      </window.L2U_Section>

      {/* FINAL CTA */}
      <window.L2U_Section background={T.cream} padding="24px 80px 92px">
        <div style={{ background: T.darkBlue, borderRadius: 28, padding: "72px 40px", textAlign: "center", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", top: "-45%", left: "50%", transform: "translateX(-50%)", width: 620, height: 620, borderRadius: "50%", background: "radial-gradient(circle, rgba(43,147,255,0.16) 0%, rgba(43,147,255,0) 68%)", pointerEvents: "none" }} />
          <div style={{ position: "relative", maxWidth: 640, margin: "0 auto" }}>
            <window.L2U_Eyebrow onDark>Get started</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px 0 18px", fontWeight: 900, fontSize: 44, lineHeight: "50px", letterSpacing: "-1.4px", color: "#fff" }}>{d.cta.title}</h2>
            <p style={{ margin: "0 0 32px", fontSize: 18, lineHeight: "29px", color: "rgb(200,210,226)" }}>{d.cta.body}</p>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14, flexWrap: "wrap" }}>
              <window.L2U_Btn variant="primaryLg" glow arrow href="/request-access">Request Access</window.L2U_Btn>
              <window.L2U_Btn variant="secondary" onDark onClick={goPricing}>See pricing in pesos</window.L2U_Btn>
            </div>
          </div>
        </div>
      </window.L2U_Section>
    </React.Fragment>
  );
}

window.L2U_ProductPage = ProductPage;

// ── Content for every feature page ────────────────────────────────────────
const PP_PAGES = {
  "route-optimization": {
    eyebrow: "Route optimization",
    title: "Plan a full day of deliveries in seconds, ", accent: "not the whole morning.",
    body: "Locate2u sequences every stop for the fastest, cheapest run across your whole fleet, factoring in Metro Manila traffic, delivery windows, and vehicle limits. Upload your stops, click optimize, and send drivers on their way. Built for teams running 10 to 30 drivers.",
    builtFor: "Built for PH teams running 10–30 drivers",
    problem: {
      eyebrow: "The manual-planning problem",
      title: "Planning routes by hand is costing you more than time.",
      paras: [
        "Most Philippine delivery teams still build the day's routes in someone's head. The dispatcher looks at a list of addresses, guesses a sensible order, and sends it to drivers over Viber. It feels normal because everyone does it, but a route planned by instinct is almost never the shortest one.",
        "The gap shows up as wasted fuel, fewer stops per driver, and a dispatcher who spends the first hour of every day just sorting addresses.",
        "Then reality hits. A rush order comes in, a customer reschedules, EDSA seizes up, and the hand-built plan falls apart. Route optimization removes the guesswork: it takes your stops and constraints and returns the best possible sequence in seconds, then re-plans in real time when the day changes.",
      ],
      compare: { label: "Same 6 stops · two plans", map: "assets/manualvsl2u-map.png",
        before: { tag: "MANUAL PLAN", title: "48.2 km · 3 hr 20 min", sub: "5 backtracks across the metro" },
        after: { tag: "LOCATE2U", title: "33.9 km · 2 hr 6 min", sub: "0 backtracks · 37% faster" } },
    },
    payoff: { eyebrow: "What you get", title: "What you get with Locate2u route optimization.",
      stats: [
        { big: "Shortest", label: "Run, worked out for you", desc: "An AI engine weighs traffic, distance, time windows, capacity, and driver skills, then sequences every stop for minimum drive time. 10 stops or 500, the optimal order is ready in under a minute." },
        { big: "Live traffic", label: "Routes that hold up", desc: "A route planned in a vacuum fails on EDSA. Locate2u uses live and historical traffic data, so the plan reflects how the roads actually move at that hour." },
        { big: "Re-route", label: "Without starting over", desc: "A new order at 11am or a cancellation at noon doesn't blow up the day. The engine re-optimizes on the fly and pushes the change straight to the driver app." },
        { big: "Any fleet", label: "Every vehicle respected", desc: "Vans, trucks, motorcycles, or a mix, each with its own capacity, speed, and road restrictions. Workloads balance evenly, so no one is buried while another sits idle." },
      ] },
    how: { title: "How route optimization works in Locate2u.",
      steps: [
        { title: "Import your stops", desc: "Upload a spreadsheet, add them manually, or let orders flow in automatically through API and integrations." },
        { title: "Set your constraints", desc: "Delivery windows, vehicle types, driver availability, start and end points. Set them once and the engine remembers." },
        { title: "Click optimize", desc: "Locate2u distributes stops across your drivers and sequences each route for the fastest run. Hours of manual planning become a single action." },
        { title: "Dispatch and adjust", desc: "Send routes to drivers, watch progress on the dispatch dashboard, and re-optimize instantly when the day shifts." },
      ] },
    why: { title: "Built for Manila roads, and it pays for itself.",
      paras: [
        "Optimizing deliveries in Metro Manila is a different problem than a quiet suburb. Traffic changes by the hour, one wrong turn on EDSA costs twenty minutes, and the difference between a good route and a guessed one is real money by the end of the week. Locate2u treats that as the starting point, not a footnote.",
        "It's one of the few operational changes that pays for itself quickly and visibly: customers report around 37% less drive time, 20–40% fuel savings, and 15–25% more deliveries completed per driver, simply because routes are planned properly from the start instead of patched together by hand. That's capacity you gain without hiring.",
      ],
      vs: { old: "Route planning", oldItems: ["Maps a path between stops", "One driver at a time", "Set once, breaks on change", "Tells a driver where to go"],
        newItems: ["Most efficient sequence", "Best assignment across the fleet", "Re-optimizes as conditions change", "Smartest order for everyone at once"] },
      quote: "One bakery that switched saw roughly 30% more deliveries almost immediately, capacity gained without hiring, and cost cut without cutting service.",
    },
    whoFor: { title: "Built for the businesses that feel manual planning most.",
      subtitle: "Route optimization earns its keep fastest for operations with recurring, multi-stop deliveries.",
      cards: [
        { icon: "food", title: "Catering & events", desc: "Threading windows across BGC, Makati, Ortigas." },
        { icon: "pill", title: "Pharmacy & healthcare", desc: "Time-sensitive medicine through Quezon City." },
        { icon: "water", title: "Water & LPG", desc: "Dense repeat routes through Caloocan." },
        { icon: "bag", title: "E-commerce & retail", desc: "Orders pile up all day, still go out same-day." },
        { icon: "wrench", title: "Cleaning & field service", desc: "Scheduled appointments across the metro." },
      ],
      footnote: "For all of them the win is the same: more deliveries completed with the same drivers, and less fuel burned getting there." },
    faqs: [
      { q: "What is route optimization software?", a: "Route optimization software uses algorithms and real-time data to calculate the most efficient sequence of stops for your drivers. Instead of ordering stops by hand, it weighs traffic, delivery windows, vehicle capacity, and distance to cut total drive time and fuel cost automatically." },
      { q: "How much can it save per driver?", a: "Businesses using route optimization typically save 20 to 40 percent on fuel and complete 15 to 25 percent more deliveries per driver. Locate2u customers report average drive-time reductions of about 37 percent, which flows through to fuel, labor, and vehicle costs every month." },
      { q: "How many stops can Locate2u optimize?", a: "From a handful to 500 or more stops per driver, sequenced in under a minute. Uploading stops and clicking optimize replaces the 30 minutes to several hours that manual planning usually takes." },
      { q: "Can it re-route when plans change mid-day?", a: "Yes. When a new order comes in, a customer reschedules, or traffic shifts, Locate2u re-optimizes on the fly and pushes the updated route to the driver instantly, without disrupting the rest of the schedule." },
      { q: "Does it handle different vehicle types?", a: "Yes. The engine accounts for each vehicle's capacity, speed, and restrictions, so a mixed fleet of motorcycles, vans, and trucks is routed correctly, with workloads balanced across drivers." },
    ],
    cta: { title: "Stop guessing your routes. Let the engine plan them.", body: "Give your dispatcher back their morning and your drivers a route that actually makes sense." },
  },

  "customer-tracking": {
    eyebrow: "Customer tracking",
    title: "End the “nasaan na order ko?” calls ", accent: "for good.",
    body: "Send customers a live tracking link with a real ETA, so they can watch their delivery move on a map instead of messaging your team. No app for them to download, just a link.",
    builtFor: "For PH businesses tired of answering “nasaan na?” all day",
    problem: {
      eyebrow: "The support-cost problem",
      title: "Every “where is my order?” message is a support cost.",
      paras: [
        "When customers can't see their delivery, they do the only thing they can: they message you. Multiply that by dozens of deliveries a day and your team spends the afternoon answering the same question instead of moving parcels.",
        "Worse, when you can't answer confidently, the customer assumes the worst.",
        "Live tracking removes the reason for the call. Give the customer a link the moment their order is out for delivery and they can see exactly where their driver is and when to expect them. Your phone goes quiet. Your customers relax.",
      ],
      compare: { label: "Same delivery · two experiences",
        before: { tag: "NO TRACKING", title: "“Nasaan na?” ×7", sub: "Calls, DMs, and one bad review", art: "no-tracking" },
        after: { tag: "LOCATE2U", title: "1 tracking link", sub: "Live ETA · 0 status calls", art: "live-tracking" } },
    },
    payoff: { eyebrow: "What you get", title: "What live tracking does for your business.",
      stats: [
        { big: "A link", label: "Fewer calls & messages", desc: "A shareable link answers the question before it's asked. Your team gets its time back." },
        { big: "Live ETA", label: "Not a guess", desc: "The link shows the driver's live position and an arrival time that updates as conditions change, no more “malapit na po” for the third time." },
        { big: "SMS", label: "Automatic status updates", desc: "Customers get a message when their order is dispatched, when the driver is nearby, and when it's delivered, without lifting a finger." },
        { big: "Branded", label: "A page that looks like you", desc: "Brand the tracking experience with your name and logo, so the whole delivery feels like part of your service, not a third party's." },
      ] },
    how: { title: "How customer tracking works.",
      steps: [
        { title: "A delivery is dispatched", desc: "The stop is assigned to a driver in your dispatch dashboard." },
        { title: "The customer gets a link", desc: "An automated SMS goes out with a live tracking link. No account, no download." },
        { title: "They watch it happen", desc: "The customer opens the link and sees the driver moving on a map with a live ETA." },
        { title: "They get confirmation", desc: "When the driver marks the stop complete, the customer gets a delivered notification, backed by proof of delivery." },
      ] },
    why: { title: "Why it matters more in the Philippines.",
      paras: [
        "Filipino customers have been trained by Grab and Lalamove to expect a live map for anything they order. When your own delivery goes dark the moment it leaves the warehouse, it feels a step behind, even if your service is excellent. Live tracking closes that gap and puts your business on the same footing as the apps people already trust.",
        "It's a fit for any business making promises about arrival time, a catering company delivering to an event in BGC where timing is everything, a pharmacy in Makati where a customer is waiting on medicine, an e-commerce seller who wants the unboxing to start with a smooth delivery, not a chase.",
      ],
      vs: { old: "Viber / call / guess", oldItems: ["Manual “on the way” messages", "No live location", "No ETA", "Feels a step behind Grab"],
        newItems: ["Automatic live link", "Real-time driver location", "Accurate live ETA", "On par with the apps they trust"] },
      quote: "Most of the frustration was never about speed. It was about not knowing. The moment customers could see the driver on a map, the calls just stopped.",
    },
    whoFor: { title: "Built for any business making a promise about arrival time.",
      subtitle: "Live tracking pays off fastest where customers care exactly when the order arrives.",
      cards: [
        { icon: "bag", title: "E-commerce & retail", desc: "Start the unboxing with a smooth delivery." },
        { icon: "food", title: "Catering & events", desc: "Deliveries where timing is everything." },
        { icon: "pill", title: "Pharmacy & healthcare", desc: "A customer waiting on medicine, kept informed." },
        { icon: "box", title: "Flowers & gifts", desc: "Surprises that need to land right on time." },
        { icon: "truck", title: "Furniture & appliances", desc: "Big drops customers plan their day around." },
      ],
      footnote: "If your customers ever message to ask where their order is, a tracking link turns that anxiety into confidence, and turns your support team back into a sales team." },
    faqs: [
      { q: "Do customers need to download an app to track?", a: "No. Customers tap a link in an SMS and see live tracking in their browser. No app, no login, no friction." },
      { q: "Can I brand the tracking page?", a: "Yes. The tracking page can carry your business name and logo, so the experience stays consistent with your brand from checkout to doorstep." },
      { q: "How accurate is the ETA?", a: "The ETA is based on the driver's live GPS position and updates as the route progresses, so it reflects real conditions rather than a fixed guess made at dispatch." },
      { q: "What updates do customers receive?", a: "Automated SMS and email at the key moments: dispatched, driver nearby, and delivered. You control which notifications are sent." },
    ],
    cta: { title: "Give customers the map they're already asking for.", body: "Turn every “nasaan na?” into a link they can open themselves, and get your team's afternoon back." },
  },

  "proof-of-delivery": {
    eyebrow: "Proof of delivery",
    title: "Every delivery, proven. ", accent: "No more “hindi po dumating.”",
    body: "Capture e-signatures, photos, and timestamps at every stop, so a screenshot in a Viber group chat is never your only evidence again. Built for Philippine delivery teams running 10 to 30 drivers.",
    builtFor: "For PH delivery teams running 10–30 drivers",
    problem: {
      eyebrow: "The proof problem",
      title: "The problem isn't the delivery. It's proving it happened.",
      paras: [
        "A customer in Makati messages your team at 6pm: the order never arrived. Your driver swears it did. All you have is a blurry photo somewhere in a Viber thread and a memory of the day. So you eat the cost, redeliver, or argue. None of them good options.",
        "This is the quiet tax on Philippine delivery businesses still running on chat apps and paper run sheets. Without a real record, every dispute becomes your word against the customer's, and you usually lose.",
        "Proof of delivery software fixes that at the source. It turns “I think we delivered it” into a timestamped, geotagged record you can pull up in seconds.",
      ],
      compare: { label: "Same dispute · two outcomes",
        before: { tag: "NO POD", title: "“Hindi po dumating”", sub: "No proof · you eat the cost", art: "no-pod" },
        after: { tag: "LOCATE2U", title: "Photo + signature + GPS", sub: "Dispute closed in seconds", art: "pod" } },
    },
    payoff: { eyebrow: "What you get", title: "What you get with Locate2u proof of delivery.",
      stats: [
        { big: "Seconds", label: "Disputes settled", desc: "Every stop carries an e-signature, a photo of where it was left, GPS coordinates, and the exact time. Open the job and the answer is right there." },
        { big: "SMS", label: "A record customers trust", desc: "An automatic confirmation goes out the moment a delivery completes, with a link to the signature and photo. Transparency ends most disputes before they start." },
        { big: "Ratings", label: "Feedback you can act on", desc: "Collect a rating after each drop-off and watch the trend across drivers, routes, and weeks, so you know what's winning customers and what's quietly losing them." },
        { big: "Offline", label: "Nothing lost in a dead zone", desc: "The driver app caches jobs offline, so signatures and photos are captured in a basement or a spotty barangay, then sync once back online." },
      ] },
    how: { title: "How proof of delivery works in Locate2u.",
      steps: [
        { title: "Driver arrives, opens the stop", desc: "The job details are already on the phone: customer name, address, item, and instructions." },
        { title: "Driver captures the proof", desc: "A tap for the e-signature, a photo of the delivered goods, a note if there was an access issue, each element timestamped and geotagged automatically." },
        { title: "The customer is notified", desc: "An SMS confirms the delivery and, if you want, links straight to the proof record." },
        { title: "The office has it instantly", desc: "The completed job, with all its evidence, lands in your dashboard the moment the driver taps done." },
      ] },
    why: { title: "Built for how Filipino businesses actually deliver.",
      paras: [
        "Whether you run catering across BGC and Ortigas, deliver medicines for a pharmacy in Quezon City, or run LPG and water refills through Caloocan traffic, the pain is the same: too many drivers, too little proof. Locate2u gives every driver the same simple capture flow, so your evidence is consistent no matter who's behind the wheel.",
        "You decide what counts as proof for each delivery type: a signature for high-value goods, a photo for contactless drop-offs, a barcode scan for parcels. The record adapts to your business instead of forcing your business to adapt to it.",
      ],
      vs: { old: "Viber photo (maybe)", oldItems: ["Photo only if remembered", "No signature", "No GPS or timestamp", "Nothing to show for disputes"],
        newItems: ["Required photo per stop", "On-glass signature capture", "Auto GPS + timestamp", "Full delivery record on file"] },
      quote: "Since we switched, delivery disputes basically dropped to zero. Every job has a photo, a signature, and a time attached. Less arguing, fewer free redeliveries.",
    },
    whoFor: { title: "Built for deliveries where proof matters.",
      subtitle: "Digital proof earns its keep anywhere a “not received” claim costs real money.",
      cards: [
        { icon: "pill", title: "Pharmacy & healthcare", desc: "Verified handover on time-sensitive meds." },
        { icon: "food", title: "Catering & food", desc: "Contactless drops with a photo on file." },
        { icon: "water", title: "Water & LPG", desc: "Signed proof on every refill run." },
        { icon: "box", title: "Building & trade supplies", desc: "High-value loads worth documenting." },
        { icon: "bag", title: "E-commerce COD", desc: "Proof to back every cash-on-delivery drop." },
      ],
      footnote: "If a single “I never received it” has ever cost you a re-delivery, a refund, or a chargeback, digital proof of delivery pays for itself the first time you use it." },
    faqs: [
      { q: "What is electronic proof of delivery (ePOD)?", a: "Electronic proof of delivery replaces paper delivery dockets with a digital record: an e-signature, a photo, a timestamp, and GPS coordinates, all captured on the driver's phone and stored in the cloud. In Locate2u, every ePOD record is attached to the job and searchable from your dashboard." },
      { q: "Can drivers capture proof without signal?", a: "Yes. The driver app stores job data on the device, so signatures, photos, and notes are captured offline and sync automatically once the driver is back on data or Wi-Fi. Metro Manila traffic and dead zones don't break the record." },
      { q: "Can I choose what proof is required?", a: "Yes. You configure the required proof per delivery type: mandatory signature, photo, note, or barcode scan. A pharmacy delivery can require a signature while a food drop-off only needs a photo." },
      { q: "Will customers get automatic confirmation?", a: "Yes. Locate2u sends automated SMS and email at key moments, including dispatch, driver nearby, and delivered. The confirmation can include a link to the proof record." },
    ],
    cta: { title: "Stop running deliveries on Viber. Run them on a platform.", body: "Give your drivers a way to prove every job, and give yourself a way to end disputes for good." },
  },

  "driver-app": {
    eyebrow: "Driver app",
    title: "Your drivers' whole day, in order, ", accent: "on the phone they already carry.",
    body: "Optimized routes, one-tap navigation, and proof of delivery capture in a single app. No paper run sheets, no guessing the next stop, no calling the office every ten minutes.",
    builtFor: "iOS + Android · drivers use their own phones",
    problem: {
      eyebrow: "The working-blind problem",
      title: "Right now, your drivers are working blind.",
      paras: [
        "A driver starts the day with a list of addresses in a Viber message and figures out the order themselves. They hit EDSA traffic and second-guess the route. They finish a stop and call the office to confirm the next one. They deliver an item and hope someone remembers it happened.",
        "Every one of those gaps costs time, fuel, and accuracy.",
        "The driver app closes the gaps. It hands each driver a route already sequenced for the shortest run, launches navigation with one tap, and captures proof at every stop, all without a single phone call to dispatch.",
      ],
      compare: { label: "Same driver · two workflows",
        before: { tag: "SCREENSHOT + VIBER", title: "Guess the order", sub: "Backtracking · constant calls", art: "guess-order" },
        after: { tag: "DRIVER APP", title: "Next stop, tap navigate", sub: "Clear route · proof in 2 taps", art: "driver-nav" } },
    },
    payoff: { eyebrow: "What you get", title: "What drivers get in the app.",
      stats: [
        { big: "Pre-sorted", label: "The whole day, in order", desc: "Drivers open to their full list of stops in the optimal sequence, with ETAs and time windows already worked out." },
        { big: "1 tap", label: "Navigation they know", desc: "Launch turn-by-turn in Waze, Google Maps, or Apple Maps straight from any stop. Drivers use the maps they already trust." },
        { big: "Proof", label: "Captured in seconds", desc: "E-signature, photo, and notes at each delivery, feeding straight into proof of delivery. No paper, no second device." },
        { big: "Offline", label: "Works when signal doesn't", desc: "The app caches the route offline, so a basement dock or a provincial dead spot doesn't stop a driver working or capturing proof. It syncs on reconnect." },
      ] },
    how: { title: "How the driver app fits your day.",
      steps: [
        { title: "Dispatch sends the route", desc: "Your team builds and assigns routes in the dispatch dashboard." },
        { title: "The driver sees it appear", desc: "The full sequence loads on their phone, ready to go. New stops and schedule changes arrive as push notifications." },
        { title: "They drive and deliver", desc: "Navigate, mark stops as arrived and completed, and capture proof, all in the app." },
        { title: "The office sees it live", desc: "Every status update flows back to dispatch, and every customer gets tracked through live tracking." },
      ] },
    why: { title: "Made for Manila roads and Filipino drivers.",
      paras: [
        "The app assumes the reality your drivers live in: traffic that changes by the hour, connectivity that comes and goes, and addresses that need a landmark, not just a street. Drivers get their stops in a sensible order, clear job details for each one, and the freedom to launch the navigation app they trust. It's simple enough that a new driver is productive on day one, which matters when your team turns over.",
        "It suits the businesses that move fastest through the metro: catering runs across Makati and BGC, pharmacy deliveries in Quezon City, water and LPG routes through Caloocan, e-commerce parcels heading everywhere at once.",
      ],
      vs: { old: "Screenshots + Viber", oldItems: ["Driver plans their own order", "Endless “saan ulit?” calls", "No proof captured", "Dispatch is blind"],
        newItems: ["Route set before they leave", "One-tap turn-by-turn", "Proof captured on the spot", "Live status to dispatch"] },
      quote: "We stopped getting the “saan ulit?” calls. New drivers are productive on their first shift, and every delivery leaves a clean record behind.",
    },
    whoFor: { title: "Made for the drivers who move the metro.",
      subtitle: "If someone on your team drives a route, the app makes their day simpler.",
      cards: [
        { icon: "food", title: "Catering & food", desc: "Time-critical runs across Makati and BGC." },
        { icon: "pill", title: "Pharmacy & healthcare", desc: "Deliveries in Quezon City that can't wait." },
        { icon: "water", title: "Water & LPG", desc: "Dense repeat routes through Caloocan." },
        { icon: "bag", title: "E-commerce & retail", desc: "Parcels heading everywhere at once." },
        { icon: "file", title: "Couriers & same-day", desc: "Document and rush runs across the metro." },
      ],
      footnote: "Drivers use their own iOS or Android phones, no special hardware to buy or manage, and a new hire is productive on day one." },
    faqs: [
      { q: "Does the app work on both iPhone and Android?", a: "Yes. The Locate2u driver app runs on both iOS (iPhone and iPad) and Android, so drivers use their own phones." },
      { q: "What happens when a driver loses signal?", a: "The app caches route and job data on the device. Drivers keep working and capturing signatures, photos, and notes offline, and everything syncs automatically once they're back on data or Wi-Fi." },
      { q: "Is it hard for drivers to learn?", a: "No. The app is built around a simple flow: see your stops, navigate, capture proof, move on. Most drivers are comfortable within their first shift." },
      { q: "Can drivers use their preferred navigation app?", a: "Yes. From any stop, drivers launch turn-by-turn directions in Waze, Google Maps, or Apple Maps with one tap." },
    ],
    cta: { title: "Put the whole day in your drivers' hands.", body: "Give every driver an optimized route, real navigation, and proof capture in one app, and take the guesswork off the road." },
  },

  "dispatch-dashboard": {
    eyebrow: "Dispatch dashboard",
    title: "Run your whole delivery day from one screen, ", accent: "not twenty Viber threads.",
    body: "See every driver on a live map, assign and reorder stops with a drag, and slot in new orders without breaking the run. Locate2u's dispatch dashboard is the command center for teams running 10 to 30 drivers.",
    builtFor: "The command center for PH teams running 10–30 drivers",
    problem: {
      eyebrow: "The visibility problem",
      title: "Your dispatch board is a group chat, and it shows.",
      paras: [
        "Right now the plan lives in a Viber group, a spreadsheet, and your dispatcher's head. Someone messages a new order at 10am. A driver goes quiet in EDSA traffic and nobody knows if the Makati drop happened. A priority delivery gets buried under fifty other messages.",
        "By lunch, your dispatcher isn't managing deliveries, they're managing chaos.",
        "A real dispatch dashboard replaces all of that with a single view: every driver, every stop, every status, live on one map. You stop asking “nasaan na si kuya?” and start seeing the answer.",
      ],
      compare: { label: "11am rush order · two responses",
        before: { tag: "VIBER + CALLS", title: "“Sino malapit diyan?”", sub: "Buried under 50 messages", art: "calls-chaos" },
        after: { tag: "DISPATCH BOARD", title: "Drop it onto the board", sub: "Auto-slotted to the nearest driver", art: "board" } },
    },
    payoff: { eyebrow: "What you get", title: "What your dispatchers get.",
      stats: [
        { big: "Live map", label: "Of the whole fleet", desc: "Watch every driver move in real time. Know instantly who's running ahead, who's stuck, and who can take the next job." },
        { big: "Drag & drop", label: "Planning that recalculates", desc: "Build and reorder routes by dragging stops. Change your mind and the sequence recalculates. No rewriting a run sheet by hand." },
        { big: "Auto-insert", label: "New stops, no reshuffle", desc: "A rush order lands at 11am. Drop it on the board and it slots into the nearest driver's route automatically, without blowing up the day." },
        { big: "Alerts", label: "Before customers notice", desc: "The board flags exceptions early: a delayed stop, a driver off route, a job that hasn't moved, so you fix it first." },
      ] },
    how: { title: "How dispatch works in Locate2u.",
      steps: [
        { title: "Import or add the day's orders", desc: "Upload a spreadsheet, add jobs manually, or let them flow in automatically through the API and integrations." },
        { title: "Optimize the routes", desc: "Locate2u sequences every stop for the shortest, fastest run, factoring in traffic, time windows, and vehicle type." },
        { title: "Assign and dispatch", desc: "Send routes to drivers with a tap. They appear instantly in the Locate2u driver app." },
        { title: "Monitor and adjust live", desc: "Watch progress on the map, reassign or insert stops as the day changes, and keep customers updated through live tracking." },
      ] },
    why: { title: "Made for Manila operations.",
      paras: [
        "Dispatching across Metro Manila is its own challenge. EDSA at 5pm is not the same route as EDSA at 10am, and a good dashboard treats that as reality, not an afterthought. Locate2u lets your dispatcher react in the moment: pull a stalled stop off one driver, hand it to another who's closer, and keep the promise you made the customer.",
        "It fits the businesses that feel this pain most: catering companies juggling event windows, pharmacies moving time-sensitive medicine, water and LPG distributors running dense routes, and e-commerce sellers whose orders arrive all day and need to go out the same day.",
      ],
      vs: { old: "Viber + spreadsheet", oldItems: ["No live location", "Guess who's nearest", "No ETAs to give customers", "No record of the day"],
        newItems: ["Live fleet map", "Assign to the nearest driver", "ETAs on every route", "Full history + reporting"] },
      quote: "We cut route planning by over a third, and now we rework the day on the fly instead of rebuilding routes from scratch every time an order changes.",
    },
    whoFor: { title: "Built for the operations that feel it most.",
      subtitle: "A dispatch board earns its keep the moment several drivers are out at once and the day keeps changing.",
      cards: [
        { icon: "food", title: "Catering & events", desc: "Juggling tight event delivery windows." },
        { icon: "pill", title: "Pharmacy & healthcare", desc: "Moving time-sensitive medicine on schedule." },
        { icon: "water", title: "Water & LPG", desc: "Dense daily routes across the metro." },
        { icon: "bag", title: "E-commerce & retail", desc: "Orders all day, out the same day." },
        { icon: "users", title: "3PL & logistics", desc: "Many drivers, many clients, one board." },
      ],
      footnote: "Built to run a busy Metro Manila operation of 10 to 30 drivers comfortably, and it scales up from there." },
    faqs: [
      { q: "How is this different from coordinating over Viber?", a: "Viber shows you messages. A dispatch dashboard shows you your operation: where every driver is, what every stop's status is, and what needs attention now. Nothing gets lost in scroll, and every job has a clear owner and state." },
      { q: "Can I add or reassign stops after routes are sent?", a: "Yes. Add a new stop mid-day and Locate2u inserts it into the best route automatically. You can also reassign a stop from one driver to another with a drag, and the change reaches the driver instantly." },
      { q: "How many drivers can I manage?", a: "From a handful to a large fleet. The dashboard is built to run a busy Metro Manila operation of 10 to 30 drivers comfortably, and it scales up from there." },
      { q: "Do my drivers need special hardware?", a: "No. Drivers use the Locate2u driver app on their own iOS or Android phone. Your dispatcher works from any browser." },
    ],
    cta: { title: "Trade the group chat for a control room.", body: "Give your dispatch team one screen that shows the whole day, and lets them fix problems before customers notice." },
  },

  "api-integrations": {
    eyebrow: "API & integrations",
    title: "Connect Locate2u once, and ", accent: "stop retyping orders into Viber.",
    body: "A clean REST API plus ready-made integrations for Shopify, WooCommerce, Xero, QuickBooks, Zapier, and the major ERPs. Your orders become delivery jobs automatically, with no double entry.",
    builtFor: "Built for developers, friendly to everyone else",
    problem: {
      eyebrow: "The double-entry problem",
      title: "Double entry is quietly eating your team's day.",
      paras: [
        "An order lands in your Shopify store. Someone copies the name, address, and items into a spreadsheet. Then into a Viber message to the driver. Then, when it's delivered, someone updates the accounting system by hand.",
        "Four times the typing, four chances for a typo, and a wrong address means a failed delivery and a redelivery you pay for.",
        "Integrations end the copy-paste loop. Connect your store, your accounting tool, or your own system to Locate2u once, and orders flow straight in as delivery jobs. Status flows back out automatically. The manual middle disappears.",
      ],
      compare: { label: "100 orders/day · two setups",
        before: { tag: "MANUAL RE-ENTRY", title: "Typed in 4 places", sub: "Typos · wrong addresses", art: "manual-entry" },
        after: { tag: "INTEGRATED", title: "Orders flow in automatically", sub: "0 re-entry · fewer errors", art: "integrated" } },
    },
    payoff: { eyebrow: "What you can connect", title: "What you can connect.",
      stats: [
        { big: "Store", label: "Shopify & WooCommerce", desc: "Native integrations turn new orders into delivery stops automatically, with customer details and items, and status flows back to the store." },
        { big: "Books", label: "Xero & QuickBooks", desc: "Connect your accounting so completed deliveries can trigger invoicing and keep your books current without re-keying." },
        { big: "Zapier", label: "Thousands of apps, no code", desc: "If a tool you use is on Zapier, you can wire it to Locate2u without writing code, from lead forms to order sheets." },
        { big: "ERP", label: "NetSuite, SAP, Dynamics…", desc: "Connects with the major enterprise platforms, including Oracle NetSuite, SAP, Microsoft Dynamics, and Salesforce, so delivery fits the systems you run on." },
      ] },
    how: { title: "How the integration works.",
      steps: [
        { title: "Choose your connection", desc: "Pick a native integration, a Zapier zap, or the REST API, depending on your setup." },
        { title: "Connect once", desc: "Authenticate and map your fields. For native integrations this is a guided setup, not a project." },
        { title: "Orders flow in automatically", desc: "New orders become delivery jobs in your dispatch dashboard, ready to route." },
        { title: "Data flows back out", desc: "Tracking, ETAs, and proof of delivery sync back to your store and systems, and customers get live tracking without any extra step." },
      ] },
    why: { title: "Built for developers, friendly to everyone else.",
      paras: [
        "If you have a developer, they get a REST API with clear documentation, predictable endpoints, and webhooks for real-time events, so they can build exactly what you need. If you don't, the native integrations and Zapier cover the common cases without a line of code. You get automation at the level you're ready for.",
        "Filipino sellers often stitch operations together by hand: an order here, a Viber message there, a spreadsheet to tie it up. That works at ten orders a day and breaks at a hundred. Integrations are how you grow without growing your admin headcount: the busy season stops meaning more typing and more mistakes.",
      ],
      vs: { old: "Copy-paste", oldItems: ["Manual order entry", "Address typos", "Doesn't scale", "No status back to your store"],
        newItems: ["Orders via API / integration", "Validated addresses", "Scales to any volume", "Webhooks update your system"] },
      quote: "For a Shopify seller in Metro Manila, every order that comes in overnight is already a routed delivery job by morning. The busy season stopped meaning more typing.",
    },
    whoFor: { title: "Built for teams with a system to connect.",
      subtitle: "Integrations earn their keep wherever orders already live in software and shouldn't be re-typed.",
      cards: [
        { icon: "store", title: "E-commerce", desc: "Shopify & WooCommerce orders, auto-synced." },
        { icon: "users", title: "3PL & logistics", desc: "Many clients feeding orders in at once." },
        { icon: "layers", title: "ERP-run operations", desc: "Distributors on NetSuite, SAP, or Dynamics." },
        { icon: "file", title: "Accounting-tight ops", desc: "Deliveries that flow into Xero or QuickBooks." },
        { icon: "box", title: "High-volume senders", desc: "Hundreds of daily orders, zero re-entry." },
      ],
      footnote: "That works at ten orders a day and breaks at a hundred. Integrations are how you grow without growing your admin headcount." },
    faqs: [
      { q: "Do I need a developer to connect Locate2u?", a: "Not for the common cases. Native integrations for Shopify and WooCommerce, plus Zapier, cover most needs with a guided setup and no code. A developer is only needed for custom builds on the REST API." },
      { q: "Does Locate2u integrate with Shopify?", a: "Yes. The native Shopify integration syncs new orders into Locate2u as delivery jobs automatically and pushes delivery status back to your store in real time." },
      { q: "Can I connect my accounting software?", a: "Yes. Locate2u connects with Xero and QuickBooks, so completed deliveries can flow into your invoicing rather than being entered by hand." },
      { q: "What can the REST API do?", a: "The REST API lets you create and manage delivery jobs, retrieve real-time tracking and ETAs, pull proof of delivery records, and sync data between Locate2u and your own systems, with webhooks for live event updates." },
    ],
    cta: { title: "Wire your orders straight into delivery.", body: "Connect Locate2u to the tools you already use and let orders route themselves, from your store to your driver to your books." },
  },
};
