/* Birthday booking flow: package → children → slot → summary. */
function BookingModal(props) {
  const { Card, Badge, Button, PriceTag, Rosette, StickerHeading, FeatureRow, IconButton } = window.PE;
  const t = props.t;
  const C = window.PE_CONTENT;
  const [pkgId, setPkgId] = React.useState(props.pkgId || 'basic');
  const [kids, setKids] = React.useState(10);
  const [slot, setSlot] = React.useState('evening');
  const [done, setDone] = React.useState(false);
  const pkg = C.packages.filter(function (p) { return p.id === pkgId; })[0];
  const tier = pkg.tiers.filter(function (x) { return x.kids === kids; })[0] || pkg.tiers[0];

  return (
    <div role="dialog" aria-modal="true" aria-label={t.modal.title}
      style={{position:'fixed', inset:0, zIndex:95, background:'rgba(26,19,48,.72)', backdropFilter:'blur(8px)', display:'grid', placeItems:'center', padding:'var(--space-6)', overflow:'auto'}}
      onClick={props.onClose}>
      <div onClick={function (e) { e.stopPropagation(); }} style={{width:'min(920px, 100%)'}}>
        <Card surface="cream" radius="xl" stroke padding="var(--pad-card-poster)">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:'var(--space-6)'}}>
            <StickerHeading mode="lines" size="38px" as="h2">{[t.modal.title]}</StickerHeading>
            <IconButton tone="magenta" aria-label={t.cta.close} onClick={props.onClose}>✕</IconButton>
          </div>
          {done ? (
            <div style={{display:'grid', gap:'var(--space-4)', marginTop:'var(--space-6)'}}>
              <strong style={{font:'var(--type-h3)', color:'var(--state-success)'}}>{t.modal.done}</strong>
              <p style={{margin:0, font:'var(--type-body)', color:'var(--brand-navy)'}}>{t.modal.doneText}</p>
              <div style={{display:'flex', gap:'var(--space-3)', flexWrap:'wrap'}}>
                <Button variant="whatsapp" size="lg" href={C.business.whatsapp} target="_blank" icon={<WaGlyph />}>{t.cta.whatsapp}</Button>
                <Button variant="ghost" size="lg" onClick={props.onClose}>{t.cta.close}</Button>
              </div>
            </div>
          ) : (
            <div style={{display:'grid', gridTemplateColumns:'1.15fr .85fr', gap:'var(--space-10)', marginTop:'var(--space-6)'}}>
              <div style={{display:'grid', gap:'var(--space-6)'}}>
                <div>
                  <p style={{margin:'0 0 var(--space-3)', font:'var(--type-kicker)', color:'var(--brand-magenta)', textTransform:'uppercase', letterSpacing:'var(--tracking-kicker)'}}>{t.modal.pick}</p>
                  <div style={{display:'flex', gap:'var(--space-2)', flexWrap:'wrap'}}>
                    {C.packages.map(function (p) {
                      const on = p.id === pkgId;
                      return (
                        <button key={p.id} type="button" onClick={function () { setPkgId(p.id); }}
                          style={{border:'none', cursor:'pointer', padding:'10px 18px', borderRadius:'var(--radius-pill)',
                            background:on ? 'var(--brand-navy)' : 'var(--white)', color:on ? 'var(--white)' : 'var(--brand-navy)',
                            font:'var(--weight-bold) var(--text-xs)/1 var(--font-ui)', textTransform:'uppercase',
                            letterSpacing:'var(--tracking-wide)', boxShadow:on ? 'var(--shadow-navy)' : 'var(--shadow-sm)',
                            transition:'var(--transition-base)'}}>
                          {t.packageNames[p.id]}
                        </button>
                      );
                    })}
                  </div>
                </div>
                <div>
                  <p style={{margin:'0 0 var(--space-3)', font:'var(--type-kicker)', color:'var(--brand-magenta)', textTransform:'uppercase', letterSpacing:'var(--tracking-kicker)'}}>{t.modal.kids}</p>
                  <div style={{display:'flex', gap:'var(--space-2)'}}>
                    {pkg.tiers.map(function (x) {
                      const on = x.kids === kids;
                      return (
                        <button key={x.kids} type="button" onClick={function () { setKids(x.kids); }}
                          style={{border:'none', cursor:'pointer', width:64, height:44, borderRadius:'var(--radius-md)',
                            background:on ? 'var(--brand-magenta)' : 'var(--white)', color:on ? 'var(--white)' : 'var(--brand-navy)',
                            font:'var(--weight-black) var(--text-md)/1 var(--font-display)', boxShadow:on ? 'var(--shadow-magenta)' : 'var(--shadow-sm)'}}>
                          {x.kids}
                        </button>
                      );
                    })}
                  </div>
                </div>
                <div>
                  <p style={{margin:'0 0 var(--space-3)', font:'var(--type-kicker)', color:'var(--brand-magenta)', textTransform:'uppercase', letterSpacing:'var(--tracking-kicker)'}}>{t.modal.slot}</p>
                  <div style={{display:'flex', gap:'var(--space-2)', flexWrap:'wrap'}}>
                    {t.slots.map(function (s) {
                      const on = s.id === slot;
                      return (
                        <button key={s.id} type="button" onClick={function () { setSlot(s.id); }}
                          style={{border:'none', cursor:'pointer', padding:'10px 18px', borderRadius:'var(--radius-pill)',
                            background:on ? 'var(--brand-sun)' : 'var(--white)', color:'var(--brand-navy)',
                            font:'var(--weight-bold) var(--text-xs)/1 var(--font-ui)', boxShadow:on ? 'var(--shadow-sun)' : 'var(--shadow-sm)'}}>
                          {s.label}
                        </button>
                      );
                    })}
                  </div>
                </div>
                <div style={{display:'grid', gap:'var(--space-2)', background:'var(--white)', borderRadius:'var(--radius-lg)', padding:'var(--space-5)'}}>
                  {pkg.features.slice(0, 4).map(function (x, i, arr) {
                    return <FeatureRow key={x} index={i} icon={['👧', '🍕', '🫧', '🎂', '🎈', '🎭'][i % 6]} last={i === arr.length - 1}>{t.features[x]}</FeatureRow>;
                  })}
                </div>
              </div>
              <div style={{display:'grid', gap:'var(--space-5)', justifyItems:'center', alignContent:'start'}}>
                <Rosette value={pkg.duration.replace(' h', '')} label={props.lang === 'ru' ? 'часа' : 'horas'} size={124} />
                <div style={{textAlign:'center'}}>
                  <p style={{margin:'0 0 4px', font:'var(--type-kicker)', color:'var(--brand-navy)', textTransform:'uppercase', letterSpacing:'var(--tracking-kicker)'}}>{t.modal.total}</p>
                  <PriceTag amount={tier.price} size="xl" sticker />
                </div>
                <Badge tone="navy" size="md" upper={false}>{t.modal.deposit} · {C.booking.deposit} €</Badge>
                <Badge tone="cream" upper={false}>{pkg.days.map(function (d) { return t.days[d]; }).join(' · ')}</Badge>
                <Button variant="primary" size="lg" block onClick={function () { setDone(true); }}>{t.modal.confirm}</Button>
              </div>
            </div>
          )}
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { BookingModal });