// Makeup · Eyes · Eye Looks — L3 sections (live deploy, COMBINED page)
// Mirror of the Oily sections structure, adapted for Eye Looks.
// Anchors: #smoky, #cut-crease, #halo, #soft-smudge, #no-makeup — real <h3 id="..."> inside section content.
// Visual skeleton must remain identical to the prototype.

/* ---------- Sidebar ---------- */
function EyeLooksSidebar({ 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 · Eyes · Eye Looks</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/eyes/">← Back to Eyes</a>
        <a href="/en/makeup/">Makeup index</a>
        <a href="/">Home</a>
      </div>
    </aside>
  );
}

/* ---------- Hero — half-image ---------- */
function EyeLooksHero() {
  return (
    <section className="l4-hero">
      <div className="l4-hero-copy">
        <div className="l4-hero-eyebrow">
          <span>By look</span>
          <span className="bar" />
          <span>Sub-chapter 06</span>
        </div>
        <h1 className="l4-hero-title">
          How to build a complete <em>eye look.</em>
        </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">Eye Looks · Sub-chapter 06</span>
      </div>
    </section>
  );
}

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

/* ---------- Five looks — each with a real anchor h3 ---------- */
function LooksDeep() {
  return (
    <div className="qf">

      <div className="qf-defn" style={{marginBottom: "2.5rem"}}>
        <h3 id="smoky">The smoky eye</h3>
        <p>The smoky eye works because it blurs the boundary between the lash line and the eye socket, making both appear deeper and more defined. Its reputation for difficulty comes from getting the sequence wrong. Most people apply the dark shade first and then try to blend it outward. That approach produces mud. The correct sequence is transition shade first — a mid-tone matte — placed in the crease and blended before any dark pigment touches the lid. Once the transition shade is in, the dark colour has somewhere to blend into rather than somewhere to smear against.</p>
        <p>The darkest shade goes on the outer third of the lid and the lower lash line, not the entire lid. The inner corner stays light, even on an intensified version. That contrast is what gives the look its structure. Without it, the eye closes rather than opens.</p>
      </div>

      <div className="qf-defn" style={{marginBottom: "2.5rem"}}>
        <h3 id="cut-crease">The cut crease</h3>
        <p>The cut crease is the most over-litigated look in the manual. Its appeal is the contrast. Its difficulty is that it asks for a face shaped exactly like the diagram — specifically, enough lid space between the lash line and the natural crease for the concealer line to sit visibly when the eye is open. On hooded eyes, the crease closes over when open and the cut disappears entirely.</p>
        <p>The technique itself is straightforward: apply shadow to the crease, then use a flat brush to press concealer — matte, slightly lighter than your lid — into and just above the natural fold. The shadow sits above the line; the lid sits below it, clean. The hard edge is a result of pressing, not of painting. A blending brush run lightly along the upper edge of the concealer line softens it without losing the definition.</p>
      </div>

      <div className="qf-defn" style={{marginBottom: "2.5rem"}}>
        <h3 id="halo">The halo eye</h3>
        <p>The halo eye places a lighter or more reflective shade at the centre of the lid, with darker shades at the inner and outer corners creating a framing effect. The result is the visual impression of roundness and forward projection. It suits most eye shapes because it works with the eye's natural curvature rather than against it — the centre of the eye naturally sits further forward than the edges, and the halo emphasises that.</p>
        <p>The skill in a halo is symmetry. The light centre patch should sit at the same horizontal position on both eyes. Mark it with a light tap of a finger before reaching for a brush. Too far inward and the eye looks crowded; too far outward and the definition at the outer corner disappears. The boundary between the light centre and the darker edges should be blended, not sharp.</p>
      </div>

      <div className="qf-defn" style={{marginBottom: "2.5rem"}}>
        <h3 id="soft-smudge">The soft smudge</h3>
        <p>The soft smudge is a pencil or kohl along the upper and lower lash line, worked with a small brush or cotton bud until the hard edge becomes diffuse. It takes three minutes and a single product. It reads as intentional rather than heavy because the colour stays at the lash line and doesn't extend onto the lid or into the crease. The effect is definition without structure — the eye looks darker and more defined but the technique is invisible.</p>
        <p>The mistake people make is smudging too far. The shadow should stay within a few millimetres of the lash line. Beyond that, it becomes a half-finished smoky eye rather than a deliberate smudge. Smudge along the line first; then lift the brush to check the distance before going further.</p>
      </div>

      <div className="qf-defn">
        <h3 id="no-makeup">The no-makeup eye</h3>
        <p>The no-makeup eye uses more steps than most people expect. The components are: a tight line on the upper waterline with a skin-toned or dark brown pencil, a coat of brown mascara (not black), a brushed and lightly filled brow, and occasionally a faint shimmer on the inner corner. Nothing on the lid. Nothing visible anywhere except at the lash line, where the tight line creates the impression of natural density without a visible product.</p>
        <p>The eye reads as its own best version: defined, awake, and apparently unassisted. The distinction from actually bare skin is the evenness. Skin without product is slightly uneven; the no-makeup eye has the precision that nature doesn't. That precision — the tight line placed exactly at the base of the upper lashes — is what makes the look work. Anything further out and it becomes detectable.</p>
      </div>

    </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 eye looks.
        </div>
        <a href="#" className="lib-browse">
          Browse all {OILY.totalCount} <span aria-hidden>→</span>
        </a>
      </div>
    </div>
  );
}

/* ---------- Crosslinks to other eyes topics ---------- */
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 EyeLooksNext() {
  return (
    <div className="shelf">
      <a href="/en/makeup/eyes/eye-shape-guide/" className="shelf-card prev">
        <div className="shelf-dir">← Previous sub-chapter</div>
        <div className="shelf-t">Eye Shape Guide</div>
      </a>
      <a href="/en/makeup/eyes/" className="shelf-card next">
        <div className="shelf-dir">Up to Eyes index →</div>
        <div className="shelf-t">Eyes</div>
      </a>
    </div>
  );
}

Object.assign(window, {
  EyeLooksSidebar, EyeLooksHero, TypeRail, EditorIntro, QuickFacts, BeginnerPath, Trending, FormatGuide, LooksDeep, HowToLibrary, TypeCrosslinks, EyeLooksNext,
});
