// LatestNews — auto-scrolling carousel that sits directly below the Hero.
// Showcases the OP Football summer programme graphics (run by the same team
// behind the Wrens, hosted at Brews Park). Auto-advances, pauses on hover,
// with dots + prev/next controls. Book Online links to opfootball.co.uk/bookings.
// ---------------------------------------------------------------------------

const NEWS_BOOKING_URL = 'https://opfootball.co.uk/bookings';

const NEWS_SLIDES = [
  {
    id: 'summer-programme',
    img: 'assets/news/op-summer-programme.jpg',
    alt: 'OP Football summer programme — Training Days & 1:1 Sessions. Weeks 27–31 July, 10–14 August, 24–28 August. £25 per day or £110 per week.',
  },
  {
    id: 'training-days',
    img: 'assets/news/op-training-days.jpg',
    alt: 'OP Football Training Days — small-sided games, tournaments, football fitness, testing & timing, 4-corner focus, indoor & outdoor, all abilities, U6 to U13s, 9am–3pm.',
  },
  {
    id: '1to1-sessions',
    img: 'assets/news/op-1to1-sessions.jpg',
    alt: 'OP Football 1:1 Sessions — Tuesdays & Thursdays, 10–11am, 11am–12pm, 1–2pm.',
  },
];

const LatestNews = () => {
  const n = NEWS_SLIDES.length;
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const isMobile = useIsMobile(880);

  const go = (idx) => setI(((idx % n) + n) % n);
  const next = () => go(i + 1);
  const prev = () => go(i - 1);

  // Auto-advance every 5s unless paused (hover / focus).
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI(p => (p + 1) % n), 5000);
    return () => clearInterval(t);
  }, [paused, n]);

  const openBooking = () => window.open(NEWS_BOOKING_URL, '_blank', 'noopener');

  return (
    <section style={{ position: 'relative', background: 'var(--ink)', color: '#fff', overflow: 'hidden' }}>
      {/* atmospheric glow */}
      <div style={{
        position: 'absolute', right: '-8%', top: '-10%', width: 480, height: 480,
        background: 'radial-gradient(circle, rgba(200,16,46,0.30) 0%, transparent 70%)', filter: 'blur(20px)',
      }} />

      <StripeRule height={6} />
      <div className="container" style={{ position: 'relative', padding: '56px 28px 64px' }}>
        <div data-news-grid style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 460px',
          gap: isMobile ? 36 : 48,
          alignItems: 'center',
        }}>
          {/* Copy column */}
          <div style={{ order: isMobile ? 2 : 1 }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.24em', color: 'var(--red)', fontWeight: 700 }}>
              ▸ LATEST NEWS
            </div>
            <h2 className="display" style={{
              fontSize: 'clamp(40px, 7vw, 96px)', margin: '12px 0 0', lineHeight: 0.9, textTransform: 'uppercase',
            }}>
              Summer camps<br />at Brews Park.
            </h2>
            <p style={{ maxWidth: 460, margin: '20px 0 0', color: 'rgba(255,255,255,0.78)', fontSize: 16, lineHeight: 1.6 }}>
              OP Football — run by the same team behind the Wrens — is bringing its
              summer programme to Brews Park. Training days, 1:1 sessions and holiday
              camps for U6s to U13s, all abilities welcome.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <Btn variant="primary" size="lg" onClick={openBooking}>Book Online</Btn>
            </div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.55)', marginTop: 16 }}>
              opfootball.co.uk/bookings
            </div>
          </div>

          {/* Carousel column */}
          <div
            style={{ order: isMobile ? 1 : 2, position: 'relative', width: '100%', maxWidth: 460, margin: '0 auto' }}
            onMouseEnter={() => setPaused(true)}
            onMouseLeave={() => setPaused(false)}
            onFocus={() => setPaused(true)}
            onBlur={() => setPaused(false)}
          >
            {/* Viewport — 4:5 portrait to match the graphics */}
            <div style={{
              position: 'relative', width: '100%', aspectRatio: '1024 / 1280',
              overflow: 'hidden', border: '1px solid rgba(255,255,255,0.14)', background: '#000',
            }}>
              <div style={{
                display: 'flex', width: `${n * 100}%`, height: '100%',
                transform: `translateX(-${i * (100 / n)}%)`,
                transition: 'transform 600ms cubic-bezier(0.22, 1, 0.36, 1)',
              }}>
                {NEWS_SLIDES.map(s => (
                  <button
                    key={s.id}
                    onClick={openBooking}
                    aria-label={'Book the OP Football summer programme — ' + s.alt}
                    style={{
                      width: `${100 / n}%`, height: '100%', flexShrink: 0,
                      border: 'none', padding: 0, cursor: 'pointer', background: '#000',
                    }}
                  >
                    <img
                      src={s.img}
                      alt={s.alt}
                      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                    />
                  </button>
                ))}
              </div>

              {/* Prev / Next */}
              <button onClick={prev} aria-label="Previous slide" style={newsArrowStyle('left')}>‹</button>
              <button onClick={next} aria-label="Next slide" style={newsArrowStyle('right')}>›</button>
            </div>

            {/* Dots */}
            <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 16 }}>
              {NEWS_SLIDES.map((s, idx) => (
                <button
                  key={s.id}
                  onClick={() => go(idx)}
                  aria-label={'Go to slide ' + (idx + 1)}
                  style={{
                    width: idx === i ? 26 : 10, height: 10, borderRadius: 999,
                    border: 'none', cursor: 'pointer', padding: 0,
                    background: idx === i ? 'var(--red)' : 'rgba(255,255,255,0.3)',
                    transition: 'all 220ms ease',
                  }}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
      <StripeRule height={6} />
    </section>
  );
};

const newsArrowStyle = (side) => ({
  position: 'absolute', top: '50%', [side]: 10, transform: 'translateY(-50%)',
  width: 42, height: 42, borderRadius: 999, cursor: 'pointer',
  background: 'rgba(14,15,18,0.55)', color: '#fff', border: '1px solid rgba(255,255,255,0.25)',
  fontSize: 26, lineHeight: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
  paddingBottom: 3, backdropFilter: 'blur(4px)',
});

Object.assign(window, { LatestNews });