function Founding() {
  const [done, setDone] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const t = window.t;
  const lang = window.__LANG__ || 'el';
  const TOTAL = 50;
  const baseFilled = 17;
  const filled = done ? baseFilled + 1 : baseFilled;
  const pct = Math.round((filled / TOTAL) * 100);

  async function onSubmit(e) {
    e.preventDefault();
    if (submitting) return;
    const form = e.target;
    setSubmitting(true); setError('');
    try {
      const res = await fetch('https://formspree.io/f/mvzjkyrz', {
        method: 'POST',
        body: new FormData(form),
        headers: { Accept: 'application/json' },
      });
      if (res.ok) { setDone(true); form.reset(); }
      else {
        const j = await res.json().catch(() => ({}));
        const msg = j && j.errors && j.errors[0] && j.errors[0].message;
        setError(msg || (lang === 'el' ? 'Κάτι πήγε στραβά. Δοκίμασε ξανά.' : 'Something went wrong. Please try again.'));
      }
    } catch (err) {
      setError(lang === 'el' ? 'Σφάλμα δικτύου. Δοκίμασε ξανά.' : 'Network error. Please try again.');
    }
    setSubmitting(false);
  }

  return (
    <section id="founding" className="bg-white py-20 md:py-28 border-t border-b border-[#e5e5e5]">
      <div className="max-w-[720px] mx-auto px-4 text-center" data-reveal>
        
        {/* Badge Pill */}
        <span className="inline-block bg-[#e6f4fe] text-[#0096F7] text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-wider mb-4">
          {t('founding.badge')}
        </span>

        {/* Title */}
        <h2 className="font-sans font-normal text-3xl md:text-[46px] md:leading-[1.12] text-[#171717] tracking-tight">
          {t('founding.title')}
        </h2>

        <p className="mt-4 text-base md:text-lg text-[#6a6a6a] max-w-[540px] mx-auto leading-relaxed">
          {t('founding.sub')}
        </p>

        {/* Live Waitlist Progress Bar */}
        <div className="max-w-[420px] mx-auto mt-8 p-4 bg-[#f9f9f9] border border-[#e5e5e5] rounded-2xl">
          <div className="flex items-baseline justify-between mb-2 text-sm font-semibold">
            <span className="text-[#171717]">
              <span className="text-[#0096F7] font-bold text-base">{filled}</span> / {TOTAL} {t('waitlist.filled')}
            </span>
            <span className="text-xs text-[#0080d4]">
              {TOTAL - filled} {t('waitlist.spotsLeft')}
            </span>
          </div>
          <div className="h-2 rounded-full bg-[#e5e5e5] overflow-hidden">
            <div 
              className="h-full bg-[#0096F7] rounded-full transition-all duration-500" 
              style={{ width: `${pct}%` }}
            />
          </div>
        </div>

        {/* Form */}
        {!done ? (
          <form onSubmit={onSubmit} className="flex flex-col sm:flex-row gap-3 max-w-[480px] mx-auto mt-8">
            <input type="hidden" name="_subject" value="New ellaride founding-driver signup" />
            <input type="text" name="_gotcha" className="hidden" tabIndex="-1" autoComplete="off" />
            <input type="hidden" name="source" value="Founding section v6" />
            
            <input 
              type="email" 
              name="email" 
              required 
              placeholder={t('founding.placeholder')} 
              disabled={submitting}
              className="flex-1 h-[52px] px-4 bg-[#f9f9f9] border border-[#e5e5e5] rounded-full text-base text-[#171717] outline-none focus:border-[#0096F7]"
            />
            <button 
              type="submit" 
              disabled={submitting}
              className="h-[52px] px-8 bg-[#0096F7] hover:bg-[#0080d4] text-white font-medium text-base rounded-full transition-colors shadow-sm whitespace-nowrap">
              {submitting ? (lang === 'el' ? 'Αποστολή…' : 'Sending…') : t('founding.button')}
            </button>
          </form>
        ) : (
          <div className="inline-flex items-center gap-2 mt-8 px-6 py-3 bg-[#e6f4fe] border border-[#0096F7]/30 rounded-full text-[#0096F7] font-medium text-sm">
            ✓ {t('founding.success')}
          </div>
        )}

        {error && <div className="mt-3 text-sm text-red-500">{error}</div>}
        <div className="mt-4 text-xs text-[#a3a3a3]">{t('founding.disclaimer')}</div>

      </div>
    </section>
  );
}

window.Founding = Founding;