/* Sea La Vie — page bodies (one component per route) */
const { useState: useP, useEffect: useEp, useMemo: useM } = React;

/* ====================================================================
   HOME
   ==================================================================== */
function HomePage() {
  return (
    <PageLayout current="Home" withMarquee={false}>
      <Hero />
      <div style={{maxWidth: 1400, margin: "0 auto", padding: "0 40px"}}>
        <BookingWidget />
      </div>
      <div style={{marginTop: 80}}><Marquee /></div>

      <section className="section">
        <div className="section-header">
          <OrnamentRow />
          <div className="eyebrow">The Residences</div>
          <h2>Four houses, <em>one estate.</em></h2>
          <p>Each residence has its own character — a courtyard, a long pool deck, a forest plunge pool, a headland with the view down the coast. Choose one, or take all four for a private party.</p>
        </div>
        <ResidencesGrid />
        <div style={{textAlign: "center", marginTop: 60}}>
          <a className="btn-line" href="residences.html">Explore all four residences <span className="arrow"></span></a>
        </div>
      </section>

      <AvailabilityStrip />
      <ProvenanceSection />
      <LocationMapSection />

      <section className="section">
        <div className="section-header">
          <OrnamentRow />
          <div className="eyebrow">The Journal</div>
          <h2>Notes from <em>the coast.</em></h2>
          <p>Field guides, recipes, conservation, and the slow rhythms of the south coast — written by our team and by the makers we work with.</p>
        </div>
        <div className="journal-grid">
          {JOURNAL.slice(0, 3).map((j, i) => (
            <a key={i} href="journal.html" className={`j-card ${j.feature ? "feature" : ""}`} style={{textDecoration:"none", color:"inherit"}}>
              <div className="j-image" style={{backgroundImage: `url(${j.img})`}}></div>
              <div className="j-meta">{j.cat} · {j.date}</div>
              <h4>{j.title[0]} <em>{j.title[1]}</em></h4>
              <p>{j.excerpt}</p>
              <span className="j-read">Read the entry</span>
            </a>
          ))}
        </div>
      </section>
    </PageLayout>
  );
}

/* ====================================================================
   RESIDENCES — Detailed page with anchored sections per villa
   ==================================================================== */
function ResidenceDetail({ v, flip, currency }) {
  return (
    <section id={v.id} className="provenance" style={{
      padding: "100px 80px",
      gridTemplateColumns: flip ? "1.1fr 1fr" : "1fr 1.1fr",
      direction: flip ? "rtl" : "ltr"
    }}>
      <div className="provenance-image" style={{backgroundImage: `url(${v.image})`, direction: "ltr", aspectRatio: "3 / 4"}}></div>
      <div className="provenance-copy" style={{direction: "ltr"}}>
        <OrnamentRow />
        <div className="eyebrow">{v.badge}</div>
        <h2>{v.name[0]} <em>{v.name[1]}</em></h2>
        <p>{v.desc}</p>
        <div className="facts">
          <div><div className="label">Bedrooms</div><div className="value">{v.bedrooms}</div></div>
          <div><div className="label">Bathrooms</div><div className="value">{v.baths}</div></div>
          <div><div className="label">Interior</div><div className="value">{v.sqft} sq ft</div></div>
          <div><div className="label">Sleeps</div><div className="value">{v.sleeps} guests</div></div>
          <div><div className="label">From</div><div className="value">{formatPrice(v.priceUSD, currency)}</div></div>
          <div><div className="label">Per</div><div className="value" style={{fontSize: 16}}>{v.period}</div></div>
        </div>
        <div style={{display: "flex", gap: 22, marginTop: 36, flexWrap: "wrap"}}>
          <a href={`availability.html?villa=${v.id}`} className="btn-solid">Check availability</a>
          <a href={`mailto:${CONTACT.email}?subject=${encodeURIComponent("Enquiry — " + v.name.join(" "))}`} className="btn-line">Enquire by email <span className="arrow"></span></a>
        </div>
      </div>
    </section>
  );
}

function ResidencesPage() {
  const [currency] = useCurrency();
  return (
    <PageLayout current="Residences" withMarquee>
      <PageHead
        eyebrow="The Residences"
        title="Four houses,"
        titleEm="one estate."
        blurb="Four exclusive residences set within indigenous coastal forest, one hundred metres from the Indian Ocean. Each residence accommodates up to four guests in privacy; take all four together as a whole-estate buyout for sixteen."
        img={PHOTO.villasAerial}
        crumb="Residences"
      />
      {VILLAS.map((v, i) => <ResidenceDetail key={v.id} v={v} flip={i % 2 === 1} currency={currency} />)}

      <section className="section">
        <div className="section-header">
          <OrnamentRow />
          <div className="eyebrow">Whole-Estate Buyout</div>
          <h2>The entire property, <em>privately yours.</em></h2>
          <p>For weddings, retreats, multi-generational holidays and corporate gatherings, the four residences can be taken as a single buyout — sixteen bedrooms, twenty-eight guests, two pools, a private chef brigade, and a stretch of coastline to yourself.</p>
        </div>
        <div style={{textAlign: "center"}}>
          <a href={`mailto:${CONTACT.email}?subject=${encodeURIComponent("Whole-estate buyout enquiry")}`} className="btn-solid">Enquire about a buyout</a>
        </div>
      </section>
    </PageLayout>
  );
}

/* ====================================================================
   EXPERIENCES — all categories with sub-tabs
   ==================================================================== */
function ExperiencesPage() {
  const [tab, setTab] = useP("Ocean");
  const cats = ["Ocean", "Adrenaline", "Wellness", "Excursions"];
  return (
    <PageLayout current="Experiences" withMarquee>
      <PageHead
        eyebrow="Experiences"
        title="A coastline"
        titleEm="composed by hand."
        blurb="From the world-class kitesurf coast at Galu to the dhow yard at Shimoni, the south coast is one of the great underrated stretches of African travel. Every experience here is curated and run by the people who live it."
        img={PHOTO.dhowSail}
        crumb="Experiences"
      />
      <section className="section">
        <div className="discover-tabs">
          {cats.map(c => (
            <button key={c} className={tab === c ? "active" : ""} onClick={() => setTab(c)}>{c}</button>
          ))}
        </div>
        <ExperiencesGrid kind={tab} />
        <div style={{marginTop: 80, padding: "40px 0", borderTop: "1px solid var(--line-soft)", textAlign: "center"}}>
          <div className="eyebrow" style={{marginBottom: 14}}>Concierge</div>
          <h3 style={{fontFamily: "var(--serif)", fontWeight: 300, fontSize: 28, margin: 0}}>Looking for something specific? Tell us and we'll arrange it.</h3>
          <a href={`mailto:${CONTACT.email}?subject=Experience%20enquiry`} className="btn-line" style={{marginTop: 26, display:"inline-flex"}}>Email our concierge <span className="arrow"></span></a>
        </div>
      </section>
    </PageLayout>
  );
}

/* ====================================================================
   CUISINE
   ==================================================================== */
function CuisinePage() {
  return (
    <PageLayout current="Cuisine" withMarquee>
      <PageHead
        eyebrow="Cuisine"
        title="The Indian Ocean,"
        titleEm="recorded in food."
        blurb="Swahili cuisine is Persian, Indian, Portuguese, Omani and African all at once. Our in-villa team draws from within a hundred kilometres of the property, and the coast around us hosts some of East Africa's most celebrated dining rooms."
        img={PHOTO.swahiliFood}
        crumb="Cuisine"
      />
      <section className="section">
        <div className="section-header" style={{maxWidth: 760}}>
          <div className="eyebrow">In-villa & near-by</div>
          <h2>Six tables <em>worth knowing.</em></h2>
          <p>A selection of in-villa private dining options and the most loved restaurants on the south coast. Reservations are made by your travel curator on request.</p>
        </div>
        <CuisineGrid />
      </section>

      <section style={{background: "var(--ivory-deep)", padding: "100px 40px"}}>
        <div style={{maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center"}} className="cuisine-extra-grid">
          <div>
            <OrnamentRow />
            <div className="eyebrow">The Villa Kitchen</div>
            <h2 style={{fontFamily: "var(--serif)", fontWeight: 300, fontSize: 42, margin: "16px 0 22px", lineHeight: 1.1}}>A chef in the house, <em style={{fontStyle:"italic", color: "var(--sky-deep)"}}>every day.</em></h2>
            <p style={{color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.8}}>Every residence comes with a dedicated chef brigade who shop the Likoni fish market at dawn and the Ukunda spice stalls before lunch. Menus are personal — share what you love, what you don't, and what you'd like to learn.</p>
            <ul style={{marginTop: 24, padding: 0, listStyle: "none", color: "var(--ink-soft)", lineHeight: 1.9, fontSize: 15}}>
              <li>· Breakfast on the deck — fresh tropical fruit, mahamri, masala chai</li>
              <li>· Long, slow lunches — pilau, coconut-braised reef fish</li>
              <li>· Dinner on the sand — bonfire table, whole catch on the coals</li>
              <li>· A market tour and cooking class on request</li>
            </ul>
          </div>
          <div style={{aspectRatio: "4/5", backgroundImage: `url(${PHOTO.swahiliFood})`, backgroundSize: "cover", backgroundPosition: "center"}}></div>
        </div>
      </section>
    </PageLayout>
  );
}

/* ====================================================================
   WELLNESS
   ==================================================================== */
function WellnessPage() {
  return (
    <PageLayout current="Wellness" withMarquee>
      <PageHead
        eyebrow="Wellness"
        title="The slowest part"
        titleEm="of the day."
        blurb="A wellness offering rooted in the coast — baobab seed oil, locally pressed coconut, sunrise yoga over the reef, and the rare quiet that comes from being a hundred metres from everything and a hundred kilometres from nothing."
        img={PHOTO.spaTable}
        crumb="Wellness"
      />
      <section className="section">
        <div className="section-header" style={{maxWidth: 760}}>
          <div className="eyebrow">In-villa rituals</div>
          <h2>Slow mornings, <em>longer evenings.</em></h2>
          <p>A short menu of in-villa wellness offerings, each performed by therapists and teachers we have known for years.</p>
        </div>
        <ExperiencesGrid kind="Wellness" />
      </section>

      <section style={{background: "var(--ink)", color: "var(--ivory)", padding: "100px 40px", textAlign: "center"}}>
        <div style={{maxWidth: 720, margin: "0 auto"}}>
          <div className="eyebrow" style={{color: "var(--sky-pale)"}}>The Retreat Programme</div>
          <h2 style={{fontFamily: "var(--serif)", fontWeight: 300, fontSize: 48, margin: "18px 0 22px", lineHeight: 1.1}}>A week-long retreat, <em style={{color: "var(--sky)"}}>built around you.</em></h2>
          <p style={{fontSize: 16, lineHeight: 1.8, color: "rgba(246,241,231,0.85)"}}>For longer stays, we curate week-long retreat programmes with private yoga, daily massage, a nutritionist-designed menu drawn from the villa kitchen, and a curated set of nature excursions across the south coast.</p>
          <a href={`mailto:${CONTACT.email}?subject=${encodeURIComponent("Retreat enquiry")}`} className="btn-solid" style={{marginTop: 36, background: "var(--ivory)", color: "var(--ink)"}}>Enquire about a retreat</a>
        </div>
      </section>
    </PageLayout>
  );
}

/* ====================================================================
   JOURNAL
   ==================================================================== */
function JournalPage() {
  return (
    <PageLayout current="Journal" withMarquee>
      <PageHead
        eyebrow="The Journal"
        title="Notes"
        titleEm="from the coast."
        blurb="Field guides, recipes, conservation, and the slow rhythms of the south coast — written by our team and by the makers we work with."
        img={PHOTO.beachPalms}
        crumb="Journal"
      />
      <section className="section">
        <div className="journal-grid">
          {JOURNAL.slice(0, 3).map((j, i) => (
            <div key={i} className={`j-card ${j.feature ? "feature" : ""}`}>
              <div className="j-image" style={{backgroundImage: `url(${j.img})`}}></div>
              <div className="j-meta">{j.cat} · {j.date}</div>
              <h4>{j.title[0]} <em>{j.title[1]}</em></h4>
              <p>{j.excerpt}</p>
              <a className="j-read" href={`mailto:${CONTACT.email}?subject=${encodeURIComponent("Journal — " + j.title.join(" "))}`}>Read the entry</a>
            </div>
          ))}
        </div>
        <div className="journal-grid" style={{marginTop: 40}}>
          {JOURNAL.slice(3).map((j, i) => (
            <div key={i} className="j-card">
              <div className="j-image" style={{backgroundImage: `url(${j.img})`}}></div>
              <div className="j-meta">{j.cat} · {j.date}</div>
              <h4>{j.title[0]} <em>{j.title[1]}</em></h4>
              <p>{j.excerpt}</p>
              <a className="j-read" href={`mailto:${CONTACT.email}?subject=${encodeURIComponent("Journal — " + j.title.join(" "))}`}>Read the entry</a>
            </div>
          ))}
          <div className="j-card" style={{background: "var(--ink)", color: "var(--ivory)", padding: 40, display:"flex", flexDirection:"column", justifyContent:"center", alignItems:"flex-start"}}>
            <div className="eyebrow" style={{color: "var(--sky-pale)"}}>Subscribe</div>
            <h4 style={{color: "var(--ivory)", margin: "12px 0 16px", fontSize: 26}}>The <em style={{color: "var(--sky)"}}>Letter</em></h4>
            <p style={{color: "rgba(246,241,231,0.85)", fontSize: 14, marginBottom: 22}}>A quarterly note from the coast — Kaskazi tides, recipes, opening dates, and the small movements of the estate.</p>
            <NewsletterForm />
          </div>
        </div>
      </section>
    </PageLayout>
  );
}

/* ====================================================================
   AVAILABILITY
   ==================================================================== */
function AvailabilityPage() {
  // Read ?villa=… from query string to pre-select the booking widget villa
  const initial = useM(() => {
    if (typeof window === "undefined") return null;
    const p = new URLSearchParams(window.location.search);
    return p.get("villa");
  }, []);
  return (
    <PageLayout current="Availability" withMarquee>
      <PageHead
        eyebrow="Availability"
        title="See the season"
        titleEm="at a glance."
        blurb="A live view of every residence across the calendar — updated by the property in real time. Reserved dates are shown in stone; tap any open cell to begin building a stay."
        img={PHOTO.beachAerial}
        crumb="Availability"
      />
      <div style={{maxWidth: 1400, margin: "-40px auto 0", padding: "0 40px", position: "relative", zIndex: 10}}>
        <BookingWidget initialVilla={initial || undefined} />
      </div>

      <AvailabilityStrip />

      <section className="section" style={{paddingTop: 0}}>
        <div style={{maxWidth: 880, margin: "0 auto", padding: "60px 40px", background: "var(--ivory-deep)", textAlign: "center"}}>
          <OrnamentRow />
          <div className="eyebrow">Need help?</div>
          <h3 style={{fontFamily: "var(--serif)", fontWeight: 300, fontSize: 32, margin: "12px 0 14px"}}>Speak to a <em style={{fontStyle: "italic", color: "var(--sky-deep)"}}>travel curator</em></h3>
          <p style={{color: "var(--ink-soft)", fontSize: 15, lineHeight: 1.7}}>For long stays, whole-estate buyouts, or anything outside the usual, a member of our team will reply within twenty-four hours.</p>
          <div style={{display:"flex", gap: 18, justifyContent:"center", marginTop: 28, flexWrap:"wrap"}}>
            <a href={`mailto:${CONTACT.email}?subject=${encodeURIComponent("Reservation enquiry")}`} className="btn-solid">Email reservations</a>
            <a href={`tel:${CONTACT.phoneRaw}`} className="btn-line">{CONTACT.phone} <span className="arrow"></span></a>
          </div>
        </div>
      </section>

      <ProvenanceSection />
      <LocationMapSection />
    </PageLayout>
  );
}

/* ====================================================================
   STORY
   ==================================================================== */
function StoryPage() {
  return (
    <PageLayout current="Story" withMarquee>
      <PageHead
        eyebrow="Our Story"
        title="Set moments"
        titleEm="from the Indian Ocean."
        blurb="Sea La Vie was created as a quiet coastal retreat designed around privacy, space, and a slower rhythm of living."
        img={PHOTO.villaTerrace}
        crumb="Our Story"
      />
      <section className="section">
        <div style={{maxWidth: 760, margin: "0 auto"}}>
          <p style={{fontSize: 17, lineHeight: 1.85, color: "var(--ink-soft)", margin: "0 0 22px"}}>
            Hidden within Diani's lush coastline, the residences bring together contemporary coastal design with the textures, materials, and craftsmanship of the Swahili coast — lime-washed walls, hand-carved details, natural timber, soft linen, and open spaces shaped by ocean air and tropical light.
          </p>
          <p style={{fontSize: 17, lineHeight: 1.85, color: "var(--ink-soft)", margin: "0 0 22px"}}>
            Every element has been intentionally considered to create an experience that feels calm, discreet, and deeply connected to place. Days move between the pool, the ocean, long lunches, barefoot evenings, and the stillness that makes this coastline unlike anywhere else.
          </p>
          <p style={{fontSize: 17, lineHeight: 1.85, color: "var(--ink-soft)", margin: "0 0 22px"}}>
            Much of what defines Sea La Vie comes from the surrounding region itself — locally crafted interiors, fresh ingredients sourced from nearby farms and fishermen, and a team whose warmth and knowledge shape the experience quietly behind the scenes.
          </p>
          <p style={{fontSize: 17, lineHeight: 1.85, color: "var(--ink-soft)", margin: "0 0 22px"}}>
            More than a place to stay, Sea La Vie is designed to feel private, effortless, and removed from the pace of everyday life — a refined coastal escape steps from the ocean.
          </p>
          <p style={{fontSize: 18, lineHeight: 1.6, color: "var(--ink)", margin: "32px 0 0", fontFamily: "var(--serif)", fontStyle: "italic", textAlign: "center", letterSpacing: "0.03em"}}>
            Opening November 2026.
          </p>
        </div>
      </section>

      <section id="coastline" className="provenance" style={{padding: "100px 80px"}}>
        <div className="provenance-image" style={{backgroundImage: `url(${PHOTO.beachAerial})`}}></div>
        <div className="provenance-copy">
          <OrnamentRow />
          <div className="eyebrow">The Coastline</div>
          <h2>Steps from the<br/><em>Indian Ocean.</em></h2>
          <p>Diani is a thirty-kilometre arc of soft white sand, fringed by an offshore reef that breaks the surf and turns the inshore water into a long, shallow swimming pool — among the most consistently warm and clear waters on the east African coast.</p>
          <p>Just south of the property is the Kisite-Mpunguti Marine Park, where dolphins still calve and sea turtles nest. Just inland is Shimba Hills, a coastal forest with elephant herds. The combination is exceedingly rare.</p>
          <div className="facts">
            <div><div className="label">From the ocean</div><div className="value">100 metres</div></div>
            <div><div className="label">From the airport</div><div className="value">7 minutes</div></div>
            <div><div className="label">Opening</div><div className="value">November 2026</div></div>
            <div><div className="label">Residences</div><div className="value">Four</div></div>
          </div>
        </div>
      </section>

      <LocationMapSection />

      <section id="sustainability" className="section">
        <div className="section-header" style={{maxWidth: 760}}>
          <OrnamentRow />
          <div className="eyebrow">Considered Design</div>
          <h2>Every element <em>intentional.</em></h2>
          <p>From the lime-washed walls to the carved Swahili doors, every detail of Sea La Vie has been sourced or made locally by craftspeople rooted in this coast.</p>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 28, maxWidth: 1100, margin: "0 auto"}}>
          {[
            { l: "Materials", v: "Lime-washed walls, natural timber, hand-carved Swahili details, soft linen." },
            { l: "Sourcing", v: "Interiors, furnishings and finishes crafted within the surrounding region." },
            { l: "Cuisine", v: "Fresh ingredients drawn from nearby farms and the daily catch from local fishermen." },
            { l: "Team", v: "A team whose warmth and knowledge shape the experience quietly behind the scenes." },
            { l: "Privacy", v: "Four residences set within indigenous coastal forest, hidden from one another and from the road." },
            { l: "Place", v: "Designed to feel calm, discreet, and deeply connected to the Swahili coast." }
          ].map((f, i) => (
            <div key={i} style={{background: "var(--paper)", border: "1px solid var(--line-soft)", padding: "28px 30px"}}>
              <div className="eyebrow" style={{marginBottom: 10}}>{f.l}</div>
              <p style={{fontFamily: "var(--serif)", fontSize: 17, color: "var(--ink)", lineHeight: 1.55, margin: 0}}>{f.v}</p>
            </div>
          ))}
        </div>
        <div style={{textAlign: "center", marginTop: 56}}>
          <a href="factsheet.html" className="btn-line">Download the factsheet <span className="arrow"></span></a>
        </div>
      </section>
    </PageLayout>
  );
}

/* ====================================================================
   CONTACT
   ==================================================================== */
function ContactPage() {
  return (
    <PageLayout current="Contact" withMarquee>
      <PageHead
        eyebrow="Reach Us"
        title="Come and"
        titleEm="say hello."
        blurb="Our reservations desk is open every day from 08:00 to 20:00 East Africa Time. For anything urgent, ring the number below; for everything else, the form below reaches a human within twenty-four hours."
        img={PHOTO.palmsDusk}
        crumb="Contact"
      />
      <section className="section">
        <div className="contact-grid">
          <div>
            <EnquiryForm />
          </div>
          <div style={{display: "flex", flexDirection: "column", gap: 30}}>
            <div className="contact-card">
              <div className="eyebrow">Direct</div>
              <h3>Reach us <em>any way you like.</em></h3>
              <div className="contact-row">
                <div className="l">Reservations</div>
                <div className="v"><a href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a></div>
              </div>
              <div className="contact-row">
                <div className="l">Telephone</div>
                <div className="v"><a href={`tel:${CONTACT.phoneRaw}`}>{CONTACT.phone}</a></div>
              </div>
              <div className="contact-row">
                <div className="l">WhatsApp</div>
                <div className="v"><a href={`https://wa.me/${CONTACT.whatsapp.replace(/[^0-9]/g, "")}`}>{CONTACT.phone}</a></div>
              </div>
              <div className="contact-row">
                <div className="l">Instagram</div>
                <div className="v"><a href={`https://instagram.com/${CONTACT.instagram.replace("@", "")}`}>{CONTACT.instagram}</a></div>
              </div>
              <div className="contact-row">
                <div className="l">Hours</div>
                <div className="v">{CONTACT.hours}</div>
              </div>
            </div>

            <div className="contact-card">
              <div className="eyebrow">In person</div>
              <h3>Visit <em>the estate.</em></h3>
              <p style={{color: "var(--ink-soft)", fontSize: 14, lineHeight: 1.7, margin: "0 0 18px"}}>
                {CONTACT.address.map((l, i) => <React.Fragment key={i}>{l}<br/></React.Fragment>)}
              </p>
              <div style={{position: "relative", width: "100%", aspectRatio: "4 / 3", overflow: "hidden", border: "1px solid var(--line-soft)"}}>
                <iframe
                  title="Sea La Vie location"
                  src={`https://www.google.com/maps?q=${CONTACT.geo.lat},${CONTACT.geo.lng}&z=13&output=embed`}
                  style={{border: 0, width: "100%", height: "100%"}}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  allowFullScreen
                ></iframe>
              </div>
              <div style={{marginTop: 14, display: "flex", justifyContent: "space-between", gap: 14, flexWrap: "wrap"}}>
                <a href={`https://www.google.com/maps?q=${CONTACT.geo.lat},${CONTACT.geo.lng}`} target="_blank" rel="noopener" className="btn-line" style={{fontSize: 10}}>Open in Google Maps <span className="arrow"></span></a>
                <a href={`https://www.google.com/maps/dir/?api=1&destination=${CONTACT.geo.lat},${CONTACT.geo.lng}`} target="_blank" rel="noopener" className="btn-line" style={{fontSize: 10}}>Get directions <span className="arrow"></span></a>
              </div>
              <p id="getting-here" style={{fontSize: 13, color: "var(--ink-mute)", marginTop: 20, lineHeight: 1.7}}>
                <strong style={{color: "var(--ink)", fontFamily: "var(--serif)", fontSize: 15}}>Getting here</strong><br/>
                <strong style={{color: "var(--ink)"}}>7 minutes</strong> by car from Ukunda Airport (UKA) — daily SafariLink and Skyward flights from Wilson, Nairobi.<br/>
                <strong style={{color: "var(--ink)"}}>45 minutes</strong> by car from Moi International, Mombasa (MBA) — direct international flights from Europe and the Middle East.<br/>
                A private transfer is arranged with every reservation.
              </p>
              <div style={{marginTop: 18, paddingTop: 18, borderTop: "1px solid var(--line-soft)"}}>
                <a href="factsheet.html" target="_blank" rel="noopener" className="btn-solid" style={{display: "inline-block"}}>
                  Download the factsheet
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </PageLayout>
  );
}

function EnquiryForm() {
  const [form, setForm] = useP({ name: "", email: "", phone: "", subject: "General enquiry", message: "" });
  const [sent, setSent] = useP(false);
  const [err, setErr] = useP("");
  const [submitting, setSubmitting] = useP(false);
  function up(k, v) { setForm(prev => ({ ...prev, [k]: v })); }
  async function submit(e) {
    e.preventDefault();
    setErr("");
    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) {
      setErr("Please share your name, email and message."); return;
    }
    setSubmitting(true);
    try {
      const r = await apiEnquiry(form);
      if (r && r.ok) setSent(true);
      else setErr((r && r.error) || "Something went wrong. Please email us directly at " + CONTACT.email);
    } catch(e) {
      // Fallback to mailto
      const subj = encodeURIComponent(form.subject);
      const body = encodeURIComponent(`Name: ${form.name}\nEmail: ${form.email}\nPhone: ${form.phone}\n\n${form.message}`);
      window.location.href = `mailto:${CONTACT.email}?subject=${subj}&body=${body}`;
      setSent(true);
    } finally { setSubmitting(false); }
  }

  if (sent) {
    return (
      <div className="contact-card">
        <OrnamentRow />
        <div className="eyebrow" style={{marginTop: 16}}>Thank you</div>
        <h3 style={{margin: "10px 0 14px"}}>Asante <em>sana.</em></h3>
        <p style={{color: "var(--ink-soft)", fontSize: 15, lineHeight: 1.7}}>
          Your message has reached our reservations desk. A member of the team will be in touch from <strong>{CONTACT.email}</strong> within twenty-four hours.
        </p>
      </div>
    );
  }

  return (
    <div className="contact-card">
      <div className="eyebrow">Send a note</div>
      <h3>Tell us <em>about your trip.</em></h3>
      <form className="enquiry-form" onSubmit={submit}>
        <div className="row2">
          <div className="field-group">
            <label>Full Name</label>
            <input type="text" value={form.name} onChange={e => up("name", e.target.value)} placeholder="As it appears on your passport" />
          </div>
          <div className="field-group">
            <label>Email</label>
            <input type="email" value={form.email} onChange={e => up("email", e.target.value)} placeholder="you@example.com" />
          </div>
        </div>
        <div className="row2">
          <div className="field-group">
            <label>Phone</label>
            <input type="tel" value={form.phone} onChange={e => up("phone", e.target.value)} placeholder="+254 …" />
          </div>
          <div className="field-group">
            <label>Subject</label>
            <select value={form.subject} onChange={e => up("subject", e.target.value)} style={{
              width: "100%", background: "none", border: "none", borderBottom: "1px solid var(--line)",
              padding: "8px 0 10px", fontFamily: "var(--serif)", fontSize: 17, color: "var(--ink)", outline: "none"
            }}>
              <option>General enquiry</option>
              <option>Reservation</option>
              <option>Whole-estate buyout</option>
              <option>Wedding or event</option>
              <option>Press</option>
              <option>Careers</option>
            </select>
          </div>
        </div>
        <div className="field-group">
          <label>Your message</label>
          <textarea value={form.message} onChange={e => up("message", e.target.value)} placeholder="Tell us about your travel dates, party size, anniversaries, allergies — anything." />
        </div>
        {err && <div className="err-msg">{err}</div>}
        <button className="submit" type="submit" disabled={submitting}>{submitting ? "Sending…" : "Send"}</button>
      </form>
    </div>
  );
}

Object.assign(window, {
  HomePage, ResidencesPage, ExperiencesPage, CuisinePage, WellnessPage,
  JournalPage, AvailabilityPage, StoryPage, ContactPage
});
