// Features.jsx — feature grid: zones, capacity, cutoffs, slots, POD, ratings
function LDFeatures() {
  const features = [
    {
      eyebrow: "Delivery areas",
      title: "Postcode delivery areas",
      body: "Set your delivery areas by postcode or suburb. Give each one its own rules — delivery fee, order deadline, and prep time.",
      visual: <FVZones/>,
      span: 2,
    },
    {
      eyebrow: "Delivery limits",
      title: "Per-area delivery limits",
      body: "Set how many orders each delivery area can take. Once an area is full, it stops offering delivery in the cart.",
      visual: <FVCapacity/>,
    },
    {
      eyebrow: "Order deadlines",
      title: "Smart order deadlines",
      body: "Set a 2pm deadline for next-day delivery. The cart updates the moment it passes — nobody books a slot you can’t make.",
      visual: <FVCutoff/>,
    },
    {
      eyebrow: "Slots",
      title: "1hr, 2hr or all-day windows",
      body: "Choose how granular you want to be. Granny’s birthday flowers might be a 1-hour slot; pantry boxes are happy with “Tuesday”.",
      visual: <FVSlots/>,
      span: 2,
    },
  ];

  return (
    <section style={{ background: "var(--ld-cream)", padding: "112px 0", borderTop: "1px solid var(--ld-line)" }}>
      <div className="ld-container-wide">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="ld-eyebrow ld-eyebrow-dot">The control panel</span>
          <h2 className="ld-h2" style={{ marginTop: 16 }}>
            Everything you wish Shopify shipping <em style={{
              fontStyle: "normal",
              background: "var(--ld-yellow)",
              padding: "0 10px",
              borderRadius: 6,
              boxShadow: "3px 3px 0 var(--ld-ink)",
              display: "inline-block",
              transform: "rotate(-1.5deg)",
            }}>just did.</em>
          </h2>
          <p className="ld-lead" style={{ marginTop: 16 }}>
            Local Delivery Premium sits on top of Shopify checkout. It does the things that local fulfilment actually needs — without forcing you to leave the platform.
          </p>
        </div>

        <div className="ld-grid-3" style={{ gap: 18 }}>
          {features.map((f) => (
            <article key={f.title} style={{
              background: "#fff", borderRadius: 22,
              border: "1px solid var(--ld-line)",
              padding: 8, display: "flex", flexDirection: "column",
              gridColumn: f.span === 2 ? "span 2" : "span 1",
              overflow: "hidden",
            }}>
              <div style={{
                background: "var(--ld-green-soft)",
                borderRadius: 16, height: 200, position: "relative", overflow: "hidden",
                border: "1px solid var(--ld-green-tint)",
              }}>
                {f.visual}
              </div>
              <div style={{ padding: "22px 22px 18px" }}>
                <span className="ld-pill-tint" style={{ marginBottom: 12 }}>{f.eyebrow}</span>
                <h3 className="ld-h4" style={{ marginTop: 12, marginBottom: 8 }}>{f.title}</h3>
                <p className="ld-small" style={{ color: "var(--ld-ink-mute)" }}>{f.body}</p>
              </div>
            </article>
          ))}
        </div>

        <div style={{ marginTop: 44, display: "flex", flexDirection: "column", alignItems: "center", gap: 14, textAlign: "center" }}>
          <p className="ld-small" style={{ color: "var(--ld-ink-mute)" }}>
            Plus weekly time slots, order cutoffs, blackout dates, custom pricing, and per-product rules.
          </p>
          <a href="features.html" className="ld-btn ld-btn-dark ld-btn-lg" style={{ gap: 8 }}>
            See all features
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

// ---- Visuals ----
function FVZones() {
  return (
    <svg viewBox="0 0 600 200" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="fvz-grid" width="24" height="24" patternUnits="userSpaceOnUse">
          <path d="M24 0H0V24" stroke="#D9E8DE" strokeWidth="1" fill="none"/>
        </pattern>
      </defs>
      <rect width="600" height="200" fill="url(#fvz-grid)"/>
      <circle cx="300" cy="100" r="46" fill="rgba(255,214,10,0.20)" stroke="var(--ld-green)" strokeWidth="2" strokeDasharray="4 3"/>
      <circle cx="300" cy="100" r="94" fill="rgba(255,107,53,0.10)" stroke="var(--ld-accent)" strokeWidth="2" strokeDasharray="4 3"/>
      <circle cx="300" cy="100" r="150" fill="none" stroke="#D88E00" strokeWidth="2" strokeDasharray="4 3"/>
      {/* store pin */}
      <circle cx="300" cy="100" r="8" fill="var(--ld-green)" stroke="#fff" strokeWidth="3"/>
      {/* customer pins */}
      {[
        { x: 260, y: 80, c: "var(--ld-green)" },
        { x: 330, y: 130, c: "var(--ld-green)" },
        { x: 220, y: 110, c: "var(--ld-accent)" },
        { x: 380, y: 70, c: "var(--ld-accent)" },
        { x: 410, y: 140, c: "#D88E00" },
        { x: 180, y: 60, c: "#D88E00" },
      ].map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy={p.y} r="5" fill={p.c} stroke="#fff" strokeWidth="1.5"/>
        </g>
      ))}
      {/* labels */}
      <text x="258" y="104" fontFamily="JetBrains Mono" fontSize="9" fontWeight="700" fill="var(--ld-green-deep)">SAME-DAY</text>
      <text x="360" y="58" fontFamily="JetBrains Mono" fontSize="9" fontWeight="700" fill="#B84A1A">NEXT-DAY</text>
      <text x="400" y="168" fontFamily="JetBrains Mono" fontSize="9" fontWeight="700" fill="#7A4F00">PICK-UP</text>
    </svg>
  );
}

function FVCapacity() {
  const bars = [
    { d: "Area A", n: 12, max: 20 },
    { d: "Area B", n: 18, max: 20 },
    { d: "Area C", n: 20, max: 20, full: true },
    { d: "Area D", n: 8,  max: 20 },
    { d: "Area E", n: 16, max: 20 },
  ];
  return (
    <div style={{ padding: 18, height: "100%", display: "flex", alignItems: "flex-end", gap: 8 }}>
      {bars.map((b) => (
        <div key={b.d} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
          <span className="ld-mono" style={{ fontSize: 10, fontWeight: 700, color: b.full ? "var(--ld-accent)" : "var(--ld-ink)" }}>
            {b.full ? "FULL" : `${b.n}/${b.max}`}
          </span>
          <div style={{ width: "100%", height: 120, background: "rgba(255,214,10,0.10)", borderRadius: 6, position: "relative", overflow: "hidden" }}>
            <div style={{
              position: "absolute", bottom: 0, left: 0, right: 0,
              height: `${(b.n / b.max) * 100}%`,
              background: b.full ? "var(--ld-accent)" : "var(--ld-green)",
              borderRadius: 6,
            }}/>
          </div>
          <span style={{ fontSize: 10, color: "var(--ld-green-deep)", fontWeight: 600 }}>{b.d}</span>
        </div>
      ))}
    </div>
  );
}

function FVCutoff() {
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", padding: 18, gap: 8 }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        background: "#fff", borderRadius: 10, padding: "10px 14px",
        border: "1px solid var(--ld-line)",
      }}>
        <window.LDIcon.Clock size={16}/>
        <span style={{ flex: 1, fontSize: 12, color: "var(--ld-ink)", fontWeight: 600 }}>Order before <span style={{ fontFamily: "var(--ld-font-mono)" }}>14:00</span></span>
        <span className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ok)", letterSpacing: "1px", textTransform: "uppercase", fontWeight: 700 }}>Next-day OK</span>
      </div>
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        background: "#fff", borderRadius: 10, padding: "10px 14px",
        border: "1px solid var(--ld-line)",
        opacity: 0.6,
      }}>
        <window.LDIcon.Clock size={16}/>
        <span style={{ flex: 1, fontSize: 12, color: "var(--ld-ink)", fontWeight: 600 }}>Order after <span style={{ fontFamily: "var(--ld-font-mono)" }}>14:00</span></span>
        <span className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ink-soft)", letterSpacing: "1px", textTransform: "uppercase", fontWeight: 700 }}>+1 day</span>
      </div>
      <div style={{ marginTop: 4, fontSize: 11, color: "var(--ld-green-deep)", fontFamily: "var(--ld-font-mono)", letterSpacing: "0.5px" }}>
        Current time: <strong>13:47</strong> · cart updates in real time
      </div>
    </div>
  );
}

function FVSlots() {
  const slots = [
    { t: "1-hour", w: 60 },
    { t: "2-hour", w: 100 },
    { t: "4-hour", w: 160 },
    { t: "All-day", w: 240 },
  ];
  return (
    <div style={{ padding: 18, height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", gap: 9 }}>
      {slots.map((s, i) => (
        <div key={s.t} style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span className="ld-mono" style={{ width: 56, fontSize: 10, fontWeight: 700, color: "var(--ld-green-deep)" }}>{s.t}</span>
          <div style={{ width: s.w, height: 20, background: "var(--ld-green)", borderRadius: 4, opacity: 0.4 + i * 0.15 }}/>
        </div>
      ))}
    </div>
  );
}

window.LDFeatures = LDFeatures;