/* global React, useReveal */
const { useEffect: useGuideEffect, useState: useGuideState } = React;

const GUIDE_CHAPTERS = [
  { id: 'foreword',  num: '00', title: 'A letter to begin with' },
  { id: 'symptoms',  num: '01', title: 'The symptom decoder' },
  { id: 'week',      num: '02', title: 'Phase by phase' },
  { id: 'food',      num: '03', title: 'Food, simplified' },
  { id: 'movement',  num: '04', title: 'Movement by phase' },
  { id: 'doctor',    num: '05', title: 'The doctor’s-visit script' },
  { id: 'redflags',  num: '06', title: 'Red flags & when to escalate' },
  { id: 'glossary',  num: '07', title: 'A clean glossary' },
  { id: 'tracker',   num: '08', title: 'A cycle tracker, simply' },
  { id: 'reading',   num: '09', title: 'Where to read further' },
];

function GuideMark() {
  return (
    <div className="g-mark">
      <span className="g-mark-circle" />
      <span>Ayla</span>
    </div>
  );
}

function GuideRule() {
  return <div className="g-rule" />;
}

function GuideChapterHead({ num, title, eyebrow }){
  return (
    <header className="g-chapter-head reveal">
      <div className="g-chapter-num">Chapter {num}</div>
      <h2>{title}</h2>
      {eyebrow && <p className="g-chapter-dek">{eyebrow}</p>}
    </header>
  );
}

/* global AylaRouter */
function Guide({ setRoute }){
  useReveal();
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.pageYOffset - 24;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <div className="page guide-page">

      {/* COVER */}
      <section className="g-cover">
        <div className="g-cover-inner">
          <div className="g-cover-top">
            <GuideMark />
            <div className="g-cover-edition">First edition · Spring 2026</div>
          </div>

          <div className="g-cover-title">
            <h1>
              The <br/><span className="it">Cycle Guide.</span>
            </h1>
            <p>
              A curated read on what your body is doing in each phase,
              what to eat, when to move, and how to talk to your doctor.
            </p>
          </div>


        </div>
      </section>

      {/* CONTENTS */}
      <section className="g-spread g-contents">
        <div className="g-folio">
          <span>The Cycle Guide</span>
          <span>Contents</span>
        </div>
        <h2 className="g-spread-h">Contents.</h2>
        <ol className="g-toc">
          {GUIDE_CHAPTERS.map(c => (
            <li key={c.id} onClick={() => scrollTo(c.id)}>
              <span className="n">{c.num}</span>
              <span className="t">{c.title}</span>
              <span className="d" />
              <span className="p">{String(2 + GUIDE_CHAPTERS.indexOf(c) * 3).padStart(2,'0')}</span>
            </li>
          ))}
        </ol>
        <p className="g-contents-foot">
          Read it cover to cover, or open the chapter that sounds like you. Both are fine.
        </p>
      </section>

      {/* FOREWORD */}
      <section className="g-spread" id="foreword">
        <div className="g-folio">
          <span>00 · Foreword</span>
          <span>From Ayla's Team</span>
        </div>
        <GuideChapterHead num="00" title="A letter to begin with"/>
        <div className="g-letter">
          <p className="g-drop">
            <span className="g-dropcap">I</span>f you have spent any time on the
            internet looking for answers about your cycle, your hormones, or
            why the second half of your month feels so different from the
            first, you have probably found two things: too much, and not
            enough.
          </p>
          <p>
            Too many lists. Not enough sense. Too many supplements promising
            to fix a thing they cannot even define. Not enough writing that
            takes your time seriously, or your body seriously, or both.
          </p>
          <p>
            This guide is our small attempt at the second one. It is not
            comprehensive. It is not a diagnosis. It is the document we wish
            we had been handed at twenty-two, written in the voice of a
            well-informed friend, and edited by women who
            have lived the questions it tries to answer.
          </p>
          <p>
            Read the bits that sound like you. Skip the bits that don’t. We
            promise not to be offended.
          </p>
        </div>
      </section>

      {/* CH 1 — SYMPTOM DECODER */}
      <section className="g-spread" id="symptoms">
        <div className="g-folio">
          <span>01 · Symptom decoder</span>
          <span>What your body is saying</span>
        </div>
        <GuideChapterHead num="01" title="The symptom decoder"
          eyebrow="A short translation of the things that bother you most, in the language of what is actually happening." />

        <div className="g-decoder">
          {[
            { q: 'Wired at midnight in the week before my period.',
              a: 'Progesterone is raising your core temperature and lifting your respiratory drive. Cooling the room by two degrees and eating a complete dinner will do more than any sleep app.' },
            { q: 'A 3am wake-up I cannot explain.',
              a: 'Sometimes blood sugar regulation, not just anxiety. The luteal phase can change blood sugar regulation and increase overnight wake-ups. Protein and fibre with your last meal of the day is the cheapest fix.' },
            { q: 'I cry on Wednesdays for no reason.',
              a: 'Your nervous system is more reactive after ovulation. The trigger is real, the response is amplified, the situation is rarely the size it feels.' },
            { q: 'I want carbohydrates so badly I cannot read.',
              a: 'Serotonin dips with progesterone. A slow carbohydrate paired with protein climbs back up gently; a sweet one spikes and drops you lower than where you started.' },
            { q: 'My skin is on fire one week, fine the next.',
              a: 'Androgens (testosterone, DHEA) rise mid-cycle; sebum follows. Switch to a gentler routine for those eight days, not a harsher one.' },
            { q: 'I am cold all the time, suddenly.',
              a: 'Thyroid, not always cycle. A thyroid panel may be worth discussing with your clinician.' },
          ].map((row, i) => (
            <div key={i} className="g-decoder-row reveal">
              <div className="g-decoder-q">
                <span className="g-decoder-tick">—</span>
                <span>{row.q}</span>
              </div>
              <div className="g-decoder-a">{row.a}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CH 2 — PHASE BY PHASE */}
      <section className="g-spread" id="week">
        <div className="g-folio">
          <span>02 · Phase by phase</span>
          <span>What’s happening, what to try</span>
        </div>
        <GuideChapterHead num="02" title="Phase by phase"
          eyebrow="Four phases, not four weeks. Your cycle may be longer, shorter, or without a clear ovulation. This is a map by phase, not by calendar." />

        <div className="g-weeks">
          {[
            { phase: 'Menstrual', sub: 'The soft start', glow: 'menstrual',
              what: 'Estrogen and progesterone are at their lowest. Energy is quieter. The body is recovering.',
              signs: [
                'Heavier or more tiring bleeding for you',
                'Lower energy, more need for rest',
                'Cramps, back ache, or a “drawn inward” mood',
                'Cravings for iron-rich, warming food',
              ],
              try: 'Permission to do less. Iron-rich food. A long walk instead of a hard workout.' },
            { phase: 'Follicular', sub: 'The bright climb', glow: 'follicular',
              what: 'Estrogen rises. Mood lifts. The brain feels sharper, more open to risk, more willing to start things.',
              signs: [
                'Energy and mood slowly lifting',
                'Cervical mucus turning creamy, then stretchier',
                'Clearer skin or brighter mood for some',
                'More tolerance for strength work or new plans',
              ],
              try: 'The hard conversation, the bigger ask, the heavier lift, if energy is there.' },
            { phase: 'Ovulatory', sub: 'Peak window', glow: 'ovulatory',
              what: 'A brief peak in estrogen and testosterone. Energy and confidence often feel highest here, whether it lasts one day or a few.',
              signs: [
                'Clear, slippery cervical mucus (if you notice mucus)',
                'Brief one-sided pelvic twinge for some',
                'A short window of peak energy or confidence',
                'Positive ovulation test, if you use one',
              ],
              try: 'Use the window you have. Schedule what matters. Rest is still allowed afterward.' },
            { phase: 'Luteal', sub: 'Quieter weeks', glow: 'luteal',
              what: 'Progesterone rises, then falls. Sleep may fragment. Mood can feel reactive. The body is finishing a long piece of work.',
              signs: [
                'Breast tenderness or bloating',
                'Sleep that lightens or breaks apart',
                'Mood that feels closer to the surface',
                'Cravings for carbs, salt, or comfort',
              ],
              try: 'A cooler bedroom. A complete dinner. The same evening every night. Twenty minutes of quiet.' },
            { phase: 'Follicular with delayed ovulation', sub: 'When the first half of your cycle runs long', glow: 'delayed',
              what: 'Estrogen may rise, dip, and rise again without a clear handoff to progesterone. The body can feel caught between “almost ready” and “not yet.”',
              signs: [
                'Many days on a tracker still marked follicular',
                'Mucus changes, but no clear slippery peak',
                'Ovulation tests that flicker, not stay positive',
                'No sustained temperature rise if you track BBT',
                'Energy in waves, without a confident peak',
              ],
              try: 'Track signs, not guilt. Keep protein and fibre steady. If this phase runs longer than usual for you, bring your notes to a clinician.' },
            { phase: 'When ovulation does not happen', sub: 'Anovulatory cycles still deserve care', glow: 'anovulatory',
              what: 'Sometimes a cycle completes without ovulation. You may still bleed, without the progesterone rise that follows a true ovulation.',
              signs: [
                'Bleeding without clear ovulation clues',
                'Flat temperature or absent luteal phase on a tracker',
                'Cycles that are long, short, or unpredictable',
                'Mild or mistimed “PMS,” or none at all',
                'Ongoing follicular-type swings in energy or skin',
              ],
              try: 'Do not force peak-week intensity. Favour steady meals, walking, and sleep. See the symptom decoder and doctor’s-visit chapters if this is your norm.' },
          ].map(w => (
            <div key={w.phase} className={"g-week-card reveal g-week-card--" + w.glow}>
              <div className="g-week-head">
                <div>
                  <div className="g-week-phase">{w.phase}</div>
                  <div className="g-week-sub">{w.sub}</div>
                </div>
              </div>
              <div className="g-week-body">
                <div>
                  <div className="g-week-l">What’s happening</div>
                  <p>{w.what}</p>
                </div>
                {w.signs && w.signs.length > 0 && (
                <div>
                  <div className="g-week-l">Signs to notice</div>
                  <ul className="g-week-signs">
                    {w.signs.map((s, i) => <li key={i}>{s}</li>)}
                  </ul>
                </div>
                )}
                <div>
                  <div className="g-week-l">One small thing to try</div>
                  <p>{w.try}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CH 3 — FOOD */}
      <section className="g-spread" id="food">
        <div className="g-folio">
          <span>03 · Food, simplified</span>
          <span>A plate, five swaps</span>
        </div>
        <GuideChapterHead num="03" title="Food, simplified"
          eyebrow="Not a meal plan. A plate diagram and five swaps that earn their place, particularly if you have insulin resistance." />

        <div className="g-food">
          <div className="g-plate">
            <div className="g-plate-disc">
              <div className="g-plate-slice g-plate-protein"><span>Protein<br/><em>palm-sized</em></span></div>
              <div className="g-plate-slice g-plate-veg"><span>Vegetables<br/><em>half the plate</em></span></div>
              <div className="g-plate-slice g-plate-carb"><span>Slow carb<br/><em>cupped hand</em></span></div>
              <div className="g-plate-slice g-plate-fat"><span>Fat<br/><em>a thumb</em></span></div>
              <div className="g-plate-center">A plate, by phase.</div>
            </div>
            <p className="g-plate-cap">
              Move the dial: more carbohydrate in menstrual, more protein in
              luteal. The shape stays the same.
            </p>
          </div>
          <div className="g-swaps">
            <h3>Five swaps that earn their place.</h3>
            <ol>
              <li><b>Cereal → eggs &amp; greens.</b> Sets your blood sugar for the day. Most people feel it by Wednesday.</li>
              <li><b>Latte → latte after food.</b> Caffeine on an empty stomach spikes cortisol. The drink is fine; the timing is the trick.</li>
              <li><b>Salad-only lunch → salad with thirty grams of protein.</b> Hunger by 4pm is a protein problem, not a willpower problem.</li>
              <li><b>Late dinner → earlier, complete dinner.</b> The single most useful change for luteal-phase sleep.</li>
              <li><b>Snack → a real meal.</b> Three meals beats six “small” ones for almost everyone with insulin resistance.</li>
            </ol>
          </div>
        </div>
      </section>

      {/* CH 4 — MOVEMENT */}
      <section className="g-spread" id="movement">
        <div className="g-folio">
          <span>04 · Movement by phase</span>
          <span>When to push, when to walk</span>
        </div>
        <GuideChapterHead num="04" title="Movement by phase"
          eyebrow="Phases are patterns, not rules. Cycles vary widely, especially with PMOS, stress, postpartum changes, and hormonal conditions." />

        <table className="g-table">
          <thead>
            <tr>
              <th>Phase</th><th>Push</th><th>Pull back</th><th>Notes</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><b>Menstrual</b></td>
              <td>Walking. Mobility. Light yoga.</td>
              <td>Prolonged endurance or maximal energy if energy is lower.</td>
              <td>The body is restoring. Don’t fight it.</td>
            </tr>
            <tr>
              <td><b>Follicular</b></td>
              <td>Strength. Sprints. New skills.</td>
              <td>—</td>
              <td>Often the strongest training window, when energy is there.</td>
            </tr>
            <tr>
              <td><b>Ovulatory</b></td>
              <td>Heavy lifts while energy is high.</td>
              <td>All-out efforts if recovery feels slower.</td>
              <td>Energy may peak around ovulation, then taper. Don't mistake the shift for laziness.</td>
            </tr>
            <tr>
              <td><b>Luteal</b></td>
              <td>Pilates. Long walks. Stretch.</td>
              <td>HIIT. PRs. Fasted training.</td>
              <td>Sleep is the workout in late luteal.</td>
            </tr>
          </tbody>
        </table>
      </section>

      {/* CH 5 — DOCTOR */}
      <section className="g-spread" id="doctor">
        <div className="g-folio">
          <span>05 · The doctor’s-visit script</span>
          <span>The page worth printing</span>
        </div>
        <GuideChapterHead num="05" title="The doctor’s-visit script"
          eyebrow="Many women leave their first PMOS appointment feeling unheard or without clear answers. This is the page we wrote so the second one goes differently." />

        <div className="g-doctor">
          <div className="g-doctor-col">
            <h3>What to say.</h3>
            <ul className="g-doctor-list">
              <li>Describe the pattern, not the worst day. <em>“Three months of cycles longer than 35 days,”</em> not <em>“I feel terrible.”</em></li>
              <li>Bring two weeks of notes. A symptom tracker is taken more seriously than memory.</li>
              <li>Name the impact on work and sleep. Clinicians are trained to weigh functional loss.</li>
              <li>If you have a family history of PMOS, diabetes, or thyroid disease — say so in the first minute.</li>
            </ul>
          </div>

          <div className="g-doctor-col">
            <h3>Tests worth asking for.</h3>
            <table className="g-tests">
              <tbody>
                <tr><td>Fasting insulin</td><td className="muted">insulin resistance</td></tr>
                <tr><td>HbA1c</td><td className="muted">90-day glucose</td></tr>
                <tr><td>Total &amp; free testosterone</td><td className="muted">androgen level</td></tr>
                <tr><td>SHBG</td><td className="muted">how much testosterone is bound</td></tr>
                <tr><td>DHEAS</td><td className="muted">adrenal androgen</td></tr>
                <tr><td>TSH &amp; free T4</td><td className="muted">thyroid</td></tr>
                <tr><td>Vitamin D, ferritin, B12</td><td className="muted">the quiet deficiencies</td></tr>
                <tr><td>Lipid panel</td><td className="muted">long-term context</td></tr>
              </tbody>
            </table>
            <p className="g-doctor-tip">
              You can ask for these by name. <em>“I’d like to rule out insulin resistance, a thyroid issue, and an androgen picture”</em> is a complete sentence.
            </p>
          </div>
        </div>
      </section>

      {/* CH 6 — RED FLAGS */}
      <section className="g-spread" id="redflags">
        <div className="g-folio">
          <span>06 · Red flags</span>
          <span>When to escalate</span>
        </div>
        <GuideChapterHead num="06" title="Red flags & when to escalate"
          eyebrow="A guide is a guide. These are the things that warrant a person, not a page." />

        <div className="g-flags">
          {[
            'Bleeding heavily enough to soak through a pad or tampon every hour for several hours.',
            'A cycle that disappears for three months or more, without pregnancy.',
            'Pain that wakes you from sleep, or that does not respond to ibuprofen.',
            'Sudden, severe pelvic pain on one side.',
            'A new lump in the breast or under the arm.',
            'Sudden vision changes alongside headache.',
            'Persistent low mood, particularly with thoughts of self-harm.',
          ].map((f,i) => (
            <div key={i} className="g-flag reveal">
              <span className="g-flag-dot" />
              <span>{f}</span>
            </div>
          ))}
        </div>
        <p className="g-flags-foot">
          If any of these are present, please see a clinician, not us. This
          guide will still be here when you’re back.
        </p>
      </section>

      {/* CH 7 — GLOSSARY */}
      <section className="g-spread" id="glossary">
        <div className="g-folio">
          <span>07 · Glossary</span>
          <span>Plain English</span>
        </div>
        <GuideChapterHead num="07" title="A clean glossary"
          eyebrow="The words people use about your body, in the order you are likely to meet them." />

        <dl className="g-glossary">
          {[
            ['Estrogen',     'The rising tide of the first half. Helps build the uterine lining. Often associated with higher energy, motivation, and mental clarity.'],
            ['Progesterone', 'Raises body temperature and supports the second half of the cycle. Some people feel calmer or experience deeper sleep as it rises.'],
            ['Testosterone', 'Circulates as total and free forms. High levels can drive acne, hair changes, and irregular cycles in PMOS.'],
            ['SHBG',         'A protein that binds sex hormones. Low SHBG often means more free testosterone in circulation.'],
            ['DHEAS',        'An androgen from the adrenal glands. Often checked alongside testosterone in PMOS.'],
            ['Insulin resistance', 'When cells become less responsive to insulin. Common in PMOS, but experienced differently from person to person.'],
            ['Luteal phase', 'The two weeks after ovulation. Where most of the things you call “PMS” live.'],
            ['Follicular phase', 'The two weeks before ovulation. The hopeful half.'],
            ['Anovulatory',  'A cycle without ovulation. Common with PMOS. Not always obvious without tracking.'],
          ].map(([term, def]) => (
            <div key={term} className="g-gl-row">
              <dt>{term}</dt>
              <dd>{def}</dd>
            </div>
          ))}
        </dl>
      </section>

      {/* CH 8 — TRACKER */}
      <section className="g-spread" id="tracker">
        <div className="g-folio">
          <span>08 · Tracker</span>
          <span>A printable page</span>
        </div>
        <GuideChapterHead num="08" title="A cycle tracker, simply"
          eyebrow="Most apps ask too much. Most paper trackers ask too little. This is the one we use." />

        <div className="g-tracker">
          <div className="g-tracker-head">
            <div>
              <div className="g-tracker-l">Month</div>
              <div className="g-tracker-blank" />
            </div>
            <div>
              <div className="g-tracker-l">Cycle day 1 began</div>
              <div className="g-tracker-blank" />
            </div>
            <div>
              <div className="g-tracker-l">Length last month</div>
              <div className="g-tracker-blank" />
            </div>
          </div>

          <div className="g-tracker-grid">
            <div className="g-tracker-cell g-tracker-label"></div>
            {Array.from({length: 28}).map((_, i) => (
              <div key={'d'+i} className="g-tracker-cell g-tracker-day">{i+1}</div>
            ))}
            {['Bleed','Energy 1\u20135','Sleep 1\u20135','Mood 1\u20135','Note'].map(row => (
              <React.Fragment key={row}>
                <div className="g-tracker-cell g-tracker-label">{row}</div>
                {Array.from({length: 28}).map((_, i) => (
                  <div key={row+i} className="g-tracker-cell"></div>
                ))}
              </React.Fragment>
            ))}
          </div>

          <p className="g-tracker-cap">
            Two months of tracking is more useful to a clinician than any
            description. Three is plenty.
          </p>
        </div>
      </section>

      {/* CH 9 — READING */}
      <section className="g-spread" id="reading">
        <div className="g-folio">
          <span>09 · Reading list</span>
          <span>People we trust</span>
        </div>
        <GuideChapterHead num="09" title="Where to read further"
          eyebrow="A short, honest list. We are not the only voice; we don’t want to be." />

        <div className="g-reading">
          <div>
            <h4>Books</h4>
            <ul className="g-list">
              <li><b>Period Repair Manual</b> — Lara Briden, ND</li>
              <li><b>Hormone Intelligence</b> — Aviva Romm, MD</li>
            </ul>
          </div>
          <div>
            <h4>Papers</h4>
            <ul className="g-list">
              <li>Teede et al., <i>International evidence-based guideline for the assessment and management of PMOS</i> (2023)</li>
              <li>Baker &amp; Driver, <i>Circadian rhythms, sleep, and the menstrual cycle</i></li>
            </ul>
          </div>
          <div>
            <h4>A podcast</h4>
            <ul className="g-list">
              <li><b>SHE MD Podcast</b> — Dr. Thaïs Aliabadi &amp; Mary Alice Hane</li>
            </ul>
          </div>
        </div>

        <div className="g-closing">
          <p>
            Thank you for reading. If any of this met you where you are,
            that is more than enough. If it didn’t — write to us. We are
            building Ayla on real letters from real people, and yours is
            the kind we listen for.
          </p>
          <p className="g-sig">— With care, the Ayla team</p>

          <div className="g-closing-cta">
            <a className="btn btn-ghost"
               href={AylaRouter.pathFor('journal')}
               onClick={(e)=>{ e.preventDefault(); setRoute && setRoute('journal', { smoothScroll: true }); }}>
              Read the blog
            </a>
          </div>
        </div>

        <div className="g-colophon">
          <GuideRule />
          <div className="g-colophon-row">
            <div>The Cycle Guide, first edition.</div>
            <div>© 2026 Ayla Wellness</div>
            <div>Set in Cormorant Garamond &amp; Söhne.</div>
          </div>
        </div>
      </section>

    </div>
  );
}

window.Guide = Guide;