/* global React */
/* ============================================================
   FATHER'S DAY 2026 — seasonal feature band.
   A dedicated, self-contained spotlight for JT's Father's Day
   essay. Warm-elegiac to match the article; stands apart from
   the contributor cards on purpose. TEMPORARY: to retire after
   the holiday, remove <FathersDayFeature /> from app.jsx and the
   matching prerender block in en/index.html.
   ============================================================ */
function FathersDayFeature() {
  const href = "/en/contributors/jt/the-things-he-never-talked-about/";
  return (
    <section className="fdh-band" data-screen-label="Father's Day">
      <style>{`
        .fdh-band{ position:relative; width:100%; min-height:clamp(560px,82vh,820px); display:flex; align-items:flex-end; overflow:hidden;
          background:#241b12; font-family:"Fraunces",Georgia,serif; }
        .fdh-band .fdh-bg{ position:absolute; inset:0; transform:scale(1.04); animation:fdh-kb 26s ease-in-out infinite alternate;
          background:#241b12 url("/assets/fathers-day/hero.jpg") center 52%/cover no-repeat; }
        @keyframes fdh-kb{ to{ transform:scale(1.11); } }
        .fdh-band .fdh-scrim{ position:absolute; inset:0;
          background:linear-gradient(180deg, rgba(26,19,11,.34) 0%, rgba(28,20,12,.12) 26%, rgba(24,17,10,.4) 60%, rgba(18,12,7,.9) 100%),
                    linear-gradient(95deg, rgba(20,14,8,.66) 0%, rgba(20,14,8,.2) 46%, rgba(20,14,8,0) 72%); }
        .fdh-in{ position:relative; z-index:2; max-width:1320px; width:100%; margin:0 auto;
          padding:clamp(48px,9vh,120px) clamp(22px,5vw,84px); color:#f3e9d4; text-shadow:0 2px 38px rgba(16,11,5,.55); }
        .fdh-eyebrow{ display:flex; align-items:center; gap:12px; font-family:"DM Sans",sans-serif; font-size:12px;
          letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:#e7dcc2; margin:0 0 clamp(20px,3vh,34px); }
        .fdh-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:#b1542a; }
        .fdh-eyebrow .sub{ color:#cdbf9d; }
        .fdh-title{ font-size:clamp(42px,7vw,104px); line-height:.94; font-weight:300; letter-spacing:-.04em; margin:0; max-width:15ch; color:#fbf4e4; }
        .fdh-title .it{ font-style:italic; font-weight:340; color:#eccf94; }
        .fdh-dek{ font-size:clamp(18px,1.8vw,25px); line-height:1.42; font-weight:380; letter-spacing:-.01em;
          color:#ece2cb; margin:clamp(22px,3.4vh,40px) 0 0; max-width:48ch; }
        .fdh-foot{ display:flex; align-items:center; gap:clamp(18px,3vw,40px); flex-wrap:wrap; margin-top:clamp(28px,4vh,48px); }
        .fdh-cta{ display:inline-flex; align-items:center; gap:10px; font-family:"DM Sans",sans-serif; font-size:14px; font-weight:600;
          letter-spacing:.02em; text-decoration:none; color:#1f1810; background:#eccf94;
          padding:15px 26px; border-radius:2px; transition:transform .4s cubic-bezier(.2,.7,.2,1), background .4s; }
        .fdh-cta:hover{ transform:translateY(-2px); background:#f3dca8; }
        .fdh-cta .arr{ transition:transform .4s cubic-bezier(.2,.7,.2,1); }
        .fdh-cta:hover .arr{ transform:translateX(4px); }
        .fdh-byline{ font-family:"DM Sans",sans-serif; font-size:13px; letter-spacing:.03em; color:#cdc1a8; }
        .fdh-byline strong{ color:#f3e9d4; font-weight:600; }
        @media(max-width:640px){ .fdh-foot{ gap:16px; } }
      `}</style>
      <div className="fdh-bg" aria-hidden="true" />
      <div className="fdh-scrim" aria-hidden="true" />
      <div className="fdh-in">
        <p className="fdh-eyebrow"><span className="dot" />Father's Day 2026 <span className="sub">· A note from the founder</span></p>
        <h2 className="fdh-title">The Things He <span className="it">Never Talked About.</span></h2>
        <p className="fdh-dek">On the silence men keep around their own health — and the kind of strength that turns out not to be strength at all.</p>
        <div className="fdh-foot">
          <a className="fdh-cta" href={href}>Read JT&rsquo;s essay <span className="arr">→</span></a>
          <span className="fdh-byline">By <strong>JT</strong> · Health · 5 min read</span>
        </div>
      </div>
    </section>
  );
}
window.FathersDayFeature = FathersDayFeature;