// Nelly Article — "Why Your Pillowcase Is Ruining Your Hair"

const NA_ARTICLE = {
  kicker: "Vol. IV · Column 07 · Hair",
  title: "Why your pillowcase is <em>ruining</em> your hair.",
  deck: "The most boring upgrade I ever made to my hair routine. I did not want to be the kind of person who wrote about pillowcases. And then my hair changed in the third month, and here we are.",
  date: "Tuesday, 22 April 2026",
  read: "5 min read",
  author: "Nelly",
  authorRole: "Beauty & Style Director",
  ig: "@legacybynelly",
  category: "Hair",
  avatar: "/redesign/assets/nelly.png",
  lead: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=1800&q=80&auto=format&fit=crop",
  leadCap: "The pillowcase has no press team. No brand ambassador. Nobody takes a before-and-after of their bedding. Which is exactly why it took me so long.",
  leadCredit: "Fig. 01 · Photographed at the desk",
};

const NA_TOC = [
  { n: "I",   t: "The problem" },
  { n: "II",  t: "What I didn't believe" },
  { n: "III", t: "The switch" },
  { n: "IV",  t: "What changed" },
  { n: "V",   t: "What else I changed" },
];

const NA_MARGIN_NOTES = [
  { n: "01", t: "Thread count is a red herring. A 300-thread-count satin will do more for your hair than a 1,000-thread-count cotton. The material is the variable. The weave count is marketing." },
  { n: "02", t: "Satin or silk: I use satin. Silk is more expensive, more temperamental to wash, and the difference on hair — after eight months of testing both — is not meaningful enough to justify either the price or the dry-cleaning bill." },
  { n: "03", t: "The hair tie at night matters as much as the pillowcase. A loose silk scrunchie at the nape, not an elastic, not a coil. The coil is better than elastic. The scrunchie is better than both. The loose braid is better than all of them." },
];

const NA_MORE = [
  { 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" },
  { kick: "Column", t: "The Five Products I'd Re-Buy Tomorrow",  time: "4 min", date: "Apr 18", img: "https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?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-1515688594390-b649af70d282?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 02 · Before the switch" },
  { img: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 03 · The material" },
  { img: "https://images.unsplash.com/photo-1556228852-80b6e5eeff06?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 04 · The desk, late" },
];

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 07</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 problem ---- */}
        <p className="has-drop">
          <span className="na-drop">I</span>
          don't buy things twice. When something works, I keep it. When it doesn't, I edit it out. My pillowcase was something I never thought to edit — until my hair started telling me otherwise. It told me in the way hair always communicates: slowly, in increments too small to track, until one morning you look at the ends and realise they have been getting shorter without any scissors involved.
        </p>
        <p>
          Cotton is a wonderful material. I wear it, I wash my face with it, I respect it entirely. But at night, against hair, it is essentially a very slow, very polite form of destruction. Every time you move — and you move roughly forty to sixty times a night, according to every sleep researcher who has ever made me feel worse about how I sleep — the hair strand drags against the cotton weave. The cuticle, which is the outer layer of the strand and which looks, under a microscope, like fish scales lying flat, catches. The scales lift. Over time — a month, three months, six months — the strand loses its smooth outer edge, becomes porous where it shouldn't be, breaks at the point of least resistance.
        </p>
        <p>
          Split ends are not just a result of heat or neglect. Many of them happen while you sleep, in what should be the most restorative eight hours of your day. The pillow is doing it. The case is doing it. The cotton is, without any malice whatsoever, combing through your hair five hundred times before you wake up.
        </p>

        <p className="na-note mobile-only">Thread count is a red herring. The material is the variable. The weave count is marketing.</p>

        {/* ---- II. What I didn't believe ---- */}
        <h3 className="na-sub">What I didn't believe.</h3>
        <p>
          I should be honest about my initial response to this information, which was: no. I had read about satin pillowcases the way I had read about jade rollers and collagen drinks — as a category of beauty advice that exists primarily to sell something to someone who has already bought everything else. I am, by professional obligation, deeply sceptical of any claim that the solution to a problem was a product you simply hadn't purchased yet.
        </p>
        <p>
          I had good hair by most measures. Thick, reasonably fast-growing, not particularly prone to frizz except in Istanbul in July, which is not a reflection on the hair. I trimmed it every ten weeks. I used a wide-tooth comb when wet, a boar bristle brush when dry, and a heat protectant before the dryer. I was doing the things. I did not need a pillowcase.
        </p>

        <blockquote className="na-pull">
          The friction is invisible. That's the problem. Cotton doesn't feel rough. It feels like cotton.
        </blockquote>

        <p>
          And then a colleague — a deputy beauty editor who has never been wrong about anything in the seven years I have known her — mentioned, without ceremony, that she had stopped cutting her hair as frequently since switching to satin. Not because she believed it. Because she had noticed it. That's a different category of claim. I filed it away.
        </p>

        {/* ---- III. The switch ---- */}
        <h3 className="na-sub">The switch.</h3>
        <p>
          I switched on a Tuesday in November because I happened to be in a shop buying duvet covers and they had satin pillowcases near the till for twelve euros. This is not a romantic origin story. I bought two — one for the pillow, one as a spare for washing — and I put one on the bed that night without ceremony or expectation. I did not photograph it. I did not tell anyone. I did not adjust anything else in my routine.
        </p>
        <p>
          The material question, for those who want a concrete answer: I use satin, not silk. Silk is better in theory — a natural protein fibre, more breathable, gentler in ways that are measurable and real. But silk at the thread count that matters costs four times as much and requires hand-washing or dry-cleaning, and I am not the kind of person who treats bed linen as a hand-wash item. Satin is a weave, not a fibre — usually polyester, sometimes nylon — and it provides the same low-friction surface at a fraction of the price and the drama. I have now used both for several months each. My hair does not know the difference.
        </p>

        <p className="na-note mobile-only">Satin is a weave, not a fibre. The low-friction surface is the point — not the material story.</p>

        <div className="na-fig">
          <div className="na-fig-img">
            <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=1400&q=80&auto=format&fit=crop" alt="" />
          </div>
          <div className="na-fig-cap">
            <span className="num">Fig. 02</span>
            <span>The pillowcase in question costs twelve euros. It has been washed forty-odd times. It looks exactly the same. I have recommended it to four people. All four have continued using it.</span>
          </div>
        </div>

        {/* ---- BIG PULL ---- */}
        <div className="na-pull-big reveal">
          The goal is to stop doing damage you didn't know you were doing.
        </div>

        {/* ---- IV. What changed ---- */}
        <h3 className="na-sub">What changed, in order.</h3>
        <p>
          The first month: nothing I could point to. Hair grows half an inch a month on average, which means the ends you're protecting in November won't reach your shoulders until late spring. The changes at the beginning are not in the length — they're in the texture of what's already there. I noticed, in the third week, that my hair was smoother in the morning. Not dramatically. Just less of the mild static frizz that I had assumed was simply what my hair was like.
        </p>
        <p>
          The second month: I stopped reaching for the serum I used to apply to dry ends every other day. This was not a conscious decision. The ends did not seem to need it. I assumed this was coincidence.
        </p>
        <p>
          The third month was when I believed it. My hair, which I trim at a very consistent ten-week interval, was in better condition at the trim than it had been in several years. My stylist — a man in Karaköy who has cut my hair since 2019 and has never once complimented it unprompted — said the ends looked less worn. I asked him to repeat himself. He did not. But I had heard it the first time.
        </p>
        <p>
          What I understand now, that I didn't before, is that protective routines are cumulative in a way that damage is also cumulative. The cotton was taking a small amount every night. The satin gave that amount back. Over three months, the arithmetic became visible.
        </p>

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

        {/* ---- V. What else I changed ---- */}
        <h3 className="na-sub">What else I changed.</h3>
        <p>
          The pillowcase was the beginning of a re-examination I hadn't planned to have. Once I accepted that friction during sleep was damaging the hair, I started paying attention to everything else that touched the hair when I wasn't thinking about it. The hair tie at night was next.
        </p>
        <p>
          I had been sleeping in a cotton elastic — the kind that comes in a bag of twenty for two euros — gathered loosely at the nape. Cotton elastic, it turns out, is essentially a small pillow-case problem concentrated into a band: the elastic grips the strand, the same cuticle-catching happens at the point of contact, and by morning there is a crease in the hair at the line of the tie that takes all day to disappear, if it disappears at all. I switched to a silk scrunchie — large, loose, at the nape in a low bun. The crease stopped.
        </p>
        <p>
          The third change was the braid, which I do now on nights when my hair is longer and I know I'll move a lot. A single loose plait, not tight, not braided to the end — finished with the scrunchie rather than an elastic. It keeps the length from tangling against the pillow for the eight hours the pillowcase isn't enough to cover on its own. I look, at this stage, entirely like someone's grandmother. This does not concern me. My grandmother had extraordinary hair into her eighties.
        </p>
        <p>
          None of these changes cost more than thirty euros in total. None of them require more than ninety additional seconds at bedtime. The pillowcase I am still using is the one I bought for twelve euros at a shop near a tram stop in November. I have not upgraded it. I have not needed to.
        </p>
        <p>
          The most consistent lesson in this work — and I have been in this field long enough to have a few — is that the things that actually do something are usually not the things with the most interesting bottle. Sometimes the thing that helps is a weave of polyester on a Tuesday. You don't have to love it. You just have to leave it on the bed.
        </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. 07 · 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 headboard.</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 hair advice I've ever received came from a man in Karaköy who charges sixty euros and speaks in incomplete sentences."
          </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>quiet</em> change.</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 });
