/* global React */
/* =========================================================================
   How Your Father Dressed — JT · Father's Day 2026
   Warm Editorial Memoir set as a magazine feature: body runs in balanced
   two-column blocks, images go big / full-bleed, pull quotes span the measure.

   TRANSLATION NOTE:
   Every word a reader sees lives in FD_COPY below. Translate the *values*
   (strings + the `paras` array) and leave markup, classes, image paths, and
   hrefs untouched. `paras` is JT's essay verbatim, in order — translate only,
   never rewrite. Captions / pull / eyebrow are short phrases lifted verbatim.
   ========================================================================= */

const FD_IMG = {
  hero:   "/assets/fathers-day/wardrobe.png",  // full-bleed hero
  cuff:   "/assets/fathers-day/cuff.png",      // image+text row
  shirt:  "/assets/fathers-day/shirt.png",     // image+text row
  mirror: "/assets/fathers-day/mirror.png",    // full-bleed closer
  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 FD_COPY = {
  kicker: "Father's Day · The Fashion Edition",
  titleTop: "How Your Father",
  titleBot: "Dressed.",
  subtitle: "And what it was actually saying.",

  byline: {
    by: "Words by",
    name: "JT",
    href: "/en/contributors/jt/",
    avatar: "/assets/jt.png",          // swap for JT's byline portrait when ready
    date: "Father's Day 2026",
    read: "6 min read",
  },

  hero: {
    caption: "A work wardrobe, a church wardrobe, and everything else.",
    credit: "The Fashion Edition · Father's Day 2026",
  },

  // JT's essay — verbatim, in order. Translate only; never rewrite.
  paras: [
    "My father dressed to get the job done.",
    "Not in a careless way. He was neat. His clothes were clean and pressed and appropriate for the occasion. But the frame he operated in was entirely different from the one most men my age grew up inside. For him, clothes were functional. They covered you, they fit the situation, they didn't cause problems. That was success.",
    "He had a work wardrobe, a church wardrobe, and everything else. The categories were clear and the clothes didn't cross between them. His work shoes were for work. You didn't wear work shoes on a Saturday. This was not a formal rule. It was just obvious.",
    "He did not think about clothes the way I think about clothes. Not because he lacked taste — he had taste, you could see it in how he put things together, a kind of quiet coherence that came from knowing who he was and dressing accordingly. But he was not interested in clothes as self-expression. He was interested in clothes as presentation. There is a difference and it is a generational one.",
    "The generation I came up in was sold something different. We were told that what you wear is who you are. That style is identity. That the right pair of sneakers means something about you as a person. We spent a lot of money and a lot of attention on things that probably didn't need either.",
    "My father spent almost none of his mental energy on clothes and was correctly dressed for every situation he walked into.",
    "I'm not sure he had the worse approach.",
    "Here is what I think he understood that took me too long to figure out: the goal is not to be noticed for what you're wearing. The goal is to be appropriate, clean, and coherent, and then to be noticed for everything else. Clothes that call attention to themselves are doing your job for you and not doing it as well as you could.",
    "He wore a white dress shirt to church for forty years. It was the same category of shirt — well-fitted, pressed, collar right. Different shirts over the years, same approach. He never looked wrong. He never looked like he was trying. He looked like himself, which is the hardest thing to look like and the most valuable.",
    "The generational shift I see now — and I say this having participated in it myself — is that men started treating clothes as something to figure out and optimize rather than something to simply get right. We read articles about capsule wardrobes and investment pieces and the correct way to roll a sleeve. We turned getting dressed into a project.",
    "My father got dressed in ten minutes and spent the rest of the day doing the things that actually mattered.",
    "I want to be careful here because I'm not arguing for carelessness. How you present yourself matters. Clothes communicate before you speak and that communication is real and has consequences. Fit matters. Occasion-appropriateness matters. Cleanliness is a baseline, not an achievement.",
    "What my father had that I'm still working toward is the confidence to dress simply and correctly without second-guessing it. To know what works for him, buy enough of it, and stop thinking about it. To remove the category of “figuring out clothes” from his mental load entirely.",
    "That is a form of mastery that doesn't look like mastery. It looks effortless because the effort happened once, decades ago, when he figured out who he was and what that looked like, and then he just kept being that.",
    "The men I admire most dress this way. They are not wearing the most expensive things. They are not wearing the most current things. They are wearing things that fit, that are appropriate, that cohere with each other and with who the person is. They look like themselves.",
    "That is what your father was doing when you thought he was just not paying attention.",
    "He had already figured it out.",
  ],

  darkEyebrow: "Presentation, not self-expression",
  cuffCaption: "He never looked like he was trying.",
  shirtCaption: "Different shirts over the years, same approach.",
  pull: "He looked like himself, which is the hardest thing to look like and the most valuable.",

  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: FD_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: FD_IMG.knit },
      { kicker: "The Handbook", title: "The Men Lane", desc: "Build, wear, fit, finish — a closet that lasts longer than the trends do.", href: "/en/men/", img: FD_IMG.men },
    ],
  },
};

const para = (i) => FD_COPY.paras[i];

/* render a list of paragraphs; items are indexes or {i, beat:true} */
function Paras({ items }) {
  return items.map((it) => {
    const i = typeof it === "number" ? it : it.i;
    const beat = typeof it === "object" && it.beat;
    return <p key={i} className={beat ? "fd-beat" : undefined}>{para(i)}</p>;
  });
}

/* ---------------------------------------------------------------- TOPPER */
function FDTopper() {
  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={FD_COPY.byline.href}>JT</a>
          <span className="sep">/</span>
          <span className="here">{FD_COPY.titleTop} {FD_COPY.titleBot}</span>
        </div>
        <div className="fd-stamp">
          The HowTo Network<span className="dot" />Father's Day 2026
        </div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ HEAD */
function FDHead() {
  const b = FD_COPY.byline;
  return (
    <div className="fd-shell">
      <header className="fd-head">
        <div className="fd-kicker">{FD_COPY.kicker}</div>
        <h1 className="fd-h1">
          {FD_COPY.titleTop} <span className="it">{FD_COPY.titleBot}</span>
        </h1>
        <p className="fd-sub">{FD_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.date}<br />{b.read}</span>
        </div>
      </header>
    </div>
  );
}

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

/* ---------------------------------------------------------------- the deck */
function FDDeck() {
  return (
    <div className="fd-shell">
      <section className="fd-deck"><p>{para(0)}</p></section>
    </div>
  );
}

/* ------------------------------------------------- two-column body block */
function FDBlock({ c1, c2, lead }) {
  return (
    <div className="fd-shell">
      <section className={`fd-block ${lead ? "lead first" : ""}`}>
        <div className="fd-2col fd-prose">
          <div className="c"><Paras items={c1} /></div>
          <div className="c"><Paras items={c2} /></div>
        </div>
      </section>
    </div>
  );
}

/* ----------------------------------------------- image + text row (filled) */
function FDRow({ img, items, caption, reverse, lead }) {
  return (
    <div className="fd-shell">
      <section className={`fd-row fd-2col ${reverse ? "rev" : ""} ${lead ? "lead" : ""}`}>
        <figure className="im fd-figure">
          <div className="ph" style={{ backgroundImage: `url(${img})` }} />
          {caption && <figcaption className="rcap">{caption}</figcaption>}
        </figure>
        <div className="tx fd-prose"><Paras items={items} /></div>
      </section>
    </div>
  );
}

/* --------------------------------------------------- full-bleed dark chapter */
function FDDark() {
  return (
    <section className="fd-dark">
      <div className="inner">
        <div className="eyebrow">{FD_COPY.darkEyebrow}</div>
        <div className="fd-2col">
          <div className="c"><p>{para(3)}</p></div>
          <div className="c"><p>{para(4)}</p><p>{para(5)}</p></div>
        </div>
        <p className="punch">{para(6)}</p>
      </div>
    </section>
  );
}

/* ----------------------------------------------------- full-measure pull */
function FDPull({ line }) {
  return (
    <div className="fd-shell">
      <section className={`fd-pull ${line ? "line" : ""}`}>
        <blockquote>{FD_COPY.pull}</blockquote>
      </section>
    </div>
  );
}

/* -------------------------------------------------- full-bleed closer */
function FDCloser() {
  return (
    <section className="fd-closer">
      <div className="img" style={{ backgroundImage: `url(${FD_IMG.mirror})` }} />
      <div className="veil">
        <div className="inner"><p className="final">{para(16)}</p></div>
      </div>
    </section>
  );
}

/* --------------------------------------------------------------- SIGNOFF */
function FDSign() {
  const s = FD_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>
  );
}

/* --------------------------------------------------------------- RELATED */
function FDRelated() {
  return (
    <div className="fd-shell">
      <section className="fd-related">
        <div className="ey">{FD_COPY.related.eyebrow}</div>
        <div className="fd-cards">
          {FD_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>
  );
}