/* global React, SlashGlyph */
const PLc = window.PL;

/* ---------- Top site nav (matches BoyleSports header) ---------- */
function SiteHeader() {
  const links = [
    { label: 'Football' }, { label: 'Horse Racing' }, { label: 'Other Sports' },
    { label: 'Casino', caret: true }, { label: 'More', caret: true }, { label: 'Stats Centre', active: true },
  ];
  const [open, setOpen] = React.useState(false);
  return (
    <header style={{ position: 'relative', zIndex: 10 }}>
      <div className="gut" style={{ position: 'relative', height: 80, background: 'rgb(25,25,25)', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <div className="bs-logo-panel" style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 382, background: 'var(--bs-blue-electric)', clipPath: 'polygon(0 0, 100% 0, calc(100% - 39px) 100%, 0 100%)' }} />
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', zIndex: 1 }}>
          <img src="assets/boyle-sports-logo.png" alt="BoyleSports" style={{ height: 30, display: 'block' }} />
        </div>
        <nav className="bs-topnav" style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 32, paddingLeft: 96, zIndex: 1 }}>
          {links.map((l) => (
            <a key={l.label} href="#" onClick={(e) => e.preventDefault()} className="bs-nav-link" style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 18,
              color: l.active ? 'var(--bs-lime)' : 'var(--bs-white)', textDecoration: 'none', whiteSpace: 'nowrap',
            }}>
              {l.label}
              {l.caret && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9" /></svg>}
            </a>
          ))}
          <button className="bs-btn-cta" style={{ marginLeft: 'auto', background: 'var(--bs-lime)', border: 'none', color: 'var(--bs-blue-navy)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '0.02em', textTransform: 'uppercase', padding: '12px 20px', borderRadius: 'var(--radius-sm)', cursor: 'pointer', whiteSpace: 'nowrap' }}>Go to BoyleSports.com</button>
        </nav>
        <button className="bs-burger" aria-label="Menu" onClick={() => setOpen((o) => !o)} style={{ marginLeft: 'auto', position: 'relative', zIndex: 1, background: 'transparent', border: 'none', cursor: 'pointer', padding: 8, color: 'var(--bs-white)' }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
            {open ? <g><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></g>
              : <g><line x1="4" y1="7" x2="20" y2="7" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="17" x2="20" y2="17" /></g>}
          </svg>
        </button>
      </div>
      {open && (
        <div className="bs-mobile-menu gut" style={{ display: 'block', background: 'rgb(25,25,25)', borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 8, paddingBottom: 16 }}>
          {links.map((l) => (
            <a key={l.label} href="#" onClick={(e) => { e.preventDefault(); setOpen(false); }} style={{
              display: 'block', padding: '12px 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17,
              color: l.active ? 'var(--bs-lime)' : 'var(--bs-white)', textDecoration: 'none', borderBottom: '1px solid rgba(255,255,255,0.08)',
            }}>{l.label}</a>
          ))}
          <button className="bs-btn-cta" style={{ marginTop: 14, width: '100%', background: 'var(--bs-lime)', border: 'none', color: 'var(--bs-blue-navy)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '0.02em', textTransform: 'uppercase', padding: '13px 20px', borderRadius: 'var(--radius-sm)', cursor: 'pointer' }}>Go to BoyleSports.com</button>
        </div>
      )}
    </header>
  );
}

/* ---------- Local nav (sub-nav) ---------- */
function SubNav() {
  const tabs = ['Dashboard', 'Table', 'Fixtures', 'Players', 'Teams', 'Stats'];
  const [active, setActive] = React.useState('Dashboard');
  const leagues = ['Premier League', 'Championship', 'La Liga', 'Serie A', 'Bundesliga', 'Champions League'];
  return (
    <div className="gut bs-subnav-row" style={{ background: 'rgb(21,0,143)', position: 'sticky', top: 0, zIndex: 9 }}>
      <div className="bs-subnav-inner" style={{ display: 'flex', alignItems: 'stretch', justifyContent: 'space-between', gap: 16, minHeight: 52 }}>
        <div className="bs-subnav-scroll" style={{ flex: '1 1 auto', minWidth: 0, display: 'flex', alignItems: 'stretch', overflowX: 'auto', WebkitOverflowScrolling: 'touch', minHeight: 52 }}>
          <nav className="bs-subnav-nav" style={{ display: 'flex', alignItems: 'stretch', gap: 40 }}>
            {tabs.map((t) => {
              const on = active === t;
              return (
                <button key={t} onClick={() => setActive(t)} className="bs-localnav" style={{
                  position: 'relative', background: 'transparent', border: 'none', cursor: 'pointer', padding: '0 2px',
                  display: 'inline-flex', alignItems: 'center', height: '100%', whiteSpace: 'nowrap', flex: '0 0 auto',
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18,
                  color: on ? 'var(--bs-lime)' : 'rgba(255,255,255,0.82)', transition: 'color .15s',
                }}>
                  {t}
                  {on && <span style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 3, background: 'var(--bs-lime)' }} />}
                </button>
              );
            })}
          </nav>
        </div>
        <div className="bs-league-wrap" style={{ position: 'relative', display: 'flex', alignItems: 'center', flex: '0 0 auto' }}>
          <select defaultValue="Premier League" className="bs-league-select" style={{
            appearance: 'none', WebkitAppearance: 'none', background: 'var(--bs-white)', border: '1px solid rgb(229,229,229)',
            color: 'rgb(25,25,25)', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 14, lineHeight: '24px', padding: '9px 40px 9px 14px',
            borderRadius: 2, cursor: 'pointer', maxWidth: '100%', width: '100%',
          }}>
            {leagues.map((l) => <option key={l} style={{ color: '#000' }}>{l}</option>)}
          </select>
          <span className="bs-chevron" style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', display: 'inline-flex' }}><Chevron /></span>
        </div>
      </div>
    </div>
  );
}

/* ---------- Top Stories (Figma "Latest Football") ---------- */
function TopStories() {
  const stories = [
    { img: 'eu', title: 'Who will secure European football?', sum: 'The run-in race for the Champions League places.' },
    { img: 'legacy', title: "A deep dive into football's legacy", sum: 'The moments and matches that shaped the game.' },
    { img: 'goat', title: 'Greatest footballers of all time', sum: 'Ranking the icons who defined an era.' },
    { img: 'teams', title: "Football's biggest teams", sum: 'Inside the clubs with the loudest support.' },
    { img: 'drop', title: 'The run-in that could decide the drop', sum: 'Three points separate four clubs at the bottom.' },
  ];
  const railRef = React.useRef(null);
  const scroll = (dir) => { const r = railRef.current; if (r) r.scrollBy({ left: dir * 384, behavior: 'smooth' }); };
  const Arrow = ({ dir }) => (
    <button className="bs-ts-arrow" onClick={() => scroll(dir === 'left' ? -1 : 1)} aria-label={dir} style={{ width: 32, height: 32, border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-brand)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ transform: dir === 'left' ? 'scaleX(-1)' : 'none' }}><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
    </button>
  );
  return (
    <section style={{ background: 'var(--bs-white)', padding: '64px 0' }}>
      <div className="gut">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 32 }}>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 36, lineHeight: '36px', letterSpacing: '-0.01em', color: 'var(--text-brand)' }}>Top Stories</h2>
          <div style={{ display: 'flex', gap: 12 }}><Arrow dir="left" /><Arrow dir="right" /></div>
        </div>
        <div ref={railRef} className="ts-rail" style={{ display: 'flex', gap: 24, overflowX: 'auto', scrollSnapType: 'x mandatory' }}>
          {stories.map((s, i) => (
            <article key={i} className="bs-story" style={{ flex: '0 0 360px', maxWidth: '85vw', background: 'var(--bs-blue-electric)', scrollSnapAlign: 'start', cursor: 'pointer', transition: 'transform .18s var(--ease-standard)' }}>
              <div style={{ height: 240, background: `var(--bs-neutral-200) url(assets/story-placeholder.png) center / cover no-repeat`, position: 'relative', overflow: 'hidden' }} />
              <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
                <h3 className="bs-story-title" style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28, lineHeight: 0.95, color: 'var(--bs-white)', textTransform: 'uppercase', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', minHeight: 'calc(28px * 0.95 * 2)' }}>{s.title}</h3>
                <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 18, lineHeight: 1.4, color: 'rgba(255,255,255,0.82)' }}>{s.sum}</p>
                <button className="bs-readmore" style={{ alignSelf: 'flex-start', background: 'var(--bs-lime)', border: 'none', color: '#000', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, lineHeight: '15px', letterSpacing: 0, textTransform: 'uppercase', padding: '16px 20px 14px', borderRadius: 2, cursor: 'pointer', whiteSpace: 'nowrap' }}>Read more</button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- App store badges (Figma: white, 1px black border) ---------- */
function StoreBadge({ store }) {
  const isApple = store === 'apple';
  return (
    <a href="#" onClick={(e) => e.preventDefault()} className="bs-store" style={{
      display: 'inline-flex', alignItems: 'center', gap: 10, width: 160, height: 48, justifyContent: 'center',
      background: 'var(--bs-white)', border: '1px solid var(--bs-black)', borderRadius: 2, textDecoration: 'none', transition: 'transform .15s',
    }}>
      {isApple ? (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="var(--bs-black)"><path d="M17.05 12.54c-.02-2.06 1.68-3.05 1.76-3.1-.96-1.4-2.46-1.6-2.99-1.62-1.27-.13-2.49.75-3.13.75-.65 0-1.64-.73-2.7-.71-1.39.02-2.67.81-3.38 2.05-1.44 2.5-.37 6.2 1.04 8.23.69.99 1.51 2.1 2.58 2.06 1.04-.04 1.43-.67 2.69-.67 1.25 0 1.6.67 2.7.65 1.11-.02 1.82-1.01 2.5-2.01.79-1.15 1.11-2.27 1.13-2.33-.03-.01-2.17-.83-2.19-3.29zM15.0 6.21c.57-.69.95-1.65.85-2.61-.82.03-1.81.55-2.4 1.23-.53.61-.99 1.58-.87 2.51.91.07 1.85-.46 2.42-1.13z"/></svg>
      ) : (
        <svg width="20" height="22" viewBox="0 0 24 24"><path d="M3.6 2.1c-.2.2-.3.5-.3.9v18c0 .4.1.7.3.9l.1.1L14 11.8v-.2L3.7 2z" fill="#34A853"/><path d="M17.4 15.3 14 11.9v-.2l3.4-3.4.1.1 4 2.3c1.1.6 1.1 1.7 0 2.3z" fill="#FBBC04"/><path d="m17.5 15.2-3.5-3.4L3.6 21.9c.4.4.9.4 1.6.1z" fill="#EA4335"/><path d="M3.6 2.1 14 11.8l3.5-3.4L5.2 1.9c-.7-.4-1.2-.3-1.6.2z" fill="#4285F4"/></svg>
      )}
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 9, letterSpacing: '0.02em', color: 'var(--bs-black)' }}>{isApple ? 'Download on the' : 'GET IT ON'}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--bs-black)' }}>{isApple ? 'App Store' : 'Google Play'}</span>
      </span>
    </a>
  );
}

/* ---------- BoyleSports app phone (screenshot) ---------- */
function AppPhone() {
  return (
    <div style={{ width: 360, maxWidth: '100%', margin: '0 auto' }}>
      <img src="assets/app-phone.png" alt="BoyleSports app" style={{ width: '100%', display: 'block' }} />
    </div>
  );
}
function AppPhoneLegacy() {
  const navItems = ['In Play', 'Racing', 'Football', 'Dogs', 'Lotto'];
  return (
    <div style={{ display: 'none' }}>
      <div>
        {/* status bar */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 18px 6px' }}>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, color: '#fff' }}>9:41</span>
          <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center', color: '#fff' }}>
            <svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor"><rect x="0" y="7" width="3" height="4" rx="1"/><rect x="4" y="5" width="3" height="6" rx="1"/><rect x="8" y="3" width="3" height="8" rx="1"/><rect x="12" y="1" width="3" height="10" rx="1"/></svg>
            <svg width="15" height="11" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.5c2.1 0 4 .8 5.4 2.1l1.3-1.4C13 1.5 10.6.6 8 .6S3 1.5 1.3 3.2l1.3 1.4C4 3.3 5.9 2.5 8 2.5z"/><path d="M8 6c1 0 1.9.4 2.6 1l1.3-1.4C10.8 4.6 9.5 4 8 4s-2.8.6-3.9 1.6L5.4 7c.7-.6 1.6-1 2.6-1z"/><circle cx="8" cy="9.5" r="1.6"/></svg>
            <span style={{ width: 22, height: 11, border: '1px solid #fff', borderRadius: 3, position: 'relative', display: 'inline-block' }}><span style={{ position: 'absolute', inset: 1.5, background: '#fff', borderRadius: 1 }} /></span>
          </span>
        </div>
        {/* app header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 14px 12px' }}>
          <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
            <img src="assets/boyle-logo.png" alt="" style={{ height: 15 }} />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 13, color: '#fff' }}>SPORTS</span>
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 12, color: '#fff', background: 'rgba(255,255,255,0.12)', padding: '5px 9px', borderRadius: 5 }}>€135.00</span>
            <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'rgba(255,255,255,0.12)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg>
            </span>
            <span style={{ position: 'relative', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, color: '#fff', background: 'rgba(255,255,255,0.12)', padding: '6px 10px', borderRadius: 5 }}>BET
              <span style={{ position: 'absolute', top: -5, right: -5, width: 15, height: 15, borderRadius: '50%', background: 'var(--bs-lime)', color: 'var(--bs-blue-navy)', fontSize: 9, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>0</span>
            </span>
          </span>
        </div>
        {/* nav */}
        <div style={{ display: 'flex', gap: 14, padding: '0 14px 12px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
          {navItems.map((n, i) => (
            <span key={n} style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 11.5, color: i === 0 ? 'var(--bs-lime)' : 'rgba(255,255,255,0.7)', whiteSpace: 'nowrap' }}>{n}</span>
          ))}
        </div>
        {/* promo */}
        <div style={{ margin: 12, borderRadius: 10, overflow: 'hidden', position: 'relative', background: 'linear-gradient(110deg, #0A0A0A 55%, #1a1a1a 100%)', minHeight: 120 }}>
          <div style={{ position: 'absolute', right: -10, top: -10, width: 110, height: 110, borderRadius: '50%', background: 'radial-gradient(circle at 40% 40%, #fff 0 2px, transparent 3px), radial-gradient(circle at 60% 65%, #fff 0 2px, transparent 3px)', backgroundColor: 'var(--bs-lime)', opacity: 0.95 }} />
          <div style={{ position: 'absolute', right: 8, top: 18, width: 80, height: 80, borderRadius: '50%', background: 'conic-gradient(#fff 0 12%, #111 0 25%, #fff 0 37%, #111 0 50%, #fff 0 62%, #111 0 75%, #fff 0 87%, #111 0 100%)', filter: 'blur(.2px)' }} />
          <div style={{ position: 'relative', padding: '14px 14px 14px' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#fff', lineHeight: 1.25, textTransform: 'uppercase', maxWidth: 175 }}>When your team goes <span style={{ color: 'var(--bs-lime)' }}>2 goals</span> ahead, we pay out!</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 12 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, background: 'var(--bs-lime)', color: 'var(--bs-blue-navy)', padding: '6px 12px', borderRadius: 4 }}>See events</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>T&amp;Cs ›</span>
            </div>
          </div>
        </div>
        {/* quick rows */}
        {['Today’s Racing', 'Popular Matches'].map((r) => (
          <div key={r} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, color: '#fff' }}>{r}</span>
            <span style={{ color: 'var(--bs-lime)' }}>→</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- League hero banner (persistent league identity across sub-pages) ---------- */
function LeagueHero() {
  return (
    <section className="gut" style={{ position: 'relative', background: 'var(--bs-blue-electric) url(assets/hero-bg.svg) center top / cover no-repeat', overflow: 'hidden', paddingBottom: 6 }}>
      <div className="bs-leaguehero-row" style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, paddingTop: 30, paddingBottom: 24, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ position: 'relative', width: 66, height: 66, background: 'var(--bs-white)', border: '1px solid rgba(255,255,255,0.6)', borderRadius: 2, overflow: 'hidden', flex: '0 0 auto' }}>
            <svg viewBox="0 0 66 66" width="66" height="66" style={{ display: 'block' }} aria-label="England">
              <rect width="66" height="66" fill="#FFFFFF" />
              <rect x="27" y="0" width="12" height="66" fill="#CE1124" />
              <rect x="0" y="27" width="66" height="12" fill="#CE1124" />
            </svg>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--bs-lime)', marginBottom: 6 }}>Stats Centre</div>
            <h1 className="lh-title" style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 44, lineHeight: '44px', letterSpacing: '-0.01em', textTransform: 'uppercase', color: 'var(--bs-white)' }}>Premier League</h1>
          </div>
        </div>
        <div className="lh-ribbon" style={{ display: 'flex', alignItems: 'center' }}>
          {[['England', 'Country'], ['20', 'Teams'], ['32', 'Matchweek'], ['2025/26', 'Season']].map(([v, l], i) => (
            <div key={l} className="lh-stat" style={{ padding: '0 22px', borderLeft: i ? '1px solid rgba(255,255,255,0.18)' : 'none', textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 22, color: 'var(--bs-white)', lineHeight: 1, whiteSpace: 'nowrap' }}>{v}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--bs-white)', marginTop: 6 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- EPO advertising space (970 × 250) ---------- */
function AdSlot({ size = '970 × 250' }) {
  return (
    <div style={{ background: 'rgb(247,247,247)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 16, display: 'flex', justifyContent: 'center' }}>
      <div style={{ width: '100%', maxWidth: 970, aspectRatio: '970 / 250', background: 'repeating-conic-gradient(#E9E9E9 0% 25%, #FBFBFB 0% 50%) 50% / 30px 30px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, borderRadius: 4 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>EPO Advertising Space</span>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, color: 'var(--bs-neutral-300)' }}>{size}</span>
      </div>
    </div>
  );
}

/* ---------- App download band (lime) ---------- */
function AppSection() {
  return (
    <section style={{ position: 'relative', background: 'var(--bs-lime)', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(116deg, rgba(255,255,255,0.16) 0 30px, transparent 30px 60px)', pointerEvents: 'none' }} />
      <div className="gut" style={{ position: 'relative', paddingTop: 52, paddingBottom: 0, textAlign: 'center' }}>
        <h2 style={{ margin: '0 auto', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(30px, 5.5vw, 52px)', lineHeight: 0.98, letterSpacing: '-0.01em', textTransform: 'uppercase', color: 'var(--bs-blue-navy)', maxWidth: 720 }}>Rooted in history,<br />ready for the future</h2>
        <div className="bs-app-badges" style={{ display: 'flex', gap: 16, justifyContent: 'center', marginTop: 28, flexWrap: 'wrap' }}>
          <StoreBadge store="google" /><StoreBadge store="apple" />
        </div>
        <div style={{ marginTop: 30, display: 'flex', justifyContent: 'center' }}>
          <AppPhone />
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer (electric blue) ---------- */
function SocialIcon({ kind }) {
  const icons = {
    f: <path d="M11.9999 2.3999C6.6983 2.3999 2.3999 6.6983 2.3999 11.9999C2.3999 16.8127 5.9455 20.7871 10.5647 21.4815V14.5439H8.1895V12.0207H10.5647V10.3415C10.5647 7.5615 11.9191 6.3415 14.2295 6.3415C15.3359 6.3415 15.9215 6.4239 16.1983 6.4607V8.6631H14.6223C13.6415 8.6631 13.2991 9.5935 13.2991 10.6415V12.0207H16.1735L15.7839 14.5439H13.2991V21.5015C17.9847 20.8663 21.5999 16.8599 21.5999 11.9999C21.5999 6.6983 17.3015 2.3999 11.9999 2.3999Z" fill="white" />,
    x: <path d="M5.27992 1.91992C3.42424 1.91992 1.91992 3.42424 1.91992 5.27992V18.7199C1.91992 20.5756 3.42424 22.0799 5.27992 22.0799H18.7199C20.5756 22.0799 22.0799 20.5756 22.0799 18.7199V5.27992C22.0799 3.42424 20.5756 1.91992 18.7199 1.91992H5.27992ZM6.28117 6.23992H10.0912L12.7968 10.0846L16.0799 6.23992H17.2799L13.3387 10.8543L18.1987 17.7599H14.3896L11.2499 13.2993L7.43992 17.7599H6.23992L10.708 12.5296L6.28117 6.23992ZM8.11867 7.19992L14.8902 16.7999H16.3612L9.58961 7.19992H8.11867Z" fill="white" />,
    yt: <path d="M21.582 6.186C21.352 5.326 20.674 4.648 19.814 4.418C18.254 4 12 4 12 4C12 4 5.746 4 4.186 4.418C3.326 4.648 2.648 5.326 2.418 6.186C2 7.746 2 12 2 12C2 12 2 16.254 2.418 17.814C2.648 18.674 3.326 19.352 4.186 19.582C5.746 20 12 20 12 20C12 20 18.254 20 19.814 19.582C20.675 19.352 21.352 18.674 21.582 17.814C22 16.254 22 12 22 12C22 12 22 7.746 21.582 6.186ZM10 14.598V9.402C10 9.017 10.417 8.777 10.75 8.969L15.25 11.567C15.583 11.759 15.583 12.241 15.25 12.433L10.75 15.031C10.417 15.224 10 14.983 10 14.598Z" fill="white" />,
    in: <path d="M19.2 3.19995H4.79995C3.91595 3.19995 3.19995 3.91595 3.19995 4.79995V19.2C3.19995 20.084 3.91595 20.8 4.79995 20.8H19.2C20.084 20.8 20.8 20.084 20.8 19.2V4.79995C20.8 3.91595 20.084 3.19995 19.2 3.19995ZM8.76315 17.6H6.40315V10.0064H8.76315V17.6ZM7.55915 8.92075C6.79835 8.92075 6.18315 8.30395 6.18315 7.54475C6.18315 6.78555 6.79915 6.16955 7.55915 6.16955C8.31755 6.16955 8.93435 6.78635 8.93435 7.54475C8.93435 8.30395 8.31755 8.92075 7.55915 8.92075ZM17.6032 17.6H15.2448V13.9072C15.2448 13.0264 15.2288 11.8936 14.0184 11.8936C12.7904 11.8936 12.6016 12.8528 12.6016 13.8432V17.6H10.2432V10.0064H12.5072V11.044H12.5392C12.8544 10.4472 13.624 9.81755 14.772 9.81755C17.1616 9.81755 17.6032 11.3904 17.6032 13.4352V17.6Z" fill="white" />,
  };
  const label = { f: 'Facebook', x: 'X', yt: 'YouTube', in: 'LinkedIn' }[kind] || kind;
  return <a href="#" onClick={(e) => e.preventDefault()} className="bs-social-i" aria-label={label} style={{ display: 'inline-flex', width: 30, height: 30, alignItems: 'center', justifyContent: 'center' }}>
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">{icons[kind]}</svg>
  </a>;
}
function Footer() {
  const col1 = { h: 'BoyleSports Links', items: ['BoyleSports Casino', 'BoyleSports Live Casino', 'BoyleSports Games', 'BoyleSports Vegas', 'BoyleSports Bingo', 'BoyleSports Lotto', 'BoyleSports Poker'] };
  const col2 = { h: 'Links', items: ['Support', 'Contact Us', 'About Us', 'Privacy Policy', 'Responsible Gambling', 'View Recent Jobs', 'LinkedIn'] };
  const link = { fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 15, color: 'rgba(255,255,255,0.85)', textDecoration: 'none' };
  const head = { fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 18, color: 'var(--bs-white)', marginBottom: 22 };
  return (
    <footer style={{ background: 'var(--bs-blue-electric)', color: 'var(--bs-white)' }}>
      <div className="gut" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="bs-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 0.8fr', gap: 40 }}>
          <p className="bs-footer-about" style={{ margin: 0, fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 16, lineHeight: 1.6, color: 'var(--bs-white)', maxWidth: 440 }}>BoyleSports is Ireland's largest independent bookmakers and online betting company offering a state of the art online sports betting, poker, games and casino gaming experience.</p>
          {[col1, col2].map((c) => (
            <div key={c.h}>
              <div style={head}>{c.h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.items.map((i) => <li key={i}><a href="#" onClick={(e) => e.preventDefault()} className="bs-foot-link" style={link}>{i}</a></li>)}
              </ul>
            </div>
          ))}
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--bs-white)', marginBottom: 22 }}>Follow us</div>
            <div style={{ display: 'flex', gap: 16 }}>
              <SocialIcon kind="f" /><SocialIcon kind="x" /><SocialIcon kind="yt" /><SocialIcon kind="in" />
            </div>
          </div>
        </div>
        <div className="bs-footer-legal" style={{ borderTop: '1px solid rgba(255,255,255,0.8)', marginTop: 48, paddingTop: 40, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <div className="bs-footer-lockup" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
            <img className="bs-footer-boyle" src="assets/boyle-sports-stacked.png" alt="BoyleSports" style={{ height: 64, display: 'block' }} />
            <span style={{ width: 1, height: 72, background: 'rgba(255,255,255,0.55)' }} />
            <img src="assets/westham-badge.png" alt="West Ham United" style={{ height: 76, display: 'block' }} />
          </div>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 450, fontSize: 16, lineHeight: '28px', color: 'var(--bs-white)', textAlign: 'center' }}>Official Principal Partner of West Ham United Football Club</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
            <img src="assets/ff-18plus.png" alt="18+" style={{ height: 18, display: 'block' }} />
            <img src="assets/ff-gambleaware.png" alt="BeGambleAware.org" style={{ height: 18, display: 'block' }} />
          </span>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14, lineHeight: '20px', color: 'rgba(255,255,255,0.8)', marginTop: 6, textAlign: 'center' }}>2014 - 2025 boylesports.com. All rights reserved.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SubNav, LeagueHero, TopStories, AppSection, Footer, AdSlot });
