/* global React */
/* =========================================================================
   The Shoe Rotation Rule — Nelly
   Reuses the .fd magazine layout (jt-fathers-day.css) with the .fd-nelly
   accent, exactly as "Nelly - What Your Dad Wore.html" does.

   TRANSLATION NOTE: every visible string lives in NSR_COPY (paras + jobs +
   care + faq). Translate values only; markup/classes/images/hrefs stay.
   `paras`, `jobs` and `faq` are Nelly's copy verbatim — translate, don't rewrite.
   ========================================================================= */

const NSR_IMG = {
  hero: "/assets/nelly-shoe-rotation-hero.jpg", // full-bleed hero + closer
  // related cards (existing assets)
  cotton: "/assets/nelly-collar-theory-full.png?v=3",
  dad: "/assets/nelly-fathers-day/closet.png",
  women: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1200&q=80",
};

const NSR_COPY = {
  kicker: "Build · Footwear",
  titleTop: "I Wore the Same Boots Two Winters Straight.",
  titleBot: "They died in February.",
  subtitle: "Not a wardrobe philosophy. A drying schedule — and the reason three pairs outlast six.",

  byline: {
    by: "Words by",
    name: "Nelly",
    href: "/en/contributors/nelly/",
    avatar: "/assets/nelly.png",
    role: "Style Director",
    read: "6 min read",
  },

  hero: {
    caption: "They cracked across the ball of the foot in February.",
    credit: "The Fashion Edition · Footwear",
  },

  // Nelly's essay — verbatim, in order. Translate only; never rewrite.
  deck: "The boots were good. That is the part that still annoys me.",
  paras: [
    /* 0 */ "Properly made, resoleable, bought deliberately after a long stretch of buying badly. I wore them nearly every day for two winters because they went with everything, which felt like thrift at the time.",
    /* 1 */ "They cracked across the ball of the foot in February. Not the sole — the upper, the leather itself, a split running along the flex point where my foot bends. The cobbler turned them over twice, looked at me, and asked how often I'd worn them. Then he explained what I had actually done, which was drown them slowly from the inside.",
    /* 2 */ "Your feet put out a genuine amount of moisture across a day. That moisture goes into the lining and then into the leather. Leather can handle it — it is skin, it is used to this — but it needs to dry, and drying takes about a day. Wear the same pair every day and it never gets that day. The fibres stay damp, the salts stay in them, and the leather stiffens and then fails exactly where it flexes most.",
    /* 3 */ "So the rotation rule is not really about style. It is about giving a pair twenty-four hours off.",

    /* 4 */ "For one season, three pairs in active rotation is the number that works. Not because three is elegant, but because it means nothing you own gets worn two days running.",
    /* 5 */ "What that buys you is disproportionate. You are not tripling their life — nothing is that tidy — but a pair worn every other day, dried properly, holding its shape, lasts meaningfully longer than the same pair worn into the ground. My boots would still be alive.",
    /* 6 */ "The other thing it buys you is shape. Leather takes the form of whatever it dried in. Dried on your foot, it holds the creases of a walking foot. Dried resting with a tree in it, it holds its own line.",

    /* 7 */ "That is the wardrobe. Three, and then stop, and spend the rest on resoling.",

    /* 8 */ "I resisted these for years on the grounds that they seemed fussy. They are not fussy. They are the difference between a shoe that ages and a shoe that collapses.",
    /* 9 */ "Unfinished cedar does two jobs: it pulls moisture out of the lining, and it holds the upper in its intended shape while that happens. It also handles odour, which is the same problem wearing a different coat.",
    /* 10 */ "Here is what is imperfect about them: they cost real money for something that looks like a museum object, a decent pair runs more than people expect, and you need a pair per pair of shoes for the system to work, which turns a small purchase into a slightly annoying one. I still think they are the highest-return thing in this article.",

    /* 11 */ "This is the honest limit of everything above. Rotating protects the upper. It does very little for the sole, which wears on distance walked — the same miles, spread across three pairs instead of one.",
    /* 12 */ "If you buy leather-soled shoes, consider a thin rubber protector added before the first wear. It costs little, it grips better in rain, and it means the leather sole underneath is still there in five years. Some people find it inelegant. I find replacing shoes inelegant.",

    /* 13 */ "Everything above assumes leather. Sneakers with foam midsoles play by different rules, and it is worth being blunt: the foam compresses permanently with use, and it also degrades slowly just sitting in a cupboard. Rotation does not save a midsole. Nothing saves a midsole.",
    /* 14 */ "You can keep the uppers clean and looking new for years — and you should, it is the visible half — but a pair that feels flat and dead underfoot is finished regardless of how white you got them. That is not a care failure. That is the material.",
    /* 15 */ "So rotate them for the same reason you rotate anything, to let the lining dry, and then accept that this pair has a mileage number on it and no amount of attention changes the number.",

    /* 16 */ "Not in the box, in a damp cupboard, with the tissue paper still stuffed in the toe. Not in plastic. Boxes trap the moisture you're trying to get rid of and the closet at the bottom of the stairs is usually the damp one.",
    /* 17 */ "Open shelf, air, trees in, a few inches between pairs. That is the whole system. If you want them dust-free, a cotton bag breathes and plastic does not.",

    /* 18 */ "I replaced the boots with the same model, which felt like an admission of something. They are on their second resole now and the leather has gone soft in the way good leather does when it is allowed to dry between wears.",
    /* 19 */ "I still think about the first pair.",
  ],

  headings: {
    three: "Three pairs, and why the number is three",
    contains: "What the rotation should actually contain",
    cedar: "Cedar trees are the one accessory worth the money",
    soles: "Rotation does nothing for soles, and soles are where the money is",
    sneakers: "Sneakers are the exception, and I am sorry about it",
    storage: "Storage, briefly",
    faq: "Questions",
  },

  jobsIntro: "Three pairs, three jobs. Any more than this and you are collecting, which is fine, but it is not this.",
  jobs: [
    { lead: "One you can walk all day in.", body: "The pair you do not think about. Whatever that is for you — a loafer, a sneaker, a flat boot. The test is whether you'd say yes to a detour on foot." },
    { lead: "One that reads dressed.", body: "Not formal. Just the pair that makes the same trousers look deliberate." },
    { lead: "One for weather.", body: "A sole with real grip and an upper that survives rain. This is the pair everyone skips and then ruins something good in a storm." },
  ],

  pull: "I was not being thrifty. I was drowning a good pair of boots slowly, from the inside.",
  pullBy: "— Nelly",

  // cedar detail paragraph — the emphasis is Nelly's
  cedarDetail: {
    a: "Two details that matter. ",
    strong: "Unfinished",
    b: ", not varnished — a sealed tree is a piece of wood that does nothing. And put them in when you take the shoes off, while they're still warm and damp, not the next morning. The drying is the point.",
  },

  // resoling paragraph — the emphasis is Nelly's
  soleDetail: {
    a: "Which is why the real economy is resoling. A leather-soled shoe can be resoled several times over its life for a fraction of replacing it, and a good cobbler can do it before the welt is damaged, which is the whole trick: ",
    strong: "take them in when the sole is thin, not when it has a hole.",
    b: " Once water has been getting to the welt, the repair stops being simple.",
  },

  care: {
    kicker: "Care",
    body: "Rotation and trees handle moisture and shape. What they don't handle is the surface — the salt line on a boot after winter, the grey that settles into white leather. A basic cleaner, a soft brush, and a conditioner cover essentially everything I own, and the whole kit costs less than one resole.",
    linkLabel: "Shoe care kits and cleaners",
    href: "/go/nelly-shoe-rotation",
    disclosure: "Some links here are affiliate links — if you buy through one, HowTo: Fashion Edition earns a commission at no extra cost to you.",
  },

  closer: "Two winters is not a life.",

  sign: { name: "Nelly", role: "Style Director · The Fashion Edition", href: "/en/contributors/nelly/", avatar: "/assets/nelly.png" },

  faq: [
    { q: "How many pairs of shoes do you need in rotation?", a: "Three pairs for a season is enough — one you can walk all day in, one that reads dressed, and one built for weather. The purpose of three is that nothing gets worn two days in a row, which gives each pair about 24 hours to dry." },
    { q: "Why shouldn't you wear the same shoes every day?", a: "Feet release moisture into the lining and the leather, and leather needs roughly a day to dry out. Worn daily it never dries, and the fibres stiffen and eventually split at the flex point across the ball of the foot." },
    { q: "Are cedar shoe trees worth it?", a: "Yes, if they are unfinished rather than varnished, and if you insert them while the shoes are still warm from wear. They draw moisture out of the lining and hold the upper in shape while it dries. You need one pair per pair of shoes." },
    { q: "Does rotating shoes make the soles last longer?", a: "Not really. Soles wear on distance walked, so rotation spreads the same mileage across more pairs. The saving on soles comes from resoling — and from taking them to a cobbler when the sole is thin rather than after it has worn through to the welt." },
    { q: "Does shoe rotation help sneakers?", a: "It helps the lining dry and keeps the upper looking better, but foam midsoles compress permanently with use and degrade over time regardless of care. A sneaker that feels flat underfoot is finished even if it still looks clean." },
  ],

  related: {
    eyebrow: "More from Nelly",
    cards: [
      { kicker: "Field Note", title: "Cotton Suiting in Deep Heat", desc: "How to wear tailoring when the temperature refuses to cooperate.", href: "/en/contributors/nelly/cotton-suiting-in-deep-heat/", img: NSR_IMG.cotton },
      { kicker: "Father's Day", title: "What Your Dad Wore", desc: "Coherence, fit, occasion — the wardrobe logic that got lost.", href: "/en/contributors/nelly/what-your-dad-wore/", img: NSR_IMG.dad },
      { kicker: "The Handbook", title: "The Women Lane", desc: "Build, wear, style, fit, finish — the editorial wardrobe, assembled.", href: "/en/women/", img: NSR_IMG.women },
    ],
  },
};

const nsrpara = (i) => NSR_COPY.paras[i];
function NSRParas({ items }) { return items.map((i) => <p key={i}>{nsrpara(i)}</p>); }

/* ---------------------------------------------------------------- TOPPER */
function NSRTopper() {
  return (
    <div className="fd-shell">
      <div className="fd-topper">
        <div className="fd-crumb">
          <a href="/">How To: Fashion</a><span className="sep">/</span>
          <a href={NSR_COPY.byline.href}>Nelly</a><span className="sep">/</span>
          <span className="here">The Shoe Rotation Rule</span>
        </div>
        <div className="fd-stamp">Build<span className="dot" />Footwear care</div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ HEAD */
function NSRHead() {
  const b = NSR_COPY.byline;
  return (
    <div className="fd-shell">
      <header className="fd-head">
        <div className="fd-kicker">{NSR_COPY.kicker}</div>
        <h1 className="fd-h1">{NSR_COPY.titleTop} <span className="it">{NSR_COPY.titleBot}</span></h1>
        <p className="fd-sub">{NSR_COPY.subtitle}</p>
        <div className="fd-byline">
          <span className="avatar" style={{ backgroundImage: `url(${b.avatar})` }} />
          <span className="who"><span className="by">{b.by}</span><br /><span className="name"><a href={b.href}>{b.name}</a></span></span>
          <span className="meta">{b.role}<br />{b.read}</span>
        </div>
      </header>
    </div>
  );
}

/* --------------------------------------------------------- full-bleed hero */
function NSRHero() {
  return (
    <figure className="fd-figure fd-band hero fd-hero-wrap">
      <div className="img" style={{ backgroundImage: `url(${NSR_IMG.hero})` }} />
      <figcaption className="fd-cap">
        <span>{NSR_COPY.hero.caption}</span>
        <span className="accent">{NSR_COPY.hero.credit}</span>
      </figcaption>
    </figure>
  );
}

function NSRDeck() {
  return <div className="fd-shell"><section className="fd-deck"><p>{NSR_COPY.deck}</p></section></div>;
}

function NSRLead() {
  return (
    <div className="fd-shell">
      <section className="fd-block lead first">
        <div className="fd-2col fd-prose">
          <div className="c"><NSRParas items={[0, 1]} /></div>
          <div className="c"><NSRParas items={[2, 3]} /></div>
        </div>
      </section>
    </div>
  );
}

/* ------------------------------------------------- three pairs, and why three */
function NSRThree() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{NSR_COPY.headings.three}</h2>
        <div className="fd-2col fd-prose">
          <div className="c"><NSRParas items={[4, 5]} /></div>
          <div className="c"><NSRParas items={[6]} /></div>
        </div>
      </section>
    </div>
  );
}

/* ------------------------------------------------ what the rotation contains */
function NSRJobs() {
  return (
    <div className="fd-shell">
      <section className="fd-principles">
        <h2 className="fd-prin-eyebrow">{NSR_COPY.headings.contains}</h2>
        <p className="fd-prin-intro">{NSR_COPY.jobsIntro}</p>
        <ol className="fd-prin-list">
          {NSR_COPY.jobs.map((p, i) => (
            <li className="fd-prin" key={i}>
              <span className="pn">{String(i + 1).padStart(2, "0")}</span>
              <div className="pc"><h3 className="ph">{p.lead}</h3><p className="pb">{p.body}</p></div>
            </li>
          ))}
        </ol>
      </section>
      <section className="fd-block">
        <div className="fd-prose"><NSRParas items={[7]} /></div>
      </section>
    </div>
  );
}

function NSRPull() {
  return (
    <div className="fd-shell">
      <section className="fd-pull line">
        <blockquote>{NSR_COPY.pull}</blockquote>
        <div className="fd-look-eyebrow">{NSR_COPY.pullBy}</div>
      </section>
    </div>
  );
}

/* ------------------------------------------------- cedar trees (dark chapter) */
function NSRCedar() {
  const d = NSR_COPY.cedarDetail;
  return (
    <section className="fd-dark">
      <div className="inner">
        <h2 className="eyebrow">{NSR_COPY.headings.cedar}</h2>
        <div className="fd-2col">
          <div className="c">
            <p>{nsrpara(8)}</p>
            <p>{nsrpara(9)}</p>
          </div>
          <div className="c">
            <p>{d.a}<strong>{d.strong}</strong>{d.b}</p>
            <p>{nsrpara(10)}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* --------------------------------------------------------- soles / resoling */
function NSRSoles() {
  const d = NSR_COPY.soleDetail;
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{NSR_COPY.headings.soles}</h2>
        <div className="fd-2col fd-prose">
          <div className="c">
            <p>{nsrpara(11)}</p>
            <p>{d.a}<strong>{d.strong}</strong>{d.b}</p>
          </div>
          <div className="c"><NSRParas items={[12]} /></div>
        </div>
      </section>
    </div>
  );
}

/* ---------------------------------------------------------- affiliate card */
function NSRCare() {
  const c = NSR_COPY.care;
  return (
    <div className="fd-shell">
      <section className="fd-affil">
        <div className="ak">{c.kicker}</div>
        <p className="ab">{c.body}</p>
        <div>
          <a className="al" href={c.href} rel="sponsored nofollow">{c.linkLabel}</a>
        </div>
        <p className="ad">{c.disclosure}</p>
      </section>
    </div>
  );
}

/* --------------------------------------------------------------- sneakers */
function NSRSneakers() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{NSR_COPY.headings.sneakers}</h2>
        <div className="fd-2col fd-prose">
          <div className="c"><NSRParas items={[13]} /></div>
          <div className="c"><NSRParas items={[14, 15]} /></div>
        </div>
      </section>
    </div>
  );
}

/* ---------------------------------------------------------------- storage */
function NSRStorage() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{NSR_COPY.headings.storage}</h2>
        <div className="fd-2col fd-prose">
          <div className="c"><NSRParas items={[16]} /></div>
          <div className="c"><NSRParas items={[17]} /></div>
        </div>
      </section>
    </div>
  );
}

/* ------------------------------------------------------------ quiet close */
function NSRSignoffProse() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <div className="fd-2col fd-prose">
          <div className="c"><NSRParas items={[18]} /></div>
          <div className="c"><NSRParas items={[19]} /></div>
        </div>
      </section>
    </div>
  );
}

function NSRCloser() {
  return (
    <section className="fd-closer">
      <div className="img" style={{ backgroundImage: `url(${NSR_IMG.hero})`, backgroundPosition: "center 60%" }} />
      <div className="veil"><div className="inner"><p className="final">{NSR_COPY.closer}</p></div></div>
    </section>
  );
}

function NSRSign() {
  const s = NSR_COPY.sign;
  return (
    <div className="fd-shell">
      <div className="fd-sign">
        <span className="avatar" style={{ backgroundImage: `url(${s.avatar})` }} />
        <span className="txt"><span className="n">{s.name}</span><br /><span className="r">{s.role}</span></span>
      </div>
    </div>
  );
}

/* -------------------------------------------------------------------- FAQ */
function NSRFaq() {
  return (
    <div className="fd-shell">
      <section className="fd-principles">
        <h2 className="fd-prin-eyebrow">{NSR_COPY.headings.faq}</h2>
        <ol className="fd-prin-list">
          {NSR_COPY.faq.map((f, i) => (
            <li className="fd-prin" key={i}>
              <span className="pn">{String(i + 1).padStart(2, "0")}</span>
              <div className="pc"><h3 className="ph">{f.q}</h3><p className="pb">{f.a}</p></div>
            </li>
          ))}
        </ol>
      </section>
    </div>
  );
}

function NSRRelated() {
  return (
    <div className="fd-shell">
      <section className="fd-related">
        <div className="ey">{NSR_COPY.related.eyebrow}</div>
        <div className="fd-cards">
          {NSR_COPY.related.cards.map((c) => (
            <a key={c.href} className="fd-card" href={c.href}>
              <div className="ci" style={{ backgroundImage: `url(${c.img})` }} />
              <div className="ck">{c.kicker}</div>
              <div className="ct">{c.title}</div>
              <div className="cd">{c.desc}</div>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}