/* Page /contact — formulaire contact court (nom, email, entreprise, sujet,
 * message). Soumet à /api/form avec form_source: "contact". */

const { useState } = React;
const { Logo, ArrowUpRight, ThemeToggle, FooterMin } = window.BMShared;

const ContactNav = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav" id="nav">
        <a href="/" className="nav-logo" aria-label="Boom Maker"><Logo /></a>
        <div className="nav-links">
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              Expertises <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/expertises">3 piliers</a>
              <a href="/#process">Process</a>
              <a href="/partners">Partenaires</a>
            </div>
          </div>
          <a href="/#prix">Tarifs</a>
          <a href="/news">News</a>
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              À propos <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/a-propos">BoomMaker</a>
              <a href="/#faq">FAQ</a>
            </div>
          </div>
          <a href="/contact" className="active" style={{ color: 'var(--cyan)' }}>Contact</a>
        </div>
        <ThemeToggle />
        <a href="/audit-gratuit" className="btn btn-glow nav-cta-desktop">Audit gratuit <ArrowUpRight /></a>
        <button className="nav-burger" aria-label="Menu" aria-expanded={open}
                onClick={() => setOpen((o) => !o)}>
          <span /><span /><span />
        </button>
      </nav>
      <div className={`nav-mobile ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
        <span className="nav-mobile-group">/ Expertises</span>
        <a href="/expertises">3 piliers</a>
        <a href="/#process">Process</a>
        <a href="/partners">Partenaires</a>
        <a href="/#prix">Tarifs</a>
        <a href="/news">News</a>
        <span className="nav-mobile-group">/ À propos</span>
        <a href="/a-propos">BoomMaker</a>
        <a href="/#faq">FAQ</a>
        <a href="/contact" className="active">Contact</a>
        <a href="/audit-gratuit" className="btn btn-glow">Audit gratuit <ArrowUpRight /></a>
      </div>
    </>
  );
};

const ContactPage = () => {
  const [form, setForm] = useState({
    name: '', email: '', company: '', subject: '', message: '', rgpd: false,
    _gotcha: '', /* honeypot */
  });
  const [status, setStatus] = useState('idle'); /* idle | sending | success | error */
  const [error, setError] = useState('');

  const update = (field) => (e) => {
    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm((f) => ({ ...f, [field]: value }));
  };

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    setError('');
    try {
      const res = await fetch('/api/form', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, form_source: 'contact' }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(data.error || 'Aïe, ça a coincé. Réessaye dans 30 secondes ?');
        setStatus('error');
        return;
      }
      setStatus('success');
      setForm({ name: '', email: '', company: '', subject: '', message: '', rgpd: false, _gotcha: '' });
    } catch (err) {
      setError('Aïe, ça a coincé. Réessaye dans 30 secondes ?');
      setStatus('error');
    }
  };

  return (
    <div className="contact-page">
      <ContactNav />

      <article className="contact-hero">
        <div className="container">
          <a href="/" className="legal-back">← Retour à l'accueil</a>
          <span className="eyebrow"><span className="pulse" /> On répond sous 24h</span>
          <h1>Une question ?<br /><em>On t'écoute.</em></h1>
          <p className="lead">
            Pour une démo, un partenariat, une question rapide. Pour un audit qualifié de ton workflow, va plutôt sur <a href="/audit-gratuit">/audit-gratuit</a> — c'est plus précis.
          </p>
        </div>
      </article>

      <section className="contact-form-section">
        <div className="container contact-grid">
          <div className="contact-info">
            <h3>Tu peux aussi nous joindre directement</h3>
            <ul className="contact-info-list">
              <li>
                <span className="lbl">Email</span>
                <a href="mailto:julia@boommaker.io">julia@boommaker.io</a>
              </li>
              <li>
                <span className="lbl">Téléphone</span>
                <a href="tel:+33634150099">+33 6 34 15 00 99</a>
              </li>
              <li>
                <span className="lbl">Réserver un appel</span>
                <a href="https://calendly.com/julia-boommaker/30min" target="_blank" rel="noopener noreferrer">Calendly · 30 min <ArrowUpRight size={12} /></a>
              </li>
              <li>
                <span className="lbl">Bureaux</span>
                <span>Tel-Aviv ↔ Paris</span>
              </li>
            </ul>
          </div>

          {status === 'success' ? (
            <div className="contact-form contact-success">
              <div className="success-icon">✓</div>
              <h3>Bien reçu.</h3>
              <p>Je reviens vers toi sous 24h sur <strong>{form.email || 'ton email'}</strong>. Pendant ce temps, va lire un article si ça t'intéresse.</p>
              <a href="/news" className="btn btn-ghost">Lire les articles <ArrowUpRight /></a>
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit} noValidate>
              {/* Honeypot — invisible aux humains, rempli par les bots */}
              <input type="text" name="_gotcha" value={form._gotcha} onChange={update('_gotcha')}
                     className="form-honeypot" tabIndex="-1" autoComplete="off" aria-hidden="true" />

              <div className="form-row">
                <label>
                  <span className="form-lbl">Ton nom *</span>
                  <input type="text" required value={form.name} onChange={update('name')}
                         placeholder="Julia Levy" maxLength="100" />
                </label>
                <label>
                  <span className="form-lbl">Ton email *</span>
                  <input type="email" required value={form.email} onChange={update('email')}
                         placeholder="julia@tonentreprise.fr" maxLength="200" />
                </label>
              </div>

              <div className="form-row">
                <label>
                  <span className="form-lbl">Ton entreprise</span>
                  <input type="text" value={form.company} onChange={update('company')}
                         placeholder="Boom Maker" maxLength="200" />
                </label>
                <label>
                  <span className="form-lbl">Sujet</span>
                  <select value={form.subject} onChange={update('subject')}>
                    <option value="">Choisir un sujet…</option>
                    <option value="question">Question rapide</option>
                    <option value="audit">Demande d'audit</option>
                    <option value="partenariat">Partenariat</option>
                    <option value="autre">Autre</option>
                  </select>
                </label>
              </div>

              <label className="form-full">
                <span className="form-lbl">Ton message *</span>
                <textarea required rows="5" value={form.message} onChange={update('message')}
                          placeholder="Dis-moi ce qui t'amène en 2-3 lignes."
                          maxLength="5000" />
              </label>

              <label className="form-checkbox">
                <input type="checkbox" required checked={form.rgpd} onChange={update('rgpd')} />
                <span>J'accepte que mes données soient traitées conformément à la <a href="/politique-de-confidentialite" target="_blank">politique de confidentialité</a>.</span>
              </label>

              {status === 'error' && (
                <div className="form-error" role="alert">{error}</div>
              )}

              <button type="submit" className="btn btn-glow form-submit" disabled={status === 'sending'}>
                {status === 'sending' ? 'Envoi…' : 'Envoyer'} <ArrowUpRight />
              </button>
              <span className="form-hint">Réponse sous 24h. Ton message arrive directement chez Julia.</span>
            </form>
          )}
        </div>
      </section>

      <FooterMin />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<ContactPage />);