// pages.jsx — All interior pages

const T = window.AMVZ_DATA.TESTIMONIALS;
const ART = window.AMVZ_DATA.ARTICLES;
const CER = window.AMVZ_DATA.CERCLES;

function PageHero({ label, title, subtitle, image }) {
  const style = { '--bg-image': `url('${image}')` };
  return (
    <section className="page-hero" style={style}>
      <div className="page-hero-inner">
        <span className="t-label">{label}</span>
        <h1 className="t-h1-page">{title}</h1>
        {subtitle && <p className="subtitle">{subtitle}</p>}
      </div>
    </section>
  );
}

function TestimonialPair({ names, navigate }) {
  const cards = T.filter(t => names.includes(t.name));
  return (
    <section className="section">
      <Reveal>
        <div className="section-head">
          <span className="t-label">Ce qu'elles en disent</span>
          <h2 className="t-h2">Témoignages</h2>
        </div>
        <div className="t-grid">
          {cards.map((c, i) => (
            <div className="t-card" key={i}>
              <span className="t-card-meta">{c.type} · {c.duration}</span>
              <p className="t-card-quote">« {c.quote} »</p>
              <span className="t-card-name">— {c.name}, {c.city}</span>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 56 }}>
          <Cta href="#/temoignages" onClick={(e) => { e.preventDefault(); navigate('/temoignages'); }}>Lire tous les témoignages</Cta>
        </div>
      </Reveal>
    </section>
  );
}

function InfoTable({ rows }) {
  return (
    <section className="page-block">
      <div className="info-table">
        {rows.map((r, i) => (
          <div className="info-row" key={i}>
            <span className="k">{r.k}</span>
            <span className="v">{r.v}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function CtaBlock({ note, label, navigate }) {
  return (
    <section className="reservation">
      <Reveal className="reservation-inner">
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--b500)' }}>{note}</p>
        <Cta large href="#/prendre-rendez-vous" onClick={(e) => { e.preventDefault(); if (navigate) navigate('/prendre-rendez-vous'); }}>{label}</Cta>
      </Reveal>
    </section>
  );
}

// ===== KINESIOLOGIE =====
function KinesiologiePage({ navigate }) {
  return (
    <>
      <PageHero label="Accompagnement" title="Quand le corps a une histoire à raconter"
        subtitle="Kinésiologie de la santé" image="assets/amvz-kinesio.webp" />
      <section className="page-block">
        <Reveal className="page-block-inner">
          <span className="t-label">Ce que c'est</span>
          <p>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.</p>
          <p>La kinésiologie de la santé — Health Kinesiology — s'adresse au système d'énergie qui anime ton corps. Elle utilise le test musculaire pour savoir ce que ton corps prioritise. Basée sur la médecine traditionnelle chinoise et les méridiens d'acupuncture, elle peut corriger, tonifier, soutenir, rediriger ou simplement informer.</p>
        </Reveal>
      </section>
      <section className="page-split">
        <Reveal as="div" className="page-split-inner">
          <div className="page-split-text">
            <span className="t-label">Déroulé</span>
            <h2 className="t-h2">Comment se passe une séance</h2>
            <p>Tu t'allonges. Tu gardes tes vêtements et tes bijoux. Tu peux me dire brièvement ce qui t'amène, ou pas — ce n'est pas indispensable. À partir de là, c'est ton corps qui guide.</p>
            <p>Je me connecte à lui via le test musculaire, que je pratique sur moi-même. Je ne travaille pas avec ton mental. C'est ton corps qui mène : il m'indique les priorités, les mémoires à déposer, les directions à prendre.</p>
            <p>Je m'installe à côté de toi et j'écris ta séance en entier avant qu'on commence. La méthode est hyper protocolaire — elle peut corriger, tonifier, soutenir, rediriger ou simplement informer. Une fois tout écrit, on se met à répéter ensemble les phrases qu'il y a à répéter. Tu n'as rien à performer, rien à comprendre. Ton corps, lui, travaille.</p>
          </div>
          <img className="page-split-image" src="assets/amvz-kinesio.webp" alt="" />
        </Reveal>
      </section>
      <section className="tinted" style={{ padding: '120px 32px', marginTop: 120 }}>
        <Reveal className="page-block-inner">
          <span className="t-label">Enfants & bébés</span>
          <h2 className="t-h2">Ils n'ont pas besoin de parler pour être entendus</h2>
          <p>Pour les moins de 10 ans, on procède autrement. Un premier échange avec toi, le parent, puis une séance où c'est toi qui répètes les phrases à la place de l'enfant. Je me connecte à ton corps, et à travers lui, à celui de ton enfant.</p>
          <p>Pour les bébés, je me connecte directement à leur corps — ils n'ont pas besoin de parler pour être entendus.</p>
        </Reveal>
      </section>
      <InfoTable rows={[
        { k: "Durée", v: "60 minutes" },
        { k: "Format", v: "Présentiel (Muse, Etterbeek) ou visio" },
        { k: "Distance", v: "Le test musculaire fonctionne à distance" },
        { k: "Tarif", v: "Visible au moment de la réservation" },
        { k: "Suivi", v: "3 à 4 séances espacées de 6 à 8 semaines" }
      ]} />
      <CtaBlock note="Tu n'as rien à préparer. Tu viens comme tu es." label="Réserver une séance de kinésiologie" navigate={navigate} />
      <TestimonialPair names={["Charlotte", "Sophie"]} navigate={navigate} />
    </>
  );
}

// ===== REIKI =====
function ReikiPage({ navigate }) {
  return (
    <>
      <PageHero label="Accompagnement" title="Un cocon de silence et de fréquences"
        subtitle="Reiki & bols de cristal" image="assets/amvz-reiki.webp" />
      <section className="page-block">
        <Reveal className="page-block-inner">
          <span className="t-label">Ce que c'est</span>
          <p>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.</p>
          <p>Tu franchis la porte entre veille et sommeil — cet espace où le lâcher-prise devient réel.</p>
        </Reveal>
      </section>
      <section className="page-split">
        <Reveal as="div" className="page-split-inner">
          <div className="page-split-text">
            <span className="t-label">Déroulé</span>
            <h2 className="t-h2">Le mouvement reprend</h2>
            <p>C'est un soin énergétique qui combine le magnétisme japonais (Reiki) et les bols de cristal. Tes différents champs énergétiques ont une mémoire : celle de tout ce que tu as senti, hérité, accumulé.</p>
            <p>Le soin vient rétablir la circulation, réveiller ce qui s'était figé. Les bols vibrent à des fréquences précises qui accompagnent ce mouvement.</p>
          </div>
          <img className="page-split-image" src="assets/amvz-reiki.webp" alt="" />
        </Reveal>
      </section>
      <section className="tinted" style={{ padding: '120px 32px', marginTop: 120 }}>
        <Reveal className="page-block-inner">
          <span className="t-label">Pendant et après</span>
          <h2 className="t-h2">Chaque corps répond à sa manière</h2>
          <p>Pendant : chaleur, picotements, couleurs derrière les paupières, émotions qui montent, calme profond. Certaines s'endorment. D'autres restent éveillées et conscientes.</p>
          <p>Après : légèreté, sommeil profond. 48 heures d'intégration où il vaut mieux bien s'hydrater et se ménager.</p>
        </Reveal>
      </section>
      <InfoTable rows={[
        { k: "Durée", v: "60 minutes" },
        { k: "Format", v: "Présentiel uniquement (Muse, Etterbeek)" },
        { k: "Tenue", v: "Tu gardes tes vêtements" },
        { k: "Tarif", v: "Visible au moment de la réservation" }
      ]} />
      <CtaBlock note="Ce soin ne demande rien. Juste ta présence." label="Réserver une séance Reiki" navigate={navigate} />
      <TestimonialPair names={["Laure", "Marie"]} navigate={navigate} />
    </>
  );
}

// ===== CERCLES DE FEMMES =====
function CerclesDeFemmesPage({ navigate }) {
  const upcoming = CER.filter(c => c.upcoming);
  return (
    <>
      <PageHero label="Accompagnement" title="Ce qu'on ne dit qu'entre filles"
        subtitle="Cercles de femmes" image="assets/amvz-cercles.webp" />
      <section className="page-block">
        <Reveal className="page-block-inner">
          <span className="t-label">Ce que c'est</span>
          <p>Dix femmes, une soirée. On crée un espace qui prend la forme du thème du moment. Parfois c'est la parole qui porte, parfois c'est l'écriture introspective, parfois c'est le silence. Quoi qu'on fasse, c'est un travail intérieur qu'on dépose ensemble.</p>
        </Reveal>
      </section>
      <section className="page-split">
        <Reveal as="div" className="page-split-inner">
          <div className="page-split-text">
            <span className="t-label">Déroulé</span>
            <h2 className="t-h2">Comment ça se passe</h2>
            <p>Les cercles se déroulent en deux temps. D'abord un atelier — parole, réflexion, ou écriture selon la soirée. Puis les 45 dernières minutes : tu t'allonges, je guide une méditation, et les bols de cristal prennent le relais.</p>
            <p>C'est le moment où le système nerveux se pose pour de bon, où la tête se tait enfin. Aucune obligation de partager. Aucune obligation de rien, d'ailleurs.</p>
          </div>
          <img className="page-split-image" src="assets/amvz-cercles.webp" alt="" />
        </Reveal>
      </section>
      <section className="section">
        <Reveal>
          <div className="section-head">
            <span className="t-label">Ce qu'on y trouve</span>
            <h2 className="t-h2">Quatre choses, pas plus</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32, maxWidth: 1000, margin: '0 auto' }}>
            {[
              ["Un espace sans jugement.", "Tu arrives comme tu es — en colère, joyeuse, confuse, entière."],
              ["Un thème à chaque fois.", "Chaque cercle explore un sujet différent. Parfois c'est la vulnérabilité. Parfois les limites."],
              ["Un voyage sonore.", "Les 45 dernières minutes, tu t'allonges. Les bols de cristal prennent le relais."],
              ["Aucune récurrence obligatoire.", "Tu peux venir une fois, ou t'inscrire régulièrement."]
            ].map(([title, desc], i) => (
              <div key={i} style={{ padding: '32px 0', borderTop: '1px solid var(--b200)' }}>
                <h3 className="t-h3" style={{ marginBottom: 16, fontSize: 20 }}>{title}</h3>
                <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.6, margin: 0, color: 'var(--b600)' }}>{desc}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </section>
      <section className="section">
        <Reveal>
          <div className="section-head">
            <span className="t-label">Prochaines dates</span>
            <h2 className="t-h2">À venir</h2>
          </div>
          <div className="cercle-list">
            {upcoming.map((c, i) => (
              <div className="cercle-card" key={i}>
                <div>
                  <div className="cercle-meta">{c.date}</div>
                  <h3>{c.theme}</h3>
                  <div className="seats">{c.seats}</div>
                </div>
                <Cta href="#" onClick={(e) => e.preventDefault()}>M'inscrire</Cta>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 48 }}>
            <Cta href="#/cercles" onClick={(e) => { e.preventDefault(); navigate('/cercles'); }}>Voir tous les cercles</Cta>
          </div>
        </Reveal>
      </section>
      <InfoTable rows={[
        { k: "Format", v: "10 femmes maximum" },
        { k: "Durée", v: "1h30 (20h – 21h30)" },
        { k: "Fréquence", v: "1 mercredi par mois" },
        { k: "Lieu", v: "Muse, 20 Avenue de l'Armée, Etterbeek" },
        { k: "Prérequis", v: "Aucun" }
      ]} />
      <CtaBlock note="Tu n'as pas besoin de savoir pourquoi tu viens. Juste de venir." label="M'inscrire au prochain cercle" />
      <TestimonialPair names={["Marie", "Nadia"]} navigate={navigate} />
    </>
  );
}

// ===== INDEX CERCLES =====
function CerclesIndexPage({ navigate }) {
  const upcoming = CER.filter(c => c.upcoming);
  const past = CER.filter(c => !c.upcoming);
  return (
    <>
      <section style={{ padding: '160px 32px 80px', textAlign: 'center' }}>
        <Reveal style={{ maxWidth: 720, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'center' }}>
          <span className="t-label">Cercles de femmes</span>
          <h1 className="t-h1-page">Les prochaines dates</h1>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.5, color: 'var(--b500)' }}>Un mercredi par mois, 10 femmes, une soirée pour déposer.</p>
        </Reveal>
      </section>
      <section className="section" style={{ paddingTop: 0 }}>
        <Reveal>
          <div style={{ maxWidth: 720, margin: '0 auto 32px' }}><span className="t-label">À venir</span></div>
          <div className="cercle-list">
            {upcoming.map((c, i) => (
              <div className="cercle-card" key={i}>
                <div>
                  <div className="cercle-meta">{c.date}</div>
                  <h3>{c.theme}</h3>
                  <div className="seats">{c.seats}</div>
                </div>
                <Cta href="#" onClick={(e) => e.preventDefault()}>M'inscrire</Cta>
              </div>
            ))}
          </div>
          <div style={{ maxWidth: 720, margin: '80px auto 32px' }}><span className="t-label">Passés</span></div>
          <div className="cercle-list">
            {past.map((c, i) => (
              <div className="cercle-card past" key={i}>
                <div>
                  <div className="cercle-meta">{c.date}</div>
                  <h3>{c.theme}</h3>
                  <div className="seats">{c.seats}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 80, maxWidth: 600, margin: '80px auto 0' }}>
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: 17, lineHeight: 1.6, color: 'var(--b500)', marginBottom: 24 }}>
              Tu ne sais pas lequel choisir ? Chaque cercle est indépendant. Le thème change, mais l'espace reste le même.
            </p>
            <Cta href="#/cercles-de-femmes" onClick={(e) => { e.preventDefault(); navigate('/cercles-de-femmes'); }}>Découvrir les cercles de femmes</Cta>
          </div>
        </Reveal>
      </section>
    </>
  );
}

// ===== JOURNAL INDEX =====
function JournalIndexPage({ navigate }) {
  return (
    <>
      <section style={{ padding: '160px 32px 80px', textAlign: 'center' }}>
        <Reveal style={{ maxWidth: 720, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'center' }}>
          <span className="t-label">Journal</span>
          <h1 className="t-h1-page">Ce que j'écris quand je m'arrête</h1>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.5, color: 'var(--b500)' }}>Des réflexions, des observations de séance, des pensées qui traînent.</p>
        </Reveal>
      </section>
      <section className="journal" style={{ marginTop: 40 }}>
        <Reveal>
          <div className="journal-grid">
            {ART.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.category} · {a.read}</div>
                <h3 className="journal-card-title">{a.title}</h3>
              </a>
            ))}
          </div>
        </Reveal>
      </section>
      <NewsletterSection />
    </>
  );
}

// ===== ARTICLE =====
function ArticlePage({ slug, navigate }) {
  const a = ART.find(x => x.slug === slug);
  if (!a) return <NotFoundPage navigate={navigate} />;
  const others = ART.filter(x => x.slug !== slug).slice(0, 2);
  return (
    <>
      <div className="article-cover-wrap">
        <img className="article-cover" src={a.image} alt="" />
      </div>
      <article className="article-body">
        <div className="article-meta-row">
          <span>{a.category}</span>
          <span>{a.date}</span>
          <span>{a.read}</span>
        </div>
        <h1>{a.title}</h1>
        {a.body.map((p, i) => <p key={i}>{p}</p>)}
        <p className="article-signature">— Écrit par Amandine</p>
      </article>
      <section className="journal" style={{ marginTop: 80 }}>
        <Reveal>
          <div className="section-head"><span className="t-label">À lire aussi</span><h2 className="t-h2">Autres écrits</h2></div>
          <div className="journal-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
            {others.map(o => (
              <a key={o.slug} className="journal-card" href={"#/journal/" + o.slug}
                onClick={(e) => { e.preventDefault(); navigate('/journal/' + o.slug); window.scrollTo(0, 0); }}>
                <div className="journal-card-img-wrap"><img className="journal-card-img" src={o.image} alt="" /></div>
                <div className="journal-card-meta">{o.date} · {o.read}</div>
                <h3 className="journal-card-title">{o.title}</h3>
              </a>
            ))}
          </div>
        </Reveal>
      </section>
      <NewsletterSection />
    </>
  );
}

// ===== TEMOIGNAGES =====
function TemoignagesPage({ navigate }) {
  return (
    <>
      <section style={{ padding: '160px 32px 80px', textAlign: 'center' }}>
        <Reveal style={{ maxWidth: 720, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'center' }}>
          <span className="t-label">Témoignages</span>
          <h1 className="t-h1-page">Elles sont revenues</h1>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.5, color: 'var(--b500)' }}>Des mots de celles qui ont poussé la porte.</p>
        </Reveal>
      </section>
      <section className="section" style={{ paddingTop: 0 }}>
        <Reveal>
          <div className="t-grid" style={{ maxWidth: 1100 }}>
            {T.map((c, i) => (
              <div className="t-card" key={i}>
                <span className="t-card-meta">{c.type} · {c.duration}</span>
                <p className="t-card-quote">« {c.quote} »</p>
                <span className="t-card-name">— {c.name}, {c.city}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </section>
      <CtaBlock note="C'est peut-être ton tour." label="Réserver ma première séance" navigate={navigate} />
    </>
  );
}

// ===== LEGAL PAGES =====
function MentionsPage() {
  return (
    <div className="legal">
      <span className="t-label">Mentions légales</span>
      <h1 className="t-h1-page" style={{ marginTop: 16, fontSize: 40 }}>Mentions légales</h1>
      <h2>Éditeur</h2>
      <p>Amandine Martinez Vazquez</p>
      <p>20 Avenue de l'Armée (Muse), 1040 Etterbeek, Belgique</p>
      <p>martinez.vazquez.amandine@gmail.com</p>
      <p>Numéro d'entreprise : [à compléter]</p>
      <h2>Propriété intellectuelle</h2>
      <p>L'ensemble du contenu de ce site est la propriété d'Amandine Martinez Vazquez. Toute reproduction, même partielle, est interdite sans autorisation préalable.</p>
      <h2>Responsabilité</h2>
      <p>Les informations publiées sont à titre indicatif. Elles ne se substituent pas à un avis médical. La kinésiologie et le Reiki sont des pratiques complémentaires.</p>
      <h2>Litiges</h2>
      <p>Droit belge applicable. Tribunaux de Bruxelles compétents.</p>
      <h2>Crédits</h2>
      <p>Site conçu par Damiano Fersini / Macrocosm.</p>
    </div>
  );
}

function ConfidentialitePage() {
  return (
    <div className="legal">
      <span className="t-label">Confidentialité</span>
      <h1 className="t-h1-page" style={{ marginTop: 16, fontSize: 40 }}>Politique de confidentialité</h1>
      <h2>Qui collecte</h2>
      <p>Amandine Martinez Vazquez, Etterbeek (Bruxelles).</p>
      <h2>Données collectées</h2>
      <p>Réservation : prénom, nom, email (via Calendly). Newsletter : email uniquement. Aucun cookie publicitaire.</p>
      <h2>Pourquoi</h2>
      <p>Te contacter pour le rendez-vous, t'envoyer la newsletter mensuelle. C'est tout.</p>
      <h2>Combien de temps</h2>
      <p>Données de réservation : le temps du suivi. Newsletter : tant que tu restes inscrite.</p>
      <h2>Tes droits</h2>
      <p>Tu peux accéder, rectifier, supprimer tes données et retirer ton consentement à tout moment. Un email suffit.</p>
      <h2>Transfert</h2>
      <p>Tes données ne sont jamais vendues. Elles sont transmises uniquement aux prestataires techniques (hébergeur, Calendly), tous conformes RGPD.</p>
    </div>
  );
}

function AnnulationPage() {
  return (
    <div className="legal">
      <span className="t-label">CGV / Annulation</span>
      <h1 className="t-h1-page" style={{ marginTop: 16, fontSize: 40 }}>CGV &amp; conditions d'annulation</h1>
      <h2>Séance individuelle</h2>
      <p>Annulation gratuite jusqu'à 48h avant le rendez-vous. Annulation tardive ou no-show : la séance est due.</p>
      <h2>Cercle</h2>
      <p>Prévenir au plus tôt. Annulation gratuite jusqu'à 48h avant.</p>
      <h2>Annulation côté Amandine</h2>
      <p>Tu es prévenue dès que possible, un nouveau créneau t'est proposé. La séance n'est pas facturée.</p>
      <h2>Retard</h2>
      <p>La séance se termine à l'heure prévue. En cas de retard d'Amandine, la séance est prolongée.</p>
      <h2>Paiement</h2>
      <p>Espèces ou virement. Détails communiqués à la confirmation.</p>
    </div>
  );
}

function ConfirmationPage({ navigate }) {
  return (
    <div className="simple-page">
      <span className="t-label">Confirmation</span>
      <h1 className="t-h1-page">C'est noté.</h1>
      <p>Merci d'avoir réservé un moment pour toi. Tu vas recevoir une confirmation par email.</p>
      <div style={{ maxWidth: 540, marginTop: 32, textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <span className="t-label">Avant ta séance</span>
        <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.7, margin: 0 }}>
          Viens comme tu es. Juste une intention, même floue. Arrive quelques minutes en avance. Pense à bien t'hydrater dans les 48h qui suivent.
        </p>
      </div>
      <div style={{ maxWidth: 540, marginTop: 32, textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <span className="t-label">Adresse</span>
        <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.7, margin: 0 }}>
          Muse — 20 Avenue de l'Armée, 1040 Etterbeek. Salle Thalie (en rentrant à gauche).
        </p>
      </div>
      <div style={{ marginTop: 48 }}>
        <Cta href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>Retour à l'accueil</Cta>
      </div>
    </div>
  );
}

function NotFoundPage({ navigate }) {
  return (
    <div className="simple-page">
      <span className="t-label">404</span>
      <h1 className="t-h1-page">Cette page n'existe pas.</h1>
      <p>Tu t'es peut-être perdue, ou cette page a été déplacée. Ce n'est pas grave — on va te ramener.</p>
      <div className="links" style={{ marginTop: 32 }}>
        <Cta href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>Revenir à l'accueil</Cta>
        <Cta href="#/journal" onClick={(e) => { e.preventDefault(); navigate('/journal'); }}>Lire le journal</Cta>
      </div>
      <p className="signature">« Le corps sait avant la tête. Même sur internet. » — Amandine</p>
    </div>
  );
}

// ===== AGENDA (Cercles + Événements) =====
function AgendaPage({ navigate }) {
  const upcoming = CER.filter(c => c.upcoming);
  const past = CER.filter(c => !c.upcoming);
  return (
    <>
      <PageHero label="Agenda" title="Cercles & événements" subtitle="Les prochaines dates pour se retrouver" image="assets/amvz-cercles.webp" />

      <section className="section" id="cercles">
        <Reveal className="page-block-inner">
          <span className="t-label">Cercles de femmes</span>
          <h2 className="t-h2">Ce qu'on ne dit qu'entre filles</h2>
          <p>Dix femmes, une soirée. On crée un espace qui prend la forme du thème du moment : parole, écriture introspective, ou silence. Les 45 dernières minutes, tu t'allonges, je guide une méditation, et les bols de cristal prennent le relais. Aucune obligation de partager. Aucune obligation de rien.</p>
        </Reveal>
        <Reveal>
          <div style={{ maxWidth: 720, margin: '48px auto 24px' }}><span className="t-label">À venir</span></div>
          <div className="cercle-list">
            {upcoming.map((c, i) => (
              <div className="cercle-card" key={i}>
                <div>
                  <div className="cercle-meta">{c.date}</div>
                  <h3>{c.theme}</h3>
                  <div className="seats">{c.seats}</div>
                </div>
                <Cta href="#/prendre-rendez-vous" onClick={(e) => { e.preventDefault(); navigate('/prendre-rendez-vous'); }}>M'inscrire</Cta>
              </div>
            ))}
          </div>
          <div style={{ maxWidth: 720, margin: '64px auto 24px' }}><span className="t-label">Passés</span></div>
          <div className="cercle-list">
            {past.map((c, i) => (
              <div className="cercle-card past" key={i}>
                <div>
                  <div className="cercle-meta">{c.date}</div>
                  <h3>{c.theme}</h3>
                  <div className="seats">{c.seats}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
        <InfoTable rows={[
          { k: "Format", v: "10 femmes maximum" },
          { k: "Durée", v: "1h30 (20h – 21h30)" },
          { k: "Fréquence", v: "1 mercredi par mois" },
          { k: "Lieu", v: "Muse, 20 Avenue de l'Armée, Etterbeek" },
          { k: "Prérequis", v: "Aucun" }
        ]} />
      </section>

      <section className="tinted" id="evenements" style={{ padding: '120px 32px' }}>
        <Reveal className="page-block-inner">
          <span className="t-label">Événements</span>
          <h2 className="t-h2">Ateliers & collaborations</h2>
          <p>Ponctuellement, j'organise des ateliers spéciaux et des collaborations avec d'autres praticiennes et lieux. Les prochaines dates et les liens d'inscription apparaîtront ici — certains via mon agenda, d'autres via la plateforme de l'organisateur.</p>
          <p style={{ color: 'var(--b500)', fontStyle: 'italic' }}>Prochainement.</p>
        </Reveal>
      </section>

      <CtaBlock note="Envie de rejoindre un cercle ou un événement ?" label="Prendre rendez-vous" navigate={navigate} />
    </>
  );
}

// ===== CONTACT =====
function ContactPage({ navigate }) {
  const faq = window.AMVZ_DATA.FAQ.slice(0, 4);
  return (
    <>
      <PageHero label="Contact" title="Écrire, demander, venir" subtitle="Un premier message par email, je te recontacte." image="assets/amvz-wellness.webp" />

      <section className="page-block">
        <Reveal className="page-block-inner">
          <span className="t-label">Me joindre</span>
          <p>Le plus simple, c'est un email — je réponds dès que possible. Tu peux aussi me suivre et m'écrire sur Instagram.</p>
          <div className="contact-methods">
            <a className="contact-card" href="mailto:martinez.vazquez.amandine@gmail.com">
              <span className="t-label">Email</span>
              <span className="contact-value">martinez.vazquez.amandine@gmail.com</span>
            </a>
            <a className="contact-card" href="https://instagram.com/amvz__" target="_blank" rel="noreferrer">
              <span className="t-label">Instagram</span>
              <span className="contact-value">@amvz__</span>
            </a>
          </div>
        </Reveal>
      </section>

      <section className="tinted" style={{ padding: '100px 32px' }}>
        <Reveal className="page-block-inner">
          <span className="t-label">Les lieux</span>
          <h2 className="t-h2">Où me trouver</h2>
          <div className="lieux-grid">
            <div className="lieu">
              <h3 className="t-h3" style={{ fontSize: 20 }}>Etterbeek</h3>
              <p>Muse — 20 Avenue de l'Armée<br />1040 Etterbeek, Bruxelles<br />Salle Thalie (en rentrant à gauche)</p>
            </div>
            <div className="lieu">
              <h3 className="t-h3" style={{ fontSize: 20 }}>Linkebeek</h3>
              <p>Adresse à venir.</p>
            </div>
          </div>
        </Reveal>
      </section>

      <section className="section">
        <Reveal>
          <div className="section-head">
            <span className="t-label">FAQ</span>
            <h2 className="t-h2">Quelques réponses</h2>
          </div>
          <div className="faq-list" style={{ maxWidth: 760, margin: '0 auto' }}>
            {faq.map((item, i) => (
              <div className="faq-item open" key={i}>
                <div className="faq-q" style={{ cursor: 'default' }}><span>{item.q}</span></div>
                <div className="faq-a" style={{ maxHeight: 'none' }}><div className="faq-a-inner">{item.a}</div></div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 40 }}>
            <Cta href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); window.scrollTo(0, 0); setTimeout(() => document.getElementById('faq')?.scrollIntoView({ behavior: 'smooth' }), 120); }}>Voir toute la FAQ</Cta>
          </div>
        </Reveal>
      </section>

      <CtaBlock note="Prête à venir ?" label="Prendre rendez-vous" navigate={navigate} />
    </>
  );
}

// ===== PRENDRE RENDEZ-VOUS (Calendly) =====
function CalendlyInline({ url }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    let cancelled = false;
    const init = () => {
      if (cancelled || !ref.current || !window.Calendly) return;
      ref.current.innerHTML = '';
      window.Calendly.initInlineWidget({ url, parentElement: ref.current });
    };
    if (!document.querySelector('link[data-calendly]')) {
      const l = document.createElement('link');
      l.rel = 'stylesheet'; l.href = 'https://assets.calendly.com/assets/external/widget.css';
      l.setAttribute('data-calendly', '1'); document.head.appendChild(l);
    }
    if (window.Calendly) { init(); }
    else {
      let s = document.querySelector('script[data-calendly]');
      if (!s) {
        s = document.createElement('script');
        s.src = 'https://assets.calendly.com/assets/external/widget.js';
        s.async = true; s.setAttribute('data-calendly', '1'); document.body.appendChild(s);
      }
      s.addEventListener('load', init);
    }
    return () => { cancelled = true; };
  }, [url]);
  return <div ref={ref} className="calendly-host" style={{ minWidth: 320, height: 720 }} />;
}

function PrendreRendezVousPage({ navigate }) {
  return (
    <>
      <PageHero label="Réservation" title="Prendre le rendez-vous" subtitle="Choisis ta séance et ton créneau." image="assets/amvz-reiki.webp" />
      <section className="page-block">
        <Reveal className="page-block-inner">
          <p>Tu n'as rien à préparer. Tu viens comme tu es. Choisis ta séance et un créneau qui te convient ci-dessous — les détails et tarifs s'affichent au moment de réserver.</p>
        </Reveal>
        <div style={{ maxWidth: 1000, margin: '32px auto 0' }}>
          <CalendlyInline url="https://calendly.com/amvz__?hide_gdpr_banner=1&hide_landing_page_details=1&background_color=fbfbef&text_color=231916&primary_color=231916" />
        </div>
      </section>
    </>
  );
}

Object.assign(window, {
  KinesiologiePage, ReikiPage, CerclesDeFemmesPage, CerclesIndexPage,
  AgendaPage, ContactPage, PrendreRendezVousPage,
  JournalIndexPage, ArticlePage, TemoignagesPage,
  MentionsPage, ConfidentialitePage, AnnulationPage,
  ConfirmationPage, NotFoundPage
});