// Shared bits: Nav, Contact, Lightbox

function Nav({ onNav, currentPage, onLogo }) {
  const { useState, useEffect } = React;
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = currentPage === 'home'
    ? [
        { id: 'philosophy', label: 'Philosophy' },
        { id: 'villas', label: 'The Villas' },
        { id: 'experience', label: 'Experience' },
        { id: 'location', label: 'Location' },
        { id: 'gallery', label: 'Gallery' },
      ]
    : [
        { id: 'home', label: 'Home', cb: () => onNav('home') },
      ];
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <a href="#" onClick={(e) => { e.preventDefault(); onLogo(); }} className="nav-logo">
        <span className="mark"></span>
        <span>Ubuntu<small style={{marginLeft:'8px'}}>Villas · Koh Phangan</small></span>
      </a>
      <div className="nav-links">
        {links.map(l => (
          <a key={l.id} href={l.cb ? '#' : `#${l.id}`}
             onClick={l.cb ? (e) => { e.preventDefault(); l.cb(); } : undefined}>
            {l.label}
          </a>
        ))}
      </div>
      <button className="nav-cta" onClick={() => {
        const el = document.getElementById('contact');
        if (el) el.scrollIntoView({behavior:'smooth', block:'start'});
      }}>
        <span>Enquire</span>
      </button>
    </nav>
  );
}

function Contact({ data, villaName }) {
  const { useState } = React;
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    name: '', email: '',
    villa: villaName || 'Any villa',
    arrive: '', depart: '', guests: '2',
    message: ''
  });
  const upd = (k) => (e) => setForm(f => ({...f, [k]: e.target.value}));
  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSubmitted(true);
  };
  return (
    <section id="contact" className="contact">
      <div className="wrap">
        <div className="index-label" style={{color:'rgba(251,249,243,0.55)'}}>
          <span className="num">VI</span><span>Enquire</span>
        </div>
        <div className="contact-grid">
          <div>
            <h2 className="h-section" style={{maxWidth:'14ch', marginBottom:'24px'}}>
              {submitted ? 'Thank you.' : 'Begin your stay.'}
            </h2>
            <p className="lede" style={{color:'rgba(251,249,243,0.75)', marginBottom:'40px', maxWidth:'42ch'}}>
              {submitted
                ? 'We\'ll be in touch within a day, often sooner. In the meantime, our concierge is on WhatsApp around the clock.'
                : 'Tell us a little about your trip and we\'ll come back with availability, rates, and a thoughtful suggestion or two.'}
            </p>
            {!submitted && (
              <form className="form" onSubmit={submit}>
                <div className="field-row">
                  <div className="field"><label>Your name</label><input value={form.name} onChange={upd('name')} placeholder="Full name" required /></div>
                  <div className="field"><label>Email</label><input type="email" value={form.email} onChange={upd('email')} placeholder="you@example.com" required /></div>
                </div>
                <div className="field-row">
                  <div className="field">
                    <label>Villa</label>
                    <select value={form.villa} onChange={upd('villa')}>
                      <option>Any villa</option>
                      {data.villas.map(v => <option key={v.id}>{v.name}</option>)}
                    </select>
                  </div>
                  <div className="field"><label>Guests</label>
                    <select value={form.guests} onChange={upd('guests')}>
                      {[2,3,4,5,6,7,8].map(n => <option key={n}>{n}</option>)}
                    </select>
                  </div>
                </div>
                <div className="field-row">
                  <div className="field"><label>Arrive</label><input type="date" value={form.arrive} onChange={upd('arrive')} /></div>
                  <div className="field"><label>Depart</label><input type="date" value={form.depart} onChange={upd('depart')} /></div>
                </div>
                <div className="field"><label>A little about your trip</label><textarea rows="3" value={form.message} onChange={upd('message')} placeholder="Anniversary, family with two kids, slow-living week, etc." /></div>
                <button type="submit" className="btn btn-submit">
                  <span>Send enquiry</span><span className="arr"></span>
                </button>
              </form>
            )}
            {submitted && (
              <div className="success-msg">Reference: UB-{Math.random().toString(36).slice(2,8).toUpperCase()} · Reply usually within 24h.</div>
            )}
          </div>

          <aside className="contact-aside">
            <div className="contact-aside-block">
              <div className="label">Direct</div>
              <div className="value">{data.brand.email}</div>
              <div className="links" style={{marginTop:'8px'}}>
                <span style={{color:'rgba(251,249,243,0.65)', fontSize:'13px'}}>Replies within 24 hours, usually less.</span>
              </div>
            </div>
            <div className="contact-aside-block">
              <div className="label">WhatsApp · 24/7 concierge</div>
              <div className="value">{data.brand.contact.whatsapp}</div>
            </div>
            <div className="contact-aside-block">
              <div className="label">Also on</div>
              <div className="links">
                <a href="#">Airbnb · {data.brand.contact.airbnb}</a>
                <a href="#">Booking.com · {data.brand.contact.booking}</a>
              </div>
            </div>
            <div className="contact-aside-block">
              <div className="label">Find us</div>
              <div className="value" style={{fontSize:'18px'}}>Koh Phangan, Surat Thani · Thailand 84280</div>
            </div>
          </aside>
        </div>

        <div className="footer-meta">
          <span>© 2026 Ubuntu Villas. I am, because we are.</span>
          <span>Koh Phangan · Thailand</span>
        </div>
      </div>
    </section>
  );
}

function Lightbox({ items, index, onClose, onPrev, onNext }) {
  const { useEffect } = React;
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev();
      if (e.key === 'ArrowRight') onNext();
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose, onPrev, onNext]);
  if (!items || items.length === 0) return null;
  const item = items[index];
  return (
    <div className="lightbox" onClick={onClose}>
      <img className="lightbox-img" src={item.src} alt={item.caption} onClick={(e) => e.stopPropagation()} />
      <button className="lightbox-close" onClick={onClose} aria-label="Close">✕</button>
      {items.length > 1 && (
        <>
          <button className="lightbox-nav prev" onClick={(e) => { e.stopPropagation(); onPrev(); }} aria-label="Previous">←</button>
          <button className="lightbox-nav next" onClick={(e) => { e.stopPropagation(); onNext(); }} aria-label="Next">→</button>
        </>
      )}
      <div className="lightbox-cap" onClick={(e) => e.stopPropagation()}>
        <span>{item.caption}</span>
        <span className="sep">·</span>
        <span>{index + 1} / {items.length}</span>
      </div>
    </div>
  );
}

window.Nav = Nav;
window.Contact = Contact;
window.Lightbox = Lightbox;