// Skin · Ingredients · Humectants vs Emollients — L3 sections (live deploy)
// Visual skeleton identical to oily-sections.jsx. Copy only.

/* ---------- Sidebar ---------- */
function HumectantsVsEmollientsSidebar({ activeId }) {
  return (
    <aside className="l2-nav">
      <div className="l2-nav-h">Browse Beauty</div>

      <div className="l2-sec active open">
        <button className="l2-sec-h">
          <span className="tag"><span className="dot" /> Skin · Ingredients · Humectants vs Emollients</span>
        </button>
        <ul className="l2-sublist">
          {TYPE_SIBLINGS.map((s) => (
            <li key={s.id}>
              <a href={s.href} className={s.cur ? "cur" : ""}>
                {s.title}
              </a>
            </li>
          ))}
        </ul>
      </div>

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

/* ---------- Hero — half-image ---------- */
function HumectantsVsEmollientsHero() {
  return (
    <section className="l4-hero">
      <div className="l4-hero-copy">
        <div className="l4-hero-eyebrow">
          <span>By ingredient</span>
          <span className="bar" />
          <span>Sub-chapter 07</span>
        </div>
        <h1 className="l4-hero-title">
          How to use <em>humectants and emollients.</em>
        </h1>
        <p className="l4-hero-deck">{OILY.deck}</p>
        <div className="l4-hero-meta">
          <span><b>{OILY.meta.count}</b> how-to's</span>
          <span className="dot-sep">·</span>
          <span>{OILY.meta.updated}</span>
          <span className="dot-sep">·</span>
          <span>{OILY.meta.reading}</span>
        </div>
        <div className="l4-hero-byline">{OILY.byline}</div>
      </div>
      <div className="l4-hero-media">
        <img src={OILY.hero} alt={OILY.heroAlt} />
        <span className="l4-hero-tag">Ingredients · Sub-chapter 07</span>
      </div>
    </section>
  );
}

/* ---------- Type sibling rail ---------- */
function TypeRail() {
  return (
    <nav className="trail" aria-label="Ingredients">
      <span className="trail-eb">Other ingredients</span>
      {TYPE_SIBLINGS.map((s) => (
        <a key={s.id} href={s.href} className={`trail-item ${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>
  );
}

/* ---------- Editor's intro paragraph (SEO weight) ---------- */
function EditorIntro() {
  return (
    <section className="ed-intro">
      <div className="ed-intro-rail">
        <span className="ed-rail-num">§</span>
        <span className="ed-rail-label">Editor's note</span>
      </div>
      <nav className="anchor-nav" aria-label="Jump to section">
        <a href="#hyaluronic-acid">Hyaluronic acid</a>
        <span className="dot-sep">·</span>
        <a href="#squalane">Squalane</a>
      </nav>
      <p className="ed-intro-body">{OILY.intro}</p>
      <div className="ed-intro-sig">
        <span className="ed-sig-line">— Nelly,</span>
        <span className="ed-sig-role">Beauty &amp; Style Director</span>
      </div>
    </section>
  );
}

/* ---------- Quick facts — definition + myth/fact ---------- */
function QuickFacts() {
  return (
    <div className="qf">
      <div className="qf-defn">
        <div className="qf-eyebrow">Definition · Plain English</div>
        <h3>{QUICK_FACTS.defn.h}</h3>
        <p>{QUICK_FACTS.defn.body}</p>
      <div className="qf-anchors">
        <h3 id="hyaluronic-acid">Hyaluronic acid</h3>
        <p>Hyaluronic acid is a humectant — it draws water toward the skin surface and binds it there. It does not add water from nothing; it draws from the environment and from deeper skin layers. In low humidity, apply to damp skin and seal immediately with an emollient. Multiple molecular weights in one formula penetrate to different depths.</p>
        <h3 id="squalane">Squalane</h3>
        <p>Squalane is an emollient — it sits on the skin surface and slows the evaporation of water. It is skin-identical, non-comedogenic, and well-tolerated across skin types including oily. Plant-derived squalane from olives or sugarcane is the standard. Applied after serums, before bed, it seals in everything underneath it.</p>
      </div>
      </div>
      <div className="qf-myths">
        <div className="qf-eyebrow">Myth, meet fact</div>
        <ul>
          {QUICK_FACTS.myths.map((m, i) => (
            <li key={i}>
              <div className="qf-m"><span className="lbl">Myth</span> {m.m}</div>
              <div className="qf-t"><span className="lbl">Fact</span> {m.t}</div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

/* ---------- Beginner's path ---------- */
function BeginnerPath() {
  const linkedSteps = useHubArticleLinks(BEGINNER_PATH.steps);

  return (
    <div className="bp">
      <div className="bp-head">
        <h3>{BEGINNER_PATH.h}</h3>
        <p className="bp-deck">{BEGINNER_PATH.deck}</p>
      </div>
      <ol className="bp-steps">
        {linkedSteps.map((s, i) => (
          <li key={i}>
            <a href={s.href || "#"} className={`bp-step ${s.isBuilt ? "is-built" : "is-queued"}`}>
              <span className="bp-n">{s.n}</span>
              <div className="bp-body">
                <h4>{s.t}</h4>
                <p>{s.note}</p>
              </div>
              <span className="bp-time">{s.time}</span>
              <span className="bp-arr" aria-hidden>→</span>
            </a>
          </li>
        ))}
      </ol>
      <a href="#" className="bp-cta">
        Read the whole sequence in order <span aria-hidden>→</span>
      </a>
    </div>
  );
}

/* ---------- Trending 5 ---------- */
function Trending() {
  const linkedTrending = useHubArticleLinks(TRENDING);

  return (
    <div className="trending">
      <div className="trending-head">
        <span className="tr-pulse" aria-hidden>
          <span className="tr-pulse-dot" />
          <span className="tr-pulse-ring" />
        </span>
        <span className="tr-label">Updated hourly · By search volume this week</span>
      </div>
      <ol className="trending-list">
        {linkedTrending.map((t, i) => (
          <li key={i}>
            <a href={t.href || "#"} className={`tr-item ${t.isBuilt ? "is-built" : "is-queued"}`}>
              <span className="tr-rank">{t.rank}</span>
              <div className="tr-img">
                <img src={t.img} alt="" />
              </div>
              <div className="tr-body">
                <h4>{t.t}</h4>
                <div className="tr-meta">
                  <span>{t.auth}</span>
                  <span className="dot">·</span>
                  <span>{t.date}</span>
                  <span className="dot">·</span>
                  <span>{t.time} read</span>
                </div>
              </div>
              <div className="tr-reads">
                <b>{t.reads}</b>
                <span>reads</span>
              </div>
              <span className="tr-arr" aria-hidden>→</span>
            </a>
          </li>
        ))}
      </ol>
    </div>
  );
}

/* ---------- Format guide ---------- */
function FormatGuide() {
  return (
    <div className="fg">
      <div className="fg-head">
        <h3>{FORMAT_GUIDE.h}</h3>
        <p className="fg-deck">{FORMAT_GUIDE.deck}</p>
      </div>
      <table className="fg-table">
        <thead>
          <tr>
            <th>Format</th>
            <th>When to reach for it</th>
            <th>When to avoid</th>
            <th>Verdict</th>
          </tr>
        </thead>
        <tbody>
          {FORMAT_GUIDE.formats.map((f, i) => (
            <tr key={i}>
              <td className="fg-name"><b>{f.name}</b><span className="fg-note">{f.note}</span></td>
              <td>{f.when}</td>
              <td className="fg-avoid">{f.avoid}</td>
              <td className="fg-verdict">{f.verdict}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ---------- All how-tos with filter / sort ---------- */
function HowToLibrary({ cardStyle = "editorial" }) {
  const [sort, setSort] = React.useState("Editor's pick");
  const [tech, setTech] = React.useState("All");
  const [time, setTime] = React.useState("Any");

  const list = React.useMemo(() => {
    let arr = HOWTOS.slice();
    if (tech !== "All") arr = arr.filter(h => h.tech === tech);
    if (time === "<3 min") arr = arr.filter(h => h.time < 3);
    else if (time === "3–5 min") arr = arr.filter(h => h.time >= 3 && h.time <= 5);
    else if (time === "5+ min") arr = arr.filter(h => h.time > 5);
    if (sort === "Newest") arr.sort((a, b) => b.date.localeCompare(a.date));
    else if (sort === "Most-read") arr.sort(() => 0);
    else if (sort === "Editor's pick") arr.sort((a, b) => (b.pick === true) - (a.pick === true));
    return arr.slice(0, 6);
  }, [sort, tech, time]);

  const linkedList = useHubArticleLinks(list);


  return (
    <div className="lib">
      <div className="lib-bar">
        <div className="lib-group">
          <span className="lib-glabel">Sort</span>
          <div className="lib-pills">
            {["Editor's pick", "Newest", "Most-read"].map(s => (
              <button key={s} className={`lib-pill ${sort === s ? "on" : ""}`} onClick={() => setSort(s)}>{s}</button>
            ))}
          </div>
        </div>
        <div className="lib-group">
          <span className="lib-glabel">Technique</span>
          <div className="lib-pills">
            {TECH_FILTERS.map(s => (
              <button key={s} className={`lib-pill ${tech === s ? "on" : ""}`} onClick={() => setTech(s)}>{s}</button>
            ))}
          </div>
        </div>
        <div className="lib-group">
          <span className="lib-glabel">Reading time</span>
          <div className="lib-pills">
            {["Any", "<3 min", "3–5 min", "5+ min"].map(s => (
              <button key={s} className={`lib-pill ${time === s ? "on" : ""}`} onClick={() => setTime(s)}>{s}</button>
            ))}
          </div>
        </div>
      </div>

      <div className={`lib-grid lib-${cardStyle}`}>
        {linkedList.map((h, i) => (
          <a key={i} href={h.href || "#"} className={`lib-card ${h.isBuilt ? "is-built" : "is-queued"}`}>
            {cardStyle !== "list" && (
              <div className="lib-img">
                <img src={h.img} alt="" />
                <span className="lib-kick">{h.kick}</span>
                {h.pick && <span className="lib-pick">Editor's pick</span>}
              </div>
            )}
            <div className="lib-text">
              {cardStyle === "list" && <span className="lib-num">{String(i + 1).padStart(2, "0")}</span>}
              <h4>{h.t}</h4>
              <div className="lib-meta">
                <span>{h.auth}</span>
                <span className="dot">·</span>
                <span>{h.time} min read</span>
                <span className="dot">·</span>
                <span>{h.tech}</span>
              </div>
            </div>
          </a>
        ))}
        {list.length === 0 && (
          <div className="lib-empty">
            No matches with these filters. <button className="lk" onClick={() => { setTech("All"); setTime("Any"); }}>Reset</button>
          </div>
        )}
      </div>

      <div className="lib-foot">
        <div className="lib-foot-l">
          Showing <b>{list.length}</b> of <b>{OILY.totalCount}</b> how-to's on humectants and emollients.
        </div>
        <a href="#" className="lib-browse">
          Browse all {OILY.totalCount} <span aria-hidden>→</span>
        </a>
      </div>
    </div>
  );
}

/* ---------- Crosslinks to other ingredients ---------- */
function TypeCrosslinks() {
  return (
    <div className="xl">
      {TYPE_CROSSLINKS.map((x) => (
        <a key={x.id} href={x.href} className="xl-card">
          <div className="xl-num">{TYPE_SIBLINGS.find(t => t.id === x.id)?.n}</div>
          <h4>{x.title}</h4>
          <p className="xl-deck">{x.deck}</p>
          <div className="xl-foot">
            <span>{x.count} how-to's</span>
            <span className="xl-arr" aria-hidden>→</span>
          </div>
        </a>
      ))}
    </div>
  );
}

/* ---------- Next ---------- */
function HumectantsVsEmollientsNext() {
  return (
    <div className="shelf">
      <a href="/en/skin/ingredients/peptides/" className="shelf-card prev">
        <div className="shelf-dir">← Previous sub-chapter</div>
        <div className="shelf-t">Peptides</div>
      </a>
      <a href="/en/skin/ingredients/the-brightening-pair/" className="shelf-card next">
        <div className="shelf-dir">Next sub-chapter →</div>
        <div className="shelf-t">The Brightening Pair</div>
      </a>
    </div>
  );
}

Object.assign(window, {
  HumectantsVsEmollientsSidebar, HumectantsVsEmollientsHero, TypeRail, EditorIntro, QuickFacts, BeginnerPath, Trending, FormatGuide, HowToLibrary, TypeCrosslinks, HumectantsVsEmollientsNext,
});