/* global React */

const TR_IMG = {
  hero: "https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?w=1400&q=80",
  p1: "https://images.unsplash.com/photo-1551803091-e20673f15770?w=900&q=80",
  p2: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&q=80",
  p3: "https://images.unsplash.com/photo-1594633313593-bab3825d0caf?w=900&q=80",
  p4: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=900&q=80",
  p5: "https://images.unsplash.com/photo-1551488831-00ddcb6c6bd3?w=900&q=80",
};

/* ============== HERO ============== */
function TRHero() {
  return (
    <section className="lt2-hero" data-screen-label="01 Hero">
      <div className="frame">
        <div className="copy">
          <div className="crumb">
            <a href="/en/women/">Women</a><span>/</span>
            <a href="/en/women/build/">Build</a><span>/</span>
            <a href="/en/women/build/basics/">Basics</a><span>/</span>
            <a href="/en/women/build/basics/#trouser">Trousers</a><span>/</span>
            <span className="here">Best wool trousers</span>
          </div>
          <div className="kicker">No. 06 · The Tailored Half</div>
          <h1>Five wool trousers <span className="it">worth the hem.</span></h1>
          <div className="byline">
            <span>By <span className="name">Iris</span></span>
            <span className="div" />
            <span>April 2026</span>
            <span className="div" />
            <span>10 min read</span>
            <span className="div" />
            <span>Updated quarterly</span>
          </div>
        </div>
        <div className="img" style={{ backgroundImage: `url(${TR_IMG.hero})` }}>
          <span className="credit">Editor's pick · The Row Sartor</span>
        </div>
      </div>
    </section>
  );
}
window.TRHero = TRHero;

/* ============== STANDFIRST ============== */
function TRStandfirst() {
  return (
    <section className="lt2-standfirst" data-screen-label="02 Standfirst">
      <div className="frame">
        <div className="meta">
          <div className="row"><span>Filed under</span><span>Basics / Trousers</span></div>
          <div className="row"><span>Tested</span><span>22 pairs</span></div>
          <div className="row"><span>Picks</span><span>5 of 22</span></div>
          <div className="row"><span>Wear cycle</span><span>Twice weekly · 6 months</span></div>
          <div className="row"><span>Hem visits</span><span>22 of 22</span></div>
          <div className="row"><span>Sponsored</span><span>None</span></div>
        </div>
        <div className="body">
          <p>A good wool trouser is the most <em>quietly transformative</em> thing in a closet. It changes how a knit hangs, how a flat shoe reads, how a Tuesday looks. And almost nothing off the rack arrives ready to do that work.</p>
          <p>Twenty-two pairs were ordered, worn for a season, and walked to the same hemmer in the same week. Five came back as themselves.</p>
          <p>What follows is shorter than the men's tee piece on purpose. A trouser is more individual than a t-shirt; the picks below are starting points, not commandments. Bring a tailor.</p>
        </div>
      </div>
    </section>
  );
}
window.TRStandfirst = TRStandfirst;

/* ============== DECK · rule of one ============== */
function TRDeck() {
  return (
    <section className="lt2-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> get the rise right for your torso and the break right for your shoe. Everything else — the brand, the price, the fabric weight — is a footnote to those two measurements.
          <small>Rule of one · in print since '02</small>
        </p>
        <div className="stamp">Rule of one<br />— since the brief began —</div>
      </div>
    </section>
  );
}
window.TRDeck = TRDeck;

/* ============== PICKS ============== */
const TR_PICKS = [
  {
    n: "I", brand: "The Row · Sartor",
    title: "The reference trouser,", it: "if money is patient.",
    write: "Italian super-110s in a high-twist worsted, hand-finished waistband, lined to the knee. The pair every other pair on this page is judged against.",
    specs: { weight: "260 g/m", rise: "High", cut: "Straight", origin: "Italy" },
    price: "$1,290", verdict: "Buy once, hem once.",
    img: "p1", ed: true,
  },
  {
    n: "II", brand: "Toteme · Tailored",
    title: "Swedish quiet,", it: "with a real waistband.",
    write: "Mid-rise, straight-leg, in a tropical wool that takes a hot iron and a long day. The most-worn trouser in the office last season.",
    specs: { weight: "240 g/m", rise: "Mid", cut: "Straight", origin: "Portugal" },
    price: "$590", verdict: "If you buy one pair.",
    img: "p2",
  },
  {
    n: "III", brand: "Massimo Dutti · 02047",
    title: "The closest a high-street trouser", it: "gets to the real thing.",
    write: "Italian-milled wool blend, mid-rise, gently tapered. Not perfect — the lining is short and the waistband is fused — but at this price the math is friendly.",
    specs: { weight: "230 g/m", rise: "Mid", cut: "Tapered", origin: "Portugal" },
    price: "$179", verdict: "Best under two hundred.",
    img: "p3",
  },
  {
    n: "IV", brand: "Wardrobe.NYC · Trouser 02",
    title: "A wide leg that doesn't", it: "drown the wearer.",
    write: "Heavyweight Italian wool, dropped from the natural waist with a clean front. Wears like a coat from the waist down — best on women 5'7\" and up.",
    specs: { weight: "310 g/m", rise: "High", cut: "Wide", origin: "Italy" },
    price: "$695", verdict: "If you have the height.",
    img: "p4",
  },
  {
    n: "V", brand: "COS · Linen-wool blend",
    title: "Three seasons of trouser,", it: "for less than dinner.",
    write: "Linen-wool blend (60/40) in a relaxed mid-rise. Wrinkles like linen, drapes like wool, costs like neither. The honest budget pick.",
    specs: { weight: "210 g/m", rise: "Mid", cut: "Relaxed", origin: "Turkey" },
    price: "$135", verdict: "The honest budget option.",
    img: "p5",
  },
];
function TRPicks() {
  return (
    <section className="lt2-picks" data-screen-label="04 Picks">
      <div className="frame">
        <header className="head">
          <div className="num">04</div>
          <div>
            <div className="eyebrow">The picks · Five of twenty-two</div>
            <h2>What survived <span className="it">the hemmer.</span></h2>
          </div>
          <div className="meta">Listed best to last<br />Across price tiers</div>
        </header>
        <div className="pick-list-2">
          {TR_PICKS.map(p => (
            <article key={p.n} className={`pick2${p.ed ? " ed" : ""}`}>
              <span className="n">{p.n}</span>
              <div className="img" style={{ backgroundImage: `url(${TR_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>Rise<b>{p.specs.rise}</b></span>
                  <span>Cut<b>{p.specs.cut}</b></span>
                  <span>Made<b>{p.specs.origin}</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.TRPicks = TRPicks;

/* ============== TAILORING / HEMMING ============== */
const TR_JOBS = [
  { ord: "I", price: "$25–40", t: "The hem,", it: "with a break.",
    d: "A trouser should sit on the top of the shoe with a single, soft fold. Bring the shoes you'll wear most. Ask for a hand-stitched, blind hem; never a glued one." },
  { ord: "II", price: "$30–55", t: "The waist,", it: "taken in.",
    d: "Most trousers fit the hip and gap at the waist. A half-inch in the centre back closes the gap without disturbing the pockets. The single most useful alteration on this page." },
  { ord: "III", price: "$40–70", t: "The seat,", it: "let out or in.",
    d: "If the back seam puckers under the seat, ask for it to be released. If it pulls across, ask for it to be taken in. Either job costs roughly an hour of work." },
  { ord: "IV", price: "$15–25", t: "The cuff,", it: "added or removed.",
    d: "A 4cm turn-up adds weight to the leg and reads slightly more formal. Removing one is cheaper than adding one. Decide once; don't go back and forth." },
];
function TRTailor() {
  return (
    <section className="lt2-tailor" data-screen-label="05 Tailoring">
      <div className="frame">
        <div className="lede">
          <span className="eyebrow">05 · Bring a tailor</span>
          <h3>Four small jobs that <span className="it">finish the trouser.</span></h3>
          <p className="intro">A wool trouser leaves the factory at a length and width meant for nobody in particular. The hemmer turns it into yours. Budget for it; it's part of the price.</p>
          <div className="pull">
            Roughly <b>$60–$120</b> of alterations on a $200 trouser is the difference between something you wear twice and something you wear for a decade.
          </div>
        </div>
        <div className="tailor-jobs">
          {TR_JOBS.map(j => (
            <div key={j.ord} className="job">
              <div className="top">
                <span className="ord">{j.ord}</span>
                <span className="price">Costs <b>{j.price}</b></span>
              </div>
              <h5>{j.t} <span className="it">{j.it}</span></h5>
              <p>{j.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.TRTailor = TRTailor;

/* ============== CARE ============== */
function TRCare() {
  return (
    <section className="lt2-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 · Brush</span>
            <h5>A horsehair brush, <span className="it">weekly.</span></h5>
            <p>Wool needs lift more than it needs cleaning. A soft brush after each wear lifts dust off the surface and keeps the nap even. It's the single best thing you can do for a trouser.</p>
          </div>
          <div className="cell">
            <span className="n">02 · Steam</span>
            <h5>Steam, <span className="it">don't iron.</span></h5>
            <p>An iron flattens the weave; steam relaxes it. A handheld steamer, held two inches from the fabric, takes a wrinkle out in twelve seconds and leaves no shine on the seat.</p>
          </div>
          <div className="cell">
            <span className="n">03 · Rest</span>
            <h5>One day on, <span className="it">two off.</span></h5>
            <p>Wool needs to recover its shape between wearings. Hung properly — by the cuff, on a clamp hanger — a trouser regains its drape inside forty-eight hours. Wear straight twice and the knees stay.</p>
          </div>
          <div className="cell">
            <span className="n">04 · Clean</span>
            <h5>Dry-clean, <span className="it">twice a year.</span></h5>
            <p>Twice a season is plenty for a trouser in regular service; more than that strips the cloth. Spot-clean spills with cold water and a clean cloth; leave anything bigger to the cleaner.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.TRCare = TRCare;

/* ============== VERDICT ============== */
function TRVerdict() {
  return (
    <section className="lt2-verdict" data-screen-label="07 Verdict">
      <div className="frame">
        <div className="stamp">
          <small>The verdict</small>
          Toteme.
        </div>
        <div className="copy">
          <p>If you buy <span className="it">one</span> pair this year, buy the Toteme. If you buy two, add the Massimo Dutti for daylight and keep the Toteme for everything else. The Row is the dream; the COS is the answer when the dream is having a quiet year.</p>
          <p className="aside">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">Iris</span></span>
            <span>·</span>
            <span>Filed April 2026</span>
            <span>·</span>
            <span>Vol. 02 · Issue 06</span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.TRVerdict = TRVerdict;

/* ============== RELATED — sister + back-up ============== */
function TRRelated() {
  const sisters = [
    { n: "Trousers · 02", t: "How trousers should fit", it: "(the eight rules)", d: "The eight places a trouser fails before the receipt does." },
    { n: "Trousers · 03", t: "High-rise vs.", it: "mid-rise", d: "Decided by your torso, not the season's runway." },
    { n: "Trousers · 04", t: "Wide-leg trousers", it: "without the drown", d: "Three rules that keep volume from wearing you instead." },
  ];
  return (
    <section className="lt2-related" data-screen-label="08 Related">
      <div className="frame">
        <div className="head">
          <h4>Sister guides · The Tailored Half</h4>
          <div className="upcrumb">
            Up to <a href="/en/women/build/basics/#trouser">Basics / Trousers</a>
            <span>  ·  </span>
            <a href="/en/women/build/basics/">All basics</a>
          </div>
        </div>
        <div className="grid">
          {sisters.map((it, i) => (
            <a key={i} className="card" href="/en/women/build/basics/#trouser">
              <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>
          ))}
          <a className="card up" href="/en/women/build/basics/#trouser">
            <span className="n">Up a level</span>
            <h5>Back to <span className="it">Basics / Trousers.</span></h5>
            <p>Eight guides on the trouser shelf. The matrix, the lengths, the eight rules, the rest of the picks.</p>
            <span className="arr">↑ Up to Trousers</span>
          </a>
        </div>
      </div>
    </section>
  );
}
window.TRRelated = TRRelated;