// HowItWorks.jsx — 3-step with little inline visuals
function LDHowItWorks() {
  return (
    <section id="how" style={{ background: "var(--ld-paper)", padding: "112px 0", borderTop: "1px solid var(--ld-line)" }}>
      <div className="ld-container-wide">
        <div className="ld-split-2" style={{ marginBottom: 64 }}>
          <div>
            <span className="ld-eyebrow ld-eyebrow-dot">How it works</span>
            <h2 className="ld-h2" style={{ marginTop: 16 }}>
              Three steps from install<br/>to first delivery.
            </h2>
          </div>
          <p className="ld-lead" style={{ maxWidth: 460 }}>
            One-click install from the Shopify App Store. Set up your delivery areas. Switch on the date picker. Many stores are taking scheduled orders the same day they install.
          </p>
        </div>

        <div className="ld-grid-3" style={{ gap: 24 }}>
          <Step n="01" title="Install + connect" body="One-click install from the Shopify App Store. Local Delivery Premium reads your products and existing shipping — no rebuild, and your checkout stays exactly as it is.">
            <StepVisualInstall/>
          </Step>
          <Step n="02" title="Set up your delivery areas" body="Set your delivery areas by postcode. Give each one its own order deadlines, order limits, prep times, and delivery fees — different rules for Sunday vs Wednesday is fine.">
            <StepVisualZones/>
          </Step>
          <Step n="03" title="Customer picks a date" body="Your customer sees only the dates and slots they can actually have. Orders flow into Shopify with a delivery window attached — and into your driver app via Locate2u.">
            <StepVisualPick/>
          </Step>
        </div>
      </div>
    </section>
  );
}

function Step({ n, title, body, children }) {
  return (
    <div style={{
      background: "var(--ld-cream)",
      borderRadius: 20, padding: "8px 8px 32px 8px",
      border: "1px solid var(--ld-line)",
      display: "flex", flexDirection: "column",
    }}>
      <div style={{
        background: "#fff", borderRadius: 14, height: 220,
        border: "1px solid var(--ld-line)",
        position: "relative", overflow: "hidden",
      }}>
        {children}
      </div>
      <div style={{ padding: "24px 24px 0" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
          <span style={{
            fontFamily: "var(--ld-font-mono)", fontWeight: 700, fontSize: 13,
            color: "var(--ld-ink)", letterSpacing: "1.4px",
          }}>{n}</span>
          <span style={{ flex: 1, height: 1, background: "var(--ld-line)" }}/>
        </div>
        <h3 className="ld-h4" style={{ marginBottom: 8 }}>{title}</h3>
        <p className="ld-small" style={{ color: "var(--ld-ink-mute)" }}>{body}</p>
      </div>
    </div>
  );
}

function StepVisualInstall() {
  return (
    <div style={{ padding: 18, height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 12 }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 10,
        background: "#fff", border: "1px solid var(--ld-line)",
        borderRadius: 12, padding: "12px 16px", boxShadow: "var(--ld-shadow-md)",
      }}>
        <window.LDShopifyBag size={28}/>
        <div style={{ display: "flex", flexDirection: "column" }}>
          <span style={{ fontSize: 11, color: "var(--ld-ink-soft)" }}>Shopify App Store</span>
          <span style={{ fontSize: 14, fontWeight: 700, color: "var(--ld-ink)" }}>Local Delivery Premium</span>
        </div>
        <button style={{
          background: "var(--ld-green)", color: "#fff",
          padding: "7px 14px", border: "none", borderRadius: 6,
          fontSize: 12, fontWeight: 700, marginLeft: 8,
        }}>Add app</button>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ld-ok)" }}>
        <window.LDIcon.Check size={14}/>
        <span className="ld-mono" style={{ fontSize: 10, letterSpacing: "1.2px", textTransform: "uppercase", color: "var(--ld-ok)", fontWeight: 600 }}>
          Connected in 12 seconds
        </span>
      </div>
    </div>
  );
}

function StepVisualZones() {
  return (
    <svg viewBox="0 0 280 220" width="100%" height="100%" style={{ display: "block" }}>
      <defs>
        <pattern id="zgrid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M20 0H0V20" stroke="#ECEDE9" strokeWidth="1" fill="none"/>
        </pattern>
      </defs>
      <rect width="280" height="220" fill="url(#zgrid)"/>
      {/* roads */}
      <path d="M0 110 H280" stroke="#E2E5E2" strokeWidth="6" fill="none"/>
      <path d="M140 0 V220" stroke="#E2E5E2" strokeWidth="6" fill="none"/>
      {/* Zone A — green */}
      <path d="M30 30 L130 30 L150 70 L130 105 L70 110 L30 80 Z" fill="rgba(255,214,10,0.18)" stroke="var(--ld-green)" strokeWidth="1.8"/>
      <text x="80" y="65" fontFamily="JetBrains Mono" fontSize="10" fontWeight="700" fill="var(--ld-green-deep)">AREA A</text>
      <text x="80" y="78" fontFamily="JetBrains Mono" fontSize="8" fill="var(--ld-green-deep)" opacity="0.7">Same-day</text>
      {/* Zone B — orange */}
      <path d="M155 35 L255 50 L260 130 L160 125 L150 90 Z" fill="rgba(255,107,53,0.16)" stroke="var(--ld-accent)" strokeWidth="1.8"/>
      <text x="195" y="80" fontFamily="JetBrains Mono" fontSize="10" fontWeight="700" fill="#B84A1A">AREA B</text>
      <text x="195" y="93" fontFamily="JetBrains Mono" fontSize="8" fill="#B84A1A" opacity="0.7">Next-day</text>
      {/* Zone C — yellow */}
      <path d="M40 130 L130 130 L155 160 L120 200 L40 195 L20 170 Z" fill="rgba(255,196,83,0.20)" stroke="#D88E00" strokeWidth="1.8"/>
      <text x="65" y="170" fontFamily="JetBrains Mono" fontSize="10" fontWeight="700" fill="#7A4F00">AREA C</text>
      <text x="65" y="183" fontFamily="JetBrains Mono" fontSize="8" fill="#7A4F00" opacity="0.7">Pick-up only</text>
      {/* store pin */}
      <circle cx="140" cy="110" r="8" fill="var(--ld-green)" stroke="#fff" strokeWidth="2"/>
      <circle cx="140" cy="110" r="3" fill="#fff"/>
    </svg>
  );
}

function StepVisualPick() {
  return (
    <div style={{ padding: 16, height: "100%", display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <div className="ld-mono" style={{ fontSize: 9, color: "var(--ld-ink)", letterSpacing: "1px", textTransform: "uppercase", fontWeight: 700, marginBottom: 6 }}>
        Customer chooses
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 4 }}>
        {[
          { d: "Wed", n: 14, sel: false, off: false },
          { d: "Thu", n: 15, sel: false, off: false },
          { d: "Fri", n: 16, sel: true, off: false },
          { d: "Sat", n: 17, sel: false, off: false },
        ].map(d => (
          <div key={d.n} style={{
            background: d.sel ? "var(--ld-green)" : "#fff",
            border: `1px solid ${d.sel ? "var(--ld-green)" : "var(--ld-line)"}`,
            borderRadius: 7, padding: "6px 0", textAlign: "center",
          }}>
            <div style={{ fontSize: 9, color: d.sel ? "rgba(255,255,255,0.8)" : "var(--ld-ink-soft)", fontWeight: 600 }}>{d.d}</div>
            <div style={{ fontSize: 14, fontWeight: 800, color: d.sel ? "#fff" : "var(--ld-ink)" }}>{d.n}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 12 }}>
        {["9 – 11am", "11am – 1pm", "1 – 3pm"].map((t, i) => (
          <div key={t} style={{
            display: "flex", alignItems: "center", gap: 8,
            padding: "7px 10px",
            borderRadius: 6, marginBottom: 4,
            background: i === 1 ? "var(--ld-green-tint)" : "#FBFAF6",
            border: `1px solid ${i === 1 ? "var(--ld-green)" : "var(--ld-line)"}`,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: i === 1 ? "var(--ld-ink)" : "var(--ld-line)" }}/>
            <span style={{ fontSize: 11, fontWeight: 600, color: i === 1 ? "var(--ld-ink)" : "var(--ld-ink)" }}>{t}</span>
            {i === 1 && <span style={{ marginLeft: "auto", color: "var(--ld-ink)" }}><window.LDIcon.Check size={12}/></span>}
          </div>
        ))}
      </div>
    </div>
  );
}

window.LDHowItWorks = LDHowItWorks;