// homepage.jsx — Homepage with all 9 sections

function HeroHome() {
  return (
    <section className="hero" data-screen-label="01 Hero" id="hero">
      <div className="hero-left"></div>
      <div className="hero-right">
        <div className="hero-blur"></div>
        <div className="hero-flex">
          <img className="hero-symbol" src="assets/symbol.svg" alt="" />
          <div className="hero-text-group">
            <h1 className="hero-title">Un moment<br />pour moi</h1>
            <p className="hero-info">
              Séances de kinésiologie, soins énergétiques et espaces pour les femmes. Parce que le corps sait avant la tête.
            </p>
            <Cta href="#accompagnements" onClick={(e) => { e.preventDefault(); document.getElementById('accompagnements')?.scrollIntoView({ behavior: 'smooth' }); }}>
              Je découvre les accompagnements
            </Cta>
          </div>
          <p className="hero-label">
            Séances de kinésiologie, soins énergétiques et cercles de femmes — Etterbeek, Bruxelles
          </p>
        </div>
      </div>
    </section>
  );
}

function ParcoursApproche() {
  return (
    <section className="section parcours-approche" id="cheminement" data-screen-label="02 Parcours & Approche">
      <Reveal className="pa-grid">
        <div className="pa-block">
          <img className="pa-portrait" src="assets/amvz-portrait.webp" alt="Amandine Martinez Vazquez" />
          <span className="t-label">Parcours</span>
          <h2 className="t-h2" style={{ marginBottom: 16 }}>Mon cheminement</h2>
          <p>Je suis infirmière de formation, avec un Master en santé publique. Pendant longtemps, c'est ce qui a façonné ma vision du soin.</p>
          <p>Puis j'ai croisé les médecines alternatives un peu par hasard. Et très vite, l'idée de me former à la kinésiologie est devenue une évidence. Avec un petit clin d'œil du hasard : celle qui portait la kinésiologie de la santé en Europe francophone prenait sa retraite cette année-là. Je me suis retrouvée dans sa toute dernière promotion. Je me suis juste lancée, en sentant que c'était le moment.</p>
          <p>J'ai enchaîné avec une formation en Reiki en parallèle. Les deux se sont chevauchées, nourries l'une l'autre. Et puis je suis tombée enceinte de mon premier enfant. C'est là que tout s'est aligné : ce serait mon métier.</p>
          <p>Aujourd'hui, les soins énergétiques et les médecines alternatives ne sont plus un à-côté. Ils font partie de ma vie, de mon rythme, de mon mode de vie.</p>
        </div>
        <div className="pa-block pa-block--tinted">
          <span className="t-label">Approche</span>
          <h2 className="t-h2" style={{ marginBottom: 16 }}>Ce que je propose</h2>
          <p>Je ne soigne pas. Je ne guéris pas. Je ne diagnostique pas. Ce que je propose, c'est un espace — un espace où ton corps peut enfin dire ce qu'il sait. Où tu n'as pas besoin de performer, de comprendre, ou de tout expliquer.</p>
          <p>Un espace où le silence est un outil, le souffle un point de départ, et le corps un guide fiable. Chaque personne qui vient ici repart avec quelque chose de différent. Pas parce que je décide quoi donner — mais parce que c'est ton corps qui choisit quoi prendre.</p>
        </div>
      </Reveal>
    </section>
  );
}

function Accompagnements({ navigate }) {
  const tabs = [
    { id: "kine", thumb: "assets/amvz-kinesio.webp", thumbLabel: "Kinésiologie de la santé", label: "Kinésiologie de la santé",
      title: "Quand le corps a une histoire à raconter",
      body: "Ton corps garde la trace de tout ce que tu as vécu, reçu, hérité. Certaines histoires se déposent tellement profond qu'elles finissent par parler en tension, en fatigue, en émotion qu'on ne comprend plus. Ici, on ne raisonne pas avec la tête. On écoute ce que le corps dit.",
      image: "assets/amvz-kinesio.webp", route: "/kinesiologie" },
    { id: "reiki", thumb: "assets/amvz-reiki.webp", thumbLabel: "Reiki et bols de cristal", label: "Reiki et bols de cristal",
      title: "Un cocon de silence et de fréquences",
      body: "Allongée, les yeux fermés. Plus aucun mot. Mes mains voyagent le long de tes champs énergétiques — elles lisent, apaisent, rééquilibrent. Les bols arrivent, posent leurs fréquences dans ton corps comme des ondes douces qui réveillent ce qui dort.",
      image: "assets/amvz-reiki.webp", route: "/reiki" },
    { id: "evenements", thumb: "assets/amvz-cercles.webp", thumbLabel: "Événements", label: "Événements",
      title: "Cercles de femmes & rencontres à vivre",
      body: "Dix femmes, une soirée. On crée un espace qui prend la forme du thème du moment : parole, écriture introspective, ou silence. S'y ajoutent des événements ponctuels et des collaborations. Retrouve toutes les dates dans l'agenda.",
      image: "assets/amvz-cercles.webp", route: "/agenda" }
  ];
  const [active, setActive] = React.useState("kine");
  const [fading, setFading] = React.useState(false);
  const tab = tabs.find(t => t.id === active);

  const switchTo = (id) => {
    if (id === active) return;
    setFading(true);
    setTimeout(() => { setActive(id); setFading(false); }, 250);
  };

  return (
    <section className="tabs-wrap" id="accompagnements" data-screen-label="03 Accompagnements">
      <Reveal>
        <div className="section-head">
          <span className="t-label">Les accompagnements</span>
          <h2 className="t-h2">Trois portes d'entrée</h2>
        </div>
        <div className="tabs-selector">
          {tabs.map(t => (
            <button key={t.id} className={"tab-link" + (active === t.id ? " active" : "")} onClick={() => switchTo(t.id)}>
              <img className="tab-thumb" src={t.thumb} alt="" />
              <span className="tab-thumb-label">{t.thumbLabel}</span>
            </button>
          ))}
        </div>
        <div className={"tabs-content tab-pane" + (fading ? " fading" : "")}>
          <img className="tab-image" src={tab.image} alt={tab.label} />
          <div className="tab-text-group">
            <span className="t-label">{tab.label}</span>
            <h3 className="t-h2">{tab.title}</h3>
            <p>{tab.body}</p>
            <Cta href={"#" + tab.route} onClick={(e) => { e.preventDefault(); navigate(tab.route); }}>En savoir plus</Cta>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function FaqSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq" data-screen-label="04 FAQ">
      <Reveal>
        <div className="faq-head">
          <span className="t-label">FAQ</span>
          <h2 className="t-h2">Comment se passe une séance</h2>
        </div>
        <div className="faq-list">
          {window.AMVZ_DATA.FAQ.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={"faq-item" + (isOpen ? " open" : "")}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{item.q}</span>
                  <span className="plus" aria-hidden="true"></span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? '400px' : '0px' }}>
                  <div className="faq-a-inner">{item.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </Reveal>
    </section>
  );
}

function Reservation({ navigate }) {
  return (
    <section className="reservation" id="reservation" data-screen-label="05 Reservation">
      <Reveal className="reservation-inner">
        <span className="t-label">Réservation</span>
        <h2 className="t-h2">Prendre le rendez-vous</h2>
        <p>Tu n'as rien à préparer. Pas de diagnostic à poser, pas de mots justes à trouver. Tu viens comme tu es — avec une question qui traîne, une fatigue qui s'installe, ou juste le sentiment qu'il est temps de poser quelque chose. Choisis un créneau qui te convient. Les tarifs apparaissent au moment de la réservation.</p>
        <div style={{ marginTop: 16 }}>
          <Cta large href="#/prendre-rendez-vous" onClick={(e) => { e.preventDefault(); navigate('/prendre-rendez-vous'); }}>Réserver une séance</Cta>
        </div>
      </Reveal>
    </section>
  );
}

function JournalSection({ navigate }) {
  const all = window.AMVZ_DATA.ARTICLES;
  const articles = all.slice(0, 3);
  return (
    <section className="journal" id="journal-home" data-screen-label="06 Journal">
      <Reveal>
        <div className="journal-head">
          <div className="journal-title-group">
            <span className="t-label">Journal</span>
            <h2 className="t-h2">Ce que j'écris quand je m'arrête</h2>
          </div>
          <Cta href="#/journal" onClick={(e) => { e.preventDefault(); navigate('/journal'); }}>{all.length > 3 ? "Voir plus d'articles" : "Lire le journal"}</Cta>
        </div>
        <div className="journal-grid">
          {articles.map(a => (
            <a key={a.slug} className="journal-card" href={"#/journal/" + a.slug}
              onClick={(e) => { e.preventDefault(); navigate('/journal/' + a.slug); }}>
              <div className="journal-card-img-wrap">
                <img className="journal-card-img" src={a.image} alt="" />
              </div>
              <div className="journal-card-meta">{a.date} · {a.read}</div>
              <h3 className="journal-card-title">{a.title}</h3>
            </a>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

function NewsletterSection() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <section className="newsletter" data-screen-label="08 Newsletter">
      <Reveal className="newsletter-inner">
        <span className="t-label">Newsletter</span>
        <h2 className="t-h2">Rester en lien</h2>
        <p>Un message par mois. J'y écris la réflexion du moment — ce qui m'a traversée, ce que j'observe en séance, ce que j'ai envie de transmettre. Si ça te parle, n'hésite pas à me faire un retour.</p>
        {sent ? (
          <p style={{ fontStyle: 'italic', color: 'var(--b500)' }}>Merci. Je t'écris bientôt.</p>
        ) : (
          <form className="newsletter-form" onSubmit={(e) => { e.preventDefault(); if (email) setSent(true); }}>
            <input type="email" placeholder="Ton adresse email" value={email} onChange={(e) => setEmail(e.target.value)} required />
            <Cta>Oui, envoie-moi</Cta>
          </form>
        )}
        <p className="newsletter-rgpd">Respect de ta vie privée : un email par mois, pas plus. Désinscription possible à tout moment. Tes données restent confidentielles.</p>
      </Reveal>
    </section>
  );
}

function HomePage({ navigate }) {
  return (
    <>
      <HeroHome />
      <ParcoursApproche />
      <Accompagnements navigate={navigate} />
      <FaqSection />
      <Reservation navigate={navigate} />
      <JournalSection navigate={navigate} />
      <NewsletterSection />
    </>
  );
}

Object.assign(window, { HomePage, HeroHome, ParcoursApproche, Accompagnements, FaqSection, Reservation, JournalSection, NewsletterSection });