import React,{useEffect,useState}from"react";import{createRoot}from"react-dom/client";import"./styles.css";
const track=(e,p={})=>window.gtag?.("event",e,p),today=()=>new Date().toISOString().slice(0,10);
const safaris=[["Leopard Safari","/images/leopard.jpg","Track Jawai’s elusive leopards with expert local guides."],["Morning Safari","/images/safari.jpg","Golden light, active wildlife and stunning landscapes."],["Evening Safari","/images/wildlife.jpg","Dramatic skies, unforgettable sightings and raw beauty."]];
function Availability({full=false}){const[f,setF]=useState({date:today(),slot:"Morning",guests:2,name:"",phone:"",email:""}),[a,setA]=useState(null),[m,setM]=useState("");let set=(k,v)=>setF({...f,[k]:v}),sl=a?.slots?.find(x=>x.slot===f.slot);
async function check(){let r=await fetch("/api/availability?date="+f.date),d=await r.json();setA(d);track("check_availability",{safari_date:f.date,safari_slot:f.slot})}
async function submit(e){e.preventDefault();let r=await fetch("/api/bookings",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify(f)}),d=await r.json();setM(r.ok?`Request received · ${d.reference}`:d.error);if(r.ok)track("safari_request",{booking_reference:d.reference,safari_date:f.date,safari_slot:f.slot})}
return <form className={"bookingCard "+(full?"bookingFull":"")} onSubmit={submit}><div className="bookingTitle"><small>PLAN YOUR</small><b>JAWAI SAFARI</b></div><label><small>SELECT DATE</small><input type="date" min={today()} value={f.date} onChange={e=>set("date",e.target.value)}/></label><label><small>SAFARI TYPE</small><select value={f.slot} onChange={e=>set("slot",e.target.value)}><option>Morning</option><option>Evening</option></select></label><label><small>GUESTS</small><div className="count"><button type="button" onClick={()=>set("guests",Math.max(1,f.guests-1))}>−</button><b>{f.guests}</b><button type="button" onClick={()=>set("guests",Math.min(12,f.guests+1))}>+</button></div></label>{full&&<><label><small>NAME</small><input required placeholder="Your name" value={f.name} onChange={e=>set("name",e.target.value)}/></label><label><small>PHONE</small><input required placeholder="+91" value={f.phone} onChange={e=>set("phone",e.target.value)}/></label><label><small>EMAIL</small><input type="email" placeholder="Optional" value={f.email} onChange={e=>set("email",e.target.value)}/></label></>}<button className="primary" type={full?"submit":"button"} onClick={full?undefined:check}>{full?"REQUEST SAFARI →":"CHECK AVAILABILITY →"}</button>{sl&&<p className="availability">{sl.status==="AVAILABLE"?`${sl.remaining} of ${sl.capacity} jeeps available`:sl.status}</p>}{m&&<p className="availability">{m}</p>}<a className="help" href="#contact">Need help? Enquire with us</a></form>}
function Status(){let ref=decodeURIComponent(location.pathname.split("/").pop()),[d,setD]=useState(null);useEffect(()=>{let m=document.querySelector('meta[name="robots"]');if(m)m.content="noindex,nofollow";fetch("/api/booking/"+ref).then(r=>r.json()).then(setD)},[ref]);return <main className="statusPage"><Brand/><p className="eyebrow">BOOKING {ref}</p><h1>{d?.status==="CONFIRMED"?"Your Jawai safari is confirmed.":"We’re confirming your Jawai safari."}</h1>{d&&<div className="ticket">{[["Date",d.safari_date],["Safari",d.slot],["Guests",d.guests],["Status",d.status],["Driver",d.driver_name],["Driver contact",d.driver_phone],["Jeep",d.jeep_number]].filter(x=>x[1]).map(x=><React.Fragment key={x[0]}><b>{x[0]}</b><span>{x[1]}</span></React.Fragment>)}</div>}</main>}
function Brand(){return <div className="brand">DISCOVER JAWAI<small>WILDLIFE · PEOPLE · PLACES</small></div>}
function Home(){const[menu,setMenu]=useState(false);return <><header><Brand/><nav className={menu?"open":""}><a href="#home">Home</a><a href="#about">Our Brand</a><a href="#jawai">About Jawai</a><a href="#booking">Safari Booking</a><a href="#leopards">Leopards of Jawai</a><a href="#contact">Contact Us</a></nav><div className="headerRight"><a className="headerCta" href="#booking">Plan Your Safari →</a><button className="menu" onClick={()=>setMenu(!menu)}>☰</button></div></header>
<main><section id="home" className="hero"><div className="heroShade"/><div className="heroCopy"><p className="eyebrow white">JAWAI · RAJASTHAN</p><h1>A wilder<br/>kind of India</h1><i/><p>Granite hills. Leopards.<br/>Living traditions.</p><span>01 / 06</span></div><div className="heroArrows">←　→</div><div className="heroBooking"><Availability/></div></section>
<section id="leopards" className="experiences"><div className="sectionHead"><div><p className="eyebrow">EXPLORE OUR SAFARIS</p><h2>Curated experiences in Jawai.</h2></div><a href="#booking">View All Safaris　→</a></div><div className="cards">{safaris.map(x=><article key={x[0]}><img src={x[1]} alt={`${x[0]} in Jawai, Rajasthan`} loading="lazy"/><div><h3>{x[0]}</h3><p>{x[2]}</p><a href="#booking">Know More　→</a></div></article>)}</div></section>
<section id="about" className="why"><div className="whyImage"><img src="/images/landscape.jpg" alt="Jawai landscape, Rajasthan" loading="lazy"/><em>More than a safari,<br/>a way of life.</em></div><div className="whyCopy"><p className="eyebrow">WHY TRAVEL WITH US</p><h2>Authentic. Responsible.<br/>Unforgettable.</h2><p>We are a local team deeply connected to Jawai – its wildlife, people and landscapes. Our safaris are designed to be immersive, respectful and meaningful, offering real encounters and enriching stories.</p><div className="benefits"><div><b>◉</b><strong>Local Experts</strong><small>Generations of on-ground knowledge</small></div><div><b>♧</b><strong>Responsible Travel</strong><small>Wildlife first, always</small></div><div><b>◎</b><strong>Small Groups</strong><small>Personalised experiences</small></div><div><b>△</b><strong>Extraordinary Landscapes</strong><small>Beyond the leopard</small></div></div><a className="primary inline" href="#booking">BOOK YOUR SAFARI　→</a></div></section>
<section id="jawai" className="landscape"><div><p className="eyebrow white">ABOUT JAWAI</p><h2>Where granite, wildlife and pastoral life meet.</h2><p>Discover Jawai Dam, crocodiles, raptors, migratory birds and the remarkable coexistence between leopards and Rabari pastoral communities.</p></div></section>
<section id="booking" className="bookSection"><div className="bookIntro"><p className="eyebrow">START PLANNING</p><h2>Your Jawai safari<br/>starts here.</h2><p>Select your preferred safari. Each morning and evening slot supports up to nine jeeps. Your booking is confirmed after our local team assigns your driver and jeep.</p></div><Availability full/></section></main>
<footer id="contact"><Brand/><p>Private safaris · Local knowledge · Jawai, Rajasthan</p><p>hello@discoverjawai.com</p><small>© 2026 Discover Jawai</small></footer><div className="mobileBar"><a href="#booking">BOOK SAFARI</a><a href="#contact">ENQUIRE</a></div></>}
createRoot(document.getElementById("root")).render(location.pathname.startsWith("/booking/")?<Status/>:<Home/>);