// L2uIntegration.jsx — dark section showing Locate2u route optimization
function LDL2uIntegration() {
  return (
    <section style={{
      background: "var(--ld-dark-2)",
      color: "#fff",
      padding: "112px 0",
      position: "relative",
      overflow: "hidden",
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(700px 500px at 10% 50%, rgba(255,214,10,0.18), transparent 70%)",
      }}/>

      <div className="ld-container-wide ld-split-l" style={{ position: "relative" }}>
        {/* Copy */}
        <div style={{ display: "flex", flexDirection: "column", gap: 22, maxWidth: 480 }}>
          <span className="ld-eyebrow" style={{ color: "var(--ld-yellow)" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ld-yellow)", display: "inline-block" }}/>
            Locate2u integration
          </span>
          <h2 className="ld-h2" style={{ color: "#fff", letterSpacing: "-1.6px" }}>
            Push routes to your drivers — automatically.
          </h2>
          <p className="ld-body" style={{ color: "rgba(255,255,255,0.78)", fontSize: 17, lineHeight: 1.6 }}>
            Local Delivery Premium is built by the team behind Locate2u, a dispatch and route-planning platform used by delivery teams around the world. Turn it on and every Shopify order with a delivery slot lands on a driver’s phone — sorted into an efficient order to help save time and fuel.
          </p>

          <ul style={{ margin: "8px 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              "Route planning across your whole team of drivers",
              "Driver app for iPhone and Android, with turn-by-turn navigation",
              "Scheduled Shopify orders dispatched to drivers automatically",
              "See every driver’s progress from one dispatch dashboard",
            ].map((t) => (
              <li key={t} style={{ display: "flex", alignItems: "flex-start", gap: 12, color: "rgba(255,255,255,0.9)", fontSize: 15 }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 7,
                  background: "rgba(255,214,10,0.30)", color: "var(--ld-yellow)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0, marginTop: 2,
                }}>
                  <window.LDIcon.Check size={14}/>
                </span>
                <span>{t}</span>
              </li>
            ))}
          </ul>

          <div style={{ display: "flex", gap: 12, marginTop: 16, alignItems: "center" }}>
            <a href="https://locate2u.com" target="_blank" rel="noreferrer" className="ld-btn ld-btn-primary">
              Learn about Locate2u <window.LDIcon.Arrow size={14}/>
            </a>
          </div>
        </div>

        {/* Route mock */}
        <RouteMock/>
      </div>
    </section>
  );
}

function RouteMock() {
  return (
    <div style={{
      position: "relative", width: "100%", aspectRatio: "1.05 / 1",
      background: "var(--ld-ink)",
      border: "1px solid rgba(255,255,255,0.08)",
      borderRadius: 24, overflow: "hidden",
      boxShadow: "0 20px 60px rgba(0,0,0,0.40)",
    }}>
      {/* Dashboard header */}
      <div style={{
        padding: "16px 22px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        borderBottom: "1px solid rgba(255,255,255,0.08)",
        background: "rgba(0,0,0,0.20)",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--ld-green)" }} className="ld-pulse"/>
          <span className="ld-mono" style={{ color: "var(--ld-yellow)", fontSize: 11, letterSpacing: "1.4px", textTransform: "uppercase", fontWeight: 600 }}>
            Locate2u · Live
          </span>
        </div>
        <div className="ld-mono" style={{ fontSize: 11, color: "rgba(255,255,255,0.6)" }}>
          Friday · 14 stops · 3 drivers
        </div>
      </div>

      {/* Map area */}
      <svg viewBox="0 0 500 380" width="100%" height="84%" style={{ display: "block" }}>
        <defs>
          <pattern id="rmgrid" width="36" height="36" patternUnits="userSpaceOnUse">
            <path d="M36 0H0V36" stroke="rgba(255,255,255,0.04)" strokeWidth="1" fill="none"/>
          </pattern>
          <linearGradient id="rmGlow" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="rgba(255,214,10,0.18)"/>
            <stop offset="1" stopColor="transparent"/>
          </linearGradient>
        </defs>
        <rect width="500" height="380" fill="url(#rmgrid)"/>

        {/* Roads */}
        <path d="M0 220 Q120 200 250 230 T500 220" stroke="rgba(255,255,255,0.10)" strokeWidth="14" fill="none"/>
        <path d="M260 0 Q240 140 280 200 T280 380" stroke="rgba(255,255,255,0.10)" strokeWidth="14" fill="none"/>
        <path d="M50 50 Q220 80 380 60" stroke="rgba(255,255,255,0.06)" strokeWidth="10" fill="none"/>
        <path d="M100 320 Q230 290 440 320" stroke="rgba(255,255,255,0.06)" strokeWidth="10" fill="none"/>

        {/* Route paths */}
        <path d="M80 80 Q180 60 260 120 Q300 180 220 230 Q160 270 100 340" stroke="var(--ld-green)" strokeWidth="3" fill="none" strokeLinecap="round" strokeDasharray="0"/>
        <path d="M260 120 Q350 100 420 150 Q450 220 380 280 Q330 320 250 330" stroke="#FFC453" strokeWidth="3" fill="none" strokeLinecap="round"/>
        <path d="M220 230 Q280 250 340 290" stroke="var(--ld-accent)" strokeWidth="3" fill="none" strokeLinecap="round" strokeDasharray="5 4"/>

        {/* Stop markers */}
        {[
          { x: 80, y: 80, c: "var(--ld-green)", n: 1 },
          { x: 180, y: 70, c: "var(--ld-green)", n: 2 },
          { x: 260, y: 120, c: "var(--ld-green)", n: 3 },
          { x: 220, y: 230, c: "var(--ld-green)", n: 4 },
          { x: 100, y: 340, c: "var(--ld-green)", n: 5 },
          { x: 350, y: 100, c: "#FFC453", n: 1 },
          { x: 420, y: 150, c: "#FFC453", n: 2 },
          { x: 380, y: 280, c: "#FFC453", n: 3 },
          { x: 280, y: 250, c: "var(--ld-accent)", n: 1 },
          { x: 340, y: 290, c: "var(--ld-accent)", n: 2 },
        ].map((s, i) => (
          <g key={i}>
            <circle cx={s.x} cy={s.y} r="11" fill={s.c} stroke="var(--ld-ink)" strokeWidth="2"/>
            <text x={s.x} y={s.y + 3.5} textAnchor="middle" fontSize="9" fontWeight="700" fill="var(--ld-ink)" fontFamily="JetBrains Mono">{s.n}</text>
          </g>
        ))}

        {/* Depot */}
        <g>
          <rect x="245" y="155" width="24" height="24" rx="6" fill="#fff" stroke="var(--ld-green)" strokeWidth="2"/>
          <text x="257" y="172" textAnchor="middle" fontSize="11" fontWeight="900" fill="var(--ld-green-deep)">D</text>
        </g>
      </svg>

      {/* Driver cards bottom */}
      <div style={{
        position: "absolute", bottom: 16, left: 16, right: 16,
        background: "rgba(15,30,25,0.85)", backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        border: "1px solid rgba(255,255,255,0.10)",
        borderRadius: 14, padding: "10px 14px",
        display: "flex", gap: 14, justifyContent: "space-between",
      }}>
        {[
          { name: "Marcus", code: "MR", color: "var(--ld-green)", stops: "5 stops", eta: "ETA 14:12" },
          { name: "Janelle", code: "JD", color: "#FFC453", stops: "6 stops", eta: "ETA 13:55" },
          { name: "Tom", code: "TC", color: "var(--ld-accent)", stops: "3 stops", eta: "ETA 12:40" },
        ].map((d) => (
          <div key={d.name} style={{ display: "flex", alignItems: "center", gap: 9, flex: 1, minWidth: 0 }}>
            <span style={{
              width: 28, height: 28, borderRadius: "50%", background: d.color, color: "var(--ld-ink)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              fontWeight: 800, fontSize: 11,
            }}>{d.code}</span>
            <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
              <span style={{ fontSize: 12, color: "#fff", fontWeight: 700 }}>{d.name}</span>
              <span className="ld-mono" style={{ fontSize: 9, color: "rgba(255,255,255,0.55)" }}>{d.stops} · {d.eta}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.LDL2uIntegration = LDL2uIntegration;