// pages.jsx — page components for Natacha's site

const NAV = [
  { id: 'home', label: 'Accueil' },
  { id: 'livres', label: 'Mes livres' },
  { id: 'accompagnement', label: 'Accompagnement' },
  { id: 'about', label: 'À propos' },
  { id: 'contact', label: 'Contact' },
];

// ─── Nav ─────────────────────────────────────────────────────
const TopNav = ({ current, onNav }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [menuOpen]);

  React.useEffect(() => {
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        setScrolled(window.scrollY > 8);
        ticking = false;
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const go = (id) => { setMenuOpen(false); onNav(id); };

  return (
    <>
      <nav className={`topnav ${scrolled ? 'is-scrolled' : ''}`}>
        <button className="brand" onClick={() => go('home')}>
          <span className="brand-mark">
            <svg viewBox="0 0 40 40" width="40" height="40" fill="none" stroke="currentColor" strokeWidth="1.4">
              <circle cx="20" cy="20" r="17" />
              <g transform="translate(20 20)">
                <circle r="2" fill="currentColor" opacity="0.6"/>
                {[0,1,2,3,4,5,6,7].map(i => (
                  <ellipse key={i} cx="0" cy="-8" rx="2" ry="5.5"
                           transform={`rotate(${i*45})`} />
                ))}
              </g>
            </svg>
          </span>
          <span className="brand-name">
            <span className="brand-first">Natacha</span>
            <span className="brand-last">Fourrageat</span>
          </span>
        </button>
        <ul className="navlist">
          {NAV.map(n => (
            <li key={n.id}>
              <button className={`navlink ${current === n.id ? 'active' : ''}`}
                      onClick={() => go(n.id)}>
                {n.label}
              </button>
            </li>
          ))}
        </ul>
        <button className="nav-cta" onClick={() => go('contact')}>
          Prendre rendez-vous
        </button>
        <button className={`burger-btn ${menuOpen ? 'is-open' : ''}`}
                aria-label="Ouvrir le menu" aria-expanded={menuOpen}
                onClick={() => setMenuOpen(o => !o)}>
          <span/><span/><span/>
        </button>
      </nav>

      {menuOpen && (
        <div className="mobile-menu" role="dialog" aria-modal="true">
          <button className="menu-close" aria-label="Fermer le menu" onClick={() => setMenuOpen(false)}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M6 6 L18 18 M18 6 L6 18" />
            </svg>
          </button>
          <nav className="mobile-nav">
            {NAV.map(n => (
              <button key={n.id}
                      className={`mobile-menu-link ${current === n.id ? 'active' : ''}`}
                      onClick={() => go(n.id)}>
                {n.label}
              </button>
            ))}
          </nav>
          <button className="btn-primary mobile-menu-cta" onClick={() => go('contact')}>
            Prendre rendez-vous
          </button>
        </div>
      )}
    </>
  );
};

// ─── Mobile floating CTA ─────────────────────────────────────
const MobileFloatingCTA = ({ current, onNav }) => {
  if (current === 'contact') return null;
  return (
    <button className="mobile-floating-cta" onClick={() => onNav('contact')}>
      Prendre rendez-vous
    </button>
  );
};

// ─── Footer ──────────────────────────────────────────────────
const Footer = ({ onNav }) => (
  <footer className="site-footer">
    <FloralDivider className="footer-divider" />
    <div className="footer-grid">
      <div className="footer-col">
        <h4 className="script-sm">Natacha Fourrageat</h4>
        <p className="muted">Naturopathe & monitrice d'auto-école.
          Accompagnement des émotions, de la parentalité et de l'apprentissage de la conduite.</p>
      </div>
      <div className="footer-col">
        <h5>Explorer</h5>
        <ul>
          {NAV.map(n => (
            <li key={n.id}><button onClick={() => onNav(n.id)}>{n.label}</button></li>
          ))}
        </ul>
      </div>
      <div className="footer-col">
        <h5>Me retrouver</h5>
        <ul className="muted">
          <li>Pays Basque, France</li>
          <li>natacha.fourrageat64@gmail.com</li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© 2026 Natacha Fourrageat · Tous droits réservés</span>
      <span>Mentions légales · Politique de confidentialité</span>
    </div>
  </footer>
);

// ─── HERO / HOME ────────────────────────────────────────────
const HomePage = ({ onNav, density }) => (
  <main className="page page-home">
    {/* Hero */}
    <section className="hero">
      <div className="peach-blob organic" style={{width:'520px', height:'480px', top:'-80px', right:'-120px', opacity:0.6}}/>
      <div className="peach-blob organic" style={{width:'380px', height:'340px', bottom:'-60px', left:'-100px', opacity:0.4, background:'var(--peach-soft)'}}/>

      <div className="hero-deco-tl">
        <FloralCornerTL style={{width:'280px',height:'280px',color:'var(--ink)',opacity:0.35*density}} />
      </div>
      <div className="hero-deco-br">
        <FloralCornerBR style={{width:'280px',height:'280px',color:'var(--ink)',opacity:0.3*density}} />
      </div>

      <SparkleField count={Math.round(14 * density)} color="var(--primary)" opacity={0.7} seed={1}/>

      {/* extra accent motifs */}
      <Sparkle size={28} color="var(--accent)" style={{position:'absolute', top:'14%', left:'52%', opacity:0.7}}/>
      <Sparkle size={20} color="var(--primary)" style={{position:'absolute', top:'8%', left:'8%', opacity:0.8}}/>
      <Sparkle size={36} color="var(--primary)" style={{position:'absolute', bottom:'12%', right:'8%', opacity:0.6}}/>
      <Daisy size={56} color="var(--primary-soft)" centerColor="var(--bg)" style={{position:'absolute', top:'20%', right:'6%', opacity:0.85}}/>
      <Daisy size={40} color="var(--peach)" centerColor="var(--bg)" style={{position:'absolute', bottom:'18%', left:'8%', opacity:0.9}}/>
      <EucalyptusBranch className="deco-eucalyptus" style={{width:'180px', height:'72px', top:'40%', left:'-3%', transform:'rotate(-20deg)'}}/>

      <div className="hero-inner">
        <div className="hero-copy">
          <span className="eyebrow">
            <Sparkle size={12} color="var(--accent)" style={{marginRight:6, verticalAlign:'middle'}}/>
            Naturopathie · Émotions · Conduite
          </span>
          <h1 className="script-xl">
            Prendre soin de soi,<br/>
            <em>en douceur.</em>
          </h1>
          <p className="lead">
            Je suis Natacha Fourrageat, naturopathe et monitrice d'auto-école.
            J'accompagne enfants, parents et apprenants à traverser leurs émotions
            avec confiance, du quotidien au volant.
          </p>
          <div className="cta-row">
            <button className="btn-primary" onClick={() => onNav('accompagnement')}>
              Découvrir l'accompagnement
            </button>
            <button className="btn-ghost" onClick={() => onNav('livres')}>
              Mon livre →
            </button>
          </div>
          <ul className="hero-tags">
            <li>· Hygiène Naturelle Infantile</li>
            <li>· Communication Non Violente</li>
            <li>· Gestion du stress au volant</li>
          </ul>
        </div>
        <div className="hero-art">
          <div className="portrait-frame">
            <img src={window.IMG_NATACHA} alt="Natacha avec son livre" />
            <FloralSprig style={{position:'absolute',top:'-30px',right:'-20px',width:'90px',height:'90px',color:'var(--accent)',opacity:0.7}} seed={3}/>
            <FloralSprig style={{position:'absolute',bottom:'-40px',left:'-30px',width:'110px',height:'110px',color:'var(--primary)',opacity:0.6,transform:'scaleX(-1)'}} seed={5}/>
            <Sparkle size={24} color="var(--primary)" style={{position:'absolute', top:'-8px', left:'30%', opacity:0.8}}/>
            <Daisy size={48} color="var(--peach)" centerColor="var(--bg)" style={{position:'absolute', bottom:'-30px', right:'-10px', opacity:0.95}}/>
            <Sparkle size={18} color="var(--accent)" style={{position:'absolute', top:'50%', left:'-20px', opacity:0.8}}/>
          </div>
        </div>
      </div>
    </section>

    {/* Three pillars */}
    <section className="pillars">
      <div className="peach-blob organic" style={{width:'420px', height:'380px', top:'8%', right:'-8%', opacity:0.45}}/>
      <EucalyptusBranch className="deco-eucalyptus" style={{width:'220px', height:'80px', top:'4%', left:'-2%', transform:'rotate(15deg)'}}/>
      <SparkleField count={Math.round(8 * density)} color="var(--primary)" opacity={0.5} seed={2}/>

      <div className="section-header">
        <FloralDivider style={{width:'320px',height:'40px',color:'var(--ink)',opacity:0.45}}/>
        <h2 className="script-lg">
          Trois chemins, une même intention
          <Sparkle size={20} color="var(--accent)" style={{marginLeft:8, verticalAlign:'super', opacity:0.8}}/>
        </h2>
        <p className="lead">Rendre l'écoute de soi accessible : au berceau, dans la vie, au volant.</p>
      </div>

      <div className="pillar-grid">
        <PillarCard
          tag="01 : Parentalité"
          title="Hygiène Naturelle Infantile"
          body="Comprendre les besoins de bébé pour vivre la propreté autrement, dès la naissance, sans contrainte."
          cta="Lire mon livre"
          daisy="peach"
          onClick={() => onNav('livres')}
        />
        <PillarCard
          tag="02 : Émotions"
          title="Accompagnement naturopathique"
          body="Un espace pour démêler les nœuds émotionnels, chez l'enfant comme chez l'adulte, avec des outils doux et concrets."
          cta="L'accompagnement"
          daisy="primary"
          onClick={() => onNav('accompagnement')}
        />
        <PillarCard
          tag="03 : Conduite"
          title="Apprendre à conduire, apaisé·e"
          body="Une approche qui prend en compte le stress, la confiance et le rythme de chacun·e. Le permis devient un chemin de soi."
          cta="En savoir plus"
          daisy="accent"
          onClick={() => onNav('accompagnement')}
        />
      </div>
    </section>

    {/* Featured book */}
    <section className="featured-book">
      <div className="peach-blob organic" style={{width:'460px', height:'420px', top:'-10%', left:'-8%', opacity:0.4}}/>
      <FernLeaf className="deco-fern" style={{width:'90px', height:'220px', top:'5%', right:'2%', opacity:0.4}}/>
      <SparkleField count={Math.round(6 * density)} color="var(--primary)" opacity={0.5} seed={3}/>

      <div className="fb-art">
        <div className="fb-circle">
          <img src={window.IMG_LOGO} alt="Heureux sans couches" />
        </div>
        <FloralSprig style={{position:'absolute',top:'40px',left:'-20px',width:'100px',height:'100px',color:'var(--ink)',opacity:0.4}} seed={2}/>
        <Sparkle size={24} className="fb-sparkle-1"/>
        <Sparkle size={18} className="fb-sparkle-2"/>
        <Sparkle size={28} className="fb-sparkle-3"/>
        <Daisy size={52} color="var(--peach)" centerColor="var(--bg)" className="fb-daisy"/>
      </div>
      <div className="fb-copy">
        <span className="eyebrow">
          <Sparkle size={11} color="var(--accent)" style={{marginRight:6, verticalAlign:'middle'}}/>
          Mon premier livre
        </span>
        <h2 className="script-lg">Petit manuel à l'usage des parents (et des bébés) qui aimeraient utiliser moins de couches</h2>
        <p>La pratique de l'Hygiène Naturelle Infantile (HNI) en résumé.
          Un guide doux, pratique et illustré, pour répondre aux besoins de votre bébé,
          au plus près de ce qu'il vous dit déjà.</p>
        <div className="cta-row">
          <button className="btn-primary" onClick={() => onNav('livres')}>Découvrir le livre</button>
        </div>
      </div>
    </section>

    {/* Quote */}
    <section className="quote-band">
      <FloralPattern opacity={0.05 * density}/>
      <SparkleField count={Math.round(10 * density)} color="var(--primary)" opacity={0.5} seed={4}/>
      <Daisy size={40} color="var(--peach)" centerColor="var(--bg-2)" style={{position:'absolute', top:'12%', left:'8%', opacity:0.95}}/>
      <Daisy size={32} color="var(--primary-soft)" centerColor="var(--bg-2)" style={{position:'absolute', bottom:'18%', right:'12%', opacity:0.95}}/>
      <Sparkle size={28} color="var(--accent)" style={{position:'absolute', top:'25%', right:'10%', opacity:0.7}}/>
      <Sparkle size={22} color="var(--primary)" style={{position:'absolute', bottom:'25%', left:'14%', opacity:0.7}}/>
      <blockquote>
        <span className="quote-mark">«&nbsp;</span>
        L'enfant n'est pas un vase qu'on remplit,<br/>
        c'est un feu qu'on allume, et qu'on protège du vent.
        <span className="quote-mark">&nbsp;»</span>
      </blockquote>
      <cite>Natacha</cite>
    </section>

    {/* Trust / numbers — small, restrained */}
    <section className="trust">
      <div className="trust-item"><strong className="script-md">8 ans</strong><span>d'accompagnement à la parentalité</span></div>
      <div className="trust-divider" />
      <div className="trust-item"><strong className="script-md">+200</strong><span>familles accompagnées</span></div>
      <div className="trust-divider" />
      <div className="trust-item"><strong className="script-md">1 livre</strong><span>et d'autres à venir</span></div>
    </section>
  </main>
);

const PillarCard = ({ tag, title, body, cta, onClick, daisy = 'primary' }) => {
  const daisyColor = daisy === 'peach' ? 'var(--peach)' : daisy === 'accent' ? 'var(--primary-soft)' : 'var(--primary-soft)';
  return (
    <article className="pillar-card">
      <FloralSprig className="pillar-sprig" style={{width:'70px',height:'70px',color:'var(--primary)',opacity:0.55}} seed={Math.floor(Math.random()*10)}/>
      <Daisy className="pillar-daisy" size={44} color={daisyColor} centerColor="var(--bg-3)" style={{opacity:0.9}}/>
      <Sparkle size={14} color="var(--accent)" style={{position:'absolute', top:'18px', left:'20px', opacity:0.7}}/>
      <span className="pillar-tag">{tag}</span>
      <h3>{title}</h3>
      <p>{body}</p>
      <button className="link-arrow" onClick={onClick}>{cta} <span aria-hidden>→</span></button>
    </article>
  );
};

// ─── BOOKS PAGE ─────────────────────────────────────────────
const BooksPage = ({ onNav, density }) => (
  <main className="page page-books">
    <header className="page-header">
      <FloralBranch1 style={{width:'min(560px,90%)',height:'90px',color:'var(--ink)',opacity:0.5}}/>
      <SparkleField count={6} color="var(--primary)" opacity={0.6} seed={5}/>
      <Sparkle size={20} color="var(--accent)" className="sparkle-cluster" style={{top:'30%', left:'15%'}}/>
      <Sparkle size={14} color="var(--primary)" className="sparkle-cluster" style={{top:'40%', right:'18%'}}/>
      <Daisy size={36} color="var(--peach)" centerColor="var(--bg)" style={{position:'absolute', top:'20%', right:'10%', opacity:0.9}}/>
      <span className="eyebrow">La bibliothèque</span>
      <h1 className="script-xl">Mes livres</h1>
      <p className="lead">Des guides écrits avec le cœur, illustrés avec soin, pour vous accompagner dans vos pratiques du quotidien.</p>
    </header>

    <section className="book-feature">
      <div className="peach-blob organic" style={{width:'480px', height:'420px', top:'-5%', right:'-10%', opacity:0.5}}/>
      <SparkleField count={Math.round(8 * density)} color="var(--primary)" opacity={0.5} seed={6}/>

      <div className="book-cover-wrap">
        <div className="book-cover-shadow"/>
        <img className="book-cover" src={window.IMG_NATACHA} alt="Natacha tenant son livre"/>
        <span className="book-badge">Disponible</span>
        <Sparkle size={26} color="var(--primary)" style={{position:'absolute', top:'-12px', right:'8%', opacity:0.85}}/>
        <Daisy size={48} color="var(--peach)" centerColor="var(--bg)" style={{position:'absolute', bottom:'-20px', left:'-10px', opacity:0.95}}/>
      </div>
      <div className="book-detail">
        <span className="eyebrow">Tome 1 · 2024</span>
        <h2 className="script-lg">Petit manuel à l'usage des parents <em>(et des bébés)</em> qui aimeraient utiliser moins de couches</h2>
        <p className="book-subtitle">La pratique de l'Hygiène Naturelle Infantile (HNI) en résumé.</p>
        <p>Ce petit guide rassemble en pages claires et illustrées les bases de l'HNI :
          observer son bébé, répondre à ses signaux, l'aider à éliminer ailleurs que dans
          une couche. Une pratique millénaire, racontée avec douceur et sans dogme.</p>
        <ul className="book-meta">
          <li><span>Format</span><strong>Broché · 14×21 cm</strong></li>
          <li><span>Pages</span><strong>96 pages illustrées</strong></li>
          <li><span>Prix</span><strong>14,90 €</strong></li>
          <li><span>ISBN</span><strong>978-2-XXXXX-XXX-X</strong></li>
        </ul>
        <div className="cta-row">
          <button className="btn-primary">Commander le livre</button>
        </div>
      </div>
    </section>

    {/* Inside the book — the concepts */}
    <section className="concepts">
      <div className="section-header">
        <FloralDivider style={{width:'320px',height:'40px',color:'var(--ink)',opacity:0.45}}/>
        <h2 className="script-lg">Ce que vous trouverez à l'intérieur</h2>
      </div>

      <div className="concept-grid">
        <ConceptCard
          title="Hygiène Naturelle Infantile"
          body="L'HNI est un moyen de comprendre quand votre bébé veut faire ses besoins. Lorsque c'est le cas, on peut lui enlever sa couche et le porter au-dessus d'un endroit approprié pour qu'il élimine."
        />
        <ConceptCard
          title="Communication Non Violente"
          body="La Communication Non Violente permet d'exprimer ses besoins et d'être entendu de l'autre sans rentrer dans le conflit."
        />
        <ConceptCard
          title="Portage & Maternage"
          body="Garder bébé près de soi, c'est mieux capter ses signaux. Le maternage proximal devient alors une grammaire naturelle de l'écoute."
        />
        <ConceptCard
          title="Observation bienveillante"
          body="Avant d'agir, observer. Le livre propose des grilles de lecture concrètes pour reconnaître les signaux d'élimination et les phases d'éveil."
        />
      </div>
    </section>

    {/* Next book teaser */}
    <section className="next-book">
      <div className="nb-art">
        <div className="nb-placeholder">
          <FloralWreath style={{width:'180px',height:'180px',color:'var(--ink)',opacity:0.5}}/>
          <span className="script-md">À paraître</span>
        </div>
      </div>
      <div>
        <span className="eyebrow">Tome 2 · 2026</span>
        <h3 className="script-lg">Conduire en confiance</h3>
        <p>Un livre pour celles et ceux que la conduite intimide. Comprendre le stress, apprivoiser la route, retrouver son corps derrière le volant. <em>Sortie prévue à l'automne.</em></p>
        <button className="btn-ghost" onClick={() => onNav('contact')}>Être prévenu·e de la sortie</button>
      </div>
    </section>
  </main>
);

const ConceptCard = ({ title, body }) => (
  <div className="concept-card">
    <FloralSprig className="concept-sprig" style={{width:'56px',height:'56px',color:'var(--primary)',opacity:0.7}} seed={Math.floor(Math.random()*10)}/>
    <Sparkle size={14} color="var(--accent)" style={{position:'absolute', bottom:'18px', right:'24px', opacity:0.7}}/>
    <Daisy size={28} color="var(--peach)" centerColor="var(--bg-3)" style={{position:'absolute', bottom:'18px', left:'24px', opacity:0.95}}/>
    <h3 className="script-md">{title}</h3>
    <p>{body}</p>
  </div>
);

const Testimonial = ({ quote, who }) => (
  <figure className="testi">
    <span className="testi-mark">"</span>
    <blockquote>{quote}</blockquote>
    <figcaption>{who}</figcaption>
  </figure>
);

Object.assign(window, {
  TopNav, Footer, HomePage, BooksPage, NAV, PillarCard, ConceptCard, Testimonial
});