// sections.jsx: Trust strip, Problem, Solution, Verticals

function TrustStrip() {
  const T = window.l2uTokens;
  const badges = [
    "Furniture & Appliances",
    "Water & LPG",
    "Pharmacy",
    "Florists",
    "F&B Distribution",
    "Field Services",
  ];
  return (
    <section style={{
      background: T.cream, padding: "56px 80px 64px",
      borderTop: "1px solid rgba(28,62,97,0.06)",
      fontFamily: T.fontSans,
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", textAlign: "center" }}>
        <div style={{
          fontFamily: T.fontMono, fontSize: 11, letterSpacing: "1.6px",
          color: T.mute2, fontWeight: 500, textTransform: "uppercase",
          marginBottom: 24,
        }}>
          Built for Philippine fleets running daily deliveries
        </div>
        <div style={{
          display: "flex", flexWrap: "wrap", justifyContent: "center",
          gap: 10,
        }}>
          {badges.map((b) => (
            <span key={b} style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "10px 16px", borderRadius: 999,
              background: "#fff", border: "1px solid rgba(28,62,97,0.10)",
              color: T.bluishGrey, fontSize: 13, fontWeight: 500,
            }}>
              <window.L2U_Dot color={T.primary} size={6}/>
              {b}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Problem() {
  const T = window.l2uTokens;
  const cols = [
    {
      icon: <ChatIcon/>,
      title: "Customers don't know where their order is",
      body: 'Your team gets the same call ten times a day. "Saan na po driver?" Without a live tracking link, every delivery feels like a black box for your customer, and a support headache for you.',
      stat: { v: "10×", l: "Daily WISMO calls" },
    },
    {
      icon: <RouteIcon/>,
      title: "Drivers waste hours on bad routes",
      body: "A driver doing 15 stops the wrong way can lose 2 hours a day. Multiply that across your fleet. That's fuel, overtime, and one or two extra deliveries per driver per day you're leaving on the table.",
      stat: { v: "2hrs", l: "Lost per driver, daily" },
    },
    {
      icon: <ProofIcon/>,
      title: "You have no proof a delivery happened",
      body: "When a customer says \"I never got it\", you're scrolling through Viber messages looking for a photo. No timestamp. No signature. No record. Disputes cost you money and trust.",
      stat: { v: "₱0", l: "Recoverable from disputes" },
    },
  ];
  return (
    <section style={{ background: "#fff", padding: "120px 80px", fontFamily: T.fontSans }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56,
          alignItems: "flex-end", marginBottom: 56,
        }}>
          <div>
            <window.L2U_Eyebrow>THE PROBLEM</window.L2U_Eyebrow>
            <h2 style={{
              margin: "16px 0 0", fontSize: 52, fontWeight: 900,
              lineHeight: "60px", letterSpacing: "-1.4px", color: T.bluishGrey,
              textWrap: "balance",
            }}>
              Still managing your drivers on{" "}
              <span style={{
                position: "relative", display: "inline-block",
              }}>
                <span style={{ position: "relative", zIndex: 1 }}>Viber, WhatsApp, or Excel?</span>
                <svg viewBox="0 0 500 18" style={{
                  position: "absolute", left: 0, bottom: -4, width: "70%", height: 14, zIndex: 0,
                }} preserveAspectRatio="none">
                  <path d="M 4 12 Q 120 2 240 9 T 496 8" stroke={T.primary} strokeWidth="6" fill="none" strokeLinecap="round" opacity="0.30"/>
                </svg>
              </span>
            </h2>
          </div>
          <p style={{
            margin: 0, fontSize: 17, lineHeight: "28px",
            color: T.mute, maxWidth: 540,
          }}>
            Most Philippine businesses with their own drivers run on group chats and spreadsheets. It works, until it doesn't. Drivers take routes that waste fuel. Customers call all day asking <em>"saan na ang order ko?"</em>. You can't prove a delivery happened without screenshots. Sound familiar?
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {cols.map((c, i) => (
            <div key={i} style={{
              background: T.cream, border: "1px solid rgba(28,62,97,0.06)",
              borderRadius: 22, padding: "32px 32px",
              display: "flex", flexDirection: "column", gap: 18,
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: "rgba(43,147,255,0.10)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                color: T.primary,
              }}>{c.icon}</div>
              <div style={{ fontWeight: 900, fontSize: 20, color: T.bluishGrey, letterSpacing: "-0.3px", lineHeight: "26px" }}>
                {c.title}
              </div>
              <div style={{ fontSize: 14, lineHeight: "22px", color: T.mute, flex: 1 }}>
                {c.body}
              </div>
              <div style={{
                paddingTop: 18, borderTop: "1px solid rgba(28,62,97,0.08)",
                display: "flex", alignItems: "baseline", gap: 10,
              }}>
                <span style={{ fontWeight: 900, fontSize: 28, color: T.bluishGrey, letterSpacing: "-0.6px" }}>{c.stat.v}</span>
                <span style={{ fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.2px", color: T.mute2, textTransform: "uppercase" }}>{c.stat.l}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ChatIcon() {
  return <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M9 9h6M9 13h4"/></svg>;
}
function RouteIcon() {
  return <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="19" r="3"/><circle cx="18" cy="5" r="3"/><path d="M6 16V9a4 4 0 0 1 4-4h4M18 8v7a4 4 0 0 1-4 4h-4"/></svg>;
}
function ProofIcon() {
  return <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>;
}

function Solution() {
  const T = window.l2uTokens;
  const features = [
    {
      kw: "ROUTE OPTIMIZATION",
      title: "Smart route optimization",
      body: "Plan the fastest route for every driver in seconds. Most fleets see 20–30% more drops per driver per day. Same trucks. Same hours. More revenue.",
      mock: "route",
    },
    {
      kw: "CUSTOMER TRACKING",
      title: "Real-time customer tracking",
      body: 'Send your customer a tracking link via SMS or Viber. They see live driver location and ETA. "Where is my order?" calls drop by 60–80%.',
      mock: "track",
    },
    {
      kw: "PROOF OF DELIVERY",
      title: "Proof of delivery (POD)",
      body: "Drivers capture a photo, signature, and timestamp on every drop. No more disputes. No more scrolling Viber for evidence.",
      mock: "pod",
    },
    {
      kw: "DRIVER APP",
      title: "Driver app in plain language",
      body: "One button to start. One to finish. Filipino drivers get it on day one. Training takes minutes, not weeks.",
      mock: "driver",
    },
  ];
  return (
    <section style={{ background: T.cream, padding: "120px 80px", fontFamily: T.fontSans }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 72 }}>
          <window.L2U_Eyebrow>THE PLATFORM</window.L2U_Eyebrow>
          <h2 style={{
            margin: "16px auto 16px", fontSize: 52, fontWeight: 900,
            lineHeight: "60px", letterSpacing: "-1.4px", color: T.bluishGrey,
            maxWidth: 880, textWrap: "balance",
          }}>
            Everything you need to run your delivery operation, in one place.
          </h2>
          <p style={{
            margin: "0 auto", fontSize: 18, lineHeight: "28px",
            color: T.mute, maxWidth: 720,
          }}>
            Locate2u replaces Viber, WhatsApp, Excel, and paper job sheets with one platform built specifically for businesses that own their drivers.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          {features.map((f, i) => (
            <FeatureCard key={i} feature={f} index={i}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ feature, index }) {
  const T = window.l2uTokens;
  return (
    <div style={{
      background: "#fff", border: "1px solid rgba(28,62,97,0.08)",
      borderRadius: 24, padding: "36px 36px 0", overflow: "hidden",
      display: "flex", flexDirection: "column", gap: 22,
      minHeight: 460,
    }}>
      <div>
        <span style={{
          fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.6px",
          color: T.primaryDeep, fontWeight: 700,
        }}>{feature.kw}</span>
        <h3 style={{
          margin: "12px 0 12px", fontSize: 30, fontWeight: 900,
          lineHeight: "36px", letterSpacing: "-0.6px", color: T.bluishGrey,
        }}>{feature.title}</h3>
        <p style={{ margin: 0, fontSize: 15, lineHeight: "24px", color: T.mute, maxWidth: 480 }}>
          {feature.body}
        </p>
      </div>
      <div style={{ marginTop: "auto", marginLeft: -8, marginRight: -8 }}>
        {feature.mock === "route" && <RouteMockMini/>}
        {feature.mock === "track" && <TrackMockMini/>}
        {feature.mock === "pod" && <PodMockMini/>}
        {feature.mock === "driver" && <DriverMockMini/>}
      </div>
    </div>
  );
}

function RouteMockMini() {
  const T = window.l2uTokens;
  return (
    <div style={{
      height: 210, borderRadius: 16,
      background: "#0B1F33",
      position: "relative", overflow: "hidden",
      border: "1px solid rgba(255,255,255,0.06)",
    }}>
      {/* Exact smart-route graphic (map + route + stops + home baked in) */}
      <img src={(window.__resources && window.__resources.smartRoute) || "assets/smartroute.png"} alt="Optimized delivery route across Metro Manila"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>

      {/* Top-left label */}
      <div style={{
        position: "absolute", left: 12, top: 12, padding: "7px 11px",
        background: "rgba(11,31,51,0.80)", border: "1px solid rgba(255,255,255,0.12)",
        borderRadius: 8, color: "#fff", whiteSpace: "nowrap",
        fontFamily: T.fontMono, fontSize: 9.5, letterSpacing: "0.8px", fontWeight: 500,
      }}>
        <span style={{ color: "#6EC1F7" }}>OPTIMIZED</span> · 2 STOPS · 5 KM
      </div>
      {/* Top-right pill */}
      <div style={{
        position: "absolute", right: 12, top: 12,
        padding: "7px 11px", borderRadius: 8, whiteSpace: "nowrap",
        background: "#2B93FF", color: "#FFF",
        fontFamily: T.fontMono, fontSize: 10, fontWeight: 700,
        boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
      }}>
        ↓ 24% drive time
      </div>
    </div>
  );
}

function TrackMockMini() {
  const T = window.l2uTokens;
  return (
    <div style={{
      height: 210, borderRadius: 16,
      background: "#F4F8FB",
      position: "relative", overflow: "hidden",
      border: "1px solid rgba(28,62,97,0.08)",
      display: "grid", gridTemplateColumns: "180px 1fr", gap: 0,
    }}>
      {/* phone */}
      <div style={{ padding: 16, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{
          width: 130, height: 178,
          background: "#fff", borderRadius: 18,
          border: "1px solid rgba(28,62,97,0.10)",
          boxShadow: "0 8px 22px rgba(15,31,56,0.12)",
          padding: "10px 10px", display: "flex", flexDirection: "column", gap: 8,
        }}>
          <div style={{ fontFamily: T.fontMono, fontSize: 8, letterSpacing: "1px", color: T.primary, fontWeight: 700 }}>LIVE TRACKING</div>
          <div style={{ fontWeight: 700, fontSize: 10, color: T.bluishGrey, lineHeight: 1.3 }}>Your delivery is 2.6 km away</div>
          <div style={{ background: "#E8F1FA", borderRadius: 8, flex: 1, position: "relative", overflow: "hidden" }}>
            <img src={(window.__resources && window.__resources.trackMap) || "assets/img02_map.png"} alt=""
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
            <span style={{
              position: "absolute", left: "58%", top: "44%", width: 14, height: 14,
              borderRadius: "50%", background: "rgba(43,147,255,0.30)",
              transform: "translate(-50%,-50%)", animation: "l2uRing 1.8s ease-out infinite",
            }}/>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontFamily: T.fontMono, fontSize: 8, color: T.mute2 }}>
            <span>ETA 10:14</span>
            <span style={{ color: T.success, fontWeight: 700 }}>● ON TIME</span>
          </div>
        </div>
      </div>
      {/* messages */}
      <div style={{ padding: "18px 18px 18px 0", display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ fontFamily: T.fontMono, fontSize: 9, letterSpacing: "1.2px", color: T.primary, fontWeight: 700 }}>SENT VIA VIBER</div>
        <Bubble who="Locate2u" dark>Your order from Pharmacy is on the way. Track live → l2u.ph/t/M4421</Bubble>
        <Bubble who="Customer">Salamat! Saan na ngayon?</Bubble>
        <Bubble who="Locate2u" dark>Juan is 2.6 km away · ETA 10:14</Bubble>
        <Bubble who="Customer">👍 Wait lang ako sa baba</Bubble>
      </div>
    </div>
  );
}

function Bubble({ who, dark, children }) {
  const T = window.l2uTokens;
  return (
    <div style={{
      alignSelf: who === "Customer" ? "flex-end" : "flex-start",
      maxWidth: "85%",
      background: dark ? T.bluishGrey : "#fff",
      color: dark ? "#fff" : T.bluishGrey,
      borderRadius: dark ? "12px 12px 12px 4px" : "12px 12px 4px 12px",
      padding: "8px 10px", fontSize: 11, lineHeight: 1.4,
      border: dark ? "none" : "1px solid rgba(28,62,97,0.08)",
      boxShadow: "0 1px 2px rgba(15,31,56,0.04)",
    }}>{children}</div>
  );
}

function PodMockMini() {
  const T = window.l2uTokens;
  return (
    <div style={{
      height: 210, borderRadius: 16,
      background: T.cream, padding: 18,
      border: "1px solid rgba(28,62,97,0.08)",
      display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 14,
    }}>
      <div style={{
        background: "linear-gradient(160deg,#1C3E61,#01101F)",
        borderRadius: 12, padding: 14, color: "#fff",
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        position: "relative", overflow: "hidden",
      }}>
        <div>
          <div style={{ fontFamily: T.fontMono, fontSize: 9, letterSpacing: "1.2px", color: "#6EC1F7" }}>PHOTO · 10:18</div>
          <div style={{
            marginTop: 8, height: 86, borderRadius: 8, overflow: "hidden",
            border: "1px solid rgba(255,255,255,0.14)",
          }}>
            <img src={(window.__resources && window.__resources.podPhoto) || "assets/img03_POD.png"} alt="Package delivered at front gate"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
          </div>
        </div>
        <div style={{ fontSize: 11 }}>
          <div style={{ fontWeight: 700 }}>Aling Rosa Bautista</div>
          <div style={{ opacity: 0.7, fontSize: 9, marginTop: 2 }}>Brgy. Mandaluyong East</div>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ background: "#fff", borderRadius: 10, padding: "10px 12px", border: "1px solid rgba(28,62,97,0.08)" }}>
          <div style={{ fontFamily: T.fontMono, fontSize: 9, letterSpacing: "1.2px", color: T.primary, fontWeight: 700 }}>SIGNATURE</div>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", marginTop: 6 }}>
            <img src={(window.__resources && window.__resources.signature) || "assets/img03_sign.png"} alt="Customer signature"
              style={{ width: "auto", height: 46, display: "block" }}/>
          </div>
        </div>
        <div style={{
          background: "rgba(45,210,122,0.08)",
          borderRadius: 10, padding: "10px 12px",
          border: "1px solid rgba(45,210,122,0.25)",
          display: "flex", alignItems: "center", gap: 8, flex: 1,
        }}>
          <span style={{
            width: 22, height: 22, borderRadius: "50%", background: T.success,
            display: "inline-flex", alignItems: "center", justifyContent: "center",
          }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
          </span>
          <div>
            <div style={{ fontWeight: 700, fontSize: 11, color: T.bluishGrey }}>Delivered · synced</div>
            <div style={{ fontFamily: T.fontMono, fontSize: 9, color: T.mute2, marginTop: 1 }}>10:18 · Customer notified</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DriverMockMini() {
  const T = window.l2uTokens;
  return (
    <div style={{
      height: 210, borderRadius: 16, position: "relative", overflow: "hidden",
      border: "1px solid rgba(28,62,97,0.08)",
      display: "flex", justifyContent: "center", alignItems: "center",
    }}>
      <img src={(window.__resources && window.__resources.driverMap) || "assets/img04_map.png"} alt=""
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
      <div style={{
        position: "relative", zIndex: 1,
        width: 290,
        background: "#fff", borderRadius: 18,
        boxShadow: "0 12px 30px rgba(15,31,56,0.16)",
        padding: 16, display: "flex", flexDirection: "column", gap: 12,
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            fontFamily: T.fontMono, fontSize: 9, letterSpacing: "1.2px", color: T.primary, fontWeight: 700,
          }}>
            <window.L2U_Dot color={T.success} size={6} pulse/> STOP 7 OF 14
          </span>
          <span style={{ fontFamily: T.fontMono, fontSize: 9, color: T.mute2 }}>10:12</span>
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 14, color: T.bluishGrey }}>Aling Rosa Bautista</div>
          <div style={{ fontSize: 11, color: T.mute, marginTop: 2 }}>141 Don A. Roces Ave, Diliman</div>
        </div>
        <div style={{ display: "flex", gap: 8, marginTop: "auto" }}>
          <button
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "rgba(43,147,255,0.5)"; e.currentTarget.style.background = "rgba(43,147,255,0.05)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(28,62,97,0.12)"; e.currentTarget.style.background = "#fff"; }}
            style={{
            flex: 1, padding: "12px 0", borderRadius: 10, border: "1px solid rgba(28,62,97,0.12)",
            background: "#fff", color: T.bluishGrey, fontWeight: 700, fontSize: 13,
            cursor: "pointer", fontFamily: T.fontSans, transition: "background .15s ease, border-color .15s ease",
          }}>↺ Navigate</button>
          <button
            onMouseEnter={(e) => { e.currentTarget.style.background = "#1C82EF"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = T.primary; }}
            style={{
            flex: 1.4, padding: "12px 0", borderRadius: 10, border: "none",
            background: T.primary, color: "#fff", fontWeight: 700, fontSize: 13,
            cursor: "pointer", fontFamily: T.fontSans,
            boxShadow: "0 6px 14px rgba(43,147,255,0.30)", transition: "background .15s ease",
          }}>✓ Start delivery</button>
        </div>
      </div>
    </div>
  );
}

function Verticals() {
  const T = window.l2uTokens;
  const items = [
    { title: "Furniture & appliance delivery", body: "Large items, scheduled deliveries, white-glove install. Manage installer teams, capture signed POD on every drop, and give customers a 2-hour delivery window they can plan around.", icon: "sofa", href: "/ph/solutions/furniture-delivery" },
    { title: "Water & LPG delivery", body: "High-frequency, route-heavy routes, every household in PH. Cut driver time per route and double the drops your refill drivers complete each day.", icon: "drop", href: "/ph/solutions/water-lpg-delivery" },
    { title: "Pharmacy & medical delivery", body: "Time-sensitive, direct-to-patient, branded tracking. Show your pharmacy's logo on the tracking page. Capture POD for prescription handovers.", icon: "med", href: "/ph/solutions/pharmacy-delivery" },
    { title: "Florist & gifting delivery", body: "Same-day delivery, premium expectation. Customers see exactly when the gift will arrive, and a photo confirmation the moment it lands.", icon: "flower", href: "/ph/solutions/florist-delivery" },
    { title: "Cleaning & field services", body: "Your technicians work like deliveries: scheduled, routed, on-the-clock. Use Locate2u to dispatch, track, and confirm each job.", icon: "tool", href: "/ph/solutions/field-service-scheduling" },
    { title: "F&B distribution", body: "Daily routes to restaurants, cafes, and suppliers. Cold-chain ready. Proof of delivery for every B2B drop.", icon: "fb", href: "/ph/solutions/fb-distribution" },
  ];

  return (
    <section style={{ background: "#fff", padding: "120px 80px", fontFamily: T.fontSans }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56,
          alignItems: "flex-end", marginBottom: 56,
        }}>
          <div>
            <window.L2U_Eyebrow>BUILT FOR YOUR BUSINESS</window.L2U_Eyebrow>
            <h2 style={{
              margin: "16px 0 0", fontSize: 52, fontWeight: 900,
              lineHeight: "60px", letterSpacing: "-1.4px", color: T.bluishGrey,
              textWrap: "balance",
            }}>
              Built for the way Philippine fleets actually deliver.
            </h2>
          </div>
          <p style={{ margin: 0, fontSize: 17, lineHeight: "28px", color: T.mute, maxWidth: 540 }}>
            We're not a marketplace like Lalamove or Grab. They book drivers when you don't have one. We help you get more out of the drivers you already have. That's a different problem, and it's the one we solve.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {items.map((it) => (
            <div key={it.title} style={{
              background: T.cream, border: "1px solid rgba(28,62,97,0.06)",
              borderRadius: 20, padding: "28px 28px",
              display: "flex", flexDirection: "column", gap: 14,
              cursor: "pointer",
              transition: "transform .15s ease, box-shadow .15s ease, border-color .15s ease",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = "rgba(43,147,255,0.30)";
              e.currentTarget.style.transform = "translateY(-2px)";
              e.currentTarget.style.boxShadow = "0 14px 28px rgba(15,31,56,0.08)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = "rgba(28,62,97,0.06)";
              e.currentTarget.style.transform = "";
              e.currentTarget.style.boxShadow = "";
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: "rgba(43,147,255,0.10)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                color: T.primary,
              }}>
                <VerticalIcon name={it.icon} />
              </div>
              <div style={{ fontWeight: 900, fontSize: 18, color: T.bluishGrey, letterSpacing: "-0.2px", lineHeight: "24px" }}>
                {it.title}
              </div>
              <div style={{ fontSize: 14, lineHeight: "22px", color: T.mute, flex: 1 }}>
                {it.body}
              </div>
              <a href={it.href} style={{
                marginTop: 6, color: T.primaryDeep, fontSize: 13, fontWeight: 700,
                textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6,
              }}>
                See how it works
                <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VerticalIcon({ name }) {
  const props = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "sofa":   return <svg {...props}><path d="M20 9V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v2"/><path d="M2 11v5a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2 2 2 0 0 0-2 2v3H6v-3a2 2 0 0 0-2-2 2 2 0 0 0-2 2Z"/><path d="M4 18v2M20 18v2"/></svg>;
    case "drop":   return <svg {...props}><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.32 0z"/></svg>;
    case "med":    return <svg {...props}><path d="M10.5 20H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v6"/><path d="M16 18h6M19 15v6"/></svg>;
    case "flower": return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M12 9V3M12 21v-6M9 12H3M21 12h-6M14.83 9.17l4.24-4.24M4.93 19.07l4.24-4.24M14.83 14.83l4.24 4.24M4.93 4.93l4.24 4.24"/></svg>;
    case "tool":   return <svg {...props}><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"/></svg>;
    case "fb":     return <svg {...props}><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18M16 10a4 4 0 0 1-8 0"/></svg>;
    default:       return <svg {...props}><circle cx="12" cy="12" r="9"/></svg>;
  }
}

window.L2U_TrustStrip = TrustStrip;
window.L2U_Problem = Problem;
window.L2U_Solution = Solution;
window.L2U_Verticals = Verticals;