function Rsvp(){
  const { t, lang } = useLang();
  const [ref, inView] = useInView({threshold:.1});
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    name:'', email:'', attend:null, plusOne:false, plusOneName:'', kids:0,
    diet:[], dietOther:'', message:'',
  });
  const [errors, setErrors]     = React.useState({});
  const [loading, setLoading]   = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');

  const SESSION_KEY = `rsvp_sent_${CONFIG.event_id}`;
  const dietOptions = window.TRANSLATIONS[lang].rsvp.diet_options;

  const validate = () => {
    const e = {};
    if (step === 0) {
      if (!data.name.trim() || data.name.trim().length < 2) e.name = t('rsvp.err_name');
      if (!data.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) e.email = t('rsvp.err_email');
    }
    if (step === 1 && data.attend == null) e.attend = t('rsvp.err_attend');
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const inviaRsvp = async () => {
    if (sessionStorage.getItem(SESSION_KEY)) {
      setStep(s => s + 1);
      return;
    }
    setLoading(true);
    setSubmitError('');
    const nomeTrim = data.name.trim();
    const lastSpazio = nomeTrim.lastIndexOf(' ');
    const first_name = lastSpazio > 0 ? nomeTrim.slice(0, lastSpazio) : nomeTrim;
    const last_name  = lastSpazio > 0 ? nomeTrim.slice(lastSpazio + 1) : '';
    const { error } = await window.db.from('guests').insert({
      event_id:      CONFIG.event_id,
      first_name,
      last_name,
      email:         data.email,
      attending:     data.attend,
      plus_one:      data.plusOne,
      plus_one_name: data.plusOneName || null,
      kids:          data.kids,
      dietary:       data.diet,
      dietary_other: data.dietOther || null,
      message:       data.message || null,
    });
    setLoading(false);
    if (error) {
      setSubmitError(t('rsvp.err_network'));
      return;
    }
    sessionStorage.setItem(SESSION_KEY, '1');
    sessionStorage.setItem(`rsvp_name_${CONFIG.event_id}`, data.name);
    sessionStorage.setItem(`rsvp_email_${CONFIG.event_id}`, data.email);
    setStep(s => s + 1);
  };

  const next = async () => {
    if (!validate()) return;
    const isUltimoStep = step === 2 || (step === 1 && data.attend === false);
    if (isUltimoStep) await inviaRsvp();
    else setStep(s => s + 1);
  };

  const back = () => { setSubmitError(''); setStep(s => Math.max(0, s-1)); };

  const steps = window.TRANSLATIONS[lang].rsvp.steps;
  const visibleStep = step === 2 && data.attend === false ? 3 : step;

  const firstName = data.name.split(' ')[0];

  return (
    <section ref={ref} data-screen-label="09 RSVP" style={{
      position:'relative', background:'var(--cream)', color:'var(--ink)',
      padding:'22vh 6vw 20vh', overflow:'hidden', minHeight:'100vh',
    }}>
      <div style={{position:'relative', zIndex:2, maxWidth:960, margin:'0 auto'}}>
        <div className={`reveal ${inView?'in':''}`} style={{display:'flex', alignItems:'baseline', gap:20, marginBottom:30}}>
          <div style={{width:60, height:1, background:'var(--ink)', opacity:.3}}/>
          <span className="italiana" style={{fontSize:11, letterSpacing:5, opacity:.55}}>
            {t('rsvp.section_label')}
          </span>
        </div>
        <DecodeText
          tag="h2" className="display"
          text={t('rsvp.title')}
          endPct={55}
          style={{
            fontSize:'clamp(56px, 9vw, 160px)', lineHeight:.88, fontWeight:200, letterSpacing:'-.04em',
            fontStyle:'italic', fontVariationSettings:'"SOFT" 100',
            marginBottom:30, maxWidth:'14ch',
          }}
        />
        <p className={`reveal ${inView?'in':''} cormorant`} style={{fontSize:18, opacity:.7, maxWidth:500, marginBottom:60, transitionDelay:'.15s', fontStyle:'italic', lineHeight:1.55}}>
          {t('rsvp.deadline_pre')} <strong style={{color:'var(--blood)', fontWeight:500}}>{formatDate(CONFIG.event.rsvp_deadline_iso, lang)}</strong>{t('rsvp.deadline_post')}
        </p>

        {/* Progress */}
        <div className={`reveal ${inView?'in':''}`} style={{display:'flex', gap:12, marginBottom:50, transitionDelay:'.2s'}}>
          {steps.map((s, i) => (
            <div key={i} style={{flex:1}}>
              <div style={{height:2, background: i <= visibleStep ? 'var(--blood)' : 'rgba(10,6,5,.15)', transition:'background .4s'}}/>
              <div className="italiana" style={{
                fontSize:10, letterSpacing:3, textTransform:'uppercase', marginTop:10,
                color: i === visibleStep ? 'var(--blood)' : 'rgba(10,6,5,.4)',
                transition:'color .4s',
              }}>
                {String(i+1).padStart(2,'0')} · {s}
              </div>
            </div>
          ))}
        </div>

        {/* Form */}
        <div key={visibleStep} style={{minHeight:380, animation:'fadeUp .5s ease'}}>
          {visibleStep === 0 && (
            <div style={{display:'grid', gap:36}}>
              <Field label={t('rsvp.field_name')} error={errors.name}>
                <input value={data.name} onChange={e => setData({...data, name:e.target.value})}
                  placeholder={t('rsvp.field_name_placeholder')} className="rsvp-input"/>
              </Field>
              <Field label={t('rsvp.field_email')} error={errors.email}>
                <input type="email" value={data.email} onChange={e => setData({...data, email:e.target.value})}
                  placeholder={t('rsvp.field_email_placeholder')} className="rsvp-input"/>
              </Field>
            </div>
          )}

          {visibleStep === 1 && (
            <div>
              <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.55, textTransform:'uppercase', marginBottom:24}}>
                · {steps[1]}
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
                {[
                  {v:true,  l:t('rsvp.attend_yes_label'), s:t('rsvp.attend_yes_sub')},
                  {v:false, l:t('rsvp.attend_no_label'),  s:t('rsvp.attend_no_sub')},
                ].map(o => (
                  <button key={String(o.v)} onClick={() => setData({...data, attend:o.v})}
                    style={{
                      padding:'50px 36px', background: data.attend === o.v ? 'var(--blood)' : 'transparent',
                      color: data.attend === o.v ? 'var(--cream)' : 'var(--ink)',
                      border: `1px solid ${data.attend === o.v ? 'var(--blood)' : 'rgba(10,6,5,.25)'}`,
                      cursor:'pointer', textAlign:'left', transition:'all .25s',
                    }}>
                    <div className="display" style={{fontSize:44, fontStyle:'italic', fontWeight:300, lineHeight:1, marginBottom:12, fontVariationSettings:'"SOFT" 80'}}>
                      {o.l}
                    </div>
                    <div className="cormorant" style={{fontSize:15, opacity:.7, fontStyle:'italic'}}>{o.s}</div>
                  </button>
                ))}
              </div>
              {errors.attend && <div style={{color:'var(--blood)', marginTop:14, fontSize:13, fontStyle:'italic'}}>{errors.attend}</div>}
            </div>
          )}

          {visibleStep === 2 && data.attend && (
            <div style={{display:'grid', gap:38}}>
              <Field label={t('rsvp.field_plusone')}>
                <label style={{display:'flex', alignItems:'center', gap:14, cursor:'pointer'}}>
                  <input type="checkbox" checked={data.plusOne} onChange={e => setData({...data, plusOne:e.target.checked})}
                    style={{accentColor:'var(--blood)', width:18, height:18}}/>
                  <span className="cormorant" style={{fontSize:17, fontStyle:'italic'}}>{t('rsvp.field_plusone_check')}</span>
                </label>
                {data.plusOne && (
                  <input value={data.plusOneName} onChange={e => setData({...data, plusOneName:e.target.value})}
                    placeholder={t('rsvp.field_plusone_name_placeholder')} className="rsvp-input" style={{marginTop:18}}/>
                )}
              </Field>
              <Field label={t('rsvp.field_kids')}>
                <div style={{display:'flex', alignItems:'center', gap:14}}>
                  <button type="button" onClick={() => setData({...data, kids:Math.max(0, data.kids-1)})} className="rsvp-btn-sm">−</button>
                  <span className="display" style={{fontSize:28, minWidth:30, textAlign:'center', fontStyle:'italic'}}>{data.kids}</span>
                  <button type="button" onClick={() => setData({...data, kids:data.kids+1})} className="rsvp-btn-sm">+</button>
                </div>
              </Field>
              <Field label={t('rsvp.field_diet')}>
                <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
                  {dietOptions.map(d => {
                    const on = data.diet.includes(d);
                    return (
                      <button key={d} type="button" onClick={() => setData({...data, diet: on ? data.diet.filter(x=>x!==d) : [...data.diet, d]})}
                        className="italiana" style={{
                          padding:'9px 16px', background: on ? 'var(--blood)' : 'transparent', color: on ? 'var(--cream)' : 'var(--ink)',
                          border:`1px solid ${on ? 'var(--blood)' : 'rgba(10,6,5,.25)'}`, cursor:'pointer', fontSize:11, letterSpacing:2,
                          textTransform:'uppercase',
                        }}>
                        {d}
                      </button>
                    );
                  })}
                </div>
                {data.diet.includes(dietOptions[4]) && (
                  <input value={data.dietOther} onChange={e => setData({...data, dietOther:e.target.value})}
                    placeholder={t('rsvp.field_diet_other_placeholder')} className="rsvp-input" style={{marginTop:14}}/>
                )}
              </Field>
              <Field label={t('rsvp.field_message')}>
                <textarea value={data.message} onChange={e => setData({...data, message:e.target.value})}
                  placeholder={t('rsvp.field_message_placeholder')} rows={3} className="rsvp-input"/>
              </Field>
            </div>
          )}

          {visibleStep === 3 && (
            <div style={{textAlign:'center', padding:'40px 0'}}>
              <div className="script" style={{fontSize:'clamp(80px, 12vw, 180px)', lineHeight:.9, color:'var(--blood)', marginBottom:24}}>
                {data.attend === false ? t('rsvp.thanks_no_script') : t('rsvp.thanks_yes_script')}
              </div>
              <p className="cormorant" style={{fontSize:20, opacity:.8, maxWidth:500, margin:'0 auto 30px', lineHeight:1.55, fontStyle:'italic'}}>
                {data.attend === false
                  ? t('rsvp.thanks_no_body').replace('{name}', firstName)
                  : `${firstName}, ${t('rsvp.thanks_yes_body')}`
                }
              </p>
              <div className="italiana" style={{fontSize:10, letterSpacing:4, opacity:.5, textTransform:'uppercase'}}>
                {t('rsvp.thanks_date').replace('{date_display}', t('rsvp.date_display')).replace('{time}', CONFIG.ceremony.time)}
              </div>
            </div>
          )}
        </div>

        {/* Nav */}
        {visibleStep < 3 && (
          <div style={{marginTop:60, paddingTop:30, borderTop:'1px solid rgba(10,6,5,.12)'}}>
            {submitError && (
              <p className="cormorant" style={{color:'var(--blood)', fontSize:15, fontStyle:'italic', marginBottom:20}}>
                {submitError}
              </p>
            )}
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <button onClick={back} disabled={step===0 || loading} className="italiana" style={{
                background:'transparent', border:'none', color:'var(--ink)',
                padding:'12px 0', cursor: step===0 ? 'not-allowed' : 'pointer', opacity: step===0 ? .3 : .7,
                fontSize:11, letterSpacing:2.5, textTransform:'uppercase',
              }}>
                {t('rsvp.btn_back')}
              </button>
              <button onClick={next} disabled={loading} className="italiana" style={{
                background:'var(--blood)', color:'var(--cream)', border:'none',
                padding:'16px 34px', cursor: loading ? 'wait' : 'pointer',
                fontSize:11, letterSpacing:3, textTransform:'uppercase',
                opacity: loading ? .7 : 1, transition:'opacity .2s',
              }}>
                {loading ? t('rsvp.btn_loading') : (
                  visibleStep === 2 ? t('rsvp.btn_submit') :
                  visibleStep === 1 && data.attend === false ? t('rsvp.btn_confirm_no') :
                  t('rsvp.btn_next')
                )}
              </button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function Field({ label, children, error }){
  return (
    <div>
      <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.55, textTransform:'uppercase', marginBottom:14}}>
        · {label}
      </div>
      {children}
      {error && <div style={{color:'var(--blood)', marginTop:8, fontSize:13, fontStyle:'italic'}}>{error}</div>}
    </div>
  );
}

window.Rsvp = Rsvp;