// solution-page.jsx: reusable "Solutions › By industry" landing page.
// Renders a full industry page (hero, live-ETA, proof-of-delivery, payoff stats,
// how-it-works, FAQ, CTA) from a content object keyed by slug. Design mirrors the
// furniture-delivery template. Used by furniture-delivery.html, water-lpg-delivery.html,
// pharmacy-delivery.html, florist-delivery.html, fb-distribution.html and
// field-service-scheduling.html.

const SP_LIGHT = "#6EC1F7";
const SP_NAVY = "#0A1524";
// Per-page hero map: background image + route/markers traced from the *_mapdone guides (296x168 space).
const SP_MAPS = {
  "furniture-delivery": { file: "furniture-hero_map.png", start: [53, 98], stops: [[184, 111]], pin: [233, 75], route: "53,98 61,99 65,105 77,114 91,111 106,111 162,130 184,111 220,71 233,75" },
  "water-lpg-delivery": { file: "waterlpg-hero_map.png", start: [94, 135], stops: [[172, 115]], pin: [241, 55], route: "94,135 155,116 172,115 200,94 225,51 241,55" },
  "pharmacy-delivery": { file: "pharmacy-hero_map.png", start: [111, 116], stops: [[156, 44]], pin: [244, 124], route: "111,116 92,108 77,101 76,96 79,82 99,48 110,38 124,33 139,33 148,34 170,58 220,127 234,135 244,124" },
  "florist-delivery": { file: "florist-hero_map.png", start: [99, 95], stops: [[157, 69]], pin: [263, 92], route: "99,95 92,96 91,75 80,49 80,44 85,43 113,49 147,61 157,69 164,82 175,92 180,93 204,77 218,74 252,85 251,91 263,92" },
  "fb-distribution": { file: "fbdistribution-hero_map.png", start: [70, 112], stops: [[136, 66]], pin: [248, 73], route: "70,112 89,106 102,99 107,80 116,68 123,64 136,66 157,96 184,86 211,62 225,57 248,73" },
  "field-service-scheduling": { file: "fieldservice-hero_map.png", start: [65, 112], stops: [[140, 132]], pin: [235, 62], route: "65,112 85,112 127,126 140,132 158,124 186,116 197,107 226,73 235,62" },
};
const spDot = (c, s = 9) => ({ width: s, height: s, borderRadius: "50%", background: c });

// ── Item glyphs for the hero tracking card ────────────────────────────────
function SolIcon({ name, size = 20, color }) {
  const T = window.l2uTokens;
  const P = {
    sofa: (<g><path d="M20 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3" /><path d="M2 11v5a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v2H6v-2a2 2 0 0 0-4 0Z" /><path d="M4 18v2" /><path d="M20 18v2" /></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" />),
    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>),
    flower: (<g><circle cx="12" cy="12" r="2.5" /><path d="M12 9.5a2.5 2.5 0 1 0-2.5 2.5 2.5 2.5 0 1 0 2.5 2.5 2.5 2.5 0 1 0 2.5-2.5A2.5 2.5 0 1 0 12 9.5" /><path d="M12 22v-7" /><path d="m9 20 3-3 3 3" /></g>),
    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>),
    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" />),
  };
  return (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color || T.primary} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{P[name] || P.sofa}</svg>);
}

function PhotoTile({ caption, img }) {
  const T = window.l2uTokens;
  return (
    <div style={{ position: "relative", height: 104, borderRadius: 12, overflow: "hidden", background: "rgb(240,242,246)" }}>
      {img && <img src={img} alt={caption} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />}
      <span style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "18px 12px 9px", background: "linear-gradient(to top, rgba(2,14,28,0.78), rgba(2,14,28,0))", color: "#fff", fontFamily: T.fontMono, fontSize: 10.5, fontWeight: 500 }}>{caption}</span>
    </div>
  );
}

// ── Hero: phone tracking card + floating proof card ───────────────────────
function SolHeroVisual({ d, slug }) {
  const T = window.l2uTokens;
  const mono = T.fontMono;
  const m = SP_MAPS[slug] || SP_MAPS["furniture-delivery"];
  const podPrefix = m.file.replace("-hero_map.png", "");
  const h = d.hero;
  return (
    <div style={{ position: "relative", display: "flex", justifyContent: "center", padding: "8px 0 36px" }}>
      <div style={{ width: 264, background: T.navy, borderRadius: 36, padding: 9, boxShadow: "0 30px 70px rgba(1,16,31,0.34)" }}>
        <div style={{ background: "#fff", borderRadius: 28, overflow: "hidden" }}>
          <div style={{ height: 34, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 20px" }}>
            <span style={{ fontFamily: mono, fontSize: 11, color: T.bluishGrey, fontWeight: 500 }}>{h.time || "2:24"}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: mono, fontSize: 9.5, letterSpacing: "1px", color: T.success }}><window.L2U_Dot color={T.success} size={6} pulse /> LIVE</span>
          </div>
          <div style={{ padding: "4px 18px 20px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
              <img src="assets/logo-classic.png" alt="Locate2u" style={{ height: 15, width: "auto", display: "block" }} />
              <span style={{ fontSize: 13, color: T.mute, fontWeight: 400 }}>· Track delivery</span>
            </div>
            <div style={{ display: "flex", gap: 10, alignItems: "center", marginTop: 14 }}>
              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, borderRadius: 10, background: "rgba(43,147,255,0.10)", flexShrink: 0 }}><SolIcon name={h.icon} /></span>
              <div style={{ minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 700, color: T.bluishGrey, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{h.item}</div><div style={{ fontFamily: mono, fontSize: 10, color: T.mute }}>Order #{h.orderId}</div></div>
            </div>
            <div style={{ marginTop: 16 }}>
              <div style={{ fontFamily: mono, fontSize: 9.5, letterSpacing: "1.2px", color: T.mute, textTransform: "uppercase" }}>Arriving</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 3, flexWrap: "wrap" }}>
                <span style={{ fontWeight: 900, fontSize: 24, color: T.bluishGrey, letterSpacing: "-0.8px" }}>{h.arriving}</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 5, background: "rgba(45,210,122,0.14)", color: "#177245", fontSize: 10.5, fontWeight: 600, padding: "3px 8px", borderRadius: 999 }}><span style={spDot(T.success, 5)} />On time</span>
              </div>
            </div>
            <div style={{ marginTop: 14, borderRadius: 14, background: SP_NAVY, position: "relative", overflow: "hidden" }}>
              <img src={"assets/" + m.file} alt="" aria-hidden="true" style={{ display: "block", width: "100%", height: "auto" }} />
              <svg viewBox="0 0 296 168" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }} aria-hidden="true">
                <polyline points={m.route} fill="none" stroke={SP_NAVY} strokeWidth="10" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.1s cubic-bezier(0.2,0.8,0.2,1) 0.55s both" }} />
                <polyline points={m.route} fill="none" stroke={T.primary} strokeWidth="6.5" strokeLinejoin="round" strokeLinecap="round" pathLength="100" style={{ strokeDasharray: 100, animation: "l2uDrawN 1.1s cubic-bezier(0.2,0.8,0.2,1) 0.55s both" }} />
                <polyline points={m.route} fill="none" stroke="#BFE0FF" strokeWidth="6.5" strokeLinecap="round" strokeLinejoin="round" pathLength="100" style={{ strokeDasharray: "3 97", opacity: 0, animation: "l2uFadeIn 0.4s ease 1.8s forwards, l2uFlowN 2.4s linear 1.8s infinite" }} />
              </svg>
              <span style={{ position: "absolute", left: (m.start[0] / 296 * 100) + "%", top: (m.start[1] / 168 * 100) + "%", width: 30, height: 30, transform: "translate(-50%,-50%)", pointerEvents: "none", animation: "l2uPopS 0.45s cubic-bezier(0.2,0.9,0.3,1.2) 0.15s both" }}>
                <span style={{ position: "absolute", left: "50%", top: "50%", width: 28, height: 28, marginLeft: -14, marginTop: -14, 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: 17, height: 17, marginLeft: -8.5, marginTop: -8.5, borderRadius: "50%", background: "#fff", boxShadow: "0 2px 5px rgba(0,0,0,0.4)" }} />
                <span style={{ position: "absolute", left: "50%", top: "50%", width: 9, height: 9, marginLeft: -4.5, marginTop: -4.5, borderRadius: "50%", background: T.primary }} />
              </span>
              {m.stops.map((s, i) => (
                <img key={i} src="assets/stop.png" alt="" aria-hidden="true" style={{ position: "absolute", left: (s[0] / 296 * 100) + "%", top: (s[1] / 168 * 100) + "%", width: 16, height: 16, transform: "translate(-50%,-50%)", transformOrigin: "center", animation: "l2uPopS 0.4s cubic-bezier(0.2,0.9,0.3,1.2) " + (0.28 + i * 0.12) + "s both", pointerEvents: "none" }} />
              ))}
              <svg viewBox="0 0 60 71" fill="none" style={{ position: "absolute", left: (m.pin[0] / 296 * 100) + "%", top: (m.pin[1] / 168 * 100) + "%", width: 34, 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>
            <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 13 }}>
              <span style={{ display: "flex" }}>{h.crew.map((c, i) => (<span key={i} style={{ width: 26, height: 26, borderRadius: "50%", background: c.c, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 9.5, fontWeight: 700, border: "2px solid #fff", marginLeft: i ? -8 : 0 }}>{c.i}</span>))}</span>
              <span style={{ fontSize: 12, color: T.bluishGrey }}>{h.crewLabel}</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{ position: "absolute", left: 0, bottom: 2, width: 210, background: "#fff", borderRadius: 14, padding: "13px 14px", boxShadow: "0 14px 34px rgba(1,16,31,0.3)", border: "1px solid rgb(238,240,244)" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: mono, fontSize: 9.5, letterSpacing: "1px", color: T.success, fontWeight: 500 }}><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={T.success} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>DELIVERED · {h.deliveredAt || "2:38 PM"}</div>
        <div style={{ display: "flex", gap: 7, marginTop: 9 }}>
          {[0, 1].map((i) => (<div key={i} style={{ position: "relative", flex: 1, height: 52, borderRadius: 8, overflow: "hidden", background: "rgb(240,242,246)" }}><img src={"assets/" + podPrefix + "-heroPOD-1" + (i === 0 ? "a" : "b") + ".png?v=2"} alt={d.proof.photoCaptions[i]} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} /><span style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "12px 6px 4px", background: "linear-gradient(to top, rgba(2,14,28,0.75), rgba(2,14,28,0))", color: "#fff", fontFamily: mono, fontSize: 7.5, fontWeight: 500, lineHeight: 1.1 }}>{d.proof.photoCaptions[i]}</span></div>))}
        </div>
        <div style={{ marginTop: 10, fontSize: 12, color: T.bluishGrey, fontWeight: 600 }}>Signed · {h.signer}</div>
        <div style={{ fontFamily: mono, fontSize: 10, color: T.mute, marginTop: 2 }}>2 photos · GPS verified</div>
      </div>
    </div>
  );
}

function SolutionPage({ slug }) {
  const T = window.l2uTokens;
  const d = SP_PAGES[slug] || SP_PAGES["furniture-delivery"];
  const podPrefix = (SP_MAPS[slug] || SP_MAPS["furniture-delivery"]).file.replace("-hero_map.png", "");
  // Signature display height. Pages whose uploaded signature is low-resolution
  // (short intrinsic height) get a smaller cap so they aren't upscaled ~2x on
  // retina (which reads as pixelated) and don't render oversized. The reference
  // pages (waterlpg/fbdistribution/fieldservice) have taller source images and
  // stay at 66. Furniture's signature is very wide/flat, so it caps a touch lower.
  const signMaxH = { "furniture-delivery": 44, "pharmacy-delivery": 50, "florist-delivery": 50 }[slug] || 66;
  const [openFaq, setOpenFaq] = React.useState(0);
  const goPricing = () => { window.location.href = "pricing.html"; };
  const stateColor = { done: T.primary, active: T.success, pending: "#fff" };

  return (
    <React.Fragment>
      {/* HERO */}
      <window.L2U_Section background={T.cream} padding="60px 80px 84px">
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 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: 50, lineHeight: "55px", 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>
            <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" onClick={goPricing}>See pricing in pesos</window.L2U_Btn>
            </div>
            <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={{ minWidth: 0 }}><SolHeroVisual d={d} slug={slug} /></div>
        </div>
      </window.L2U_Section>

      {/* LIVE ETA */}
      <window.L2U_Section background={T.cream} padding="84px 80px" style={{ borderTop: "1px solid " + T.border }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <window.L2U_Eyebrow>{d.eta.eyebrow}</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px 0 22px", fontWeight: 900, fontSize: 38, lineHeight: "45px", letterSpacing: "-1.1px", color: T.bluishGrey }}>{d.eta.title}</h2>
            {d.eta.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: "28px 30px" }}>
            <div style={{ fontFamily: T.fontMono, fontSize: 10.5, letterSpacing: "1.3px", color: T.mute2, textTransform: "uppercase", marginBottom: 20 }}>Delivery updates · #{d.hero.orderId}</div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {d.eta.steps.map((s, i) => {
                const last = i === d.eta.steps.length - 1;
                const c = stateColor[s.state];
                return (
                  <div key={i} style={{ display: "flex", gap: 14 }}>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                      <span style={{ width: 14, height: 14, borderRadius: "50%", background: c, border: s.state === "pending" ? "2px solid rgb(210,216,226)" : "none", boxShadow: s.state === "active" ? "0 0 0 4px rgba(45,210,122,0.18)" : "none" }} />
                      {!last && <span style={{ width: 2, flex: 1, background: T.border, margin: "2px 0" }} />}
                    </div>
                    <div style={{ paddingBottom: last ? 0 : 18 }}>
                      <div style={{ fontSize: 14.5, fontWeight: 600, color: s.state === "pending" ? "rgb(154,166,186)" : T.bluishGrey }}>{s.title}</div>
                      <div style={{ fontFamily: T.fontMono, fontSize: 11.5, color: s.state === "active" ? T.success : s.state === "pending" ? "rgb(154,166,186)" : T.mute }}>{s.sub}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </window.L2U_Section>

      {/* PROOF (reversed) */}
      <window.L2U_Section background={T.cream} padding="84px 80px" style={{ borderTop: "1px solid " + T.border }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.92fr 1.08fr", gap: 56, alignItems: "center" }}>
          <div style={{ background: "#fff", border: "1px solid " + T.border, borderRadius: 22, padding: 24 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
              <div style={{ fontFamily: T.fontMono, fontSize: 10.5, letterSpacing: "1.3px", color: T.success, textTransform: "uppercase" }}>Proof of delivery</div>
              <div style={{ fontFamily: T.fontMono, fontSize: 11, color: T.mute }}>#{d.hero.orderId}</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              <PhotoTile caption={d.proof.photoCaptions[0]} img={"assets/" + podPrefix + "-heroPOD-2a.png?v=2"} />
              <PhotoTile caption={d.proof.photoCaptions[1]} img={"assets/" + podPrefix + "-heroPOD-2b.png?v=2"} />
            </div>
            <div style={{ marginTop: 14, background: T.cream2, borderRadius: 12, padding: "14px 16px" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}><span style={{ fontSize: 13, color: T.mute }}>Signed by</span><span style={{ fontSize: 14, color: T.bluishGrey, fontWeight: 600 }}>{d.hero.signer}</span></div>
              <img src={"assets/" + podPrefix + "-herosign.png?v=4"} alt="Signature" style={{ display: "block", maxHeight: signMaxH, maxWidth: "100%", width: "auto", height: "auto", marginTop: 10 }} />
            </div>
            <div style={{ display: "flex", gap: 16, marginTop: 14, fontFamily: T.fontMono, fontSize: 11, color: T.mute }}><span>{d.hero.deliveredAt || "2:38 PM"}</span><span>·</span><span>GPS verified</span><span>·</span><span>{d.hero.location}</span></div>
          </div>
          <div>
            <window.L2U_Eyebrow>{d.proof.eyebrow}</window.L2U_Eyebrow>
            <h2 style={{ margin: "16px 0 22px", fontWeight: 900, fontSize: 38, lineHeight: "45px", letterSpacing: "-1.1px", color: T.bluishGrey }}>{d.proof.title}</h2>
            {d.proof.paras.map((p, i) => (<p key={i} style={{ margin: "0 0 18px", fontSize: 16.5, lineHeight: "27px", color: T.body }}>{p}</p>))}
          </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} body={d.payoff.body} 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: 44, 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>

      {/* 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_SolutionPage = SolutionPage;

// ── Content for every industry page ───────────────────────────────────────
// NOTE: furniture-delivery uses the finished template copy. The other five carry
// adapted placeholder copy pending the client's final content per page.
const SP_PAGES = {
  "furniture-delivery": {
    eyebrow: "Furniture delivery",
    title: "Furniture delivery software for ", accent: "Philippine retailers and movers.",
    body: "Deliver sofas, beds, and cabinets on time, in one piece, with proof for every drop. Locate2u plans your two-person delivery runs, gives customers a live ETA so they stop calling to ask “nasaan na?”, and captures a photo and signature the moment the item is inside the door.",
    builtFor: "Built for scheduled, two-person, high-value furniture runs",
    hero: { icon: "sofa", item: "3-seat sofa + bed frame", orderId: "FS-2048", arriving: "1:00–3:00", stopsAway: 2, crew: [{ i: "MR", c: "#2B93FF" }, { i: "JU", c: "#177245" }], crewLabel: "Marco & Jun · 2-person crew", signer: "R. Santos", location: "Makati", deliveredAt: "2:38 PM" },
    eta: {
      eyebrow: "Live ETA windows",
      title: "Your customer arranged their whole day around this delivery.",
      paras: [
        "A furniture delivery is tied to a window the customer planned their day around, so “sometime today” doesn't cut it. Locate2u sequences routes around your booked time slots, so a QC-to-BGC run and a Quezon City run don't collide, and your crew arrives inside the slot.",
        "Customers watch the truck approach on a live link and get an SMS before arrival, so your line stops ringing with “nasaan na?” all afternoon.",
      ],
      steps: [
        { title: "Order scheduled", sub: "Booked · window 1–3 PM", state: "done" },
        { title: "Out for delivery", sub: "12:40 PM", state: "done" },
        { title: "Crew 2 stops away", sub: "2:05 PM · arriving 1:00–3:00", state: "active" },
        { title: "Delivered + proof", sub: "pending", state: "pending" },
      ],
    },
    proof: {
      eyebrow: "Proof on every drop",
      title: "A scratch on a dresser shouldn't cost you the sale.",
      paras: [
        "When a scratch shows up on a dresser and there's no photo, no signature, no timestamp, it's your word against theirs, and one disputed delivery can wipe the margin on the sale.",
        "Locate2u closes every item with a timestamped photo of the placed piece and a customer signature, synced back to you instantly. When a claim comes a week later, you have the record.",
      ],
      photoCaptions: ["Picked up", "Delivered"],
    },
    payoff: {
      eyebrow: "The payoff", title: "Fewer failed deliveries, near-zero damage disputes.",
      body: "Furniture and bulky-goods retailers use Locate2u to protect margin on high-value drops. Amart Furniture runs deliveries on the platform, and Franz Building Supplies saw disputes drop to near zero once photo-and-signature proof became standard on every job.",
      stats: [
        { big: "37% faster", label: "Route planning", desc: "Businesses on the platform commonly plan routes up to 37% faster, fitting more scheduled drops into the day without adding a truck." },
        { big: "Near zero", label: "Damage disputes", desc: "Franz Building Supplies saw disputes drop to near zero once photo-and-signature proof was standard on every job." },
        { big: "In the slot", label: "Delivery windows kept", desc: "Routes are sequenced around booked windows, so crews arrive inside the slot, not “sometime today.”" },
        { big: "1 link", label: "Live ETA for customers", desc: "Customers watch the truck approach and get an SMS before arrival, so standby calls to your office stop." },
      ],
    },
    how: {
      title: "From booking to proof in four steps.",
      steps: [
        { title: "Import your bookings", desc: "Pull orders in from your system or upload the day's deliveries." },
        { title: "Optimize the route", desc: "Locate2u builds the fastest sequence around your delivery windows and vehicle types." },
        { title: "Dispatch to the driver app", desc: "Your crew gets the run, turn-by-turn navigation, and customer notes on their phone." },
        { title: "Capture proof, close the job", desc: "Photo, signature, and delivery time recorded and synced back to you instantly." },
      ],
    },
    faqs: [
      { q: "Can I set specific delivery windows, like 1pm to 3pm?", a: "Yes. Locate2u plans and sequences routes around the windows you commit to customers, so your crew arrives inside the slot instead of “sometime today.”" },
      { q: "We deliver items that need two people. Can the system handle that?", a: "Yes. You assign runs by vehicle type and crew, so heavy two-person jobs are planned realistically instead of stacked on top of quick drops." },
      { q: "A customer says the item arrived damaged. How does proof of delivery help?", a: "Every delivery is closed with a timestamped photo and a customer signature or feedback. If a dispute comes up later, you have documented proof of the item's condition at handover." },
      { q: "Do I need to install anything for customers?", a: "No. Customers just tap a tracking link. Only your drivers use the driver app (iOS and Android)." },
    ],
    cta: { eyebrow: "Get started", title: "Deliver furniture on time, in one piece, with proof.", body: "Pricing scales with your fleet, whether you run 5 deliveries a day or 500. Book a demo and we'll map Locate2u to your delivery volume." },
  },

  "water-lpg-delivery": {
    eyebrow: "Water & LPG delivery",
    title: "Water and LPG delivery software for ", accent: "PH refilling stations and dealers.",
    body: "Run your water refilling or LPG delivery business on dense, repeatable routes instead of a Viber thread. Locate2u sequences your daily drops, tracks every driver in real time, and logs proof plus cash collected on each stop.",
    builtFor: "Built for high-frequency, high-density, cash-heavy routes",
    hero: { icon: "water", item: "Water 5-gal ×12 + LPG", orderId: "WL-3391", arriving: "9:30–10:15", stopsAway: 3, crew: [{ i: "RE", c: "#2B93FF" }, { i: "AL", c: "#177245" }], crewLabel: "Rey & Allan · route 4", signer: "M. Cruz", location: "Caloocan", deliveredAt: "9:52 AM" },
    eta: {
      eyebrow: "Live fleet visibility",
      title: "Every truck visible, every suki given a real ETA.",
      paras: [
        "On manual tools your dispatcher guesses the order of stops, and a driver takes the long way through EDSA because nobody replanned the run. When a suki calls asking where their delivery is, all you can say is “malapit na po.”",
        "Locate2u puts the whole fleet on a live map. Watch every truck move, reassign a stop when a walk-in order comes in, and give sukis an accurate ETA, so your line stops ringing and drivers stop backtracking.",
      ],
      steps: [
        { title: "Route loaded", sub: "62 stops · barangay run", state: "done" },
        { title: "Out for delivery", sub: "7:10 AM", state: "done" },
        { title: "Driver 3 stops away", sub: "9:20 AM · arriving 9:30–10:15", state: "active" },
        { title: "Delivered + cash logged", sub: "pending", state: "pending" },
      ],
    },
    proof: {
      eyebrow: "Proof & collections",
      title: "Reconcile from a record, not a shoebox of receipts.",
      paras: [
        "Much of this business is cash on delivery, and at night it gets reconciled from memory. Every gap is margin leaking out of a low-margin, high-volume operation.",
        "With Locate2u each stop carries the amount to collect, and proof of delivery records the drop, so collection data and a timestamped record sync back the moment each drop is done. You get a clean daily reconciliation, and a record of who received each tank and when.",
      ],
      photoCaptions: ["Picked up", "Delivered"],
    },
    payoff: {
      eyebrow: "The payoff", title: "More deliveries per driver, less fuel per drop.",
      body: "For a water station or LPG dealer, a tighter route is the difference between finishing by 3pm and chasing the last ten drops into the evening.",
      stats: [
        { big: "20–40%", label: "Lower fuel cost", desc: "Denser, road-aware routes cut kilometers, real savings across a fleet running daily." },
        { big: "15–25%", label: "More drops per driver", desc: "Operators fit more tanks and bottles into the same shift after moving off manual routing." },
        { big: "37% faster", label: "Route planning", desc: "Your dispatcher spends the morning delivering, not plotting stops by hand." },
        { big: "1 record", label: "Cash reconciled clean", desc: "Collections and proof sync back per stop, so nightly reconciliation isn't from memory." },
      ],
    },
    how: {
      title: "From standing orders to reconciled, in four steps.",
      steps: [
        { title: "Load today's stops", desc: "Standing customers plus new orders, imported or added by your dispatcher." },
        { title: "Optimize", desc: "Locate2u builds the tightest route for each driver's area and vehicle." },
        { title: "Drive and deliver", desc: "The driver app gives navigation, the stop list, and the collection amount per customer." },
        { title: "Reconcile fast", desc: "Proof of delivery and collection data sync back the moment each drop is done." },
      ],
    },
    faqs: [
      { q: "We do a lot of cash on delivery. Can the system track collections?", a: "Yes. Each stop carries the amount to collect, and proof of delivery captures the completed drop, giving you a clean daily reconciliation instead of manual tallying." },
      { q: "Our routes are basically the same every day. Does that make it easier?", a: "It does. Recurring customers and standing orders become repeatable routes you plan once and reuse, with room to slot in new orders each morning." },
      { q: "Can it really handle 60 to 80 stops on one driver?", a: "Yes. Locate2u optimizes routes from a handful of stops to 500-plus per driver, sequencing dense barangay runs for minimum drive time." },
      { q: "What about safety records for LPG?", a: "Every delivery is timestamped and documented through proof of delivery, giving you a record of who received each tank and when." },
    ],
    cta: { eyebrow: "Get started", title: "Run refill routes on a system, not a Viber thread.", body: "Whether you run one truck or a fleet across Metro Manila, pricing scales with your operation. Book a demo and we'll size it to your route volume." },
  },

  "pharmacy-delivery": {
    eyebrow: "Pharmacy delivery",
    title: "Pharmacy delivery software for ", accent: "PH pharmacies and healthcare providers.",
    body: "Get medicines to patients quickly, safely, and with a signature on record. Locate2u routes your urgent deliveries, tracks every order live so patients aren't left waiting, and captures compliant proof at the door.",
    builtFor: "Built for urgent, compliance-heavy medicine delivery",
    hero: { icon: "pill", item: "Rx order · 3 items", orderId: "PH-7742", arriving: "1:00–1:30", stopsAway: 2, crew: [{ i: "JO", c: "#2B93FF" }], crewLabel: "Joan · rider", signer: "L. Reyes", location: "Quezon City", deliveredAt: "1:12 PM" },
    eta: {
      eyebrow: "Live tracking",
      title: "Medicine delivery has no room for “malapit na.”",
      paras: [
        "When you deliver medicine the stakes are different: a patient is waiting on maintenance meds, a prescription is urgent, some items are temperature-sensitive, and you need a record of who received what, when. Without live tracking, a patient calls the branch worried their delivery is lost.",
        "Locate2u gives patients and staff a shareable link with a live ETA and an SMS before arrival, so patients wait with confidence and your branch phone stops ringing.",
      ],
      steps: [
        { title: "Order dispatched", sub: "12:20 PM · urgent priority", state: "done" },
        { title: "Out for delivery", sub: "12:35 PM", state: "done" },
        { title: "Rider 2 stops away", sub: "12:55 PM · arriving 1:00–1:30", state: "active" },
        { title: "Delivered + proof", sub: "pending", state: "pending" },
      ],
    },
    proof: {
      eyebrow: "Compliant proof",
      title: "In healthcare, the record isn't a nice-to-have.",
      paras: [
        "Without proper proof of delivery you have no clean record that the right medicine reached the right person, and in healthcare that record matters.",
        "Locate2u captures a signature from the recipient, a photo, and a timestamp on every delivery, so you have a documented record of who received each medicine and when, for your compliance files.",
      ],
      photoCaptions: ["Order packed", "Delivered"],
    },
    payoff: {
      eyebrow: "The payoff", title: "More prescriptions reaching patients, within the day.",
      body: "SuperPharmacy uses Locate2u to adjust deliveries on the fly as urgent orders come in through the day, exactly the flexibility a pharmacy operation needs.",
      stats: [
        { big: "37% faster", label: "Route planning", desc: "Dispatchers plan the day in minutes and get urgent prescriptions moving sooner." },
        { big: "15–25%", label: "More drops per driver", desc: "More prescriptions reach patients within the day, not the next." },
        { big: "On the fly", label: "Re-route for urgent orders", desc: "A new urgent order at 2pm slots in and re-optimizes without rebuilding the whole route." },
        { big: "Signed", label: "Record on every drop", desc: "A signature, photo, and timestamp document who received each medicine and when." },
      ],
    },
    how: {
      title: "From order to compliant proof, in four steps.",
      steps: [
        { title: "Import the day's orders", desc: "Routine refills and urgent prescriptions in one view." },
        { title: "Optimize with priority", desc: "Locate2u builds routes that respect urgency and delivery windows." },
        { title: "Dispatch and track", desc: "Drivers get the run; patients get a live tracking link and ETA." },
        { title: "Capture compliant proof", desc: "Signature, photo, and time recorded for every medicine delivered." },
      ],
    },
    faqs: [
      { q: "Can I prioritize urgent prescriptions over routine deliveries?", a: "Yes. Routes are optimized around urgency and delivery windows, and you can insert a new urgent order and re-optimize without starting over." },
      { q: "How do patients know when their medicine is arriving?", a: "They receive a live tracking link with an accurate ETA and an SMS before arrival, so no one is left calling the branch to check." },
      { q: "We need a record for compliance. What does proof of delivery capture?", a: "A signature from the recipient, a photo, and a timestamp for every delivery, giving you a documented record of who received each medicine and when." },
      { q: "Can it handle deliveries across multiple branches?", a: "Yes. You can dispatch and track deliveries across your locations from one centralized dashboard." },
    ],
    cta: { eyebrow: "Get started", title: "Deliver medicine fast, and prove it every time.", body: "Pricing scales from a single branch to a multi-location pharmacy network. Book a demo and we'll tailor it to your delivery volume." },
  },

  "florist-delivery": {
    eyebrow: "Florist delivery",
    title: "Florist delivery software for ", accent: "Philippine flower shops.",
    body: "Deliver flowers fresh, on time, and to the right doorstep, even when Valentine's and Mother's Day triple your orders. Locate2u plans your same-day runs around exact delivery windows, tracks every bouquet live, and sends photo proof the moment it's handed over.",
    builtFor: "Built for time-critical, occasion-driven delivery with a spike-day gear",
    hero: { icon: "flower", item: "Bouquet · 24 roses", orderId: "FL-1180", arriving: "10:00–10:30", stopsAway: 2, crew: [{ i: "AN", c: "#2B93FF" }], crewLabel: "Ana · rider", signer: "Recipient", location: "BGC", deliveredAt: "10:14 AM" },
    eta: {
      eyebrow: "Delivery windows",
      title: "Flowers are a deadline business.",
      paras: [
        "A bouquet is a promise attached to a moment: an anniversary dinner, a birthday, a “sorry na.” Deliver it late and the sale is technically complete but the customer is unhappy forever; deliver it to the wrong condo tower and it's a disaster.",
        "Same-day orders land all morning, each with a preferred time, spread across Makati, BGC, and Ortigas. Locate2u sequences the run by preferred time and location, so the 10am anniversary delivery isn't stuck behind afternoon drops, and gives senders an accurate ETA that cuts the “did it arrive?” messages.",
      ],
      steps: [
        { title: "Order in", sub: "Same-day · preferred 10–11 AM", state: "done" },
        { title: "Out for delivery", sub: "9:30 AM", state: "done" },
        { title: "Rider 2 stops away", sub: "9:55 AM · arriving 10:00–10:30", state: "active" },
        { title: "Delivered + photo proof", sub: "pending", state: "pending" },
      ],
    },
    proof: {
      eyebrow: "Photo proof",
      title: "Prove it arrived, without spoiling the surprise.",
      paras: [
        "The sender wants to know the bouquet arrived, ideally with a photo, without ruining the surprise by calling the recipient.",
        "Locate2u captures a photo and timestamp at handover and syncs it back to you, so you and the sender have proof the surprise landed, and the “did it arrive?” messages flooding your page stop.",
      ],
      photoCaptions: ["Picked up", "Delivered fresh"],
    },
    payoff: {
      eyebrow: "The payoff", title: "Fulfill every order on the days that matter most.",
      body: "On a Valentine's or Mother's Day rush, faster planning is the difference between fulfilling every order and refunding the ones you missed, and your team spends the peak day dispatching, not untangling a spreadsheet at 6am.",
      stats: [
        { big: "37% faster", label: "Route planning", desc: "Replan the whole day in seconds when volume spikes, no 6am spreadsheet untangling." },
        { big: "15–25%", label: "More drops per driver", desc: "Move more bouquets per rider on peak days, so fewer orders get missed." },
        { big: "Peak-ready", label: "Scale drivers, replan fast", desc: "Add riders when Valentine's volume hits and re-optimize the whole day instantly." },
        { big: "Photo", label: "Proof on every handover", desc: "A photo and timestamp show the sender their surprise landed, without a call to the recipient." },
      ],
    },
    how: {
      title: "From order to doorstep, in four steps.",
      steps: [
        { title: "Bring in the day's orders", desc: "Same-day and pre-booked, each with a preferred delivery time." },
        { title: "Optimize by time and area", desc: "Locate2u builds routes that hit the windows across the metro." },
        { title: "Dispatch to riders", desc: "The driver app gives the run, the address, and any card message or note." },
        { title: "Confirm with proof", desc: "Photo and timestamp captured at handover and synced back to you." },
      ],
    },
    faqs: [
      { q: "Can customers pick a specific delivery time?", a: "Yes. Orders carry a preferred window, and Locate2u sequences the route to hit those times across the day." },
      { q: "Valentine's Day is chaos for us. How does this help?", a: "You can scale up drivers and re-optimize the entire day's routes in seconds when volume spikes, instead of manually replanning. More orders get delivered on time on the days that matter most." },
      { q: "Can I prove a delivery arrived without calling the recipient and ruining the surprise?", a: "Yes. A photo and timestamp are captured at handover, so you and the sender have proof the bouquet arrived without spoiling it." },
      { q: "Do I need my own delivery riders?", a: "Locate2u runs your own fleet or riders. It gives you the platform to manage them, rather than replacing them with a third-party courier." },
    ],
    cta: { eyebrow: "Get started", title: "Be ready before your next peak season.", body: "From a single flower shop to a multi-branch florist, pricing scales with your delivery volume. Book a demo before your next Valentine's or Mother's Day rush." },
  },

  "fb-distribution": {
    eyebrow: "F&B distribution",
    title: "F&B distribution software for ", accent: "PH food and beverage suppliers.",
    body: "Get product to every restaurant, café, and store on your list before service starts. Locate2u plans your multi-drop distribution routes, tracks every truck in real time, and turns proof of delivery into invoices automatically.",
    builtFor: "Built for tight-morning, thin-margin multi-drop distribution",
    hero: { icon: "food", item: "Restaurant order · 6 cases", orderId: "FB-5027", arriving: "6:30–7:00", stopsAway: 2, crew: [{ i: "DE", c: "#2B93FF" }, { i: "KA", c: "#177245" }], crewLabel: "Dennis & Karl · route 2", signer: "Store staff", location: "Makati", deliveredAt: "6:41 AM" },
    eta: {
      eyebrow: "Fleet visibility",
      title: "Distribution runs on tight mornings and thin margins.",
      paras: [
        "F&B distribution is a volume game played against the clock: dozens of restaurants and retailers, often before they open, sometimes with temperature-sensitive stock. A dispatcher hand-planning 50 drops can't find the optimal sequence, so trucks waste the early hours in traffic instead of unloading.",
        "Locate2u puts every truck on a live map with full fleet visibility, so early runs stay on schedule and you know immediately if one falls behind, while each stop is sequenced into the tightest possible run.",
      ],
      steps: [
        { title: "Route loaded", sub: "44 accounts · early run", state: "done" },
        { title: "Out for delivery", sub: "5:15 AM", state: "done" },
        { title: "Truck 2 stops away", sub: "6:20 AM · arriving 6:30–7:00", state: "active" },
        { title: "Delivered + invoiced", sub: "pending", state: "pending" },
      ],
    },
    proof: {
      eyebrow: "Proof → invoice",
      title: "Connect the delivery and the invoice.",
      paras: [
        "Deliveries get marked done in a group chat, then someone re-keys them into invoices later, and the mismatches turn into billing disputes and delayed payment. For a business with distribution margins, that lag is expensive.",
        "Locate2u captures signed, timestamped proof at each stop, and proof of delivery triggers billing through Rates & Billing, so a completed drop flows straight into an invoice instead of being re-keyed. Fewer “we never got that” disputes, and the money follows automatically.",
      ],
      photoCaptions: ["Picked up", "Delivered"],
    },
    payoff: {
      eyebrow: "The payoff", title: "Trucks move more, payments arrive sooner.",
      body: "F&B distributors and producers run on Locate2u, including Maleny Food Co., My Foodie Box, and Husk Bakery, which reported around 30% more customers from day one.",
      stats: [
        { big: "~30%", label: "More customers", desc: "Husk Bakery reported around 30% more customers from day one after moving onto Locate2u." },
        { big: "15–25%", label: "More drops per driver", desc: "Fit more accounts into the early window before service starts." },
        { big: "37% faster", label: "Route planning", desc: "Build the tightest multi-drop sequence in minutes, not the early hours." },
        { big: "Auto", label: "Proof-triggered invoicing", desc: "A completed drop flows straight into an invoice, so payments arrive sooner." },
      ],
    },
    how: {
      title: "From orders to invoices, in four steps.",
      steps: [
        { title: "Import orders and accounts", desc: "The day's drops across all your restaurant and retail clients." },
        { title: "Optimize the runs", desc: "Locate2u builds the tightest multi-drop sequence per truck." },
        { title: "Deliver and confirm", desc: "Drivers capture proof at each stop through the driver app." },
        { title: "Invoice automatically", desc: "Proof of delivery triggers billing, so paperwork isn't a separate end-of-day job." },
      ],
    },
    faqs: [
      { q: "We deliver to 40-plus accounts a day. Can it plan that efficiently?", a: "Yes. Locate2u optimizes multi-drop routes from a handful of stops to 500-plus per driver, sequencing them for the tightest possible run." },
      { q: "Can proof of delivery connect to our invoicing?", a: "Yes. Proof of delivery can trigger billing through Rates & Billing, so a completed drop flows into an invoice instead of being re-keyed later." },
      { q: "Do you integrate with our existing systems?", a: "Locate2u offers a REST API and integrations including Shopify, WooCommerce, Zapier, and accounting tools like Xero and QuickBooks, plus major ERPs." },
      { q: "Can we track temperature-sensitive or early-morning runs?", a: "Yes. You get real-time visibility of every truck and its progress, so early runs stay on schedule and you know immediately if one falls behind." },
    ],
    cta: { eyebrow: "Get started", title: "Run distribution that pays you faster.", body: "From a regional supplier to a metro-wide distributor, pricing scales with your fleet and volume. Book a demo and we'll map it to your delivery network." },
  },

  "field-service-scheduling": {
    eyebrow: "Field service scheduling",
    title: "Field service scheduling software for ", accent: "Philippine service businesses.",
    body: "Get the right technician to the right job on time, with proof the work was done. Locate2u schedules your field teams, tracks them live so customers get an accurate arrival window, and captures sign-off on every completed job.",
    builtFor: "Built for appointment-based field service teams",
    hero: { icon: "wrench", item: "Aircon service · Unit A", orderId: "FS-9014", arriving: "2:00–3:00", stopsAway: 2, crew: [{ i: "PA", c: "#2B93FF" }], crewLabel: "Paolo · technician", signer: "B. Tan", location: "Pasig", deliveredAt: "2:41 PM" },
    eta: {
      eyebrow: "Scheduling that scales",
      title: "Scheduling technicians on a group chat doesn't scale.",
      paras: [
        "Field service isn't delivery. You're sending a skilled person to a job with an appointment window, a specific skill requirement, and a customer who took time off to be there. Coordinate that on Viber and a whiteboard and the cracks show fast: a tech sent across the metro when a nearer one was free, or a customer waiting all morning with no idea when help arrives.",
        "Locate2u sends customers an “on my way” notification and a live ETA, so no one waits all morning wondering, and dispatch can assign the nearest available tech and slot in urgent call-outs without rebuilding the schedule.",
      ],
      steps: [
        { title: "Job scheduled", sub: "Aircon repair · window 2–4 PM", state: "done" },
        { title: "Tech on the way", sub: "1:30 PM · on my way", state: "done" },
        { title: "Tech 2 stops away", sub: "1:50 PM · arriving 2:00–3:00", state: "active" },
        { title: "Job complete + proof", sub: "pending", state: "pending" },
      ],
    },
    proof: {
      eyebrow: "Proof of work",
      title: "A completed job with no record becomes a payment argument.",
      paras: [
        "A job finished with no record it happened becomes a payment argument later, and manual scheduling caps how many jobs you can run in a day and how many you can prove you did.",
        "Locate2u closes every visit with a customer signature, photos of the completed work, and a timestamp, protecting you in any dispute and speeding up billing.",
      ],
      photoCaptions: ["On-site service", "Job completed"],
    },
    payoff: {
      eyebrow: "The payoff", title: "More jobs completed per tech, every day.",
      body: "Field service and trades businesses run on Locate2u across HVAC, electrical, cleaning, and more, with less of the day lost to inefficient routing and manual coordination.",
      stats: [
        { big: "37% faster", label: "Route planning", desc: "Plan the day in minutes so techs spend it on jobs, not stuck in EDSA traffic." },
        { big: "15–25%", label: "More jobs per tech", desc: "Fit more completed visits into the same day per team member." },
        { big: "Nearest", label: "Tech assigned to the job", desc: "A live map and drag-and-drop board send the closest available tech and slot in urgent call-outs." },
        { big: "Signed", label: "Proof on every visit", desc: "A signature, photos, and timestamp cut the disputes that slow down payment." },
      ],
    },
    how: {
      title: "From schedule to sign-off, in four steps.",
      steps: [
        { title: "Build the day's schedule", desc: "Jobs with their windows, locations, and skill needs." },
        { title: "Assign and optimize", desc: "Locate2u helps route each technician efficiently across their jobs." },
        { title: "Dispatch to the field", desc: "Technicians get the schedule, navigation, and job notes on the driver app." },
        { title: "Close with proof", desc: "Signature, photos, and completion time captured and synced back instantly." },
      ],
    },
    faqs: [
      { q: "We schedule appointments, not deliveries. Is this the right tool?", a: "Yes. Locate2u handles appointment-based field work, scheduling technicians into time windows and routing them efficiently between jobs, with proof captured at each one." },
      { q: "Can I assign jobs based on which technician is nearest?", a: "Yes. A live map and drag-and-drop dispatch let you assign the nearest available technician and slot in urgent call-outs without rebuilding the schedule." },
      { q: "How do customers know when the technician will arrive?", a: "They get an “on my way” notification and a live ETA, so they aren't stuck waiting all day." },
      { q: "Can technicians prove a job was completed?", a: "Yes. Each visit is closed with a customer signature, photos of the work, and a timestamp, giving you a record for billing and dispute protection." },
    ],
    cta: { eyebrow: "Get started", title: "Get the right tech to every job, with proof.", body: "Whether you run one crew or teams across the metro, pricing scales with your operation. Book a demo and we'll tailor it to your job volume." },
  },
};
