// Updated Fight Card homepage with Nav/Footer + linkable
const FightCardHome = () => {
  const t = window.FC_TOKENS;
  const RingRope = window.FC_RingRope;
  const Nav = window.FC_Nav;
  const Footer = window.FC_Footer;

  return (
    <div style={{background: t.bg, color: t.ink, fontFamily: t.sans, width: '100%'}}>
      <Nav active="Bio" />
      <RingRope />

      {/* HERO */}
      <div className="fc-pad fc-pad-y" style={{position: 'relative', padding: '64px 56px', borderBottom: `1px solid ${t.rule}`, overflow: 'hidden'}}>
        <div style={{position: 'absolute', inset: 0, backgroundImage: `linear-gradient(${t.rule} 1px, transparent 1px), linear-gradient(90deg, ${t.rule} 1px, transparent 1px)`, backgroundSize: '80px 80px', opacity: .35, pointerEvents: 'none'}}></div>

        <div className="fc-hero-3" style={{position: 'relative', display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 32, alignItems: 'center'}}>
          <div>
            <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.2em', color: t.accent2, marginBottom: 12}}>IN THE RED CORNER</div>
            <div className="fc-display-xl" style={{fontFamily: t.display, fontSize: 80, lineHeight: .95, letterSpacing: '.02em', marginBottom: 24}}>CHARLES<br/><span style={{color: t.accent}}>"DUKE"</span><br/>TANNER</div>
            <div style={{fontFamily: t.mono, fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: t.inkDim, lineHeight: 2}}>
              Gary, Indiana<br/>Light heavyweight<br/><span style={{color: t.accent2}}>20–0</span> · ESPN-televised<br/>Trained by Angelo Dundee
            </div>
          </div>
          <div style={{textAlign: 'center'}}>
            <div style={{width: 220, height: 220, border: `4px solid ${t.accent2}`, borderRadius: '50%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: `radial-gradient(circle at 50% 30%, ${t.accent} 0%, ${t.bg} 70%)`}}>
              <div style={{fontFamily: t.display, fontSize: 48, color: t.ink, lineHeight: 1}}>MAIN</div>
              <div style={{fontFamily: t.display, fontSize: 64, color: t.accent2, lineHeight: 1, letterSpacing: '.04em'}}>EVENT</div>
            </div>
            <div style={{fontFamily: t.mono, fontSize: 10, letterSpacing: '.24em', color: t.inkDim, marginTop: 16}}>20·26 SEASON · LIVE NOW</div>
          </div>
          <div style={{textAlign: 'right'}}>
            <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.2em', color: t.accent2, marginBottom: 12}}>IN THE BLACK CORNER</div>
            <div className="fc-display-xl" style={{fontFamily: t.display, fontSize: 72, lineHeight: .95, letterSpacing: '.02em', marginBottom: 24}}>A SYSTEM<br/>THAT BURIED<br/><span style={{color: t.accent}}>FIRST-TIMERS</span></div>
            <div style={{fontFamily: t.mono, fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: t.inkDim, lineHeight: 2}}>
              Two life sentences<br/>Non-violent · first offense<br/><span style={{color: t.accent2}}>16y 6m 21d</span> served<br/>Pardoned · 28·05·2025
            </div>
          </div>
        </div>

        <div className="fc-cta-row" style={{position: 'relative', marginTop: 56, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap'}}>
          <a data-fc="cta-primary" href="speaking.html" style={{padding: '18px 32px', background: t.accent, color: t.bg, fontFamily: t.display, fontSize: 22, letterSpacing: '.06em', textDecoration: 'none', whiteSpace: 'nowrap'}}>BOOK DUKE TO SPEAK</a>
          <a data-fc="cta-secondary" href="book.html" style={{padding: '18px 32px', border: `2px solid ${t.ink}`, color: t.ink, fontFamily: t.display, fontSize: 22, letterSpacing: '.06em', textDecoration: 'none', whiteSpace: 'nowrap'}}>READ THE BOOK</a>
          <a data-fc="cta-secondary" href="foundation.html#donate" style={{padding: '18px 32px', border: `2px solid ${t.accent2}`, color: t.accent2, fontFamily: t.display, fontSize: 22, letterSpacing: '.06em', textDecoration: 'none', whiteSpace: 'nowrap'}}>SUPPORT THE FOUNDATION</a>
        </div>
      </div>

      <RingRope />

      {/* BIO TEASER */}
      <div className="fc-pad fc-pad-y" style={{padding: '80px 56px', borderBottom: `1px solid ${t.rule}`, background: t.bg2}}>
        <div className="fc-grid-2" style={{display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'start'}}>
          <div>
            <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.2em', color: t.accent, marginBottom: 8}}>· THE STORY ·</div>
            <h2 className="fc-display-xl" style={{fontFamily: t.display, fontSize: 88, lineHeight: .9, letterSpacing: '.02em', margin: '0 0 32px'}}>WHO DUKE <span style={{color: t.accent}}>IS NOW.</span></h2>
            <p style={{fontFamily: t.sans, fontSize: 18, lineHeight: 1.65, color: t.ink, margin: '0 0 18px', maxWidth: 640}}>
              Charles "Duke" Tanner went 20–0 as a professional boxer before a 2004 sting handed him two life sentences for a first, non-violent offense. He served 16 years, 6 months, and 21 days in maximum security — and never stopped writing letters.
            </p>
            <p style={{fontFamily: t.sans, fontSize: 18, lineHeight: 1.65, color: t.inkDim, margin: '0 0 32px', maxWidth: 640}}>
              President Trump commuted his sentence in October 2020. In May 2025, Duke received a full presidential pardon. Today he speaks, writes, advises, and runs the Tanner 2nd Foundation — turning the second chance he received into seconds for everybody else.
            </p>
            <a data-fc="cta-secondary" href="press.html" style={{display: 'inline-block', padding: '14px 24px', border: `2px solid ${t.ink}`, color: t.ink, fontFamily: t.display, fontSize: 18, letterSpacing: '.06em', textDecoration: 'none', whiteSpace: 'nowrap'}}>FULL BIO & PRESS KIT  →</a>
          </div>
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 0, border: `1px solid ${t.rule}`, alignSelf: 'start'}}>
            {[
              ['20–0', 'PRO RECORD'],
              ['16+ YRS', 'SERVED'],
              ['MAY 2025', 'PARDONED'],
              ['1', 'BOOK · DUKE GOT LIFE'],
              ['7+', 'ROLES TODAY'],
              ['2,700+', 'SPOKEN TO IN 2025'],
            ].map(([n, l], i) => (
              <div key={i} style={{padding: '24px 20px', borderRight: i % 2 === 0 ? `1px solid ${t.rule}` : 'none', borderBottom: i < 4 ? `1px solid ${t.rule}` : 'none', background: t.bg}}>
                <div style={{fontFamily: t.display, fontSize: 36, color: t.accent2, lineHeight: 1, letterSpacing: '.02em'}}>{n}</div>
                <div style={{fontFamily: t.mono, fontSize: 10, letterSpacing: '.16em', color: t.inkDim, marginTop: 8}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* TIMELINE */}
      <div className="fc-pad fc-pad-y" style={{padding: '72px 56px', borderBottom: `1px solid ${t.rule}`}}>
        <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.2em', color: t.accent, marginBottom: 8}}>· THE FIGHT, ROUND BY ROUND ·</div>
        <h2 className="fc-display-lg" style={{fontFamily: t.display, fontSize: 72, lineHeight: .95, letterSpacing: '.02em', margin: '0 0 40px'}}>FIVE ROUNDS, ONE LIFE</h2>
        <div className="fc-grid-5" style={{display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 0, border: `1px solid ${t.rule}`}}>
          {[
            ['R1', '1986–2003', 'Gloves on at 6. Junior Olympic bronze. 20-0 as a pro.'],
            ['R2', '2004–2006', 'Sting at 24. Tried, convicted. Two life terms.'],
            ['R3', '2007–2018', 'Sixteen years inside. Faith. Letters. A dream.'],
            ['R4', '21·10·2020', 'Clemency. The first call from the White House.'],
            ['R5', '28·05·2025', 'Full pardon. The fight is now everybody else\u2019s.'],
          ].map(([r, d, txt], i) => (
            <div key={i} style={{padding: 24, borderRight: i < 4 ? `1px solid ${t.rule}` : 'none', background: i === 4 ? `linear-gradient(180deg, ${t.bg} 0%, ${t.accent}22 100%)` : t.bg}}>
              <div style={{fontFamily: t.display, fontSize: 56, color: t.accent2, lineHeight: 1}}>{r}</div>
              <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.16em', color: t.inkDim, margin: '8px 0 12px'}}>{d}</div>
              <div style={{fontSize: 14, lineHeight: 1.5, color: t.ink}}>{txt}</div>
            </div>
          ))}
        </div>
      </div>

      {/* QUOTE */}
      <div className="fc-pad fc-pad-y" style={{padding: '56px 56px', borderBottom: `1px solid ${t.rule}`, background: t.accent, color: t.bg}}>
        <div className="fc-display-xl" style={{fontFamily: t.display, fontSize: 88, lineHeight: 1, letterSpacing: '.01em', textAlign: 'center'}}>"DEFEAT IS A LIFE EXPERIENCE.<br/>FAILURE IS A LIFE CHOICE."</div>
        <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.24em', textAlign: 'center', marginTop: 20}}>— DUKE</div>
      </div>

      {/* SEVEN HATS — what Duke does today */}
      <div className="fc-pad fc-pad-y" style={{padding: '80px 56px', borderBottom: `1px solid ${t.rule}`}}>
        <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.2em', color: t.accent, marginBottom: 8}}>· UNDERCARD ·</div>
        <h2 className="fc-display-lg" style={{fontFamily: t.display, fontSize: 72, letterSpacing: '.02em', margin: '0 0 12px'}}>WHAT'S NEXT</h2>
        <div style={{fontFamily: t.mono, fontSize: 13, letterSpacing: '.1em', color: t.inkDim, marginBottom: 40, maxWidth: 700, lineHeight: 1.6}}>The pardon was the bell. Here's where Duke is fighting now.</div>
        <div className="fc-grid-3" style={{display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16}}>
          {[
            ['SPEAK', 'Bring Duke to your stage.', 'CHURCH · CORPORATE · CAMPUS · POLICY', 'speaking.html'],
            ['READ', 'Duke Got Life. Out now.', 'AMAZON · B&N · AUDIO', 'book.html'],
            ['BUILD', 'Foundation grants & advocacy.', 'YOUTH · HOUSING · CLEMENCY · REENTRY', 'foundation.html'],
            ['REFORM', 'Policy work & expert testimony.', 'REFORM ALLIANCE · CAN-DO · STATE', 'advocacy.html'],
            ['ADVISE', 'Capital & culture consulting.', 'IMPACT GROWTH CAPITAL · ADVISORY', 'consulting.html'],
            ['PRESS', 'Coverage, kits, downloads.', 'BIO · PHOTOS · LOGOS · FACT SHEET', 'press.html'],
          ].map(([h, b, tag, href], i) => (
            <a key={i} data-fc="card" href={href} style={{textDecoration: 'none', border: `1px solid ${t.rule}`, padding: 24, background: t.bg, position: 'relative', display: 'block'}}>
              <div style={{position: 'absolute', top: -1, left: -1, padding: '4px 10px', background: t.accent2, color: t.bg, fontFamily: t.mono, fontSize: 10, letterSpacing: '.18em'}}>0{i+1}</div>
              <div style={{fontFamily: t.display, fontSize: 56, color: t.accent, lineHeight: 1, marginTop: 8}}>{h}</div>
              <div style={{fontFamily: t.display, fontSize: 22, letterSpacing: '.02em', margin: '12px 0 16px', color: t.ink}}>{b}</div>
              <div className="fc-card-arrow" style={{fontFamily: t.mono, fontSize: 10, letterSpacing: '.14em', color: t.inkDim, borderTop: `1px solid ${t.rule}`, paddingTop: 12}}>{tag} →</div>
            </a>
          ))}
        </div>
      </div>

      {/* RECENT PRESS STRIP */}
      <div className="fc-pad fc-pad-y" style={{padding: '56px 56px', borderBottom: `1px solid ${t.rule}`, background: t.bg2}}>
        <div className="fc-bar-row" style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, flexWrap: 'wrap', gap: 16}}>
          <div>
            <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.2em', color: t.accent, marginBottom: 8}}>· AS SEEN IN ·</div>
            <h3 style={{fontFamily: t.display, fontSize: 48, letterSpacing: '.02em', margin: 0}}>RECENT COVERAGE</h3>
          </div>
          <a data-fc="cta-secondary" href="press.html" style={{padding: '12px 22px', border: `2px solid ${t.ink}`, color: t.ink, fontFamily: t.display, fontSize: 16, letterSpacing: '.06em', textDecoration: 'none', whiteSpace: 'nowrap'}}>ALL PRESS  →</a>
        </div>
        <div className="fc-grid-6" style={{display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 16}}>
          {['FOX NEWS', 'CBS CHICAGO', 'BLACK ENTERPRISE', 'THEGRIO', 'THE LOU HOLTZ SHOW', 'REFORM ALLIANCE'].map(p => (
            <div key={p} style={{border: `1px solid ${t.rule}`, padding: '32px 12px', textAlign: 'center', fontFamily: t.display, fontSize: 18, letterSpacing: '.06em', color: t.inkDim, background: t.bg, lineHeight: 1.2, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 90}}>{p}</div>
          ))}
        </div>
      </div>

      {/* CLOSING CTA */}
      <div className="fc-pad fc-pad-y" style={{padding: '80px 56px', borderBottom: `1px solid ${t.rule}`}}>
        <div className="fc-grid-3" style={{display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24}}>
          {[
            ['BOOK', 'Speaking, keynotes, & pulpit.', 'speaking.html#book', 'BOOK DUKE  →'],
            ['SUPPORT', 'Foundation work in Gary, IN.', 'foundation.html#donate', 'DONATE  →'],
            ['CONTACT', 'Press, advisory, & general.', 'mailto:hello@duketanner.com', 'GET IN TOUCH  →'],
          ].map(([k, b, href, cta], i) => (
            <div key={i} style={{padding: 36, border: `1px solid ${t.rule}`, background: t.bg2}}>
              <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.2em', color: t.accent, marginBottom: 8}}>· {k} ·</div>
              <div style={{fontFamily: t.display, fontSize: 40, color: t.ink, letterSpacing: '.02em', lineHeight: 1.05, marginBottom: 16}}>{b}</div>
              <a data-fc="cta-primary" href={href} style={{display: 'inline-block', padding: '12px 22px', background: t.accent, color: t.bg, fontFamily: t.display, fontSize: 18, letterSpacing: '.06em', textDecoration: 'none', whiteSpace: 'nowrap'}}>{cta}</a>
            </div>
          ))}
        </div>
      </div>

      <Footer />
    </div>
  );
};
window.FightCardHome = FightCardHome;