// Makeup · Tools · Eye Tools — L3 sections (combined page)
// Combined sub-anchors: #curlers, #lash-tools, #brow-tools

/* ---------- Sidebar ---------- */
function EyeToolsSidebar({ 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 · Eye 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 EyeToolsHero() {
  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 02</span>
        </div>
        <h1 className="l4-hero-title">
          How to use <em>eye</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 · Eye 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 ---------- */
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 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 CurlersSection() {
  return (
    <div className="qf-defn" style={{marginBottom: '2rem'}}>
      <h3 id="curlers">Lash Curlers</h3>
      <p>The eyelash curler does the work of half a tube of mascara. Skip the curl and the mascara compensates with weight — lengthening and thickening because the lash is pointing forward instead of up, and forward lashes read as short. The curl is structural. It changes the geometry of the eye from a frontal view before you apply a single product.</p>
      <p>The rule is inflexible: curlers go on dry lashes, before mascara. The formula in mascara bonds to the lash and acts as a structural element. When you close a curler over a mascara-coated lash and pull it away, the bond breaks — and so does the lash. Three to five seconds of held pressure at the base, a gentle roll upward, and a single hold at mid-lash is sufficient. More pressure does not produce more curl.</p>
    </div>
  );
}

function LashToolsSection() {
  return (
    <div className="qf-defn" style={{marginBottom: '2rem'}}>
      <h3 id="lash-tools">Lash Tools</h3>
      <p>The lash comb does one thing: it separates mascara before it dries. Run it through from base to tip in the thirty seconds after you apply mascara — while the formula is still wet enough to move — and you'll take clumped, heavy lashes to individual, defined ones. Wait until it dries and you're pulling at a fixed structure, which risks losing lashes.</p>
      <p>The pencil brush is a secondary lash tool: it applies liner into the lash line (tight-lining) more precisely than any liner applicator that comes in-product. It can also apply shadow to the lower lash line with the precision of liner, which is a different technique to shadow application on the lid. Keep it separate from the brushes you use for shadow — the contact with wet formula makes cross-contamination likely.</p>
    </div>
  );
}

function BrowToolsSection() {
  return (
    <div className="qf-defn" style={{marginBottom: '2rem'}}>
      <h3 id="brow-tools">Brow Tools</h3>
      <p>The spoolie is the most underused tool in brow work. It has two jobs: before product, it brushes hairs into their natural growth direction so you can see what the brow actually looks like and where the gaps are. After product, it blends pencil strokes and powder into the hair so the result reads as brow rather than drawn line. Skip the spoolie after brow product and the work will always look applied.</p>
      <p>The micro-blade pen is the correct tool for sparse patches — not a pencil filled in with hard pressure. Each stroke should mimic a single brow hair in length and direction. The mistake is filling in sections the way you'd fill in a coloring book rather than making individual marks that happen to accumulate into density. Brow gel — clear, tinted, or laminating — goes over spoolie-blended product and sets the shape. It is the last step, not the first.</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">Tool</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 eye 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 EyeToolsNext() {
  return (
    <div className="shelf">
      <a href="/en/makeup/tools/application-tools/" className="shelf-card prev">
        <div className="shelf-dir">← Previous sub-chapter</div>
        <div className="shelf-t">Application Tools</div>
      </a>
      <a href="/en/makeup/tools/setting-spray/" className="shelf-card next">
        <div className="shelf-dir">Next sub-chapter →</div>
        <div className="shelf-t">Setting Spray</div>
      </a>
    </div>
  );
}

Object.assign(window, {
  EyeToolsSidebar, EyeToolsHero, TypeRail, EditorIntro, QuickFacts, BeginnerPath,
  Trending, FormatGuide, CurlersSection, LashToolsSection, BrowToolsSection,
  HowToLibrary, TypeCrosslinks, EyeToolsNext,
});
