// JT contributor profile — featured editorial work + bio. Static page; reuses
// the Finance chrome (Ticker / Nav / NetworkBand / Footer) and styles.css tokens.
// Scoped CSS lives in the page's <style> block under .jtp.

const JT_FEATURE = {
  url: "/articles/what-he-knew-about-money-that-nobody-taught-him/",
  img: "/articles/what-he-knew-about-money-that-nobody-taught-him/hero.png",
  alt: "A worn leather wallet and folded banknotes on a weathered wooden table in low morning light.",
  eyebrow: "Father's Day · The Finance Edition",
  title: "What He Knew About Money That Nobody Taught Him",
  dek: "He knew things. Good things. Hard-won things. He just didn't know the names for them. A Father's Day letter on the money wisdom our fathers figured out from necessity.",
};

function JtProfile() {
  React.useEffect(() => {
    const tick = () => {
      const now = new Date();
      const h = String(now.getHours()).padStart(2, "0");
      const m = String(now.getMinutes()).padStart(2, "0");
      const s = String(now.getSeconds()).padStart(2, "0");
      const c = document.getElementById("tickerClock");
      if (c) c.textContent = `NYC · ${h}:${m}:${s}`;
      const f = document.getElementById("fsess");
      if (f) f.textContent = `${h}${m}.${s}`;
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  const go = (e, href) => { e.preventDefault(); window.location.href = href; };

  return (
    <div className="site jtp">
      <Ticker />
      <Nav lane="personal" setLane={() => {}} />

      <header className="jtp__hero">
        <div className="jtp__hero-in">
          <div className="jtp__avatar" aria-hidden="true"><span>JT</span></div>
          <div>
            <div className="jtp__kicker">Contributor · The HowTo Network</div>
            <h1 className="jtp__name">JT</h1>
            <div className="jtp__role">Founder · The HowTo Network</div>
            <p className="jtp__bio">
              I build the things I wish I'd had. JT writes on money the way most of us
              actually learn it — by watching, by getting it wrong, and eventually by
              putting <em>language</em> on the quiet discipline that was there all along.
            </p>
          </div>
        </div>
      </header>

      <div className="jtp__stats">
        <div className="jtp__stat">
          <span className="jtp__stat-k">Edition</span>
          <span className="jtp__stat-v">Finance</span>
        </div>
        <div className="jtp__stat">
          <span className="jtp__stat-k">Role</span>
          <span className="jtp__stat-v">Founder, The HowTo Network</span>
        </div>
        <div className="jtp__stat">
          <span className="jtp__stat-k">Based</span>
          <span className="jtp__stat-v">Atlanta, Georgia</span>
        </div>
      </div>

      <main className="jtp__work">
        <div className="jtp__work-head">
          <h2 className="jtp__work-h2">Featured writing</h2>
          <span className="jtp__work-meta">01 piece</span>
        </div>

        <a className="jtp__feature" href={JT_FEATURE.url} onClick={(e) => go(e, JT_FEATURE.url)}>
          <div className="jtp__feature-img">
            <img src={JT_FEATURE.img} alt={JT_FEATURE.alt} />
          </div>
          <div className="jtp__feature-body">
            <div className="jtp__feature-ey">{JT_FEATURE.eyebrow}</div>
            <h3 className="jtp__feature-title">{JT_FEATURE.title}</h3>
            <p className="jtp__feature-dek">{JT_FEATURE.dek}</p>
            <span className="jtp__feature-cta">Read the letter →</span>
          </div>
        </a>

        <p className="jtp__note">
          Part of <a href={JT_FEATURE.url} onClick={(e) => go(e, JT_FEATURE.url)}>Father's Day, across The HowTo Network</a> —
          one subject, told nine ways, in every edition of the network this weekend. More from JT soon.
        </p>
      </main>

      <NetworkBand />
      <Footer />
    </div>
  );
}

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