// Hero with rotating slides + nav + booking strip
const { useState, useEffect, useRef } = React;

function Nav({ section, openBooking, navOverHero, scrolled }) {
  const items = ["Stays", "Dine", "Events", "Gallery", "Area", "Contact"];
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${navOverHero ? "over-hero" : ""}`}>
      <div className="brand">
        <div className="mark">Simon King</div>
        <div className="loc">Vourvourou · Sithonia</div>
      </div>
      <div className="nav-links">
        {items.map(i => (
          <a key={i} href={`#${i.toLowerCase()}`} className={section === i.toLowerCase() ? "current" : ""}>{i}</a>
        ))}
        <button className="btn btn-ghost" onClick={openBooking}>
          Reserve <span style={{fontSize:14,lineHeight:0}}>→</span>
        </button>
      </div>
    </nav>
  );
}

function Hero({ openBooking }) {
  const [idx, setIdx] = useState(0);
  const slides = window.SK_DATA.hero;

  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % slides.length), 6000);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="hero" id="top" style={{padding: 0}}>
      {slides.map((s, i) => (
        <div key={i} className="hero-img" style={{
          backgroundImage: `url(${s.src})`,
          opacity: i === idx ? 1 : 0,
          zIndex: i === idx ? 1 : 0
        }} />
      ))}

      <div className="hero-inner">
        <h1 className="hero-headline">
          Where nine<br/>islets meet<br/>the <em>pine line</em>.
        </h1>

        <div className="hero-meta">
          <div className="col">
            <strong>Coordinates</strong>
            40.182°N · 23.794°E<br/>
            Vourvourou bay, Sithonia
          </div>
          <div className="hero-caption">{slides[idx].caption} · {slides[idx].label}</div>
          <div className="col" style={{textAlign: "right"}}>
            <strong>Season</strong>
            Open April – October<br/>
            36 apartments · 3 buildings
          </div>
        </div>
      </div>

      <div className="hero-dots">
        {slides.map((_, i) => (
          <div key={i} className={`hero-dot ${i === idx ? "active" : ""}`} onClick={() => setIdx(i)} />
        ))}
      </div>

      <div className="book-strip">
        <button className="book-field book-field-btn" onClick={openBooking}>
          <label>Check in</label>
          <div className="val">Tue 14 Jul <small>2026</small></div>
        </button>
        <button className="book-field book-field-btn" onClick={openBooking}>
          <label>Check out</label>
          <div className="val">Sun 19 Jul <small>2026</small></div>
        </button>
        <button className="book-field book-field-btn" onClick={openBooking}>
          <label>Guests</label>
          <div className="val">2 adults <small>· 1 room</small></div>
        </button>
        <button className="book-cta" onClick={openBooking}>
          Find rooms <span style={{fontSize:14}}>→</span>
        </button>
      </div>
    </section>
  );
}

function Intro() {
  return (
    <section className="intro" id="about">
      <div className="shell">
        <div className="intro-grid">
          <div className="intro-body">
            <div className="mono" style={{color: "var(--terracotta)", marginBottom: 32}}>01 — A small family resort</div>
            <p style={{fontSize: 26, fontFamily: "Cormorant Garamond, serif", lineHeight: 1.4, color: "var(--ink)"}}>
              Three buildings, thirty-six apartments, one pool, a pine grove that runs to the water. Built and run by a single family since the seventies — quietly upgraded every winter.
            </p>
            <p>
              Simon King sits on the western edge of the Vourvourou bay, the only spot in the Aegean where nine separate islets form a sheltered turquoise sea. Karydi beach is a fifteen-minute walk; Diaporos is a ten-minute boat. The pine line keeps the afternoons cool.
            </p>
            <p>
              Choose between the original stone <em>Apartments</em>, the family-quiet <em>Privé</em>, or the new stone-and-timber <em>Junior Suites</em>. Then leave the keys at reception and forget about them.
            </p>

            <div className="stat-row">
              <div className="stat"><div className="num">36</div><div className="lbl">Apartments</div></div>
              <div className="stat"><div className="num">9</div><div className="lbl">Islets in view</div></div>
              <div className="stat"><div className="num">52</div><div className="lbl">Years family-run</div></div>
            </div>
          </div>

          <div className="intro-art">
            <img src="https://simonking.gr/wp-content/uploads/2023/07/IMG_20230708_111250-1500x630.jpg" alt="pool" />
            <div className="badge">Vourvourou · 40.18°N</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Intro });