/* global React */

const DT_IMG = {
  hero: "https://images.unsplash.com/photo-1582418702059-97ebafb35d09?w=1800&q=80",
};

function DTTopper() {
  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 Denim Holy Trinity</span>
      </div>
      <div className="series-stamp">
        <span className="num">02</span> &nbsp;of&nbsp; 05 — Starter Five
      </div>
    </div>
  );
}

function DTHead() {
  return (
    <header className="nc-head">
      <div className="frame" style={{ margin: "0 auto" }}>
        <div className="kicker">A working argument, in three pairs</div>
        <h1>The Denim Holy <span className="it">Trinity.</span></h1>
        <p className="standfirst">
          You need three pairs of jeans. Not seven. Not two. Three. The argument for which three — and the part nobody else will tell you about.
        </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. 02</span>
          <span className="div" />
          <span>May 27, 2026</span>
          <span className="div" />
          <span>6 min read</span>
        </div>
      </div>
    </header>
  );
}

function DTHero() {
  return (
    <section className="nc-hero" data-screen-label="01 Hero">
      <div className="img" style={{ backgroundImage: `url(${DT_IMG.hero})` }}>
        <span className="corner">Plates I, II, III · The trinity, photographed</span>
        <span className="credit">Photographed in Atlanta · 2026</span>
      </div>
      <div className="caption">
        <span>The reference set — dark, medium, light. Same cut, three washes.</span>
        <span className="accent">Roll 03 · Frame 01</span>
      </div>
    </section>
  );
}

function DTMetaStrip() {
  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 / Denim</div>
        </div>
        <div className="cell">
          <div className="l">Recommended pairs</div>
          <div className="v">3 <span className="it">(plus one in the garage)</span></div>
        </div>
        <div className="cell">
          <div className="l">Price range</div>
          <div className="v it">$80 – $150</div>
        </div>
        <div className="cell">
          <div className="l">Decade</div>
          <div className="v">One decision, ten years</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 DTLede() {
  return (
    <section className="dt-lede" data-screen-label="03 Lede">
      <div className="dt-lede__inner">
        <p className="dt-lede__opener">I want to talk about jeans.</p>
        <p>
          Not in the way fashion people talk about jeans — selvage this, heritage that,
          don't wash them for a year. That's a different conversation for a different
          person. I want to talk about jeans the way a man who has wasted real money on
          bad denim over the years and finally figured it out wants to talk about them.
        </p>
        <p>
          Here's what I figured out. You need three pairs. Not seven. Not two. Three.
          And if you buy the right three, you won't need to think about denim again for
          the better part of a decade.
        </p>
        <p>That's the whole article. Everything else is just the argument.</p>

        <div className="dt-lede__bridge"><span>Why You're Doing It Wrong</span></div>

        <p>
          Most men treat jeans like a consumable. You grab a pair off a rack, wear them
          until they look rough, replace them with something similar. Repeat. You spend
          money constantly and never actually own a great pair of jeans.
        </p>
        <p>The problem isn't the buying. It's the replacing.</p>
        <p>
          A well-made pair of jeans from a brand you trust — worn regularly, washed
          properly, treated like something worth keeping — doesn't need replacing in two
          years. It needs replacing in ten. Maybe never. The denim gets better. The fit
          becomes yours. You stop thinking about it.
        </p>
        <p>The investment isn't in the pair. It's in the system.</p>
        <p>
          Three pairs. A dark wash, a medium wash, and something lighter for the days
          when you're not trying to impress anyone including yourself. Each one does a
          specific job. Together they cover everything.
        </p>
      </div>
    </section>
  );
}

function DTTrinityIntro() {
  return (
    <section className="dt-trinity-intro" data-screen-label="04 Trinity Intro">
      <div className="dt-trinity-intro__inner">
        <div className="dt-trinity-intro__lede">The system, photographed in three plates.</div>
        <h2 className="dt-trinity-intro__title">The Trinity.</h2>
        <div className="dt-trinity-intro__count">Plates I — III</div>
      </div>
      <div className="dt-trinity-intro__rule" />
    </section>
  );
}

function DTPlate({ variant, plateLabel, numeral, hex, kicker, title, titleEnd, body, contexts, contextSub }) {
  return (
    <section className={`dt-plate dt-plate--${variant}`} data-screen-label={`Plate ${plateLabel}`}>
      <div className="dt-plate__inner">
        <div className="dt-plate__numeral-wrap">
          <div className="dt-plate__plate-tag">Plate {plateLabel}</div>
          <div className="dt-plate__numeral">{numeral}</div>
          <div className="dt-plate__hex">{hex}</div>
        </div>
        <div className="dt-plate__copy">
          <div className="dt-plate__kicker">{kicker}</div>
          <h2 className="dt-plate__title">{title}<span className="dt-plate__title-end">{titleEnd}</span></h2>
          {body}
        </div>
        <div className="dt-worn-for">
          <div className="dt-worn-for__head">Worn for</div>
          <ol className="dt-worn-for__list">
            {contexts.map((c, i) => (
              <li key={i}>{c}{contextSub[i] && <span>{contextSub[i]}</span>}</li>
            ))}
          </ol>
        </div>
        <div className="dt-plate__shot" aria-hidden="true" />
      </div>
    </section>
  );
}

function DTPlateOne() {
  return (
    <DTPlate
      variant="dark"
      plateLabel="I"
      numeral="I"
      hex="#0E1B2E · Dark wash"
      kicker="No. 01 — The dressed-up jean"
      title="The Dark Wash"
      titleEnd="."
      contexts={["Dinner", "Client meeting", "Date night"]}
      contextSub={[
        "the kind that requires a decision",
        "where the dress code is vague",
        "without looking like you tried",
      ]}
      body={
        <React.Fragment>
          <p>
            This is your dressed-up jean. The one you wear when jeans are technically
            acceptable but you want to look like you made a decision.
          </p>
          <p>
            Dark wash denim reads as intentional in a way that other washes don't.
            Dinner that's not quite a restaurant requiring dress pants but not casual
            enough for whatever you grabbed this morning — dark wash. Client meeting
            where the dress code is vague — dark wash with a good shoe and you're fine.
            Date where you want to look like you thought about it without looking like
            you tried — dark wash, full stop.
          </p>
          <p>
            What you're looking for: no fading, no distressing, no whiskering. Clean and
            dark, straight or slightly tapered through the leg. Not slim. Slim jeans have
            a shelf life. A straight or relaxed straight cut in dark denim looks right in
            2025 and it'll look right in 2035.
          </p>
          <div className="dt-plate__rule" />
          <p>
            Find your brand and stay there. I wear Lucky Brand. You might wear something
            else. The brand matters less than the consistency — once you find the cut
            that fits your body correctly, buy every wash in that cut and stop
            experimenting.
          </p>
        </React.Fragment>
      }
    />
  );
}

function DTPlateTwo() {
  return (
    <DTPlate
      variant="medium"
      plateLabel="II"
      numeral="II"
      hex="#3A5274 · Medium wash"
      kicker="No. 02 — The everything jean"
      title="The Medium Wash"
      titleEnd="."
      contexts={["Saturday", "Hardware store", "No agenda"]}
      contextSub={[
        "the navy crewneck pair",
        "and the casual lunch after",
        "the afternoon does not require one",
      ]}
      body={
        <React.Fragment>
          <p>
            This is your everything jean. The one that goes with the navy crewneck, the
            one you grab on a Saturday, the one that works for the hardware store and
            the casual lunch and the afternoon where you have no particular agenda.
          </p>
          <p>
            Medium wash is the most forgiving wash in denim. It doesn't demand a specific
            context. It doesn't require you to dress it up or down because it already sits
            in the middle of both. It's the grey crewneck of jeans — except medium wash
            is actually interesting, which grey crewneck is not, so the analogy breaks
            down but you understand the point.
          </p>
          <div className="dt-plate__rule" />
          <p>Same cut as the dark. Same brand. Different wash. That's the whole decision.</p>
        </React.Fragment>
      }
    />
  );
}

function DTPlateThree() {
  return (
    <DTPlate
      variant="light"
      plateLabel="III"
      numeral="III"
      hex="#7B8FA8 · Light wash"
      kicker="No. 03 — The weekend jean"
      title="The Light Wash"
      titleEnd="."
      contexts={["Weekend morning", "Backyard", "Low-stakes"]}
      contextSub={[
        "before anything starts",
        "where the day takes you",
        "everything",
      ]}
      body={
        <React.Fragment>
          <p>
            This one is optional in the sense that you can live without it. It's not
            optional in the sense that once you own it you will wonder what you were doing
            before.
          </p>
          <p>
            A light or medium-light wash — the kind of blue that looks like the jeans have
            a history even when they're new — is for the days when you want to look like
            a person who is completely comfortable existing. Weekend morning. Backyard.
            Low-stakes everything. The dark wash would be trying too hard. The medium wash
            is fine. The light wash is exactly right.
          </p>
          <div className="dt-plate__rule" />
          <p>
            One note: this is the wash most susceptible to looking dated. Avoid heavy
            distressing, heavy fading patterns, or anything that looks like it was
            manufactured to tell a story the jeans haven't actually lived. Buy clean. Let
            them develop on their own.
          </p>
        </React.Fragment>
      }
    />
  );
}

function DTTrinityOutro() {
  return (
    <div className="dt-trinity-outro">
      <span>— End of trinity —</span>
    </div>
  );
}

function DTPull() {
  return (
    <aside className="dt-pull">
      <div className="dt-pull__rule" />
      <blockquote className="dt-pull__quote">
        Find your brand and stay there. Once you find the cut that fits your body correctly, buy every wash in that cut and <span style={{ fontStyle: "italic" }}>stop experimenting.</span>
      </blockquote>
      <cite className="dt-pull__cite">— JT · Starter Five, No. 02</cite>
    </aside>
  );
}

function DTFieldnote() {
  return (
    <section className="dt-fieldnote" data-screen-label="05 Field Note">
      <div className="dt-fieldnote__inner">
        <div className="dt-fieldnote__stamp">Field Note · Unfiled</div>
        <div className="dt-fieldnote__kicker">The Part Nobody Tells You</div>
        <p className="dt-fieldnote__lede">
          Here's the practical truth that no one in fashion will ever say out loud.
        </p>
        <h2 className="dt-fieldnote__pullout">Keep one old pair.</h2>
        <div className="dt-fieldnote__body">
          <p>
            Not for the wardrobe. For the yard. For the mud. For the Saturday where you're
            cutting grass or moving furniture or doing the thing that requires you to not
            think once about what you're wearing. That pair of jeans you've been meaning
            to donate that still fits but has a stain on the knee and a small tear that
            you keep ignoring — don't donate it. Put it in the garage.
          </p>
          <p>
            Good jeans are worth protecting. The way you protect them is by having
            something you don't care about for the moments that require not caring.
          </p>
          <p className="dt-fieldnote__coda">
            It's not a fashion tip. It's just common sense. But somehow nobody ever says it.
          </p>
        </div>
      </div>
    </section>
  );
}

function DTCloser() {
  return (
    <section className="dt-closer" data-screen-label="06 Closer">
      <div className="dt-closer__inner">
        <div className="dt-closer__kicker">The Investment Argument</div>
        <h2 className="dt-closer__title">Same math as the <span style={{ fontStyle: "normal" }}>crewneck.</span></h2>
        <p>
          A quality pair of jeans in the $80–$150 range, worn three or four times a week
          for a full year, washed correctly — cold water, hang dry, not every week — will
          last years before they show real wear. The cost per wear is negligible. The cost
          of replacing a mediocre pair every eighteen months is not.
        </p>
        <p>
          Three pairs at the right price point is a $300 decision you make once. Seven
          pairs of whatever was on sale is a decision you make constantly and never feel
          good about.
        </p>
        <p>
          Stop buying jeans like they're disposable. Buy three. Buy them right. Keep the
          beater pair in the garage.
        </p>
        <p className="dt-closer__final">You're done.</p>
      </div>
    </section>
  );
}

function DTSign() {
  return (
    <section className="dt-sign" data-screen-label="07 Signoff">
      <div className="dt-sign__inner">
        <div className="dt-sign__avatar" style={{ backgroundImage: "url(/assets/jt.png)" }} />
        <div>
          <div className="dt-sign__who"><strong>JT</strong><small>Men's Lane Editor</small></div>
          <p className="dt-sign__bio">
            JT is the founder of The Legacy Bridge and the Men's Lane editor at HowTo:
            Fashion Edition. He wears Lucky Brand. He is not sponsored by Lucky Brand.
            He just found his cut and stopped looking.
          </p>
          <div className="dt-sign__location">Atlanta, Georgia</div>
        </div>
      </div>
    </section>
  );
}

function DTRelated() {
  return (
    <section className="nc-related" data-screen-label="08 Related">
      <div className="frame">
        <div className="head">
          <div className="num">No. 08</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(https://images.unsplash.com/photo-1604644401890-0bd678c83788?w=1400&q=80)" }} />
            <div className="meta"><span className="num">Starter Five · No. 03</span><span>Next up</span></div>
            <h4>The white oxford, <span className="it">all the way buttoned.</span></h4>
            <p>One shirt, three collars deep, the third piece of the five. Why an oxford-cloth button-down is the most-used shirt a man can own.</p>
          </article>
          <article className="nc-related-card">
            <div className="img" style={{ backgroundImage: "url(https://images.unsplash.com/photo-1638391506914-fb6e9a26d9d8?w=900&q=80)" }} />
            <div className="meta"><span className="num">Starter Five · No. 01</span><span>9 min</span></div>
            <h4>The navy <span className="it">crewneck.</span></h4>
            <p>The single piece in a man's closet that quietly does the most. A working argument for owning one good one.</p>
          </article>
          <article className="nc-related-card">
            <div className="img" style={{ backgroundImage: "url(https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=900&q=80)" }} />
            <div className="meta"><span className="num">Build · No. 118</span><span>5 min</span></div>
            <h4>The navy crewneck, <span className="it">over medium denim.</span></h4>
            <p>The first two pieces of the five, worn together. The starter uniform, in one paragraph.</p>
          </article>
        </div>
      </div>
    </section>
  );
}

window.DTTopper = DTTopper;
window.DTHead = DTHead;
window.DTHero = DTHero;
window.DTMetaStrip = DTMetaStrip;
window.DTLede = DTLede;
window.DTTrinityIntro = DTTrinityIntro;
window.DTPlateOne = DTPlateOne;
window.DTPlateTwo = DTPlateTwo;
window.DTPlateThree = DTPlateThree;
window.DTTrinityOutro = DTTrinityOutro;
window.DTPull = DTPull;
window.DTFieldnote = DTFieldnote;
window.DTCloser = DTCloser;
window.DTSign = DTSign;
window.DTRelated = DTRelated;
