// IndustriesPage.jsx — playbook rows per vertical

function LDIndustriesPage() {
  const rows = [
    {
      id: "florists",
      icon: "🌸",
      tone: "#FCE9EE",
      ink: "#7B1F3A",
      name: "Florists",
      lead: "Same-day flowers, but for real.",
      body: "Same-day delivery is a real edge against the big-box flower sites. Local Delivery Premium handles tight 1-hour windows so bouquets arrive fresh, on the day that matters.",
      defaults: [
        { l: "Slot length", v: "1-hour windows" },
        { l: "Prep time", v: "3-hour buffer" },
        { l: "Order deadline", v: "Same-day stops at 2pm" },
        { l: "Order limit", v: "By order count" },
      ],
      pull: { v: "Same-day", l: "Your competitive edge" },
    },
    {
      id: "food",
      icon: "🥗",
      tone: "#EAF4D8",
      ink: "#3D6020",
      name: "Food + meal kits",
      lead: "Built for the freezer chain.",
      body: "Cold-chain friendly. Set per-product order deadlines (chilled vs frozen), batch by suburb, and hide tomorrow's slots when you're full. Customers see the slots they can actually have — not vague delivery promises.",
      defaults: [
        { l: "Slot length", v: "2-hour windows" },
        { l: "Prep time", v: "12-hour buffer" },
        { l: "Order deadline", v: "Per-product (chilled vs frozen)" },
        { l: "Order limit", v: "By prep time" },
      ],
      pull: { v: "Cold-chain", l: "Freezer-friendly slots" },
    },
    {
      id: "wine",
      icon: "🍷",
      tone: "#F3E1E1",
      ink: "#7A2531",
      name: "Wine + alcohol",
      lead: "Delivered when someone’s home.",
      body: "Age-restricted orders need someone there to receive them. Give customers a real delivery window so the handover actually happens — fewer missed drops and redeliveries. Set next-day defaults and clear order deadlines for each area.",
      defaults: [
        { l: "Slot length", v: "2-hour windows" },
        { l: "Prep time", v: "Next-day default" },
        { l: "Order deadline", v: "Set per area" },
        { l: "Order limit", v: "By order count" },
      ],
      pull: { v: "Next-day", l: "Windows someone’s home for" },
    },
    {
      id: "grocery",
      icon: "🥑",
      tone: "#EAF3EA",
      ink: "#234D2A",
      name: "Grocery + pantry",
      lead: "Subscription delivery, without the spreadsheet.",
      body: "Drive denser routes with order limits per delivery area. Subscribers re-up automatically with their preferred slot, so regular orders run themselves.",
      defaults: [
        { l: "Slot length", v: "4-hour or all-day" },
        { l: "Prep time", v: "Next-day default" },
        { l: "Order deadline", v: "5pm previous day" },
        { l: "Order limit", v: "By box-size" },
      ],
      pull: { v: "Hands-off", l: "Subscriptions on autopilot" },
    },
    {
      id: "furniture",
      icon: "🛋",
      tone: "#F0E9DF",
      ink: "#5A3A1F",
      name: "Furniture + bulky",
      lead: "Two-person delivery, sized right.",
      body: "Some orders need two people and a van. Some need the lift. Local Delivery Premium's per-product delivery rules let you sell only what you can actually fulfil — and the customer sees a real two-hour window, not a vague 'between 8am and 6pm'.",
      defaults: [
        { l: "Slot length", v: "2 or 4-hour windows" },
        { l: "Prep time", v: "3-day buffer" },
        { l: "Product rule", v: "Set per item" },
        { l: "Order limit", v: "By job count" },
      ],
      pull: { v: "Right-sized", l: "Two-person delivery rules" },
    },
    {
      id: "pharmacy",
      icon: "💊",
      tone: "#E2EEF7",
      ink: "#1F4A6E",
      name: "Pharmacy + health",
      lead: "Discreet, priority, cold-chain.",
      body: "Priority routing, discreet packaging notes, and tight delivery windows. Refill subscriptions surface only matching slots, so refills are easier to schedule on time.",
      defaults: [
        { l: "Slot length", v: "2-hour priority" },
        { l: "Prep time", v: "Same-day" },
        { l: "Order deadline", v: "Same-day priority" },
        { l: "Notes", v: "Discreet packaging" },
      ],
      pull: { v: "Discreet", l: "Priority + cold-chain" },
    },
  ];

  return (
    <section id="playbooks" style={{ background: "var(--ld-cream)" }}>
      {/* sticky-feeling industry nav */}
      <div style={{
        background: "var(--ld-paper)", borderTop: "1px solid var(--ld-line)", borderBottom: "1px solid var(--ld-line)",
        position: "sticky", top: 68, zIndex: 40,
      }}>
        <div className="ld-container-wide" style={{ display: "flex", gap: 4, overflowX: "auto", padding: "12px 32px" }}>
          {rows.map((r) => (
            <a key={r.id} href={`#${r.id}`} style={{
              padding: "8px 14px", borderRadius: 999,
              fontSize: 13, fontWeight: 600, color: "var(--ld-ink)",
              whiteSpace: "nowrap",
              border: "1px solid var(--ld-line)",
              display: "inline-flex", alignItems: "center", gap: 6,
            }}>
              <span>{r.icon}</span> {r.name}
            </a>
          ))}
        </div>
      </div>

      <div className="ld-container-wide" style={{ display: "flex", flexDirection: "column", gap: 16, padding: "64px 32px 96px" }}>
        {rows.map((r, i) => <IndustryRow key={r.id} {...r} flip={i % 2 === 1}/>)}
      </div>
    </section>
  );
}

function IndustryRow({ id, icon, tone, ink, name, lead, body, defaults, pull, quote, who, flip }) {
  return (
    <article id={id} style={{
      background: "#fff",
      border: "2px solid var(--ld-ink)",
      borderRadius: 24,
      padding: 0,
      boxShadow: "6px 6px 0 var(--ld-ink)",
      overflow: "hidden",
      display: "grid", gridTemplateColumns: flip ? "0.9fr 1.1fr" : "1.1fr 0.9fr",
      scrollMarginTop: 120,
    }}>
      {/* copy */}
      <div style={{ padding: "40px 44px", order: flip ? 2 : 1 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
          <span style={{
            width: 56, height: 56, borderRadius: 14, background: tone,
            border: "1.5px solid var(--ld-ink)",
            display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 28,
          }}>{icon}</span>
          <div>
            <div className="ld-mono" style={{ fontSize: 11, color: "var(--ld-ink-soft)", letterSpacing: "1.4px", textTransform: "uppercase", fontWeight: 600 }}>Solution · {name}</div>
            <h2 className="ld-h3" style={{ marginTop: 4, fontSize: 28 }}>{lead}</h2>
          </div>
        </div>
        <p className="ld-body" style={{ marginBottom: 24, fontSize: 16 }}>{body}</p>

        <div style={{ marginBottom: 24 }}>
          <div className="ld-mono" style={{ fontSize: 11, color: "var(--ld-ink-soft)", letterSpacing: "1.4px", textTransform: "uppercase", fontWeight: 600, marginBottom: 10 }}>
            Default config for {name.toLowerCase()}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 0, border: "1.5px solid var(--ld-ink)", borderRadius: 10, overflow: "hidden" }}>
            {defaults.map((d, i) => (
              <div key={d.l} style={{
                padding: "12px 14px",
                borderRight: i % 2 === 0 ? "1px solid var(--ld-line)" : "none",
                borderBottom: i < defaults.length - 2 ? "1px solid var(--ld-line)" : "none",
                background: i % 2 === 0 ? "var(--ld-cream)" : "#fff",
              }}>
                <div className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ink-soft)", letterSpacing: "0.8px", textTransform: "uppercase" }}>{d.l}</div>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ld-ink)", marginTop: 4 }}>{d.v}</div>
              </div>
            ))}
          </div>
        </div>

      </div>

      {/* pull-stat panel */}
      <div style={{
        background: tone,
        borderLeft: flip ? "none" : "2px solid var(--ld-ink)",
        borderRight: flip ? "2px solid var(--ld-ink)" : "none",
        order: flip ? 1 : 2,
        padding: "48px 36px",
        display: "flex", flexDirection: "column", justifyContent: "center", gap: 24,
        position: "relative", overflow: "hidden",
      }}>
        <svg aria-hidden="true" style={{ position: "absolute", inset: 0, opacity: 0.08 }} viewBox="0 0 200 200" preserveAspectRatio="none">
          <pattern id={`ipat-${id}`} width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="1.2" fill={ink}/>
          </pattern>
          <rect width="200" height="200" fill={`url(#ipat-${id})`}/>
        </svg>
        <div style={{ position: "relative" }}>
          <div style={{ fontWeight: 900, fontSize: 42, letterSpacing: "-1.5px", color: ink, lineHeight: 1.0 }}>
            {pull.v}
          </div>
          <div className="ld-mono" style={{ fontSize: 12, color: ink, letterSpacing: "1.2px", textTransform: "uppercase", marginTop: 10, fontWeight: 600 }}>
            {pull.l}
          </div>
        </div>

        {/* default mini-vignette */}
        <div style={{
          background: "#fff", border: "1.5px solid var(--ld-ink)", borderRadius: 12, padding: 14,
          boxShadow: "4px 4px 0 var(--ld-ink)",
          position: "relative",
        }}>
          <div className="ld-mono" style={{ fontSize: 9, color: "var(--ld-ink-soft)", letterSpacing: "1px", marginBottom: 8 }}>CART · {name.toUpperCase()}</div>
          <div style={{ display: "flex", gap: 4, marginBottom: 8 }}>
            {["W","T","F","S","S"].map((dd, i) => (
              <div key={i} style={{
                flex: 1, padding: "4px 0", textAlign: "center",
                background: i === 2 ? "var(--ld-yellow)" : "#fff",
                border: `1.5px solid ${i === 2 ? "var(--ld-ink)" : "var(--ld-line)"}`,
                borderRadius: 5, fontSize: 9, fontWeight: 800, color: "var(--ld-ink)",
              }}>{dd}</div>
            ))}
          </div>
          <div style={{
            background: "var(--ld-yellow-tint)", border: "1.5px solid var(--ld-ink)",
            borderRadius: 6, padding: "6px 8px",
            fontSize: 10, fontWeight: 700, color: "var(--ld-ink)",
            display: "flex", alignItems: "center", justifyContent: "space-between",
          }}>
            <span>{defaults[0].v.replace("windows", "")}</span>
            <span><window.LDIcon.Check size={12}/></span>
          </div>
        </div>
      </div>
    </article>
  );
}

window.LDIndustriesPage = LDIndustriesPage;