// ProductUpdates.jsx — changelog timeline for /product-updates.
// Honest entries mapped to features actually shipped (see the Features page).
function LDProductUpdates() {
  const entries = [
    {
      month: "June", year: "2026", title: "Quick View, theming & five picker layouts",
      items: [
        { tag: "New", text: "Quick View — at-a-glance order counts by day, week, and location, right inside Shopify." },
        { tag: "New", text: "Five cart date-picker layouts: day strip, dropdowns, calendar, stepped, and bottom sheet." },
        { tag: "New", text: "Ready-made widget theme presets, plus a bold or flat style." },
        { tag: "New", text: "Conditional delivery pricing — charge a % of the cart subtotal and set free-delivery thresholds." },
        { tag: "New", text: "Order cutoffs by time of day, and blackout dates for closures." },
        { tag: "Improved", text: "Widget placement, sizing, and alignment in the cart — plus a refreshed admin and guided setup." },
      ],
    },
    {
      month: "May", year: "2026", title: "Per-product scheduling & smarter dispatch",
      items: [
        { tag: "New", text: "Per-product scheduling, pre-order windows, and bulk-apply across products." },
        { tag: "New", text: "View all your delivery and pickup locations in one place." },
        { tag: "Improved", text: "Shopify order tags sync to Locate2u, and orders auto-mark as delivered." },
        { tag: "Improved", text: "More reliable Locate2u stop creation when order tags change." },
      ],
    },
    {
      month: "April", year: "2026", title: "Launched, with Locate2u dispatch",
      items: [
        { tag: "New", text: "Local Delivery Premium goes live — cart date picker, postcode delivery areas, and time slots." },
        { tag: "New", text: "Push scheduled orders straight to drivers via Locate2u, with automatic fulfillment on completion." },
      ],
    },
  ];

  const tagStyle = (tag) => {
    const base = {
      flexShrink: 0, minWidth: 66, textAlign: "center", marginTop: 1,
      fontFamily: "var(--ld-font-mono)", fontSize: 10, fontWeight: 700,
      letterSpacing: "0.8px", textTransform: "uppercase",
      padding: "3px 8px", borderRadius: 6,
    };
    if (tag === "New") return { ...base, background: "var(--ld-yellow)", color: "var(--ld-ink)", border: "1.5px solid var(--ld-ink)" };
    if (tag === "Improved") return { ...base, background: "var(--ld-ok-tint)", color: "#1B7A4B", border: "1.5px solid #2DC275" };
    return { ...base, background: "var(--ld-paper)", color: "var(--ld-ink-mute)", border: "1.5px solid var(--ld-line)" };
  };

  return (
    <section style={{ background: "var(--ld-cream)", padding: "64px 0 96px" }}>
      <div className="ld-container" style={{ maxWidth: 820 }}>
        {entries.map((e, i) => (
          <article key={i} style={{ marginBottom: 30 }}>
            <div className="ld-mono" style={{ fontSize: 12, fontWeight: 700, letterSpacing: "1.4px", textTransform: "uppercase", color: "var(--ld-ink-soft)", marginBottom: 12 }}>
              {e.month} {e.year}
            </div>
            <div style={{ background: "var(--ld-paper)", border: "1.5px solid var(--ld-ink)", borderRadius: 18, boxShadow: "5px 5px 0 var(--ld-ink)", padding: "26px 28px" }}>
              <h3 className="ld-h3" style={{ fontSize: 24, marginBottom: 18 }}>{e.title}</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {e.items.map((it, j) => (
                  <li key={j} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span style={tagStyle(it.tag)}>{it.tag}</span>
                    <span style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ld-ink)" }}>{it.text}</span>
                  </li>
                ))}
              </ul>
            </div>
          </article>
        ))}
        <p className="ld-small" style={{ color: "var(--ld-ink-soft)", marginTop: 28, textAlign: "center" }}>
          That’s the story so far — we ship improvements every month.
        </p>
      </div>
    </section>
  );
}
window.LDProductUpdates = LDProductUpdates;