/* global React */

const TEE_IMG = {
  hero: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=1400&q=80",
  p1: "https://images.unsplash.com/photo-1516257984-b1b4d707412e?w=900&q=80",
  p2: "https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?w=900&q=80",
  p3: "https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=900&q=80",
  p4: "https://images.unsplash.com/photo-1564859228273-274232fdb516?w=900&q=80",
  p5: "https://images.unsplash.com/photo-1495105787522-5334e3ffa0ef?w=900&q=80",
  p6: "https://images.unsplash.com/photo-1581655353564-df123a1eb820?w=900&q=80",
};

/* ============== HERO ============== */
function LTHero() {
  return (
    <section className="lt-hero" data-screen-label="01 Hero">
      <div className="frame">
        <div className="copy">
          <div className="crumb">
            <a href="/en/men/">Men</a><span>/</span>
            <a href="/en/men/build/">Build</a><span>/</span>
            <a href="/en/men/build/basics/">Basics</a><span>/</span>
            <span className="here">Best white tees</span>
          </div>
          <div className="kicker">No. 01 · The Cotton Foundation</div>
          <h1>Six white t-shirts <span className="it">that earn it.</span></h1>
          <div className="byline">
            <span>By <span className="name">Marcus Bell</span></span>
            <span className="div" />
            <span>April 2026</span>
            <span className="div" />
            <span>6 min read</span>
          </div>
        </div>
        <div className="img">
          <span className="credit">Editor's pick · Sunspel Riviera</span>
        </div>
      </div>
    </section>
  );
}
window.LTHero = LTHero;

/* ============== STANDFIRST ============== */
function LTStandfirst() {
  return (
    <section className="lt-standfirst" data-screen-label="02 Standfirst">
      <div className="frame">
        <div className="meta">
          <div className="row"><span>Filed under</span><span>Basics / Tees</span></div>
          <div className="row"><span>Tested</span><span>14 brands</span></div>
          <div className="row"><span>Picks</span><span>6 of 14</span></div>
          <div className="row"><span>Wear cycle</span><span>3–4 days · 30 wash</span></div>
          <div className="row"><span>Updated</span><span>Quarterly</span></div>
          <div className="row"><span>Sponsored</span><span>None</span></div>
        </div>
        <div className="body">
          <p>The white t-shirt is the only piece of clothing in a man's closet that is asked to be both <em>completely invisible</em> and completely flawless. It must disappear under a navy suit and hold its own with raw denim, take a sweat through and a wash and still photograph the same on Tuesday as it did the Tuesday before.</p>
          <p>Almost no white t-shirt does this. Six of them — give or take a season — actually do.</p>
          <p>We tested fourteen on the same body, the same machine, the same eight weeks. The picks below survived in that order. We've kept the writing short on purpose; the tees we like don't ask for explanations.</p>
        </div>
      </div>
    </section>
  );
}
window.LTStandfirst = LTStandfirst;

/* ============== DECK — the rule ============== */
function LTDeck() {
  return (
    <section className="lt-deck" data-screen-label="03 Rule">
      <div className="frame">
        <span className="one">1.</span>
        <p className="text">
          <span className="lead">The only rule that matters:</span> a white t-shirt should weigh between five-and-a-half and seven ounces, sit at the belt buckle, and survive a hot wash on cotton without warping at the collar.
          <small>Everything below is a footnote to that sentence.</small>
        </p>
        <div className="stamp">Rule of one<br />— in print since '96 —</div>
      </div>
    </section>
  );
}
window.LTDeck = LTDeck;

/* ============== PICKS ============== */
const PICKS = [
  {
    n: "I", brand: "Sunspel · Riviera",
    title: "The one Daniel Craig wore in", it: "Casino Royale.",
    write: "Twenty-four-singles cotton, sea-island descended. The cleanest white tee made anywhere; it has been since 1860.",
    specs: { weight: "5.8 oz", cut: "Slim", origin: "Long Eaton, UK", washes: "30+" },
    price: "$95", verdict: "If you buy one tee.",
    img: "p1", ed: true,
  },
  {
    n: "II", brand: "Buck Mason · Curved",
    title: "The American answer,", it: "with a hem.",
    write: "Slub-cotton with a curved hem so it sits flat untucked. Made in California; the value pick that actually means it.",
    specs: { weight: "6.2 oz", cut: "Regular", origin: "Los Angeles", washes: "40+" },
    price: "$45", verdict: "Best under fifty.",
    img: "p2",
  },
  {
    n: "III", brand: "Asket · The Tee",
    title: "Swedish minimalism,", it: "spreadsheet edition.",
    write: "Pima cotton from Peru, knit in Portugal, sized in nine lengths so the hem actually meets your waist. The tee for the man who has opinions about supply chains.",
    specs: { weight: "6.5 oz", cut: "Regular", origin: "Portugal", washes: "50+" },
    price: "$55", verdict: "If your torso is unusual.",
    img: "p3",
  },
  {
    n: "IV", brand: "Merz b. Schwanen · 215",
    title: "Loopwheeled in Germany,", it: "since 1911.",
    write: "Heavyweight, side-seamless, woven on antique circular looms that produce ten meters a day. Thicker than you'd expect; better than you'd expect, too.",
    specs: { weight: "7.4 oz", cut: "Boxy", origin: "Albstadt, DE", washes: "100+" },
    price: "$120", verdict: "Buy once, own forever.",
    img: "p4",
  },
  {
    n: "V", brand: "Uniqlo · Supima Crew",
    title: "The one that already lives", it: "in your drawer.",
    write: "Fine cotton, set-in shoulder, perfectly fine. We'd rank it lower if it cost more, and higher if it lasted past summer two.",
    specs: { weight: "5.4 oz", cut: "Regular", origin: "China / Vietnam", washes: "25" },
    price: "$15", verdict: "The honest budget option.",
    img: "p5",
  },
  {
    n: "VI", brand: "The Row · Errigal",
    title: "If money is a", it: "rounding error.",
    write: "Cotton-cashmere blend, ten ounces of weight, one-thousand-dollar drape. Buy it for the wedding, hand-wash it for the divorce.",
    specs: { weight: "10 oz", cut: "Boxy", origin: "Italy", washes: "Hand only" },
    price: "$390", verdict: "For the well-funded.",
    img: "p6",
  },
];
function LTPicks() {
  return (
    <section className="lt-picks" data-screen-label="04 Picks">
      <div className="frame">
        <header className="head">
          <div className="num">04</div>
          <div>
            <div className="eyebrow">The picks · Six of fourteen</div>
            <h2>What survived <span className="it">eight weeks.</span></h2>
          </div>
          <div className="meta">Listed best to last<br />Across price tiers</div>
        </header>
        <div className="pick-list">
          {PICKS.map(p => (
            <article key={p.n} className={`pick${p.ed ? " ed" : ""}`}>
              <span className="n">{p.n}</span>
              <div className="img" style={{ backgroundImage: `url(${TEE_IMG[p.img]})` }} />
              <div className="body">
                <span className="brand">{p.brand}</span>
                <h3>{p.title} <span className="it">{p.it}</span></h3>
                <p className="write">{p.write}</p>
                <div className="specs">
                  <span>Weight<b>{p.specs.weight}</b></span>
                  <span>Cut<b>{p.specs.cut}</b></span>
                  <span>Made<b>{p.specs.origin}</b></span>
                  <span>Washes<b>{p.specs.washes}</b></span>
                </div>
              </div>
              <div className="price">
                <span className="amt">{p.price}</span>
                <span className="unit">retail · usd</span>
                <span className="verdict">{p.verdict}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.LTPicks = LTPicks;

/* ============== FIT + FABRIC ============== */
function LTFitFabric() {
  return (
    <section className="lt-ff" data-screen-label="05 Fit + Fabric">
      <div className="frame">
        <div className="col">
          <span className="eyebrow">A · Fit</span>
          <h3>Five places it <span className="it">can fail.</span></h3>
          <p>If the tee is wrong, it's wrong in one of these five places. Memorize them; you can fit a shirt in a dressing room mirror in under sixty seconds.</p>
          <ul className="rules">
            <li data-n="01"><b>Shoulder seam.</b> Sits at the bone, not on the deltoid. <span>Half-an-inch over is a hoodie. Half-an-inch under is your father's.</span></li>
            <li data-n="02"><b>Sleeve hem.</b> Lands halfway down the bicep. <span>Shorter reads gym; longer reads jersey.</span></li>
            <li data-n="03"><b>Chest.</b> Two fingers between fabric and ribs when arms are down. <span>One is tight; three is sad.</span></li>
            <li data-n="04"><b>Body length.</b> Reaches the belt buckle. <span>Tucks at the third loop. Anything longer is a tunic.</span></li>
            <li data-n="05"><b>Collar.</b> Sits flat after wash three. <span>If it warps, the tee is over.</span></li>
          </ul>
        </div>
        <div className="col">
          <span className="eyebrow">B · Fabric</span>
          <h3>Five-and-a-half is light. <span className="it">Seven is right.</span></h3>
          <p>Cotton t-shirts are sold by weight in ounces per square yard. The number tells you everything before you put it on — drape, opacity, longevity, how much sweat shows through.</p>
          <div className="weight-scale">
            {[
              { oz: "4.5 oz", lbl: "Tissue", w: "20%" },
              { oz: "5.4 oz", lbl: "Lightweight", w: "40%" },
              { oz: "6.0 oz", lbl: "Standard", w: "55%", hi: true },
              { oz: "6.5 oz", lbl: "Mid-heavy", w: "70%", hi: true },
              { oz: "7.5 oz", lbl: "Heavyweight", w: "85%" },
              { oz: "10 oz",  lbl: "Tube", w: "100%" },
            ].map((r, i) => (
              <div key={i} className={`row${r.hi ? " hi" : ""}`}>
                <span className="oz">{r.oz}</span>
                <span className="bar"><i style={{ width: r.w }} /></span>
                <span>{r.lbl}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.LTFitFabric = LTFitFabric;

/* ============== CARE ============== */
function LTCare() {
  return (
    <section className="lt-care" data-screen-label="06 Care">
      <div className="frame">
        <h3>Care, in <span className="it">four moves.</span></h3>
        <div className="grid">
          <div className="cell">
            <span className="n">01 · Wash</span>
            <h5>Cold, <span className="it">inside out.</span></h5>
            <p>Hot water yellows white cotton over time and shrinks the collar. Cold and inside-out keeps the knit tight for forty washes instead of fifteen.</p>
          </div>
          <div className="cell">
            <span className="n">02 · Dry</span>
            <h5>Hang, <span className="it">don't tumble.</span></h5>
            <p>The tumble dryer is what kills tees, not the washer. Hang on a flat rack; reshape the shoulder seam with two fingers while damp.</p>
          </div>
          <div className="cell">
            <span className="n">03 · Whiten</span>
            <h5>Oxygen, <span className="it">not chlorine.</span></h5>
            <p>A scoop of oxygen-bleach every fourth wash brings white cotton back. Chlorine eats the fibers and turns the hem yellow inside a year.</p>
          </div>
          <div className="cell">
            <span className="n">04 · Retire</span>
            <h5>The pit <span className="it">decides.</span></h5>
            <p>The shoulder will fail before the chest. When the seam puckers or the underarm yellows, it's done. Twelve months on a daily-driver is honest.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.LTCare = LTCare;

/* ============== VERDICT ============== */
function LTVerdict() {
  return (
    <section className="lt-verdict" data-screen-label="07 Verdict">
      <div className="frame">
        <div className="stamp">
          <small>The verdict</small>
          Sunspel.
        </div>
        <div className="copy">
          <p>If you buy <span className="it">one</span> tee this year, buy the Sunspel Riviera. If you buy three, add the Buck Mason and the Merz. The other three are good answers to specific questions.</p>
          <p style={{ fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: "20px", color: "var(--lf-acc)" }}>
            None of this is sponsored. None of these brands know we wrote this. Both facts are how you can tell.
          </p>
          <div className="signoff">
            <span>By <span className="nm">Marcus Bell</span></span>
            <span>·</span>
            <span>Filed April 2026</span>
            <span>·</span>
            <span>Vol. 03 · Issue 14</span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.LTVerdict = LTVerdict;

/* ============== RELATED ============== */
function LTRelated() {
  const items = [
    { n: "Basics · 02", t: "Crewneck vs.", it: "v-neck", d: "Why the v-neck lost the argument fifty years ago and stayed lost." },
    { n: "Basics · 03", t: "Heavyweight tee,", it: "decoded", d: "When seven ounces is right, when it tips into upholstery." },
    { n: "Basics · 04", t: "How to fold", it: "a t-shirt", d: "The drawer-friendly fold for men who hate Marie Kondo." },
  ];
  return (
    <section className="lt-related" data-screen-label="08 Related">
      <div className="frame">
        <h4>Keep reading · The Cotton Foundation</h4>
        <div className="grid">
          {items.map((it, i) => (
            <a key={i} className="card">
              <span className="n">{it.n}</span>
              <h5>{it.t} <span className="it">{it.it}</span></h5>
              <p>{it.d}</p>
              <span className="arr">Read guide →</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.LTRelated = LTRelated;