// NellyTop3 — a compact "Nelly's top 3 for [category]" section.
// Keeps her as a named voice without repeating the full column module.

const NELLY_PICKS = {
  skin: {
    label: "Skin",
    note: "Fifteen years on this beat and skin is still where I'd spend my money first. These are the three I send to friends who ask.",
    posts: [
      { t: "The skin barrier, explained without the scaremongering", meta: "Essay · 6 min", d: "Apr 22" },
      { t: "My actual routine — not the one I post",                   meta: "Column · 4 min", d: "Apr 11" },
      { t: "A skin cycle that actually fits a week",                   meta: "How-to · 5 min", d: "Mar 28" },
    ],
  },
  moisturising: {
    label: "Moisturising",
    note: "Moisturiser is the most over-complicated category in beauty. Three pieces I've written that I think cut through it.",
    posts: [
      { t: "The three moisturisers I keep re-buying",                        meta: "Review · 4 min", d: "Apr 18" },
      { t: "Why 'hydrating' and 'moisturising' are not the same thing",      meta: "Essay · 5 min", d: "Apr 02" },
      { t: "What I do when my skin goes flat in February",                   meta: "Column · 3 min", d: "Feb 14" },
    ],
  },
  exfoliation: {
    label: "Exfoliation",
    note: "Half of what people blame on their moisturiser is actually an exfoliation problem. Start here.",
    posts: [
      { t: "The case against daily acids",                     meta: "Essay · 6 min", d: "Mar 30" },
      { t: "Physical vs. chemical — a settled argument",       meta: "Column · 4 min", d: "Mar 14" },
      { t: "How often is actually enough",                     meta: "How-to · 3 min", d: "Feb 28" },
    ],
  },
  spf: {
    label: "SPF",
    note: "If you read one thing on sunscreen, don't let it be a product review. Read these first.",
    posts: [
      { t: "The two-finger rule, and why I stopped following it", meta: "Column · 4 min", d: "Apr 08" },
      { t: "Mineral or chemical — what I actually wear",          meta: "Review · 5 min", d: "Mar 22" },
      { t: "SPF on cloudy days: the honest answer",              meta: "Essay · 3 min", d: "Mar 04" },
    ],
  },
};

function NellyTop3({ category = "skin" }) {
  const data = NELLY_PICKS[category] || NELLY_PICKS.skin;
  return (
    <section className="section-tight nt3-sec" aria-labelledby="nt3-h">
      <div className="container">
        <div className="nt3 reveal">
          <aside className="nt3-by">
            <div className="nt3-portrait">
              <img src="/redesign/assets/nelly.png" alt="Portrait of Nelly, Contributing Editor" />
            </div>
            <div className="nt3-byline">
              <div className="nt3-kick">From the desk of</div>
              <div className="nt3-name">Nelly<span className="nt3-dot">.</span></div>
              <div className="nt3-role">Contributing Editor</div>
            </div>
          </aside>

          <div className="nt3-main">
            <div className="nt3-head">
              <div className="kicker">Nelly's Top 3 · {data.label}</div>
              <h3 id="nt3-h" className="nt3-h">
                Three pieces I'd hand you on <em>{data.label.toLowerCase()}.</em>
              </h3>
              <p className="nt3-note">{data.note}</p>
            </div>

            <ol className="nt3-list">
              {data.posts.map((p, i) => (
                <li key={p.t}>
                  <a className="nt3-item" href="#">
                    <span className="nt3-n">{String(i + 1).padStart(2, "0")}</span>
                    <span className="nt3-body">
                      <span className="nt3-t">{p.t}</span>
                      <span className="nt3-meta">{p.meta}</span>
                    </span>
                    <span className="nt3-arrow" aria-hidden="true">→</span>
                  </a>
                </li>
              ))}
            </ol>

            <a className="nt3-all" href="#">
              All of Nelly's writing on {data.label.toLowerCase()} <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { NellyTop3 });