// Nelly Article — "Five-Minute Everyday Eye"

const NA_ARTICLE = {
  kicker: "Vol. IV · Column 05 · Makeup",
  title: "Five-Minute <em>Everyday</em> Eye.",
  deck: "One pencil, one shadow, one mascara. The formula Nelly has used for a decade, and the three products she would take to the airport in a coin purse.",
  date: "Tuesday, 22 April 2026",
  read: "4 min read",
  author: "Nelly",
  authorRole: "Beauty & Style Director",
  ig: "@legacybynelly",
  category: "Makeup",
  avatar: "/redesign/assets/nelly.png",
  lead: "https://images.unsplash.com/photo-1571875257727-256c39da42af?w=1800&q=80&auto=format&fit=crop",
  leadCap: "The formula hasn't changed since Istanbul. Three products, five minutes, done.",
  leadCredit: "Fig. 01 · Styled by Nelly",
};

const NA_TOC = [
  { n: "I",   t: "The formula" },
  { n: "II",  t: "The pencil" },
  { n: "III", t: "The shadow" },
  { n: "IV",  t: "The mascara" },
  { n: "V",   t: "What it cost to simplify" },
];

const NA_MARGIN_NOTES = [
  { n: "01", t: "Pencil, not liquid. Liquid liner requires a steady hand, perfect lighting, and a personality type I have never had before 9am." },
  { n: "02", t: "Matte shadow reads as skin. Shimmer reads as effort. There is a time for shimmer. That time is not a Tuesday." },
  { n: "03", t: "One coat of mascara dries to nothing. Two coats is the eye. Three coats is a mistake that takes eight minutes to fix." },
];

const NA_MORE = [
  { kick: "Column", t: "Why Your Pillowcase Is Ruining Your Hair", time: "5 min", date: "Apr 22", img: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=1200&q=80&auto=format&fit=crop" },
  { kick: "Essay",  t: "Shape Your Brows", time: "7 min", date: "Apr 22", img: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=1200&q=80&auto=format&fit=crop" },
  { 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" },
];

const NA_GALLERY = [
  { img: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 02 · The flatlay. Three products. That's the whole sentence." },
  { img: "https://images.unsplash.com/photo-1515688594390-b649af70d282?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 03 · Minimal, not sparse. There is a difference." },
  { img: "https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 04 · The desk at 7am. This is where the five minutes happens." },
];

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 05</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. The formula ---- */}
        <p className="has-drop">
          <span className="na-drop">T</span>
          en years ago, I was doing my eyes in seven steps and calling it minimal. A primer, a base shadow, two transition shades, a liner, a highlight, a mascara. I was spending twenty-two minutes on something most people pass on the street without noticing. I timed it. I am insufferable.
        </p>
        <p>
          Then I moved — Istanbul to London, then London to somewhere else for a few years — and at some point between a third-floor flat and a suitcase that refused to close, I made a decision. Three products. One pencil, one shadow, one mascara. Five minutes, any mirror, any light. That formula has not changed since.
        </p>
        <p>
          What surprised me was not that it worked. What surprised me was that it looked better. Not more natural — better. The eye I was creating in seven steps had too many hands in it. The three-product version has a coherence the other one never found.
        </p>

        <p className="na-note mobile-only">Pencil, not liquid. Liquid liner requires a steady hand, perfect lighting, and a personality type I have never had before 9am.</p>

        {/* ---- II. The pencil ---- */}
        <h3 className="na-sub">The pencil, and why it matters most.</h3>
        <p>
          The pencil is doing the majority of the work, which is why most people do it last and wonder why everything looks wrong. A warm brown — not black, not grey, warm brown, the colour of very good espresso — applied to the upper lash line and smudged immediately with a fingertip. Not a brush. A fingertip is warmer and slightly imprecise in a way that reads as deliberate. You want the line to suggest itself, not announce itself.
        </p>
        <p>
          I carry a pencil that costs almost nothing. I have tried the expensive ones, and they are better, and I still carry the one that costs almost nothing because it sharpens reliably and travels without drama. What matters is the formula — creamy, not waxy — and the warmth of the pigment. A cool-toned pencil will make the eye look tired. A warm one makes it look present, which is what we are actually after on a Tuesday morning.
        </p>

        <blockquote className="na-pull">
          The line should suggest itself, not announce itself. There is a version of eyeliner that is armour. This is not that version.
        </blockquote>

        {/* ---- III. The shadow ---- */}
        <h3 className="na-sub">The shadow, and why matte.</h3>
        <p>
          One shadow, pressed matte, taupe or warm beige or something that reads as a deepened version of your own lid. The job of this shadow is not to add colour. The job is to add dimension — to make the eye appear set into the face rather than sitting on top of it. Swept across the lid with a flat brush, brought slightly into the crease, stopped there. Sixty seconds, if that.
        </p>

        <div className="na-fig">
          <div className="na-fig-img">
            <img src="https://images.unsplash.com/photo-1515688594390-b649af70d282?w=1400&q=80&auto=format&fit=crop" alt="" />
          </div>
          <div className="na-fig-cap">
            <span className="num">Fig. 02</span>
            <span>Matte taupe, warm beige, or a shadow that reads as your lid in better light. The palette does not need to be large. It needs to contain this one shade.</span>
          </div>
        </div>

        <p>
          Shimmer is not wrong. Shimmer in the inner corner on a Friday evening is one of the better things I know. But shimmer as a daily step adds a layer of intention that requires justification — it needs to be balanced, blended, considered. Matte asks nothing of you. It sits down, does its work, and does not require a follow-up conversation.
        </p>

        <p className="na-note mobile-only">Matte shadow reads as skin. Shimmer reads as effort. There is a time for shimmer. That time is not a Tuesday.</p>

        {/* ---- IV. The mascara ---- */}
        <h3 className="na-sub">The mascara, and the one rule.</h3>
        <p>
          Two coats, upper lashes only, and then stop. This is the rule. It has no exceptions. One coat dries too quickly to build on. Three coats is where mascara stops being makeup and starts being a structural project — it clumps, it smudges at the outer corner by 2pm, and removing it takes an extra minute you will resent at 11pm.
        </p>

        {/* ---- BIG PULL ---- */}
        <div className="na-pull-big reveal">
          Two coats and stop. The third coat is the one you will spend the rest of the day managing.
        </div>

        <p>
          Lower lashes I leave entirely. This is the opinion that tends to provoke people, and I have made my peace with provoking people. Lower mascara makes the eye look smaller, not larger, and it ages without warning. The upper lash line, treated properly, does not need a counterweight.
        </p>

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

        {/* ---- V. What it cost to simplify ---- */}
        <h3 className="na-sub">What it cost to simplify.</h3>
        <p>
          I gave up the lid primer, which had taken me four years to find and which I had believed, earnestly, was responsible for the longevity of everything above it. I gave up the blending brush and the fan brush and the brush I had bought specifically for the inner corner. I gave up the highlighter I was applying to the brow bone, which I am now certain no one ever noticed.
        </p>
        <p>
          What I kept: the pencil, the shadow, the mascara. What I gained: five minutes every morning that I now spend doing something else, or doing nothing, or simply standing at the window with a coffee in a city I chose for reasons that have nothing to do with my bathroom shelf. This seems like a small thing. It is not a small thing.
        </p>
        <p>
          The three products go in a coin purse when I travel. One of those small leather zip pouches that is too small for anything sensible. They fit exactly. I take nothing else for the eye. I have done this for ten years across a number of countries and I have never wished I had packed more. That, I think, is the only review worth writing.
        </p>

        {/* End mark */}
        <div className="na-end">
          <span className="na-end-mark">¶</span>
          <span className="na-end-name">Filed by Nelly, from the desk · 22 April</span>
          <span className="na-end-meta">N. 05 · 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 I'd pin to the mirror.</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 coin purse is the edit. If it doesn't fit, it doesn't come."
          </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">Three frames from a <em>five-minute</em> formula.</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 });
