// Skin L2 — hero, subcategory renderers, quiz, routine, seasonal, myths, faq, related, reads

function SkinHero({ variant = "cinematic" }) {
  return (
    <section className="l2-hero reveal">
      {variant !== "text" && (
        <div className="l2-hero-media">
          <img src={SKIN.hero} alt={SKIN.heroAlt} />
          <div className="l2-hero-tag">Skin · The Feature</div>
          <div className="l2-hero-issue">
            <span>{SKIN.issue}</span>
            Spring / Summer · 2026
          </div>
          <div className="l2-hero-cap">
            <div className="l2-hero-credit">
              Photographed by <b>Ida Mori</b> · Talent: <b>Leila V.</b>
            </div>
            <div className="l2-hero-credit" style={{textAlign:"right"}}>
              109 techniques<br />
              5 chapters
            </div>
          </div>
        </div>
      )}
      <div className="l2-hero-copy">
        <div>
          <div className="eyebrow">Chapter Index · Skin</div>
          <h1 className="l2-hero-title">
            The <em>Skin</em><br />Chapter.
          </h1>
        </div>
        <div className="l2-hero-body">
          <p className="l2-hero-deck">
            Skincare <em>doesn't have to be complicated</em> — it just has to be yours. This is the part of Beauty Edition where we slow down and work out what your skin is actually asking for.
          </p>
          <p>
            Start anywhere. Whether you have ninety seconds in the morning and a prayer, or you're building a routine from scratch because nothing's working the way it used to — this chapter is for you. We've split things into five small, honest sub-chapters. Read them in order if you like. Or jump to the one you skipped for years, and forgive yourself.
          </p>
          <p>
            No gimmicks, no miracle claims, no medical advice dressed up as lifestyle. 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>
  );
}

// ---------- Skin Quiz ----------
function SkinQuiz() {
  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;
    // naive mapping for demo
    const [a1, a2, a3] = answers;
    if (a2 === "react") return QUIZ_RESULTS.sensitive;
    if (a1 === "mixed") return QUIZ_RESULTS.combination;
    if (a1 === "shiny") return QUIZ_RESULTS.oily;
    if (a1 === "tight" || a3 === "soon") return QUIZ_RESULTS.dry;
    return QUIZ_RESULTS.combination;
  }, [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 footing</div>
            <h3>What is your <em>skin</em> actually doing?</h3>
            <p>Three questions, thirty seconds. We don't save your answers — this is a starting point, not a diagnosis.</p>
            <p className="note">If anything on your skin feels new, painful, or persistent, talk to a dermatologist. 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} skin.</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={`#${result.name.toLowerCase() === "combination" ? "moisturising" : "moisturising"}`} style={{textDecoration:"none"}}>
                    Browse for {result.name.toLowerCase()} <span aria-hidden>→</span>
                  </a>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Routine builder ----------
function RoutineBuilder() {
  return (
    <div className="rb reveal">
      <div className="rb-col">
        <div className="rb-h">
          <span className="big">AM</span>
          <div className="sub">Order of operations<br /><b>The morning five</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">"If you only get three of these, make them cleanser, moisturiser, SPF. The other two are decoration." — Nelly</div>
      </div>
      <div className="rb-col pm">
        <div className="rb-h">
          <span className="big">PM</span>
          <div className="sub">Order of operations<br /><b>The evening reset</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">Treatments are an "or" not an "and." One at a time, or you're just arguing with your face.</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>Makeup.</em> Because the two never really stopped being in conversation.</h3>
      <a className="shelf-cta" href="/">Back to the edition <span aria-hidden>→</span></a>
    </div>
  );
}

Object.assign(window, { SkinHero, Subcats, SkinQuiz, RoutineBuilder, Seasonal, Myths, FAQSection, Related, Reads, SectionHead, NextShelf });