// ─── Hero + Nav — i18n-aware ─────────────────────────────

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

  const waHref = `https://wa.me/31617490653?text=${encodeURIComponent(t.waMessage)}`;

  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 nav-row" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16,
      }}>
        <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 ? 48 : 64, transition: 'height 0.3s' }} />
        </a>
        <NavMenu scrolled={scrolled} />
      </div>
    </nav>
  );
}


function NavMenu({ scrolled }) {
  const t = useT();
  const [open, setOpen] = React.useState(false);
  const waHref = `https://wa.me/31617490653?text=${encodeURIComponent(t.waMessage)}`;
  const isMobile = typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches;
  const [_, force] = React.useReducer(x => x + 1, 0);
  React.useEffect(() => {
    const mql = window.matchMedia('(max-width: 900px)');
    const h = () => force();
    mql.addEventListener?.('change', h);
    return () => mql.removeEventListener?.('change', h);
  }, []);
  const mobile = typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches;

  const linkStyle = {
    color: 'inherit', textDecoration: 'none',
    fontSize: 13, fontWeight: 600, letterSpacing: '0.02em',
    opacity: 0.85,
  };

  const desktopContent = (
    <React.Fragment>
      {t.navLinks.map(([l, h]) => (
        <a key={h} href={h} style={linkStyle}>{l}</a>
      ))}
      <LangToggle color={scrolled ? '#1A1208' : '#F8F4E8'} />
      <a href="#open-clinic" className="clinic-ribbon" style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        background: 'var(--eso-accent)', color: '#1A1208',
        padding: '8px 14px', borderRadius: 999,
        fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
        textTransform: 'uppercase', textDecoration: 'none',
        whiteSpace: 'nowrap',
      }}>
        <span style={{
          fontFamily: "'Source Serif 4', Georgia, serif",
          fontStyle: 'italic', fontWeight: 900,
          textTransform: 'none', letterSpacing: '-0.01em', fontSize: 13,
        }}>{t.navOpenClinicLabel}</span>
        <span style={{ width: 1, height: 11, background: 'rgba(26,18,8,0.45)' }} />
        {t.navOpenClinicDate}
      </a>
      <a href={waHref} target="_blank" rel="noopener" aria-label="WhatsApp" style={{
        background: '#25D366', color: '#0a0806', padding: '9px 14px',
        fontSize: 13, fontWeight: 700, textDecoration: 'none',
        display: 'inline-flex', alignItems: 'center', gap: 6,
        borderRadius: 999,
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M17.5 14.4l-2-1c-.3-.1-.6-.1-.8.1l-1 1.2c-1.3-.6-2.5-1.7-3.1-3l1.1-1c.2-.2.3-.5.1-.8l-1-2c-.2-.4-.6-.6-1-.4l-1.5.7c-.5.2-.8.7-.7 1.2.6 3.5 3.4 6.3 6.9 6.9.5.1 1-.2 1.2-.7l.7-1.5c.2-.4 0-.8-.4-1z M12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.2-1.3c1.4.8 3.1 1.3 4.8 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
        </svg>
        {t.navWhatsApp}
      </a>
      <a href="#inschrijven" style={{
        background: '#C84D2C', color: '#F8F4E8', padding: '10px 18px',
        fontFamily: "'Source Serif 4', Georgia, serif", fontWeight: 900, fontSize: 13,
        letterSpacing: '-0.005em', textDecoration: 'none',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        {t.navCTA}
        <ExclamMark which="close" size={16} color="#F8F4E8" />
      </a>
    </React.Fragment>
  );

  if (!mobile) {
    return (
      <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
        {desktopContent}
      </div>
    );
  }

  return (
    <React.Fragment>
      <button onClick={() => setOpen(!open)} aria-label="Menu" style={{
        background: 'transparent', border: 0, color: 'inherit', cursor: 'pointer',
        padding: 8, display: 'flex', flexDirection: 'column', gap: 5,
      }}>
        <span style={{ width: 22, height: 2, background: 'currentColor' }} />
        <span style={{ width: 22, height: 2, background: 'currentColor' }} />
        <span style={{ width: 22, height: 2, background: 'currentColor' }} />
      </button>
      {open && (
        <div style={{
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
          background: '#1A1208', color: '#F8F4E8',
          zIndex: 100, padding: '24px',
          display: 'flex', flexDirection: 'column', gap: 20,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <LangToggle color="#F8F4E8" />
            <button onClick={() => setOpen(false)} style={{
              background: 'transparent', border: 0, color: '#F8F4E8',
              cursor: 'pointer', padding: 8, fontSize: 24, lineHeight: 1,
            }}>×</button>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 20 }}>
            {t.navLinks.map(([l, h]) => (
              <a key={h} href={h} onClick={() => setOpen(false)} style={{
                color: '#F8F4E8', textDecoration: 'none',
                fontFamily: "'Source Serif 4', Georgia, serif", fontStyle: 'italic', fontWeight: 900,
                fontSize: 28, textTransform: 'lowercase',
              }}>{l}</a>
            ))}
          </nav>
          <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href={waHref} target="_blank" rel="noopener" style={{
              background: '#25D366', color: '#0a0806', padding: '14px 18px',
              fontSize: 15, fontWeight: 700, textDecoration: 'none', textAlign: 'center',
              borderRadius: 6,
            }}>{t.navWhatsApp}</a>
            <a href="#inschrijven" onClick={() => setOpen(false)} style={{
              background: '#C84D2C', color: '#F8F4E8', padding: '14px 18px',
              fontFamily: "'Source Serif 4', Georgia, serif", fontStyle: 'italic', fontWeight: 900, fontSize: 15,
              textDecoration: 'none', textAlign: 'center',
            }}>{t.navCTA}</a>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}
window.NavMenu = NavMenu;

function Hero({ marksShow, marksColor, marksBleed, marksSize }) {
  const y = useScrollY();
  const t = useT();
  const photoY = Math.min(y * 0.35, 220);
  const overlayOp = Math.min(0.18 + y / 1800, 0.48);
  const waHref = `https://wa.me/31617490653?text=${encodeURIComponent(t.waMessage)}`;

  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '100vh',
      background: ESO.ink, color: ESO.cream,
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
        <CoachPhoto crop="wide" height="100%" parallaxY={photoY} />
      </div>
      <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',
      }} />
      <BleedMarks show={marksShow} color={marksColor}
                  size={marksSize} bleed={marksBleed} zIndex={3} />
      <div style={{
        position: 'relative', zIndex: 4, flex: 1,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        paddingTop: 120, paddingBottom: 140,
      }}>
        <div className="container" style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
          <a href="#open-clinic" className="reveal clinic-ribbon" style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            background: 'var(--eso-accent)', color: ESO.ink,
            padding: '8px 16px', borderRadius: 999,
            fontSize: 12, fontWeight: 700, letterSpacing: '0.18em',
            textTransform: 'uppercase', textDecoration: 'none',
            marginBottom: 18,
          }}>
            <span style={{
              fontFamily: "'Source Serif 4', Georgia, serif",
              fontStyle: 'italic', fontWeight: 900,
              textTransform: 'none', letterSpacing: '-0.01em', fontSize: 14,
            }}>{t.heroRibbonLabel}</span>
            <span style={{ width: 1, height: 12, background: 'rgba(26,18,8,0.5)' }} />
            {t.heroRibbon}
          </a>
          <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)' }} />
              {t.heroEyebrow}
            </span>
          </div>
          <h1 className="display reveal" data-delay="1" style={{
            fontSize: 'clamp(40px, 7vw, 96px)', margin: '18px auto 0',
            color: ESO.cream,
          }}>
            {t.heroTitle1}<br />
            <span style={{ color: 'var(--eso-accent)', whiteSpace: 'nowrap' }}>{t.heroTitle2}</span><br />
            <span style={{ opacity: 0.85 }}>{t.heroTitle3}</span>
          </h1>
          <p className="reveal" data-delay="2" style={{
            marginTop: 28, maxWidth: 620, marginLeft: 'auto', marginRight: 'auto',
            fontSize: 'clamp(15px, 1.2vw, 18px)', lineHeight: 1.55,
            opacity: 0.92,
          }}>{t.heroLede}</p>
          <div className="reveal" data-delay="3" style={{
            marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center',
          }}>
            <a href="#inschrijven" style={{
              background: ESO.red, color: ESO.cream,
              padding: '18px 28px',
              fontFamily: "'Source Serif 4', Georgia, serif", fontStyle: 'italic',
              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'}>
              {t.heroPrimaryCTA}
              <ExclamMark which="close" size={20} color="var(--eso-accent)" />
            </a>
            <a href={waHref} target="_blank" rel="noopener" style={{
              padding: '18px 26px',
              background: '#25D366', color: '#0a0806',
              fontSize: 15, fontWeight: 700, textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.5 14.4l-2-1c-.3-.1-.6-.1-.8.1l-1 1.2c-1.3-.6-2.5-1.7-3.1-3l1.1-1c.2-.2.3-.5.1-.8l-1-2c-.2-.4-.6-.6-1-.4l-1.5.7c-.5.2-.8.7-.7 1.2.6 3.5 3.4 6.3 6.9 6.9.5.1 1-.2 1.2-.7l.7-1.5c.2-.4 0-.8-.4-1z M12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.2-1.3c1.4.8 3.1 1.3 4.8 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
              WhatsApp
            </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',
            }}>{t.heroTertiary}</a>
          </div>
          <div className="reveal" data-delay="4" style={{
            marginTop: 64, display: 'flex', gap: 56, flexWrap: 'wrap', justifyContent: 'center',
          }}>
            {t.stats.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>
      <HeroMarquee />
    </section>
  );
}

function HeroMarquee() {
  const t = useT();
  const phrases = t.marqueePhrases;
  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;