// ─── Hero — sportieve full-bleed kop met foto + parallax + marquee ─

function NavBar() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled((window.scrollY || 0) > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['filosofie', '#filosofie'],
    ['pijlers',   '#pijlers'],
    ['coaches',   '#coaches'],
    ['programma', '#programma'],
    ['inschrijven', '#inschrijven'],
  ];

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'background 0.3s, padding 0.3s, color 0.3s',
      background: scrolled ? ESO.cream : 'transparent',
      borderBottom: scrolled ? `1px solid ${ESO.rule}` : '1px solid transparent',
      color: scrolled ? ESO.ink : ESO.cream,
      padding: scrolled ? '12px 0' : '20px 0',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24,
      }}>
        <a href="#top" style={{
          display: 'flex', alignItems: 'center', gap: 10,
          textDecoration: 'none', color: 'inherit',
        }}>
          <img src="website-assets/logo.png" alt="¡eso! tennis academy"
               style={{ height: scrolled ? 30 : 38, transition: 'height 0.3s',
                        filter: scrolled ? 'none' : 'brightness(0) invert(1)' }} />
        </a>
        <div style={{
          display: 'flex', gap: 28, alignItems: 'center',
        }}>
          {links.map(([l, h]) => (
            <a key={h} href={h} style={{
              color: 'inherit', textDecoration: 'none',
              fontSize: 13, fontWeight: 600, letterSpacing: '0.02em',
              opacity: 0.85,
            }}>{l}</a>
          ))}
          <a href="#inschrijven" style={{
            background: ESO.red, color: ESO.cream, padding: '10px 18px',
            fontFamily: 'Archivo Black, sans-serif', fontSize: 13,
            letterSpacing: '-0.005em', textTransform: 'lowercase',
            textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            gratis intake
            <ExclamMark which="close" size={16} color={ESO.cream} />
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ marksShow, marksColor, marksBleed, marksSize }) {
  const y = useScrollY();
  // Parallax for the photo — slow it down so the foreground type "leaves" first
  const photoY = Math.min(y * 0.35, 220);
  const overlayOp = Math.min(0.18 + y / 1800, 0.48);

  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '100vh',
      background: ESO.ink, color: ESO.cream,
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Hero photo behind */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
        <CoachPhoto crop="wide" height="100%" parallaxY={photoY} />
      </div>

      {/* Dark scrim for type legibility */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 2,
        background: `linear-gradient(180deg,
          rgba(31,26,23,0.55) 0%,
          rgba(31,26,23,${overlayOp}) 40%,
          rgba(31,26,23,0.78) 100%)`,
        pointerEvents: 'none',
      }} />

      {/* Bleed marks — over photo, white-on-photo lime */}
      <BleedMarks show={marksShow} color={marksColor}
                  size={marksSize} bleed={marksBleed} zIndex={3} />

      {/* Hero content */}
      <div style={{
        position: 'relative', zIndex: 4, flex: 1,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        paddingTop: 120, paddingBottom: 140,
      }}>
        <div className="container">
          <div className="reveal">
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
              fontWeight: 600, color: 'var(--eso-accent)',
              padding: '6px 0',
            }}>
              <span style={{ width: 32, height: 1, background: 'var(--eso-accent)' }} />
              tennis academy · dongen · nl
            </span>
          </div>

          <h1 className="display reveal" data-delay="1" style={{
            fontSize: 'clamp(48px, 9vw, 132px)', margin: '18px 0 0',
            color: ESO.cream, maxWidth: 1100,
          }}>
            klein team.<br />
            <span style={{ color: 'var(--eso-accent)' }}>groot ambacht.</span><br />
            <span style={{ opacity: 0.85 }}>echte progressie.</span>
          </h1>

          <p className="reveal" data-delay="2" style={{
            marginTop: 28, maxWidth: 620,
            fontSize: 'clamp(15px, 1.2vw, 18px)', lineHeight: 1.55,
            opacity: 0.92,
          }}>
            Wij begeleiden een select aantal tennistalenten van 8 tot 15 jaar.
            Twee coaches, één visie. Latijns-Amerikaans coaching-DNA met
            Nederlandse discipline. Bewust kleinschalig — max 8 talenten per seizoen.
          </p>

          <div className="reveal" data-delay="3" style={{
            marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap',
          }}>
            <a href="#inschrijven" style={{
              background: ESO.red, color: ESO.cream,
              padding: '18px 28px',
              fontFamily: 'Archivo Black, sans-serif',
              fontSize: 17, letterSpacing: '-0.01em', textTransform: 'lowercase',
              textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 14,
              transition: 'transform 0.2s',
            }} onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
               onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}>
              boek een gratis kennismaking
              <ExclamMark which="close" size={20} color="var(--eso-accent)" />
            </a>
            <a href="#programma" style={{
              padding: '18px 24px',
              border: `1px solid ${ESO.cream}`, color: ESO.cream,
              fontSize: 14, fontWeight: 600, textDecoration: 'none',
              letterSpacing: '0.02em', textTransform: 'lowercase',
            }}>
              bekijk het programma
            </a>
          </div>

          {/* Anchor stats */}
          <div className="reveal" data-delay="4" style={{
            marginTop: 64, display: 'flex', gap: 56, flexWrap: 'wrap',
          }}>
            {[
              ['02', 'jaar actief'],
              ['8–15', 'jaar talent'],
              ['08', 'plekken / seizoen'],
              ['14', 'weken programma'],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="display" style={{
                  fontSize: 44, color: 'var(--eso-accent)',
                }}>{n}</div>
                <div className="eyebrow" style={{ color: ESO.cream, opacity: 0.72, marginTop: 4 }}>
                  {l}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Marquee strap at the bottom */}
      <HeroMarquee />
    </section>
  );
}

function HeroMarquee() {
  const phrases = [
    '¡eso!',
    'techniek',
    '¡eso!',
    'tactiek',
    '¡eso!',
    'fysiek',
    '¡eso!',
    'mentaal',
  ];
  // Build a long string and repeat for seamless loop
  const block = (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 36,
      paddingRight: 36,
    }}>
      {phrases.map((p, i) => (
        <React.Fragment key={i}>
          <span className="display" style={{
            fontSize: 56, color: i % 2 === 0 ? 'var(--eso-accent)' : ESO.cream,
            letterSpacing: '-0.04em',
          }}>{p}</span>
          <ExclamMark which={i % 2 === 0 ? 'open' : 'close'}
                       size={36} color={ESO.cream} />
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div style={{
      position: 'relative', zIndex: 4,
      borderTop: `1px solid rgba(255,255,255,0.18)`,
      borderBottom: `1px solid rgba(255,255,255,0.18)`,
      padding: '14px 0',
      overflow: 'hidden', whiteSpace: 'nowrap',
      background: 'rgba(31,26,23,0.6)', backdropFilter: 'blur(6px)',
    }}>
      <div className="marquee-track">
        {block}
        {block}
      </div>
    </div>
  );
}

window.NavBar = NavBar;
window.Hero = Hero;