/* global React */

const NC_IMG = {
  hero:    "https://images.unsplash.com/photo-1638391506914-fb6e9a26d9d8?w=1800&q=80", // navy knit / crewneck
  spread1: "https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?w=1200&q=80", // navy knit weave detail
  spread2: "https://images.unsplash.com/photo-1617137968427-85924c800a22?w=900&q=80",  // navy under blazer (men)
  next:    "https://images.unsplash.com/photo-1604176354204-9268737828e4?w=1400&q=80", // raw denim closeup
  alt1:    "https://images.unsplash.com/photo-1620012253295-c15cc3e65df4?w=900&q=80",  // crewneck v-neck
  alt2:    "https://images.unsplash.com/photo-1542060748-10c28b62716f?w=900&q=80",   // 5-pocket denim
};

function NCTopper() {
  return (
    <div className="nc-topper">
      <div className="crumb">
        <a href="/">How To: Fashion</a>
        <span className="sep">/</span>
        <a href="/en/contributors/jt/">JT</a>
        <span className="sep">/</span>
        <a href="/en/contributors/jt/">Starter Five</a>
        <span className="sep">/</span>
        <span className="here">The navy crewneck</span>
      </div>
      <div className="series-stamp">
        <span className="num">01</span> &nbsp;of&nbsp; 05 — Starter Five
      </div>
    </div>
  );
}

function NCHead() {
  return (
    <header className="nc-head">
      <div className="frame" style={{ margin: "0 auto" }}>
        <div className="kicker">A defense, in five parts</div>
        <h1>The navy <span className="it">crewneck.</span></h1>
        <p className="standfirst">
          The single piece in a man’s closet that quietly does the most. A working argument for owning one good one — and almost nothing else like it.
        </p>
        <div className="byline">
          <span>By <span className="name"><a href="/en/contributors/jt/">JT</a></span></span>
          <span className="div" />
          <span>Starter Five · No. 01</span>
          <span className="div" />
          <span>April 26, 2026</span>
          <span className="div" />
          <span>9 min read</span>
        </div>
      </div>
    </header>
  );
}

function NCHero() {
  return (
    <section className="nc-hero" data-screen-label="01 Hero">
      <div className="img" style={{ backgroundImage: `url(${NC_IMG.hero})` }}>
        <span className="corner">Plate I · Mid-weight merino · Navy</span>
        <span className="credit">Photographed in Atlanta · 2026</span>
      </div>
      <div className="caption">
        <span>Plate I — The reference garment, photographed flat.</span>
        <span className="accent">Roll 02 · Frame 04</span>
      </div>
    </section>
  );
}

function NCMetaStrip() {
  return (
    <section className="nc-meta-strip" data-screen-label="02 Meta">
      <div className="grid">
        <div className="cell">
          <div className="l">Filed under</div>
          <div className="v">Build / Knitwear</div>
        </div>
        <div className="cell">
          <div className="l">Tested</div>
          <div className="v">14 sweaters</div>
        </div>
        <div className="cell">
          <div className="l">Picks</div>
          <div className="v it">1 of 14</div>
        </div>
        <div className="cell">
          <div className="l">Wear cycle</div>
          <div className="v">3×/week · 4 winters</div>
        </div>
        <div className="cell">
          <div className="l">Sponsored</div>
          <div className="v">None</div>
        </div>
        <div className="cell share">
          <div className="l">Share</div>
          <div className="share-row">
            <span className="b">L</span>
            <span className="b">T</span>
            <span className="b">M</span>
            <span className="b">↗</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function NCBody1() {
  return (
    <section className="nc-article" data-screen-label="03 Body">
      <div className="nc-col">
        <p className="lede">
          There is a very long version of this argument and a very short one. The long version
          involves looms in the north of England, the price of merino at auction, and a dozen
          minor heresies about how a sweater should sit on a man’s shoulders. The short version
          fits inside a sentence: <em>buy one good navy crewneck, in your actual size, and wear it for ten years.</em>
        </p>
        <p>
          What follows is the long version, because the short one tends to get ignored.
        </p>
        <p>
          The case for the navy crewneck is older than most of the rules people fight about.
          It does not announce itself. It does not photograph well. It does not, on its own,
          look like very much. Put it on, though, and the rest of the closet behaves. A
          rumpled oxford starts looking deliberate. A weekend chino reads as a trouser. The
          rotation gets simpler — which is the entire point of the rotation.
        </p>
        <h2><span className="num">01.</span>The case <span className="it">for navy first.</span></h2>
        <p>
          Black is severe and shows everything; charcoal is good but flatters fewer skins;
          cream looks marvelous and stains in week two. Navy sits between the work-week and
          the weekend the way nothing else does. Under a blazer, it disappears into the
          composition. Over a tee, it dresses things up by half a degree. It is, structurally,
          the same color as your father’s suit and your son’s baseball cap. That is a feature.
        </p>
        <p>
          One argument worth dispatching: <strong>navy is not boring.</strong> Boring is
          owning seven things that all look slightly different and none of which work
          together. Navy is the opposite of that — it is the color you reach for when the
          closet is doing its job.
        </p>
      </div>
    </section>
  );
}

function NCPull() {
  return (
    <aside className="nc-pull">
      <div className="frame">
        <div className="q">“</div>
        <div>
          <blockquote>
            Buy the sweater that looks <span className="accent">slightly more expensive</span> than you’d like to pay for. Wear it until it remembers your shoulders.
          </blockquote>
          <cite>— JT · Starter Five, No. 01</cite>
        </div>
      </div>
    </aside>
  );
}

function NCSpread() {
  return (
    <section className="nc-spread" data-screen-label="04 Spread">
      <div className="pane tall" style={{ backgroundImage: `url(${NC_IMG.spread1})` }}>
        <span className="stamp">Plate II · The weave</span>
        <span className="cap"><span className="accent">Detail</span> — Single-jersey, fine-gauge, mid-weight</span>
      </div>
      <div className="pane short" style={{ backgroundImage: `url(${NC_IMG.spread2})` }}>
        <span className="stamp">Plate III · Worn</span>
        <span className="cap"><span className="accent">In use</span> — Under a navy hopsack, over an OCBD</span>
      </div>
    </section>
  );
}

function NCBody2() {
  return (
    <section className="nc-article" style={{ paddingTop: 0 }}>
      <div className="nc-col">
        <h2><span className="num">02.</span>Fabric, <span className="it">in plain English.</span></h2>
        <p>
          You want <strong>merino</strong>. Specifically, you want fine-gauge merino in the 18.5
          to 19.5 micron range, knit as a smooth single-jersey or fine 12-gauge. That is a lot
          of jargon to say: <em>the sweater should feel like a t-shirt that decided to grow up.</em>
          Anything coarser belongs on a fishing boat. Anything finer is a base layer dressed up
          for a wedding.
        </p>
        <p>
          A few notes on weight. Mid-weight (around 280–320 g/m) earns its keep in three
          seasons; lightweight (under 240) is a layering piece, not a sweater; heavyweight
          (over 360) is a sweater for an occasion, not a uniform. We are building a uniform.
          Pick the middle.
        </p>
        <p>
          Skip cashmere here, at least at this price point. Cashmere of the kind worth
          owning starts at numbers most people don’t want to spend on a single sweater, and
          cashmere of the kind sold at outlet malls pills inside a season. A great merino,
          for the same money, will outlast a bad cashmere by a factor of five.
        </p>
        <h2><span className="num">03.</span>Fit, <span className="it">in three measurements.</span></h2>
      </div>
    </section>
  );
}

function NCTest() {
  return (
    <section className="nc-test" data-screen-label="05 Fit">
      <div className="nc-test-head">
        <div className="num">No. 03</div>
        <h2>Three measurements <span className="it">to argue with the mirror about.</span></h2>
        <div className="meta">If two are wrong<br/>—the sweater is wrong</div>
      </div>
      <div className="nc-test-grid">
        <div className="nc-test-cell">
          <div className="label"><span className="n">i.</span> Shoulder seam</div>
          <h3 className="h">Lands on <span className="it">your shoulder bone.</span></h3>
          <p className="b">
            Not an inch past, not a half-inch shy. The dropped-shoulder thing has its
            place; that place is not your starter sweater. The shoulder seam sets the
            attitude of the entire garment.
          </p>
        </div>
        <div className="nc-test-cell">
          <div className="label"><span className="n">ii.</span> Body length</div>
          <h3 className="h">Hits the <span className="it">top of the fly.</span></h3>
          <p className="b">
            Long enough to tuck if you want to. Short enough that it doesn’t. Most
            men wear one that’s a half-size too long; you’ll spot it in any photo
            taken from the side.
          </p>
        </div>
        <div className="nc-test-cell">
          <div className="label"><span className="n">iii.</span> Sleeve length</div>
          <h3 className="h">A thumb’s width <span className="it">past the wrist bone.</span></h3>
          <p className="b">
            With a shirt cuff peeking out by a quarter-inch when worn over an oxford.
            Anything shorter looks like you grew out of it. Anything longer is a
            thing for a bigger person.
          </p>
        </div>
      </div>
    </section>
  );
}

function NCPick() {
  return (
    <section className="nc-pick" data-screen-label="06 Pick">
      <div className="nc-pick-card">
        <div className="ph">
          <span className="frame-no">Plate IV · The pick</span>
          <span className="editor-mark">Editor’s pick</span>
          <span className="ph-label">Product shot · navy crewneck</span>
        </div>
        <div className="body">
          <div className="label">No. 04 — What to actually buy</div>
          <h3 className="nm">The merino crewneck, <span className="it">honestly priced.</span></h3>
          <p className="brand">Sunspel · Fine merino crew · Navy</p>
          <p>
            British-made, fine 12-gauge merino, mid-weight, ribbed crew with a
            collar that holds its shape past the third wash. The pair sitting in
            my drawer is four winters in and looks better than the day it
            arrived. The most useful clothing dollar I’ve spent this decade.
          </p>
          <div className="specs">
            <div className="row"><span className="l">Fabric</span><span className="v">100% merino · 19 micron</span></div>
            <div className="row"><span className="l">Weight</span><span className="v">300 g/m²</span></div>
            <div className="row"><span className="l">Origin</span><span className="v">Long Eaton, UK</span></div>
            <div className="row"><span className="l">Care</span><span className="v">Cold hand-wash, lay flat</span></div>
          </div>
          <div className="ft">
            <div className="price">$245 <small>About</small></div>
            <button className="cta">Shop the pick →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function NCAlso() {
  const items = [
    {
      brand: "Smartwool · Sparwood Crew",
      nm: ["The honest ", { it: "$120 version." }],
      copy: "Coarser hand than the Sunspel — but it’ll outlive your phone. The pick if you’re stocking a closet on a budget."
    },
    {
      brand: "John Smedley · Lundy",
      nm: ["The dressed-up ", { it: "alternative." }],
      copy: "Sea-island cotton, finer gauge, slightly slimmer cut. For when the sweater is technically the outerwear."
    },
  ];
  return (
    <section className="nc-also">
      <div className="label">
        <span>Also considered</span>
        <span className="it">— two pairs that nearly made it.</span>
      </div>
      <div className="grid">
        {items.map((it, i) => (
          <article className="nc-also-card" key={i}>
            <div className="ph"><span>Product shot</span></div>
            <div className="body">
              <div className="b-brand">{it.brand}</div>
              <h4 className="b-nm">
                {it.nm.map((p, j) => typeof p === "string" ? <React.Fragment key={j}>{p}</React.Fragment> : <span key={j} className="it">{p.it}</span>)}
              </h4>
              <p>{it.copy}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function NCAvoid() {
  return (
    <section className="nc-avoid">
      <div className="box">
        <h3 className="ttl">
          <small>Caveat emptor</small>
          What to <em>not</em> buy.
        </h3>
        <ul>
          <li>
            <span><b>Anything labeled “oversized.”</b>The dropped-shoulder, hip-grazing thing has its place — your first navy crewneck is not it. Buy a sweater that fits you, not the silhouette.</span>
          </li>
          <li>
            <span><b>Acrylic and acrylic blends.</b>They look right on the rack and pill into static the second you wear them under a coat. Not a shortcut worth taking.</span>
          </li>
          <li>
            <span><b>Cashmere under $200.</b>Almost certainly low-grade fiber, almost certainly going to bobble within a season. Spend on merino now, on cashmere later.</span>
          </li>
          <li>
            <span><b>The logo.</b>It dates the sweater faster than the sweater dates itself.</span>
          </li>
        </ul>
      </div>
    </section>
  );
}

function NCBody3() {
  return (
    <section className="nc-article" style={{ paddingTop: 0 }}>
      <div className="nc-col">
        <h2><span className="num">05.</span>How <span className="it">to keep one alive.</span></h2>
        <p>
          Merino does not need much. Wear it twice, hang it overnight on a wide wooden
          hanger, and let it air. Wash by hand in cold water with a wool detergent —
          Eucalan is the one to buy — every five or six wears. Lay flat to dry on a clean
          towel. That is the entire ritual.
        </p>
        <p>
          Pills are not the enemy. Pills are evidence the sweater is being worn.
          Run a cashmere comb (or a cheap pumice stone) along the friction zones —
          the underarms, the inside of the forearms — once a season. Done. The
          sweater looks newer than it is for almost no effort, and the alternative
          is buying a new one every two years, which is the actual expensive
          option.
        </p>
        <p>
          One last thing. A good sweater earns a memory of its owner. You will,
          after a couple of winters, be able to spot yours in a stack of three
          identical ones. The shoulders will have softened where your bag rides.
          The ribbing at the cuff will sit a hair looser. This is good. Your
          sweater is becoming yours. Keep going.
        </p>
      </div>
    </section>
  );
}

function NCSign() {
  return (
    <section className="nc-sign">
      <div className="av" style={{ backgroundImage: "url(/assets/jt.png)" }} />
      <div className="body">
        <div className="who">
          <span className="accent">JT</span> — Lane Editor, Men <small>Atlanta · 2026</small>
        </div>
        <p style={{margin:0}}>
          Eight years on the workroom floor, mostly cured of trend-chasing.
          Writes the Starter Five, the Saturday mailbag, and the case for
          owning fewer things.
        </p>
      </div>
    </section>
  );
}

function NCRelated() {
  return (
    <section className="nc-related" data-screen-label="07 Related">
      <div className="frame">
        <div className="head">
          <div className="num">No. 06</div>
          <h3>Read <span className="it">next.</span></h3>
          <div className="meta">From the Starter Five<br/>—and the archive</div>
        </div>
        <div className="grid">
          <article className="nc-related-card next-up">
            <div className="img" style={{ backgroundImage: `url(${NC_IMG.next})` }} />
            <div className="meta"><span className="num">Starter Five · No. 02</span><span>Next up</span></div>
            <h4>Raw 5-pocket denim, <span className="it">year one.</span></h4>
            <p>What happens when you buy a pair of jeans stiff and wear them weekly for twelve months — and why it’s the second piece of the five.</p>
          </article>
          <article className="nc-related-card">
            <div className="img" style={{ backgroundImage: `url(${NC_IMG.alt1})` }} />
            <div className="meta"><span className="num">Build · No. 113</span><span>5 min</span></div>
            <h4>Crewneck or v-neck, <span className="it">settled.</span></h4>
            <p>There is a right answer; it has been the right answer for forty years.</p>
          </article>
          <article className="nc-related-card">
            <div className="img" style={{ backgroundImage: `url(${NC_IMG.alt2})` }} />
            <div className="meta"><span className="num">Wear · No. 116</span><span>6 min</span></div>
            <h4>Five-pocket denim, <span className="it">two pairs is enough.</span></h4>
            <p>Two pairs cover everything denim should — one dark, one worn-in.</p>
          </article>
        </div>
      </div>
    </section>
  );
}

window.NCTopper = NCTopper;
window.NCHead = NCHead;
window.NCHero = NCHero;
window.NCMetaStrip = NCMetaStrip;
window.NCBody1 = NCBody1;
window.NCPull = NCPull;
window.NCSpread = NCSpread;
window.NCBody2 = NCBody2;
window.NCTest = NCTest;
window.NCPick = NCPick;
window.NCAlso = NCAlso;
window.NCAvoid = NCAvoid;
window.NCBody3 = NCBody3;
window.NCSign = NCSign;
window.NCRelated = NCRelated;
