/* global React */
/* Page Contact */

/* Endpoint Formspree — formulaire de contact qui livre à info@academieathletik.com. */
const FORMSPREE_ENDPOINT = 'https://formspree.io/f/mjgdvvjk';

const PageContact = () =>
<div className="v1">
    <style dangerouslySetInnerHTML={{ __html: V1_CSS + V1_CSS_PART2 + V1_CSS_PART3 + PAGE_CSS }}></style>
    <V1Nav active="contact" />

    <section className="page-hero">
      <div className="page-hero-mark">@</div>
      <div className="page-hero-inner">
        <div className="ey">Contact</div>
        <h1>Une question ? Une douleur qui perdure ? <em>Écris-moi.</em></h1>
        <p>Que tu sois prêt à commencer ou que tu aies des questions — je suis là.</p>
      </div>
    </section>

    <Wave from="#faf7f2" to="#f5f0e8" variant={0} />

    {/* RDV + APPEL DÉCOUVERTE — deux cards */}
    <section className="page-sec beige">
      <div className="container">
        <div className="page-sec-inner">
          <div className="cards-2">
            <div className="card-num" style={{ padding: '36px 32px', background: '#fff', border: '1px solid var(--border)' }}>
              <div className="ey">Appel découverte gratuit</div>
              <h3 style={{ fontSize: 24, marginTop: 14, marginBottom: 10 }}>Méthode Athletik™</h3>
              <p style={{ marginBottom: 28 }}>Tu veux savoir si la Méthode est pour toi ? Un échange honnête de 15 minutes pour comprendre ta situation.</p>
              <a href="rendez-vous.html" className="btn btn--orange">
                Réserve ton appel gratuit
                {Icon.arrow(14)}
              </a>
            </div>
            <div className="card-num" style={{ padding: '36px 32px' }}>
              <div className="ey ey--blue">Prendre rendez-vous</div>
              <h3 style={{ fontSize: 24, marginTop: 14, marginBottom: 10 }}>Thérapie du sport · Massothérapie</h3>
              <p style={{ marginBottom: 28 }}>Choisis ton service et ton horaire directement en ligne. Tu reçois la confirmation par courriel.</p>
              <a href="rendez-vous.html" className="btn btn--outline">
                Réserve en ligne
                {Icon.arrow(14)}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <Wave from="#f5f0e8" to="#faf7f2" variant={2} />

    {/* COORDONNÉES + FORMULAIRE — layout C (carte bleue + formulaire blanc) */}
    <section className="page-sec cream">
      <div className="container">
        <div className="contact-card">
          <div className="cc-left">
            <div className="ey">Coordonnées</div>
            <h2>Nous <em>trouver.</em></h2>
            <div className="info-list">
              <div className="info-item">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                <div>
                  <h4>Adresse</h4>
                  <p>570 boulevard des Laurentides<br />Piedmont (Québec) J0R 1K0</p>
                </div>
              </div>
              <div className="info-item">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" />
                </svg>
                <div>
                  <h4>Téléphone</h4>
                  <p><a href="tel:+14507120001">450 712-0001</a></p>
                </div>
              </div>
              <div className="info-item">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                  <polyline points="22,6 12,13 2,6" />
                </svg>
                <div>
                  <h4>Courriel</h4>
                  <p><a href="mailto:info@academieathletik.com">info@academieathletik.com</a></p>
                </div>
              </div>
            </div>
          </div>

          <div className="cc-right">
            <div className="ey ey--blue">Questions</div>
            <h2>Tu as une <em>question ?</em></h2>
            <p style={{ marginBottom: 24 }}>Remplis le formulaire, je te réponds sous 24 à 48 heures ouvrables.</p>
            <form
              action={FORMSPREE_ENDPOINT}
              method="POST"
              onSubmit={async (e) => {
                e.preventDefault();
                const form = e.target;
                try {
                  const res = await fetch(FORMSPREE_ENDPOINT, {
                    method: 'POST',
                    headers: { 'Accept': 'application/json' },
                    body: new FormData(form),
                  });
                  if (res.ok) {
                    alert('Merci ! Ton message est bien envoyé. Je te réponds sous 24 à 48 h.');
                    form.reset();
                  } else {
                    alert("Oups — l'envoi a échoué. Réessaie, ou écris-moi directement à info@academieathletik.com.");
                  }
                } catch (err) {
                  alert("Oups — l'envoi a échoué (connexion ?). Réessaie, ou écris-moi à info@academieathletik.com.");
                }
              }}>
              <input type="hidden" name="_subject" value="Nouveau message — site Académie Athletik" />
              <div className="form-row">
                <div className="form-group">
                  <label>Prénom</label>
                  <input type="text" name="prenom" required />
                </div>
                <div className="form-group">
                  <label>Nom</label>
                  <input type="text" name="nom" required />
                </div>
              </div>
              <div className="form-group">
                <label>Courriel</label>
                <input type="email" name="email" required />
              </div>
              <div className="form-group">
                <label>Sujet</label>
                <select name="sujet" defaultValue="">
                  <option value="" disabled>Choisis un sujet</option>
                  <option>Question sur la Méthode Athletik™</option>
                  <option>Question sur la thérapie du sport</option>
                  <option>Question sur la massothérapie</option>
                  <option>Autre</option>
                </select>
              </div>
              <div className="form-group">
                <label>Message</label>
                <textarea name="message" required></textarea>
              </div>
              <p className="form-consent">
                En soumettant ce formulaire, tu consens à ce qu'Académie Athletik recueille et utilise tes renseignements pour répondre à ta demande. Consulte notre <a href="confidentialite.html">politique de confidentialité</a>.
              </p>
              <button type="submit" className="btn btn--orange">
                Envoie ton message
                {Icon.arrow(14)}
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>

    <V1Footer />
  </div>;


window.PageContact = PageContact;