// Buildings list, amenities grid, events strip
function Buildings({ openBooking }) {
  const items = window.SK_DATA.buildings;
  return (
    <section className="buildings" id="stays">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="mono" style={{color:"var(--terracotta)"}}>02 — Stays</div>
            <h2>Three<br/>buildings,<br/>one bay.</h2>
          </div>
          <p>
            Each building has its own character. The old stone Apartments are slow and shaded; the Privé is for families who want quiet; the New is bright modern Junior Suites with sea views. Pick by mood — the pool, the breakfast room and the bar are shared.
          </p>
        </div>

        <div className="bldg-list">
          {items.map((b, i) => (
            <div className="bldg-row" key={b.id} onClick={openBooking}>
              <div className="num">0{i + 1}</div>
              <div className="thumb"><img src={b.thumb} alt={b.name} /></div>
              <div>
                <div className="name">
                  {b.name}
                  <small>{b.kicker}</small>
                </div>
                <div className="keys">
                  {b.keys.map(k => <span key={k}>{k}</span>)}
                </div>
              </div>
              <div className="blurb">{b.blurb}</div>
              <div className="arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Amenities() {
  return (
    <section id="amenities">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="mono" style={{color:"var(--terracotta)"}}>03 — Amenities</div>
            <h2>The slow<br/>essentials.</h2>
          </div>
          <p>
            What we have and what we don't. No spa, no kids' club, no overpriced loungers on a private beach. The things below, instead — quietly maintained, included with the stay.
          </p>
        </div>

        <div className="amenities-grid">
          {window.SK_DATA.amenities.map((a, i) => (
            <div className="amenity" key={i}>
              <div className="cap">{String(i+1).padStart(2,"0")} / {a.cap}</div>
              <div className="t">{a.t}</div>
              <div className="d">{a.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Events() {
  const evs = [
    { time: "07:00",        ev: "Sunrise yoga on the deck",     sub: "The Harpy Yoga. Free for guests, mat provided. Open to walk-ins.",                            day: "Daily" },
    { time: "08:00 – 11:00", ev: "Breakfast in the new restaurant", sub: "Full Greek buffet — bread baked at six, eggs to order, yoghurt with thyme honey.",         day: "Daily" },
    { time: "10:30",        ev: "Boat around the nine islets",   sub: "Captain Stelios takes guests around the bay. Two cove stops, snorkels onboard.",            day: "Thu / Sat" },
    { time: "13:00",        ev: "Pool bar opens",                sub: "Snacks, drinks, espresso from a machine that knows what it's doing.",                       day: "Daily" },
    { time: "18:30",        ev: "Sunset aperitivo",              sub: "House negroni, olives from Olympias, the bay turning gold.",                                 day: "Daily" },
    { time: "20:30",        ev: "Greek folk night",              sub: "Live laïkó from the bouzouki trio. Order any meal — the wine is on the house.",            day: "Tue" },
    { time: "22:00",        ev: "Karaoke at the pool bar",       sub: "Microphone passed around until the last brave guest. No judgement, no curfew.",            day: "Fri" }
  ];
  return (
    <section className="events" id="events">
      <div className="shell">
        <div className="events-head">
          <div className="mono" style={{color:"color-mix(in srgb, var(--paper) 60%, transparent)"}}>04 — A day at the resort</div>
          <h3>A day,<br/>in rhythm.</h3>
        </div>
        <div className="events-list">
          {evs.map((e, i) => (
            <div className="event-row" key={i}>
              <div className="day">{e.time}</div>
              <div className="ev">{e.ev}<small>{e.sub}</small></div>
              <div className="time">{e.day}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Buildings, Amenities, Events });