// Makeup · Tools · Application Tools — L3 sections (combined page)
// Combined sub-anchors: #brushes, #sponges, #fingers

/* ---------- Sidebar ---------- */
function ApplicationToolsSidebar({ 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" /> Makeup · Tools · Application Tools</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/makeup/tools/">← Back to Tools</a>
        <a href="/en/makeup/">Makeup index</a>
        <a href="/">Home</a>
      </div>
    </aside>
  );
}

/* ---------- Hero — half-image ---------- */
function ApplicationToolsHero() {
  return (
    <section className="l4-hero">
      <div className="l4-hero-copy">
        <div className="l4-hero-eyebrow">
          <span>By tool type</span>
          <span className="bar" />
          <span>Sub-chapter 01</span>
        </div>
        <h1 className="l4-hero-title">
          How to use <em>application</em> tools.
        </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">Makeup · Tools · Application Tools</span>
      </div>
    </section>
  );
}

/* ---------- Type sibling rail ---------- */
function TypeRail() {
  return (
    <nav className="trail" aria-label="Tools">
      <span className="trail-eb">Other tools</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>
      <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>
      <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>
  );
}

/* ---------- Combined sub-sections with real anchors ---------- */
function BrushesSection() {
  return (
    <div className="qf-defn" style={{marginBottom: '2rem'}}>
      <h3 id="brushes">Brushes</h3>
      <p>A brush is a delivery vehicle, not a brand. The same buffing brush handles three foundations, two creams, and a cream blush. Most makeup-bag bloat is brand collecting. The brushes that do work have density and shape in common — not a price point. Four brushes cover a complete face: a flat foundation brush for full coverage, a round buffing brush for blending, a tapered blush brush for colour placement, a small blending brush for crease and transition work. Everything else is optional.</p>
      <p>Brush motion matters as much as brush choice. Buffing in circular motions pushes product into skin and builds coverage. Pressing and rolling distributes product without moving what's underneath. Sweeping in one direction drags and thins. Know the motion before you pick up the brush.</p>
    </div>
  );
}

function SpongesSection() {
  return (
    <div className="qf-defn" style={{marginBottom: '2rem'}}>
      <h3 id="sponges">Sponges</h3>
      <p>A dry sponge absorbs product and streaks. A damp sponge distributes product and mimics skin. The dampening step is not optional — it is the technique. Wet the sponge under a tap, wring it out, squeeze it in a towel, then bounce it against your hand twice. What you hold should feel like a damp, dense pillow: not dripping, not dry.</p>
      <p>Bouncing motion only. Pressing and releasing the sponge against skin applies and pushes product without dragging. Dragging is the error that makes sponge application look different from skin. The mini blender is the same tool in a smaller contact area — useful for under-eye concealer, bridge of nose, and any place where the full-size sponge is too broad to control.</p>
    </div>
  );
}

function FingersSection() {
  return (
    <div className="qf-defn" style={{marginBottom: '2rem'}}>
      <h3 id="fingers">Fingers</h3>
      <p>Fingers carry warmth that no brush or sponge can replicate. That warmth activates cream formulas — melting them into skin rather than sitting on top of it. Cream blush applied with a fingertip, tapped and blended outward, integrates into the skin in a way that a brush cannot produce. The same applies to cream contour, cream highlight, and under-eye concealer in a cream or balm formula.</p>
      <p>Fingers are not a shortcut. They are the correct tool for a specific set of formulas. Using a brush on a cream blush will give you a different result — not necessarily worse, but different. Know which finish you're after before deciding which tool to reach for.</p>
    </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 application tools.
        </div>
        <a href="#" className="lib-browse">
          Browse all {OILY.totalCount} <span aria-hidden>→</span>
        </a>
      </div>
    </div>
  );
}

/* ---------- Crosslinks ---------- */
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 ApplicationToolsNext() {
  return (
    <div className="shelf">
      <a href="/en/makeup/tools/" className="shelf-card prev">
        <div className="shelf-dir">← Up one chapter</div>
        <div className="shelf-t">Tools</div>
      </a>
      <a href="/en/makeup/tools/eye-tools/" className="shelf-card next">
        <div className="shelf-dir">Next sub-chapter →</div>
        <div className="shelf-t">Eye Tools</div>
      </a>
    </div>
  );
}

Object.assign(window, {
  ApplicationToolsSidebar, ApplicationToolsHero, TypeRail, EditorIntro, QuickFacts, BeginnerPath,
  Trending, FormatGuide, BrushesSection, SpongesSection, FingersSection,
  HowToLibrary, TypeCrosslinks, ApplicationToolsNext,
});
