// Shared Fight Card design tokens + chrome (nav, footer, ring rope)
window.FC_TOKENS = {
  bg: '#0a0908',
  bg2: '#13110f',
  ink: '#f4eee2',
  inkDim: '#a39684',
  accent: '#d63220',
  accent2: '#e8c258',
  rule: '#2a2420',
  sans: '"Inter", system-ui, sans-serif',
  display: '"Bebas Neue", Impact, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

// Inject global hover/focus + responsive CSS once
(function injectGlobalCSS() {
  if (document.getElementById('fc-global')) return;
  const t = window.FC_TOKENS;
  const s = document.createElement('style');
  s.id = 'fc-global';
  s.textContent = `
    html { scroll-behavior: smooth; }
    body { margin: 0; }
    a { transition: opacity .15s ease, color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease; }
    a:hover { opacity: .85; }
    a[data-fc="cta-primary"]:hover { background: ${t.accent2} !important; color: ${t.bg} !important; }
    a[data-fc="cta-secondary"]:hover { background: ${t.ink} !important; color: ${t.bg} !important; opacity: 1; }
    a[data-fc="nav"]:hover { color: ${t.ink} !important; opacity: 1; }
    a[data-fc="card"]:hover { border-color: ${t.accent} !important; transform: translateY(-2px); opacity: 1; }
    a[data-fc="card"]:hover .fc-card-arrow { color: ${t.accent} !important; }
    *:focus-visible { outline: 2px solid ${t.accent2}; outline-offset: 3px; }

    .fc-nav-desktop { display: flex; }
    .fc-nav-mobile-btn { display: none; }
    .fc-nav-cta-desktop { display: inline-block; }

    /* TABLET: nav collapses */
    @media (max-width: 1100px) {
      .fc-nav-desktop { display: none; }
      .fc-nav-mobile-btn { display: flex; }
    }

    /* TABLET: padding shrinks */
    @media (max-width: 900px) {
      .fc-pad { padding-left: 32px !important; padding-right: 32px !important; }
      .fc-grid-3, .fc-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
      .fc-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
      .fc-grid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
      .fc-hero-3 { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center !important; }
      .fc-hero-3 > * { text-align: center !important; }
      .fc-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
      .fc-display-xl { font-size: 56px !important; }
      .fc-display-lg { font-size: 44px !important; }
      .fc-display-md { font-size: 36px !important; }
    }

    /* PHONE: heaviest reductions */
    @media (max-width: 640px) {
      .fc-pad { padding-left: 20px !important; padding-right: 20px !important; }
      .fc-pad-y { padding-top: 48px !important; padding-bottom: 48px !important; }
      .fc-grid-3, .fc-grid-5, .fc-grid-6 { grid-template-columns: 1fr !important; }
      .fc-footer-grid { grid-template-columns: 1fr !important; }
      .fc-display-xl { font-size: 44px !important; line-height: .95 !important; }
      .fc-display-lg { font-size: 36px !important; }
      .fc-display-md { font-size: 28px !important; }
      .fc-cta-row { flex-direction: column !important; align-items: stretch !important; }
      .fc-cta-row > a { text-align: center; }
      .fc-nav-cta-desktop { display: none !important; }
      .fc-bar-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    }

    /* MOBILE MENU OVERLAY */
    .fc-mobile-menu {
      position: fixed; inset: 0; background: ${t.bg}; z-index: 999;
      display: flex; flex-direction: column;
      padding: 24px 32px; gap: 4px;
      transform: translateX(100%); transition: transform .3s ease;
    }
    .fc-mobile-menu.open { transform: translateX(0); }
    .fc-mobile-menu a {
      padding: 18px 0;
      border-bottom: 1px solid ${t.rule};
      font-family: ${t.display};
      font-size: 32px;
      letter-spacing: .04em;
      color: ${t.ink};
      text-decoration: none;
    }
    .fc-mobile-menu a.active { color: ${t.accent}; }
    .fc-mobile-menu .fc-mm-cta {
      margin-top: 24px; padding: 18px;
      background: ${t.accent}; color: ${t.bg} !important;
      text-align: center; font-size: 22px;
      border-bottom: none;
    }
    .fc-mm-close {
      position: absolute; top: 20px; right: 24px;
      background: none; border: none; color: ${t.ink};
      font-size: 32px; cursor: pointer; padding: 8px;
      font-family: ${t.display}; line-height: 1;
    }
    .fc-mm-brand {
      font-family: ${t.display}; font-size: 26px;
      letter-spacing: .04em; color: ${t.ink};
      margin-bottom: 20px; padding-top: 4px;
    }
    .fc-mm-brand span { color: ${t.accent}; }
  `;
  document.head.appendChild(s);
})();

window.FC_RingRope = ({color}) => {
  const c = color || window.FC_TOKENS.accent;
  const c2 = window.FC_TOKENS.accent2;
  return <div style={{height: 6, background: `repeating-linear-gradient(90deg, ${c} 0 12px, transparent 12px 14px, ${c2} 14px 26px, transparent 26px 28px)`}}></div>;
};

window.FC_Nav = ({active}) => {
  const t = window.FC_TOKENS;
  const [open, setOpen] = React.useState(false);
  const items = [
    ['Bio', 'index.html'],
    ['Speaking', 'speaking.html'],
    ['Book', 'book.html'],
    ['Foundation', 'foundation.html'],
    ['Advocacy', 'advocacy.html'],
    ['Consulting', 'consulting.html'],
    ['Press', 'press.html'],
  ];
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <>
      <div className="fc-pad" style={{borderBottom: `1px solid ${t.rule}`, padding: '18px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: t.bg, gap: 24}}>
        <a href="index.html" style={{fontFamily: t.display, fontSize: 26, letterSpacing: '.04em', color: t.ink, whiteSpace: 'nowrap', textDecoration: 'none', flexShrink: 0}}>DUKE <span style={{color: t.accent}}>TANNER</span></a>

        <div className="fc-nav-desktop" style={{gap: 18, fontFamily: t.mono, fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', flexWrap: 'nowrap'}}>
          {items.map(([label, href]) => (
            <a key={label} data-fc="nav" href={href} style={{color: label === active ? t.accent2 : t.inkDim, borderBottom: label === active ? `1px solid ${t.accent2}` : 'none', paddingBottom: 4, textDecoration: 'none', whiteSpace: 'nowrap'}}>{label}</a>
          ))}
        </div>

        <div style={{display: 'flex', alignItems: 'center', gap: 16}}>
          <a className="fc-nav-cta-desktop" data-fc="cta-primary" href="speaking.html#book" style={{padding: '12px 18px', background: t.accent, color: t.bg, fontFamily: t.display, fontSize: 16, letterSpacing: '.1em', whiteSpace: 'nowrap', textDecoration: 'none'}}>BOOK DUKE</a>

          <button onClick={() => setOpen(true)} className="fc-nav-mobile-btn" aria-label="Open menu" style={{background: 'none', border: `1px solid ${t.rule}`, color: t.ink, padding: '10px 14px', fontFamily: t.mono, fontSize: 12, letterSpacing: '.18em', cursor: 'pointer', flexDirection: 'column', gap: 4, alignItems: 'center'}}>
            <span style={{display: 'block', width: 22, height: 2, background: t.ink}}></span>
            <span style={{display: 'block', width: 22, height: 2, background: t.ink}}></span>
            <span style={{display: 'block', width: 22, height: 2, background: t.ink}}></span>
          </button>
        </div>
      </div>

      <div className={`fc-mobile-menu ${open ? 'open' : ''}`} aria-hidden={!open}>
        <button className="fc-mm-close" onClick={() => setOpen(false)} aria-label="Close menu">×</button>
        <div className="fc-mm-brand">DUKE <span>TANNER</span></div>
        {items.map(([label, href]) => (
          <a key={label} href={href} className={label === active ? 'active' : ''} onClick={() => setOpen(false)}>{label}</a>
        ))}
        <a href="speaking.html#book" className="fc-mm-cta" onClick={() => setOpen(false)}>BOOK DUKE  →</a>
      </div>
    </>
  );
};

window.FC_Footer = () => {
  const t = window.FC_TOKENS;
  const cols = [
    ['VISIT', [
      ['Bio', 'index.html'],
      ['Speaking', 'speaking.html'],
      ['Book', 'book.html'],
      ['Foundation', 'foundation.html'],
      ['Advocacy', 'advocacy.html'],
      ['Consulting', 'consulting.html'],
      ['Press', 'press.html'],
    ]],
    ['CONNECT', [
      ['@dukenext', 'https://instagram.com/dukenext'],
      ['@dukegotlife', 'https://twitter.com/dukegotlife'],
      ['LinkedIn', 'https://linkedin.com/in/duketanner'],
      ['Newsletter', 'book.html#newsletter'],
    ]],
    ['CONTACT', [
      ['Booking · booking@duketanner.com', 'mailto:booking@duketanner.com'],
      ['Press · press@duketanner.com', 'mailto:press@duketanner.com'],
      ['Advisory · advisory@duketanner.com', 'mailto:advisory@duketanner.com'],
      ['Foundation · hello@tanner2nd.org', 'mailto:hello@tanner2nd.org'],
    ]],
  ];
  return (
    <>
      <window.FC_RingRope />
      <div className="fc-pad fc-footer-grid" style={{padding: '56px 56px 24px', background: t.bg, color: t.ink, display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1.4fr', gap: 48, borderTop: `1px solid ${t.rule}`}}>
        <div>
          <div style={{fontFamily: t.display, fontSize: 56, letterSpacing: '.02em', lineHeight: .95}}>DUKE<br/><span style={{color: t.accent}}>TANNER</span></div>
          <div style={{fontFamily: t.mono, fontSize: 11, letterSpacing: '.16em', color: t.inkDim, marginTop: 16, textTransform: 'uppercase', lineHeight: 1.8}}>
            FORMER UNDEFEATED BOXER<br/>CRIMINAL JUSTICE ADVOCATE<br/>FOUNDER, TANNER 2ND FOUNDATION
          </div>
          <div style={{fontFamily: t.mono, fontSize: 10, letterSpacing: '.16em', color: t.accent2, marginTop: 16}}>· PARDONED · MAY 28, 2025 ·</div>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div style={{fontFamily: t.mono, fontSize: 10, letterSpacing: '.2em', color: t.accent2, marginBottom: 14}}>{h}</div>
            <div style={{fontFamily: t.sans, fontSize: 14, color: t.ink, lineHeight: 2.1}}>
              {items.map(([label, href], idx) => (
                <div key={idx}>
                  <a data-fc="nav" href={href} style={{color: t.ink, textDecoration: 'none'}}>{label}</a>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="fc-pad fc-bar-row" style={{padding: '20px 56px', background: t.bg, display: 'flex', justifyContent: 'space-between', fontFamily: t.mono, fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: t.inkDim, borderTop: `1px solid ${t.rule}`, flexWrap: 'wrap', gap: 12}}>
        <span>© 2026 DUKE OF FREEDOM, LLC</span>
        <span>GARY, IN · USA</span>
        <span style={{color: t.accent2}}>#DUKEGOTLIFE</span>
      </div>
    </>
  );
};