// Home page component
function Home({ data, onOpenVilla, onOpenLightbox }) {
  const villas = data.villas;

  // Curated gallery from all villas
  const galleryImgs = [
    villas[0].gallery[0], villas[0].gallery[3],
    villas[0].gallery[1], villas[0].gallery[7],
    villas[0].gallery[2], villas[0].gallery[10],
    villas[0].gallery[4],
  ];

  return (
    <>
      <Hero data={data} onCta={() => onOpenVilla(villas[0].id)} />

      {/* Philosophy */}
      <section id="philosophy" className="section wrap">
        <div className="index-label"><span className="num">I</span><span>Philosophy</span></div>
        <div className="philosophy">
          <h2 className="philosophy-quote">
            <em>"I am, because we are."</em>
            <br />A small collection of private villas on Koh Phangan, run as if they were our own.
          </h2>
          <div className="philosophy-body">
            <p>Ubuntu Villas began as a way to share three homes we love — each one in a different corner of the island, each with its own temperament. A jungle home for families. A sunset villa for slow evenings. A bright sea-view house above the bay.</p>
            <p>We keep the collection deliberately small so that every stay is carefully attended to: thoughtful interiors, a quietly attentive concierge, and a maintenance team that treats each home as their own.</p>
            <p>What unites them is the spirit of <em style={{color:'var(--accent)'}}>ubuntu</em> — a Southern African philosophy of shared humanity. We design our villas around it: rooms that gather people, kitchens that get used, gardens that hold conversation late into the evening.</p>
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* The Villas */}
      <section id="villas" className="section wrap">
        <div className="spread" style={{marginBottom: 'clamp(40px, 5vw, 72px)'}}>
          <div>
            <div className="index-label"><span className="num">II</span><span>The Villas</span></div>
            <h2 className="h-section" style={{maxWidth:'18ch'}}>Three private homes, one shared philosophy.</h2>
          </div>
          <div className="lede" style={{maxWidth:'34ch'}}>
            Set in the jungle, on the western cliff, and above the northern bay — each villa is its own world.
          </div>
        </div>

        <div className="villas">
          {villas.map((v) => (
            <article key={v.id} className="villa-card" onClick={() => onOpenVilla(v.id)}>
              <div className="villa-img">
                <img src={v.thumb} alt={v.name} loading="lazy" />
                <div className="villa-img-meta">
                  <span>{v.area}</span>
                  <span>{v.coast}</span>
                </div>
              </div>
              <div className="villa-card-body">
                <div className="villa-card-meta">
                  <span className="num">— {v.number}</span>
                  <span>{v.bedrooms} bed · sleeps {v.guests}</span>
                </div>
                <h3 className="villa-card-name">{v.name}</h3>
                <p className="villa-card-tag">{v.tagline}</p>
                <span className="villa-card-link">Discover the villa</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Experience */}
      <section id="experience" className="experience">
        <div className="section-tight wrap">
          <div className="spread" style={{marginBottom: 'clamp(40px, 5vw, 64px)'}}>
            <div>
              <div className="index-label"><span className="num">III</span><span>Experience</span></div>
              <h2 className="h-section" style={{maxWidth:'18ch'}}>Quiet hospitality, included.</h2>
            </div>
            <p className="lede" style={{maxWidth:'40ch'}}>
              Every Ubuntu stay is supported by a small team on the island. These services come standard — others can be arranged on request.
            </p>
          </div>
          <div className="experience-grid">
            {data.experiences.map((e, i) => (
              <div key={i}>
                <div className="experience-num">— {String(i + 1).padStart(2, '0')}</div>
                <div className="experience-note">{e.note}</div>
                <div className="experience-title">{e.title}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Location */}
      <section id="location" className="section wrap">
        <div className="index-label"><span className="num">IV</span><span>Location</span></div>
        <div className="location">
          <div>
            <h2 className="h-section" style={{maxWidth:'14ch', marginBottom:'24px'}}>An island held in three corners.</h2>
            <p className="lede">Koh Phangan sits in the Gulf of Thailand, an hour by ferry from Koh Samui. Our three villas are spread across the island — pick the coast that fits the trip.</p>
            <div style={{marginTop:'32px', display:'flex', flexDirection:'column', gap:'18px'}}>
              {villas.map((v, i) => (
                <div key={v.id} style={{display:'flex', gap:'16px', borderTop:'1px solid var(--line)', paddingTop:'14px'}}>
                  <span className="eyebrow" style={{minWidth:'32px'}}>{v.number}</span>
                  <div>
                    <div style={{fontFamily:'var(--font-display)', fontSize:'18px', fontWeight:500, letterSpacing:'-0.01em'}}>{v.name}</div>
                    <div style={{fontSize:'13px', color:'var(--muted)', marginTop:'2px'}}>{v.area} · {v.coast}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <IslandMap villas={villas} />
        </div>
      </section>

      <hr className="rule" />

      {/* Gallery */}
      <section id="gallery" className="section wrap">
        <div className="spread" style={{marginBottom: 'clamp(40px, 5vw, 64px)'}}>
          <div>
            <div className="index-label"><span className="num">V</span><span>Gallery</span></div>
            <h2 className="h-section" style={{maxWidth:'14ch'}}>Moments from each villa.</h2>
          </div>
        </div>
        <div className="gallery">
          {galleryImgs.map((g, i) => (
            <div key={i} className="gallery-item" onClick={() => onOpenLightbox(galleryImgs, i)}>
              <img src={g.src} alt={g.caption} loading="lazy" />
            </div>
          ))}
        </div>
      </section>

      <Contact data={data} />
    </>
  );
}

function Hero({ data, onCta }) {
  return (
    <section className="hero">
      <div className="hero-img" style={{backgroundImage: `url(${data.villas[0].hero})`}} />
      <div className="hero-veil" />
      <div className="hero-grain" />
      <div className="hero-content">
        <div className="hero-eyebrow">Koh Phangan · Thailand · Est. 2019</div>
        <h1 className="hero-title">
          A quiet collection<br />
          <em>of private homes.</em>
        </h1>
        <div className="hero-meta">
          <p className="hero-meta-text">
            Three private villas, three corners of an island. Designed for slow time, shared meals, and the kind of stay that ends before you're ready.
          </p>
          <button className="btn btn-light" onClick={onCta}>
            <span>Discover the villas</span>
            <span className="arr"></span>
          </button>
        </div>
      </div>
      <div className="hero-bottom-bar">
        <span>I am, because we are.</span>
        <span className="scroll-hint">Scroll</span>
      </div>
    </section>
  );
}

function IslandMap({ villas }) {
  // Stylised map of Koh Phangan with 3 pins
  // Pin positions are approx. relative to a stylised island shape
  const pins = [
    { id: 'baan-mee-suk', x: 52, y: 56, label: 'Baan Mee Suk' },
    { id: 'ohana', x: 22, y: 48, label: 'Ohana' },
    { id: 'lilawadee', x: 58, y: 22, label: 'Lilawadee' },
  ];
  return (
    <div className="map">
      <svg viewBox="0 0 100 75" className="map-svg" preserveAspectRatio="none">
        <defs>
          <pattern id="dots" width="4" height="4" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="0.4" fill="rgba(26,24,20,0.18)" />
          </pattern>
        </defs>
        <rect width="100" height="75" fill="url(#dots)" />
        {/* Island silhouette */}
        <path d="M 28 18 Q 18 22, 16 32 Q 12 42, 18 52 Q 22 62, 34 64 Q 48 68, 60 62 Q 74 58, 80 48 Q 84 38, 80 28 Q 74 18, 62 16 Q 46 12, 38 14 Q 32 16, 28 18 Z"
                fill="rgba(26,24,20,0.06)"
                stroke="rgba(26,24,20,0.45)"
                strokeWidth="0.4"
                strokeDasharray="0.8 0.8" />
          {/* Coastlines suggestion */}
          <path d="M 28 18 Q 26 24, 30 28" stroke="rgba(26,24,20,0.3)" strokeWidth="0.3" fill="none" />
          <path d="M 60 16 Q 64 22, 62 28" stroke="rgba(26,24,20,0.3)" strokeWidth="0.3" fill="none" />
          {/* Label */}
          <text x="50" y="40" textAnchor="middle"
                fontFamily="var(--font-display)"
                fontSize="2.8"
                letterSpacing="0.4"
                fill="rgba(26,24,20,0.45)">
            KOH PHANGAN
          </text>
          <text x="50" y="44" textAnchor="middle"
                fontFamily="var(--font-display)"
                fontSize="1.2"
                letterSpacing="0.3"
                fill="rgba(26,24,20,0.4)">
            GULF OF THAILAND
          </text>
      </svg>
      {pins.map((p) => (
        <div key={p.id} className="map-pin" style={{left: p.x + '%', top: p.y + '%'}}>
          <span className="pin-label">{p.label}</span>
          <span className="pin-dot" />
        </div>
      ))}
    </div>
  );
}

window.Home = Home;