// Industries.jsx — 6 industry cards
function LDIndustries() {
  const cards = [
    {
      name: "Florists",
      icon: "🌸", color: "#FCE9EE", deep: "#A23A55",
      copy: "Same-day delivery is a real edge against the big-box flower sites. Tight 1-hour windows so bouquets arrive fresh.",
      stat: "Same-day",
      statLabel: "competitive edge",
    },
    {
      name: "Food + meal kits",
      icon: "🥗", color: "#EAF4D8", deep: "#3D6020",
      copy: "Cold-chain friendly. Set order deadlines for chilled and frozen, batch by suburb, and hide tomorrow when you’re full. Customers see the slots they can actually have.",
      stat: "Cold-chain",
      statLabel: "freezer-ready",
    },
    {
      name: "Wine + alcohol",
      icon: "🍷", color: "#F3E1E1", deep: "#7A2531",
      copy: "Give customers a real delivery window so someone’s home to receive age-restricted orders — fewer missed drops and redeliveries.",
      stat: "Real windows",
      statLabel: "someone’s home",
    },
    {
      name: "Grocery + pantry",
      icon: "🥑", color: "#EAF3EA", deep: "#234D2A",
      copy: "Drive denser routes with capacity caps per window. Subscribers re-up automatically with their preferred slot.",
      stat: "Hands-off",
      statLabel: "subscriptions",
    },
    {
      name: "Furniture + bulky",
      icon: "🛋", color: "#F0E9DF", deep: "#5A3A1F",
      copy: "Two-person delivery, per-product delivery rules, and prep-time buffers — plus a real delivery window your customers can plan around.",
      stat: "Right-sized",
      statLabel: "delivery rules",
    },
    {
      name: "Pharmacy + health",
      icon: "💊", color: "#E2EEF7", deep: "#1F4A6E",
      copy: "Cold-chain, priority routing, and discreet packaging notes. Refill subscriptions surface only matching delivery windows.",
      stat: "Discreet",
      statLabel: "& priority",
    },
  ];

  return (
    <section id="industries" 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: 56 }}>
          <div>
            <span className="ld-eyebrow ld-eyebrow-dot">Built for</span>
            <h2 className="ld-h2" style={{ marginTop: 16 }}>
              Whatever you sell —<br/>if it’s perishable, fragile, or local,<br/>we know the playbook.
            </h2>
          </div>
          <p className="ld-lead" style={{ maxWidth: 480 }}>
            Built for local merchants of every kind. Every industry below has its own gotchas — Local Delivery Premium has rules, defaults, and templates for each.
          </p>
        </div>

        <div className="ld-grid-3" style={{ gap: 18 }}>
          {cards.map((c) => (
            <div key={c.name} style={{
              background: "var(--ld-cream)",
              border: "1px solid var(--ld-line)",
              borderRadius: 22,
              padding: 28,
              display: "flex", flexDirection: "column",
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: 14,
                background: c.color, display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 28, marginBottom: 20,
              }}>{c.icon}</div>
              <h3 className="ld-h4" style={{ marginBottom: 10 }}>{c.name}</h3>
              <p className="ld-small" style={{ marginBottom: 22, flex: 1 }}>{c.copy}</p>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, paddingTop: 18, borderTop: "1px dashed var(--ld-line)" }}>
                <span style={{ fontWeight: 900, fontSize: 26, letterSpacing: "-1px", color: c.deep, lineHeight: 1 }}>{c.stat}</span>
                <span className="ld-mono" style={{ fontSize: 11, color: "var(--ld-ink-soft)", letterSpacing: "0.5px", textTransform: "uppercase" }}>{c.statLabel}</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 40 }}>
          <a href="solutions.html" style={{ fontSize: 15, fontWeight: 700, color: "var(--ld-ink)", borderBottom: "2px solid var(--ld-yellow)" }}>
            See all solutions →
          </a>
        </div>
      </div>
    </section>
  );
}
window.LDIndustries = LDIndustries;