// ============================================
// FLC — Contact (formulaire interactif)
// ============================================

function ContactPage() {
  const [form, setForm] = React.useState({name:'',phone:'',program:'',message:''});
  const [sent, setSent] = React.useState(false);
  const [openFaq, setOpenFaq] = React.useState(null);

  const faqs = [
    {q:'Comment se passe le test de niveau gratuit ?', a:'30 minutes en présentiel ou en ligne. Un enseignant évalue votre niveau (oral + écrit) et vous oriente vers la bonne classe. Vous repartez avec un diagnostic clair, sans aucun engagement.'},
    {q:'Quels manuels utilisez-vous en anglais ?', a:'Uniquement les manuels officiels Cambridge University Press, adaptés à chaque âge et niveau (Primary Path, Compact, Empower...). Inclus dans le tarif.'},
    {q:'Combien d\'élèves par classe ?', a:'Notre Golden Ratio : 8 à 12 élèves maximum, jamais plus. C\'est ce qui permet l\'attention individuelle dans une dynamique de groupe.'},
    {q:'Acceptez-vous les paiements échelonnés ?', a:'Oui. Vous pouvez payer en 1 fois (annuel, avec économie) ou en 3 fois (trimestriel). Aucun frais supplémentaire.'},
    {q:'Y a-t-il des cours pour adultes ?', a:'Absolument. Nous avons des cours du soir et du week-end pensés pour les emplois du temps chargés des actifs et étudiants.'},
    {q:'Préparez-vous l\'IELTS et le TOEFL ?', a:'Oui, avec préparation intensive et tests blancs réguliers. Nos enseignants connaissent parfaitement les attendus de chaque épreuve.'},
    {q:'Que faire si je rate des cours ?', a:'Nous proposons des séances de rattrapage et nos enseignants restent disponibles. Le suivi reste personnalisé même en cas d\'absence.'},
    {q:'Où vous trouver à Tanger ?', a:'Notre centre est situé à Dradeb — Résidence Chekroun, 1ᵉʳ étage. Accès facile et environnement calme.'},
  ];

  function submit(e) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <React.Fragment>
      <FLCObserver/>
      <FLCHeader active="contact.html"/>
      <main>
        <FLCPageHero
          pillText="Test de niveau gratuit · sans engagement"
          pillVariant="saffron"
          title="Réservez votre"
          emText="première séance"
          titleSuffix="."
          lead="Remplissez ce formulaire ou contactez-nous directement par WhatsApp. Nous vous répondons sous 24h."
          image={IMG.smile}
          imageBadge={{ icon: '⚡', label: 'Réponse', value: 'Sous 24h' }}
          stats={[
            { label: 'Test', value: 'Gratuit', sub: 'Aucun engagement', color: 'var(--saffron-dark)' },
            { label: 'WhatsApp', value: 'Direct', sub: 'Réponse rapide', color: 'var(--mint-600)' }
          ]}
          blob1={{ color:'#F4A24C', w:320, h:320, top:-100, right:-80, opacity:0.4 }}
          blob2={{ color:'#7FC8A9', w:260, h:260, bottom:-80, left:-60, opacity:0.3 }}
        />

        <section style={{paddingTop:24}}>
          <div className="container">
            <div className="contact-grid">
              <div className="reveal">
                {!sent ? (
                  <form className="form-card" onSubmit={submit}>
                    <h3 className="h-display" style={{fontSize:24,fontWeight:600,color:'var(--indigo-900)'}}>📨 Formulaire de contact</h3>
                    <div className="form-field">
                      <label>Nom complet</label>
                      <input type="text" required value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder="Votre nom et prénom"/>
                    </div>
                    <div className="form-field">
                      <label>Téléphone / WhatsApp</label>
                      <input type="tel" required value={form.phone} onChange={e=>setForm({...form,phone:e.target.value})} placeholder="+212 6 ..."/>
                    </div>
                    <div className="form-field">
                      <label>Programme qui vous intéresse</label>
                      <select required value={form.program} onChange={e=>setForm({...form,program:e.target.value})}>
                        <option value="">Choisir...</option>
                        <option>Anglais — Enfant</option>
                        <option>Anglais — Ado</option>
                        <option>Anglais — Adulte</option>
                        <option>Français · Espagnol</option>
                        <option>Soutien scolaire — Primaire</option>
                        <option>Soutien scolaire — Collège</option>
                        <option>Soutien scolaire — Lycée</option>
                        <option>Ateliers parascolaires</option>
                        <option>Atelier Coran</option>
                        <option>Je ne sais pas encore</option>
                      </select>
                    </div>
                    <div className="form-field">
                      <label>Message (optionnel)</label>
                      <textarea rows="3" value={form.message} onChange={e=>setForm({...form,message:e.target.value})} placeholder="Précisez votre demande, vos disponibilités..."/>
                    </div>
                    <button type="submit" className="btn btn-primary" style={{width:'100%',padding:'16px'}}>
                      Réserver mon test gratuit →
                    </button>
                    <p style={{fontSize:12,color:'var(--ink-500)',textAlign:'center',marginTop:10}}>Réponse garantie sous 24h · Vos données restent confidentielles</p>
                  </form>
                ) : (
                  <div className="form-card" style={{textAlign:'center'}}>
                    <div style={{fontSize:64,marginBottom:12}}>🎉</div>
                    <h3 className="h-display" style={{fontSize:28,fontWeight:600,color:'var(--indigo-900)'}}>Demande reçue !</h3>
                    <p className="lead" style={{marginTop:12}}>Merci {form.name.split(' ')[0]}. Nous vous contactons dans les 24h pour fixer votre test gratuit.</p>
                    <a href={FLC_WA} target="_blank" className="btn btn-primary" style={{marginTop:24}}>📱 Nous joindre directement sur WhatsApp</a>
                    <button onClick={()=>{setSent(false);setForm({name:'',phone:'',program:'',message:''});}} className="btn btn-link" style={{marginTop:12,display:'block',margin:'12px auto 0'}}>↻ Nouvelle demande</button>
                  </div>
                )}
              </div>

              <div style={{display:'flex',flexDirection:'column',gap:16}} className="reveal">
                <div className="info-card">
                  <h4 className="h-display" style={{fontSize:18,fontWeight:600,color:'var(--indigo-900)'}}>📍 Adresse</h4>
                  <p style={{marginTop:8,fontSize:14,color:'var(--ink-700)',lineHeight:1.6}}>
                    Future Learning Center<br/>
                    Tanger – Dradeb<br/>
                    Résidence Chekroun, 1ᵉʳ étage
                  </p>
                </div>
                <div className="info-card">
                  <h4 className="h-display" style={{fontSize:18,fontWeight:600,color:'var(--indigo-900)'}}>🕐 Horaires</h4>
                  <p style={{marginTop:8,fontSize:14,color:'var(--ink-700)',lineHeight:1.8}}>
                    Lun – Ven : 14h – 21h<br/>
                    Samedi : 10h – 20h<br/>
                    Dimanche : fermé
                  </p>
                </div>
                <div className="info-card" style={{background:'var(--indigo-900)',color:'white',border:'none'}}>
                  <h4 className="h-display" style={{fontSize:18,fontWeight:600,color:'#F4A24C'}}>📞 Contact direct</h4>
                  <a href={FLC_WA} target="_blank" className="info-link">
                    <span style={{fontSize:24}}>💬</span>
                    <div>
                      <div style={{fontWeight:600,fontSize:15}}>WhatsApp</div>
                      <div style={{fontSize:12,opacity:.7}}>Réponse immédiate</div>
                    </div>
                  </a>
                  <a href={FLC_PHONE} className="info-link">
                    <span style={{fontSize:24}}>📞</span>
                    <div>
                      <div style={{fontWeight:600,fontSize:15}}>+212 651 506 400</div>
                      <div style={{fontSize:12,opacity:.7}}>Lun-Sam · horaires d'ouverture</div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <style>{`
            .contact-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
            @media (min-width: 900px) { .contact-grid { grid-template-columns: 1.4fr 1fr; gap: 32px; } }
            .form-card { background: white; border-radius: var(--r-2xl); padding: 28px; box-shadow: var(--shadow-md); border: 1px solid var(--ink-100); }
            @media (min-width: 768px) { .form-card { padding: 36px; } }
            .form-field { display: flex; flex-direction: column; margin-top: 18px; }
            .form-field label { font-size: 13px; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
            .form-field input, .form-field select, .form-field textarea {
              padding: 14px 16px; border-radius: var(--r-md); border: 1.5px solid var(--ink-100);
              font-family: inherit; font-size: 15px; background: var(--cream); transition: all .2s;
            }
            .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
              outline: none; border-color: var(--saffron); background: white;
            }
            .info-card { padding: 22px; background: white; border-radius: var(--r-lg); border: 1px solid var(--ink-100); }
            .info-link { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: white; }
            .info-link:last-child { border-bottom: none; }
            .info-link:hover { color: #F4A24C; }
          `}</style>
        </section>

        <section style={{background:'var(--cream)'}}>
          <div className="container">
            <div className="section-head reveal">
              <span className="eyebrow">FAQ</span>
              <h2 className="h-display h2">Questions fréquentes</h2>
            </div>
            <div className="faq-list" style={{maxWidth:760,margin:'0 auto'}}>
              {faqs.map((f,i)=>(
                <div key={i} className="faq-item reveal">
                  <button className="faq-q" onClick={()=>setOpenFaq(openFaq===i?null:i)}>
                    <span>{f.q}</span>
                    <span className="faq-toggle" style={{transform:openFaq===i?'rotate(45deg)':'rotate(0)'}}><I.Plus/></span>
                  </button>
                  {openFaq===i && <div className="faq-a">{f.a}</div>}
                </div>
              ))}
            </div>
          </div>
          <style>{`
            .faq-list { display: flex; flex-direction: column; gap: 10px; }
            .faq-item { background: white; border-radius: var(--r-md); border: 1px solid var(--ink-100); overflow: hidden; }
            .faq-q { width: 100%; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-weight: 600; color: var(--indigo-900); font-size: 15px; }
            .faq-toggle { color: var(--saffron-dark); transition: transform .25s; flex-shrink: 0; }
            .faq-a { padding: 0 20px 18px; font-size: 14px; color: var(--ink-700); line-height: 1.7; }
          `}</style>
        </section>
      </main>
      <FLCFooter/>
      <FLCSticky/>
      <FLCFab/>
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<ContactPage/>);