// usecase-page.jsx: reusable "Solutions › By use case" landing page.
// Renders a full use-case page (hero with live route-map visual, two feature
// sections, dark stat band, 6-feature platform grid, FAQ, dark CTA) from a content
// object keyed by slug. Design mirrors the Last-Mile Delivery template. Used by
// the "By use case" pages: last-mile-delivery, route-planning, delivery-management,
// transport-management and asset-tracking. Each page's two feature visuals are
// selected per-slug via secA.card / secB.card (default: chart / tracking cards).

const UC_LIGHT = "#6EC1F7";
const GREEN_DEEP = "#1F9D57";

// Section-B customer-tracking route, traced from custexperience-sec3imgdone.png
// (coords in the map image's native 650×296 space). Pin (right) → middle stop → GPS dot (left).
const UC_TRACK_ROUTE = "592,88 428,48 404,182 300,167 196,148 194,200 118,250 100,216";
// Same path reversed, so the moving flow highlight travels from the GPS-location
// dot (left) toward the pin, instead of the other way around.
const UC_TRACK_ROUTE_REV = "100,216 118,250 194,200 196,148 300,167 404,182 428,48 592,88";

// Product/use-case hero → hero-map name (route + markers in window.L2U_HERO_MAPS).
const UC_HERO_MAP = { "last-mile-delivery": "bgc", "route-planning": "metromanila", "delivery-management": "ortigaspasig1", "transport-management": "cavitemakati", "asset-tracking": "ortigaspasig2" };

// ── Platform feature icons (feather / lucide paths from the template) ──────
function UCIcon({ name, size = 23, color }) {
  const T = window.l2uTokens;
  const P = {
    route: (<g><circle cx="6" cy="19" r="3" /><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" /><circle cx="18" cy="5" r="3" /></g>),
    pin: (<g><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" /></g>),
    clipboard: (<g><rect width="8" height="4" x="8" y="2" rx="1" /><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /><path d="m9 14 2 2 4-4" /></g>),
    bell: (<g><path d="M10.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></g>),
    dashboard: (<g><rect width="7" height="9" x="3" y="3" rx="1" /><rect width="7" height="5" x="14" y="3" rx="1" /><rect width="7" height="9" x="14" y="12" rx="1" /><rect width="7" height="5" x="3" y="16" rx="1" /></g>),
    billing: (<g><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z" /><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" /><path d="M12 17.5v-11" /></g>),
  };
  return (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color || T.primary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{P[name] || P.route}</svg>);
}

function UCCheck({ children }) {
  const T = window.l2uTokens;
  return (
    <li style={{ display: "flex", gap: 13, alignItems: "flex-start" }}>
      <span style={{ flexShrink: 0, width: 22, height: 22, borderRadius: "50%", background: "rgba(45,210,122,0.14)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={GREEN_DEEP} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
      </span>
      <span style={{ fontSize: 15.5, lineHeight: "23px", color: T.body }}>{children}</span>
    </li>
  );
}

// ── Hero: dark live route-map card with floating popups ────────────────────
function UCHeroMap({ hero, slug }) {
  const T = window.l2uTokens;
  const mono = T.fontMono;
  const cs = hero.currentStop;
  const hm = window.L2U_HERO_MAPS[UC_HERO_MAP[slug] || "bgc"];
  return (
    <div style={{ position: "relative", background: T.darkBlue, borderRadius: 24, border: "1px solid rgba(255,255,255,0.09)", padding: 18, boxShadow: "0 30px 70px rgba(1,16,31,0.28)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "6px 8px 14px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <window.L2U_Dot color={T.success} size={8} pulse />
          <span style={{ fontFamily: mono, fontSize: 11, letterSpacing: "1.4px", textTransform: "uppercase", color: "#fff" }}>Live route</span>
        </div>
        <span style={{ fontFamily: mono, fontSize: 11, color: "rgb(200,210,226)" }}>{hero.fleetLabel}</span>
      </div>
      <div style={{ position: "relative", borderRadius: 16, overflow: "hidden", background: "#0A1D33" }}>
        <window.L2U_HeroRouteMap img={hm.img} route={hm.route} gps={hm.gps} stops={hm.stops} pin={hm.pin} />
        <div style={{ position: "absolute", left: 16, bottom: 16, background: "#fff", borderRadius: 14, padding: "13px 15px", boxShadow: "0 8px 24px rgba(0,0,0,0.28)", minWidth: 196 }}>
          <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "1px", textTransform: "uppercase", color: T.mute, marginBottom: 6 }}>{cs.label}</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: T.bluishGrey, marginBottom: 8 }}>{cs.addr}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: T.success, display: "inline-block" }} />
            <span style={{ fontFamily: mono, fontSize: 11.5, color: T.bluishGrey }}>{cs.eta}</span>
          </div>
        </div>
        <div style={{ position: "absolute", right: 16, top: 16, background: "#fff", borderRadius: 12, padding: "9px 12px", boxShadow: "0 8px 24px rgba(0,0,0,0.28)", display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: T.success, display: "inline-block" }} />
          <span style={{ fontFamily: mono, fontSize: 11, color: T.bluishGrey }}>{hero.badge || "Customer viewing"}</span>
        </div>
      </div>
    </div>
  );
}

// ── Feature section A visual: route-efficiency chart card ──────────────────
function UCChartCard({ pct }) {
  const T = window.l2uTokens;
  const mono = T.fontMono;
  return (
    <div style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 22, padding: "26px 28px", boxShadow: "0 1px 2px rgba(15,31,56,0.04), 0 20px 44px rgba(15,31,56,0.07)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 15, fontWeight: 700, color: T.bluishGrey }}>Route efficiency</div>
          <div style={{ fontFamily: mono, fontSize: 11, color: T.mute, marginTop: 4 }}>Optimized vs manual planning</div>
        </div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(45,210,122,0.12)", color: GREEN_DEEP, borderRadius: 999, padding: "6px 11px", fontFamily: mono, fontSize: 11, fontWeight: 500 }}>▲ +{pct}</div>
      </div>
      <svg viewBox="0 0 400 190" width="100%" style={{ display: "block" }}>
        {[46, 92, 138].map((y, i) => <line key={i} x1="0" y1={y} x2="400" y2={y} stroke="rgb(238,242,246)" strokeWidth="1" />)}
        <path d="M24 150 L96 138 L168 120 L240 96 L312 72 L376 48 L376 178 L24 178 Z" fill="rgba(43,147,255,0.13)" />
        <path d="M24 96 L96 100 L168 92 L240 102 L312 96 L376 104" fill="none" stroke="rgb(200,210,226)" strokeWidth="2.5" strokeDasharray="6 6" strokeLinecap="round" />
        <path d="M24 150 L96 138 L168 120 L240 96 L312 72 L376 48" fill="none" stroke={T.primary} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="24" cy="150" r="4.5" fill="#fff" stroke={T.primary} strokeWidth="2.5" />
        <circle cx="376" cy="48" r="6" fill={T.primary} stroke="#fff" strokeWidth="2.5" />
      </svg>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 18, paddingTop: 18, borderTop: "1px solid rgb(238,242,246)" }}>
        <div><div style={{ fontSize: 34, fontWeight: 900, letterSpacing: "-1px", color: GREEN_DEEP, lineHeight: 1 }}>{pct}</div><div style={{ fontFamily: mono, fontSize: 11, color: T.mute, marginTop: 7 }}>more drops per shift</div></div>
        <div style={{ display: "flex", gap: 16 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: mono, fontSize: 11, color: T.mute }}><span style={{ width: 9, height: 9, borderRadius: "50%", background: T.primary }} />Optimized</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: mono, fontSize: 11, color: T.mute }}><span style={{ width: 9, height: 9, borderRadius: "50%", background: "rgb(200,210,226)" }} />Manual</span>
        </div>
      </div>
    </div>
  );
}

// ── Feature section B visual: customer tracking card ───────────────────────
function UCTrackingCard() {
  const T = window.l2uTokens;
  const mono = T.fontMono;
  return (
    <div style={{ width: "100%", maxWidth: 372, margin: "0 auto", background: "#fff", border: "1px solid " + T.border, borderRadius: 22, padding: 22, boxShadow: "0 1px 2px rgba(15,31,56,0.04), 0 24px 50px rgba(15,31,56,0.09)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <img src="assets/logo-classic.png" alt="Locate2u" style={{ height: 17, width: "auto", display: "block" }} />
          <span style={{ fontFamily: mono, fontSize: 10, color: T.mute, fontWeight: 400 }}>· Track delivery</span>
        </div>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: mono, fontSize: 10, letterSpacing: "0.6px", color: GREEN_DEEP }}><window.L2U_Dot color={T.success} size={6} pulse /> LIVE</span>
      </div>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(43,147,255,0.10)", color: T.primary, borderRadius: 999, padding: "6px 12px", fontFamily: mono, fontSize: 11, fontWeight: 500, letterSpacing: "0.5px", marginBottom: 16 }}>OUT FOR DELIVERY</div>
      <div style={{ position: "relative", borderRadius: 14, overflow: "hidden", background: "#EFF2F6", marginBottom: 18 }}>
        <img src="assets/custexperience-sec3img-map.png?v=1" alt="" aria-hidden="true" style={{ display: "block", width: "100%", height: "auto" }} />
        <svg viewBox="0 0 650 296" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }} aria-hidden="true">
          <polyline points={UC_TRACK_ROUTE} fill="none" stroke="#0C2035" strokeWidth="16" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.1s cubic-bezier(0.2,0.8,0.2,1) 0.6s both" }} />
          <polyline points={UC_TRACK_ROUTE} fill="none" stroke={T.primary} strokeWidth="11" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.1s cubic-bezier(0.2,0.8,0.2,1) 0.6s both" }} />
          <polyline points={UC_TRACK_ROUTE_REV} fill="none" stroke="#BFE0FF" strokeWidth="11" strokeLinecap="round" strokeLinejoin="round" pathLength="100" style={{ strokeDasharray: "3 97", opacity: 0, animation: "l2uFadeIn 0.4s ease 1.9s forwards, l2uFlowN 2.4s linear 1.9s infinite" }} />
        </svg>
        <svg viewBox="0 0 60 71" fill="none" style={{ position: "absolute", left: (592 / 650 * 100) + "%", top: (88 / 296 * 100) + "%", width: 30, 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.2s 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>
        <img src="assets/stop.png" alt="" aria-hidden="true" style={{ position: "absolute", left: (300 / 650 * 100) + "%", top: (167 / 296 * 100) + "%", width: 15, height: 15, transform: "translate(-50%,-50%)", transformOrigin: "center", animation: "l2uPopS 0.4s cubic-bezier(0.2,0.9,0.3,1.2) 0.32s both", pointerEvents: "none" }} />
        <span style={{ position: "absolute", left: (100 / 650 * 100) + "%", top: (216 / 296 * 100) + "%", width: 36, height: 36, transform: "translate(-50%,-50%)", pointerEvents: "none", animation: "l2uPopS 0.45s cubic-bezier(0.2,0.9,0.3,1.2) 0.46s both" }} aria-hidden="true">
          <span style={{ position: "absolute", left: "50%", top: "50%", width: 32, height: 32, marginLeft: -16, marginTop: -16, 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: 18, height: 18, marginLeft: -9, marginTop: -9, borderRadius: "50%", background: "#fff", boxShadow: "0 2px 5px rgba(0,0,0,0.4)" }} />
          <span style={{ position: "absolute", left: "50%", top: "50%", width: 10, height: 10, marginLeft: -5, marginTop: -5, borderRadius: "50%", background: T.primary }} />
        </span>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div><div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "1px", textTransform: "uppercase", color: T.mute, marginBottom: 5 }}>Arriving</div><div style={{ fontSize: 24, fontWeight: 900, letterSpacing: "-0.6px", color: T.bluishGrey, lineHeight: 1 }}>ETA 12 minutes</div></div>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: mono, fontSize: 11, color: GREEN_DEEP }}><span style={{ width: 7, height: 7, borderRadius: "50%", background: T.success }} />On time</span>
      </div>
      <div style={{ position: "relative", marginBottom: 16 }}>
        <div style={{ height: 6, borderRadius: 999, background: "#EFF2F6", overflow: "hidden" }}><div style={{ width: "72%", height: "100%", borderRadius: 999, background: T.primary, transformOrigin: "left", animation: "l2uGrowX 0.9s cubic-bezier(0.2,0.8,0.2,1) 0.95s both" }} /></div>
        <span style={{ position: "absolute", left: "72%", 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={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 14, borderTop: "1px solid rgb(238,242,246)" }}>
        <span style={{ fontSize: 13, color: T.mute }}>Rate your delivery</span>
        <span style={{ display: "flex", gap: 3, color: "#F4A11D", fontSize: 15, letterSpacing: "1px" }}>★★★★★</span>
      </div>
    </div>
  );
}

// ── Feature visual: live asset-tracking map card (asset-tracking) ──────────
// ── Real asset map pins: colored marker + vehicle glyph + optional live ping ─
const VEHICLE_ICONS = {
  truck: (<React.Fragment><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-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" /><circle cx="7" cy="18" r="2" /><circle cx="17" cy="18" r="2" /></React.Fragment>),
  box: (<React.Fragment><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 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.73z" /><path d="M12 22V12" /><polyline points="3.29 7 12 12 20.71 7" /><path d="m7.5 4.27 9 5.15" /></React.Fragment>),
  bolt: (<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />),
};
function AssetPin({ x, y, color, icon, r = 12 }) {
  const s = (r * 2 * 0.56) / 24, off = 12 * s;
  return (
    <g style={{ pointerEvents: "none" }}>
      <circle cx={x} cy={y} r={r} fill={color} style={{ transformBox: "fill-box", transformOrigin: "center", animation: "l2uPing 1.9s ease-out infinite" }} />
      <circle cx={x} cy={y} r={r} fill={color} stroke="#fff" strokeWidth="2.5" style={{ filter: "drop-shadow(0 1px 1.5px rgba(15,31,56,0.35))" }} />
      <g transform={`translate(${x - off} ${y - off}) scale(${s})`} fill="none" stroke="#fff" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
        {VEHICLE_ICONS[icon] || VEHICLE_ICONS.truck}
      </g>
    </g>
  );
}

function UCAssetMapCard() {
  const T = window.l2uTokens;
  const mono = T.fontMono;
  const assets = [
    { name: "Van · FGH 3208", status: "Moving · 48 km/h", dot: T.success, sc: GREEN_DEEP, x: 272, y: 150, icon: "truck" },
    { name: "Trailer · ZTM 8047", status: "Idle · 22 min", dot: "#F4A11D", sc: T.mute, x: 200, y: 118, icon: "truck" },
    { name: "Ute · NBD 5192", status: "Parked · Depot", dot: T.primary, sc: T.mute, x: 128, y: 250, icon: "truck" },
    { name: "Forklift · FL-2", status: "Active · Yard", dot: T.success, sc: GREEN_DEEP, x: 340, y: 226, icon: "box" },
    { name: "Generator · GN-3", status: "Offline · 2h", dot: "rgb(148,163,184)", sc: T.mute, x: 362, y: 104, icon: "bolt" },
  ];
  return (
    <div style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 22, padding: 18, boxShadow: "0 1px 2px rgba(15,31,56,0.04), 0 24px 50px rgba(15,31,56,0.09)", display: "flex", gap: 14, height: 384 }}>
      <div style={{ width: 172, flexShrink: 0, background: T.cream, border: "1px solid " + T.border, borderRadius: 16, padding: 14, display: "flex", flexDirection: "column", gap: 11 }}>
        <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "1.2px", textTransform: "uppercase", color: T.mute }}>Assets · 24</div>
        {assets.map((a, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <span style={{ width: 9, height: 9, borderRadius: "50%", background: a.dot, flexShrink: 0 }} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: T.bluishGrey }}>{a.name}</div>
              <div style={{ fontFamily: mono, fontSize: 9.5, color: a.sc }}>{a.status}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ flex: 1, position: "relative", borderRadius: 16, overflow: "hidden", background: "#EFF2F6" }}>
        <img src="assets/assettracking-map_sec2.png" alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        <svg viewBox="0 0 440 356" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, display: "block", pointerEvents: "none" }}>
          {assets.map((a, i) => <AssetPin key={i} x={a.x} y={a.y} color={a.dot} icon={a.icon} />)}
        </svg>
        <div style={{ position: "absolute", left: 16, top: 16, background: "#fff", borderRadius: 12, padding: "10px 13px", boxShadow: "0 8px 24px rgba(0,0,0,0.16)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <window.L2U_Dot color={T.success} size={6} pulse />
            <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: "1px", color: GREEN_DEEP }}>LIVE</span>
          </div>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: T.bluishGrey, marginTop: 3 }}>Van · FGH 3208</div>
          <div style={{ fontFamily: mono, fontSize: 10.5, color: T.mute, marginTop: 2 }}>Updated 2s ago · 48 km/h</div>
        </div>
      </div>
    </div>
  );
}

// ── Feature visual: geofence + movement alert map card (asset-tracking) ────
function UCGeofenceCard() {
  const T = window.l2uTokens;
  const mono = T.fontMono;
  return (
    <div style={{ width: "100%", background: "#fff", border: "1px solid " + T.border, borderRadius: 22, padding: 18, boxShadow: "0 1px 2px rgba(15,31,56,0.04), 0 24px 50px rgba(15,31,56,0.09)", height: 384 }}>
      <div style={{ position: "relative", width: "100%", height: "100%", borderRadius: 16, overflow: "hidden", background: "#EFF2F6" }}>
        <img src="assets/assettracking-map_sec3.png" alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        <svg viewBox="0 0 460 348" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, display: "block", pointerEvents: "none" }}>
          <circle cx="195" cy="185" r="112" fill="rgba(244,161,29,0.10)" stroke="#F4A11D" strokeWidth="2.5" strokeDasharray="7 7" />
          <g style={{ pointerEvents: "none" }}>
            <rect x="180" y="170" width="30" height="30" rx="8" fill={T.bluishGrey} stroke="#fff" strokeWidth="2.5" style={{ filter: "drop-shadow(0 1px 1.5px rgba(15,31,56,0.35))" }} />
            <g transform="translate(186.4 176.4) scale(0.72)" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z" />
              <rect width="10" height="12" x="7" y="10" rx="1" />
            </g>
          </g>
          <path d="M250 150 C 320 128, 360 110, 415 92" fill="none" stroke="#FE5425" strokeWidth="3" strokeDasharray="2 6" strokeLinecap="round" />
          <AssetPin x={150} y={150} color={T.primary} icon="truck" r={11} />
          <AssetPin x={235} y={215} color={T.primary} icon="truck" r={11} />
          <AssetPin x={160} y={230} color={T.success} icon="truck" r={11} />
          <AssetPin x={415} y={92} color="#FE5425" icon="truck" r={11} />
        </svg>
        <div style={{ position: "absolute", left: 22, bottom: 20, fontFamily: mono, fontSize: 10, letterSpacing: "1.1px", textTransform: "uppercase", color: "rgba(28,62,97,0.5)" }}>Depot zone</div>
        <div style={{ position: "absolute", right: 16, top: 16, background: "#fff", borderRadius: 12, padding: "12px 14px", boxShadow: "0 8px 24px rgba(0,0,0,0.16)", display: "flex", gap: 10, alignItems: "flex-start", maxWidth: 216 }}>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#F4A11D", marginTop: 4, flexShrink: 0 }} />
          <div>
            <div style={{ fontWeight: 700, fontSize: 13, color: T.bluishGrey }}>Geofence exit</div>
            <div style={{ fontFamily: mono, fontSize: 10.5, color: T.mute, marginTop: 3, lineHeight: 1.5 }}>Trailer · ZTM 8047 left Depot Zone · 14:32</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Shared 6-feature platform grid content
const UC_FEATURES = [
  { icon: "route", title: "Route optimization", desc: "AI-assisted routing finds the optimal sequence for every stop, saving up to 37% of drive time." },
  { icon: "pin", title: "Real-time tracking", desc: "GPS tracking for every driver on a live dispatch map. Know where every delivery is at any moment." },
  { icon: "clipboard", title: "Proof of delivery", desc: "E-signatures, photos, and notes captured at every stop, complete digital records for accountability." },
  { icon: "bell", title: "Customer notifications", desc: "Automated SMS and email at every stage, with branded tracking links and live ETA countdowns." },
  { icon: "dashboard", title: "Dispatch dashboard", desc: "A central command center for drivers, routes, and statuses. Adjust live with drag-and-drop." },
  { icon: "billing", title: "Billing engine", desc: "Generate invoices from delivery data (distance, stops, zones, or flat rates) and export to your accounting software." },
];

function UseCasePage({ slug }) {
  const T = window.l2uTokens;
  const d = UC_PAGES[slug] || UC_PAGES["last-mile-delivery"];
  const [openFaq, setOpenFaq] = React.useState(0);
  const goPricing = () => { window.location.href = "/pricing"; };
  const heroCTAs = (onDark) => (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 14, alignItems: "center" }}>
      <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>
  );
  const container = { maxWidth: 1280, margin: "0 auto" };

  return (
    <React.Fragment>
      {/* HERO */}
      <section style={{ position: "relative", background: T.cream, padding: "80px 80px 96px", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(900px 460px at 82% 24%, rgba(43,147,255,0.12), transparent 62%)", pointerEvents: "none" }} />
        <div style={{ ...container, position: "relative", display: "grid", gridTemplateColumns: "1.02fr 1fr", gap: 60, alignItems: "center" }}>
          <div style={{ minWidth: 0 }}>
            <window.L2U_Eyebrow>{d.eyebrow}</window.L2U_Eyebrow>
            <h1 style={{ margin: "20px 0 0", fontSize: 54, lineHeight: "58px", letterSpacing: "-2px", fontWeight: 900, color: T.bluishGrey, textWrap: "balance" }}>{d.title}<span style={{ color: T.primary }}>{d.accent}</span></h1>
            <p style={{ margin: "24px 0 0", fontSize: 18, lineHeight: "29px", color: T.body, maxWidth: 500 }}>{d.body}</p>
            <div style={{ marginTop: 32 }}>{heroCTAs(false)}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 22, marginTop: 34, fontFamily: T.fontMono, fontSize: 12.5, color: T.mute2 }}>
              {d.heroStats.map((s, i) => (
                <React.Fragment key={i}>
                  {i > 0 && <span style={{ color: T.border }}>·</span>}
                  <span>{s}</span>
                </React.Fragment>
              ))}
            </div>
          </div>
          <div style={{ minWidth: 0 }}><UCHeroMap hero={d.hero} slug={slug} /></div>
        </div>
      </section>

      {/* FEATURE A: text + chart card */}
      <section style={{ background: "#fff", borderTop: "1px solid " + T.border, padding: "92px 80px" }}>
        <div style={{ ...container, display: "grid", gridTemplateColumns: "1fr 1.04fr", gap: 68, alignItems: "center" }}>
          <div>
            <window.L2U_Eyebrow>{d.secA.eyebrow}</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px 0 0", fontSize: 36, lineHeight: "43px", letterSpacing: "-1.1px", fontWeight: 700, color: T.bluishGrey, maxWidth: 440 }}>{d.secA.title}</h2>
            <p style={{ margin: "20px 0 0", fontSize: 16.5, lineHeight: "27px", color: T.body, maxWidth: 470 }}>{d.secA.body}</p>
            <ul style={{ listStyle: "none", margin: "28px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 15 }}>
              {d.secA.checklist.map((c, i) => <UCCheck key={i}>{c}</UCCheck>)}
            </ul>
          </div>
          {d.secA.card === "assetMap" ? <UCAssetMapCard /> : <UCChartCard pct={d.secA.pct} />}
        </div>
      </section>

      {/* FEATURE B: tracking card + text */}
      <section style={{ background: T.cream, borderTop: "1px solid " + T.border, padding: "92px 80px" }}>
        <div style={{ ...container, display: "grid", gridTemplateColumns: "1fr 1.04fr", gap: 68, alignItems: "center" }}>
          <div style={{ display: "flex", justifyContent: "center" }}>{d.secB.card === "geofence" ? <UCGeofenceCard /> : <UCTrackingCard />}</div>
          <div>
            <window.L2U_Eyebrow>{d.secB.eyebrow}</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px 0 0", fontSize: 36, lineHeight: "43px", letterSpacing: "-1.1px", fontWeight: 700, color: T.bluishGrey, maxWidth: 460 }}>{d.secB.title}</h2>
            <p style={{ margin: "20px 0 0", fontSize: 16.5, lineHeight: "27px", color: T.body, maxWidth: 470 }}>{d.secB.body}</p>
            <ul style={{ listStyle: "none", margin: "28px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 15 }}>
              {d.secB.checklist.map((c, i) => <UCCheck key={i}>{c}</UCCheck>)}
            </ul>
          </div>
        </div>
      </section>

      {/* STAT BAND (dark) */}
      <section style={{ background: T.darkBlue, color: "#fff", padding: "84px 80px" }}>
        <div style={container}>
          <div style={{ textAlign: "center", marginBottom: 52 }}>
            <window.L2U_Eyebrow onDark>{d.stats.eyebrow}</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px auto 0", maxWidth: 640, fontSize: 38, lineHeight: "43px", letterSpacing: "-1.2px", fontWeight: 900, color: "#fff" }}>{d.stats.title}</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24 }}>
            {d.stats.items.map((s, i) => (
              <div key={i} style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 22, padding: "30px 26px" }}>
                <div style={{ fontSize: 42, fontWeight: 900, letterSpacing: "-1.6px", color: "#fff", lineHeight: 1 }}>{s.big}</div>
                <div style={{ fontSize: 15, fontWeight: 700, color: "#fff", margin: "16px 0 6px" }}>{s.label}</div>
                <div style={{ fontSize: 13.5, lineHeight: "21px", color: "rgb(200,210,226)" }}>{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PLATFORM: 6 features */}
      <section style={{ background: "#fff", padding: "92px 80px" }}>
        <div style={container}>
          <div style={{ textAlign: "center", marginBottom: 54 }}>
            <window.L2U_Eyebrow>{d.platform.eyebrow}</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px auto 0", maxWidth: 620, fontSize: 38, lineHeight: "44px", letterSpacing: "-1.3px", fontWeight: 900, color: T.bluishGrey }}>{d.platform.title}</h2>
            <p style={{ margin: "16px auto 0", maxWidth: 560, fontSize: 17, lineHeight: "27px", color: T.body }}>{d.platform.body}</p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 }}>
            {UC_FEATURES.map((f, i) => (
              <div key={i} style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 18, padding: 30 }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: "rgba(43,147,255,0.10)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}><UCIcon name={f.icon} /></div>
                <h3 style={{ margin: "0 0 9px", fontSize: 19, fontWeight: 700, color: T.bluishGrey }}>{f.title}</h3>
                <p style={{ margin: 0, fontSize: 15, lineHeight: "24px", color: T.body }}>{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ background: "#fff", borderTop: "1px solid " + T.border, padding: "84px 80px" }}>
        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 44 }}>
            <window.L2U_Eyebrow>Before you start</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px 0 0", fontSize: 38, lineHeight: "43px", letterSpacing: "-1.3px", fontWeight: 900, color: T.bluishGrey }}>Frequently asked questions.</h2>
          </div>
          <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: 700, fontSize: 16.5, color: T.bluishGrey, lineHeight: 1.4 }}>{f.q}</div>
                    <span style={{ width: 28, height: 28, borderRadius: "50%", background: "rgba(43,147,255,0.10)", color: T.primary, display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 18, flexShrink: 0 }}>{open ? "−" : "+"}</span>
                  </div>
                  {open && (<div style={{ marginTop: 13, fontSize: 15.5, lineHeight: "25px", color: T.body }}>{f.a}</div>)}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: T.cream, padding: "24px 80px 96px" }}>
        <div style={{ ...container, background: T.darkBlue, borderRadius: 28, padding: "76px 56px", textAlign: "center", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", top: "-45%", left: "50%", transform: "translateX(-50%)", width: 680, height: 680, borderRadius: "50%", background: "radial-gradient(circle, rgba(43,147,255,0.18) 0%, rgba(43,147,255,0) 68%)", pointerEvents: "none" }} />
          <div style={{ position: "relative", maxWidth: 680, margin: "0 auto" }}>
            <window.L2U_Eyebrow onDark>Get started</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px 0 18px", fontSize: 44, lineHeight: "49px", letterSpacing: "-1.5px", fontWeight: 900, 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", justifyContent: "center" }}>{heroCTAs(true)}</div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.L2U_UseCasePage = UseCasePage;

// ── Content for every use-case page ────────────────────────────────────────
const UC_PAGES = {
  "last-mile-delivery": {
    eyebrow: "Last mile delivery",
    title: "Last mile delivery software for ", accent: "Philippine businesses.",
    body: "Stop running deliveries on Viber. Run them on a platform. Plan routes, track every driver in real time, and capture proof at the door, all from one dashboard built for Metro Manila delivery teams.",
    heroStats: ["15–25% more drops per driver", "20–40% lower fuel", "Live ETAs on every drop"],
    hero: { fleetLabel: "12 stops · 1 driver", currentStop: { label: "Van • NBD 5192", addr: "Bonifacio Global City", eta: "ETA 2:42 · 3.2 km · On time" } },
    secA: {
      eyebrow: "Route optimization", pct: "25%",
      title: "Routes that beat Metro Manila traffic, not fight it.",
      body: "The order's placed, the van heads out, and visibility disappears. You're back to calling the driver and guessing ETAs. Locate2u sequences every stop and balances the load across your drivers in seconds, factoring in traffic, time windows, and vehicle capacity, so no one backtracks through EDSA.",
      checklist: ["Import stops by CSV, Excel, or API, addresses geocoded automatically", "Optimize and sequence hundreds of stops in seconds", "Factor in traffic, time windows, and vehicle capacity", "Add a stop mid-shift and the route adjusts on the fly"],
    },
    secB: {
      eyebrow: "Customer experience",
      title: "End the “nasan na ang order ko?” calls for good.",
      body: "Customers judge your brand by the delivery. Locate2u sends a live tracking link by SMS with a real ETA, so customers stop calling your dispatcher, and closes every drop with proof you can stand behind when someone says the parcel never arrived.",
      checklist: ["Live tracking link by SMS, opens in any browser, no app", "Accurate ETAs from live traffic data", "E-signature and photo captured at every drop", "Timestamped, geotagged proof for disputes"],
    },
    stats: {
      eyebrow: "The payoff", title: "The last mile, measurably better.",
      items: [
        { big: "15–25%", label: "More drops per driver", desc: "Optimized routing fits more deliveries into every shift, no extra vans." },
        { big: "20–40%", label: "Lower fuel cost", desc: "Less backtracking and idling across Metro Manila traffic." },
        { big: "Fewer calls", label: "“Nasan na ang order ko?”", desc: "Customers self-serve a live ETA before they ring your dispatcher." },
        { big: "100%", label: "Drops with proof", desc: "Every delivery closes with an e-signature, photo, and timestamp." },
      ],
    },
    platform: {
      eyebrow: "Complete last-mile platform", title: "Run your own last mile, end to end.",
      body: "Not a courier you hire like Grab or Lalamove: the platform you use to run your own drivers, routes, and customer experience, from dispatch to doorstep.",
    },
    faqs: [
      { q: "Do my customers need to download an app to track their delivery?", a: "No. They receive a live tracking link by SMS that opens in any web browser. They see the driver's location and ETA without installing anything." },
      { q: "Can I make changes after routes are already out?", a: "Yes. Add a stop, reassign a driver, or reorder deliveries mid-shift from the dispatch dashboard, and the affected route updates on the fly." },
      { q: "Does the driver app work on both Android and iPhone?", a: "Yes. Locate2u runs on both iOS and Android." },
      { q: "We only do a handful of deliveries a day. Is this overkill?", a: "No. Locate2u scales from a few deliveries a day to thousands. Solo operators and small teams start on the entry tier and grow into fuller delivery management as volume climbs." },
    ],
    cta: { title: "See it on your own routes.", body: "Set up your stops, run your first optimized routes, and watch the difference on a live map across the Philippines." },
  },

  "route-planning": {
    eyebrow: "Route planning",
    title: "Route planning software for delivery teams ", accent: "in the Philippines.",
    body: "Plan a full day of routes in seconds, not an hour of spreadsheet guesswork. Upload your stops, set your constraints, and Locate2u builds the most efficient route for every driver, factoring in Manila traffic, delivery windows, and vehicle capacity.",
    heroStats: ["Routes in seconds", "Up to 37% less drive time", "20 to 500+ stops per day"],
    hero: { fleetLabel: "42 stops · 4 drivers", badge: "Optimized", currentStop: { label: "Van • XRC 6714", addr: "Metro Manila", eta: "ETA 2:42 · 8.4 km · On route" } },
    secA: {
      eyebrow: "Multi-driver optimization", pct: "37%",
      title: "One click to optimize routes across your entire fleet.",
      body: "Manual planning eats 30 minutes to a couple of hours every morning, and the routes are rarely the best ones. Upload your stops, set your constraints, and Locate2u sequences the whole fleet in seconds, finding the shortest workable path with real-time and historical traffic, and balancing the load across every driver.",
      checklist: ["Optimize from 20 to 500-plus stops in one click", "Balance workloads by location, capacity, and hours", "Traffic-aware routing from real-time and historical data", "Import stops by CSV, Excel, or API, geocoded automatically"],
    },
    secB: {
      eyebrow: "Flexible scheduling",
      title: "Drag, drop, and adjust routes on the fly.",
      body: "A new booking comes in, a customer reschedules, a driver calls in sick. Locate2u's visual schedule builder lets dispatchers drag stops between routes, add deliveries mid-day, and watch the timing recalculate instantly.",
      checklist: ["Visual drag-and-drop route editor", "Add or remove stops without rebuilding the entire route", "Instant ETA recalculation as you move stops between drivers", "Constraint-based planning by vehicle type, capacity, and skills"],
    },
    stats: {
      eyebrow: "The payoff", title: "Give your mornings back.",
      items: [
        { big: "Seconds", label: "To plan the day", desc: "20 or 500-plus stops sequenced across the whole fleet in one click." },
        { big: "Up to 37%", label: "Less drive time", desc: "The shortest workable sequence, from real-time and historical traffic." },
        { big: "20–40%", label: "Lower fuel cost", desc: "Less distance and idling means less spend and less wear on the fleet." },
        { big: "Balanced", label: "Driver workloads", desc: "Stops split by location, capacity, and hours. No one overloaded." },
      ],
    },
    platform: {
      eyebrow: "Complete delivery platform", title: "Built for real Manila roads.",
      body: "EDSA and C5 shift by the hour and number coding changes what's drivable, so Locate2u plans against real conditions, not a straight-line map. And planning is just one part: dispatch, tracking, proof, and billing live in the same platform.",
    },
    faqs: [
      { q: "How long does it take to plan routes with software?", a: "Optimized routes for an entire fleet generate in seconds, whether you have 20 or 500-plus stops, replacing the 30 minutes to several hours manual planning usually takes." },
      { q: "What is the difference between route planning and route optimization?", a: "Route planning is deciding which stops go to which driver and in what order. Route optimization does that in the mathematically most efficient way, accounting for traffic, time windows, and capacity at once. Locate2u does both in one click." },
      { q: "Can route planning software handle multiple drivers?", a: "Yes. Locate2u is built for multi-driver operations and distributes stops automatically based on driver location, vehicle capacity, skills, and working hours, so no one is overloaded." },
      { q: "Does route planning account for traffic and road conditions?", a: "Yes. It uses real-time and historical traffic data to calculate accurate travel times and ETAs, and can re-route mid-day if conditions change or roads close." },
      { q: "Do I need to install anything?", a: "Route planning runs in your browser. Drivers use the Locate2u app on iOS or Android to follow their routes and navigate." },
    ],
    cta: { title: "Give your mornings back.", body: "Stop planning routes by hand. Upload today's stops, click optimize, and send your drivers out on routes that actually make sense across the Philippines." },
  },

  "delivery-management": {
    eyebrow: "Delivery management",
    title: "Delivery management software for ", accent: "Philippine businesses.",
    body: "Everything you need to run deliveries end to end, in one platform. Plan routes, dispatch drivers, track every vehicle live, and capture proof at the door, no more Viber threads, spreadsheets, or guessing where the day stands.",
    heroStats: ["One live dispatch board", "Order to doorstep, one system", "5 to 5,000 deliveries a day"],
    hero: { fleetLabel: "24 orders · 4 drivers", badge: "Live dispatch", currentStop: { label: "Truck • TGV 4728", addr: "Ortigas Center, Pasig", eta: "Moving · 51 km/h · updated 2s ago" } },
    secA: {
      eyebrow: "Plan & dispatch", pct: "37%",
      title: "Plan the day in minutes, adjust it in seconds.",
      body: "Orders arrive across different channels, get typed into a spreadsheet, and go out over Viber. Then the dispatcher spends the day calling around. Locate2u turns those orders into efficient, balanced routes in seconds, then lets you add stops, reassign drivers, and reorder mid-day without redoing the whole schedule.",
      checklist: ["Import orders by CSV, Excel, your store, or API", "Auto-optimize balanced routes across your team", "One dashboard shows every driver and stop on a map", "Add, reassign, or reorder stops mid-day, no full redo"],
    },
    secB: {
      eyebrow: "Track & prove",
      title: "See every driver, prove every delivery.",
      body: "Watch the whole fleet move on a live map and give customers a tracking link with an accurate ETA, so they stop calling to ask. Close each stop with an e-signature, photo, and rating. Then see fuel, idle time, and delivery KPIs so you know what's working and what to fix.",
      checklist: ["Live GPS tracking for every driver", "Live tracking link and automated SMS for customers", "E-signature, photo, and rating captured at every stop", "Analytics on fuel, speed, idle time, and delivery KPIs"],
    },
    stats: {
      eyebrow: "The payoff", title: "Fewer failed drops, more deliveries, less admin.",
      items: [
        { big: "37% faster", label: "Route planning", desc: "Turn a day of orders into balanced routes in minutes, not hours." },
        { big: "15–25%", label: "More drops per driver", desc: "Efficient sequencing fits more deliveries into each shift." },
        { big: "100%", label: "Drops with proof", desc: "Every delivery closes with an e-signature, photo, and timestamp." },
        { big: "One dashboard", label: "Order to doorstep", desc: "Plan, dispatch, track, and prove in one place. No chat threads." },
      ],
    },
    platform: {
      eyebrow: "More than a courier", title: "Different from Grab or Lalamove.",
      body: "Booking a rider to move one parcel isn't running a delivery operation. Locate2u gives you route planning across a fleet, a dispatch dashboard, proof of delivery under your own brand, and the analytics to run the business: the platform for your own drivers, not a rider you rent by the trip.",
    },
    faqs: [
      { q: "What does delivery management software actually do?", a: "It brings route planning, dispatch, live tracking, and proof of delivery into one system, so you manage the entire process from order to doorstep in one place instead of across chats and spreadsheets." },
      { q: "Can it handle my whole fleet at once?", a: "Yes. Locate2u coordinates multiple drivers in real time, distributing stops and showing every vehicle on a single live map." },
      { q: "How do customers know when their delivery is coming?", a: "They get a live tracking link by SMS with the driver's location and ETA, plus automated notifications when the driver is on the way. No app download needed." },
      { q: "Can it connect to the systems I already use?", a: "Yes. Locate2u integrates through its API and with tools like Shopify, WooCommerce, and accounting platforms, so orders flow in and delivery data flows back out." },
    ],
    cta: { title: "Run your deliveries on a platform, not a group chat.", body: "Bring the whole operation into one dashboard: plan, dispatch, track, and prove every delivery, and finally get a clear view of your day across the Philippines." },
  },

  "transport-management": {
    eyebrow: "Transport management (TMS)",
    title: "Transport management system (TMS) for ", accent: "Philippine fleets.",
    body: "Run your fleet like an operation, not a group chat. Locate2u is a TMS for businesses that move goods with their own drivers: plan routes, dispatch and track in real time, capture proof of delivery, and see the numbers that run your fleet, all in one place.",
    heroStats: ["Multi-vehicle optimization", "Live fleet visibility", "Proof-to-invoice billing"],
    hero: { fleetLabel: "8 vehicles · 210 stops", badge: "Live fleet", currentStop: { label: "Van • DPH 2967", addr: "Cavite → Makati CBD", eta: "On schedule · 4 stops planned" } },
    secA: {
      eyebrow: "Fleet optimization", pct: "37%",
      title: "Optimize every vehicle, every route, every day.",
      body: "A TMS controls how goods move: which driver takes which stops, in what order, on what schedule. Locate2u builds optimized, balanced routes across the whole fleet in seconds, respecting time windows, vehicle capacity, and driver hours, then lets you reassign and re-route mid-shift from one dashboard.",
      checklist: ["Optimize balanced routes across the whole fleet", "Respect time windows, vehicle capacity, and driver hours", "Reassign and re-route mid-shift on a live map", "Bring in jobs by CSV, Excel, your systems, or API"],
    },
    secB: {
      eyebrow: "Track & bill",
      title: "Full visibility, from dispatch to invoice.",
      body: "Track every vehicle live, share ETAs with customers, and review any route with geo-fencing and historical playback. Capture proof at every stop, then trigger invoices off completed deliveries and run driver pay on the work actually done. The record and the invoice always match.",
      checklist: ["Real-time GPS tracking with geo-fencing and playback", "Proof of delivery captured and stored against each job", "Analytics on fuel, speed, idle time, and delivery KPIs", "Trigger invoices and driver pay from completed jobs"],
    },
    stats: {
      eyebrow: "The payoff", title: "Where a TMS pays for itself.",
      items: [
        { big: "20–40%", label: "Lower fuel cost", desc: "Tighter routes cut drive time and fuel across the whole fleet." },
        { big: "15–25%", label: "More stops per vehicle", desc: "Better coordination adds deliveries without adding headcount." },
        { big: "Near zero", label: "Delivery disputes", desc: "Proof on every stop ends the cost of “it never arrived.”" },
        { big: "Auto", label: "Proof to invoice", desc: "Completed jobs flow straight into billing and driver pay." },
      ],
    },
    platform: {
      eyebrow: "Complete transport platform", title: "Built for fleets that run their own drivers.",
      body: "Distributors, catering, water and LPG, pharmacy, e-commerce, and field-service teams coordinating 10 to 30 drivers by hand. A TMS is the upgrade that lets you grow without the chaos scaling with you. Planning, dispatch, tracking, proof, and billing, all in one platform.",
    },
    faqs: [
      { q: "What is the difference between a TMS and delivery management software?", a: "They overlap heavily. Transport management emphasizes the full movement of goods: planning, fleet coordination, tracking, and billing, while delivery management emphasizes the last-mile customer experience. Locate2u covers both in one platform, so you're not choosing between them." },
      { q: "Do I need GPS hardware?", a: "No. The driver app tracks vehicles through the phone, so you can start without hardware. For assets without a driver or phone, Locate2u also supports dedicated GPS devices." },
      { q: "Can it handle multiple vehicles and drivers at once?", a: "Yes. Locate2u is built for multi-driver, multi-vehicle fleets and coordinates them all on one live dashboard." },
      { q: "Will it work with the systems we already have?", a: "Yes. Locate2u connects through its API and common integrations, so orders come in and delivery and billing data go back out without double entry." },
    ],
    cta: { title: "Put your whole fleet on one platform.", body: "Stop running transport out of chats and spreadsheets. Plan, dispatch, track, prove, and bill from one system, and see your operation clearly for the first time across the Philippines." },
  },

  "asset-tracking": {
    eyebrow: "Asset tracking",
    title: "Asset tracking software for ", accent: "Philippine fleets and businesses.",
    body: "Know where every vehicle and asset is, in real time. Locate2u puts live GPS on your fleet and your valuable assets, with shareable tracking, geo-fencing, and historical playback. See where everything is right now, and where it's been, all on one map.",
    heroStats: ["Live GPS on one map", "Shareable tracking links", "Full route playback"],
    hero: { fleetLabel: "24 assets · live", badge: "Live GPS", currentStop: { label: "Van • MJG 8523", addr: "Ortigas Center, Pasig", eta: "Moving · 48 km/h · updated 2s ago" } },
    secA: {
      eyebrow: "Live GPS tracking", card: "assetMap",
      title: "See every vehicle and asset on one live map.",
      body: "For a lot of businesses, “where's the vehicle right now?” is answered by calling the driver. Locate2u puts every vehicle and asset on a single live map, updated as they move, tracked through the driver's phone or a dedicated GPS device, all on the same dashboard.",
      checklist: ["Every vehicle and asset on a single live map", "App-based tracking through the driver's phone, nothing to install", "GPS devices for trailers and equipment with no driver", "Shareable tracking links with live location and ETA"],
    },
    secB: {
      eyebrow: "Geo-fencing & playback", card: "geofence",
      title: "Know the moment it moves, replay everywhere it's been.",
      body: "Draw a boundary around a depot, client site, or no-go area and get alerted when an asset enters or leaves. Then replay any vehicle's route for any past day to settle disputes, audit routes, and see how time actually gets spent on the road.",
      checklist: ["Geo-fence depots, zones, and client sites with enter/exit alerts", "Historical playback of any vehicle's route, any past day", "Fuel, speed, and idle-time analytics", "Settle “where was it and when” disputes in seconds"],
    },
    stats: {
      eyebrow: "The payoff", title: "See everything you own, on one map.",
      items: [
        { big: "Live", label: "Every asset", desc: "Vehicles, trailers, and equipment on one map, updated as they move." },
        { big: "Playback", label: "Any past day", desc: "Replay any route to settle disputes and audit how time is spent." },
        { big: "Alerts", label: "Enter & exit", desc: "Geo-fence depots and zones and know the moment an asset crosses." },
        { big: "Accurate", label: "Customer ETAs", desc: "When you can see the vehicle, you can tell customers the truth." },
      ],
    },
    platform: {
      eyebrow: "Complete fleet platform", title: "Tracking is just the start.",
      body: "Fleets cutting idle time across EDSA, water and LPG runs across zones, field-service crews, and distributors watching high-value gear, all on one platform. Tracking sits alongside routing, dispatch, proof of delivery, and billing, so you're never switching systems to see your operation.",
    },
    faqs: [
      { q: "Do I need to buy GPS hardware to use asset tracking?", a: "Not necessarily. Vehicles with a driver can be tracked through the Locate2u app on their phone. GPS devices are for assets that have no driver or phone, like trailers or equipment." },
      { q: "Can I share an asset's location with a customer?", a: "Yes. You can share a live tracking link with location and ETA that opens in any browser, so customers see where their delivery or asset is without installing an app." },
      { q: "What is geo-fencing used for?", a: "It lets you set a virtual boundary around a location and get notified when a vehicle or asset enters or leaves it, useful for depots, delivery zones, client sites, and security." },
      { q: "Can I see where a vehicle went in the past?", a: "Yes. Historical playback lets you replay any vehicle's route for a past day, valuable for audits, dispute resolution, and understanding how time is spent." },
    ],
    cta: { title: "See everything you own, on one map.", body: "Put live location and full history behind every vehicle and asset in your operation. Start tracking and stop guessing where things are, across the Philippines." },
  },
};
