function BookingFlow({open,onClose}){
  const {Dialog,Button,Input,Select,Toast}=window.VosTrainingClubDesignSystem_09863c;
  const emptyForm={name:'',email:'',goal:'Afvallen',day:'Maandag',time:'Ochtend',phone:''};
  const [step,setStep]=React.useState(1);
  const [done,setDone]=React.useState(false);
  const [submitting,setSubmitting]=React.useState(false);
  const [error,setError]=React.useState('');
  const [form,setForm]=React.useState(emptyForm);
  React.useEffect(()=>{if(open){setStep(1);setDone(false);setError('');setForm(emptyForm);}},[open]);
  const update=(field)=>(e)=>setForm((f)=>({...f,[field]:e.target.value}));

  async function submit(){
    if(!form.phone.trim()){
      setError('Vul je telefoonnummer in.');
      return;
    }
    setError('');
    setSubmitting(true);
    try{
      const res=await fetch('/api/intake',{
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify(form)
      });
      if(!res.ok) throw new Error('request-failed');
      setDone(true);
    }catch(e){
      setError('Versturen is niet gelukt. Probeer het opnieuw of bel ons rechtstreeks.');
    }finally{
      setSubmitting(false);
    }
  }

  if(done){
    return (<React.Fragment>
      <Dialog open={open} onClose={onClose} eyebrow='Bevestigd' title='Tot snel!' footer={<Button onClick={onClose}>Sluiten</Button>}>
        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          <Toast variant='success' title='Intake geboekt'>Je ontvangt een bevestiging per e-mail.</Toast>
          <span>We nemen binnen 24 uur contact op om je eerste sessie te plannen.</span>
        </div>
      </Dialog></React.Fragment>);
  }
  const foot = step===1
    ? <Button onClick={()=>{
        if(!form.name.trim()||!form.email.trim()){setError('Vul je naam en e-mail in.');return;}
        setError('');
        setStep(2);
      }}>Volgende</Button>
    : <React.Fragment><Button variant='ghost' onClick={()=>{setError('');setStep(1);}} disabled={submitting}>Terug</Button><Button onClick={submit} disabled={submitting}>{submitting?'Versturen…':'Bevestig intake'}</Button></React.Fragment>;
  return (
    <Dialog open={open} onClose={onClose} eyebrow={'Stap '+step+' van 2'} title={step===1?'Boek je gratis intake':'Bijna klaar'} footer={foot}>
      <div style={{display:'flex',flexDirection:'column',gap:16}}>
        {step===1?(<React.Fragment>
          <Input label='Naam' placeholder='Je naam' required value={form.name} onChange={update('name')}/>
          <Input label='E-mail' type='email' placeholder='jij@voorbeeld.nl' required value={form.email} onChange={update('email')}/>
          <Select label='Ik wil vooral...' options={['Afvallen','Spiermassa opbouwen','Fitter worden','Kracht']} value={form.goal} onChange={update('goal')}/>
        </React.Fragment>):(<React.Fragment>
          <Select label='Voorkeursdag' options={['Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag','Zondag']} value={form.day} onChange={update('day')}/>
          <Select label='Voorkeurstijd' options={['Ochtend','Middag','Avond']} value={form.time} onChange={update('time')}/>
          <Input label='Telefoon' type='tel' placeholder='06 12345678' required value={form.phone} onChange={update('phone')}/>
        </React.Fragment>)}
        {error && <Toast variant='danger' title='Let op'>{error}</Toast>}
      </div>
    </Dialog>
  );
}
window.BookingFlow=BookingFlow;