// city-page.jsx: reusable location landing page (the "By city" cluster).
// Renders a full city page (hero with optimized-route visual, problem section,
// benefits grid, how-it-works steps, "made for" band, FAQ, dark CTA) from a
// content object keyed by slug. Part of a six-city cluster that links up to the
// Metro Manila pillar. First page: Quezon City.

const CITY_GREEN = "#1F9D57";

// City slug → hero-map name (route + markers in window.L2U_HERO_MAPS, tokens.jsx).
const CITY_HERO_MAP = { "metro-manila": "metromanila", "quezon-city": "quezoncity", "makati": "makati", "cebu": "cebu", "davao": "davao", "clark-pampanga": "clarkpampanga" };

// ── Hero visual: compact dark "optimized route" map card ───────────────────
function CityHeroMap({ map, slug }) {
  const T = window.l2uTokens;
  const mono = T.fontMono;
  const hm = window.L2U_HERO_MAPS[CITY_HERO_MAP[slug] || "metromanila"];
  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" }}>{map.title || "Optimized route"}</span>
        </div>
        <span style={{ fontFamily: mono, fontSize: 11, color: "rgb(200,210,226)" }}>{map.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: 210 }}>
          <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "1px", textTransform: "uppercase", color: T.mute, marginBottom: 6 }}>{map.vehicle}</div>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: T.bluishGrey, marginBottom: 7 }}>{map.route}</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 }}>{map.meta}</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 }}>{map.badge}</span>
        </div>
      </div>
    </div>
  );
}

function CityPage({ slug }) {
  const T = window.l2uTokens;
  const d = CITY_PAGES[slug] || CITY_PAGES["quezon-city"];
  const [openFaq, setOpenFaq] = React.useState(0);
  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={() => { window.location.href = "/pricing"; }}>See pricing in pesos</window.L2U_Btn>
    </div>
  );
  const container = { maxWidth: 1280, margin: "0 auto" };
  const centerHead = (eyebrow, title, sub) => (
    <div style={{ textAlign: "center", marginBottom: 52 }}>
      <window.L2U_Eyebrow>{eyebrow}</window.L2U_Eyebrow>
      <h2 style={{ margin: "16px auto 0", maxWidth: 640, fontSize: 38, lineHeight: "44px", letterSpacing: "-1.3px", fontWeight: 900, color: T.bluishGrey }}>{title}</h2>
      {sub && <p style={{ margin: "16px auto 0", maxWidth: 620, fontSize: 17, lineHeight: "27px", color: T.body }}>{sub}</p>}
    </div>
  );

  return (
    <React.Fragment>
      {/* HERO */}
      <section style={{ position: "relative", background: T.cream, padding: "80px 80px 92px", 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: 52, lineHeight: "57px", letterSpacing: "-1.9px", fontWeight: 900, color: T.bluishGrey, textWrap: "balance" }}>{d.h1}<span style={{ color: T.primary }}>{d.h1accent}</span></h1>
            <p style={{ margin: "24px 0 0", fontSize: 18, lineHeight: "29px", color: T.body, maxWidth: 520 }}>{d.hero}</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 }}><CityHeroMap map={d.map} slug={slug} /></div>
        </div>
      </section>

      {/* PROBLEM */}
      <section style={{ background: "#fff", borderTop: "1px solid " + T.border, padding: "88px 80px" }}>
        <div style={{ maxWidth: 860, margin: "0 auto" }}>
          <window.L2U_Eyebrow>{d.problem.eyebrow}</window.L2U_Eyebrow>
          <h2 style={{ margin: "16px 0 0", fontSize: 36, lineHeight: "43px", letterSpacing: "-1.1px", fontWeight: 800, color: T.bluishGrey }}>{d.problem.title}</h2>
          {d.problem.body.map((p, i) => (
            <p key={i} style={{ margin: "20px 0 0", fontSize: 17, lineHeight: "28px", color: T.body }}>{p}</p>
          ))}
        </div>
      </section>

      {/* BENEFITS: what you get */}
      <section style={{ background: T.cream, borderTop: "1px solid " + T.border, padding: "88px 80px" }}>
        <div style={container}>
          {centerHead(d.benefits.eyebrow, d.benefits.title)}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 22 }}>
            {d.benefits.items.map((b, i) => (
              <div key={i} style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 18, padding: "28px 26px" }}>
                <div style={{ fontSize: 30, fontWeight: 900, letterSpacing: "-1px", color: CITY_GREEN, lineHeight: 1 }}>{b.stat}</div>
                <div style={{ fontSize: 15.5, fontWeight: 700, color: T.bluishGrey, margin: "14px 0 8px" }}>{b.label}</div>
                <div style={{ fontSize: 14.5, lineHeight: "23px", color: T.body }}>{b.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section style={{ background: "#fff", padding: "88px 80px" }}>
        <div style={container}>
          {centerHead(d.steps.eyebrow, d.steps.title)}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 22 }}>
            {d.steps.items.map((s, i) => (
              <div key={i} style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 18, padding: 28 }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: "rgba(43,147,255,0.10)", color: T.primary, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: T.fontMono, fontWeight: 700, fontSize: 16, marginBottom: 18 }}>{i + 1}</div>
                <h3 style={{ margin: "0 0 8px", fontSize: 18, fontWeight: 700, color: T.bluishGrey }}>{s.t}</h3>
                <p style={{ margin: 0, fontSize: 14.5, lineHeight: "23px", color: T.body }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MADE FOR */}
      <section style={{ background: T.cream, borderTop: "1px solid " + T.border, padding: "84px 80px" }}>
        <div style={{ maxWidth: 900, margin: "0 auto", textAlign: "center" }}>
          <window.L2U_Eyebrow>{d.madeFor.eyebrow}</window.L2U_Eyebrow>
          <h2 style={{ margin: "16px auto 0", maxWidth: 640, fontSize: 34, lineHeight: "41px", letterSpacing: "-1.1px", fontWeight: 900, color: T.bluishGrey }}>{d.madeFor.title}</h2>
          <p style={{ margin: "18px auto 0", fontSize: 17, lineHeight: "28px", color: T.body }}>{d.madeFor.body}</p>
        </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: 42, lineHeight: "47px", 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_CityPage = CityPage;

// ── Content for every city page ────────────────────────────────────────────
const CITY_PAGES = {
  "quezon-city": {
    eyebrow: "Route optimization · Quezon City",
    h1: "Route optimization software for ", h1accent: "Quezon City deliveries.",
    hero: "Quezon City is the biggest city in Metro Manila by land and population, and your routes feel it. Locate2u sequences every stop from Fairview to Cubao to Eastwood in seconds, so your drivers cover more ground with less backtracking. Built for QC delivery teams tired of planning routes by hand.",
    heroStats: ["Up to 37% less drive time", "15–25% more drops", "20–40% lower fuel"],
    map: { vehicle: "Van • NKD 8124", fleetLabel: "28 stops · 4 drivers", stopCount: 28, route: "Manila → Quezon City", meta: "ETA 3:39 · 8.4 km · On route", badge: "QC · live" },
    problem: {
      eyebrow: "The QC problem",
      title: "Too much ground, too many stops.",
      body: [
        "Quezon City sprawls. A single day's deliveries can run from the subdivisions off Commonwealth to the towers in Eastwood to the retail strips along Timog and Tomas Morato. Plan that route by eye and drivers end up crisscrossing the city, doubling back, and burning fuel and daylight.",
        "Route optimization fixes the part humans are worst at: figuring out the best order to hit dozens of scattered stops. Locate2u does it in seconds and re-does it the moment a stop is added or a road closes.",
      ],
    },
    benefits: {
      eyebrow: "What you get", title: "More of QC, covered with less driving.",
      items: [
        { stat: "Up to 37%", label: "Less drive time", desc: "Feed in the day's addresses and Locate2u orders them into the shortest realistic route, factoring in time windows and vehicle type." },
        { stat: "15–25%", label: "More drops per driver", desc: "Tighter routes across QC's spread-out barangays mean more deliveries per driver, without adding vehicles." },
        { stat: "20–40%", label: "Lower fuel bills", desc: "Less backtracking is less fuel, a saving that shows up fast across a QC-wide route." },
        { stat: "Live", label: "Tracking & proof", desc: "Every driver on one map, every delivery closed with a photo and signature, so a subdivision drop-off is never in dispute." },
      ],
    },
    steps: {
      eyebrow: "How it works", title: "From a list of stops to routes that make sense.",
      items: [
        { t: "Load your stops", d: "Import addresses across QC in one go: CSV, Excel, your store, or the API." },
        { t: "Optimize", d: "Locate2u builds the most efficient route order across the city in seconds." },
        { t: "Send to drivers", d: "Each driver gets their sequence in the app; customers get a live ETA link." },
        { t: "Confirm delivery", d: "Capture proof on arrival and move to the next stop." },
      ],
    },
    madeFor: {
      eyebrow: "Made for QC", title: "Built for Quezon City's delivery businesses.",
      body: "The businesses that feel this most in Quezon City are the ones covering the whole map every day: water and LPG refillers serving subdivisions and condos, pharmacies delivering across a wide catchment, food and grocery operations out of QC commissaries, and e-commerce sellers shipping from home-based warehouses. When your stops are spread across the metro's largest city, the route order is the whole game.",
    },
    faqs: [
      { q: "Can it handle stops all the way from Novaliches to Diliman in one route?", a: "Yes. Locate2u optimizes across your entire service area and splits the load sensibly across multiple drivers when one route is too long for a day." },
      { q: "We already know the roads. Why do we need this?", a: "Knowing the roads and finding the mathematically shortest order through 40 scattered stops are different problems. The software handles the sequencing so your drivers can focus on driving." },
      { q: "Does it work if a rush order comes in mid-day?", a: "Yes. Add the new stop and Locate2u re-optimizes the affected route on the spot." },
    ],
    cta: { title: "Cover more of Quezon City with the same fleet.", body: "See what optimized routing does to a full QC delivery day." },
  },

  "makati": {
    eyebrow: "Delivery tracking · Makati",
    h1: "Delivery tracking software for ", h1accent: "Makati businesses.",
    hero: "Deliveries in Makati mean high-rise condos, corporate towers, security desks, and streets you can't park on. Locate2u tracks every drop in real time and captures proof at the door, so a delivery to a 30th-floor unit in Salcedo Village is never a mystery. Built for Makati delivery and courier teams.",
    heroStats: ["Proof on every drop", "Live client tracking", "Disputes near zero"],
    map: { title: "Live tracking", tag: "Live", vehicle: "Car • NPS 4391", fleetLabel: "18 stops · CBD", stopCount: 18, route: "Makati CBD", meta: "ETA 4:14 · On schedule · On time", badge: "Makati · live" },
    problem: {
      eyebrow: "The Makati problem",
      title: "Makati deliveries have their own rules.",
      body: [
        "The Makati CBD is dense and vertical. Your driver isn't pulling up to a house. They're checking in at a lobby, waiting for a security escort, and finding a unit in a tower off Ayala or in Legazpi Village. That's where deliveries stall and where disputes start: the customer says it never arrived, the driver says it was left at reception, and nobody can prove it.",
        "Locate2u closes that gap. Every delivery is tracked live and confirmed with a photo, e-signature, and timestamp, so there's a clear record of exactly what was delivered, where, and to whom.",
      ],
    },
    benefits: {
      eyebrow: "What you get", title: "A clear record for every vertical drop.",
      items: [
        { stat: "Near zero", label: "Delivery disputes", desc: "Photo, signature, and timestamp captured in the app, even when the drop is a lobby, a reception desk, or a specific condo unit." },
        { stat: "Live", label: "Client tracking", desc: "Send corporate clients a branded tracking link with a live ETA, the visibility that keeps office-pantry, catering, and courier accounts." },
        { stat: "Smart", label: "CBD routing", desc: "Sequence tight clusters of stops across Makati's grid so drivers spend less time circling for parking and more time delivering." },
        { stat: "Auto", label: "Proof to invoice", desc: "Proof of delivery triggers invoicing, so finance isn't chasing paper across the CBD." },
      ],
    },
    steps: {
      eyebrow: "How it works", title: "From lobby check-in to logged proof.",
      items: [
        { t: "Import the day's drops", d: "Load your Makati deliveries or pull them from your store or system." },
        { t: "Optimize and dispatch", d: "Locate2u sequences the CBD stops and sends them to drivers." },
        { t: "Track live", d: "Watch progress on the map; clients follow their own ETA link." },
        { t: "Capture proof", d: "Photo and e-signature at the door, logged instantly and geotagged." },
      ],
    },
    madeFor: {
      eyebrow: "Made for Makati", title: "Built for Makati's delivery reality.",
      body: "Corporate catering and office-pantry suppliers, same-day couriers serving the CBD, pharmacies and specialty retailers delivering to condos, and B2B distributors supplying Makati offices all live with the same friction: vertical addresses, tight access, and demanding clients who expect to know where their order is. Proof and live tracking are what turn those deliveries from a risk into a selling point.",
    },
    faqs: [
      { q: "How does proof of delivery work in a condo or office tower?", a: "The driver captures a photo and e-signature at the point of handover, whether that's the unit, the reception desk, or building security. It's timestamped and geotagged, so the record is clear." },
      { q: "Can our corporate clients track their own deliveries?", a: "Yes. Each delivery generates a live tracking link with an ETA that you can brand as your own." },
      { q: "Is this only for big fleets?", a: "No. A courier or catering team with a handful of drivers gets the same tracking and proof as an enterprise fleet." },
    ],
    cta: { title: "Give every Makati delivery a paper trail.", body: "See how live tracking and proof of delivery work across the CBD." },
  },

  "cebu": {
    eyebrow: "Delivery management · Cebu",
    h1: "Delivery management software for ", h1accent: "Cebu & Metro Cebu.",
    hero: "Deliveries in Cebu don't stop at the city line. They cross into Mandaue, over the bridges to Mactan, and out to the growing towns around Metro Cebu. Locate2u plans those routes, tracks your drivers live, and captures proof on every drop, all from one platform. Built for Cebu's fast-growing delivery businesses.",
    heroStats: ["Up to 37% less drive time", "One platform, metro-wide", "20 to 2,000 a day"],
    map: { vehicle: "Van • NCS 9512", fleetLabel: "32 stops · 5 drivers", stopCount: 32, route: "Cebu CBD", meta: "Moving · 31 km/h · updated 1s ago", badge: "Metro Cebu · live" },
    problem: {
      eyebrow: "The Cebu problem",
      title: "Metro Cebu is bigger than one city.",
      body: [
        "Cebu City is the hub, but the real service area is Metro Cebu: Mandaue's warehouses and factories, the bridges and traffic to Lapu-Lapu and Mactan, and the spread of e-commerce buyers across the province. Coordinating that on a Viber thread and a spreadsheet falls apart fast, especially as order volumes climb.",
        "Locate2u gives Cebu operators one system to plan across the metro, dispatch to drivers, and keep customers in the loop, so growth doesn't turn into chaos.",
      ],
    },
    benefits: {
      eyebrow: "What you get", title: "One platform across the whole metro.",
      items: [
        { stat: "Up to 37%", label: "Less drive time", desc: "Sequence stops from Cebu City to Mandaue to Mactan, accounting for bridge traffic and time windows." },
        { stat: "Live", label: "Metro-wide map", desc: "One map showing every driver, whether they're in the IT Park area or crossing to Lapu-Lapu, with real ETAs for every customer." },
        { stat: "Near zero", label: "Delivery disputes", desc: "Photo and e-signature captured in the app, so a delivery to a Mandaue business or a Mactan home is documented." },
        { stat: "20–2,000", label: "Deliveries a day", desc: "The platform runs the same at 20 deliveries a day or 2,000, so it scales as Cebu's e-commerce keeps climbing." },
      ],
    },
    steps: {
      eyebrow: "How it works", title: "From orders in to drivers paid.",
      items: [
        { t: "Import your orders", d: "Load stops across Metro Cebu or pull them from Shopify, WooCommerce, or your system." },
        { t: "Optimize", d: "Locate2u builds efficient routes across the metro in seconds." },
        { t: "Dispatch", d: "Drivers get their stops in the app; customers get a live tracking link." },
        { t: "Close the loop", d: "Capture proof, then invoice and pay drivers from the same platform." },
      ],
    },
    madeFor: {
      eyebrow: "Made for Cebu", title: "Built for Cebu's delivery businesses.",
      body: "E-commerce sellers shipping across the Visayas, furniture and appliance retailers making bulky deliveries around the metro, food and grocery operations, and distributors supplying Mandaue and Mactan all share the same need: one system to run growing volumes across a multi-city metro without hiring a bigger dispatch team. That's what Locate2u is.",
    },
    faqs: [
      { q: "Can it plan routes that cross into Mandaue and Mactan?", a: "Yes. Locate2u optimizes across your whole service area, including the bridge crossings, and splits routes across drivers when needed." },
      { q: "We ship across the Visayas, not just within Cebu. Does that work?", a: "Yes. The platform handles wide service areas and multi-stop routes, and gives every customer a live tracking link regardless of where they are." },
      { q: "How quickly can a Cebu team get started?", a: "Days, not months. Import your stops, add your drivers, and start dispatching." },
    ],
    cta: { title: "Run Metro Cebu deliveries on one platform.", body: "See how Locate2u handles a full day across Cebu, Mandaue, and Mactan." },
  },

  "davao": {
    eyebrow: "Route optimization · Davao",
    h1: "Route optimization software for ", h1accent: "Davao fleets.",
    hero: "Davao is one of the largest cities in the world by land area, and your delivery routes stretch across all of it, from Toril to Buhangin to the city center. Locate2u sequences those long, spread-out routes in seconds so drivers waste less time and fuel. Built for Davao delivery and distribution teams.",
    heroStats: ["Up to 37% less drive time", "20 to 40% lower fuel", "15 to 25% more stops per driver"],
    map: { vehicle: "Truck • ZTM 8047", fleetLabel: "28 stops · 4 drivers", stopCount: 28, route: "Davao CBD", meta: "Moving · 42 km/h · updated 5s ago", badge: "Davao · optimized" },
    problem: {
      eyebrow: "The Davao challenge",
      title: "Davao's challenge is distance.",
      body: [
        "Davao City covers a vast area. A driver's day can span districts that are far apart, and the wrong route order means hours of unnecessary driving and a real fuel bill to match. When your service area is this large, planning routes by hand or over Viber leaves money on the table every single day.",
        "Route optimization is built for exactly this. Locate2u takes a long list of scattered stops and finds the most efficient order to hit them, then re-optimizes the moment something changes.",
      ],
    },
    benefits: {
      eyebrow: "What you get", title: "Less driving over a very large city.",
      items: [
        { stat: "Up to 37%", label: "Less drive time", desc: "Sequence stops across Davao's districts into the shortest realistic route, balanced across your drivers." },
        { stat: "20–40%", label: "Lower fuel costs", desc: "Over long Davao routes, better sequencing adds up fast. Locate2u customers report 20 to 40% lower fuel costs." },
        { stat: "15–25%", label: "More stops per driver", desc: "Tighter routes mean 15 to 25% more stops per driver, which matters when distances are long." },
        { stat: "Live", label: "Tracking + proof", desc: "Follow every driver on one map across the city, and capture a photo and signature on every delivery so nothing is disputed." },
      ],
    },
    steps: {
      eyebrow: "How it works", title: "From a long stop list to an efficient day.",
      items: [
        { t: "Load your stops", d: "Import the day's deliveries across Davao." },
        { t: "Optimize", d: "Locate2u orders them into the most efficient route in seconds." },
        { t: "Dispatch", d: "Drivers get their sequence in the app; customers get a live ETA." },
        { t: "Confirm", d: "Capture proof on delivery and keep the day moving." },
      ],
    },
    madeFor: {
      eyebrow: "Made for Davao", title: "Built for Davao's delivery businesses.",
      body: "Water and LPG delivery serving households across a wide area, agricultural and produce distribution, retail and e-commerce fulfillment, and field-service teams covering the city all run into the same wall: long distances between stops. Getting the route order right is where a Davao operation saves the most time and fuel, and that's precisely what Locate2u does.",
    },
    faqs: [
      { q: "Our stops are really spread out. Can the software handle that?", a: "That's exactly what it's built for. The larger and more scattered your service area, the more optimized routing saves you." },
      { q: "Will it lower our fuel costs?", a: "For long routes, yes, meaningfully. Cutting unnecessary distance is the fastest way to reduce fuel spend, and that's what optimization does." },
      { q: "Can we track drivers across the whole city?", a: "Yes. Every driver appears on one live map with a real-time ETA for each customer." },
    ],
    cta: { title: "Cover Davao with fewer wasted kilometers.", body: "See what optimized routing does over a full day of long Davao routes." },
  },

  "clark-pampanga": {
    eyebrow: "Fleet management · Clark · Pampanga",
    h1: "Fleet management software for ", h1accent: "Clark & Pampanga.",
    hero: "Clark is Central Luzon's logistics engine: freeport warehouses, distribution centers, and fleets feeding NLEX and SCTEX out to the region. Locate2u gives you full oversight of that fleet, from route planning and live tracking to proof of delivery and performance analytics, in one platform. Built for Clark and Pampanga distribution operations.",
    heroStats: ["Full fleet oversight", "Up to 37% less planning time", "Proof to billing, one flow"],
    map: { title: "Live fleet", tag: "Live", vehicle: "Van • FGH 3208", fleetLabel: "40 stops · 5 vehicles", stopCount: 40, route: "Clark Pampanga", meta: "On schedule · On time", badge: "Central Luzon · live" },
    problem: {
      eyebrow: "The Clark reality",
      title: "Clark runs on fleets, not group chats.",
      body: [
        "The businesses operating around Clark Freeport and across Pampanga aren't making a handful of drops downtown. They're running distribution: dispatching multiple vehicles from a warehouse, feeding regional routes up and down the expressways, and juggling last-mile deliveries across Angeles City and Central Luzon. At that scale, coordinating on Viber and spreadsheets isn't just messy, it's expensive.",
        "Locate2u replaces the guesswork with a single view of the whole fleet. You see where every vehicle is, how efficiently it's running, and whether every delivery landed, without calling drivers one by one.",
      ],
    },
    benefits: {
      eyebrow: "What you get", title: "Control over a fleet on the move.",
      items: [
        { stat: "Full", label: "Fleet oversight", desc: "One dashboard for every vehicle, with performance analytics on fuel, speed, idle time, and delivery KPIs, so you can manage the fleet, not just watch it." },
        { stat: "Up to 37%", label: "Less planning + drive time", desc: "Plan and sequence multi-vehicle routes from your Clark distribution point across Pampanga and beyond." },
        { stat: "Live", label: "Regional tracking", desc: "Follow vehicles from the freeport out along NLEX and SCTEX in real time, with ETAs for every stop." },
        { stat: "1 flow", label: "Proof to billing", desc: "Capture proof of delivery in the app, then trigger invoicing and driver pay runs from the same platform." },
      ],
    },
    steps: {
      eyebrow: "How it works", title: "From the depot to the day's books.",
      items: [
        { t: "Plan from the depot", d: "Import orders and build multi-vehicle routes from your Clark or Pampanga warehouse." },
        { t: "Dispatch", d: "Drivers receive their routes in the app; customers get live ETAs." },
        { t: "Track and manage", d: "Monitor the whole fleet live and review performance analytics as the day runs." },
        { t: "Close and bill", d: "Capture proof of delivery, then invoice and run driver pay." },
      ],
    },
    madeFor: {
      eyebrow: "Made for Central Luzon", title: "Built for Central Luzon distribution.",
      body: "Third-party logistics providers and fulfillment operations based at Clark, distributors supplying retailers across Pampanga and Central Luzon, manufacturers running their own delivery fleets, and e-commerce warehouses shipping to the region all need the same thing: control over a fleet that's moving across a wide area every day. Fleet management is what turns that from a daily scramble into a system.",
    },
    faqs: [
      { q: "We run distribution, not just last-mile drops. Does this fit?", a: "Yes. Locate2u handles multi-vehicle dispatch from a warehouse, regional routes, and last-mile delivery in one platform, with fleet analytics on top." },
      { q: "Can we see how efficiently each vehicle is running?", a: "Yes. Performance analytics cover fuel, speed, idle time, and delivery KPIs per vehicle and per driver." },
      { q: "Does it connect to our warehouse or e-commerce systems?", a: "Locate2u integrates with common platforms and systems through its API and connectors, so orders can flow in automatically. Confirm the specific integrations your operation needs." },
    ],
    cta: { title: "Take control of your Clark and Pampanga fleet.", body: "See how Locate2u manages a full day of Central Luzon distribution." },
  },

  "metro-manila": {
    eyebrow: "Delivery management · Metro Manila",
    h1: "Delivery management software for ", h1accent: "Metro Manila fleets.",
    hero: "Run every delivery across the metro from one platform, not a dozen Viber threads. Locate2u plans optimized routes, tracks your drivers live from Caloocan to Alabang, and captures proof of delivery on every drop. Built for Metro Manila businesses moving 10 to 500 stops a day.",
    heroStats: ["Up to 37% faster planning", "Live from Caloocan to Alabang", "Proof on every drop"],
    map: { vehicle: "Van • NMZ 7250", fleetLabel: "48 stops · 8 drivers", stopCount: 48, route: "Makati → Mandaluyong → QC", meta: "On schedule · updated 2s ago", badge: "Metro Manila · live" },
    problem: {
      eyebrow: "The Metro Manila problem",
      title: "Stop dispatching Metro Manila deliveries on Viber.",
      body: [
        "Most delivery teams in the metro still run on a Viber group, a shared spreadsheet, and a lot of phone calls. It works until it doesn't. A driver misses a message in a 200-reply thread, a customer calls asking where their order is and nobody can answer, and half the afternoon is spent re-sequencing stops by hand because EDSA is at a standstill again.",
        "Locate2u replaces that patchwork with one system. Your dispatcher builds the day's routes in minutes, drivers get their stops on a phone app, customers get a live tracking link, and every delivery is logged with a photo and signature. Nothing gets lost in a chat.",
      ],
    },
    benefits: {
      eyebrow: "What you get", title: "The whole operation on one platform.",
      items: [
        { stat: "Up to 37%", label: "Faster planning + driving", desc: "Plan the shortest realistic route across the metro, sequence stops around time windows, and re-route on the fly when a road closes or a rush order comes in." },
        { stat: "Live", label: "One-map visibility", desc: "Watch every vehicle move from Quezon City to Makati to Parañaque in real time. When a client asks for an ETA, you already have it." },
        { stat: "Near zero", label: "Delivery disputes", desc: "Photo, e-signature, and timestamp captured in the driver app. When a customer claims “hindi dumating,” you have the receipt." },
        { stat: "20–40%", label: "Lower fuel costs", desc: "Tighter routes mean 15 to 25% more stops per driver and 20 to 40% lower fuel costs across the fleet." },
      ],
    },
    steps: {
      eyebrow: "How it works", title: "From orders in to drivers paid.",
      items: [
        { t: "Import your stops", d: "Upload the day's deliveries or push them in from Shopify, WooCommerce, or your own system." },
        { t: "Optimize the routes", d: "Locate2u sequences every stop across the metro in seconds, balanced across your drivers." },
        { t: "Dispatch to the app", d: "Drivers get turn-by-turn stops, customers get an automated tracking link and ETA." },
        { t: "Close the loop", d: "Capture proof on delivery, then trigger invoicing and driver pay from the same platform." },
      ],
    },
    madeFor: {
      eyebrow: "Made for Metro Manila", title: "Built for the way Metro Manila businesses deliver.",
      body: "Whether you run food deliveries out of a Quezon City commissary, distribute pharmacy orders across the metro, deliver furniture to condos in BGC and Ortigas, or coordinate field-service crews from a Pasig depot, the daily problem is the same: too many stops, too much traffic, and no single view of what's happening. Locate2u gives your operation that single view.",
    },
    faqs: [
      { q: "Is Locate2u different from Grab or Lalamove?", a: "Yes. Grab and Lalamove move individual parcels through their own riders. Locate2u is the platform you use to run your own fleet and drivers end to end, with your branding on the tracking link and full control of the routes." },
      { q: "We only have a few drivers. Is this overkill?", a: "No. The platform works the same whether you run 5 deliveries a day or 5,000. Teams of 10 to 30 drivers are exactly who feel the biggest jump when they move off Viber and spreadsheets." },
      { q: "How long until we're running?", a: "Most teams are up and dispatching within days, not months. You import your stops, add your drivers, and go." },
    ],
    cta: { title: "Ready to run the metro from one platform?", body: "See how Locate2u handles a full day of Metro Manila deliveries." },
  },
};