// Main app — page state + composition.
// Live league data fetched once at mount from /api/league-data
// (which scrapes the West Lancashire League site).
const App = () => {
  const [page, setPage] = React.useState('home');
  const [team, setTeam] = React.useState('mens');
  const [scrolled, setScrolled] = React.useState(false);
  const [league, setLeague] = React.useState(null);
  const [leagueError, setLeagueError] = React.useState(null);

  const navigate = (p) => { setPage(p); };

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [page]);

  // Fetch live league data once. Cache-Control on the API does the rest.
  React.useEffect(() => {
    let cancelled = false;
    fetch('/api/league-data')
      .then(r => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
      .then(data => { if (!cancelled) setLeague(data); })
      .catch(err => { if (!cancelled) setLeagueError(String(err && err.message || err)); });
    return () => { cancelled = true; };
  }, []);

  const renderPage = () => {
    switch (page) {
      case 'home':
        return (
          <>
            <Hero setPage={navigate} league={league} />
            <FixturesSection league={league} leagueError={leagueError} />
            <TeamsSection team={team} setTeam={(id) => { setTeam(id); navigate('teams'); }} />
            <FacebookCTA />
            <SponsorsSection />
          </>
        );
      case 'teams':
        return (
          <>
            <PageHeader kicker="Our Teams" title={team === 'mens' ? "Men's First Team" : team === 'womens' ? "Women's First Team" : "Junior Section"} />
            <TeamsSection team={team} setTeam={setTeam} />
            {team === 'juniors' ? <JuniorGrid /> : null}
          </>
        );
      case 'community':
        return (
          <>
            <PageHeader kicker="Join Us" title="Players, Parents, Coaches, Volunteers." />
            <CommunitySection />
            <JuniorGrid />
          </>
        );
      case 'sponsors':
        return (
          <>
            <PageHeader kicker="Backed By" title="Sponsors of Blackpool Wren Rovers FC" />
            <SponsorsSection />
          </>
        );
      default: return null;
    }
  };

  return (
    <div data-screen-label={page}>
      <Nav page={page} setPage={navigate} scrolled={scrolled} />
      <main>{renderPage()}</main>
      <Footer setPage={navigate} />
    </div>
  );
};

const PageHeader = ({ kicker, title }) => (
  <section style={{
    background: 'var(--ink)', color: '#fff', padding: '64px 0 0',
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{
      position: 'absolute', right: -80, top: -80, width: 320, height: 320,
      background: 'var(--red)', transform: 'rotate(45deg)', opacity: 0.5,
    }} />
    <div className="container" style={{ position: 'relative' }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>
        ▸ {kicker.toUpperCase()}
      </div>
      <h1 data-page-head-h1 className="display" style={{
        fontSize: 'clamp(40px, 8vw, 120px)', margin: '12px 0 24px', lineHeight: 0.92, textTransform: 'uppercase',
      }}>{title}</h1>
    </div>
    <StripeRule height={5} />
  </section>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);