// 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 className="footer-legal">
        <button onClick={() => onNav('legal')}>Mentions légales</button>
        <span aria-hidden="true"> · </span>
        <button onClick={() => onNav('confidentialite')}>Politique de confidentialité</button>
      </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'}}/>
          Le guide
        </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 pillar-card--${daisy}`}>
      <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="uploads/livre-hni.jpg" alt="Couverture : Petit manuel à l'usage des parents qui aimeraient utiliser moins de couches"/>
        <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">Le guide</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>Autrice</span><strong>Natacha Fourrageat</strong></li>
          <li><span>Illustrations</span><strong>Timoulin Studio Graphique</strong></li>
          <li><span>Format</span><strong>Broché, illustré</strong></li>
        </ul>
        <div className="cta-row">
          <a className="btn-primary" href="https://www.amazon.fr/dp/B0CWKZ3KJ4" target="_blank" rel="noopener noreferrer">Commander sur Amazon</a>
        </div>
      </div>
    </section>

    {/* Album jeunesse */}
    <section className="book-feature reverse">
      <div className="peach-blob organic" style={{width:'440px', height:'400px', bottom:'-8%', left:'-10%', opacity:0.45, background:'var(--peach-soft)'}}/>
      <SparkleField count={Math.round(6 * density)} color="var(--accent)" opacity={0.5} seed={9}/>

      <div className="book-cover-wrap">
        <div className="book-cover-shadow"/>
        <img className="book-cover" src="uploads/livre-brebis.jpg" alt="Couverture : La brebis qui voulait devenir renne du Père Noël"/>
        <span className="book-badge">Album jeunesse</span>
        <Daisy size={44} color="var(--primary)" centerColor="var(--bg)" style={{position:'absolute', top:'-16px', right:'-6px', opacity:0.95}}/>
        <Sparkle size={22} color="var(--accent)" style={{position:'absolute', bottom:'-10px', left:'6%', opacity:0.85}}/>
      </div>
      <div className="book-detail">
        <span className="eyebrow">L'album illustré</span>
        <h2 className="script-lg">La brebis qui voulait devenir renne du Père Noël</h2>
        <p className="book-subtitle">Un conte de Noël tendre et illustré, pour les petits comme pour les grands.</p>
        <p>L'histoire d'une brebis pas comme les autres, qui rêve de tirer le traîneau du
          Père Noël. Une fable douce sur l'acceptation de soi et la poursuite de ses rêves,
          joliment mise en images.</p>
        <ul className="book-meta">
          <li><span>Autrice</span><strong>Natacha Fourrageat</strong></li>
          <li><span>Illustrations</span><strong>Benjamin Ducasse</strong></li>
        </ul>
        <div className="cta-row">
          <a className="btn-primary" href="https://www.amazon.fr/dp/B0G534P9QC" target="_blank" rel="noopener noreferrer">Commander sur Amazon</a>
          <a className="btn-ghost" href="https://www.amazon.fr/dp/B0G52RJGNS" target="_blank" rel="noopener noreferrer">Aussi disponible en basque</a>
        </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>

  </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
});