// Villa detail page
function VillaDetail({ data, villaId, onBack, onOpenVilla, onOpenLightbox }) {
  const { useState, useMemo } = React;
  const villa = data.villas.find(v => v.id === villaId);
  if (!villa) return null;
  const others = data.villas.filter(v => v.id !== villaId);

  const categories = useMemo(() => {
    const cats = ['All', ...Array.from(new Set(villa.gallery.map(g => g.category)))];
    return cats;
  }, [villa]);

  const [filter, setFilter] = useState('All');
  const filtered = filter === 'All' ? villa.gallery : villa.gallery.filter(g => g.category === filter);

  // Reel = first 8 gallery items
  const reel = villa.gallery.slice(0, 8);

  return (
    <>
      {/* Hero */}
      <section className="villa-hero">
        <div className="hero-img" style={{backgroundImage: `url(${villa.hero})`}} />
        <div className="hero-veil" />
        <div className="hero-grain" />
        <div className="hero-content">
          <div className="hero-eyebrow">— Villa {villa.number} · {villa.area}</div>
          <h1 className="hero-title" style={{fontSize:'clamp(48px, 7vw, 112px)'}}>
            {villa.name}
          </h1>
          <p className="hero-meta-text" style={{marginTop:'24px', maxWidth:'48ch'}}>{villa.tagline}</p>
        </div>
      </section>

      {/* Spec bar */}
      <div className="wrap">
        <div className="villa-spec-bar">
          <div className="spec"><span className="spec-label">Location</span><span className="spec-value">{villa.area}</span></div>
          <div className="spec"><span className="spec-label">Setting</span><span className="spec-value">{villa.coast}</span></div>
          <div className="spec"><span className="spec-label">Bedrooms</span><span className="spec-value">{villa.bedrooms}</span></div>
          <div className="spec"><span className="spec-label">Sleeps</span><span className="spec-value">Up to {villa.guests}</span></div>
          <div className="spec"><span className="spec-label">Stay length</span><span className="spec-value">3 nights min.</span></div>
          <div className="spec" style={{marginLeft:'auto'}}>
            <span className="spec-label">Reservations</span>
            <a href="#contact" className="spec-value" style={{textDecoration:'underline', textDecorationThickness:'1px', textUnderlineOffset:'4px'}}>Enquire</a>
          </div>
        </div>
      </div>

      {/* Overview */}
      <section className="section wrap">
        <div className="overview">
          <div className="overview-side">
            <div className="index-label" style={{margin:0}}><span className="num">I</span><span>Overview</span></div>
          </div>
          <div>
            {villa.description.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* Photo reel */}
      <section className="section-tight">
        <div className="wrap" style={{marginBottom:'32px'}}>
          <div className="spread">
            <div>
              <div className="index-label"><span className="num">II</span><span>The Villa</span></div>
              <h2 className="h-section" style={{maxWidth:'18ch'}}>A house that opens to the trees.</h2>
            </div>
          </div>
        </div>
        <div className="reel">
          {reel.map((r, i) => (
            <div key={i} className="reel-item" onClick={() => onOpenLightbox(villa.gallery, villa.gallery.indexOf(r))}>
              <img src={r.src} alt={r.caption} loading="lazy" />
              <div className="reel-cap">{r.caption}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Highlights */}
      <section className="section-tight wrap">
        <div className="index-label"><span className="num">III</span><span>Highlights</span></div>
        <h2 className="h-section" style={{maxWidth:'14ch', marginBottom:'48px'}}>What's included.</h2>
        <div className="highlights">
          {villa.highlights.map((h, i) => (
            <div key={i}>
              <div className="highlight-num">— {String(i + 1).padStart(2, '0')}</div>
              <div className="highlight-text">{h}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Rooms */}
      {villa.rooms && villa.rooms.length > 0 && (
        <section className="section-tight wrap">
          <div className="index-label"><span className="num">IV</span><span>Bedrooms</span></div>
          <h2 className="h-section" style={{maxWidth:'14ch', marginBottom:'48px'}}>Where you sleep.</h2>
          <div className="rooms-table">
            {villa.rooms.map((r, i) => (
              <div key={i} className="rooms-row">
                <span className="num">— {String(i + 1).padStart(2, '0')}</span>
                <h3 className="name">{r.name}</h3>
                <div><span className="cell-label">Floor</span><span className="cell-value">{r.floor}</span></div>
                <div><span className="cell-label">Bed</span><span className="cell-value">{r.bed}</span></div>
                <div><span className="cell-label">Bath</span><span className="cell-value">{r.bath}</span></div>
                <div className="note">{r.note}</div>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* Detail gallery */}
      <section className="section-tight wrap">
        <div className="index-label"><span className="num">V</span><span>Gallery</span></div>
        <h2 className="h-section" style={{marginBottom:'32px'}}>The full house.</h2>
        <div className="pills">
          {categories.map(c => (
            <button key={c} className={'pill' + (c === filter ? ' active' : '')} onClick={() => setFilter(c)}>{c}</button>
          ))}
        </div>
        <DetailGallery items={filtered} onOpen={(idx) => onOpenLightbox(filtered, idx)} />
      </section>

      <hr className="rule" />

      {/* Other villas */}
      <section className="section-tight wrap">
        <div className="index-label"><span className="num">VI</span><span>The other two</span></div>
        <h2 className="h-section" style={{maxWidth:'14ch', marginBottom:'48px'}}>Continue exploring.</h2>
        <div className="other-villas">
          {others.map(o => (
            <div key={o.id} className="other-villa" onClick={() => onOpenVilla(o.id)}>
              <img src={o.thumb} alt={o.name} loading="lazy" />
              <div className="other-villa-content">
                <div className="num">— {o.number} · {o.area}</div>
                <div className="name">{o.name}</div>
                <div className="tag">{o.tagline}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <Contact data={data} villaName={villa.name} />
    </>
  );
}

function DetailGallery({ items, onOpen }) {
  // Masonry-ish layout via spans
  const spans = [
    'span 7', 'span 5', 'span 4', 'span 4', 'span 4',
    'span 6', 'span 6', 'span 4', 'span 4', 'span 4',
    'span 5', 'span 7'
  ];
  return (
    <div className="detail-gallery">
      {items.map((it, i) => {
        const span = spans[i % spans.length];
        return (
          <div key={i} className="gi"
               style={{gridColumn: span, aspectRatio: i % 5 === 0 ? '4/3' : '1/1'}}
               onClick={() => onOpen(i)}>
            <img src={it.src} alt={it.caption} loading="lazy" />
          </div>
        );
      })}
    </div>
  );
}

window.VillaDetail = VillaDetail;