const { Button, Input, Select, Textarea, Checkbox, Radio, Divider, Badge } = window.FirebrickDesignSystem_e0332b;
function BookingPage({go,presetService}){
 const svcNames=SERVICES.map(s=>s.eyebrow);
 const preset=SERVICES.find(s=>s.id===presetService);
 const [sent,setSent]=React.useState(false);
 const [time,setTime]=React.useState('morning');
 const [busy,setBusy]=React.useState(false);
 const [err,setErr]=React.useState('');
 const [wood,setWood]=React.useState(false);
 const [gas,setGas]=React.useState(false);
 const INTAKE='https://bardelas.app.n8n.cloud/webhook/firebrick-booking';
 const submit=async e=>{
  e.preventDefault();
  if(busy)return;
  const f=new FormData(e.currentTarget);
  const fire=[wood?'Wood-burning':'',gas?'Gas insert':''].filter(Boolean).join(' + ');
  const payload={name:f.get('name')||'',phone:f.get('phone')||'',address:f.get('address')||'',
   city:f.get('city')||'',service:f.get('service')||'',preferredTime:time,
   fireplaceType:fire||'Not stated',notes:f.get('notes')||'',source:'Website booking form'};
  setBusy(true);setErr('');
  try{
   const r=await fetch(INTAKE,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
   if(!r.ok)throw new Error('bad status '+r.status);
   setSent(true);window.scrollTo(0,0);
  }catch(x){
   setErr('That did not send. Please try again in a moment.');
  }finally{setBusy(false)}
 };
 if(sent){return <main data-screen-label="Booking confirmation" style={{...fbContainer,padding:'140px 24px 180px',display:'flex',flexDirection:'column',alignItems:'center',textAlign:'center',gap:20}}>
  <Reveal style={{display:'flex',flexDirection:'column',alignItems:'center',gap:20}}>
  <Eyebrow>Request received</Eyebrow>
  <h1 style={{fontSize:'var(--text-display-lg)',maxWidth:560,margin:0}}>Thank you. We'll call once to confirm.</h1>
  <p style={{fontSize:16,color:'var(--text-secondary)',maxWidth:440,margin:0}}>One call, usually within a business day, to agree on a time and confirm pricing before anything is booked.</p>
  <div style={{marginTop:12}}><Button variant="ghost" onClick={()=>go('home')}>Back to the start</Button></div>
  </Reveal>
 </main>;}
 return <main data-screen-label="Booking" className="booking">
  <section className="g2" style={{...fbContainer,padding:'96px 24px 120px',display:'grid',gridTemplateColumns:'1fr 380px',gap:72,alignItems:'start'}}>
   <Reveal style={{display:'flex',flexDirection:'column',gap:36}}>
    <SectionHead h1 eyebrow="Book a visit" title="Tell us about your fireplace." lead="Nothing is booked until we've spoken. One call to agree on a time and confirm pricing."/>
    <form onSubmit={submit} className="g2" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'22px 24px'}}>
     <Input label="Your name" name="name" placeholder="First and last" required/>
     <Input label="Phone" name="phone" type="tel" placeholder="Your phone number" required help="We call once to confirm, that's all."/>
     <Input label="Street address" name="address" placeholder="Street and number" style={{gridColumn:'1 / -1'}}/>
     <Select label="City" name="city" options={AREA}/>
     <Select label="Service" name="service" defaultValue={preset?preset.eyebrow:undefined} options={svcNames}/>
     <div style={{display:'flex',flexDirection:'column',gap:12}}>
      <span style={{fontSize:12,fontWeight:600,letterSpacing:'var(--tracking-caps)',textTransform:'uppercase',color:'var(--text-muted)'}}>Preferred time</span>
      <div style={{display:'flex',gap:24}}>
       <Radio label="Morning" checked={time==='morning'} onChange={()=>setTime('morning')}/>
       <Radio label="Afternoon" checked={time==='afternoon'} onChange={()=>setTime('afternoon')}/>
      </div>
     </div>
     <div style={{display:'flex',flexDirection:'column',gap:12,paddingTop:26}}>
      <Checkbox label="Wood-burning fireplace" checked={wood} onChange={setWood}/>
      <Checkbox label="Gas insert" checked={gas} onChange={setGas}/>
     </div>
     <Textarea label="Anything we should know" name="notes" rows={4} placeholder="Roof access, parking, pets, how the fireplace has been behaving..." style={{gridColumn:'1 / -1'}}/>
     <div style={{gridColumn:'1 / -1',display:'flex',alignItems:'center',gap:18,flexWrap:'wrap'}}>
      <Button type="submit" disabled={busy}>{busy?'Sending…':'Request a visit'}</Button>
      <span style={{fontSize:13,color:'var(--text-muted)'}}>No payment now. No surprise invoices later.</span>
      {err&&<span role="alert" style={{fontSize:13,color:'var(--oxblood)',flexBasis:'100%'}}>{err}</span>}
     </div>
    </form>
   </Reveal>
   <Reveal dir="right" as="aside" style={{background:'var(--surface-panel)',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius)',padding:32,display:'flex',flexDirection:'column',gap:18,position:'sticky',top:110}}>
    <Eyebrow>How a visit goes</Eyebrow>
    {[['We call once','To agree on a time and confirm pricing. Nothing is booked before that.'],['Drop cloths, then tools','Floors covered first. HEPA vacuum on the whole visit.'],['A plain summary','What we found, what it needs, what it doesn\u2019t. Photos included.']].map(([t,b],i)=><div key={t} style={{display:'flex',flexDirection:'column',gap:6,borderTop:i?'1px solid var(--border-hairline)':'none',paddingTop:i?16:0}}>
     <span style={{fontFamily:'var(--font-display)',fontSize:18,color:'var(--limewash)'}}>{t}</span>
     <span style={{fontSize:14,color:'var(--text-secondary)'}}>{b}</span>
    </div>)}
    <Badge style={{alignSelf:'flex-start'}}>Pricing confirmed before work begins</Badge>
   </Reveal>
  </section>
 </main>;
}
Object.assign(window,{BookingPage});