// Formulaire d'inscription multi-étapes
function RSVP({ setPage, actions, currentUserName = '' }) {
  const [step, setStep] = useState(0);
  const [Toast, showToast] = useToast();
  const [data, setData] = useState(() => ({
    ...BBQStore.blankRSVP(),
    lastName: currentUserName.trim(),
    participantAdults: currentUserName.trim() ? [currentUserName.trim()] : [''],
  }));

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const updateGuestCount = (key, namesKey, value) => {
    const count = Math.max(0, parseInt(value, 10) || 0);
    setData((d) => ({
      ...d,
      [key]: count,
      [namesKey]: resizeNames(d[namesKey], count),
    }));
  };
  const updateGuestName = (namesKey, index, value) => {
    setData((d) => {
      const next = [...(d[namesKey] || [])];
      next[index] = value;
      return { ...d, [namesKey]: next };
    });
  };
  const submitRSVP = () => {
    if (!data.lastName.trim()) {
      setStep(0);
      showToast('Ajoutez le nom du foyer');
      return;
    }
    if (!data.email.trim() || !data.email.includes('@')) {
      setStep(0);
      showToast('Ajoutez une adresse e-mail valide');
      return;
    }
    const missingParticipantStep = missingParticipantNameStep(data);
    if (missingParticipantStep !== null) {
      setStep(missingParticipantStep);
      showToast('Ajoutez le nom de chaque participant');
      return;
    }
    actions.submitRSVP(data);
    showToast('Inscription envoyée ! Bienvenue au BBQ 2026');
    setTimeout(() => setPage('home'), 900);
  };

  const STEPS = ['Foyer', 'Adultes', 'Enfants', 'Besoins & Préférences', 'Contributions', 'Contact', 'Récapitulatif'];

  return (
    <div>
      <div style={{ position: 'relative', height: 200, overflow: 'hidden' }}>
        <Photo kind="lights" src="assets/generated/bbq-evening-lights.png" bg style={{ position: 'absolute', inset: 0 }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(14,46,34,0.35) 0%, rgba(14,46,34,0.55) 100%)',
          display: 'grid', placeItems: 'center', textAlign: 'center', color: 'white', padding: 24
        }}>
          <div>
            <h1 className="serif" style={{ fontSize: 44, margin: 0, color: 'white' }}>Inscription au BBQ 2026</h1>
            <div style={{ fontSize: 15, opacity: 0.92, marginTop: 4 }}>Nous avons hâte de célébrer avec vous !</div>
          </div>
        </div>
      </div>

      <div className="container" style={{ paddingBottom: 40 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', margin: '24px 0 28px', position: 'relative' }}>
          <div style={{ position: 'absolute', left: 24, right: 24, top: 14, height: 1, background: 'var(--line)', zIndex: 0 }} />
          {STEPS.map((s, i) => {
            const active = i === step;
            const done = i < step;
            return (
              <button
                key={s}
                onClick={() => setStep(i)}
                style={{
                  background: 'none', border: 0, padding: 0, cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
                  zIndex: 1, position: 'relative', flex: 1
                }}>
                
                <div style={{
                  width: 30, height: 30, borderRadius: '50%',
                  display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 13,
                  background: active ? 'var(--coral)' : done ? 'var(--green-700)' : 'white',
                  color: active || done ? 'white' : 'var(--ink-2)',
                  border: `1px solid ${active ? 'var(--coral)' : done ? 'var(--green-700)' : 'var(--line)'}`
                }}>{done ? <Icon.Check /> : i + 1}</div>
                <div style={{ fontSize: 11, fontWeight: 600, color: active ? 'var(--coral)' : 'var(--ink-2)', textAlign: 'center', maxWidth: 80, lineHeight: 1.2 }}>
                  {s}
                </div>
              </button>);

          })}
        </div>

        <div className="card">
          {step === 0 && <StepHousehold data={data} update={update} />}
          {step === 1 && <StepGuests data={data} update={update} updateGuestCount={updateGuestCount} updateGuestName={updateGuestName} />}
          {step === 2 && <StepKids data={data} update={update} updateGuestCount={updateGuestCount} updateGuestName={updateGuestName} />}
          {step === 3 && <StepNeeds data={data} update={update} />}
          {step === 4 && <StepContributions data={data} update={update} />}
          {step === 5 && <StepContact data={data} update={update} />}
          {step === 6 && <StepReview data={data} />}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 18 }}>
          <button
            className="btn btn-white"
            disabled={step === 0}
            onClick={() => setStep((s) => Math.max(0, s - 1))}
            style={{ visibility: step === 0 ? 'hidden' : 'visible' }}>
            Retour</button>
          {step < STEPS.length - 1 ?
          <button className="btn btn-coral" onClick={() => setStep((s) => s + 1)}>
              {step === 5 ? 'Vérifier & Envoyer' : 'Suivant'} <Icon.ArrowRight />
            </button> :

          <button className="btn btn-coral" onClick={submitRSVP}>
              Envoyer l'inscription <Icon.Check />
            </button>
          }
        </div>
      </div>

      <div className="footer-strip">Vive la famille, Libota nde makasi.</div>
      {Toast}
    </div>);

}

function FieldRow({ children, cols = 2 }) {
  return <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 14 }}>{children}</div>;
}
function Field({ label, opt, children }) {
  return (
    <label style={{ display: 'block' }}>
      <div className="label" style={{ marginBottom: 6 }}>{label} {opt && <span className="opt">{opt}</span>}</div>
      {children}
    </label>);

}
function StepTitle({ n, t }) {
  return <h3 className="serif" style={{ fontSize: 20, color: 'var(--green-900)', margin: '0 0 16px' }}>{n}. {t}</h3>;
}

function resizeNames(list, count) {
  return Array.from({ length: count }, (_, index) => (list || [])[index] || '');
}

function missingParticipantNameStep(data) {
  const adultMissing = resizeNames(data.participantAdults, parseInt(data.adults, 10) || 0).some((name) => !name.trim());
  if (adultMissing) return 1;
  const teenMissing = resizeNames(data.participantTeens, parseInt(data.teens, 10) || 0).some((name) => !name.trim());
  if (teenMissing) return 1;
  const kidMissing = resizeNames(data.participantKids, parseInt(data.kids, 10) || 0).some((name) => !name.trim());
  if (kidMissing) return 2;
  return null;
}

function ParticipantNameFields({ title, names, count, onNameChange, placeholder }) {
  const rows = resizeNames(names, count);
  if (rows.length === 0) return null;
  return (
    <div style={{ marginTop: 16 }}>
      <div className="label" style={{ marginBottom: 8 }}>{title}</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }}>
        {rows.map((name, index) => (
          <input
            key={index}
            className="input"
            placeholder={`${placeholder} ${index + 1}`}
            value={name}
            onChange={(e) => onNameChange(index, e.target.value)}
          />
        ))}
      </div>
    </div>
  );
}

function StepHousehold({ data, update }) {
  return (
    <div>
      <StepTitle n="1" t="Informations sur le foyer" />
      <div className="stack">
        <Field label="Nom" opt="(Requis)"><input className="input" value={data.lastName} onChange={(e) => update('lastName', e.target.value)} /></Field>
        <Field label="Adresse"><input className="input" value={data.address} onChange={(e) => update('address', e.target.value)} /></Field>
        <FieldRow>
          <Field label="E-mail principal"><input className="input" value={data.email} onChange={(e) => update('email', e.target.value)} /></Field>
          <Field label="Téléphone principal"><input className="input" value={data.phone} onChange={(e) => update('phone', e.target.value)} /></Field>
        </FieldRow>
      </div>
    </div>);

}

function StepGuests({ data, updateGuestCount, updateGuestName }) {
  const adults = parseInt(data.adults, 10) || 0;
  const teens = parseInt(data.teens, 10) || 0;
  return (
    <div>
      <StepTitle n="2" t="Adultes" />
      <FieldRow>
        <Field label="Combien d'adultes (18+) ?"><div><Stepper value={data.adults} onChange={(v) => updateGuestCount('adults', 'participantAdults', v)} /></div></Field>
        <Field label="Combien d'ados (13–17 ans) ?"><div><Stepper value={data.teens} onChange={(v) => updateGuestCount('teens', 'participantTeens', v)} /></div></Field>
      </FieldRow>
      <ParticipantNameFields
        title="Noms des adultes"
        names={data.participantAdults}
        count={adults}
        placeholder="Adulte"
        onNameChange={(index, value) => updateGuestName('participantAdults', index, value)}
      />
      <ParticipantNameFields
        title="Noms des ados"
        names={data.participantTeens}
        count={teens}
        placeholder="Ado"
        onNameChange={(index, value) => updateGuestName('participantTeens', index, value)}
      />
    </div>);

}
function StepKids({ data, update, updateGuestCount, updateGuestName }) {
  const kids = parseInt(data.kids, 10) || 0;
  return (
    <div>
      <StepTitle n="3" t="Enfants" />
      <FieldRow>
        <Field label="Combien d'enfants (12 ans et moins) ?"><div><Stepper value={data.kids} onChange={(v) => updateGuestCount('kids', 'participantKids', v)} /></div></Field>
        <Field label="Âges des enfants (séparés par des virgules)"><input className="input" value={data.kidAges} onChange={(e) => update('kidAges', e.target.value)} /></Field>
      </FieldRow>
      <ParticipantNameFields
        title="Noms des enfants"
        names={data.participantKids}
        count={kids}
        placeholder="Enfant"
        onNameChange={(index, value) => updateGuestName('participantKids', index, value)}
      />
    </div>);

}
function StepNeeds({ data, update }) {
  return (
    <div>
      <StepTitle n="4" t="Allergies, régimes et préférences alimentaires" />
      <FieldRow cols={3}>
        <Field label="Allergies (à préciser)"><input className="input" value={data.allergies} onChange={(e) => update('allergies', e.target.value)} /></Field>
        <Field label="Régime alimentaire">
          <select className="select" value={data.dietary} onChange={(e) => update('dietary', e.target.value)}>
            <option>Aucune restriction</option><option>Sans gluten</option><option>Végétarien</option><option>Végétalien</option><option>Halal</option><option>Casher</option>
          </select>
        </Field>
        <Field label="Préférence de repas">
          <select className="select" value={data.mealPref} onChange={(e) => update('mealPref', e.target.value)}>
            <option>Aucune préférence</option><option>Plutôt viande</option><option>Plutôt légumes</option><option>Un peu des deux</option>
          </select>
        </Field>
      </FieldRow>
    </div>);

}
function StepContributions({ data, update }) {
  const payingHeads = (parseInt(data.adults) || 0) + (parseInt(data.teens) || 0);
  const total = payingHeads * BBQ_EVENT.contributionPerAdult;
  const groups = [
  {
    title: 'À manger',
    items: [
    { icon: '🥩', label: 'Viandes pour le grill', detail: 'Bœuf, poulet, merguez, brochettes végé' },
    { icon: '🐟', label: 'Poissons grillés', detail: 'Sardines, dorade, saumon en papillote' },
    { icon: '🫒', label: 'Entrées & apéritifs', detail: 'Houmous, tapenade, charcuterie, fromages, crudités' },
    { icon: '🍉', label: 'Pastèque & fruits frais', detail: 'Pastèque, melon, fraises, raisin, etc' },
    { icon: '🥬', label: 'Légumes & spécialités', detail: 'Pondu, bitekuteku, légumes grillés, etc' },
    { icon: '🍔', label: 'Pains, sauces & condiments', detail: 'Buns, ketchup, moutarde, BBQ, harissa' }]

  },
  {
    title: 'À boire',
    items: [
    { icon: '🥤', label: 'Boissons fraîches sans alcool', detail: 'Eau, sodas, jus, sangria sans alcool, sirops' },
    { icon: '🍺', label: 'Bières (bouteilles)', detail: 'Blondes, IPA, sans-alcool' },
    { icon: '🍷', label: 'Vins rouges, blancs & rosés', detail: 'Sélection régionale, 12 bouteilles minimum' },
    { icon: '🥃', label: 'Spiritueux pour les grands', detail: 'Whisky, téquila, vodka, rhum + mixers' },
    { icon: '🍹', label: 'Ingrédients pour cocktails', detail: 'Citrons, menthe, sirops, sodas, glace pilée' },
    { icon: '☕', label: 'Café, thé & glaçons', detail: 'Glacières louées comprises' }]

  },
  {
    title: 'Logistique & matériel',
    items: [
    { icon: '🔥', label: '2 grands barbecues', detail: 'Nettoyage, transport & gaz' },
    { icon: '🪵', label: 'Charbon de bois, Gaz & allume-feu', detail: '12 kg de charbon premium' },
    { icon: '🪑', label: 'Chaises & tables louées', detail: 'Livraison & retour inclus' },
    { icon: '🍽️', label: 'Vaisselle compostable', detail: 'Assiettes, gobelets, couverts, serviettes' },
    { icon: '🧴', label: 'Produits d\'hygiène & sécurité', detail: 'Gel hydro, essuie-tout, sacs poubelle, trousse de secours' },
    { icon: '🎈', label: 'Décoration & animations enfants', detail: 'Ballons, jeux, prix tombola' }]

  }];

  return (
    <div>
      <StepTitle n="5" t="Participation aux frais" />
      <div style={{
        background: 'linear-gradient(135deg, rgba(224,116,79,0.10), rgba(212,168,87,0.10))',
        border: '1px solid rgba(224,116,79,0.30)',
        borderRadius: 12, padding: 18, marginBottom: 16,
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 18, alignItems: 'center'
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
            <span style={{ fontSize: 22 }}>🍖</span>
            <div className="serif" style={{ fontSize: 18, color: 'var(--green-900)', fontWeight: 700 }}>
              {BBQ_EVENT.contributionPerAdult}&nbsp;€ par personne — tout compris
            </div>
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55 }}>
            Une seule contribution pour <b>la nourriture, les boissons et toute la logistique</b> de la journée. <b>Les enfants ({BBQ_EVENT.freeAgeLimit} ans et moins) sont invités gratuitement.</b> Détails ci-dessous — vous repartez les mains vides, on s'occupe de tout.
          </div>
        </div>
        <div style={{
          background: 'white', border: '1px solid var(--line)', borderRadius: 10,
          padding: '12px 18px', textAlign: 'center', minWidth: 130
        }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 1, color: 'var(--ink-2)', fontWeight: 700 }}>Votre total</div>
          <div className="serif" style={{ fontSize: 30, color: 'var(--coral)', fontWeight: 700, lineHeight: 1.1, marginTop: 2 }}>{total}&nbsp;€</div>
          <div style={{ fontSize: 11, color: 'var(--ink-2)' }}>{payingHeads} × {BBQ_EVENT.contributionPerAdult}&nbsp;€</div>
        </div>
      </div>

      <div style={{
        background: 'white', border: '1px solid var(--line)', borderRadius: 12,
        padding: 18, marginBottom: 18
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <h4 className="serif" style={{ fontSize: 16, color: 'var(--green-900)', margin: 0 }}>
            Ce que couvrent vos {BBQ_EVENT.contributionPerAdult}&nbsp;€
          </h4>
          <span style={{ fontSize: 11, color: 'var(--ink-2)', textTransform: 'uppercase', letterSpacing: 1, fontWeight: 700 }}>
            Pour ~60 personnes
          </span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px 18px' }}>
          {groups.flatMap((g) => g.items).map((b, i) =>
          <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <span style={{ fontSize: 18, lineHeight: 1.3, flexShrink: 0 }}>{b.icon}</span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.3 }}>{b.label}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.4 }}>{b.detail}</div>
              </div>
            </div>
          )}
        </div>
      </div>

      <div style={{ background: 'white', border: '1px solid var(--line)', borderRadius: 12, padding: 16, marginBottom: 18 }}>
        <div className="serif" style={{ fontSize: 15, color: 'var(--green-900)', fontWeight: 700, marginBottom: 4 }}>
          💳 Comment payer (paiement en ligne, en avance)
        </div>
        <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 12, lineHeight: 1.5 }}>
          Choisissez l'option la plus simple pour vous — toutes mènent à la même cagnotte familiale.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          <a href="#" style={{ textDecoration: 'none' }}>
            <div style={{ border: '1px solid var(--line)', borderRadius: 10, padding: 12, display: 'flex', gap: 12, alignItems: 'center', background: 'rgba(224,116,79,0.04)' }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--coral)', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 14, flexShrink: 0 }}>L</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>Leetchi · Cagnotte famille <span style={{ background: 'var(--coral)', color: 'white', fontSize: 9, padding: '2px 6px', borderRadius: 6, marginLeft: 4, verticalAlign: 'middle' }}>RECOMMANDÉ</span></div>
                <div style={{ fontSize: 11, color: 'var(--ink-2)' }}>Carte bancaire, Apple/Google Pay · ouvert à tous</div>
              </div>
            </div>
          </a>
          <a href="#" style={{ textDecoration: 'none' }}>
            <div style={{ border: '1px solid var(--line)', borderRadius: 10, padding: 12, display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: '#0a3a87', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 11, flexShrink: 0 }}>SEPA</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>Virement SEPA</div>
                <div style={{ fontSize: 11, color: 'var(--ink-2)' }}>0 € de frais · IBAN envoyé après RSVP</div>
              </div>
            </div>
          </a>
          <a href="#" style={{ textDecoration: 'none' }}>
            <div style={{ border: '1px solid var(--line)', borderRadius: 10, padding: 12, display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: '#0064ff', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 11, flexShrink: 0 }}>PayPal</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>PayPal · option « entre proches »</div>
                <div style={{ fontSize: 11, color: 'var(--ink-2)' }}>Sans frais en zone euro</div>
              </div>
            </div>
          </a>
        </div>
      </div>

      <h3 className="serif" style={{ fontSize: 18, color: 'var(--green-900)', margin: '0 0 6px' }}>
        Auberge espagnole <span style={{ fontSize: 12, color: '#999', fontWeight: 400, fontFamily: 'Inter' }}>(Facultatif &amp; volontaire)</span>
      </h3>
      <p style={{ fontSize: 13, color: 'var(--ink-2)', margin: '0 0 14px' }}>
        Ajoutez votre plat seulement si vous voulez contribuer au buffet.
      </p>
      <FieldRow cols={3}>
        <Field label="J'apporte">
          <select className="select" value={data.potluckType} onChange={(e) => update('potluckType', e.target.value)}>
            <option>Accompagnement</option><option>Salade</option><option>Dessert</option><option>Mikaté</option><option>Boissons</option><option>Apéritif</option><option>Plat principal</option>
          </select>
        </Field>
        <Field label="Plat / Item"><input className="input" value={data.potluckDish} onChange={(e) => update('potluckDish', e.target.value)} /></Field>
        <Field label="Portions">
          <select className="select" value={data.potluckServings} onChange={(e) => update('potluckServings', e.target.value)}>
            <option>4–6</option><option>6–8</option><option>10–12</option><option>15+</option>
          </select>
        </Field>
      </FieldRow>
      <div style={{ marginTop: 12 }}>
        <label className="checkbox"><input type="checkbox" checked={data.needHelp} onChange={(e) => update('needHelp', e.target.checked)} /> J'ai besoin d'idées</label>
      </div>
      <div className="h-divider" />

      <h3 className="serif" style={{ fontSize: 18, color: 'var(--green-900)', margin: '0 0 14px' }}>6. Créneau bénévole <span style={{ fontSize: 12, color: '#999', fontWeight: 400, fontFamily: 'Inter' }}>(Facultatif)</span></h3>
      <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
        <label className="checkbox"><input type="checkbox" checked={data.volunteer} onChange={(e) => update('volunteer', e.target.checked)} /> Je veux aider !</label>
        {data.volunteer &&
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, flex: 1 }}>
            <Field label="Rôle préféré">
              <select className="select" value={data.volRole} onChange={(e) => update('volRole', e.target.value)}>
                <option>Équipe Installation</option><option>Maître du grill</option><option>Musique & Ambiance</option><option>Jeux pour enfants</option><option>Équipe Rangement</option><option>Photographe</option>
              </select>
            </Field>
            <Field label="Horaire préféré">
              <select className="select" value={data.volTime} onChange={(e) => update('volTime', e.target.value)}>
                <option>13h00 – 15h00</option><option>15h00 – 17h00</option><option>17h00 – 19h00</option><option>N'importe quand !</option>
              </select>
            </Field>
          </div>
        }
      </div>
    </div>);

}
function StepContact({ data, update }) {
  return (
    <div>
      <StepTitle n="7" t="Préférences de contact" />
      <FieldRow>
        <div>
          <div className="label" style={{ marginBottom: 10 }}>Comment vous contacter ?</div>
          <div style={{ display: 'grid', gap: 10 }}>
            <label className="checkbox"><input type="checkbox" checked={data.contactEmail} onChange={(e) => update('contactEmail', e.target.checked)} /> E-mail</label>
            <label className="checkbox"><input type="checkbox" checked={data.contactSMS} onChange={(e) => update('contactSMS', e.target.checked)} /> WhatsApp</label>
            <label className="checkbox"><input type="checkbox" checked={data.contactPhone} onChange={(e) => update('contactPhone', e.target.checked)} /> Appel téléphonique</label>
          </div>
        </div>
        <div>
          <div className="label" style={{ marginBottom: 10 }}>Recevoir des nouvelles sur :</div>
          <div style={{ display: 'grid', gap: 10 }}>
            <label className="checkbox"><input type="checkbox" checked={data.updatesEvent} onChange={(e) => update('updatesEvent', e.target.checked)} /> Mises à jour & rappels de l'événement</label>
            <label className="checkbox"><input type="checkbox" checked={data.updatesPotluck} onChange={(e) => update('updatesPotluck', e.target.checked)} /> Auberge espagnole & bénévolat</label>
          </div>
        </div>
      </FieldRow>
    </div>);

}
function StepReview({ data }) {
  const participants = [
    ...resizeNames(data.participantAdults, parseInt(data.adults, 10) || 0),
    ...resizeNames(data.participantTeens, parseInt(data.teens, 10) || 0),
    ...resizeNames(data.participantKids, parseInt(data.kids, 10) || 0),
  ].map((name) => name.trim()).filter(Boolean);
  const Row = ({ label, value }) =>
  <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 12, padding: '8px 0', borderBottom: '1px dashed var(--line)' }}>
      <div className="label">{label}</div>
      <div style={{ fontSize: 14 }}>{value}</div>
    </div>;

  return (
    <div>
      <StepTitle n="8" t="Vérifiez votre inscription" />
      <div style={{ background: 'var(--cream)', borderRadius: 10, padding: 16 }}>
        <Row label="Foyer" value={`Famille ${data.lastName} · ${data.email}`} />
        <Row label="Effectif" value={`${data.adults} adultes · ${data.teens} ados · ${data.kids} enfants`} />
        <Row label="Participants" value={participants.length ? participants.join(' · ') : 'Noms à compléter'} />
        <Row label="Allergies" value={data.allergies || '—'} />
        <Row label="Régime" value={data.dietary} />
        {data.potluckDish &&
          <Row label="J'apporte" value={`${data.potluckDish} (${data.potluckType}, ${data.potluckServings})`} />
        }
        <Row label="Bénévolat" value={data.volunteer ? `${data.volRole}, ${data.volTime}` : 'Pas cette année'} />
      </div>
      <div style={{ marginTop: 14, padding: 14, background: 'rgba(224,116,79,0.08)', border: '1px solid rgba(224,116,79,0.25)', borderRadius: 10, fontSize: 13, color: 'var(--ink)' }}>
        🍖 Nous enverrons une confirmation à <b>{data.email || 'votre e-mail'}</b>. Vous pouvez modifier jusqu'au <b>{BBQ_EVENT.rsvpDeadline}</b>.
      </div>
    </div>);

}

window.RSVP = RSVP;