// Hair · Technique · Curly Finishing — L3 sections (COMBINED PAGE)
// Anchors: #plop, #seal

/* ---------- Sidebar ---------- */
function CurlyFinishingSidebar({ 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" /> Hair · Technique · Curly Finishing</span>
        </button>
        <ul className="l2-sublist">
          {TECHNIQUE_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/hair/technique/">← Back to Technique</a>
        <a href="/en/hair/">Hair index</a>
        <a href="/">Home</a>
      </div>
    </aside>
  );
}

/* ---------- Hero ---------- */
function CurlyFinishingHero() {
  return (
    <section className="l4-hero">
      <div className="l4-hero-copy">
        <div className="l4-hero-eyebrow">
          <span>By technique</span>
          <span className="bar" />
          <span>Sub-chapter 03</span>
        </div>
        <h1 className="l4-hero-title">
          How to finish <em>curly hair.</em>
        </h1>
        <p className="l4-hero-deck">{CURLY_FINISHING.deck}</p>
        <div className="l4-hero-meta">
          <span><b>{CURLY_FINISHING.meta.count}</b> how-to's</span>
          <span className="dot-sep">·</span>
          <span>{CURLY_FINISHING.meta.updated}</span>
          <span className="dot-sep">·</span>
          <span>{CURLY_FINISHING.meta.reading}</span>
        </div>
        <div className="l4-hero-byline">{CURLY_FINISHING.byline}</div>
      </div>
      <div className="l4-hero-media">
        <img src={CURLY_FINISHING.hero} alt={CURLY_FINISHING.heroAlt} />
        <span className="l4-hero-tag">Technique · Sub-chapter 03</span>
      </div>
    </section>
  );
}

/* ---------- Sibling rail ---------- */
function TechniqueRail() {
  return (
    <nav className="trail" aria-label="Hair techniques">
      <span className="trail-eb">Other techniques</span>
      {TECHNIQUE_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 (with anchored sub-sections) ---------- */
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>
      <p className="ed-intro-body">{CURLY_FINISHING.intro}</p>

      <h3 id="plop" className="ed-anchor-h">Plopping</h3>
      <p className="ed-intro-body">Plopping is a drying technique, not a styling one. You are removing water, not applying product — the product is already in the hair before you plop. Lay a cotton t-shirt or microfibre towel flat on a surface. Flip your hair onto the centre of the cloth, then wrap the ends up and tie the cloth at the nape of your neck so the hair stays compressed in the crown. Duration: 10 to 20 minutes. Fine wavy hair at 10; thick coily hair at 20. The cloth removes water without disturbing the curl pattern the way a towel-scrunch does. When you unwrap, the hair should sit in loose defined clumps — not dripping, not dry, exactly damp enough to diffuse cleanly.</p>

      <h3 id="seal" className="ed-anchor-h">Sealing</h3>
      <p className="ed-intro-body">Sealing is what you do at the end of drying, not at the beginning of product application. The goal is to close the cuticle that heat opened during diffusing. The mechanism is simple: cooler temperature contracts the cuticle, creating a flatter surface that reflects light instead of scattering it. Switch your diffuser to the cool setting for the final two to three minutes of drying — the hair should be at least 90% dry before this step; cool air on wet hair extends drying time without sealing benefit. The alternative is a brief cold-water rinse at the end of conditioning, before product application. Both work. The cool diffuse end-step is more accessible and can be layered onto any routine without restructuring wash day. The cold rinse is better when frizz is the primary complaint and the curl pattern is high-porosity.</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 ---------- */
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>
      <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 ---------- */
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>Method</th>
            <th>When to use 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>
  );
}

/* ---------- Library ---------- */
function HowToLibrary({ cardStyle = "editorial" }) {
  const [sort, setSort] = React.useState("Editor's pick");
  const [tech, setTech] = React.useState("All");

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

  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"].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">Method</span>
          <div className="lib-pills">
            {TECH_FILTERS_CURLY.map(s => (
              <button key={s} className={`lib-pill ${tech === s ? "on" : ""}`} onClick={() => setTech(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. <button className="lk" onClick={() => setTech("All")}>Reset</button></div>
        )}
      </div>

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

/* ---------- Crosslinks ---------- */
function TechniqueCrosslinks() {
  return (
    <div className="xl">
      {TECHNIQUE_CROSSLINKS.map((x) => (
        <a key={x.id} href={x.href} className="xl-card">
          <div className="xl-num">{TECHNIQUE_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>
  );
}

/* ---------- Shelf ---------- */
function CurlyFinishingNext() {
  return (
    <div className="shelf">
      <a href="/en/hair/technique/detangling-done-right/" className="shelf-card prev">
        <div className="shelf-dir">← Previous sub-chapter</div>
        <div className="shelf-t">Detangling Done Right</div>
      </a>
      <a href="/en/hair/technique/scalp-massage/" className="shelf-card next">
        <div className="shelf-dir">Next sub-chapter →</div>
        <div className="shelf-t">Scalp Massage</div>
      </a>
    </div>
  );
}

Object.assign(window, {
  CurlyFinishingSidebar, CurlyFinishingHero, TechniqueRail, EditorIntro, QuickFacts,
  BeginnerPath, Trending, FormatGuide, HowToLibrary, TechniqueCrosslinks, CurlyFinishingNext,
});