// Alquie · Landing v2 FR

const { useState, useEffect, useRef } = React;

function useReveal() {
  useEffect(() => {
    const triggerCounter = (el) => {
      const target = parseFloat(el.dataset.to);
      const suffix = el.dataset.suffix || '';
      const decimals = parseInt(el.dataset.decimals || '0');
      const dur = 1800;
      const start = performance.now();
      const tick = (t) => {
        const p = Math.min((t - start) / dur, 1);
        const eased = 1 - Math.pow(1 - p, 3);
        const v = target * eased;
        el.textContent = v.toLocaleString('fr-FR', {
          minimumFractionDigits: decimals,
          maximumFractionDigits: decimals
        }) + suffix;
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };
    const activate = (el) => {
      el.classList.add('is-in');
      if (el.classList.contains('aq-counter')) triggerCounter(el);
    };
    const els = document.querySelectorAll('.aq-reveal, .aq-draw, .aq-glass-card, .aq-counter');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          activate(e.target);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.05 });
    els.forEach(el => {
      const r = el.getBoundingClientRect();
      const inView = r.top < window.innerHeight && r.bottom > 0;
      if (inView) activate(el);
      else io.observe(el);
    });
    return () => io.disconnect();
  }, []);
}

function useParallax() {
  useEffect(() => {
    const els = document.querySelectorAll('[data-parallax]');
    const onScroll = () => {
      const y = window.scrollY;
      els.forEach(el => {
        const speed = parseFloat(el.dataset.parallax) || 0.1;
        el.style.transform = `translateY(${y * speed}px)`;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
}

const Doodle = ({ variant, color = "currentColor", className }) => {
  if (variant === "wave")
    return (<svg className={className} viewBox="0 0 90 30" fill="none"><path className="aq-draw" d="M3 18 Q 18 4, 30 18 T 56 18 T 84 12" stroke={color} strokeWidth="2.6" strokeLinecap="round" /></svg>);
  if (variant === "arrow")
    return (<svg className={className} viewBox="0 0 130 60" fill="none"><path className="aq-draw" d="M4 50 Q 30 6, 60 28 T 120 14" stroke={color} strokeWidth="2.6" strokeLinecap="round" strokeDasharray="2 7" /><path className="aq-draw" d="M110 6 L120 14 L114 24" stroke={color} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg>);
  if (variant === "underline")
    return (<svg className={className} viewBox="0 0 200 14" preserveAspectRatio="none" fill="none"><path className="aq-draw" d="M2 9 Q 50 2, 100 7 T 198 5" stroke={color} strokeWidth="3" strokeLinecap="round" /></svg>);
  if (variant === "spark")
    return (<svg className={className} viewBox="0 0 24 24" fill={color}><path d="M12 0 L13.5 10.5 L24 12 L13.5 13.5 L12 24 L10.5 13.5 L0 12 L10.5 10.5 Z" /></svg>);
  return null;
};

const AlchemyText = ({ text, startDelay = 0 }) => (
  <>
    {text.split('').map((ch, i) => (
      <span key={i} className="aq-alch-letter" style={{ animationDelay: `${startDelay + i * 0.035}s` }}>
        {ch === ' ' ? '\u00A0' : ch}
      </span>
    ))}
  </>
);

const Brand = ({ light = false }) => (
  <div className={light ? "aq-footer__brand" : "aq-nav__brand"}>
    <img src={light ? "assets/logo-blanco.png" : "assets/logo-azul.png"} alt="Alquie" className={light ? "aq-footer__logo-img" : "aq-nav__logo-img"} />
  </div>
);

const Nav = () => (
  <div className="aq-nav-wrap">
    <nav className="aq-nav">
      <Brand />
      <ul className="aq-nav__links">
        <li><a href="#solution">Plateforme</a></li>
        <li><a href="#pedagogy">Pédagogie</a></li>
        <li><a href="#schools">Enseignant et élève</a></li>
        <li><a href="#pricing">Tarifs</a></li>
      </ul>
      <div className="aq-nav__cta">
        <div className="aq-lang">
          <span className="aq-lang__current">FR</span>
          <div className="aq-lang__menu">
            <a href="/es">Español</a>
            <a href="/en">English</a>
            <a href="/de">Deutsch</a>
            <a href="/fr" className="is-active">Français</a>
          </div>
        </div>
        <a href="https://app.alquie.com/login" style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)' }}>Se connecter</a>
        <a className="aq-btn aq-btn--navy aq-btn--md" href="/signup/fr">Commencer gratuitement</a>
      </div>
    </nav>
  </div>
);

const Hero = () => (
  <section className="aq-hero">
    <div className="aq-hero__aurora" />
    <div className="aq-hero__noise" />
    <div className="aq-hero__inner">
      <div className="aq-hero__copy">
        <div className="aq-hero__eyebrow aq-reveal" data-delay="1">
          <span className="aq-hero__eyebrow-dot">✦</span>
          Plateforme éducative gamifiée
        </div>
        <h1 className="aq-h1 aq-hero__h1 aq-alchemy" data-delay="2">
          <AlchemyText text="Apprendre, comme" />
          <br />
          <span style={{ whiteSpace: 'nowrap' }}>
            <AlchemyText text="une " startDelay={0.9} />
            <span className="accent">
              <i>aventure</i>
              <Doodle variant="underline" color="var(--coral)" />
            </span>
            <AlchemyText text=" à découvrir." startDelay={1.6} />
          </span>
        </h1>
        <p className="aq-lead aq-hero__lead aq-reveal" data-delay="3">
          Alquie est une plateforme d'apprentissage actif où chaque question compte, chaque élève participe et chaque cours laisse une trace — sans alourdir votre quotidien.
        </p>
        <div className="aq-hero__ctas aq-reveal" data-delay="4">
          <a className="aq-btn aq-btn--coral aq-btn--lg" href="/signup/fr">Commencer gratuitement</a>
          <a className="aq-btn aq-btn--ghost-light aq-btn--lg" href="#demo">
            <span className="aq-btn-play">▶</span>
            Voir un cours en direct
          </a>
        </div>
      </div>

      <div className="aq-hero__stage aq-reveal" data-delay="3">
        <div className="aq-hero__orb aq-hero__orb--1" />
        <div className="aq-hero__orb aq-hero__orb--2" />
        <div className="aq-hero__orb aq-hero__orb--3" />
        <Doodle variant="wave" color="var(--peach)" className="aq-hero__doodle aq-hero__doodle--1" />
        <Doodle variant="arrow" color="rgba(255,255,255,0.4)" className="aq-hero__doodle aq-hero__doodle--2" />

        <div className="aq-hero__photo aq-hero__photo--filled">
          <img src="assets/photos/hero.png" alt="Alquie en classe" />
        </div>

        <div className="aq-glass-card aq-glass-card--quiz">
          <div className="aq-glass-card__eyebrow">En direct</div>
          <div className="aq-glass-card__title">22 / 30 ont répondu</div>
          <div className="aq-glass-card__bar"><div className="aq-glass-card__bar-fill" /></div>
          <div className="aq-glass-card__meta">
            <span>Quiz · 6e</span>
            <span className="aq-glass-card__pill">+72%</span>
          </div>
        </div>

        <div className="aq-glass-card aq-glass-card--xp">
          <div className="aq-glass-card__eyebrow">Aujourd'hui en classe</div>
          <div className="aq-glass-card__big"><i>+</i><span className="aq-counter" data-to="1240">0</span></div>
          <div className="aq-glass-card__sub">points pour la classe</div>
        </div>
      </div>
    </div>
  </section>
);

const Problem = () => {
  const issues = [
    { t: "Engagement faible", d: "La plupart des élèves traversent le cours sans participer activement." },
    { t: "Élèves passifs", d: "Écouter n'est pas apprendre. La participation se concentre sur les 4 ou 5 mêmes." },
    { t: "Attention dispersée", d: "La salle de classe rivalise avec des notifications, des feeds et un monde plus rapide." },
    { t: "Du contenu qui n'accroche pas", d: "Construire des activités qui captivent vraiment prend des heures que les enseignants n'ont pas." }
  ];
  return (
    <div className="aq-problem-wrap">
      <section className="aq-section">
        <div className="aq-section__head aq-section__head--center">
          <div className="aq-eyebrow aq-reveal">Le problème</div>
          <h2 className="aq-h2 aq-reveal" data-delay="1">
            Aujourd'hui, le cours rivalise avec tout ce qui <i>distrait</i>.
          </h2>
          <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
            Les enseignants n'ont pas besoin de plus de contenu. Ils ont besoin de cours qui regagnent l'attention qu'ils méritent.
          </p>
        </div>
        <div className="aq-problem__grid">
          {issues.map((i, idx) => (
            <div key={i.t} className="aq-problem__card aq-reveal" data-delay={idx + 1}>
              <div className="aq-problem__num">0{idx + 1}</div>
              <h3 className="aq-h4">{i.t}</h3>
              <p className="aq-body" style={{ marginTop: 6 }}>{i.d}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

const Solution = () => {
  const mechanics = [
    { title: "Arène de duels", desc: "Deux élèves s'affrontent dans des duels rapides. Toute la classe regarde, vote et apprend.", visual: "coral", icon: "assets/icons/arena.png", shot: "assets/screens/duelo-arena.png" },
    { title: "Treasure Hunt", desc: "Quêtes guidées par des indices qui activent le raisonnement, la lecture et l'exploration en groupe.", visual: "teal", icon: "assets/icons/treasure-hunt.png", shot: "assets/screens/treasurehunt.png" },
    { title: "Raidboss", desc: "Toute la classe s'unit pour battre un boss — vous ne gagnez que si vous répondez bien, ensemble.", visual: "mint", icon: "assets/icons/raidboss.png", shot: "assets/screens/raidboss.png", mod: "raid" },
    { title: "Quiz de potions", desc: "Un quiz interactif où chaque bonne réponse devient un ingrédient de potion. Feedback immédiat, série visible.", visual: "peach", icon: "assets/icons/quiz-pociones.png", shot: "assets/screens/quiz-pociones.png" }
  ];
  return (
    <section id="solution" className="aq-section">
      <div className="aq-section__head">
        <div className="aq-eyebrow aq-reveal">La solution</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Des mécaniques qui <i>captivent</i>. Des objectifs qui s'atteignent.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Alquie introduit des systèmes de participation structurés en classe. Chaque mécanique sert l'apprentissage — jamais l'inverse.
        </p>
      </div>

      <div className="aq-solution__more">
        {mechanics.map((m, i) => (
          <div key={m.title} className={`aq-mech-card aq-reveal${m.mod ? ' aq-mech-card--' + m.mod : ''}`} data-delay={i + 1}>
            <div className={`aq-mech-card__icon aq-mech-card__icon--${m.visual}`}>
              <img src={m.icon} alt="" />
            </div>
            <h4 className="aq-h4">{m.title}</h4>
            <p className="aq-body-sm">{m.desc}</p>
            <div className="aq-mech-card__hover">
              <img src={m.shot} alt="" loading="lazy" />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

const HowItWorks = () => {
  const steps = [
    { glyph: "1", eyebrow: "Étape 01", t: "Construire un récit", d: "Avant d'ouvrir le contenu, les élèves entrent dans une narration qui encadre l'apprentissage. Le contenu n'est plus 'le devoir' — il fait partie d'un monde.", shot: "assets/screens/actividades.png", shotAlt: "Récit d'activité dans le tableau de bord enseignant" },
    { glyph: "2", eyebrow: "Étape 02", t: "Vos élèves participent", d: "Aux côtés de leur personnage, les élèves lisent la narration et s'immergent dans un univers d'apprentissage qu'ils veulent continuer à explorer — cours après cours.", shot: "assets/screens/actividades2.png", shotAlt: "Élève dans une activité narrative" },
    { glyph: "3", eyebrow: "Étape 03", t: "Le progrès devient motivation", d: "Niveaux, pièces et classements rendent la progression palpable. La motivation cesse d'être un problème.", shot: "assets/screens/dashboard-alumno.png", shotAlt: "Tableau de bord élève montrant la progression" }
  ];
  const [activeStep, setActiveStep] = useState(0);
  const sectionRef = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      if (!sectionRef.current) return;
      const rect = sectionRef.current.getBoundingClientRect();
      const totalScrollable = rect.height - window.innerHeight;
      if (totalScrollable <= 0) return;
      const progress = Math.max(0, Math.min(1, -rect.top / totalScrollable));
      const idx = Math.min(steps.length - 1, Math.floor(progress * steps.length));
      setActiveStep(idx);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="aq-how-sticky" ref={sectionRef}>
      <div className="aq-how-sticky__inner">
        <div className="aq-how-sticky__pin">
          <div className="aq-how-sticky__copy">
            <div className="aq-eyebrow aq-reveal">Comment ça marche</div>
            <h2 className="aq-h2 aq-reveal" data-delay="1">
              Trois étapes. <i>Zéro</i> courbe d'apprentissage.
            </h2>
            <p className="aq-lead aq-reveal" data-delay="2" style={{ marginTop: 16, marginBottom: 36 }}>
              De la première activité à une classe captivée — sans manuel, sans formation préalable.
            </p>
            <ol className="aq-how-sticky__steps">
              {steps.map((s, i) => (
                <li key={s.glyph} className={`aq-how-sticky__step ${i === activeStep ? 'is-active' : ''} ${i < activeStep ? 'is-past' : ''}`}>
                  <div className="aq-how-sticky__num"><span>{s.glyph}</span></div>
                  <div className="aq-how-sticky__step-body">
                    <div className="aq-how-sticky__step-eyebrow">{s.eyebrow}</div>
                    <h3 className="aq-h3">{s.t}</h3>
                    <p className="aq-body">{s.d}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
          <div className="aq-how-sticky__stage">
            {steps.map((s, i) => (
              <div key={s.glyph} className={`aq-how-sticky__shot ${i === activeStep ? 'is-active' : ''}`} aria-hidden={i !== activeStep}>
                <div className="aq-how-sticky__shot-frame"><img src={s.shot} alt={s.shotAlt} /></div>
                <div className="aq-how-sticky__shot-tag">
                  <span className="aq-how-sticky__shot-dot" />
                  {s.eyebrow} · {s.t}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Pedagogy = () => {
  const pillars = [
    { eb: "Motivation", t: "Autonomie, compétence, lien", d: "Fondé sur la théorie de l'autodétermination. Les élèves choisissent des chemins, voient des progrès réels et appartiennent à un groupe.", ref: "Deci & Ryan, Self-Determination Theory" },
    { eb: "Apprentissage actif", t: "Faire, pas seulement écouter", d: "Les preuves sont claires : la participation active surpasse l'instruction passive en rétention et en compréhension.", ref: "Freeman et al., 2014 · PNAS" },
    { eb: "Feedback immédiat", t: "Savoir en quelques secondes si c'est compris", d: "Quiz, duels et raids donnent un retour en quelques secondes. Le cerveau boucle l'apprentissage au moment où ça compte.", ref: "Hattie & Timperley" }
  ];
  return (
    <section id="pedagogy" className="aq-section">
      <div className="aq-section__head">
        <div className="aq-eyebrow aq-reveal">Fondement pédagogique</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Conçu sur la <i>façon dont les élèves apprennent vraiment</i>.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Pas du divertissement avec un vernis pédagogique. Un cadre d'engagement structuré, fondé sur la recherche.
        </p>
      </div>
      <div className="aq-pedagogy__grid">
        {pillars.map((p, i) => (
          <article key={p.eb} className="aq-pedagogy__card aq-reveal" data-delay={i + 1}>
            <div className="aq-pedagogy__eyebrow">{p.eb}</div>
            <h3 className="aq-h3">{p.t}</h3>
            <p className="aq-body">{p.d}</p>
            <div className="aq-pedagogy__ref">↳ {p.ref}</div>
          </article>
        ))}
      </div>
    </section>
  );
};

const ForSchools = () => {
  const tabs = [
    {
      key: 'profesores', label: 'Enseignants', eyebrow: 'Pour les enseignants',
      h: <>Conçu pour la <i>vraie classe</i>, pas pour une démo.</>,
      lead: "Nous savons à quoi ressemble un lundi 8h. Alquie est conçu pour fonctionner là — pas dans un scénario idéal.",
      shot: 'assets/screens/dashboard-profesor.png', shotAlt: 'Tableau de bord enseignant dans Alquie',
      points: [
        { t: "Aucune culture jeu requise", d: "Vous n'avez jamais besoin d'avoir joué à un RPG. Si vous savez préparer un cours, vous savez piloter Alquie." },
        { t: "5 minutes pour démarrer", d: "Onboarding par code. Téléversez votre matériel, invitez vos élèves — et ils jouent dès le cours suivant." },
        { t: "Marche dans des classes réelles", d: "Testé dans des écoles avec et sans tablettes. Votre salle, leurs téléphones, un projecteur — ça suffit." },
        { t: "Aligné sur le programme", d: "Votre contenu, vos critères d'évaluation, votre rythme. Alquie est la machine ; vous restez le designer." }
      ]
    },
    {
      key: 'estudiantes', label: 'Élèves', eyebrow: 'Pour les élèves',
      h: <>Apprendre ne ressemble plus à <i>une obligation</i>.</>,
      lead: "Chaque élève construit son personnage, gagne des niveaux et défie ses camarades. L'école se met à ressembler au jeu qu'ils ont vraiment envie d'ouvrir.",
      shot: 'assets/screens/dashboard-alumno.png', shotAlt: 'Tableau de bord élève dans Alquie',
      points: [
        { t: "Ton propre personnage", d: "Personnalise ton avatar, choisis ton clan et monte de niveau pendant que tu apprends." },
        { t: "Progrès visible", d: "Niveaux, pièces et séries rendent la progression palpable — et durable." },
        { t: "Compétition saine", d: "Duels et classements avec tes camarades : motivation sociale, sans pression." },
        { t: "Apprendre en jouant", d: "Potions, cartes et raids sont la matière. Sans déguisement." }
      ]
    }
  ];
  const [active, setActive] = useState('profesores');
  const tab = tabs.find(t => t.key === active);
  return (
    <section id="schools" className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Pour enseignants et élèves</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">Une plateforme, <i>deux regards</i>.</h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Changez de point de vue : ce que chaque rôle voit, ce qui lui importe et comment Alquie l'accompagne.
        </p>
      </div>

      <div className="aq-tabs aq-reveal" role="tablist">
        {tabs.map(t => (
          <button key={t.key} role="tab" aria-selected={active === t.key} className={`aq-tab ${active === t.key ? 'is-active' : ''}`} onClick={() => setActive(t.key)}>{t.label}</button>
        ))}
      </div>

      <div className="aq-schools__split" key={tab.key}>
        <div>
          <div className="aq-section__head" style={{ marginBottom: 32 }}>
            <div className="aq-eyebrow">{tab.eyebrow}</div>
            <h2 className="aq-h2">{tab.h}</h2>
            <p className="aq-lead" style={{ marginTop: 16 }}>{tab.lead}</p>
          </div>
          <div className="aq-schools__points">
            {tab.points.map((p) => (
              <div key={p.t} className="aq-schools__point">
                <div className="aq-schools__check">✓</div>
                <div>
                  <h4 className="aq-h4">{p.t}</h4>
                  <p className="aq-body-sm" style={{ marginTop: 4 }}>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="aq-schools__shot">
          <img src={tab.shot} alt={tab.shotAlt} style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
        </div>
      </div>
    </section>
  );
};

const SocialProof = () => {
  const quotes = [
    { n: "Nom de l'enseignant", r: "Poste", q: "Témoignage de l'enseignant ici." },
    { n: "Nom de l'enseignant", r: "Poste", q: "Témoignage de l'enseignant ici." },
    { n: "Nom de l'enseignant", r: "Poste", q: "Témoignage de l'enseignant ici." }
  ];
  return (
    <section className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Les enseignants qui nous ont rejoints en premier</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">Premiers échos de <i>celles et ceux qui enseignent avec Alquie</i>.</h2>
      </div>
      <div className="aq-social__grid">
        {quotes.map((q, i) => (
          <figure key={i} className="aq-quote aq-reveal" data-delay={i + 1} style={{ margin: 0 }}>
            <div className="aq-quote__mark">"</div>
            <blockquote className="aq-quote__q">{q.q}</blockquote>
            <figcaption className="aq-quote__by">
              <div className="aq-quote__avatar" style={{ background: 'rgba(0,53,88,0.08)', color: 'var(--ink-soft)' }}>—</div>
              <div>
                <div className="aq-quote__name">{q.n}</div>
                <div className="aq-quote__role">{q.r}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

const Pricing = ({ onContact }) => {
  const plans = [
    { eb: "Plan de base", name: "Enseignant", price: "Gratuit", sub: "Pour toujours · sans carte bancaire",
      bullets: ["1 cours","Jusqu'à 40 élèves","Personnages, niveaux et pièces","Cartes d'activités","Toutes les fonctionnalités essentielles","Support par tickets"],
      cta: "Créer un compte gratuit", featured: false },
    { eb: "Populaire", name: "Enseignant Pro", price: "6.99", suffix: "USD / mois", sub: "Tout du plan de base, étendu — plus :",
      bullets: ["Cours illimités · sans limite d'élèves","Quiz de potions","Treasure Hunt","Arène de duels","Raidboss collaboratif","Support prioritaire"],
      cta: "Passer à Pro", featured: true }
  ];
  return (
    <section id="pricing" className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Tarifs pour enseignants</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">Commencez <i>gratuitement</i>. Changez quand vous voulez.</h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Le plan de base couvre déjà l'essentiel. Pro ajoute les mécaniques avancées qui transforment chaque cours en événement.
        </p>
      </div>
      <div className="aq-pricing__row">
        {plans.map((p, i) => (
          <div key={p.name} className={`aq-pricing__card ${p.featured ? "aq-pricing__card--featured" : ""} aq-reveal`} data-delay={i + 1}>
            <div className="aq-pricing__head">
              <div>
                <div className="aq-eyebrow" style={{ marginBottom: 8 }}>{p.eb}</div>
                <h3 className="aq-pricing__name">{p.name}</h3>
              </div>
              <div className="aq-pricing__price">
                <span className="aq-pricing__amount">{p.suffix ? "€" : ""}{p.price}</span>
                {p.suffix && <span className="aq-pricing__suffix">{p.suffix}</span>}
              </div>
            </div>
            <div className="aq-pricing__sub">{p.sub}</div>
            <ul className="aq-pricing__list">
              {p.bullets.map(b => (<li key={b}><span className="aq-pricing__check">✓</span>{b}</li>))}
            </ul>
            <a href="#" className={`aq-btn ${p.featured ? "aq-btn--navy" : "aq-btn--ghost"}`}>{p.cta}</a>
          </div>
        ))}
      </div>
      <div className="aq-pricing__schools aq-reveal">
        <div>
          <div className="aq-eyebrow">Pour écoles et réseaux</div>
          <h4 className="aq-h4" style={{ marginTop: 6 }}>Plan École · adapté à votre taille et à vos besoins</h4>
        </div>
        <button className="aq-btn aq-btn--ghost" type="button" onClick={() => onContact('sales')}>Contacter les ventes</button>
      </div>
    </section>
  );
};

const FinalCTA = ({ onContact }) => (
  <section className="aq-finalcta">
    <div className="aq-finalcta__inner">
      <div className="aq-eyebrow aq-reveal" style={{ color: 'var(--peach)', justifyContent: 'center', marginBottom: 18 }}>Une dernière chose</div>
      <h2 className="aq-h2 aq-reveal" data-delay="1">Faites de votre classe un endroit où <i>ils ont envie de revenir</i>.</h2>
      <div className="aq-finalcta__ctas aq-reveal" data-delay="3">
        <a className="aq-btn aq-btn--coral aq-btn--lg" href="/signup/fr">Commencer gratuitement avec votre classe</a>
        <button className="aq-btn aq-btn--ghost-light aq-btn--lg" type="button" onClick={onContact}>Réserver une démo dans votre école</button>
      </div>
    </div>
  </section>
);

const Footer = ({ onContact }) => {
  const cols = [
    { h: "Plateforme", l: ["Plateforme","Onboarding","Centre d'aide"] },
    { h: "Entreprise", l: ["À propos d'Alquie","Carrières","Confidentialité","CGU"] }
  ];
  return (
    <footer className="aq-footer">
      <div className="aq-footer__inner">
        <div className="aq-footer__top">
          <div>
            <Brand light />
            <p style={{ marginTop: 14, maxWidth: 280, color: 'rgba(255,255,255,0.6)', fontSize: 14 }}>
              Plateforme éducative pour enseignants et écoles. Fait avec soin au Chili.
            </p>
          </div>
          {cols.map(c => (
            <div key={c.h} className="aq-footer__col">
              <h4>{c.h}</h4>
              <ul>{c.l.map(i => (
              <li key={i}>
                {i === 'Centre d'aide'
                  ? <a href="#" onClick={e => { e.preventDefault(); onContact('support'); }}>{i}</a>
                  : <a href="#">{i}</a>}
              </li>
            ))}</ul>
            </div>
          ))}
        </div>
        <div className="aq-footer__bottom">
          <span>© 2026 Alquie · Tous droits réservés</span>
          <span>hola@alquie.com</span>
        </div>
      </div>
    </footer>
  );
};


const SUPABASE_URL = 'https://ntuzvjmqdlehsjhgidzg.supabase.co';
const SUPABASE_ANON_KEY = 'sb_publishable_Sbw_p3mZBkWCWIncpFbfcw_8u0QQtFE';

const CONTACT_TOPICS = [
  { value: 'general', label: 'Demande générale' },
  { value: 'support', label: 'Support technique' },
  { value: 'sales', label: 'Plans & ventes' },
];
const CONTACT_FIELDS = {
  title: 'Écrivez-nous', topicLabel: 'Sujet',
  name: 'Nom complet', email: 'Adresse e-mail',
  school: 'École ou institution (optionnel)', message: 'Message',
  send: 'Envoyer', sending: 'Envoi en cours…',
  success: `Message envoyé ! On vous contacte bientôt.`,
  error: `Erreur lors de l'envoi. Veuillez réessayer.`,
  lang: 'fr',
};

const ContactModal = ({ open, topic, onClose }) => {
  const [selTopic, setSelTopic] = React.useState(topic || 'general');
  const [name, setName]         = React.useState('');
  const [email, setEmail]       = React.useState('');
  const [school, setSchool]     = React.useState('');
  const [message, setMessage]   = React.useState('');
  const [status, setStatus]     = React.useState('idle');

  React.useEffect(() => { if (open) setSelTopic(topic || 'general'); }, [open, topic]);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  if (!open) return null;

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch(`${SUPABASE_URL}/functions/v1/send-contact-email`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${SUPABASE_ANON_KEY}` },
        body: JSON.stringify({ name, email, school, message, topic: selTopic, lang: CONTACT_FIELDS.lang }),
      });
      if (!res.ok) throw new Error('error');
      setStatus('success');
    } catch { setStatus('error'); }
  };

  const F = CONTACT_FIELDS;
  return (
    <div className="aq-modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="aq-modal">
        <button className="aq-modal__close" onClick={onClose} aria-label="Close">×</button>
        {status === 'success' ? (
          <div className="aq-modal__success">
            <div className="aq-modal__success-icon">✓</div>
            <p>{F.success}</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit}>
            <h3 className="aq-modal__title">{F.title}</h3>
            <div className="aq-modal__field">
              <label>{F.topicLabel}</label>
              <select value={selTopic} onChange={e => setSelTopic(e.target.value)}>
                {CONTACT_TOPICS.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
              </select>
            </div>
            <div className="aq-modal__row">
              <div className="aq-modal__field">
                <label>{F.name}</label>
                <input required value={name} onChange={e => setName(e.target.value)} />
              </div>
              <div className="aq-modal__field">
                <label>{F.email}</label>
                <input type="email" required value={email} onChange={e => setEmail(e.target.value)} />
              </div>
            </div>
            <div className="aq-modal__field">
              <label>{F.school}</label>
              <input value={school} onChange={e => setSchool(e.target.value)} />
            </div>
            <div className="aq-modal__field">
              <label>{F.message}</label>
              <textarea required rows={4} value={message} onChange={e => setMessage(e.target.value)} />
            </div>
            {status === 'error' && <p className="aq-modal__error">{F.error}</p>}
            <button type="submit" className="aq-btn aq-btn--coral aq-btn--lg" disabled={status === 'sending'} style={{width:'100%'}}>
              {status === 'sending' ? F.sending : F.send}
            </button>
          </form>
        )}
      </div>
    </div>
  );
};

function App() {
  useReveal();
  useParallax();
  const [contactOpen, setContactOpen] = React.useState(false);
  const [contactTopic, setContactTopic] = React.useState('general');
  const openContact = (topic) => { setContactTopic(topic); setContactOpen(true); };
  return (
    <div className="aq-root">
      <Nav />
      <main>
        <Hero />
        <Problem />
        <Solution />
        <HowItWorks />
        <Pedagogy />
        <ForSchools />
        <SocialProof />
        <Pricing onContact={openContact} />
        <FinalCTA onContact={() => openContact('sales')} />
      </main>
      <Footer onContact={openContact} />
      <ContactModal open={contactOpen} topic={contactTopic} onClose={() => setContactOpen(false)} />
    </div>
  );
}

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