/* "Included with your membership" — the full benefit spectrum, photo-led. */
const BENEFITS = [
  { k: "Condos",      img: "benefit-condos.jpg",  d: "Worldwide 7-night stays at member rates." },
  { k: "Cruises",     img: "benefit-cruises.jpg", d: "Sail for less across top cruise lines." },
  { k: "Hotels",      img: "benefit-hotels.jpg",  d: "Member pricing at thousands of hotels." },
  { k: "Cars",        img: "benefit-cars.jpg",    d: "Discounted rentals wherever you land." },
  { k: "Flights",     img: "benefit-flights.jpg", d: "Fly to your getaway for less." },
  { k: "Global Mall", img: "benefit-mall.jpg",    d: "Everyday savings on the brands you love." },
  { k: "Tours",       img: "benefit-tours.jpg",   d: "Guided escapes and day trips, bundled." },
  { k: "Camping",     img: "benefit-camping.jpg", d: "RV sites and campgrounds, member-priced." },
];

function BenefitsSection() {
  return (
    <section style={{ background: "#fff", borderTop: "1px solid var(--line-2)", padding: "52px 30px 60px" }}>
      <div style={{ maxWidth: "1040px", margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: "26px", maxWidth: "660px", marginLeft: "auto", marginRight: "auto" }}>
          <div style={{ fontSize: "11px", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gold-600)", fontWeight: 700, marginBottom: "8px" }}>Your membership, put to work</div>
          <h2 style={{ margin: "0 0 10px", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "28px", color: "var(--navy-800)", letterSpacing: "-0.01em" }}>Included with your membership</h2>
          <p style={{ margin: 0, fontSize: "15px", color: "var(--muted)", lineHeight: 1.55 }}>
            Your membership is more than condos. Tap into member pricing across cruises, tours, hotels, car rentals, flights, camping, and the Global Mall — everything you need for the trip, all in one place and all at member rates.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "16px" }}>
          {BENEFITS.map((b) => (
            <div key={b.k} style={{
              background: "#fff", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)",
              overflow: "hidden", boxShadow: "var(--shadow-sm)",
            }}>
              <div style={{
                height: "118px", position: "relative",
                background: b.img ? `center/cover url('../../assets/photos/${b.img}')` : b.grad,
              }}>
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5))" }}></div>
                <span style={{
                  position: "absolute", left: "12px", bottom: "10px", color: "#fff",
                  fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "16px",
                  textShadow: "0 1px 4px rgba(0,0,0,.45)",
                }}>{b.k}</span>
              </div>
              <div style={{ padding: "11px 13px 14px", fontSize: "12.5px", color: "var(--muted)", lineHeight: 1.45 }}>{b.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.BenefitsSection = BenefitsSection;