// Nelly Article — "The Five Products I'd Re-Buy Tomorrow"

const NA_ARTICLE = {
  kicker: "Vol. IV · Column 08 · Products",
  title: "The Five Products I'd <em>Re-Buy</em> Tomorrow.",
  deck: "Five products I would replace the same day they ran out. I don't usually do lists. But these earned it.",
  date: "Friday, 18 April 2026",
  read: "4 min read",
  author: "Nelly",
  authorRole: "Beauty & Style Director",
  ig: "@legacybynelly",
  category: "Products",
  avatar: "/redesign/assets/nelly.png",
  lead: "https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?w=1800&q=80&auto=format&fit=crop",
  leadCap: "Five products. No more. The rest can wait.",
  leadCredit: "Fig. 01 · On the desk",
};

const NA_TOC = [
  { n: "I",   t: "Why I'm writing this" },
  { n: "II",  t: "The five" },
  { n: "III", t: "What didn't make the list" },
];

const NA_MARGIN_NOTES = [
  { n: "01", t: "I won't name the brands. The point is the formula, not the label. Formulas change. Labels stay the same and fool you." },
  { n: "02", t: "There are three products I keep almost replacing. Every few months I pick them up in a shop and put them back down. That almost-replacing is its own kind of loyalty." },
  { n: "03", t: "One product I was certain would make this list didn't. It had two good years, then one bad reformulation, and I couldn't defend it anymore. I still have half a jar." },
];

const NA_MORE = [
  { kick: "Essay",  t: "On the second cleanse", time: "8 min", date: "Apr 11", img: "https://images.unsplash.com/photo-1556228852-80b6e5eeff06?w=1200&q=80&auto=format&fit=crop" },
  { kick: "Column", t: "On Under-Painting (And Why I Stopped)", time: "5 min", date: "Apr 11", img: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=1200&q=80&auto=format&fit=crop" },
  { kick: "Essay",  t: "A Skin Cycle That Actually Fits a Week", time: "6 min", date: "Apr 04", img: "https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?w=1200&q=80&auto=format&fit=crop" },
];

const NA_GALLERY = [
  { img: "https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 02 · The desk, morning light" },
  { img: "https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 03 · The five, arranged" },
  { img: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 04 · What stayed" },
];

function NaMast() {
  return (
    <div className="na-mast">
      <div className="na-mast-l">How To: Beauty Edition</div>
      <div className="na-mast-c">The Desk, by Nelly</div>
      <div className="na-mast-r">Vol. IV · Column 08</div>
    </div>
  );
}

function NaHero() {
  const A = NA_ARTICLE;
  return (
    <header className="na-hero reveal" data-screen-label="Article Hero">
      <div className="na-kicker">
        <span className="na-bar" />
        <span>{A.kicker}</span>
        <span className="na-bar" />
      </div>
      <h1 className="na-title" dangerouslySetInnerHTML={{ __html: A.title }} />
      <p className="na-deck">{A.deck}</p>
      <div className="na-byline">
        <span className="by">
          <span className="by-avatar"><img src={A.avatar} alt="" /></span>
          Words by <span className="by-name">{A.author}</span>
        </span>
        <span className="dot" />
        <a href="https://instagram.com/legacybynelly" className="na-ig" style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".22em", color: "var(--blush-deep)", textDecoration: "none" }}>{A.ig}</a>
        <span className="dot" />
        <span>{A.date}</span>
        <span className="dot" />
        <span>{A.read}</span>
        <span className="dot" />
        <span>Filed under {A.category}</span>
      </div>
    </header>
  );
}

function NaLead() {
  const A = NA_ARTICLE;
  return (
    <figure className="reveal" style={{ margin: "0 0 56px" }}>
      <div className="na-lead">
        <img src={A.lead} alt="" />
      </div>
      <figcaption className="na-lead-cap">
        <span className="credit">{A.leadCredit}</span>
        <span className="cap-text">{A.leadCap}</span>
      </figcaption>
    </figure>
  );
}

function NaBody() {
  return (
    <div className="na-body-grid">
      <article className="na-col reveal">

        {/* ---- I. Why I'm writing this ---- */}
        <p className="has-drop">
          <span className="na-drop">T</span>
          here are too many lists. You know this. I know this. The internet is a filing cabinet of ranked products, each one declared essential by someone who was sent it for free and given four hours to have feelings about it. I have spent years not writing this column because I didn't want to add to that particular pile.
        </p>
        <p>
          Then I ran out of three of these in the same week. Not by design — I had simply underestimated how quickly things go when you use them every day without thinking about it. Replacing them took me approximately four minutes, which is unusual. I usually stand in an aisle for twenty minutes second-guessing myself into buying something I don't need. The fact that I didn't hesitate felt like data. So here we are.
        </p>
        <p>
          I'm aware this is a list piece. I have made my peace with that.
        </p>

        {/* ---- II. The five ---- */}
        <h3 className="na-sub">The five.</h3>

        <p>
          <strong>The cleansing balm in a glass jar.</strong> Not the kind in a tube. Not the kind that comes in a pump. A glass jar with a wide mouth and a screw lid, the kind where you have to put your finger in to get to the product, which is either a design flaw or the whole point depending on your relationship with slowness. I have been using a balm in this format for six years. The brand has changed twice. The format has not. It goes onto a dry face in the evening — pressed, not rubbed — and it takes everything off: the SPF, the pollution, the general exhaustion of the day. The cloth afterward is cotton flannel. The second cleanse is a gel. But the balm is the beginning of everything.
        </p>

        <blockquote className="na-pull">
          I'm not loyal to a brand. I'm loyal to a step and the format that makes the step work.
        </blockquote>

        <p>
          <strong>The vitamin C serum.</strong> Two drops. Every morning. Pressed into the skin after cleansing, before anything else. I do not rub it in — rubbing is for people who are in a hurry, and your skin can tell. The formula I use is a fifteen percent L-ascorbic acid in a water base, which is not exciting to read but is the actual relevant information. I have tried oil-based versions. I have tried derivatives. I keep coming back to this because it works on the one thing I care about: the small area of unevenness on my left cheekbone that I have been looking at every morning since I was twenty-four. It is, six years later, considerably less interesting than it used to be.
        </p>

        <div className="na-fig">
          <div className="na-fig-img">
            <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=1400&q=80&auto=format&fit=crop" alt="" />
          </div>
          <div className="na-fig-cap">
            <span className="num">Fig. 02</span>
            <span>Two drops in the morning. Press, don't rub. The whole thing takes eleven seconds and I have never missed a day I didn't regret.</span>
          </div>
        </div>

        <p>
          <strong>The SPF I actually wear.</strong> No white cast. No perfume. A texture that sits on the skin without announcing itself, which is a quality I want in most things. I have strong opinions about SPF that I have suppressed for several columns now, and the short version is this: the best sunscreen is the one you put on, which sounds obvious until you consider how many expensive options I have abandoned at the back of a bathroom shelf because they smelled like a hotel lobby or turned my forehead the colour of a plastered wall. This one goes on last, every morning, even in winter, even in Istanbul in January, which is grey and cold and not remotely sunny, and I wear it anyway because that is not actually the point.
        </p>

        <div className="na-pull-big reveal">
          The best product is the one you use without deciding to. That's the whole test.
        </div>

        <p>
          <strong>The lip balm I've been using for years.</strong> I'll tell you what it is because there's no dignity in being coy about a lip balm: it's Aquaphor. The ointment, not the lip-specific version in the elegant little tube, because the ointment comes in a larger container and costs less and is the same thing. I have it on my desk. I have it in my coat pocket. I have it in three bags and I have no memory of putting it there. I do not use it because it is luxurious. I use it because my lips are dry and this is the thing that fixes that. I have tried the expensive versions. They do not fix it more.
        </p>

        <p>
          <strong>The mascara I keep coming back to.</strong> One coat. That's it. I don't layer. I don't tightline. I don't use a primer or an activating serum or whatever the current scaffolding system is. I apply one coat of a tubing formula — the kind that comes off with warm water and doesn't leave the dark rings under my eyes that I used to wake up with, which I had assumed for years was just my face — and that is the entire eye routine. I have switched mascaras four times in the last three years. I have come back to this one all four times. I consider this reasonably definitive.
        </p>

        <div className="na-dinkus" aria-hidden="true">
          <span>·</span><span>·</span><span>·</span>
        </div>

        {/* ---- III. What didn't make the list ---- */}
        <h3 className="na-sub">What didn't make the list.</h3>

        <p>
          The toner I used for three years and then didn't, because I realized one afternoon that I had no idea what it was doing. I still have most of a bottle. I keep it as a reminder that length of use is not the same as evidence of effect.
        </p>
        <p>
          The oil I was convinced would be on this list. It had two good years. Then a reformulation that the brand did not announce, because brands never announce reformulations — they just change the packaging slightly and hope you don't notice. I noticed. The new version sits on the skin differently. Not wrong, exactly. Just not right enough to justify the space it takes up in a five-item list.
        </p>
        <p>
          The eye cream. All of them, collectively. There are twelve on my shelf, which is eleven more than I need, and the one I use most is a face moisturiser decanted into a small pot that I keep by the mirror. The eye cream category is, in my view, mostly optimistic fiction sold in very small containers at very large prices. I include this disclaimer because I have a moral obligation, having written a products column, to be honest about the category I find least defensible.
        </p>
        <p>
          Everything else I own but didn't mention is either aspirational, sentimental, or bought on a Tuesday afternoon in a state I can only describe as mild hopefulness. None of that qualifies.
        </p>

        {/* End mark */}
        <div className="na-end">
          <span className="na-end-mark">¶</span>
          <span className="na-end-name">Filed by Nelly, from the desk · 18 April</span>
          <span className="na-end-meta">N. 08 · S/S 26</span>
        </div>
      </article>

      {/* Sticky margin */}
      <aside className="na-margin">
        <div className="na-margin-card thin">
          <div className="na-mc-eyebrow">Sections</div>
          <div className="na-toc">
            {NA_TOC.map((s, i) => (
              <a key={i} href="#" className="na-toc-item">
                <span>{s.t}</span>
                <span className="num">{s.n}</span>
              </a>
            ))}
          </div>
        </div>

        <div className="na-margin-card">
          <div className="na-mc-eyebrow">From the margin</div>
          <h4 className="na-mc-h">Three notes pinned here.</h4>
          <ul className="na-mc-list">
            {NA_MARGIN_NOTES.map((m, i) => (
              <li key={i}>
                <span className="na-mc-n">{m.n}</span>
                <span>{m.t}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="na-margin-card thin">
          <div className="na-mc-eyebrow">On Nelly's desk</div>
          <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 14.5, lineHeight: 1.45, color: "var(--ink-2)", margin: 0 }}>
            "The best product is the one you use without deciding to."
          </p>
        </div>
      </aside>
    </div>
  );
}

function NaGallery() {
  return (
    <section className="na-gallery reveal">
      <div className="na-gallery-head">
        <span className="na-gallery-num">·</span>
        <div>
          <div className="na-gallery-eyebrow">Stills · From the shoot</div>
          <h2 className="na-gallery-h">Five things. Three <em>frames.</em></h2>
        </div>
      </div>
      <div className="na-gallery-grid">
        {NA_GALLERY.map((g, i) => (
          <a key={i} href="#" className={`na-gtile ${i === 1 ? "tall" : ""}`}>
            <img src={g.img} alt="" />
            <span className="na-gtile-cap">{g.cap}</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function NaMore() {
  return (
    <section className="na-more reveal">
      <div className="na-more-head">
        <div>
          <div className="na-more-eyebrow">More from the desk</div>
          <h2 className="na-more-h">Other things <em>Nelly</em> is thinking about.</h2>
        </div>
        <a className="na-more-back" href="Nelly.html">
          Back to Nelly's page <span aria-hidden>→</span>
        </a>
      </div>
      <div className="na-more-grid">
        {NA_MORE.map((p, i) => (
          <a key={i} className="na-more-card" href="#">
            <div className="na-more-img">
              <img src={p.img} alt="" />
              <span className="na-more-kick">{p.kick}</span>
            </div>
            <h4>{p.t}</h4>
            <div className="na-more-meta">{p.date} · {p.time} read</div>
          </a>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { NA_ARTICLE, NaMast, NaHero, NaLead, NaBody, NaGallery, NaMore });
