// pages2.jsx — Accompagnement, À propos, Contact pages

// ─── ACCOMPAGNEMENT ────────────────────────────────────────
const AccompPage = ({ onNav, density }) => {
  const [tab, setTab] = React.useState('naturo');
  return (
    <main className="page page-accomp">
      <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={7} />
        <Daisy size={32} color="var(--peach)" centerColor="var(--bg)" style={{ position: 'absolute', top: '30%', left: '8%', opacity: 0.95 }} />
        <Sparkle size={22} color="var(--accent)" className="sparkle-cluster" style={{ top: '40%', right: '12%' }} />
        <span className="eyebrow">L'accompagnement</span>
        <h1 className="script-xl">Deux pratiques, une même écoute</h1>
        <p className="lead">Que ce soit dans votre salon ou dans la voiture, je vous accompagne avec la même attention : votre rythme, vos émotions, votre histoire.</p>
      </header>

      {/* Toggle */}
      <div className="tabs">
        <button className={`tab ${tab === 'naturo' ? 'active' : ''}`} onClick={() => setTab('naturo')}>
          Naturopathie & émotions
        </button>
        <button className={`tab ${tab === 'conduite' ? 'active' : ''}`} onClick={() => setTab('conduite')}>
          Conduite apaisée
        </button>
      </div>

      {tab === 'naturo' && <NaturoSection density={density} />}
      {tab === 'conduite' && <ConduiteSection density={density} />}

      {/* Joint section: how a session works */}
      <section className="how-works">
        <div className="section-header">
          <FloralDivider style={{ width: '320px', height: '40px', color: 'var(--ink)', opacity: 0.45 }} />
          <h2 className="script-lg">Comment se déroule une rencontre</h2>
        </div>
        <ol className="steps">
          <li>
            <span className="step-num">01</span>
            <h4>Premier échange</h4>
            <p>15 minutes par téléphone, gratuit. On vérifie ensemble que ce que je propose correspond à votre besoin.</p>
          </li>
          <li>
            <span className="step-num">02</span>
            <h4>La séance</h4>
            <p>1h à 1h30 : on prend le temps de vous écouter, d'explorer ce qui bloque, et de poser des pistes concrètes.</p>
          </li>
          <li>
            <span className="step-num">03</span>
            <h4>Le suivi</h4>
            <p>Un retour écrit après la séance et la possibilité d'un suivi régulier, selon votre rythme.</p>
          </li>
        </ol>
      </section>

      <section className="cta-band">
        <FloralPattern opacity={0.05 * density} />
        <FloralCornerTL style={{ position: 'absolute', top: 0, left: 0, width: '180px', height: '180px', color: 'var(--ink)', opacity: 0.3 }} />
        <FloralCornerBR style={{ position: 'absolute', bottom: 0, right: 0, width: '180px', height: '180px', color: 'var(--ink)', opacity: 0.3 }} />
        <h2 className="script-lg">Envie d'en parler ?</h2>
        <p className="lead" style={{ fontFamily: "Quicksand" }}>Le premier échange est offert. Sans engagement, à votre rythme.</p>
        <button className="btn-primary" onClick={() => onNav('contact')}>Réserver mon appel</button>
      </section>
    </main>);

};

const NaturoSection = ({ density }) =>
<section className="accomp-section">
    <div className="accomp-grid">
      <div className="accomp-copy">
        <span className="eyebrow">Naturopathie</span>
        <h2 className="script-lg">Démêler les émotions, retrouver son axe</h2>
        <p>La naturopathie n'est pas seulement une affaire de tisanes. C'est une lecture
          globale de la personne : son corps, son histoire, son environnement. Je
          travaille à partir de cette grille pour accompagner les émotions qui débordent,
          les blocages qui pèsent, les transitions qui demandent du soin.</p>
        <p className="muted">Mes sujets de prédilection :</p>
        <ul className="bullets">
          <li>Parentalité & maternage proximal</li>
          <li>Hygiène Naturelle Infantile (HNI)</li>
          <li>Gestion du stress et anxiété chronique</li>
          <li>Communication Non Violente, couple, famille, équipes</li>
          <li>Préparation à la naissance & post-partum</li>
        </ul>
      </div>
      <div className="accomp-art">
        <div className="art-stack">
          <SoftBlob size={340} color="var(--primary)" opacity={0.2} style={{ top: '-20px', right: '-20px' }} />
          <div className="art-img">
            <img src={window.IMG_CONCEPTS} alt="Concepts du livre" />
          </div>
          <FloralSprig style={{ position: 'absolute', top: '10px', left: '-30px', width: '90px', height: '90px', color: 'var(--ink)', opacity: 0.5 }} seed={1} />
        </div>
      </div>
    </div>
  </section>;


const ConduiteSection = ({ density }) =>
<section className="accomp-section">
    <div className="accomp-grid">
      <div className="accomp-copy">
        <span className="eyebrow">Auto-école</span>
        <h2 className="script-lg">Apprendre à conduire, sans la boule au ventre</h2>
        <p>Beaucoup de mes élèves arrivent avec des échecs, des angoisses, une
          mauvaise expérience. Mon approche combine la pédagogie de l'auto-école
          classique avec des outils de naturopathie : respiration, ancrage, gestion
          des pensées qui s'emballent.</p>
        <p>Le permis devient alors moins une épreuve qu'un terrain d'apprentissage
          sur soi. On y travaille la confiance, l'autonomie, le rapport au regard
          des autres, et oui, aussi, le créneau.</p>
        <ul className="bullets">
          <li>Conduite accompagnée & permis B</li>
          <li>Accompagnement à la reprise après échec</li>
          <li>Gestion du stress avant l'examen</li>
          <li>Conduite post-traumatique (accident, peur)</li>
        </ul>
      </div>
      <div className="accomp-art">
        <div className="art-stack">
          <SoftBlob size={340} color="var(--accent)" opacity={0.22} style={{ top: '-20px', right: '-20px' }} />
          <div className="art-img placeholder-art">
            <FloralWreath style={{ width: '220px', height: '220px', color: 'var(--ink)', opacity: 0.55 }} />
            <span className="placeholder-label">Photo : élève au volant</span>
          </div>
          <FloralSprig style={{ position: 'absolute', bottom: '-20px', right: '-30px', width: '90px', height: '90px', color: 'var(--ink)', opacity: 0.5 }} seed={4} />
        </div>
      </div>
    </div>
  </section>;


const PriceCard = ({ tag, price, sub, featured }) =>
<div className={`price-card ${featured ? 'featured' : ''}`}>
    {featured && <span className="featured-mark">Le plus choisi</span>}
    <span className="price-tag">{tag}</span>
    <div className="price-value script-lg">{price}</div>
    <p>{sub}</p>
  </div>;


// ─── ABOUT ──────────────────────────────────────────────────
const AboutPage = ({ onNav, density }) =>
<main className="page page-about">
    <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={8} />
      <Sparkle size={20} color="var(--accent)" className="sparkle-cluster" style={{ top: '30%', left: '12%' }} />
      <Daisy size={36} color="var(--peach)" centerColor="var(--bg)" style={{ position: 'absolute', top: '25%', right: '10%', opacity: 0.95 }} />
      <span className="eyebrow">À propos</span>
      <h1 className="script-xl">Enchantée, je suis Natacha</h1>
    </header>

    <section className="about-intro">
      <div className="about-portrait">
        <img src={window.IMG_NATACHA} alt="Natacha Fourrageat" />
        <FloralSprig style={{ position: 'absolute', top: '-30px', right: '-20px', width: '90px', height: '90px', color: 'var(--accent)', opacity: 0.7 }} seed={2} />
        <FloralSprig style={{ position: 'absolute', bottom: '-30px', left: '-30px', width: '110px', height: '110px', color: 'var(--primary)', opacity: 0.6, transform: 'scaleX(-1)' }} seed={6} />
      </div>
      <div className="about-text">
        <p className="lead">Naturopathe, monitrice d'auto-école, autrice, et avant tout, mère, observatrice, curieuse du vivant.</p>
        <p>Pendant longtemps, j'ai cru qu'il fallait choisir entre ses passions. Mon parcours
          m'a montré le contraire : c'est la <em>relation</em> qui m'intéresse, entre un parent
          et son bébé, entre un·e élève et la route, entre soi et ses émotions.</p>
        <p>Mes outils sont multiples (naturopathie, CNV, pédagogie active, portage),
          mais l'intention est toujours la même : créer un espace sûr pour que la
          personne en face puisse se déposer, puis avancer.</p>
        <p>Je vis et travaille au Pays Basque, entre montagnes et océan.</p>
      </div>
    </section>

    <section className="timeline">
      <div className="section-header">
        <FloralDivider style={{ width: '320px', height: '40px', color: 'var(--ink)', opacity: 0.45 }} />
        <h2 className="script-lg">Mon chemin</h2>
      </div>
      <ol className="tl-list">
        <TLItem year="2012" title="Premier diplôme : monitrice d'auto-école"
      body="Je commence à enseigner la conduite. Très vite, je remarque que la technique ne suffit pas : il faut écouter le corps, le stress, l'histoire de chacun·e." />
        <TLItem year="2017" title="Formation en naturopathie"
      body="Trois ans d'études à l'École de Naturopathie Holistique. Je me spécialise sur la périnatalité et l'accompagnement émotionnel." />
        <TLItem year="2019" title="Naissance de mon premier enfant"
      body="L'HNI devient une pratique quotidienne. Je rassemble peu à peu mes notes, mes croquis, mes essais." />
        <TLItem year="2021" title="Première formation HNI donnée"
      body="Une dizaine de familles. Beaucoup de questions, beaucoup de joie. L'envie d'un livre se précise." />
        <TLItem year="2024" title="Publication de mon premier livre"
      body="« Petit manuel à l'usage des parents qui aimeraient utiliser moins de couches » paraît aux éditions XYZ." />
        <TLItem year="2026" title="Le tome 2 en chantier"
      body="« Conduire en confiance », où je rassemble dix ans d'observations sur le stress au volant." />
      </ol>
    </section>

    <section className="values">
      <div className="section-header">
        <h2 className="script-lg">Mes valeurs</h2>
      </div>
      <div className="values-grid">
        <ValueCard title="Douceur" body="Aller à son rythme, sans forcer. Le changement durable ne se décrète pas, il s'invite." />
        <ValueCard title="Lucidité" body="Pas de discours magique. Des outils concrets, testés, et la liberté d'en sortir." />
        <ValueCard title="Écoute" body="Avant de proposer, comprendre. Chaque personne est un terrain unique." />
        <ValueCard title="Joie" body="Prendre soin de soi devrait être un plaisir, pas une corvée de plus." />
      </div>
    </section>
  </main>;


const TLItem = ({ year, title, body }) =>
<li className="tl-item">
    <span className="tl-year script-md">{year}</span>
    <div className="tl-body">
      <h4>{title}</h4>
      <p>{body}</p>
    </div>
  </li>;


const ValueCard = ({ title, body }) =>
<div className="value-card">
    <FloralSprig style={{ width: '48px', height: '48px', color: 'var(--primary)', opacity: 0.7, marginBottom: '8px' }} seed={Math.floor(Math.random() * 10)} />
    <Sparkle size={12} color="var(--accent)" style={{ position: 'absolute', top: '24px', right: '24px', opacity: 0.7 }} />
    <h4 className="script-md">{title}</h4>
    <p>{body}</p>
  </div>;


// ─── CONTACT ────────────────────────────────────────────────
const ContactPage = ({ onNav, density }) => {
  const [form, setForm] = React.useState({ name: '', email: '', subject: 'naturo', msg: '', website: '' });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');
  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setError('');
    setSending(true);
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setSent(true);
      } else {
        const map = {
          invalid_name: 'Merci de renseigner votre nom.',
          invalid_email: 'Adresse email invalide.',
          invalid_message: 'Votre message doit faire au moins 10 caractères.',
          missing_api_key: 'Service email non configuré, contactez-nous par téléphone.',
          missing_config: 'Service email non configuré, contactez-nous par téléphone.',
          send_failed: 'L\'envoi a échoué, réessayez dans quelques minutes.',
        };
        setError(map[data.error] || 'Une erreur est survenue, réessayez plus tard.');
      }
    } catch {
      setError('Impossible de joindre le serveur. Vérifiez votre connexion.');
    } finally {
      setSending(false);
    }
  };

  return (
    <main className="page page-contact">
      <header className="page-header">
        <FloralBranch1 style={{ width: 'min(560px,90%)', height: '90px', color: 'var(--ink)', opacity: 0.5 }} />
        <span className="eyebrow">On se rencontre ?</span>
        <h1 className="script-xl">Prendre contact</h1>
        <p className="lead">Que ce soit pour une séance, une question sur le livre ou une heure de conduite, écrivez-moi. Je réponds sous 48h.</p>
      </header>

      <section className="contact-grid">
        <div className="contact-info">
          <div className="ci-card">
            <h4 className="script-md">Par téléphone</h4>
            <p>06 12 34 56 78<br />
              <span className="muted">Lundi au vendredi, 9h–18h</span></p>
          </div>
          <div className="ci-card">
            <h4 className="script-md">Par mail</h4>
            <p>natacha.fourrageat64@gmail.com</p>
          </div>
          <FloralSprig style={{ position: 'absolute', bottom: '-40px', right: '-30px', width: '120px', height: '120px', color: 'var(--ink)', opacity: 0.4 }} seed={7} />
        </div>

        <form className="contact-form" onSubmit={submit}>
          <FloralCornerTL style={{ position: 'absolute', top: '-20px', left: '-20px', width: '160px', height: '160px', color: 'var(--ink)', opacity: 0.25 }} />
          {sent ?
          <div className="sent-msg">
              <FloralWreath style={{ width: '140px', height: '140px', color: 'var(--primary)', opacity: 0.8 }} />
              <h3 className="script-lg">Merci !</h3>
              <p>Votre message est bien parti. Je vous réponds très vite.</p>
              <button type="button" className="btn-ghost" onClick={() => {setSent(false);setForm({ name: '', email: '', subject: 'naturo', msg: '', website: '' });}}>Envoyer un autre message</button>
            </div> :

          <>
              <h3 className="script-md">Votre message</h3>
              <label>
                <span>Comment vous appelez-vous ?</span>
                <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Prénom Nom" />
              </label>
              <label>
                <span>Votre email</span>
                <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="vous@email.fr" />
              </label>
              <label>
                <span>Le sujet de votre demande</span>
                <select value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })}>
                  <option value="naturo">Séance naturopathie</option>
                  <option value="conduite">Heure de conduite</option>
                  <option value="livre">Le livre</option>
                  <option value="autre">Autre</option>
                </select>
              </label>
              <label>
                <span>Votre message</span>
                <textarea required rows="6" value={form.msg} onChange={(e) => setForm({ ...form, msg: e.target.value })} placeholder="Racontez-moi en quelques lignes…" />
              </label>
              <input type="text" name="website" tabIndex="-1" autoComplete="off"
                value={form.website}
                onChange={(e) => setForm({ ...form, website: e.target.value })}
                style={{position:'absolute', left:'-9999px', width:'1px', height:'1px', opacity:0}}
                aria-hidden="true" />
              {error && <p className="form-error" role="alert">{error}</p>}
              <button type="submit" className="btn-primary" disabled={sending}>
                {sending ? 'Envoi…' : 'Envoyer'}
              </button>
              <p className="form-note muted">Vos données restent confidentielles. Aucun usage commercial.</p>
            </>
          }
        </form>
      </section>
    </main>);

};

Object.assign(window, {
  AccompPage, AboutPage, ContactPage, NaturoSection, ConduiteSection,
  PriceCard, TLItem, ValueCard
});