// Moisturising L3 — components

function MoistHero() {
  return (
    <section className="l3-hero reveal">
      <div className="l3-hero-media">
        <img src={MOIST.hero} alt={MOIST.heroAlt} />
        <span className="l3-hero-tag">{MOIST.issue}</span>
      </div>
      <div className="l3-hero-copy">
        <div className="eyebrow">Skin · Moisturising</div>
        <h1 className="l3-hero-title">
          <em>Moisturising.</em>
        </h1>
        <p className="l3-hero-deck">
          Hydration as a habit, not a rescue mission. Your moisturiser's job is dull and wonderful — <em>hold what you already have.</em>
        </p>
        <p className="l3-hero-body">
          There are four small sub-chapters below, sorted by what your skin actually feels like today. Start with the one that sounds most like your face by 3pm. The techniques carry across; the products don't.
        </p>
        <div className="l3-hero-meta">
          <span><b>4</b> sub-chapters</span>
          <span><b>31</b> techniques</span>
          <span><b>Nelly</b>, edited by the How To desk</span>
        </div>
      </div>
    </section>
  );
}

// Chapter rail (siblings) — consistent chrome with L2
function SiblingRail() {
  return (
    <nav className="siblings reveal" aria-label="Skin chapters">
      {SIBLINGS.map((s) => (
        <a key={s.id} href={s.cur ? "#top" : "/en/skin/#" + s.id} className={`sib ${s.cur ? "cur" : ""}`}>
          <span className="cn">{s.n}</span>
          <span className="ct">{s.title}</span>
          {s.cur && <span className="here">You are here</span>}
        </a>
      ))}
    </nav>
  );
}

// Type spreads — 4 skin-type sub-chapters
function TypeSpreads() {
  return (
    <div>
      {MOIST_TYPES.map((s, i) => (
        <article key={s.id} id={s.id} className={`tspread reveal ${i % 2 === 1 ? "flip" : ""}`}>
          <div className="tspread-media">
            <img src={s.img} alt="" />
            <span className="figtag">Fig. {s.n}</span>
            <span className="figcap">{s.figcap}</span>
          </div>
          <div className="tspread-copy">
            <div className="eyebrow">{s.tag}</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 className="byline">— Nelly</span>
            </blockquote>

            <div className="howto-list">
              <div className="howto-h">
                <span>How to · Teasers</span>
                <span>{s.howTos.length} techniques</span>
              </div>
              {s.howTos.map((h, j) => (
                <a key={j} href="#" className="howto">
                  <span className="hn">0{j + 1}</span>
                  <span className="ht">{h.t}</span>
                  <span className="hm">{h.time}</span>
                  <span className="harr" aria-hidden>→</span>
                </a>
              ))}
            </div>

            <a href="#" className="tspread-more">
              Enter the {s.title.toLowerCase()} chapter <span aria-hidden>→</span>
            </a>
          </div>
        </article>
      ))}
    </div>
  );
}

// Layering technique inline — diagram-style
function LayerTechnique() {
  return (
    <div className="ltq reveal">
      <div className="ltq-head">
        <div className="ltq-kicker">The technique</div>
        <h3>{LAYER_TECHNIQUE.title}</h3>
        <p className="ltq-deck">{LAYER_TECHNIQUE.deck}</p>
      </div>
      <ol className="ltq-steps">
        {LAYER_TECHNIQUE.steps.map((s, i) => (
          <li key={i} className="ltq-step">
            <span className="ltq-n">0{i + 1}</span>
            <div className="ltq-b">
              <span className="ltq-t">{s.t}</span>
              <span className="ltq-d">{s.d}</span>
            </div>
            <span className="ltq-layer" aria-hidden />
          </li>
        ))}
      </ol>
      <div className="ltq-foot">
        "Stop trying to rub it in. Press it into the face and walk away for a minute." — <b>Nelly</b>
      </div>
    </div>
  );
}

function MoistFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq reveal">
      {MOIST_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>
  );
}

function MoistReads() {
  return (
    <div className="reads reveal">
      {MOIST_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 MoistRelated() {
  return (
    <div className="rel reveal">
      {MOIST_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>
  );
}

function MoistNext() {
  return (
    <div className="shelf reveal">
      <h3>Next chapter: <em>Exfoliation.</em> Less, but better — less often, and with more thought.</h3>
      <a className="shelf-cta" href="/en/skin/#exfoliation">Continue reading <span aria-hidden>→</span></a>
    </div>
  );
}

// Mini sidebar: inside Moisturising we show 4 skin types as the active list
function MoistSidebar({ activeId }) {
  const [open, setOpen] = React.useState(true);
  return (
    <aside className="l2-nav">
      <div className="l2-nav-h">Browse Beauty</div>

      <div className={`l2-sec active ${open ? "open" : ""}`}>
        <button className="l2-sec-h" onClick={() => setOpen(o => !o)}>
          <span className="tag"><span className="dot" /> Skin · Moisturising</span>
          <span className="caret">
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
        </button>
        <ul className="l2-sublist">
          {MOIST_TYPES.map((s) => (
            <li key={s.id}>
              <a href={`#${s.id}`} className={activeId === s.id ? "cur" : ""}>
                {s.title}
              </a>
            </li>
          ))}
        </ul>
      </div>

      {SIBLINGS.filter(s => !s.cur).map((s) => (
        <div key={s.id} className="l2-sec">
          <button className="l2-sec-h" onClick={() => {}}>
            <span className="tag">{s.title}</span>
            <span className="caret">
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
          </button>
        </div>
      ))}

      {SIDEBAR_OTHER.map((o) => (
        <div key={o.label} className="l2-sec">
          <button className="l2-sec-h" onClick={() => {}}>
            <span className="tag">{o.label}</span>
            <span className="caret">
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
          </button>
        </div>
      ))}

      <div className="l2-nav-foot">
        <a href="/en/skin/">← Back to Skin</a>
        <a href="/">Home</a>
      </div>
    </aside>
  );
}

Object.assign(window, {
  MoistHero, SiblingRail, TypeSpreads, LayerTechnique, MoistFAQ, MoistReads, MoistRelated, MoistNext, MoistSidebar,
});