'use client'

import { useState } from 'react'

const SUBJECTS = [
  'Question sur le classement',
  'Signaler une erreur',
  'Proposition de partenariat',
  'Contribuer un article',
  'Autre',
]

export default function ContactPage() {
  const [form, setForm] = useState({ name: '', email: '', subject: SUBJECTS[0], message: '' })
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')

  function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }))
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setStatus('sending')
    try {
      const res = await fetch('https://formspree.io/f/admin@quantcareers.fr', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify(form),
      })
      setStatus(res.ok ? 'sent' : 'error')
    } catch {
      setStatus('error')
    }
  }

  return (
    <main>
      <section className="section-contact">
        <div className="section-wrap">

          <div className="section-head">
            <div className="eyebrow">Contact</div>
            <h1 className="section-title">
              Une question ?<br /><em>Écrivez-nous</em>
            </h1>
            <p className="section-desc">
              Signalement d&apos;erreur, proposition de partenariat ou contribution d&apos;article —
              nous lisons chaque message.
            </p>
          </div>

          <div className="contact-layout">

            {/* Formulaire */}
            <div className="contact-form-wrap">
              {status === 'sent' ? (
                <div className="contact-success">
                  <div className="contact-success-icon">✓</div>
                  <div className="contact-success-title">Message envoyé</div>
                  <p className="contact-success-desc">
                    Merci, nous vous répondrons dans les meilleurs délais.
                  </p>
                  <button className="btn-primary" style={{ marginTop: '1.5rem' }}
                    onClick={() => { setForm({ name: '', email: '', subject: SUBJECTS[0], message: '' }); setStatus('idle') }}>
                    Envoyer un autre message
                  </button>
                </div>
              ) : (
                <form className="contact-form" onSubmit={handleSubmit} noValidate>
                  <div className="contact-row">
                    <div className="contact-field">
                      <label className="contact-label" htmlFor="name">Nom</label>
                      <input
                        className="contact-input"
                        id="name" name="name" type="text"
                        placeholder="Votre nom"
                        value={form.name} onChange={handleChange}
                        required
                      />
                    </div>
                    <div className="contact-field">
                      <label className="contact-label" htmlFor="email">Adresse e-mail</label>
                      <input
                        className="contact-input"
                        id="email" name="email" type="email"
                        placeholder="vous@exemple.fr"
                        value={form.email} onChange={handleChange}
                        required
                      />
                    </div>
                  </div>

                  <div className="contact-field">
                    <label className="contact-label" htmlFor="subject">Sujet</label>
                    <select
                      className="contact-input contact-select"
                      id="subject" name="subject"
                      value={form.subject} onChange={handleChange}
                    >
                      {SUBJECTS.map((s) => <option key={s} value={s}>{s}</option>)}
                    </select>
                  </div>

                  <div className="contact-field">
                    <label className="contact-label" htmlFor="message">Message</label>
                    <textarea
                      className="contact-input contact-textarea"
                      id="message" name="message"
                      placeholder="Votre message…"
                      rows={6}
                      value={form.message} onChange={handleChange}
                      required
                    />
                  </div>

                  {status === 'error' && (
                    <p className="contact-error">
                      Une erreur est survenue. Veuillez réessayer ou nous écrire directement à&nbsp;
                      <a href="mailto:admin@quantcareers.fr">admin@quantcareers.fr</a>.
                    </p>
                  )}

                  <button
                    className="btn-primary"
                    type="submit"
                    disabled={status === 'sending'}
                    style={{ width: '100%', justifyContent: 'center' }}
                  >
                    {status === 'sending' ? 'Envoi en cours…' : 'Envoyer le message →'}
                  </button>
                </form>
              )}
            </div>

            {/* Colonne info */}
            <aside className="contact-aside">
              <div className="contact-info-card">
                <div className="contact-info-title">Contact direct</div>
                <a href="mailto:admin@quantcareers.fr" className="contact-info-email">
                  admin@quantcareers.fr
                </a>
                <div className="contact-info-sep" />
                <div className="contact-info-title">Temps de réponse</div>
                <p className="contact-info-text">Généralement sous 48 h ouvrées.</p>
                <div className="contact-info-sep" />
                <div className="contact-info-title">Contribuer</div>
                <p className="contact-info-text">
                  Vous êtes professionnel de la finance quantitative et souhaitez
                  rédiger un article pour nos Publications ? Mentionnez-le dans votre message.
                </p>
              </div>
            </aside>

          </div>
        </div>
      </section>
    </main>
  )
}