/* global React */

/* ============================================================
   JT PROFILE — bio hero, archive, starter five, closet, letters
   ============================================================ */

const JT_IMG = {
  // Use Unsplash men's fashion photography for placeholders
  feat1: "https://images.unsplash.com/photo-1617137968427-85924c800a22?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?w=1200&q=80",
  feat3: "https://images.unsplash.com/photo-1551803091-e20673f15770?w=1200&q=80",
  a1: "https://images.unsplash.com/photo-1611312449412-6cefac5dc3e4?w=1200&q=80", // navy blazer (men)
  a2: "https://images.unsplash.com/photo-1542060748-10c28b62716f?w=900&q=80",   // men denim
  a3: "https://images.unsplash.com/photo-1624222247344-550fb60583dc?w=900&q=80", // brown belt / leather goods
  a4: "https://images.unsplash.com/photo-1516826957135-700dedea698c?w=900&q=80", // tailoring shoulder (men)
  a5: "https://images.unsplash.com/photo-1620012253295-c15cc3e65df4?w=900&q=80", // crewneck / knit (men)
  a6: "https://images.unsplash.com/photo-1516257984-b1b4d707412e?w=900&q=80",   // layered men outerwear
  a7: "https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?w=900&q=80", // white sneakers (men)
  nelly: "https://images.unsplash.com/photo-1581338834647-b0fb40704e21?w=1200&q=80",
};

/* ---------------- Breadcrumb ---------------- */
function Crumb() {
  return (
    <div className="jt-crumb">
      <div>
        <span>The How To Co.</span>
        <span className="sep">/</span>
        <span>Contributors</span>
        <span className="sep">/</span>
        <span className="here">JT</span>
      </div>
      <div className="badge">Lane Editor · No. 02</div>
    </div>
  );
}

/* ---------------- Hero ---------------- */
function Hero() {
  return (
    <section className="jt-hero" data-screen-label="01 Hero">
      <div className="frame">
        <div className="left">
          <div className="eyebrow">
            <span>Lane Editor — Men</span>
          </div>
          <h1 className="name">
            JT<span className="dot">.</span>
            <span className="second">on the floor.</span>
          </h1>
          <p className="role">
            Building a closet that <span className="accent">lasts longer</span> than the trends do.
          </p>
          <p className="bio">
            JT runs the Men lane. Eight years on the workroom floor before the writing started — patternmaking
            in Atlanta, knit development in Portugal, two seasons in a New York buying office that mostly cured
            him of trend-chasing for good.
          </p>
          <p className="bio">
            He thinks most guys own enough — they just need a better starting five and someone to tell them which
            shoes can stay. Opinions held lightly, navy held tightly. Writes on Tuesdays, Saturdays from a chair.
          </p>
          <div className="meta">
            <div>
              <div className="m-n">08<span className="it">yr</span></div>
              <div className="m-l">On the floor</div>
            </div>
            <div>
              <div className="m-n">176</div>
              <div className="m-l">Guides published</div>
            </div>
            <div>
              <div className="m-n"><span className="it">Atlanta</span></div>
              <div className="m-l">Home base</div>
            </div>
            <div>
              <div className="m-n">04</div>
              <div className="m-l">Editor’s picks / mo.</div>
            </div>
          </div>
        </div>
        <div className="jt-portrait-wrap">
          <div className="jt-portrait">
            <span className="corner tl">Contributor · No. 02</span>
            <span className="corner tr">Atlanta · 2026</span>
            <img src="/assets/jt.png" alt="JT" />
            <span className="corner br">Frame 04 / 12</span>
            <span className="signature">— JT</span>
          </div>
          <div className="jt-port-caption">
            <span>Photographed at the studio</span>
            <span className="accent">Roll 04 · Frame 11</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Workbench (now writing) ---------------- */
function Workbench() {
  const items = [
    { n: "Tue · Apr 30", t: "The case for owning two pairs of jeans, not five.", s: "Build · 7 min · drafting" },
    { n: "Sat · May 04", t: "Suede shoes, in actual rain.", s: "Finish · 4 min · with photographer" },
    { n: "Tue · May 07", t: "What to do with a sport coat that doesn’t fit anymore.", s: "Fit · 6 min · outline" },
  ];
  return (
    <section className="workbench" data-screen-label="02 Workbench">
      <div className="frame">
        <div className="label">On the workbench — what JT is writing now</div>
        <div className="list">
          {items.map((it, i) => (
            <a className="item" href={it.href || (i === 0 ? "/en/contributors/jt/raw-five-pocket-denim-year-one/" : i === 1 ? "/en/contributors/jt/suede-shoes-in-actual-rain/" : "/en/contributors/jt/")} key={i}>
              <div className="num">No. 0{i + 1} — {it.n}</div>
              <div className="t">{it.t}</div>
              <div className="s">{it.s}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Featured 3 ---------------- */
function Featured() {
  return (
    <section className="jt-sec" data-screen-label="03 Featured">
      <div className="frame">
        <div className="jt-sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Three to start with, <span className="it">if you’re new here.</span></h2>
          <div className="meta">Editor’s picks<br/>—from JT</div>
        </div>
        <div className="jt-features">
          <a className="jt-feat f1" href="/en/contributors/jt/the-navy-crewneck/">
            <div className="img" style={{ backgroundImage: `url(${JT_IMG.feat1})` }} />
            <div className="meta"><span className="num">No. 01 · Build</span><span>9 min</span></div>
            <h3>The starter five — <span className="it">a closet that fits in one duffel.</span></h3>
            <p>
              Five pieces that earn their keep across seasons. The argument for buying once, owning long, and
              ignoring the rest of the catalog. Includes a packing test we run on every guide that ships.
            </p>
          </a>
          <a className="jt-feat f2" href="/en/contributors/jt/raw-five-pocket-denim-year-one/">
            <div className="img" style={{ backgroundImage: `url(${JT_IMG.feat2})` }} />
            <div className="meta"><span className="num">No. 02 · Wear</span><span>5 min</span></div>
            <h3>Raw denim, <span className="it">year one.</span></h3>
            <p>The first twelve months of a pair you’ll keep for ten.</p>
          </a>
          <a className="jt-feat f3" href="/en/contributors/jt/suede-shoes-in-actual-rain/">
            <div className="img" style={{ backgroundImage: `url(${JT_IMG.feat3})` }} />
            <div className="meta"><span className="num">No. 03 · Fit</span><span>6 min</span></div>
            <h3>The shoulder, <span className="it">and only the shoulder.</span></h3>
            <p>One measurement to argue about with a tailor — the rest follows.</p>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Archive ---------------- */
const ARCHIVE_ALL = [
  { cat: "Build",    n: "117", date: "Apr 23", title: ["A navy blazer for ", { it: "every wedding you’ve been invited to." }], desc: "Half-canvas, no shoulder pad, navy hopsack. The piece that solves nine out of ten dress codes.", img: JT_IMG.a1, size: "s6", read: "8 min" },
  { cat: "Wear",     n: "116", date: "Apr 19", title: ["Five-pocket denim, ", { it: "and the case for owning fewer." }], desc: "Two pairs cover everything denim should — one dark, one worn-in. Buy the first; let the second happen to you.", img: JT_IMG.a2, size: "s3", read: "6 min" },
  { cat: "Finish",   n: "115", date: "Apr 16", title: ["The brown belt ", { it: "that finishes everything." }], desc: "One cordovan strap, lasts a decade. The accessory that does the most quietly.", img: JT_IMG.a3, size: "s3", read: "4 min" },
  { cat: "Fit",      n: "114", date: "Apr 12", title: ["The shoulder ", { it: "is the whole conversation." }], desc: "Why every other measurement bends to this one — and how to read a fit in the dressing-room mirror.", img: JT_IMG.a4, size: "s4", read: "6 min" },
  { cat: "Build",    n: "113", date: "Apr 09", title: ["Crewneck or v-neck, ", { it: "settled." }], desc: "There is a right answer; it has been the right answer for forty years; it is crewneck.", img: JT_IMG.a5, size: "s4", read: "5 min" },
  { cat: "Seasonal", n: "112", date: "Apr 05", title: ["Shoulder-season ", { it: "in three layers." }], desc: "A rotation that handles 45-to-65°F without a duffle of options. One top, one mid, one over.", img: JT_IMG.a6, size: "s4", read: "5 min" },
  { cat: "Wear",     n: "111", date: "Apr 02", title: ["A white sneaker ", { it: "that doesn’t look lazy." }], desc: "Picking one, keeping one — the rotation, the cleaner, and when to retire it for good.", img: JT_IMG.a7, size: "s3", read: "4 min" },
  { cat: "Finish",   n: "110", date: "Mar 29", title: ["A watch you ", { it: "actually look at." }], desc: "Steel, simple dial, under three figures. The case for boring on the wrist.", img: JT_IMG.a3, size: "s3", read: "4 min" },
  { cat: "Build",    n: "109", date: "Mar 26", title: ["The oxford-cloth ", { it: "button-down, defended." }], desc: "Why the OCBD belongs in every closet — even the ones that swore they’d gone French.", img: JT_IMG.a5, size: "s3", read: "5 min" },
  { cat: "Fit",      n: "108", date: "Mar 22", title: ["When to ", { it: "trust the tailor." }], desc: "Three alterations worth paying for, two that are a waste of forty bucks.", img: JT_IMG.a4, size: "s3", read: "5 min" },
];

function ArchiveCard({ a }) {
  return (
    <article className={`jt-card ${a.size}`}>
      <div className="img" style={{ backgroundImage: `url(${a.img})` }} />
      <div className="meta">
        <span className="num">No. {a.n} · {a.cat}</span>
        <span>{a.date} · {a.read}</span>
      </div>
      <h4>
        {a.title.map((t, i) => typeof t === "string" ? <React.Fragment key={i}>{t}</React.Fragment> : <span key={i} className="it">{t.it}</span>)}
      </h4>
      <p>{a.desc}</p>
    </article>
  );
}

function Archive() {
  const [tab, setTab] = React.useState("All");
  const tabs = [
    { name: "All", count: 176 },
    { name: "Build", count: 42 },
    { name: "Wear", count: 58 },
    { name: "Fit", count: 34 },
    { name: "Finish", count: 26 },
    { name: "Seasonal", count: 16 },
  ];
  const list = tab === "All" ? ARCHIVE_ALL : ARCHIVE_ALL.filter(a => a.cat === tab);
  return (
    <section className="jt-sec" data-screen-label="04 Archive">
      <div className="frame">
        <div className="jt-sec-head">
          <div className="num">No. 02</div>
          <h2 className="title">The full <span className="it">archive.</span></h2>
          <div className="meta">176 guides<br/>—since 2018</div>
        </div>
        <div className="jt-tabs">
          {tabs.map(t => (
            <button
              key={t.name}
              className={`jt-tab ${tab === t.name ? "active" : ""}`}
              onClick={() => setTab(t.name)}
            >
              {t.name}
              <span className="count">{t.count}</span>
            </button>
          ))}
        </div>
        <div className="jt-archive">
          {list.map((a, i) => <ArchiveCard key={i} a={a} />)}
        </div>
        <div className="jt-archive-foot">
          <div className="count">
            Showing <span className="accent">{list.length}</span> of {tab === "All" ? 176 : tabs.find(t => t.name === tab).count}.
          </div>
          <button className="jt-load">Load more →</button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Starter Five ---------------- */
const STARTER = [
  { name: "The navy crewneck.", note: "Merino, no logo, mid-weight",
    why: "It’s the piece that makes everything else around it look a little better. Wear under a blazer in October; alone in May.",
    pick: { brand: "Smartwool / Sunspel", spec: "100% merino · navy" } },
  { name: "Raw 5-pocket denim.", note: "13–14oz, mid-rise, straight-ish",
    why: "Buy them stiff. Wear them weekly. They become a record of the year you owned them.",
    pick: { brand: "3sixteen / A.P.C.", spec: "Selvedge · indigo" } },
  { name: "An oxford button-down.", note: "Unlined collar, must roll",
    why: "Tucked into trousers it goes to dinner; untucked over a tee it goes to the airport.",
    pick: { brand: "Mercer & Sons", spec: "OCBD · white or blue" } },
  { name: "An unstructured navy blazer.", note: "Half-canvas or none, hopsack",
    why: "The single piece that sharpens everything below it without insisting on a tie.",
    pick: { brand: "Boglioli K.Jacket", spec: "Hopsack · navy" } },
  { name: "A white leather sneaker.", note: "Court last, leather sole or rubber",
    why: "Quietly resets a beat-up outfit. Polish them twice a year and they outlast everything else.",
    pick: { brand: "GAT-style / Common Projects", spec: "Leather upper · white" } },
];

function StarterFive() {
  return (
    <section className="starter5" data-screen-label="05 Starter Five">
      <div className="frame">
        <div className="head">
          <div className="lhs">
            <div className="label">No. 03 — JT’s starter five</div>
            <h3>Five pieces that <span className="it">do most of the work.</span></h3>
          </div>
          <div className="rhs">
            If you owned only these — in your size, in versions you actually liked — you’d
            be dressed for ninety percent of your life. The other ten is what the rest of the closet is for.
          </div>
        </div>
        <ol className="s5-list">
          {STARTER.map((s, i) => (
            <li className="s5-row" key={i}>
              <span className="n" />
              <div className="name">
                {s.name}
                <small>{s.note}</small>
              </div>
              <div className="why">{s.why}</div>
              <div className="pick">
                <span className="brand">{s.pick.brand}</span>
                <span>{s.pick.spec}</span>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---------------- Closet — pieces JT actually owns ---------------- */
const CLOSET = [
  { cat: "Knitwear",  nm: ["Navy crewneck, ", { it: "fourth winter." }], brand: "Smartwool · merino, mid-weight", age: "Owned 4 yrs", wear: "118×" },
  { cat: "Denim",     nm: ["Raw 5-pocket, ", { it: "broken in." }],     brand: "3sixteen · ST-100x · 14oz selvedge",  age: "Owned 3 yrs", wear: "Weekly" },
  { cat: "Outerwear", nm: ["Sage chore coat, ", { it: "patched once." }], brand: "Vintage Le Laboureur · cotton twill", age: "Owned 6 yrs", wear: "Spring + fall" },
  { cat: "Footwear",  nm: ["Suede chukkas, ", { it: "resoled twice." }],  brand: "Alden · Dark snuff suede",         age: "Owned 5 yrs", wear: "Three days/week" },
  { cat: "Tailoring", nm: ["Navy hopsack blazer."],                       brand: "Boglioli · K.Jacket · half-canvas",    age: "Owned 2 yrs", wear: "Two days/week" },
  { cat: "Shirts",    nm: ["White OCBD, ", { it: "softened." }],          brand: "Mercer & Sons · 60s yarn oxford",  age: "Owned 7 yrs", wear: "Weekly" },
  { cat: "Trousers",  nm: ["Olive flat-fronts."],                         brand: "Drake’s · cotton twill",            age: "Owned 1 yr",  wear: "Twice a week" },
  { cat: "Finish",    nm: ["Brown leather belt."],                        brand: "RM Williams · 1.25\" cordovan",       age: "Owned 8 yrs", wear: "Daily" },
];

function Closet() {
  return (
    <section className="closet" data-screen-label="06 Closet">
      <div className="frame">
        <div className="jt-sec-head">
          <div className="num">No. 04</div>
          <h2 className="title">JT’s closet — <span className="it">eight pieces, on rotation.</span></h2>
          <div className="meta">Photographed flat<br/>—Atlanta, Apr ’26</div>
        </div>
        <div className="grid">
          {CLOSET.map((c, i) => (
            <div className="cl-card" key={i}>
              <div className="img-ph">
                <span className="ph-label">{c.cat} · product shot</span>
              </div>
              <div className="cat">{c.cat}</div>
              <h4 className="nm">
                {c.nm.map((t, j) => typeof t === "string" ? <React.Fragment key={j}>{t}</React.Fragment> : <span key={j} className="it">{t.it}</span>)}
              </h4>
              <p className="brand">{c.brand}</p>
              <div className="age">
                <span>{c.age}</span>
                <span className="accent">{c.wear}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Reader Letters ---------------- */
const LETTERS = [
  {
    from: "M.K., Brooklyn",
    when: "Apr 12, 2026",
    q: "I’m 38, work in tech, and I have ten T-shirts that all look slightly different but somehow none of them fit. Where do I even start?",
    a: "Start by owning that you don’t need ten — you need three you actually like. Buy one heavyweight crewneck in white, one in navy, one in a faded color you’d miss. Wear them on rotation for a month. Whatever you don’t reach for, donate. The pile shrinks itself."
  },
  {
    from: "D.S., Chicago",
    when: "Mar 28, 2026",
    q: "Suede shoes in winter — pretentious or practical?",
    a: "Practical, if you spray them and accept that boots will get marked. Suede ages better than smooth leather and hides salt-line drama for a day longer. Buy the chukka, not the loafer. Resole at five years."
  },
  {
    from: "A.B., Portland",
    when: "Mar 19, 2026",
    q: "My wife says I dress like ‘three different guys depending on what’s clean.’ Help.",
    a: "She’s right. Pick a base note and stay there for a season — for most guys that’s navy and stone. When everything in the wash hangs in roughly the same range, the closet stops fighting itself and you stop guessing in the morning."
  },
  {
    from: "R.J., Atlanta",
    when: "Mar 04, 2026",
    q: "Worth the upgrade from a $200 blazer to a $900 one?",
    a: "Only if the $900 one fits at the shoulder and the $200 one doesn’t. Construction matters less than people on forums claim — fit matters more than people on forums claim. If neither fits, both are a waste."
  },
];

function Letters() {
  return (
    <section className="letters" data-screen-label="07 Letters">
      <div className="frame">
        <div className="jt-sec-head">
          <div className="num">No. 05</div>
          <h2 className="title">From the <span className="it">mailbag.</span></h2>
          <div className="meta">Reader letters<br/>—answered Saturdays</div>
        </div>
        <div className="grid">
          {LETTERS.map((l, i) => (
            <article className="letter" key={i}>
              <div className="head-row">
                <span className="from">From {l.from}</span>
                <span>{l.when}</span>
              </div>
              <p className="q">{l.q}</p>
              <p className="a">{l.a}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Nelly cross-link ---------------- */
function Cross() {
  return (
    <section className="cross" data-screen-label="08 From the other lane">
      <div className="frame">
        <div className="img" style={{ backgroundImage: `url(${JT_IMG.nelly})` }}>
          <span className="stamp">Lane 01 · Women</span>
        </div>
        <div className="body">
          <div className="eyebrow">From the other lane</div>
          <h3>Read <span className="it">Nelly</span>, too.</h3>
          <p>
            Twelve years dressing women for boardrooms, beaches, and the long flights between.
            Different lane, same standard — fewer pieces, better cut, the quiet authority of navy.
          </p>
          <a className="cta" href="/en/contributors/nelly/">Open Nelly’s profile <span className="arr">→</span></a>
        </div>
      </div>
    </section>
  );
}

window.JTHero = Hero;
window.JTCrumb = Crumb;
window.JTWorkbench = Workbench;
window.JTFeatured = Featured;
window.JTArchive = Archive;
window.JTStarterFive = StarterFive;
window.JTCloset = Closet;
window.JTLetters = Letters;
window.JTCross = Cross;