/* =========================================================================
   FathersDay.jsx — "What He Knew About Money" · JT · Father's Day 2026.
   Art-directed memoir, ported from the network's accepted JT template.
   ALL copy lives in window.FD_CONTENT (set per-language in the leaf HTML) so
   translation only ever touches that file. paras[] is JT's essay VERBATIM, in
   order — translate only, never rewrite. Captions / sidenotes / labels are
   short phrases echoed from the essay or editorial furniture (also translatable).
   NO scroll-reveal: every movement is visible on load.
   Full-bleed movements (hero / dark / closer / series) render OUTSIDE .fd-shell.
   ========================================================================= */

function useFooterClock() {
  React.useEffect(() => {
    const tick = () => {
      const now = new Date();
      const hh = String(now.getHours()).padStart(2, "0");
      const mm = String(now.getMinutes()).padStart(2, "0");
      const ss = String(now.getSeconds()).padStart(2, "0");
      const el = document.getElementById("fsess");
      if (el) el.textContent = `${hh}${mm}.${ss}`;
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
}

function Avatar({ src, initials, className }) {
  // bg-image shows JT's portrait when present; initials show underneath as fallback.
  return (
    <span className={"avatar " + (className || "")} style={src ? { backgroundImage: `url(${src})` } : undefined}>
      {initials}
    </span>
  );
}

function FathersDay() {
  const C = window.FD_CONTENT || {};
  const p = C.paras || [];
  const b = C.byline || {};
  useFooterClock();

  return (
    <div className="fd-doc">
      {/* ---- TOPPER ---- */}
      <div className="fd-shell">
        <div className="fd-topper">
          <div className="fd-crumb">
            <a href="/">HowTo: Finance</a>
            <span className="sep">/</span>
            <a href={b.href}>JT</a>
            <span className="sep">/</span>
            <span className="here">{C.titleTop} {C.titleBot}</span>
          </div>
          <div className="fd-stamp">The HowTo Network<span className="dot" />Father's Day 2026</div>
        </div>
      </div>

      {/* ---- HEAD ---- */}
      <div className="fd-shell">
        <header className="fd-head">
          <div className="fd-kicker">{C.kicker}</div>
          <div className="fd-grid">
            <h1 className="fd-h1 fd-headline">{C.titleTop}<br /><span className="it">{C.titleBot}</span></h1>
            {C.sub ? <p className="fd-sub">{C.sub}</p> : null}
          </div>
          <div className="fd-byline">
            <Avatar src={b.avatar} initials={b.initials} />
            <span className="who">
              <span className="by">{b.by || "Words 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>

      {/* ---- HERO (full-bleed) ---- */}
      {C.hero ? (
        <figure className="fd-figure fd-hero">
          <div className="img" style={{ backgroundImage: `url(${C.hero.img})` }} role="img" aria-label={C.hero.alt || ""} />
          <figcaption className="fd-cap">
            <span>{C.hero.caption}</span>
            <span className="accent">{C.hero.credit}</span>
          </figcaption>
        </figure>
      ) : null}

      {/* ---- M1 · OPENING ---- */}
      <div className="fd-shell">
        <section className="fd-open">
          <div className="fd-grid">
            <h2 className="big"><span className="lead">{p[0]}</span></h2>
            <div className="col fd-body-type"><p>{p[1]}</p></div>
          </div>
        </section>
      </div>

      {/* ---- M2 · NUMBERED LEDGER ---- */}
      <div className="fd-shell">
        <section className="fd-ledger">
          <div className="fd-grid"><div className="lead-line">{C.ledgerLabel}</div></div>
          <div className="fd-led">
            {[p[3], p[4], p[5]].map((t, i) => (
              <div className="fd-led-item" key={i}>
                <span className="n">{(C.ledgerNums && C.ledgerNums[i]) || String(i + 1).padStart(2, "0")}</span>
                <p>{t}</p>
              </div>
            ))}
          </div>
        </section>
      </div>

      {/* ---- M3 · DARK INTERLUDE (full-bleed) ---- */}
      <section className="fd-dark">
        <div className="inner">
          {C.darkEyebrow ? <div className="eyebrow">{C.darkEyebrow}</div> : null}
          <p className="punch">{p[6]}</p>
        </div>
      </section>

      {/* ---- M4 · TWO-UP (image + text) ---- */}
      {C.twoUpImg ? (
        <div className="fd-shell">
          <section className="fd-twoup fd-grid">
            <figure className="fd-figure im portrait">
              <div className="ph" style={{ backgroundImage: `url(${C.twoUpImg.src})` }} role="img" aria-label={C.twoUpImg.alt || ""} />
              {C.twoUpImg.caption ? <figcaption className="fd-cap"><span className="accent">{C.twoUpImg.caption}</span></figcaption> : null}
            </figure>
            <div className="tx fd-body-type"><p>{p[7]}</p></div>
          </section>
        </div>
      ) : null}

      {/* ---- beat ---- */}
      <div className="fd-shell">
        <section className="fd-beat"><div className="fd-grid"><p className="line">{p[8]}</p></div></section>
      </div>

      {/* ---- M5 · MARGINALIA ---- */}
      <div className="fd-shell">
        <section className="fd-margin fd-grid">
          <div className="body fd-body-type">
            <p>{p[9]}</p>
            <p>{p[10]}</p>
          </div>
          <aside className="side">
            {(C.sidenotes || []).map((n, i) => <div className="note" key={i}>{n}</div>)}
          </aside>
        </section>
      </div>

      {/* ---- beat ---- */}
      <div className="fd-shell">
        <section className="fd-beat"><div className="fd-grid"><p className="line">{p[11]}</p></div></section>
      </div>

      {/* ---- directive run ---- */}
      <div className="fd-shell">
        <section className="fd-run"><div className="fd-grid"><div className="body fd-body-type"><p>{p[12]}</p><p>{p[13]}</p></div></div></section>
      </div>

      {/* ---- big pull ---- */}
      <div className="fd-shell">
        <section className="fd-pull">
          <div className="fd-grid">
            <span className="mark">&ldquo;</span>
            <blockquote>{p[14]}</blockquote>
          </div>
        </section>
      </div>

      {/* ---- closing run ---- */}
      <div className="fd-shell">
        <section className="fd-run"><div className="fd-grid"><div className="body fd-body-type"><p>{p[15]}</p></div></div></section>
      </div>

      {/* ---- M6 · CLOSER over image (full-bleed) ---- */}
      {C.closerImg ? (
        <section className="fd-closer">
          <div className="img" style={{ backgroundImage: `url(${C.closerImg})` }} role="img" aria-label="" />
          <div className="veil"><div className="inner"><p className="final">{p[16]}</p></div></div>
        </section>
      ) : null}

      {/* ---- SIGNOFF ---- */}
      <div className="fd-shell">
        <div className="fd-sign">
          <Avatar src={b.avatar} initials={b.initials} />
          <span className="txt">
            <span className="n">{b.name}</span><br />
            <span className="r">{b.role} · <a href={b.href}>{b.profileCta || "Profile"}</a></span>
          </span>
        </div>
      </div>

      {/* ---- SERIES STRIP (9 editions, full-bleed) ---- */}
      {C.series && C.series.cards && C.series.cards.length ? (
        <section className="fd-series">
          <div className="inner">
            <div className="ey">{C.series.ey}</div>
            <h2>{C.series.title}</h2>
            {C.series.intro ? <p className="intro">{C.series.intro}</p> : null}
            <div className="grid">
              {C.series.cards.map((s, i) =>
                s.current ? (
                  <div className="fd-card2 cur" key={i}>
                    <div className="ed">{s.edition}</div>
                    <div className="ti">{s.title}</div>
                    <div className="go">{C.series.hereLabel || "You are here"}</div>
                  </div>
                ) : (
                  <a className="fd-card2" key={i} href={s.href}>
                    <div className="ed">{s.edition}</div>
                    <div className="ti">{s.title}</div>
                    <div className="go">Read →</div>
                  </a>
                )
              )}
            </div>
            {C.series.note ? <p className="note">{C.series.note}</p> : null}
          </div>
        </section>
      ) : null}

      {typeof Footer !== "undefined" ? <Footer /> : null}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<FathersDay />);