/* Four travel-style categories, photo-led, sitting above the condo results. */
const CATEGORIES = [
  { k: "Pure Relaxation & Wellness", sub: "Beach getaways · Spa & wellness", img: "cat-wellness.jpg" },
  { k: "Exploration & Culture",      sub: "Urban exploration · Road trips",  img: "cat-exploration.jpg" },
  { k: "Adventure & Activity",       sub: "Adventure vacations · Nature lovers", img: "cat-adventure.jpg" },
  { k: "Lifestyle",                  sub: "Family · Romantic · Solo travel", img: "cat-lifestyle.jpg" },
];

function CategoryTiles({ onPick }) {
  return (
    <section style={{ background: "#fff", padding: "48px 30px 52px" }}>
      <div style={{ maxWidth: "1040px", margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: "26px", maxWidth: "640px", marginLeft: "auto", marginRight: "auto" }}>
          <h2 style={{ margin: "0 0 10px", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "28px", color: "var(--navy-800)", letterSpacing: "-0.01em" }}>Find your kind of getaway</h2>
          <p style={{ margin: 0, fontSize: "15.5px", color: "var(--muted)", lineHeight: 1.55 }}>
            Your GDV Express membership includes access to hundreds of worldwide 7-night condos — and you save with discounted pricing on all. Time for a much-needed break! Click one of the vacation types below to start exploring.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "16px" }}>
          {CATEGORIES.map((c) => (
            <button key={c.k} onClick={() => onPick && onPick(c.k)} style={{
              position: "relative", height: "200px", borderRadius: "var(--radius-lg)", overflow: "hidden",
              border: "none", cursor: "pointer", padding: 0, textAlign: "left",
              background: `center/cover url('../../assets/photos/${c.img}')`,
              boxShadow: "var(--shadow-md)", fontFamily: "var(--font-sans)",
            }}>
              <span style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(33,58,110,0) 38%, rgba(33,58,110,.82))" }}></span>
              <span style={{ position: "absolute", left: "14px", right: "14px", bottom: "14px", color: "#fff" }}>
                <span style={{ display: "block", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "16.5px", lineHeight: 1.2, textShadow: "0 1px 5px rgba(0,0,0,.5)" }}>{c.k}</span>
                <span style={{ display: "block", fontSize: "11.5px", opacity: 0.95, marginTop: "4px", textShadow: "0 1px 4px rgba(0,0,0,.5)" }}>{c.sub}</span>
              </span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CategoryTiles = CategoryTiles;