/* =========================================================================
   FathersDayCard.jsx — homepage "Featured" band for JT's Father's Day letter.
   Self-contained styling (scoped .fdf-*) so it reads as an intentional,
   seasonal editorial feature without touching the global stylesheet.
   Real <a href> so crawlers follow it. Easy to remove after the holiday:
   delete the <FathersDayFeature /> line in App.jsx and this script tag.
   ========================================================================= */

const FD_FEATURE_URL = "/articles/what-he-knew-about-money-that-nobody-taught-him/";

function FathersDayFeature() {
  return (
    <section className="fdf">
      <style>{`
        .fdf { padding: 0 clamp(16px, 4vw, 56px); margin: clamp(28px, 5vh, 60px) auto; max-width: 1280px; }
        .fdf__card {
          display: grid; grid-template-columns: 1.05fr 1fr;
          background: #07120d; color: #fff; overflow: hidden;
          border: 1px solid rgba(153,237,195,0.18);
          text-decoration: none; position: relative;
          transition: border-color .4s ease;
        }
        .fdf__card:hover { border-color: rgba(153,237,195,0.4); }
        .fdf__media { position: relative; min-height: 300px; overflow: hidden; }
        .fdf__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
        .fdf__card:hover .fdf__media img { transform: scale(1.04); }
        .fdf__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,18,13,0) 55%, rgba(7,18,13,0.95) 100%); }
        .fdf__body { padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
        .fdf__kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #99edc3; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
        .fdf__kicker .rule { width: 38px; height: 1px; background: #c39a5e; }
        .fdf__title { font-family: "Cormorant Garamond", "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(1.8rem, 3.1vw, 2.9rem); line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 16px; color: #fdfdf8; }
        .fdf__dek { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,0.74); margin: 0 0 26px; max-width: 42ch; }
        .fdf__foot { display: flex; align-items: center; gap: 14px; }
        .fdf__byline { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
        .fdf__cta { font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 14px; color: #fff; border-bottom: 1px solid #c39a5e; padding-bottom: 2px; transition: color .3s ease; }
        .fdf__card:hover .fdf__cta { color: #99edc3; }
        @media (max-width: 760px) {
          .fdf__card { grid-template-columns: 1fr; }
          .fdf__media { min-height: 200px; }
          .fdf__media::after { background: linear-gradient(0deg, rgba(7,18,13,0.95) 4%, rgba(7,18,13,0) 60%); }
        }
      `}</style>
      <a className="fdf__card" href={FD_FEATURE_URL}>
        <div className="fdf__media">
          <img src={FD_FEATURE_URL + "hero.png"} alt="A worn leather wallet and folded banknotes on a wooden table in morning light." />
        </div>
        <div className="fdf__body">
          <div className="fdf__kicker"><span className="rule" />FATHER'S DAY · FROM THE EDITOR</div>
          <h3 className="fdf__title">What He Knew About Money That Nobody Taught Him</h3>
          <p className="fdf__dek">He knew things. Good things. Hard-won things. He just didn't know the names for them.</p>
          <div className="fdf__foot">
            <span className="fdf__byline">By JT · 6 min</span>
            <span className="fdf__cta">Read the letter →</span>
          </div>
        </div>
      </a>
    </section>
  );
}

Object.assign(window, { FathersDayFeature });