// Hair · Technique · Heat Styling — L3 sections (COMBINED PAGE)
// Anchors: #sectioning, #rough-dry, #diffuse

/* ---------- Sidebar ---------- */
function HeatStylingSidebar({ 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 · Heat Styling</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 HeatStylingHero() {
  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 01</span>
        </div>
        <h1 className="l4-hero-title">
          How to style hair <em>with heat.</em>
        </h1>
        <p className="l4-hero-deck">{HEAT_STYLING.deck}</p>
        <div className="l4-hero-meta">
          <span><b>{HEAT_STYLING.meta.count}</b> how-to's</span>
          <span className="dot-sep">·</span>
          <span>{HEAT_STYLING.meta.updated}</span>
          <span className="dot-sep">·</span>
          <span>{HEAT_STYLING.meta.reading}</span>
        </div>
        <div className="l4-hero-byline">{HEAT_STYLING.byline}</div>
      </div>
      <div className="l4-hero-media">
        <img src={HEAT_STYLING.hero} alt={HEAT_STYLING.heroAlt} />
        <span className="l4-hero-tag">Technique · Sub-chapter 01</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">{HEAT_STYLING.intro}</p>

      <h3 id="sectioning" className="ed-anchor-h">Sectioning</h3>
      <p className="ed-intro-body">Sectioning is the part every beginner skips and every stylist considers non-negotiable. Take the hair from root to tip, divide it into four panels — ear to ear across the crown, then front to back — and clip each section until you're working it. Working one loose, tangled mass is what creates the uneven result. Each panel gets its own heat pass, its own cooling moment, its own shape. The clip is not optional prep. The clip is the technique.</p>

      <h3 id="rough-dry" className="ed-anchor-h">Rough Drying</h3>
      <p className="ed-intro-body">A rough-dry takes hair from soaking wet down to 70–80% dry using only the dryer and your hand, before any other tool touches it. The goal is to remove the water weight that causes frizz-producing tension and to begin aligning the cuticle in the direction of the style. Use medium heat, a concentrator nozzle aimed downward, and work from root to tip in the direction of the style. The brush comes after. The iron comes after. The dryer goes first — every single time.</p>

      <h3 id="diffuse" className="ed-anchor-h">Diffusing</h3>
      <p className="ed-intro-body">Diffusing is controlled rough-drying for textured hair. The diffuser attachment replaces the nozzle and distributes heat across a wider, cupped surface that cradles the curl rather than blasting it flat. The hand position: place the diffuser under a section of hair and lift upward, compressing the curl gently against the bowl. Hold for five to eight seconds. Move to the next section. Do not shake, scrunch repeatedly, or hover — all three create frizz. End every diffuse session with thirty seconds on the cool setting. That step sets the cast and halves the chance of frizz by midafternoon.</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>Technique</th>
            <th>When to use it</th>
            <th>When to skip it</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_HEAT.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>{HEAT_STYLING.totalCount}</b> how-to's on heat styling.</div>
        <a href="#" className="lib-browse">Browse all {HEAT_STYLING.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 HeatStylingNext() {
  return (
    <div className="shelf">
      <a href="/en/hair/technique/" className="shelf-card prev">
        <div className="shelf-dir">← Up one chapter</div>
        <div className="shelf-t">Technique</div>
      </a>
      <a href="/en/hair/technique/detangling-done-right/" className="shelf-card next">
        <div className="shelf-dir">Next sub-chapter →</div>
        <div className="shelf-t">Detangling Done Right</div>
      </a>
    </div>
  );
}

Object.assign(window, {
  HeatStylingSidebar, HeatStylingHero, TechniqueRail, EditorIntro, QuickFacts,
  BeginnerPath, Trending, FormatGuide, HowToLibrary, TechniqueCrosslinks, HeatStylingNext,
});