/* global React, IMAGES */

const NE_IMG = {
  portrait: "/assets/nelly-portrait.png",
  build1: "/assets/nelly-collar-theory-full.png?v=2",
  build2: "https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=1200&q=80",
  build3: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=1200&q=80",
  thumb1a: "/assets/nelly-collar-theory-portrait.png?v=3",
  thumb1b: "https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?w=600&q=80",
  thumb1c: "https://images.unsplash.com/photo-1485231183945-fffde7cc051e?w=600&q=80",
  thumb2a: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=600&q=80",
  thumb2b: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=600&q=80",
  thumb2c: "https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?w=600&q=80",
  thumb3a: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=600&q=80",
  thumb3b: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=600&q=80",
  thumb3c: "https://images.unsplash.com/photo-1581338834647-b0fb40704e21?w=600&q=80",
  jt: "https://images.unsplash.com/photo-1617137968427-85924c800a22?w=1200&q=80"
};

/* -------- breadcrumb -------- */
function NECrumb() {
  return (
    <div className="ne-crumb">
      <div>How To: Fashion <span className="sep">/</span> Contributors <span className="sep">/</span> <span className="here">NELLY</span></div>
      <div className="badge">Profile · 002</div>
    </div>);

}

/* -------- HERO -------- */
function NEHero() {
  return (
    <section className="ne-hero">
      <div className="frame">
        <div className="topbar">
          <div className="stamp">Sheet 002 · Contributor</div>
          <div className="rule" />
          <div className="meta-l">Drawn by N. Lourenço</div>
          <div className="meta-r">Rev. 04 · Spring ’26</div>
        </div>

        <div className="left">
          <div className="eyebrow">The engineer in residence</div>
          <h1 className="name">
            Nelly<span className="dot">.</span>
            <span className="second"></span>
          </h1>

          <div className="name-dim">
            <span className="lbl">Subject</span>
            <div className="row">
              <span>Outfit Engineer</span>
              <span>EST. 2018 · ISTANBUL → BROOKLYN</span>
            </div>
          </div>

          <p className="role">
            Nelly doesn't <em>shop looks</em>. She <span className="accent">engineers them</span> — sourcing each piece on its own merits and assembling outfits the way you'd assemble a building.
          </p>
          <p className="bio">
            Trained in industrial design before fashion, Nelly approaches dressing as a system problem. A look isn't an aesthetic — it's a brief: climate, occasion, silhouette, fabric mix, finish. Solve the brief with parts you already own; if you can't, document the gap and source the smallest possible new component.
          </p>
          <p className="bio">
            She writes <em>The Build Sheet</em>, our column on outfit engineering. She does not believe in mood boards, capsule wardrobes, or the word <em>effortless</em>.
          </p>

          <div className="ne-tenets">
            <div className="tenet">
              <div className="n">Tenet 01</div>
              <p className="t">Outfits are <em>assemblies</em>, not purchases.</p>
            </div>
            <div className="tenet">
              <div className="n">Tenet 02</div>
              <p className="t">Every piece earns its <em>load-bearing role</em>.</p>
            </div>
            <div className="tenet">
              <div className="n">Tenet 03</div>
              <p className="t">A good build has <em>three valid substitutions</em>.</p>
            </div>
          </div>
        </div>

        <aside className="ne-sheet">
          <span className="sheet-corners"><i /></span>
          <div className="sheet-head">
            <span>Subject sheet</span>
            <span className="id">No. NL-002</span>
          </div>
          <div className="ne-portrait">
            <img src={NE_IMG.portrait} alt="Nelly Lourenço" />
            <div className="scrim" />
            <div className="anno a1 eng-only"><span className="lead" />structured shoulder, soft drape</div>
            <div className="anno a2 eng-only"><span className="lead" />contrast cuff: poplin on knit</div>
            <div className="anno a3 eng-only"><span className="lead" />mid-rise pleat, defined waist</div>
          </div>
          <div className="sig">— N.L.</div>
          <div className="sheet-foot">
            <div className="cell">Discipline<span className="v">Outfit Eng.</span></div>
            <div className="cell">Method<span className="v">Parts-first</span></div>
            <div className="cell">Output<span className="v">Build sheets</span></div>
          </div>
        </aside>
      </div>
    </section>);

}

/* -------- WORKBENCH -------- */
function NEBench() {
  return (
    <section className="ne-bench">
      <div className="frame">
        <div>
          <div className="label">On the bench</div>
          <h3>The current <span className="it">notebook</span></h3>
          <div className="when">Updated · Mon. 27 Apr</div>
        </div>
        <div className="list">
          <a className="item" href="/en/contributors/nelly/cotton-suiting-in-deep-heat/">
            <div className="num">— Build no. 011</div>
            <p className="t">Cotton suiting in <span className="it">deep heat</span></p>
            <div className="s">For drafting · 4,200 words</div>
          </a>
          <a className="item" href="/en/contributors/nelly/the-contrast-cuff-six-ways/">
            <div className="num">— Build no. 012</div>
            <p className="t">The <span className="it">contrast cuff</span>, six ways</p>
            <div className="s">In the bench · 1,800 words</div>
          </a>
          <a className="item" href="/en/contributors/nelly/why-you-should-over-tailor/">
            <div className="num">— Field note</div>
            <p className="t">Why you should <span className="it">over-tailor</span></p>
            <div className="s">Margin notes · 600 words</div>
          </a>
        </div>
      </div>
    </section>);

}

/* -------- MATERIAL LIBRARY -------- */
function NEMatLib() {
  const sw = [
  { cls: "merino", nm: "Merino jersey", w: "240 g/m²" },
  { cls: "poplin", nm: "Cotton poplin", w: "120 g/m²" },
  { cls: "flannel", nm: "Worsted flannel", w: "320 g/m²" },
  { cls: "silk", nm: "Silk charmeuse", w: "16 m/m" },
  { cls: "tweed", nm: "Donegal tweed", w: "380 g/m²" },
  { cls: "leather", nm: "Vegetable leather", w: "1.4 mm" }];

  return (
    <section className="ne-matlib">
      <div className="frame">
        <div>
          <div className="label">Material library</div>
          <h3>The six fabrics she <span className="it">returns to</span></h3>
          <p className="lede">Before silhouette, before color, the material decides whether the outfit will hold.</p>
        </div>
        <div className="ne-swatches">
          {sw.map((s, i) =>
          <div key={i} className={`ne-sw ${s.cls}`}>
              <div className="chip" />
              <div className="meta">
                <span className="nm">{s.nm}</span>
                {s.w} · ref {String(i + 1).padStart(2, "0")}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------- BUILDS (signature section) -------- */
function NEBuilds() {
  const builds = [
  {
    id: "BLD-001",
    title: <>The <span className="it">collar theory</span> shirt-knit</>,
    tagline: "Soft body, sharp frame. Three textures, one silhouette.",
    photo: NE_IMG.build1,
    thumbs: [
    { src: NE_IMG.thumb1a, lbl: "fig. a · collar geometry" },
    { src: NE_IMG.thumb1b, lbl: "fig. b · cuff inset" },
    { src: NE_IMG.thumb1c, lbl: "fig. c · waist break" }],

    annos: [
    { c: "an-1", t: "sharp poplin collar" },
    { c: "an-2", t: "merino body, ribbed" },
    { c: "an-3", t: "high-rise pleat trouser" }],

    dim: "62 cm · shoulder to seat",
    bom: [
    { what: <>Knit shirt, <span className="it">short-sleeve</span></>, sub: "Merino, 7 gauge", where: "Studio Nicholson" },
    { what: <>Detachable poplin <span className="it">collar</span></>, sub: "Cotton, 120 g/m²", where: "Sézane" },
    { what: <>High-rise <span className="it">trouser</span></>, sub: "Worsted, single pleat", where: "Khaite" },
    { what: <>Calf <span className="it">slingback</span></>, sub: "65 mm heel, almond toe", where: "The Row" },
    { what: <>Top-handle <span className="it">bag</span></>, sub: "Patent leather, structured", where: "Prada Cleo" }],

    subs: [
    "Knit shirt → Long-sleeve merino crew, sleeves pushed",
    "Trouser → Pleated wide-leg jeans (dark indigo only)",
    "Slingback → Polished derby; never sneakers in this build"]

  },
  {
    id: "BLD-002",
    title: <>The <span className="it">borrowed</span> tailoring suit</>,
    tagline: "Men's-cut blazer, oversized shoulder, deliberately too big.",
    photo: NE_IMG.build2,
    thumbs: [
    { src: NE_IMG.thumb2a, lbl: "fig. a · shoulder line" },
    { src: NE_IMG.thumb2b, lbl: "fig. b · sleeve crumple" },
    { src: NE_IMG.thumb2c, lbl: "fig. c · bias drape" }],

    annos: [
    { c: "an-1", t: "shoulder +2cm of frame" },
    { c: "an-2", t: "sleeve to second knuckle" },
    { c: "an-3", t: "trouser breaks once at instep" }],

    dim: "78 cm · shoulder span",
    bom: [
    { what: <>Wool <span className="it">blazer</span>, men's cut</>, sub: "Two-button, soft canvas", where: "The Frankie Shop" },
    { what: <>Silk <span className="it">tank</span></>, sub: "Bias-cut, 16 m/m", where: "Vintage / repro" },
    { what: <>Pleated <span className="it">trouser</span>, matched</>, sub: "Same suiting, hemmed long", where: "Tailor (1.5 hrs)" },
    { what: <>Leather <span className="it">belt</span>, narrow</>, sub: "30 mm, oxidised buckle", where: "Hender Scheme" },
    { what: <>Pointed <span className="it">flat</span></>, sub: "Calf, no stretch", where: "Gabriela Hearst" }],

    subs: [
    "Tank → Plain white tee, tucked, no logo",
    "Pointed flat → Sock-loafer (only with cropped trouser)",
    "Belt → None; let the trouser sit on the hipbone"]

  },
  {
    id: "BLD-003",
    title: <>The <span className="it">working</span> uniform</>,
    tagline: "What she wears Tuesday through Friday, with three small variables.",
    photo: NE_IMG.build3,
    thumbs: [
    { src: NE_IMG.thumb3a, lbl: "fig. a · the constants" },
    { src: NE_IMG.thumb3b, lbl: "fig. b · the variables" },
    { src: NE_IMG.thumb3c, lbl: "fig. c · the finish" }],

    annos: [
    { c: "an-1", t: "constant: 5-pocket trouser" },
    { c: "an-2", t: "variable: knit / shirt / tee" },
    { c: "an-3", t: "finish: one piece of metal" }],

    dim: "uniform · 4 days/week",
    bom: [
    { what: <>5-pocket <span className="it">trouser</span></>, sub: "Cotton drill, ecru", where: "Lemaire" },
    { what: <>Variable <span className="it">top</span> (3-rotation)</>, sub: "Knit / poplin / heavy tee", where: "Studio archive" },
    { what: <>Leather <span className="it">loafer</span></>, sub: "Penny, dark brown", where: "G.H. Bass" },
    { what: <>Cuff <span className="it">bracelet</span></>, sub: "Polished steel, 12 mm", where: "Sophie Buhai" },
    { what: <>Cardigan, <span className="it">tied at waist</span></>, sub: "Cotton, oversized", where: "Inheritance" }],

    subs: [
    "Trouser → Same cut in dark navy (Friday only)",
    "Loafer → Brown derby; never trainers in uniform mode",
    "Bracelet → Single watch on opposite wrist; no doubling"]

  }];


  return (
    <section className="ne-sec">
      <div className="frame">
        <div className="ne-sec-head">
          <div className="num">01</div>
          <h2 className="title">Outfit <span className="it">builds</span></h2>
          <div className="meta">N. Lourenço<br />Build sheets · 003 of 011<br />Spring ’26</div>
        </div>
        <p className="ne-sec-lede">
          A build sheet documents every layer the way an engineer documents an assembly: parts list, supplier, the role each piece plays, and three valid substitutions before the build collapses.
        </p>

        <div className="builds">
          {builds.map((b) =>
          <article key={b.id} className="build">
              <div className="build-id">— {b.id}</div>

              <div className="build-sheet eng-full">
                <div className="sheet-bar">
                  <span className="ttl">Sketch sheet · {b.id}</span>
                  <span>Rev. 03</span>
                  <span className="id">N.L.</span>
                </div>
                <div className="build-sketch">
                  <div className="build-thumbs">
                    {b.thumbs.map((th, i) =>
                  <div key={i} className="build-thumb" style={{ backgroundImage: `url(${th.src})` }}>
                        <div className="lbl">{th.lbl}</div>
                      </div>
                  )}
                  </div>
                  <div className="build-fig" style={{ backgroundImage: `url(${b.photo})` }}>
                    {b.annos.map((a, i) =>
                  <div key={i} className={`build-anno ${a.c} eng-only`}>{a.t}</div>
                  )}
                    <div className="build-dim eng-only"><span className="v">{b.dim}</span></div>
                  </div>
                </div>
              </div>

              <div className="build-doc">
                <h3 className="build-title">{b.title}</h3>
                <p className="build-tagline">{b.tagline}</p>

                <div className="build-photo" style={{ backgroundImage: `url(${b.photo})` }}>
                  <div className="stamp">{b.id} · LOOK</div>
                </div>

                <div className="bom">
                  <div className="bom-cap">
                    <span>Bill of materials</span>
                    <span className="a">{b.bom.length} parts</span>
                  </div>
                  {b.bom.map((row, i) =>
                <div key={i} className="bom-row">
                      <div className="n">{String(i + 1).padStart(2, "0")}</div>
                      <div className="what">{row.what}<small>{row.sub}</small></div>
                      <div className="where">{row.where}</div>
                    </div>
                )}
                </div>

                <div className="subs eng-full">
                  <div className="lbl">Valid substitutions</div>
                  <ul>
                    {b.subs.map((s, i) => <li key={i}>{s}</li>)}
                  </ul>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* -------- SUBSTITUTION INDEX -------- */
function NESubsIndex() {
  const rows = [
  { from: "Tailored blazer", fmat: "Wool, soft canvas", to: "Heavy cardigan", tmat: "Cotton, oversized", why: "Holds the same shoulder line if the cardigan is one size up. Loses the lapel; gain a softer break at the hip." },
  { from: "White poplin shirt", fmat: "120 g/m² cotton", to: "White heavy tee", tmat: "240 g/m² jersey", why: "Only when the rest of the build leans soft. Tee never works under tailoring; it always works under denim." },
  { from: "Pointed leather flat", fmat: "Calf, no stretch", to: "Loafer", tmat: "Penny, dark brown", why: "Switch only with cropped trousers — the loafer needs to read against ankle. Hidden under a long hem, it disappears." },
  { from: "Top-handle bag", fmat: "Patent, structured", to: "Soft hobo", tmat: "Suede, slouched", why: "Soften when the rest of the outfit is sharp; structure when the rest is loose. Never both soft." },
  { from: "Cuff bracelet", fmat: "Polished steel", to: "Wide watch", tmat: "Vintage, on bracelet", why: "One piece of metal per outfit. Two reads as styling; one reads as resolved." },
  { from: "Pleated trouser", fmat: "Worsted wool", to: "Wide-leg jean", tmat: "Indigo, raw", why: "Same silhouette family. Crucially, must keep the heel height — pleat collapses without lift." }];

  return (
    <section className="subs-index">
      <div className="frame">
        <div className="ne-sec-head">
          <div className="num">02</div>
          <h2 className="title">The <span className="it">substitution</span> index</h2>
          <div className="meta">Field rules<br />Updated quarterly<br />Issue 04</div>
        </div>
        <p className="ne-sec-lede">
          Every build is one valid substitution from collapse and three substitutions from a different outfit entirely. Here is the index of trades she will accept — and the rules that make each one hold.
        </p>

        <div className="subs-table">
          <div className="subs-row head">
            <span>Ref</span>
            <span>Original</span>
            <span>—</span>
            <span>Substitute</span>
            <span>Rule</span>
          </div>
          {rows.map((r, i) =>
          <div key={i} className="subs-row">
              <div className="n">{String(i + 1).padStart(2, "0")}</div>
              <div className="from-pc">{r.from}<small>{r.fmat}</small></div>
              <div className="arr">→</div>
              <div className="to-pc">{r.to}<small>{r.tmat}</small></div>
              <div className="why">{r.why}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------- PRINCIPLES -------- */
function NEPrinciples() {
  const ps = [
  { t: <>Buy <span className="it">parts</span>, never outfits.</>, d: "An outfit assembled in a single store is an outfit you can't repair. Every piece should have arrived for its own reasons." },
  { t: <>Decide the <span className="it">load-bearing</span> piece first.</>, d: "One garment carries the build. Everything else is in service of it. If you can't name it, you don't have a build — you have a costume." },
  { t: <>Three valid <span className="it">substitutions</span>, no more.</>, d: "Any piece you own should slot into a build with three documented swaps. Below three, the build is fragile. Above three, the piece is generic." },
  { t: <>Work in <span className="it">material pairs</span>.</>, d: "Soft against sharp. Matte against polished. Heavy against fluid. The contrast is the engineering — colour is just the finish." },
  { t: <>Never <span className="it">finish</span> with more than one piece of metal.</>, d: "One belt buckle, or one watch, or one cuff. Two reads as decoration; one reads as decision." },
  { t: <>If a build doesn't <span className="it">hold</span> in the mirror, the brief was wrong.</>, d: "Never the body, never the lighting, never the day. Re-read the brief. Climate. Occasion. Silhouette. Mix. Finish. One of those is wrong." }];

  return (
    <section className="principles">
      <div className="frame">
        <div className="ne-sec-head">
          <div className="num">03</div>
          <h2 className="title">Six <span className="it">principles</span></h2>
          <div className="meta">Manifesto<br />Posted in the studio<br />Print no. 07</div>
        </div>

        <div className="princ-list">
          {ps.map((p, i) =>
          <div key={i} className="princ">
              <div className="n">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="t">{p.t}</h3>
              <p className="d">{p.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------- CLOSET (parts inventory) -------- */
function NECloset() {
  const inv = [
  { id: "PT-01", nm: <>Wool <span className="it">blazer</span>, men's cut</>, sub: "Frankie Shop · 2022", role: "Load-bearing, formal", mat: "Wool worsted", age: "3 yrs", uses: "11 builds" },
  { id: "PT-02", nm: <>Cotton <span className="it">poplin</span> shirt</>, sub: "Sézane · 2021", role: "Frame, contrast", mat: "Cotton 120 gsm", age: "5 yrs", uses: "24 builds" },
  { id: "PT-03", nm: <>Pleated <span className="it">trouser</span>, charcoal</>, sub: "Khaite · 2023", role: "Anchor, vertical", mat: "Wool flannel", age: "2 yrs", uses: "17 builds" },
  { id: "PT-04", nm: <>5-pocket <span className="it">trouser</span>, ecru</>, sub: "Lemaire · 2024", role: "Uniform constant", mat: "Cotton drill", age: "1 yr", uses: "32 builds" },
  { id: "PT-05", nm: <>Penny <span className="it">loafer</span>, dark brown</>, sub: "G.H. Bass · 2020", role: "Uniform constant", mat: "Calf leather", age: "6 yrs", uses: "41 builds" },
  { id: "PT-06", nm: <>Top-handle <span className="it">bag</span>, patent</>, sub: "Prada Cleo · 2022", role: "Finish, structure", mat: "Patent leather", age: "3 yrs", uses: "9 builds" },
  { id: "PT-07", nm: <>Cuff <span className="it">bracelet</span>, steel</>, sub: "Sophie Buhai · 2019", role: "Finish, single", mat: "Polished steel", age: "7 yrs", uses: "Daily" },
  { id: "PT-08", nm: <>Cotton <span className="it">cardigan</span>, oversize</>, sub: "Inherited · 2014", role: "Soften, transitional", mat: "Cotton 320 gsm", age: "12 yrs", uses: "28 builds" }];

  return (
    <section className="ne-closet">
      <div className="frame">
        <div className="ne-sec-head">
          <div className="num">04</div>
          <h2 className="title">The <span className="it">parts</span> inventory</h2>
          <div className="meta">42 active parts<br />Audited quarterly<br />Last · Mar ’26</div>
        </div>
        <p className="ne-sec-lede">
          Every active piece in the studio, logged with role, material, age, and how many builds it currently slots into. A piece below five active builds is a candidate for retirement.
        </p>

        <div className="ne-inv">
          <div className="head">
            <span>Ref</span>
            <span>Part</span>
            <span>Role</span>
            <span>Material</span>
            <span>Age</span>
            <span>Active</span>
          </div>
          {inv.map((r) =>
          <div key={r.id} className="row">
              <span className="id">{r.id}</span>
              <span className="nm">{r.nm}<small>{r.sub}</small></span>
              <span className="role">{r.role}</span>
              <span className="mat">{r.mat}</span>
              <span className="age">{r.age}</span>
              <span className="uses">{r.uses}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------- LETTERS -------- */
function NELetters() {
  const ls = [
  { from: "Anika · London", date: "Apr 18", q: "Everything I own is fine on its own and bad together. Where do I start?", a: <>Pick the piece you reach for most — that's your <strong>load-bearing piece</strong>. Build everything around it for one month. The pieces that don't slot in aren't bad; they belong to a different build. You don't have a wardrobe problem, you have a <em>brief</em> problem.</> },
  { from: "Sasha · Berlin", date: "Apr 11", q: "Is it bad if I just wear the same thing every day?", a: <>It's the opposite of bad — it's <strong>finished engineering</strong>. The trick is to make the constants explicit. Three variables in a uniform (top, finish, footwear) is plenty. Below three, you're stagnant. Above three, you're not actually wearing a uniform.</> },
  { from: "Ren · Tokyo", date: "Apr 03", q: "I love the build sheets but I can't afford the brands. Do the rules still hold?", a: <>The rules are about <strong>role</strong>, not label. A poplin shirt is a poplin shirt — Uniqlo's holds the same role as Sézane's in any build I've published. The substitution index is for exactly this. The label is the last decision, never the first.</> },
  { from: "Mira · Cape Town", date: "Mar 27", q: "How do I know when to retire a piece?", a: <>Two tests. First: does it slot into <strong>five or more active builds</strong>? If not, it's a special-occasion piece — fine, but log it that way. Second: when you wear it, do you build the outfit <em>around</em> it or <em>despite</em> it? If despite, retire.</> }];

  return (
    <section className="ne-letters">
      <div className="frame">
        <div className="ne-sec-head">
          <div className="num">05</div>
          <h2 className="title">Letters to the <span className="it">bench</span></h2>
          <div className="meta">Reader Q&amp;A<br />Posted weekly<br />Issue 04 · Letters 18–21</div>
        </div>
        <div className="grid">
          {ls.map((l, i) =>
          <div key={i} className="ne-letter">
              <div className="head-row">
                <span className="from">From: {l.from}</span>
                <span>{l.date}</span>
              </div>
              <p className="q">{l.q}</p>
              <p className="a">{l.a}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------- CROSS to JT -------- */
function NECross() {
  return (
    <section className="ne-cross">
      <div className="frame">
        <div className="img" style={{ backgroundImage: `url(${NE_IMG.jt})` }}>
          <div className="stamp">JT · Profile 001</div>
        </div>
        <div className="body">
          <div className="eyebrow">The other half of the masthead</div>
          <h3>JT writes <span className="it">defenses</span>. Nelly writes <span className="it">builds</span>.</h3>
          <p>He'll tell you why one navy crewneck is enough for a decade. She'll show you nine ways to assemble the rest of the outfit around it. Together they cover most of what we publish.</p>
          <a className="cta" href="/en/contributors/jt/">Read JT's profile <span className="arr">→</span></a>
        </div>
      </div>
    </section>);

}

/* -------- FOOTER (shared mini) -------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-mast">How To<span className="gold">:</span> <em>Fashion</em></div>
        <div className="footer-grid">
          <div className="footer-sub">
            <h4 style={{ marginTop: 0 }}>The dispatch</h4>
            <p>One build, one defense, one substitution rule. Every Sunday.</p>
            <div className="footer-sub-input">
              <input placeholder="your@email" />
              <button>Subscribe</button>
            </div>
          </div>
          <div className="footer-col">
            <h4>Sections</h4>
            <ul><li>Women</li><li>Men</li><li>Builds</li><li>Defenses</li><li>Lookbook</li></ul>
          </div>
          <div className="footer-col">
            <h4>Contributors</h4>
            <ul><li>JT</li><li>Nelly Lourenço</li><li>Guests</li><li>Submit</li></ul>
          </div>
          <div className="footer-col">
            <h4>The co.</h4>
            <ul><li>About</li><li>Contact</li><li>Press</li><li>Archive</li></ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© The How To Co. · Issue 04</span>
          <span>Set in Playfair, DM Sans, JetBrains Mono</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  NECrumb, NEHero, NEBench, NEMatLib, NEBuilds, NESubsIndex,
  NEPrinciples, NECloset, NELetters, NECross, Footer
});