const { Badge } = window.GDVExpressDesignSystem_766357;

const CONDOS = [
  // ----- Domestic (ordered by check-in date) -----
  { title: "Ocean Pointe Suites @ Key Largo", city: "Tavernier", location: "FL", units: 2, unitSize: "1 Bedroom · 4 Occ", kitchen: "Full · 4 Occ", rating: 3, dates: "Sat 09/12/26 – 09/19/26", id: "RA404330404-20260912", price: "$1,219", image: "condo-keylargo.png", intl: false },
  { title: "Club Wyndham Royal Sea Cliff", city: "Kailua", location: "HI", units: 2, unitSize: "2 Bedroom · 6 Occ", kitchen: "Full · 4 Occ", rating: 4, dates: "Fri 10/30/26 – 11/06/26", id: "R6939340604-20261030", price: "$2,219", image: "condo-royalseacliff.png", intl: false },
  { title: "Blue Ridge Village", city: "Banner Elk", location: "NC", units: 1, unitSize: "1 Bedroom · 4 Occ", kitchen: "Full · 2 Occ", rating: 4.5, dates: "Fri 12/18/26 – 12/25/26", id: "R0817330402-20261218", price: "$1,353", image: "condo-bannerelk.png", intl: false },
  { title: "Sedona Summit, A Hilton Vacation Club", city: "Sedona", location: "AZ", units: 2, unitSize: "1 Bedroom · 4 Occ", kitchen: "Full · 4 Occ", rating: 4, dates: "Sat 01/30/27 – 02/06/27", id: "R4038330404-20270130", price: "$721", image: "condo-sedona.png", intl: false },
  { title: "Carolina Grande", city: "Myrtle Beach", location: "SC", units: 2, unitSize: "1 Bedroom · 4 Occ", kitchen: "Full · 2 Occ", rating: 4, dates: "Fri 02/26/27 – 03/05/27", id: "R8693330402-20270226", price: "$808", image: "condo-myrtle.png", intl: false },
  { title: "Worldmark Lake Of The Ozarks", city: "Osage Beach", location: "MO", units: 2, unitSize: "1 Bedroom · 4 Occ", kitchen: "Full · 2 Occ", rating: 4.5, dates: "Fri 04/23/27 – 04/30/27", id: "R6383330402-20270423", price: "$646", image: "condo-osage.png", intl: false },
  // ----- International (ordered by check-in date) -----
  { title: "Portes Du Soleil", city: "Champoussin", location: "Switzerland", units: 2, unitSize: "Studio · 2 Occ", kitchen: "Full · 2 Occ", rating: 3.5, dates: "Sat 10/31/26 – 11/07/26", id: "R2843320202-20261031", price: "$559", image: "condo-portes.png", intl: true },
  { title: "Residences By The Fives", city: "Playa Del Carmen", location: "QROO Mexico", units: 1, unitSize: "2 Bedroom · 6 Occ", kitchen: "Partial · 4 Occ", rating: 0, dates: "Tue 01/12/27 – 01/19/27", id: "RFB83240604-20270112", price: "$1,242", image: "condo-playa.png", intl: true },
  { title: "Sapphire Beach Resort", city: "Ambergris Caye", location: "Belize", units: 2, unitSize: "1 Bedroom · 2 Occ", kitchen: "Full · 2 Occ", rating: 0, dates: "Fri 03/12/27 – 03/19/27", id: "RF650330202-20270312", price: "$1,479", image: "condo-belize.png", intl: true },
  { title: "Worldmark Canmore - Banff", city: "Canmore", location: "Canada", units: 2, unitSize: "Studio · 2 Occ", kitchen: "Partial · 2 Occ", rating: 4.5, dates: "Fri 04/23/27 – 04/30/27", id: "RA408220202-20270423", price: "$476", image: "condo-banff.png", intl: true },
  { title: "Mariner Shores Resort", city: "Miami", location: "Australia", units: 1, unitSize: "2 Bedroom · 6 Occ", kitchen: "Full · 6 Occ", rating: 4.5, dates: "Fri 06/25/27 – 07/02/27", id: "RR933340606-20270625", price: "$1,452", image: "condo-australia.png", intl: true },
  { title: "Residence Borgo Al Sole", city: "Sappada", location: "Belluno (BL) Italy", units: 2, unitSize: "2 Bedroom · 6 Occ", kitchen: "Partial · 4 Occ", rating: 2, dates: "Sat 06/26/27 – 07/03/27", id: "R2383240604-20270626", price: "$1,260", image: "condo-italy.png", intl: true },
];

/* Featured condos, split into Domestic & International, in the real booking format. */
function ResultsGrid({ onBook }) {
  const reserve = (c) => onBook && onBook({
    title: c.title, location: `${c.city}, ${c.location}`,
    meta: `${c.dates} · ${c.unitSize}`, price: c.price, rating: c.rating,
    image: c.image, preferred: false,
  });

  const Group = ({ label, items }) => (
    <div style={{ marginTop: "10px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: "10px", margin: "8px 0 16px" }}>
        <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "16px", color: "var(--navy-800)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{label}</h3>
        <span style={{ flex: 1, height: "1px", background: "var(--line)" }}></span>
        <span style={{ fontSize: "12px", color: "var(--muted)" }}>{items.length} stays</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "18px" }}>
        {items.map((c) => <CondoCard key={c.id} condo={c} onReserve={reserve} />)}
      </div>
    </div>
  );

  return (
    <section style={{ background: "linear-gradient(180deg,#edf2f9,#f4f7fb)", borderTop: "1px solid var(--line-2)", borderBottom: "1px solid var(--line-2)", padding: "48px 30px 58px" }}>
      <div style={{ maxWidth: "1040px", margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: "12px", marginBottom: "4px" }}>
          <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "30px", color: "var(--navy-800)", letterSpacing: "-0.01em" }}>Featured condos</h2>
          <Badge tone="pref">Member rates</Badge>
        </div>
        <p style={{ margin: "0 0 6px", fontSize: "15px", color: "var(--muted)", maxWidth: "680px", lineHeight: 1.55 }}>Here are some of our members' favorites — a handful of the worldwide 7-night condos waiting in your membership, from Florida beaches to the Swiss Alps. Every stay is shown at your member rate, so the price you see is the price you pay. Pick a check-in date and reserve in a couple of taps.</p>
        <Group label="Domestic" items={CONDOS.filter((c) => !c.intl)} />
        <div style={{ height: "26px" }}></div>
        <Group label="International" items={CONDOS.filter((c) => c.intl)} />
      </div>
    </section>
  );
}
window.ResultsGrid = ResultsGrid;
window.GDV_CONDOS = CONDOS;