/* global React, Reveal */
const { useState: useStateC } = React;

// Crée ton formulaire sur https://formspree.io → remplace l'ID ici
const FORMSPREE_ID = "mzdynndy";

function Contact() {
  const [data, setData] = useStateC({
    name: "", email: "", company: "", message: "", budget: "800 — 1500€", service: "Création",
  });
  const [sent, setSent] = useStateC(false);
  const [sending, setSending] = useStateC(false);
  const [error, setError] = useStateC(false);

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    setError(false);
    setSending(true);
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          name: data.name,
          email: data.email,
          company: data.company || "—",
          service: data.service,
          budget: data.budget,
          message: data.message,
        }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        setError(true);
      }
    } catch {
      setError(true);
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="vw-page">
      <header className="vw-page-head">
        <Reveal>
          <div className="vw-eyebrow" style={{ marginBottom: 24 }}>/ Contact</div>
          <h1 className="vw-page-head__title">
            Dites-moi <em>tout —</em><br/>
            <span className="accent">on</span> en parle.
          </h1>
        </Reveal>
        <Reveal>
          <p className="vw-page-head__lede">
            Une idée, un site à refaire, une question sur un devis. Je réponds en moins de 24h, du lundi au vendredi. Pas de bot, pas d'auto-répondeur.
          </p>
        </Reveal>
      </header>

      <div className="vw-contact">
        <form className="vw-contact__form" onSubmit={submit}>
          <p className="vw-contact__intro">
            Parlons de <em>votre projet.</em> Plus vous me donnez de contexte, plus ma réponse sera précise.
          </p>

          {sent && (
            <div className="vw-contact__success">
              <span className="vw-contact__success-mark">✓</span>
              <div className="vw-contact__success-text">
                Message bien reçu, <em>{data.name || "à très vite"}.</em>
                <span className="small">Réponse sous 24h ouvrées · {data.email}</span>
              </div>
            </div>
          )}

          {error && (
            <div className="vw-contact__error">
              Une erreur est survenue. Écrivez-moi directement à{" "}
              <a href="mailto:contact@veloxweb.net">contact@veloxweb.net</a>
            </div>
          )}

          <div className="vw-field">
            <label className="vw-field__label">
              <span>01 · Vous êtes</span>
              <span className="req">*</span>
            </label>
            <input required type="text" placeholder="Prénom & nom"
              value={data.name} onChange={(e) => set("name", e.target.value)} />
          </div>

          <div className="vw-field-row">
            <div className="vw-field">
              <label className="vw-field__label"><span>02 · Email</span><span className="req">*</span></label>
              <input required type="email" placeholder="vous@exemple.fr"
                value={data.email} onChange={(e) => set("email", e.target.value)} />
            </div>
            <div className="vw-field">
              <label className="vw-field__label"><span>03 · Entreprise</span></label>
              <input type="text" placeholder="Nom de la structure"
                value={data.company} onChange={(e) => set("company", e.target.value)} />
            </div>
          </div>

          <div className="vw-field" style={{ borderBottom: 0, paddingBottom: 0 }}>
            <label className="vw-field__label" style={{ marginBottom: 8 }}><span>04 · Service souhaité</span></label>
            <div className="vw-budget-group">
              {["Création", "Refonte", "Maintenance", "SEO", "Sur mesure", "Je ne sais pas"].map(s => (
                <button key={s} type="button"
                  className={`vw-budget-pill ${data.service === s ? "is-active" : ""}`}
                  onClick={() => set("service", s)}>{s}</button>
              ))}
            </div>
          </div>

          <div className="vw-field" style={{ borderBottom: 0, paddingBottom: 0 }}>
            <label className="vw-field__label" style={{ marginBottom: 8 }}><span>05 · Budget envisagé</span></label>
            <div className="vw-budget-group">
              {["500 — 800€", "800 — 1500€", "1500 — 3000€", "3000 — 6000€", "+ 6000€", "À discuter"].map(b => (
                <button key={b} type="button"
                  className={`vw-budget-pill ${data.budget === b ? "is-active" : ""}`}
                  onClick={() => set("budget", b)}>{b}</button>
              ))}
            </div>
          </div>

          <div className="vw-field">
            <label className="vw-field__label">
              <span>06 · Votre projet</span><span className="req">*</span>
            </label>
            <textarea required placeholder="Quelques mots sur votre activité, votre cible, et ce que vous attendez de votre site..."
              value={data.message} onChange={(e) => set("message", e.target.value)} />
          </div>

          <div className="vw-form-foot">
            <p className="vw-form-foot__note">
              Vos données ne sont utilisées que pour vous répondre. Aucune liste, aucun spam.
            </p>
            <button type="submit" className="vw-btn vw-btn--accent" disabled={sending || sent}>
              <span className="vw-btn__dot" style={{ background: "var(--accent-ink)" }}></span>
              <span>{sending ? "Envoi en cours…" : sent ? "Message envoyé ✓" : "Envoyer le message →"}</span>
            </button>
          </div>
        </form>

        <aside className="vw-contact__aside">
          <div>
            <h3>/ Email direct</h3>
            <a href="mailto:contact@veloxweb.net" className="vw-contact__email">contact<br/>@veloxweb.net</a>
          </div>

          <div>
            <h3>/ Disponibilité</h3>
            <div className="vw-contact__line">
              Lundi — Vendredi
              <span>9h — 19h · Heure de Paris</span>
            </div>
            <div className="vw-contact__line" style={{ marginTop: 16 }}>
              ● Disponible — 2 places ce trimestre
              <span>Prochain démarrage possible : mai 2026</span>
            </div>
          </div>

          <div>
            <h3>/ Localisation</h3>
            <div className="vw-contact__line">
              France entière, 100% remote
              <span>Visio, écrit, Loom — selon vos préférences</span>
            </div>
          </div>

          <div>
            <h3>/ Réponse moyenne</h3>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 64, lineHeight: 0.95, letterSpacing: "-0.02em" }}>
              <span style={{ color: "var(--accent)", fontStyle: "italic" }}>4h</span> <em style={{ color: "var(--fg-muted)", fontStyle: "italic" }}>en semaine</em>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

window.Contact = Contact;