function Footer() {
  const { t, lang } = window.useT();

  // Booking form state
  const [name, setName]       = React.useState('');
  const [contact, setContact] = React.useState('');
  const [age, setAge]         = React.useState('6–8');
  const [status, setStatus]   = React.useState('idle'); // 'idle' | 'sending' | 'success' | 'error'

  const submitBooking = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');

    const cfg = window.APP_CONFIG || {};
    const phone = cfg.WHATSAPP_NUMBER || '212672121112';
    const payload = {
      parent_name: name.trim(),
      contact: contact.trim(),
      child_age: age,
      lang: lang || 'en',
    };

    let dbOk = false;
    let dbErr = null;
    try {
      // 1) Save to Supabase if configured (anon key present and not placeholder)
      if (cfg.SUPABASE_URL && cfg.SUPABASE_ANON_KEY && cfg.SUPABASE_ANON_KEY.length > 20) {
        const r = await fetch(`${cfg.SUPABASE_URL}/rest/v1/bookings`, {
          method: 'POST',
          headers: {
            'apikey':        cfg.SUPABASE_ANON_KEY,
            'Authorization': `Bearer ${cfg.SUPABASE_ANON_KEY}`,
            'Content-Type':  'application/json',
            'Prefer':        'return=minimal',
          },
          body: JSON.stringify(payload),
        });
        if (!r.ok) {
          const body = await r.text().catch(() => '');
          throw new Error(`Supabase ${r.status}: ${body.slice(0, 200)}`);
        }
        dbOk = true;
      }
    } catch (err) {
      dbErr = err;
      console.error('[booking] DB insert failed:', err);
    }

    // 2) Open WhatsApp with a pre-filled message. We do this regardless
    //    of DB success so the family can always reach us.
    const wa =
      `🎓 *Nouvelle réservation — Robotics Center Ouarzazate*\n\n` +
      `*Parent:* ${payload.parent_name || '—'}\n` +
      `*Contact:* ${payload.contact || '—'}\n` +
      `*Âge de l'enfant:* ${payload.child_age}\n` +
      `*Langue du site:* ${payload.lang.toUpperCase()}\n\n` +
      `_Envoyé depuis le site web._`;
    const waUrl = `https://wa.me/${phone}?text=${encodeURIComponent(wa)}`;
    // window.open in the same tick of the click handler keeps it as a
    // user-initiated navigation (browsers allow it without popup blocking).
    window.open(waUrl, '_blank', 'noopener,noreferrer');

    if (dbOk || !dbErr) {
      setStatus('success');
      setName(''); setContact('');
    } else {
      // WhatsApp still opened; surface a soft error so the family knows
      // we didn't manage to save their entry to the system.
      setStatus('error');
    }

    // Auto-reset status after a few seconds so the button is usable again
    setTimeout(() => setStatus(s => s === 'sending' ? s : 'idle'), 5000);
  };

  return (
    <footer id="contact" className="relative bg-brand-800 text-cream overflow-hidden">
      <div aria-hidden className="absolute inset-0 opacity-10 studs" style={{ background: 'radial-gradient(circle at 50% 50%, #fff 22%, transparent 23%) 0 0/32px 32px' }}/>

      <div id="join" className="relative px-4 sm:px-8 pt-20 pb-12">
        <div className="mx-auto max-w-7xl rounded-blob bg-gradient-to-br from-tang-400 via-sun-400 to-tang-400 p-8 sm:p-12 border-4 border-brand-900 shadow-card relative overflow-hidden">
          <div aria-hidden className="absolute -top-10 -right-10 w-60 h-60 rounded-full bg-cream/30 blur-2xl"/>
          <div className="relative grid lg:grid-cols-[1.4fr_1fr] gap-8 items-center">
            <div>
              <div className="inline-block px-3 py-1 rounded-full bg-brand-800 text-cream font-extrabold text-[11px] tracking-wider uppercase mb-4">{t.footer.ctaPill}</div>
              <h3 className="font-display font-extrabold text-brand-900 text-[36px] sm:text-[48px] leading-[1.05] tracking-tight">
                {t.footer.ctaTitle1}<br/>{t.footer.ctaTitle2}
              </h3>
              <p className="mt-4 text-brand-900/80 font-bold text-[16px] max-w-md">{t.footer.ctaSub}</p>
            </div>
            <form onSubmit={submitBooking} className="bg-cream rounded-3xl border-2 border-brand-900 p-5 sm:p-6 shadow-pop">
              <label className="block text-[11px] font-extrabold uppercase tracking-wider text-brand-700 mb-1">{t.footer.parent}</label>
              <input
                required type="text" placeholder="Fatima Z."
                value={name} onChange={(e) => setName(e.target.value)}
                className="w-full rounded-xl border-2 border-brand-100 focus:border-brand-400 outline-none px-4 py-3 font-bold text-brand-800 mb-3"
              />
              <label className="block text-[11px] font-extrabold uppercase tracking-wider text-brand-700 mb-1">{t.footer.email}</label>
              <input
                required type="text" placeholder="you@example.com"
                value={contact} onChange={(e) => setContact(e.target.value)}
                className="w-full rounded-xl border-2 border-brand-100 focus:border-brand-400 outline-none px-4 py-3 font-bold text-brand-800 mb-3"
              />
              <label className="block text-[11px] font-extrabold uppercase tracking-wider text-brand-700 mb-1">{t.footer.age}</label>
              <div className="grid grid-cols-3 gap-2 mb-4">
                {['6–8','9–12','13+'].map(a => (
                  <label key={a} className="cursor-pointer">
                    <input
                      type="radio" name="age" value={a}
                      checked={age === a}
                      onChange={() => setAge(a)}
                      className="peer sr-only"
                    />
                    <div className="text-center font-extrabold text-[14px] text-brand-700 border-2 border-brand-100 rounded-xl py-2.5 peer-checked:bg-brand-600 peer-checked:text-cream peer-checked:border-brand-600 transition">{a}</div>
                  </label>
                ))}
              </div>
              <button
                type="submit"
                disabled={status === 'sending'}
                className="w-full bg-brand-700 text-cream font-extrabold py-3.5 rounded-xl btn-3d disabled:opacity-70 disabled:cursor-wait"
              >
                {status === 'sending' ? t.footer.sending : t.footer.submit}
              </button>
              {status === 'success' && (
                <div className="mt-3 text-[13px] font-extrabold text-mint-400 text-center">
                  {t.footer.thanks}
                </div>
              )}
              {status === 'error' && (
                <div className="mt-3 text-[13px] font-bold text-tang-500 text-center">
                  {t.footer.errorSend}
                </div>
              )}
            </form>
          </div>
        </div>
      </div>

      <div className="relative px-4 sm:px-8 pb-10">
        <div className="mx-auto max-w-7xl grid sm:grid-cols-2 lg:grid-cols-4 gap-10 pt-8 border-t border-cream/10">
          <div>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-11 h-11 rounded-xl bg-cream grid place-items-center">
                <img src="assets/logo.png" className="w-8 h-8 object-contain" alt="Robotics Center"/>
              </div>
              <div className="leading-tight">
                <div className="font-display font-extrabold text-cream">Robotics Center</div>
                <div className="text-[11px] uppercase tracking-[0.2em] text-cream/60 font-bold">Ouarzazate</div>
              </div>
            </div>
            <p className="text-cream/70 text-[14px] leading-relaxed font-medium max-w-xs">{t.footer.org}</p>
          </div>

          <div>
            <div className="text-[11px] uppercase tracking-[0.18em] font-extrabold text-tang-400 mb-3">{t.footer.visit}</div>
            <address className="not-italic text-cream/85 font-semibold text-[14px] leading-relaxed">
              {t.footer.addr1}<br/>{t.footer.addr2}<br/>{t.footer.addr3}
            </address>
            <a href="https://www.google.com/maps/place/Robotics+Center+Ouarzazate/@30.9300112,-6.9039206,17z/data=!3m1!4b1!4m6!3m5!1s0xdbb1148e1d6b003:0x5ce45e6d583b87f5!8m2!3d30.9300066!4d-6.9013457!16s%2Fg%2F11ylbxxq3h" target="_blank" rel="noopener" className="mt-3 inline-flex items-center gap-1.5 text-[13px] text-sun-400 font-extrabold hover:underline">{t.footer.maps}</a>
          </div>

          <div>
            <div className="text-[11px] uppercase tracking-[0.18em] font-extrabold text-tang-400 mb-3">{t.footer.talk}</div>
            <ul className="space-y-2 text-cream/85 font-semibold text-[14px]">
              <li><a href="tel:+212672121112" className="hover:text-cream" dir="ltr">📞 +212 672 12 11 12</a></li>
              <li><a href="mailto:support@roboticscenter.ma" className="hover:text-cream">✉️ support@roboticscenter.ma</a></li>
              <li>🕒 {t.footer.hours}</li>
            </ul>
          </div>

          <div>
            <div className="text-[11px] uppercase tracking-[0.18em] font-extrabold text-tang-400 mb-3">{t.footer.follow}</div>
            <div className="flex flex-wrap gap-2">
              {[
                {name:'Instagram', url:'https://www.instagram.com/roboticscenterouarzazate/'},
                {name:'Facebook', url:'https://www.facebook.com/profile.php?id=100090126790204'},
              ].map(s => (
                <a key={s.name} href={s.url} target="_blank" rel="noopener" className="px-3 py-2 rounded-xl bg-cream/10 hover:bg-cream/20 text-cream font-extrabold text-[13px] transition">{s.name}</a>
              ))}
            </div>
            <div className="mt-5 text-[12px] text-cream/50 font-medium">{t.footer.legal}</div>
          </div>
        </div>

        <div className="mx-auto max-w-7xl mt-10 pt-6 border-t border-cream/10 flex flex-wrap items-center justify-between gap-3 text-[12px] text-cream/60 font-semibold">
          <div>{t.footer.copy}</div>
          <div className="flex gap-5">
            <a href="privacy.html" className="hover:text-cream">{t.footer.privacy}</a>
            <a href="code-of-conduct.html" className="hover:text-cream">{t.footer.conduct}</a>
            <a href="#" className="hover:text-cream">{t.footer.made}</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;