// Hair · Technique · Detangling Done Right — L3 sections (COMBINED PAGE)
// Anchors: #wet-vs-dry, #brush-choice

/* ---------- Sidebar ---------- */
function DetanglingDoneRightSidebar({ 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 · Detangling</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 DetanglingDoneRightHero() {
  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 02</span>
        </div>
        <h1 className="l4-hero-title">
          How to detangle <em>properly.</em>
        </h1>
        <p className="l4-hero-deck">{DETANGLING.deck}</p>
        <div className="l4-hero-meta">
          <span><b>{DETANGLING.meta.count}</b> how-to's</span>
          <span className="dot-sep">·</span>
          <span>{DETANGLING.meta.updated}</span>
          <span className="dot-sep">·</span>
          <span>{DETANGLING.meta.reading}</span>
        </div>
        <div className="l4-hero-byline">{DETANGLING.byline}</div>
      </div>
      <div className="l4-hero-media">
        <img src={DETANGLING.hero} alt={DETANGLING.heroAlt} />
        <span className="l4-hero-tag">Technique · Sub-chapter 02</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">{DETANGLING.intro}</p>

      <h3 id="wet-vs-dry" className="ed-anchor-h">Wet vs Dry</h3>
      <p className="ed-intro-body">The wet-vs-dry decision is determined by your hair type, not your preference or your schedule. Curly and coily hair detangles best in the shower under a rinse-out conditioner with real slip — the elasticity of wet hair works for you here, and the conditioner reduces friction dramatically. Fine, straight, or colour-treated hair is different: wet fine hair stretches up to 30% before snapping, and that 30% is not recoverable. Dry detangling on fine hair, using a paddle brush or wide-tooth comb with a detangling spray, removes knots without the elasticity risk. The rule is not that one approach is better than the other — the rule is that the wrong approach for your type always costs you hair you didn't need to lose.</p>

      <h3 id="brush-choice" className="ed-anchor-h">Brush Choice</h3>
      <p className="ed-intro-body">The brush is not interchangeable. A Denman on a tight 4C curl (wet, with slip) defines and detangles in a single pass. A Denman on fine dry hair creates static and splits. A paddle brush on long straight hair covers the most surface in the least time. A paddle brush on loose waves disturbs the pattern without replacing it. Before you pick up a tool, answer two questions: what texture am I working with, and is it wet or dry? Those two answers narrow the choice to one or two tools. Everything else is trial and breakage. Wide-tooth comb remains the most forgiving entry point across the most hair types — start there if in doubt, and learn from what you observe.</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 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>Tool</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 with filters ---------- */
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">Technique</span>
          <div className="lib-pills">
            {TECH_FILTERS_DETANGLE.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>{DETANGLING.totalCount}</b> how-to's on detangling.</div>
        <a href="#" className="lib-browse">Browse all {DETANGLING.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 DetanglingDoneRightNext() {
  return (
    <div className="shelf">
      <a href="/en/hair/technique/heat-styling/" className="shelf-card prev">
        <div className="shelf-dir">← Previous sub-chapter</div>
        <div className="shelf-t">Heat Styling</div>
      </a>
      <a href="/en/hair/technique/curly-finishing/" className="shelf-card next">
        <div className="shelf-dir">Next sub-chapter →</div>
        <div className="shelf-t">Curly Finishing</div>
      </a>
    </div>
  );
}

Object.assign(window, {
  DetanglingDoneRightSidebar, DetanglingDoneRightHero, TechniqueRail, EditorIntro, QuickFacts,
  BeginnerPath, Trending, FormatGuide, HowToLibrary, TechniqueCrosslinks, DetanglingDoneRightNext,
});