// Hair L2 — hero, subcategory renderers, profile finder, sequence, seasonal, myths, faq, related, reads

function HairHero({ variant = "cinematic" }) {
  return (
    <section className="l2-hero reveal">
      {variant !== "text" && (
        <div className="l2-hero-media">
          <img src={HAIR.hero} alt={HAIR.heroAlt} />
          <div className="l2-hero-tag">Hair · The Feature</div>
          <div className="l2-hero-issue">
            <span>{HAIR.issue}</span>
            Spring / Summer · 2026
          </div>
          <div className="l2-hero-cap">
            <div className="l2-hero-credit">
              Photographed by <b>Inez Hartley</b> · Talent: <b>Anouk D.</b>
            </div>
            <div className="l2-hero-credit" style={{textAlign:"right"}}>
              44 child hubs<br />
              7 axes
            </div>
          </div>
        </div>
      )}
      <div className="l2-hero-copy">
        <div>
          <div className="eyebrow">Chapter Index · Hair</div>
          <h1 className="l2-hero-title">
            The <em>Hair</em><br />Chapter.
          </h1>
        </div>
        <div className="l2-hero-body">
          <p className="l2-hero-deck">
            Hair is <em>where the routine you keep</em> stops being a routine and becomes a habit you can feel in your hands. This is the part of Beauty Edition where we sort by type, concern, cut, colour, routine, technique and ingredients — and stop pretending one regimen suits every head.
          </p>
          <p>
            Start anywhere. Whether you have ten minutes and a wide-tooth comb, or you're rebuilding after a season of bleach and sun — this chapter is for you. We've split things into seven honest axes. Read them in order if you like, or skip to the one your ends 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 HairSubcats({ layout }) {
  if (layout === "cards") {
    return (
      <div className="sc-cards reveal">
        {SUBCATS.map((s) => (
          <a key={s.id} id={s.id} className="sc-card" href={s.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={s.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={s.href}>{ss} <span className="arr" aria-hidden>→</span></a></li>
              ))}
            </ul>
            <a href={s.href} className="spread-more">
              Enter the {s.title.toLowerCase()} chapter <span aria-hidden>→</span>
            </a>
          </div>
        </article>
      ))}
    </div>
  );
}

// ---------- Hair Profile Finder ----------
function HairQuiz() {
  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.air;
  }, [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 starting point</div>
            <h3>What kind of <em>hair</em> are we actually working with?</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 your scalp is sore, flaking, or shedding more than usual, 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="#moisture-repair" style={{textDecoration:"none"}}>
                    Enter the hair chapter <span aria-hidden>→</span>
                  </a>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Hair Care Sequence (Wash Day / Between Washes) ----------
function HairSequenceBuilder() {
  return (
    <div className="rb reveal">
      <div className="rb-col">
        <div className="rb-h">
          <span className="big">Wash Day</span>
          <div className="sub">Order of operations<br /><b>The full ritual</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. Scalp first, ends last, mask only where the hair is actually thirsty." — Nelly</div>
      </div>
      <div className="rb-col pm">
        <div className="rb-h">
          <span className="big">Between Washes</span>
          <div className="sub">Maintenance ritual<br /><b>Day two and beyond</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">A silk pillowcase does more than three new products ever will. Tomorrow's hair gets made tonight.</div>
      </div>
    </div>
  );
}

// ---------- Seasonal ----------
function HairSeasonal() {
  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 HairMyths() {
  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 HairFAQSection() {
  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 HairRelated() {
  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 HairReads() {
  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 HairSectionHead({ 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 HairNextShelf() {
  return (
    <div className="shelf reveal">
      <h3>Next up: <em>Makeup.</em> Where everything skin and hair have been quietly building toward finally meets the light.</h3>
      <a className="shelf-cta" href="/">Back to the edition <span aria-hidden>→</span></a>
    </div>
  );
}

Object.assign(window, { HairHero, HairSubcats, HairQuiz, HairSequenceBuilder, HairSeasonal, HairMyths, HairFAQSection, HairRelated, HairReads, HairSectionHead, HairNextShelf });