/* ============================================================
   Wonderwild — amenity line-icons + AmenitiesGrid + WhatToBring
   Fine line glyphs (stroke 1.5, rounded) in brand green, matching
   the design system's Lucide guidance. Depends on ww-core + ww-sections.
   ============================================================ */

function AmenityIcon({ name, size = 46, stroke = "var(--green-700)", sw = 1.5 }) {
  const P = AMENITY_PATHS[name] || AMENITY_PATHS.lotus;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{P}</svg>
  );
}

const AMENITY_PATHS = {
  /* sleeping */
  bed: <><path d="M2 19v-7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v7" /><path d="M4 10V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3" /><path d="M2 16h20" /><path d="M12 5v5" /><path d="M3 19v1.5M21 19v1.5" /></>,
  lamp: <><path d="M9 2h6l3 8H6l3-8Z" /><path d="M12 10v7" /><path d="M8 21v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1H8Z" /></>,
  book: <><path d="M12 7v13" /><path d="M3 17a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3H3Z" /></>,
  /* kitchen & food */
  coffee: <><path d="M10 2v2.5M14 2v2.5M6.5 3v1.5" /><path d="M5 8h12a3.5 3.5 0 1 1 0 7h-1" /><path d="M5 8v6a4 4 0 0 0 4 4h3a4 4 0 0 0 4-4V8" /></>,
  fridge: <><rect x="6" y="2.5" width="12" height="19" rx="2.2" /><path d="M6 11h12" /><path d="M9.3 6v2.2" /><path d="M9.3 13.8v3" /></>,
  utensils: <><path d="M4 3v5a2 2 0 0 0 4 0V3" /><path d="M6 10v11" /><path d="M11 3v6a2 2 0 0 0 2 2h0" /><path d="M13 3v18" /><path d="M19 3c-1.5 1-2 2.5-2 4.5 0 1.6.8 2.5 2 2.5V3Z" /><path d="M19 10v11" /></>,
  grill: <><path d="M4 8.5h16" /><path d="M5 8.5a7 4.2 0 0 0 14 0" /><path d="m8.5 13 -2 8" /><path d="m15.5 13 2 8" /><path d="M12 14v7" /><path d="M9 3.5c0 1-1 1.4-1 2.4M12 3c0 1-1 1.4-1 2.4M15 3.5c0 1-1 1.4-1 2.4" /></>,
  /* bathing */
  shower: <><path d="m4 4 2.4 2.4" /><path d="M13.2 6.4a4.8 4.8 0 0 0-6.8 6.8Z" /><path d="M14.6 5 5 14.6" /><path d="M14 17v.01M10.5 16v.01M13 13.5v.01M16 11v.01M11 20v.01M17 14.5v.01M19.5 12v.01" /></>,
  towel: <><path d="M4 6h16" /><path d="M7 6v13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6" /><path d="M14 6v11" /><path d="M7.5 9h6.5" /></>,
  /* outdoor & comfort */
  chair: <><path d="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3" /><path d="M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1a2 2 0 0 0-4 0v1H7v-1a2 2 0 0 0-4 0Z" /><path d="M5 18v2.5M19 18v2.5" /></>,
  firepit: <><path d="M12 3c.5 2.5 2 4 3.4 5.3C16.7 9.6 17.5 11 17.5 13a5.5 5.5 0 1 1-11 0c0-1 .4-2 1-2.6A2.2 2.2 0 0 0 10 12.5c0-1.2-.5-1.8-.9-2.6C8 8.2 8.4 6.6 10 5.3c.2 2 1.2 3.2 2 3.7" /><path d="M4 21h16" /></>,
  lantern: <><path d="M9 3h6" /><path d="M12 3v1.5" /><rect x="8" y="4.5" width="8" height="2.6" rx="1" /><path d="M8.6 7.1h6.8v9.4a1 1 0 0 1-1 1H9.6a1 1 0 0 1-1-1V7.1Z" /><rect x="10" y="9" width="4" height="6" rx="1" /><path d="M10.2 17.5v2M13.8 17.5v2" /></>,
  bottle: <><rect x="10" y="2.5" width="4" height="2.4" rx="0.6" /><path d="M10.4 4.9v2.1l-1.3 2.2a3 3 0 0 0-.6 1.8v8a1.5 1.5 0 0 0 1.5 1.5h4a1.5 1.5 0 0 0 1.5-1.5v-8a3 3 0 0 0-.6-1.8l-1.3-2.2V4.9" /><path d="M8.7 13h6.6" /></>,
  wifi: <><path d="M5 12.5a10 10 0 0 1 14 0" /><path d="M8.5 16a5 5 0 0 1 7 0" /><path d="M2 9a15 15 0 0 1 20 0" /><path d="M12 20h.01" /></>,
  plug: <><path d="M9 2v6M15 2v6" /><path d="M7 8h10v3a5 5 0 0 1-10 0V8Z" /><path d="M12 16v6" /></>,
  /* nature */
  star: <><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" /><path d="M19 3v3M17.5 4.5h3" /></>,
  droplet: <><path d="M12 21a6.5 6.5 0 0 0 6.5-6.5c0-2-1-3.7-2.8-5.2C14 7.7 12.6 5.8 12 3.5c-.6 2.3-2 4.2-3.7 5.8C6.5 10.8 5.5 12.5 5.5 14.5A6.5 6.5 0 0 0 12 21Z" /></>,
  thermometer: <><path d="M14 14.8V5a2 2 0 0 0-4 0v9.8a4 4 0 1 0 4 0Z" /><path d="M12 9v6.5" /></>,
  paw: <><circle cx="7" cy="9" r="1.8" /><circle cx="12" cy="6.5" r="1.8" /><circle cx="17" cy="9" r="1.8" /><path d="M8.5 14.5a3.5 3.5 0 0 1 7 0c0 1.6-1.2 2.4-2 3.2-.7.7-1 1.8-2.5 1.8s-1.8-1.1-2.5-1.8c-.8-.8-2-1.6-2-3.2" /></>,
  /* parking & travel */
  car: <><path d="M5 13l1.5-4.2A2 2 0 0 1 8.4 7.5h7.2a2 2 0 0 1 1.9 1.3L19 13" /><path d="M4 13h16a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1Z" /><path d="M7 16h.01M17 16h.01" /></>,
  parking: <><rect x="3" y="3" width="18" height="18" rx="3" /><path d="M9.5 17V7h3.2a3 3 0 0 1 0 6H9.5" /></>,
  /* fallback */
  lotus: <><path d="M12 21c-3-1-6-3.5-6-7 1.5.3 3 1 4 2 .2-2-.3-4-1-5.5 1.2.4 2.3 1.3 3 2.5.7-1.2 1.8-2.1 3-2.5-.7 1.5-1.2 3.5-1 5.5 1-1 2.5-1.7 4-2 0 3.5-3 6-6 7Z" /></>,
};

/* ---------- Amenities grid (icon + caption, reference-style) ---------- */
function AmenitiesGrid({ eyebrow, title, lede, items, columns = 6, bg = "cream", iconColor }) {
  return (
    <Band bg={bg}>
      <Container width="1240px">
        {(title || eyebrow) && <div style={{ marginBottom: "var(--space-7)" }}><SectionHeading eyebrow={eyebrow} title={title} lede={lede} align="center" max="58ch" style={{ alignItems: "center" }} /></div>}
        <div className="ww-amen" style={{ display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "40px 28px" }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={(i % columns) * 40} style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: "14px" }}>
              <AmenityIcon name={it.icon} stroke={iconColor || "var(--green-700)"} />
              <p style={{ font: "var(--serif-sm)", color: "var(--text-body)", margin: 0, maxWidth: "22ch", lineHeight: 1.5 }}>{it.label}</p>
            </Reveal>
          ))}
        </div>
      </Container>
    </Band>
  );
}

/* ---------- What to bring (two columns: provided vs bring) ---------- */
function WhatToBring({ bring, provided, bg = "alt" }) {
  const Col = ({ tone, head, items }) => (
    <Reveal style={{ flex: "1 1 0", minWidth: 0 }}>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--text-strong)", fontSize: "1.1rem", marginBottom: "6px" }}>{head}</div>
      <div style={{ width: "44px", height: "1px", background: "var(--accent)", margin: "0 0 22px" }} />
      <div style={{ display: "flex", flexDirection: "column", gap: "13px" }}>
        {items.map((it) => (
          <div key={it} style={{ display: "flex", gap: "12px", alignItems: "flex-start" }}>
            <span style={{ flexShrink: 0, marginTop: "2px", color: tone === "have" ? "var(--green-500)" : "var(--clay-500)" }}>
              {tone === "have" ? React.cloneElement(Icons.check, { size: 16 }) : Icons.plus({ size: 16 })}
            </span>
            <span style={{ font: "var(--serif-body)", color: "var(--text-body)" }}>{it}</span>
          </div>
        ))}
      </div>
    </Reveal>
  );
  return (
    <Band bg={bg}>
      <Container width="1040px">
        <div style={{ marginBottom: "var(--space-7)" }}><SectionHeading eyebrow="Before you come" title="What To Bring" lede="We've thought of most things — here's what's already here, and the few bits worth packing." align="center" max="56ch" style={{ alignItems: "center" }} /></div>
        <div className="ww-split" style={{ display: "flex", gap: "64px", alignItems: "flex-start", background: "var(--surface-card)", border: "1px solid var(--cream-300)", borderRadius: "var(--radius-lg)", padding: "40px 44px", boxShadow: "var(--shadow-sm)" }}>
          <Col tone="have" head="We provide" items={provided} />
          <Col tone="bring" head="Please bring" items={bring} />
        </div>
      </Container>
    </Band>
  );
}

Object.assign(window, { AmenityIcon, AMENITY_PATHS, AmenitiesGrid, WhatToBring });