// Body L2 — hero, subcategory renderers, ritual finder, sequence, seasonal, myths, faq, related, reads

function BodyHero({ variant = "cinematic" }) {
  return (
    <section className="l2-hero reveal">
      {variant !== "text" && (
        <div className="l2-hero-media">
          <img src={BODY.hero} alt={BODY.heroAlt} />
          <div className="l2-hero-tag">Body · The Feature</div>
          <div className="l2-hero-issue">
            <span>{BODY.issue}</span>
            Spring / Summer · 2026
          </div>
          <div className="l2-hero-cap">
            <div className="l2-hero-credit">
              Photographed by <b>Sasha Quinn</b> · Talent: <b>Maren O.</b>
            </div>
            <div className="l2-hero-credit" style={{textAlign:"right"}}>
              97 techniques<br />
              5 chapters
            </div>
          </div>
        </div>
      )}
      <div className="l2-hero-copy">
        <div>
          <div className="eyebrow">Chapter Index · Body</div>
          <h1 className="l2-hero-title">
            The <em>Body</em><br />Chapter.
          </h1>
        </div>
        <div className="l2-hero-body">
          <p className="l2-hero-deck">
            Body care is <em>where the routine you keep</em> stops being a routine and starts being a habit. This is the part of Beauty Edition where we look after everything below the jawline — and stop pretending it doesn't matter.
          </p>
          <p>
            Start anywhere. Whether you have ninety seconds in the morning and a robe, or you're rebuilding a full evening ritual because the year asked too much of you — this chapter is for you. We've split things into five small, honest sub-chapters. Read them in order if you like. Or skip to the one your shoulders have been quietly asking for.
          </p>
          <p>
            No miracle claims, no medical advice in lifestyle clothing, no shame about what's been ignored. Just the techniques, told plainly, with the why next to the how.
          </p>
          <div className="l2-hero-signoff">
            Written by <b>Nelly</b> · Edited by the How To desk
          </div>
        </div>
      </div>

      <div className="chapters">
        {SUBCATS.map((s) => (
          <a key={s.id} href={`#${s.id}`} className="chapter">
            <span className="cn">{s.n}</span>
            {s.title}
          </a>
        ))}
      </div>
    </section>
  );
}

// Subcategory renderer — three layouts
function Subcats({ layout }) {
  if (layout === "cards") {
    return (
      <div className="sc-cards reveal">
        {SUBCATS.map((s) => (
          <a key={s.id} id={s.id} className="sc-card" href="#">
            <img src={s.img} alt="" />
            <span className="cn">{s.n}</span>
            <div className="body">
              <h3>{s.title}</h3>
              <p className="sd">{s.deck}</p>
              <span className="cta">Explore {s.title.toLowerCase()} <span aria-hidden>→</span></span>
            </div>
          </a>
        ))}
      </div>
    );
  }
  if (layout === "rows") {
    return (
      <div className="sc-rows reveal">
        {SUBCATS.map((s) => (
          <a key={s.id} id={s.id} className="sc-row" href="#">
            <span className="rn">{s.n}</span>
            <div className="thumb"><img src={s.img} alt="" /></div>
            <div>
              <div className="rt">{s.title}</div>
              <div className="rd">{s.deck}</div>
            </div>
            <div className="rtags">
              {s.subs.slice(0, 3).map((t) => <span key={t}>{t}</span>)}
            </div>
            <span className="rarr">Enter <span aria-hidden>→</span></span>
          </a>
        ))}
      </div>
    );
  }
  // default: spreads
  return (
    <div>
      {SUBCATS.map((s, i) => (
        <article key={s.id} id={s.id} className={`spread reveal ${i % 2 === 1 ? "flip" : ""}`}>
          <div className="spread-media">
            <img src={s.img} alt="" />
            <span className="figtag">Fig. {s.n}</span>
            <span className="figcap">{s.figcap}</span>
          </div>
          <div className="spread-copy">
            <div className="eyebrow">{s.tag} · {s.count}</div>
            <div className="ch-n">{s.n}</div>
            <h3>{s.title}</h3>
            <p className="sd">{s.deck}</p>
            <p className="body">{s.body}</p>
            <blockquote className="pull">{s.pull}<br /><span style={{fontStyle:"normal", fontFamily:"var(--font-mono)", fontSize: 10, letterSpacing:".22em", textTransform:"uppercase", color:"var(--ink-3)"}}>— Nelly</span></blockquote>
            <ul className="spread-subs">
              <li className="eb">Inside this chapter</li>
              {s.subs.map((ss) => (
                <li key={ss}><a href="#">{ss} <span className="arr" aria-hidden>→</span></a></li>
              ))}
            </ul>
            <a href="#" className="spread-more">
              Enter the {s.title.toLowerCase()} chapter <span aria-hidden>→</span>
            </a>
          </div>
        </article>
      ))}
    </div>
  );
}

// ---------- Body Ritual Finder ----------
function BodyQuiz() {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState([]);
  const total = QUIZ_STEPS.length;
  const done = step >= total;

  const choose = (v) => setAnswers((a) => { const next = [...a]; next[step] = v; return next; });
  const selected = answers[step];

  const result = React.useMemo(() => {
    if (!done) return null;
    const tally = answers.reduce((acc, v) => { acc[v] = (acc[v] || 0) + 1; return acc; }, {});
    const top = Object.keys(tally).sort((a, b) => tally[b] - tally[a])[0];
    return QUIZ_RESULTS[top] || QUIZ_RESULTS.fast;
  }, [done, answers]);

  const reset = () => { setStep(0); setAnswers([]); };

  return (
    <div className="quiz-sec">
      <div className="quiz-wrap">
        <div className="quiz">
          <div className="quiz-intro">
            <div className="eyebrow">Find your ritual</div>
            <h3>What kind of <em>body</em> ritual fits your week?</h3>
            <p>Three questions, thirty seconds. We don't save your answers — this is a starting point, not a verdict.</p>
            <p className="note">If anything on your body feels new, painful, or persistent, talk to a clinician. We'll be here.</p>
            <div className="quiz-steps">
              {QUIZ_STEPS.map((_, i) => (
                <span key={i} className={i < step || done ? "done" : i === step ? "cur" : ""}>
                  0{i + 1}
                </span>
              ))}
              <span className={done ? "cur" : ""}>Result</span>
            </div>
          </div>

          <div className="quiz-card">
            {!done ? (
              <>
                <div className="qc-head">
                  <span>Question 0{step + 1} of 0{total}</span>
                  <span>{Math.round(((step) / total) * 100)}%</span>
                </div>
                <h4 className="qc-q">{QUIZ_STEPS[step].q}</h4>
                <div className="qc-opts">
                  {QUIZ_STEPS[step].a.map((o) => (
                    <button key={o.v}
                      className="qc-opt"
                      data-on={selected === o.v ? "1" : "0"}
                      onClick={() => choose(o.v)}>
                      <span className="pip" />
                      {o.l}
                    </button>
                  ))}
                </div>
                <div className="qc-foot">
                  <button className="qc-back" onClick={() => setStep(s => Math.max(0, s - 1))} disabled={step === 0}>← Back</button>
                  <button className="qc-next" disabled={!selected} onClick={() => setStep(s => s + 1)}>
                    {step === total - 1 ? "See result" : "Next"} <span aria-hidden>→</span>
                  </button>
                </div>
              </>
            ) : (
              <div className="qc-result">
                <span className="rtag">Your starting point</span>
                <h4>{result.name}.</h4>
                <p className="verdict">{result.quote}</p>
                <div className="recs">
                  {result.recs.map((r, i) => (
                    <a key={r} href="#">
                      <span className="rn">0{i + 1}</span>
                      <span>{r}</span>
                      <span className="rarr">Read →</span>
                    </a>
                  ))}
                </div>
                <div className="qc-foot">
                  <button className="qc-back" onClick={reset}>↺ Start over</button>
                  <a className="qc-next" href="#body-care" style={{textDecoration:"none"}}>
                    Enter the body chapter <span aria-hidden>→</span>
                  </a>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Body Care Sequence (Day / Night) ----------
function SequenceBuilder() {
  return (
    <div className="rb reveal">
      <div className="rb-col">
        <div className="rb-h">
          <span className="big">Day</span>
          <div className="sub">Order of operations<br /><b>The full-body sequence</b></div>
        </div>
        <ol className="rb-list">
          {AM_ROUTINE.map((s, i) => (
            <li key={i} className="rb-step">
              <span className="num">0{i + 1}</span>
              <div>
                <span className="t">{s.t}</span>
                <span className="d">{s.d}</span>
              </div>
              <span className="wait">Wait {s.wait}</span>
            </li>
          ))}
        </ol>
        <div className="rb-note">"The order matters more than the products. Nothing on broken skin, nothing under fresh tan, nothing rushed in front of the mirror." — Nelly</div>
      </div>
      <div className="rb-col pm">
        <div className="rb-h">
          <span className="big">Night</span>
          <div className="sub">Restorative ritual<br /><b>The wind-down</b></div>
        </div>
        <ol className="rb-list">
          {PM_ROUTINE.map((s, i) => (
            <li key={i} className="rb-step">
              <span className="num">0{i + 1}</span>
              <div>
                <span className="t">{s.t}</span>
                <span className="d">{s.d}</span>
              </div>
              <span className="wait">Wait {s.wait}</span>
            </li>
          ))}
        </ol>
        <div className="rb-note">Twenty minutes in the bath does more than two new products ever will. Set the timer. Don't bring the phone.</div>
      </div>
    </div>
  );
}

// ---------- Seasonal ----------
function Seasonal() {
  return (
    <div className="seasons reveal">
      {SEASONS.map((s) => (
        <a key={s.name} href="#" className="season">
          <img src={s.img} alt="" />
          <div className="season-body">
            <span className="mo">{s.mo}</span>
            <div>
              <h4>{s.name}.</h4>
              <p>{s.note}</p>
            </div>
          </div>
        </a>
      ))}
    </div>
  );
}

// ---------- Myths ----------
function Myths() {
  return (
    <div className="myths reveal">
      {MYTHS.map((m, i) => (
        <div key={i} className="myth">
          <div className="myth-tag"><span className="m">Myth</span> · <span className="v">Vs. Fact</span></div>
          <p className="myth-claim">"{m.m}"</p>
          <p className="myth-truth">{m.t}</p>
        </div>
      ))}
    </div>
  );
}

// ---------- FAQ ----------
function FAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq reveal">
      {FAQ.map((f, i) => (
        <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
          <button className="faq-q" onClick={() => setOpen(o => o === i ? -1 : i)}>
            <span className="faq-num">0{i + 1}</span>
            <span style={{flex:"0 1 auto", textAlign:"left", maxWidth:"36ch", marginLeft: 24}}>{f.q}</span>
            <span className="faq-plus">+</span>
          </button>
          <div className="faq-a">
            <p>{f.a}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

// ---------- Related SEO wall ----------
function Related() {
  return (
    <div className="rel reveal">
      {RELATED.map((col) => (
        <div key={col.h} className="rel-col">
          <h4>{col.h}</h4>
          <ul>
            {col.links.map((l) => (
              <li key={l.t}><a href="#">{l.t}<span className="ct">{l.c}</span></a></li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

// ---------- Reads ----------
function Reads() {
  return (
    <div className="reads reveal">
      {READS.map((r) => (
        <a key={r.t} className="read" href="#">
          <div className="read-img">
            <img src={r.img} alt="" />
            <span className="kick">{r.kick}</span>
          </div>
          <h4>{r.t}</h4>
          <div className="meta">
            <span>By {r.auth}</span>
            <span className="sep">·</span>
            <span>{r.time} read</span>
          </div>
        </a>
      ))}
    </div>
  );
}

function SectionHead({ n, chapter, eyebrow, h, link }) {
  return (
    <header className="l2-sec-head">
      <div className="chap">{n}</div>
      <div>
        <span className="eyebrow">{eyebrow}</span>
        <h2>{h}</h2>
      </div>
      {link ? <a className="hl" href="#">{link} <span aria-hidden>→</span></a> : <span />}
    </header>
  );
}

function NextShelf() {
  return (
    <div className="shelf reveal">
      <h3>Next up: <em>Hair.</em> Where every lesson the body taught — circulation, patience, the right amount of oil — finally pays off.</h3>
      <a className="shelf-cta" href="/">Back to the edition <span aria-hidden>→</span></a>
    </div>
  );
}

Object.assign(window, { BodyHero, Subcats, BodyQuiz, SequenceBuilder, Seasonal, Myths, FAQSection, Related, Reads, SectionHead, NextShelf });