/* global React */
/* =========================================================================
   Suede Shoes, in Actual Rain — JT
   Reuses the .fd magazine layout (jt-fathers-day.css).

   TRANSLATION NOTE: every visible string lives in SD_COPY (paras + steps).
   Translate values only; markup/classes/images/hrefs stay.
   ========================================================================= */

const SD_IMG = {
  hero:  "/assets/jt-suede/wet-boots.png",   // full-bleed hero + closer
  care:  "/assets/jt-suede/care.png",        // image+text row (care)
  clean: "/assets/jt-closet/chukkas.png",    // image+text row (the boots, dry)
  // related cards
  denim: "https://images.unsplash.com/photo-1582418702059-97ebafb35d09?w=1200&q=80",
  knit:  "https://images.unsplash.com/photo-1638391506914-fb6e9a26d9d8?w=1200&q=80",
  men:   "https://images.unsplash.com/photo-1617137968427-85924c800a22?w=1200&q=80",
};

const SD_COPY = {
  kicker: "Finish · Footwear",
  titleTop: "Suede Shoes,",
  titleBot: "in actual rain.",
  subtitle: "Everyone tells you to keep suede out of the rain. Everyone is wrong — if you do three things first.",

  byline: {
    by: "Words by",
    name: "JT",
    href: "/en/contributors/jt/",
    avatar: "/assets/jt.png",
    role: "Men's Lane Editor",
    read: "4 min read",
  },

  hero: {
    caption: "Five years, three winters, more downpours than I can count.",
    credit: "The Fashion Edition · Photographed in Atlanta",
  },

  paras: [
    "The first thing anyone tells you about suede is not to get it wet.",
    "It's advice that sounds like caution and works like fear. Don't wear it in the rain. Don't wear it in winter. Save it for dry days, dry rooms, dry years. Follow that far enough and you've bought a pair of shoes you're afraid of, which is a strange thing to do with shoes.",
    "I've worn the same suede chukkas for five years. Through Atlanta summers that open up without warning, through three winters, through more honest downpours than I can count. They've been soaked through twice. They're fine — better than fine. They've got a depth a careful pair never earns.",
    "The trick isn't avoiding water. It's three things you do before the rain shows up, and one thing you do after.",
    // after the steps:
    "Here's what's actually happening when suede gets wet: water darkens it while it's damp and lightens back as it dries. The mark that scares people is almost always just moisture, and moisture leaves. The things that genuinely kill suede are heat, salt, and being ignored.",
    "Winter is the real test, not rain. Road salt is the one thing that leaves a permanent white tide line. If you walk through salted slush, don't let it sit — wipe it the moment you're inside with a damp cloth and a drop of white vinegar, then dry it slow.",
    "There is a line, to be fair. A true all-day downpour, or a formal night spent crossing salted streets — wear the rubber-soled leather and leave the suede home. But a normal rainy Tuesday? Wear the suede. That's the entire point of owning it.",
    "Treat suede like something you use instead of something you're protecting, and it will outlast every piece of advice that ever told you to keep it inside.",
  ],

  closerLine: "It shows you exactly what you do to it.",

  stepsEyebrow: "Before the rain, and after",
  steps: [
    { lead: "Protect it before it ever rains.", body: "Spray them with a proper suede and nubuck protector — the stuff made for napped leather, not the all-purpose can — before the first wear, and again every couple of months. It does not waterproof them. It buys you time: water beads instead of soaking in, and you get home before it matters. Two light coats, dry overnight, done." },
    { lead: "Keep a brush by the door.", body: "A suede brush, nothing fancy. Water and grit flatten the nap; the brush lifts it back up. Thirty seconds when the shoes are dry. This is most of the difference between the man whose suede looks dead and the man whose suede looks alive — and it costs about eight dollars." },
    { lead: "Dry them slow, never hot.", body: "Off the radiator. Wet suede plus heat is how you get stiff, cracked, shrunken leather. Room temperature, away from any heat source, with cedar trees or crumpled paper inside to hold the shape and pull the moisture out. Give it a full day. Then brush. They come back." },
  ],

  careCaption: "A brush and a slow dry. That's the whole maintenance program.",
  cleanCaption: "Same pair, dry by morning.",
  pull: "Suede isn't delicate. It's honest.",

  sign: { name: "JT", role: "Men's Lane Editor · The Fashion Edition", href: "/en/contributors/jt/", avatar: "/assets/jt.png" },

  related: {
    eyebrow: "More from JT",
    cards: [
      { kicker: "Starter Five · No. 02", title: "The Denim Holy Trinity", desc: "Three pairs of jeans every man needs — and the fourth nobody else will tell you about.", href: "/en/contributors/jt/the-denim-holy-trinity/", img: SD_IMG.denim },
      { kicker: "Starter Five · No. 01", title: "The Navy Crewneck", desc: "Why the best clothing dollar a man spends is on one good navy crewneck.", href: "/en/contributors/jt/the-navy-crewneck/", img: SD_IMG.knit },
      { kicker: "Father's Day", title: "How Your Father Dressed", desc: "Clothes as presentation, not self-expression — JT's Father's Day essay.", href: "/en/contributors/jt/how-your-father-dressed/", img: "/assets/fathers-day/wardrobe.png" },
    ],
  },
};

const sdpara = (i) => SD_COPY.paras[i];
function SDParas({ items }) { return items.map((i) => <p key={i}>{sdpara(i)}</p>); }

function SDTopper() {
  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={SD_COPY.byline.href}>JT</a><span className="sep">/</span>
          <span className="here">{SD_COPY.titleTop} {SD_COPY.titleBot}</span>
        </div>
        <div className="fd-stamp">Finish<span className="dot" />Footwear care</div>
      </div>
    </div>
  );
}

function SDHead() {
  const b = SD_COPY.byline;
  return (
    <div className="fd-shell">
      <header className="fd-head">
        <div className="fd-kicker">{SD_COPY.kicker}</div>
        <h1 className="fd-h1">{SD_COPY.titleTop} <span className="it">{SD_COPY.titleBot}</span></h1>
        <p className="fd-sub">{SD_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>
  );
}

function SDHero() {
  return (
    <figure className="fd-figure fd-band hero fd-hero-wrap">
      <div className="img" style={{ backgroundImage: `url(${SD_IMG.hero})` }} />
      <figcaption className="fd-cap">
        <span>{SD_COPY.hero.caption}</span>
        <span className="accent">{SD_COPY.hero.credit}</span>
      </figcaption>
    </figure>
  );
}

function SDDeck() {
  return <div className="fd-shell"><section className="fd-deck"><p>{sdpara(0)}</p></section></div>;
}

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

function SDSteps() {
  return (
    <div className="fd-shell">
      <section className="fd-principles">
        <div className="fd-prin-eyebrow">{SD_COPY.stepsEyebrow}</div>
        <ol className="fd-prin-list">
          {SD_COPY.steps.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>
    </div>
  );
}

function SDCareRow() {
  return (
    <div className="fd-shell">
      <section className="fd-row fd-2col">
        <figure className="im fd-figure">
          <div className="ph" style={{ backgroundImage: `url(${SD_IMG.care})` }} />
          <figcaption className="rcap">{SD_COPY.careCaption}</figcaption>
        </figure>
        <div className="tx fd-prose"><SDParas items={[4, 5]} /></div>
      </section>
    </div>
  );
}

function SDPull() {
  return <div className="fd-shell"><section className="fd-pull line"><blockquote>{SD_COPY.pull}</blockquote></section></div>;
}

function SDCleanRow() {
  return (
    <div className="fd-shell">
      <section className="fd-row fd-2col rev">
        <figure className="im fd-figure">
          <div className="ph" style={{ backgroundImage: `url(${SD_IMG.clean})` }} />
          <figcaption className="rcap">{SD_COPY.cleanCaption}</figcaption>
        </figure>
        <div className="tx fd-prose"><SDParas items={[6, 7]} /></div>
      </section>
    </div>
  );
}

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

function SDSign() {
  const s = SD_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>
  );
}

function SDRelated() {
  return (
    <div className="fd-shell">
      <section className="fd-related">
        <div className="ey">{SD_COPY.related.eyebrow}</div>
        <div className="fd-cards">
          {SD_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>
  );
}