// Hair · Cut & Style · Taper — L3 sections

function TaperSidebar() {
  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 · Cut &amp; Style · Taper</span></button><ul className="l2-sublist">{CUT_STYLE_SIBLINGS.map((s) => (<li key={s.id}><a href={s.href} className={s.id==="taper"?"cur":""}>{s.title}</a></li>))}</ul></div><div className="l2-nav-foot"><a href="/en/hair/cut-style/">← Back to Cut &amp; Style</a><a href="/en/hair/">Hair index</a><a href="/">Home</a></div></aside>);
}
function TaperHero() {
  return (<section className="l4-hero"><div className="l4-hero-copy"><div className="l4-hero-eyebrow"><span>Cut &amp; Style</span><span className="bar" /><span>Sub-chapter 10</span></div><h1 className="l4-hero-title">How to get a <em>taper</em> that suits your texture and shape.</h1><p className="l4-hero-deck">{TAPER.deck}</p><div className="l4-hero-meta"><span><b>{TAPER.meta.count}</b> how-to's</span><span className="dot-sep">·</span><span>{TAPER.meta.updated}</span><span className="dot-sep">·</span><span>{TAPER.meta.reading}</span></div><div className="l4-hero-byline">{TAPER.byline}</div></div><div className="l4-hero-media"><img src={TAPER.hero} alt={TAPER.heroAlt} /><span className="l4-hero-tag">Taper · Sub-chapter 10</span></div></section>);
}
function TaperRail() {
  return (<nav className="trail" aria-label="Cut & Style variations"><span className="trail-eb">Cut &amp; Style</span>{CUT_STYLE_SIBLINGS.map((s) => (<a key={s.id} href={s.href} className={`trail-item ${s.id==="taper"?"cur":""}`}><span className="cn">{s.n}</span><span className="ct">{s.title}</span>{s.id==="taper"&&<span className="here">You are here</span>}</a>))}</nav>);
}
function TaperEditorIntro() {
  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">{TAPER.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>);
}
function TaperQuickFacts() {
  return (<div className="qf"><div className="qf-defn"><div className="qf-eyebrow">Definition · Plain English</div><h3>{TAPER_QUICK_FACTS.defn.h}</h3><p>{TAPER_QUICK_FACTS.defn.body}</p></div><div className="qf-myths"><div className="qf-eyebrow">Myth, meet fact</div><ul>{TAPER_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>);
}
function TaperBeginnerPath() {
  return (<div className="bp"><div className="bp-head"><h3>{TAPER_BEGINNER_PATH.h}</h3><p className="bp-deck">{TAPER_BEGINNER_PATH.deck}</p></div><ol className="bp-steps">{TAPER_BEGINNER_PATH.steps.map((s,i)=>(<li key={i}><a href="#" className="bp-step"><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>);
}
function TaperTrending() {
  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">{TAPER_TRENDING.map((t,i)=>(<li key={i}><a href="#" className="tr-item"><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>);
}
function TaperFormatGuide() {
  return (<div className="fg"><div className="fg-head"><h3>{TAPER_FORMAT_GUIDE.h}</h3><p className="fg-deck">{TAPER_FORMAT_GUIDE.deck}</p></div><table className="fg-table"><thead><tr><th>Type</th><th>Best suited to</th><th>Avoid if</th><th>Verdict</th></tr></thead><tbody>{TAPER_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>);
}
function TaperHowToLibrary({ 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 = TAPER_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 === "Editor's pick") arr.sort((a,b) => (b.pick===true)-(a.pick===true));
    return arr.slice(0,6);
  }, [sort,tech,time]);
  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">Category</span><div className="lib-pills">{TAPER_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}`}>{list.map((h,i)=>(<a key={i} href="#" className="lib-card">{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");setTime("Any");}}>Reset</button></div>}</div><div className="lib-foot"><div className="lib-foot-l">Showing <b>{list.length}</b> of <b>{TAPER.totalCount}</b> how-to's on the taper.</div><a href="#" className="lib-browse">Browse all {TAPER.totalCount} <span aria-hidden>→</span></a></div></div>);
}
function TaperCrosslinks() {
  return (<div className="xl">{TAPER_CROSSLINKS.map((x)=>(<a key={x.id} href={x.href} className="xl-card"><div className="xl-num">{CUT_STYLE_SIBLINGS.find(s=>s.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>);
}
function TaperNext() {
  return (<div className="shelf"><a href="/en/hair/cut-style/pixie/" className="shelf-card prev"><div className="shelf-dir">← Previous</div><div className="shelf-t">The pixie</div></a><a href="/en/hair/cut-style/undercut/" className="shelf-card next"><div className="shelf-dir">Next sub-chapter →</div><div className="shelf-t">Undercut</div></a></div>);
}
Object.assign(window, { TaperSidebar, TaperHero, TaperRail, TaperEditorIntro, TaperQuickFacts, TaperBeginnerPath, TaperTrending, TaperFormatGuide, TaperHowToLibrary, TaperCrosslinks, TaperNext });