// depots.jsx — customer-facing depot directory (drop-off & collection points). Item 19.
function Depots() {
  const depots = window.FX.DEPOTS || [];
  const oh = window.FX.OPERATING_HOURS;
  return (
    <div className="fade-up">
      <PageHeader eyebrow="Depots" title="Drop-off & collection points" sub="Bring a shipment to a depot or arrange collection. Hours and services are listed below." />

      <div style={{ display: "flex", alignItems: "center", gap: 13, padding: "14px 18px", borderRadius: "var(--r-lg)", background: "var(--brand)", color: "#fff", marginBottom: 20 }}>
        <span style={{ width: 40, height: 40, borderRadius: 11, flex: "none", background: "rgba(255,255,255,0.15)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon name="clock" size={20} /></span>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 14.5 }}>Booking &amp; tracking — {oh ? oh.availability : "24 / 7 / 365"}</div>
          <div style={{ fontSize: 13, opacity: 0.85 }}>Standard service hours {oh ? oh.core : "6:00 AM – 6:00 PM"}. Depot counter hours vary by location — see each below.</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(330px, 1fr))", gap: 16 }}>
        {depots.map(d => (
          <Card key={d.id} pad={20}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 13, color: "#fff", background: "var(--brand)", padding: "3px 9px", borderRadius: 6 }}>{d.state}</span>
              <span style={{ fontSize: 15, fontWeight: 700, color: "var(--fg-strong)" }}>{d.name}</span>
            </div>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 9, marginBottom: 10 }}>
              <Icon name="map-pin" size={15} color="var(--fg-mute)" style={{ flex: "none", marginTop: 2 }} />
              <span style={{ fontSize: 13.5, color: "var(--fg-body)", lineHeight: 1.45 }}>{d.address}</span>
            </div>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 9, marginBottom: 12 }}>
              <Icon name="clock" size={15} color="var(--fg-mute)" style={{ flex: "none", marginTop: 2 }} />
              <span style={{ fontSize: 13, color: "var(--fg-body)", lineHeight: 1.45 }}>{d.hours}</span>
            </div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: d.note ? 10 : 0 }}>
              {(d.services || []).map(s => (
                <span key={s} style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11.5, fontWeight: 600, background: "var(--brand-soft)", color: "var(--brand)", borderRadius: 999, padding: "3px 10px" }}>
                  <Icon name={s === "Collection" ? "package" : "check"} size={11} /> {s}
                </span>
              ))}
            </div>
            {d.note && <div style={{ fontSize: 12, color: "#8a5a00", background: "var(--warn-soft)", borderRadius: "var(--r-sm)", padding: "8px 11px", lineHeight: 1.4 }}>{d.note}</div>}
          </Card>
        ))}
      </div>

      <div style={{ marginTop: 18, fontSize: 12.5, color: "var(--fg-mute)", display: "flex", alignItems: "center", gap: 8 }}>
        <Icon name="info" size={14} /> Depot list and hours are maintained by Fedex Customer Service. For anything not listed, call <a href="tel:1300131150" style={{ color: "var(--brand)", fontWeight: 600, textDecoration: "none" }}>1300 131 150</a>.
      </div>
    </div>
  );
}

Object.assign(window, { Depots });