// Nelly · The Second Cleanse — section components

function TscTopbar() {
  const NAV = [
    { label: "Skin", href: "/skin/en/" },
    { label: "Makeup", href: "/makeup/en/" },
    { label: "Hair", href: "/hair/en/" },
    { label: "Body", href: "/body/en/" },
    { label: "Fragrance", href: "/fragrance/en/" },
  ];
  return (
    <header className="na-topbar">
      <div className="na-topbar-inner">
        <a href="/" className="na-brand">HowTo Beauty <em>Edition</em></a>
        <nav className="na-topnav" aria-label="Primary">
          {NAV.map((n) => (
            <a key={n.label} href={n.href}>{n.label}</a>
          ))}
        </nav>
      </div>
    </header>
  );
}

function TscCrumb() {
  return (
    <nav className="na-crumb" aria-label="Breadcrumb">
      <a href="/">Home</a>
      <span className="sl">/</span>
      <a href="/en/">Edition</a>
      <span className="sl">/</span>
      <a href="/en/nelly/">Nelly</a>
      <span className="sl">/</span>
      <span className="cur">The Second Cleanse</span>
    </nav>
  );
}

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

function TscHero() {
  const A = TSC_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" />
        <span>{A.date}</span>
        <span className="dot" />
        <span>{A.read}</span>
        <span className="dot" />
        <span>Filed under Skin</span>
      </div>
    </header>
  );
}

function TscLead() {
  const A = TSC_ARTICLE;
  return (
    <figure className="reveal" style={{ margin: 0 }}>
      <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 TscBody() {
  return (
    <div className="na-body-grid">
      <article className="na-col reveal">
        <p className="has-drop">
          <span className="na-drop">T</span>
          here is a minute, twice a day, when I take everything off my face. Not most things. Everything. The makeup, the SPF, the air of London, the meeting I shouldn't have taken. Then — and this is the part nobody talks about — I wash my face <em>again.</em>
        </p>
        <p>
          That second wash is the entire piece. It is the difference between skin that looks rested and skin that looks like it survived the day. I have been doing it for nine years. I will be doing it on the morning I die, assuming I have any say in the matter.
        </p>

        <p className="na-note mobile-only">Oil first, then a low-pH gel. Reverse it and you've washed your face for nothing.</p>

        <h3 className="na-sub">The minute, in detail.</h3>
        <p>
          The first cleanse is an oil. A balm, technically — the kind that comes in a small glass jar and feels, on the cheekbone, like an apology. You warm it between your fingers. You press it onto a dry face. You move slowly, in the way you would move if you were trying not to wake somebody. Two passes around the eyes, one across the forehead, one along the jaw. Then a damp cloth. Not muslin. A cotton flannel, the kind your mother used.
        </p>

        <blockquote className="na-pull">
          The point is not to scrub. The point is to ask politely, twice.
        </blockquote>

        <p>
          The second cleanse is a gel — low pH, no fragrance, almost nothing else. A coin in your palm, water from the tap (tepid, never hot), and forty seconds of small circles. Rinse. Pat. Don't rub. The whole thing takes a minute and twelve seconds if I am being slow, fifty-four if I am tired. I have timed it. I am insufferable.
        </p>

        <div className="na-fig">
          <div className="na-fig-img">
            <img src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?w=1400&q=80&auto=format&fit=crop" alt="" />
          </div>
          <div className="na-fig-cap">
            <span className="num">Fig. 02</span>
            <span>The cloth I use is a cotton flannel from a hardware shop in Beyoğlu. It cost the equivalent of one pound. I have eight of them and I will fight anyone for an opinion on muslin.</span>
          </div>
        </div>

        <div className="na-pull-big reveal">
          Skin is the slowest beauty story you'll ever tell. Tell it carefully.
        </div>

        <h3 className="na-sub">Why most people get this wrong.</h3>
        <p>
          They use the wrong oil. They use a foaming cleanser as the second step, which is the cosmetic equivalent of pressure-washing a cashmere coat. They scrub. They use water that is too hot because they want to feel something <em>working,</em> and a cleanser is not supposed to feel like work — it is supposed to feel like nothing, ideally, and then your face is supposed to feel like itself again, only quieter.
        </p>
        <p>
          The other mistake is doing it once. Once is enough to remove the day, technically. But it isn't enough to <em>finish</em> removing the day. There is a film of sunscreen and city that lives, after the first wash, just under the cheekbones — the place where your hand naturally rests when you are tired. The second cleanse takes it off. The first cleanse opens the door. The second cleanse is the conversation.
        </p>

        <p className="na-note mobile-only">Tepid, not hot. Hot water is a story we tell ourselves about feeling clean.</p>

        <h3 className="na-sub">What changed, for me.</h3>
        <p>
          The first month: nothing visible. The second month: my skin stopped being shiny by 4pm, which I had assumed was a permanent condition of being thirty-one and Turkish. The third month: people started using the word <em>rested,</em> which had previously been reserved, in conversations about me, for sarcasm. The sixth month: I stopped buying serums. The ninth month: I gave most of my serums away.
        </p>
        <p>
          What I didn't expect — and this is the actual reason I'm writing it down — is what it did to the rest of the routine. When the cleanse is right, everything after it does less work. Moisturiser becomes one product instead of three. Foundation becomes a tinted balm. The whole top half of my bathroom shelf became unnecessary, and I have not missed any of it once.
        </p>

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

        <h3 className="na-sub">If you can only change one thing.</h3>
        <p>
          Skip the toner. Skip the essence. Skip the third serum you bought in the airport in Seoul on the recommendation of a girl you didn't know. Skip the eye cream, which is moisturiser in a smaller jar at four times the price. Add the second cleanse instead. You will know within six weeks whether I am right, and you will know within twelve whether I have any further credibility on this subject.
        </p>
        <p>
          I should warn you that nothing about this is dramatic. There will be no before-and-after. You will not post about it. You will, however, stop noticing your skin in the wrong way, which is almost always the goal — to stop noticing — and which is a thing most beauty writing forgets to say out loud.
        </p>

        <div className="na-end">
          <span className="na-end-mark">¶</span>
          <span className="na-end-name">Filed by Nelly, from the desk · 11 April</span>
          <span className="na-end-meta">N. 04 · S/S 26</span>
        </div>
      </article>

      <aside className="na-margin">
        <div className="na-margin-card thin">
          <div className="na-mc-eyebrow">Sections</div>
          <div className="na-toc">
            {TSC_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 bathroom mirror.</h4>
          <ul className="na-mc-list">
            {TSC_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(--na-font-serif)", fontStyle: "italic", fontSize: 14.5, lineHeight: 1.45, color: "var(--na-ink-2)", margin: 0 }}>
            "I'm not loyal to a brand. I'm loyal to a step."
          </p>
        </div>
      </aside>
    </div>
  );
}

function TscGallery() {
  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>quiet</em> minute.</h2>
        </div>
      </div>
      <div className="na-gallery-grid">
        {TSC_GALLERY.map((g, i) => (
          <a key={i} href="/en/nelly/" className={`na-gtile ${i === 1 ? "tall" : ""}`}>
            <img src={g.img} alt="" />
            <span className="na-gtile-cap">{g.cap}</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function TscMore() {
  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="/en/nelly/">
          Back to Nelly's page <span aria-hidden>→</span>
        </a>
      </div>
      <div className="na-more-grid">
        {TSC_MORE.map((p, i) => (
          <a key={i} className="na-more-card" href={p.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>
  );
}

function TscFooter() {
  return (
    <footer className="na-foot">
      <div className="na-foot-inner">
        <div className="na-foot-grid">
          <div>
            <h5>HowTo Beauty Edition</h5>
            <p className="colophon">A global community beauty platform — diverse techniques, plain language, edited to the standard of a print magazine.</p>
          </div>
          <div>
            <h5>The HowTo Network</h5>
            <ul>
              <li><a href="https://thehowtonetwork.com">Network</a></li>
              <li><a href="https://howtohomeedition.com">Home</a></li>
              <li><a href="https://howtofoodedition.com">Food</a></li>
              <li><a href="https://howtotraveledition.com">Travel</a></li>
              <li><a href="https://howtotechedition.com">Tech</a></li>
              <li><a href="https://howtofamilyedition.com">Family</a></li>
            </ul>
          </div>
          <div>
            <h5>From Nelly's desk</h5>
            <ul>
              <li><a href="/en/nelly/the-second-cleanse/">The Second Cleanse</a></li>
              <li><a href="/en/nelly/">Wardrobe Schematic</a></li>
              <li><a href="/en/nelly/">Skin First</a></li>
              <li><a href="https://instagram.com/legacybynelly">Instagram</a></li>
            </ul>
          </div>
        </div>
        <div className="na-foot-bottom">
          <span>© 2026 HowTo Beauty Edition</span>
          <span>Edited from the desk · Vol. IV</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  TscTopbar, TscCrumb, TscMast, TscHero, TscLead,
  TscBody, TscGallery, TscMore, TscFooter,
});
