// Contact form — with live validation and success state
const { useState: useStateC } = React;

const contactStyles = {
  wrap: { padding: '140px 0', borderBottom: '1px solid var(--line)', position: 'relative', overflow: 'hidden' },
  bgGlow: {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    background: 'radial-gradient(50% 50% at 85% 30%, rgba(var(--accent-rgb),.08), transparent 70%)',
  },
  inner: { position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' },
  title: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 88, lineHeight: 0.95, letterSpacing: '-0.03em',
    margin: 0, marginBottom: 24,
  },
  sub: { fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.55, maxWidth: 440, marginBottom: 32 },
  meta: {
    marginTop: 40,
    padding: '24px 0', borderTop: '1px solid var(--line)',
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
    fontSize: 14, color: 'var(--ink-2)',
  },
  metaLabel: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 6 },
  metaV: { color: 'var(--ink)' },

  form: {
    position: 'relative',
    padding: 36,
    background: 'var(--panel)',
    border: '1px solid var(--line-2)',
    borderRadius: 'var(--radius)',
    display: 'flex', flexDirection: 'column', gap: 18,
  },
  row: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 },
  field: { display: 'flex', flexDirection: 'column', gap: 6 },
  label: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ink-3)',
  },
  input: {
    padding: '14px 16px',
    border: '1px solid var(--line-2)',
    borderRadius: 10,
    background: 'var(--bg)',
    color: 'var(--ink)',
    fontSize: 15, fontFamily: 'inherit',
    outline: 'none',
    transition: 'border-color .2s',
  },
  inputInvalid: { borderColor: 'var(--coral)' },
  err: { fontSize: 12, color: 'var(--coral)', marginTop: 2, fontFamily: "'JetBrains Mono', monospace" },
  select: { appearance: 'none', backgroundImage: 'linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-2) 50%)', backgroundPosition: 'calc(100% - 18px) 50%, calc(100% - 13px) 50%', backgroundSize: '5px 5px', backgroundRepeat: 'no-repeat' },
  submit: {
    marginTop: 8,
    padding: '16px 20px',
    background: 'var(--accent)', color: 'var(--accent-fg)',
    borderRadius: 999, fontWeight: 500, fontSize: 15,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    cursor: 'pointer', transition: 'transform .2s',
  },
  sendErr: {
    padding: '12px 14px', borderRadius: 10,
    border: '1px solid var(--coral)', color: 'var(--coral)',
    fontSize: 14, lineHeight: 1.45,
  },
  legal: { fontSize: 12, lineHeight: 1.5, color: 'var(--ink-3)', margin: 0 },
  success: {
    padding: 36, textAlign: 'center',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16,
  },
  successIcon: {
    width: 64, height: 64, borderRadius: 999,
    background: 'rgba(var(--accent-rgb),.12)', border: '1px solid var(--accent)',
    display: 'grid', placeItems: 'center', color: 'var(--accent)',
  },
  successH: { fontFamily: "'Instrument Serif', serif", fontSize: 32, margin: 0 },
  successP: { fontSize: 15, color: 'var(--ink-2)', maxWidth: 340, lineHeight: 1.5 },
};

function Contact() {
  const [form, setForm] = useStateC({ name: '', email: '', phone: '', company: '', sector: '', volume: '', msg: '' });
  const [errs, setErrs] = useStateC({});
  const [sent, setSent] = useStateC(false);
  const [sending, setSending] = useStateC(false);
  const [sendErr, setSendErr] = useStateC('');
  // Leurre anti-robot : champ hors écran, laissé vide par un humain.
  const [trap, setTrap] = useStateC('');

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Requis';
    if (!/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) e.email = 'Email invalide';
    if (!/^[\d\s+()-]{8,}$/.test(form.phone)) e.phone = 'Téléphone invalide';
    if (!form.company.trim()) e.company = 'Requis';
    if (!form.sector) e.sector = 'Requis';
    return e;
  };

  const onSubmit = async (ev) => {
    ev.preventDefault();
    if (sending) return;
    const e = validate();
    setErrs(e);
    if (Object.keys(e).length > 0) return;

    setSending(true);
    setSendErr('');
    try {
      const res = await fetch('/api/lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, website: trap }),
      });
      if (res.ok) {
        setSent(true);
      } else if (res.status === 422) {
        setSendErr('Certains champs sont invalides. Vérifiez le formulaire.');
      } else {
        setSendErr("L'envoi a échoué. Réessayez, ou écrivez-nous à hello@backmeup.fr.");
      }
    } catch {
      setSendErr("L'envoi a échoué. Vérifiez votre connexion et réessayez.");
    } finally {
      setSending(false);
    }
  };

  const set = (k) => (e) => {
    setForm((f) => ({ ...f, [k]: e.target.value }));
    if (errs[k]) setErrs((er) => { const n = {...er}; delete n[k]; return n; });
  };

  return (
    <section id="contact" style={contactStyles.wrap} className="section-pad">
      <div style={contactStyles.bgGlow}/>
      <div className="wrap contact-inner" style={contactStyles.inner}>
        <div>
          <div className="eyebrow" style={{marginBottom: 20}}>Prêt à démarrer</div>
          <h2 style={contactStyles.title} className="h-display-1">
            Parlons <span className="serif italic" style={{color:'var(--accent)'}}>leads</span>.
          </h2>
          <p style={contactStyles.sub}>
            Dites-nous ce que vous cherchez. L'équipe revient sous 2h ouvrées avec un volume estimé, un tarif au lead, et un planning de démarrage.
          </p>

          <div style={contactStyles.meta} className="contact-meta">
            <div>
              <div style={contactStyles.metaLabel}>WhatsApp direct</div>
              <div style={contactStyles.metaV}>+33 6 50 12 34 56</div>
            </div>
            <div>
              <div style={contactStyles.metaLabel}>Email</div>
              <div style={contactStyles.metaV}>hello@backmeup.fr</div>
            </div>
            <div>
              <div style={contactStyles.metaLabel}>Délai de réponse</div>
              <div style={contactStyles.metaV}>&lt; 2h ouvrées</div>
            </div>
            <div>
              <div style={contactStyles.metaLabel}>Démarrage</div>
              <div style={contactStyles.metaV}>≈ 5 jours ouvrés</div>
            </div>
          </div>
        </div>

        {!sent ? (
          <form style={contactStyles.form} onSubmit={onSubmit} noValidate>
            <div style={contactStyles.row} className="contact-form-row">
              <div style={contactStyles.field}>
                <label style={contactStyles.label}>Nom</label>
                <input style={{...contactStyles.input, ...(errs.name ? contactStyles.inputInvalid : {})}} value={form.name} onChange={set('name')} />
                {errs.name && <span style={contactStyles.err}>{errs.name}</span>}
              </div>
              <div style={contactStyles.field}>
                <label style={contactStyles.label}>Société</label>
                <input style={{...contactStyles.input, ...(errs.company ? contactStyles.inputInvalid : {})}} value={form.company} onChange={set('company')} />
                {errs.company && <span style={contactStyles.err}>{errs.company}</span>}
              </div>
            </div>

            <div style={contactStyles.row} className="contact-form-row">
              <div style={contactStyles.field}>
                <label style={contactStyles.label}>Email pro</label>
                <input style={{...contactStyles.input, ...(errs.email ? contactStyles.inputInvalid : {})}} value={form.email} onChange={set('email')} />
                {errs.email && <span style={contactStyles.err}>{errs.email}</span>}
              </div>
              <div style={contactStyles.field}>
                <label style={contactStyles.label}>Téléphone</label>
                <input style={{...contactStyles.input, ...(errs.phone ? contactStyles.inputInvalid : {})}} value={form.phone} onChange={set('phone')} placeholder="+33…" />
                {errs.phone && <span style={contactStyles.err}>{errs.phone}</span>}
              </div>
            </div>

            <div style={contactStyles.row} className="contact-form-row">
              <div style={contactStyles.field}>
                <label style={contactStyles.label}>Secteur</label>
                <select style={{...contactStyles.input, ...contactStyles.select, ...(errs.sector ? contactStyles.inputInvalid : {})}} value={form.sector} onChange={set('sector')}>
                  <option value="">Sélectionner…</option>
                  <option>BTP / Rénovation</option>
                  <option>Immobilier</option>
                  <option>Assurance</option>
                  <option>Santé</option>
                  <option>Éducation / Formation</option>
                  <option>Énergie</option>
                  <option>Automobile</option>
                  <option>Autre</option>
                </select>
                {errs.sector && <span style={contactStyles.err}>{errs.sector}</span>}
              </div>
              <div style={contactStyles.field}>
                <label style={contactStyles.label}>Volume cible /mois</label>
                <select style={{...contactStyles.input, ...contactStyles.select}} value={form.volume} onChange={set('volume')}>
                  <option value="">—</option>
                  <option>&lt; 50</option>
                  <option>50 – 200</option>
                  <option>200 – 800</option>
                  <option>800+</option>
                </select>
              </div>
            </div>

            <div style={contactStyles.field}>
              <label style={contactStyles.label}>Contexte (optionnel)</label>
              <textarea rows="3" style={{...contactStyles.input, resize:'vertical'}} value={form.msg} onChange={set('msg')} placeholder="Zones, cibles, CRM utilisé, délai souhaité…" />
            </div>

            <input type="text" name="website" tabIndex={-1} autoComplete="off" aria-hidden="true"
                   value={trap} onChange={(e)=>setTrap(e.target.value)}
                   style={{position:'absolute', left:'-10000px', width:1, height:1, opacity:0}} />

            {sendErr && <div style={contactStyles.sendErr} role="alert">{sendErr}</div>}

            <button type="submit" disabled={sending} style={{...contactStyles.submit, ...(sending ? {opacity:.6, cursor:'wait'} : {})}}
                    onMouseEnter={(e)=>{ if (!sending) e.currentTarget.style.transform='translateY(-1px)'; }}
                    onMouseLeave={(e)=>e.currentTarget.style.transform='none'}>
              {sending ? 'Envoi…' : 'Envoyer la demande'}
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
            </button>

            <p style={contactStyles.legal}>
              Vos informations servent uniquement à répondre à votre demande et sont traitées par Back Me Up SAS.
              Voir notre <a href="/confidentialite" style={{textDecoration:'underline'}}>politique de confidentialité</a>.
            </p>
          </form>
        ) : (
          <div style={{...contactStyles.form, ...contactStyles.success}}>
            <div style={contactStyles.successIcon}>
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 14.5l5 5 11-11"/></svg>
            </div>
            <h3 style={contactStyles.successH}>Demande envoyée.</h3>
            <p style={contactStyles.successP}>
              Merci {form.name.split(' ')[0] || ''}. L'équipe revient sous 2h ouvrées à <strong style={{color:'var(--ink)'}}>{form.email}</strong>.
            </p>
            <button type="button" className="btn btn-ghost" onClick={()=>{setSent(false);setTrap('');setForm({name:'',email:'',phone:'',company:'',sector:'',volume:'',msg:''});}}>
              Envoyer une autre demande
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Contact });