// Nav + Hero section

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const links = [
    { label: 'About', id: 'about' },
    { label: 'Stats', id: 'stats' },
    { label: 'Career', id: 'career' },
    { label: 'Highlights', id: 'highlights' },
    { label: 'Skills', id: 'skills' },
  ];

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    transition: 'background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s',
    background: scrolled ? 'rgba(10,10,12,0.95)' : 'transparent',
    backdropFilter: scrolled ? 'blur(12px)' : 'none',
    boxShadow: scrolled ? '0 1px 0 rgba(255,255,255,0.06)' : 'none',
    padding: '0 clamp(1.5rem,4vw,3rem)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    height: 72,
  };

  return (
    <nav style={navStyle}>
      <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
        style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 36, height: 36, background: 'var(--red)', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: '1rem', color: '#fff', letterSpacing: '-0.02em' }}>SV</span>
        </div>
        <span style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.95rem', color: 'var(--text)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          Sander Verhoof
        </span>
      </button>

      {/* Desktop links */}
      <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }} className="nav-desktop">
        {links.map(l => (
          <button key={l.id} onClick={() => window.scrollToSection(l.id)}
            style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 600, fontSize: '0.82rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--muted)', transition: 'color 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--muted)'}>
            {l.label}
          </button>
        ))}
        <button onClick={() => window.scrollToSection('contact')}
          style={{ background: 'var(--red)', border: 'none', cursor: 'pointer', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.8rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: '#fff', padding: '8px 20px', borderRadius: 3, transition: 'background 0.2s' }}
          onMouseEnter={e => e.currentTarget.style.background = 'var(--red-bright)'}
          onMouseLeave={e => e.currentTarget.style.background = 'var(--red)'}>
          Get in Touch
        </button>
      </div>

      {/* Mobile hamburger */}
      <button className="nav-mobile" onClick={() => setMenuOpen(!menuOpen)}
        style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text)', padding: 4, display: 'none' }}>
        {menuOpen
          ? <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          : <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></svg>
        }
      </button>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{ position: 'absolute', top: 72, left: 0, right: 0, background: 'rgba(10,10,12,0.98)', backdropFilter: 'blur(16px)', borderTop: '1px solid var(--border)', padding: '1rem 0', display: 'flex', flexDirection: 'column' }}>
          {links.map(l => (
            <button key={l.id} onClick={() => { window.scrollToSection(l.id); setMenuOpen(false); }}
              style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '1rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--text)', padding: '0.85rem 2rem', textAlign: 'left' }}>
              {l.label}
            </button>
          ))}
          <button onClick={() => { window.scrollToSection('contact'); setMenuOpen(false); }}
            style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '1rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--red)', padding: '0.85rem 2rem', textAlign: 'left' }}>
            Get in Touch
          </button>
        </div>
      )}
    </nav>
  );
};

const Hero = () => {
  const p = window.PLAYER;
  const photo = window.PLAYER_PHOTO || p.photo;
  const [imgError, setImgError] = React.useState(false);
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    const timer = setTimeout(() => setLoaded(true), 100);
    return () => clearTimeout(timer);
  }, []);

  const specs = [
    { label: 'Position', value: p.position },
    { label: 'Age', value: p.age },
    { label: 'Height', value: p.height.split('/')[0].trim() },
    { label: 'Weight', value: p.weight.split('/')[0].trim() },
    { label: 'Shoots', value: p.shoots },
    { label: 'Nation', value: p.nationality },
  ];

  return (
    <section id="hero" style={{ minHeight: '100vh', background: 'var(--bg)', display: 'flex', position: 'relative', overflow: 'hidden' }}>

      {/* Background texture */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.03, pointerEvents: 'none' }}>
        <svg width="100%" height="100%"><defs><pattern id="grid" patternUnits="userSpaceOnUse" width="60" height="60"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="white" strokeWidth="0.5"/></pattern></defs><rect width="100%" height="100%" fill="url(#grid)"/></svg>
      </div>

      {/* Red corner accent */}
      <div style={{ position: 'absolute', top: 0, right: 0, width: '45%', height: '100%', background: 'linear-gradient(135deg, transparent 40%, rgba(180,20,20,0.06) 100%)', pointerEvents: 'none' }} />

      <div style={{ display: 'flex', width: '100%', alignItems: 'stretch', flexWrap: 'wrap' }}>

        {/* Left — text content */}
        <div className="hero-content" style={{ flex: '0 0 55%', minWidth: '320px', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(6rem,12vh,10rem) clamp(1.5rem,5vw,5rem) 4rem' }}>

          <div style={{ opacity: loaded ? 1 : 0, transform: loaded ? 'none' : 'translateY(24px)', transition: 'opacity 0.8s 0.1s, transform 0.8s 0.1s' }}>
            <p style={{ fontFamily: "'Barlow Condensed',sans-serif", letterSpacing: '0.25em', fontSize: '0.72rem', fontWeight: 700, color: 'var(--red)', textTransform: 'uppercase', marginBottom: '1.5rem' }}>
              Ice Hockey · Forward · Netherlands
            </p>
          </div>

          <div style={{ opacity: loaded ? 1 : 0, transform: loaded ? 'none' : 'translateY(32px)', transition: 'opacity 0.9s 0.2s, transform 0.9s 0.2s' }}>
            <h1 style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: 'clamp(4.5rem, 10vw, 9rem)', lineHeight: 0.9, letterSpacing: '-0.02em', color: 'var(--text)', margin: 0, textTransform: 'uppercase' }}>
              <span style={{ display: 'block' }}>Sander</span>
              <span style={{ display: 'block', color: 'var(--red)', WebkitTextStroke: '1px var(--red)', WebkitTextFillColor: 'transparent' }}>Verhoof</span>
            </h1>
          </div>

          <div style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.8s 0.5s', marginTop: '2rem' }}>
            <div style={{ width: 64, height: 3, background: 'var(--red)', marginBottom: '1.5rem', borderRadius: 2 }} />
            <p style={{ fontFamily: "'Inter',sans-serif", color: 'var(--muted)', fontSize: '0.95rem', lineHeight: 1.65, maxWidth: 400 }}>
              {p.tagline}
            </p>
          </div>

          {/* Specs row */}
          <div style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.8s 0.65s', marginTop: '2rem', display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
            {specs.map(s => (
              <div key={s.label} style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, padding: '8px 14px' }}>
                <p style={{ fontFamily: "'Barlow Condensed',sans-serif", letterSpacing: '0.2em', fontSize: '0.58rem', fontWeight: 700, color: 'var(--red)', textTransform: 'uppercase', marginBottom: 2 }}>{s.label}</p>
                <p style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.9rem', color: 'var(--text)' }}>{s.value}</p>
              </div>
            ))}
          </div>

          {/* CTAs */}
          <div style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.8s 0.8s', marginTop: '2.5rem', display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
            <button className="btn-highlights" onClick={() => window.scrollToSection('highlights')}
              style={{ border: 'none', cursor: 'pointer', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.85rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: '#fff', padding: '14px 28px', borderRadius: 3, display: 'flex', alignItems: 'center', gap: 8 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
              View Highlights
            </button>
            <a href="#" download style={{ background: 'transparent', border: '1px solid var(--border)', cursor: 'pointer', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.85rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--text)', padding: '14px 28px', borderRadius: 3, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8, transition: 'border-color 0.2s, color 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--red)'; e.currentTarget.style.color = 'var(--red)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--text)'; }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Download CV
            </a>
            <button onClick={() => window.scrollToSection('contact')}
              style={{ background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.85rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--muted)', padding: '14px 8px', transition: 'color 0.2s' }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--muted)'}>
              Contact →
            </button>
          </div>
        </div>

        {/* Right — photo */}
        <div style={{ flex: '0 0 45%', minWidth: '320px', position: 'relative', minHeight: '480px' }}>
          {!imgError ? (
            <img src={photo} alt="Sander Verhoof"
              onError={() => setImgError(true)}
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
          ) : (
            <div style={{ width: '100%', height: '100%', background: 'var(--surface)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16, position: 'relative', overflow: 'hidden' }}>
              <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.15 }} preserveAspectRatio="none">
                <defs><pattern id="stripe-hero" patternUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="24" stroke="var(--border)" strokeWidth="10"/></pattern></defs>
                <rect width="100%" height="100%" fill="url(#stripe-hero)"/>
              </svg>
              <div style={{ position: 'relative', zIndex: 1, textAlign: 'center', padding: '2rem' }}>
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="1"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                <p style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: 'var(--muted)', marginTop: 12 }}>Player photo<br/>Drop sander2.jpg into project</p>
              </div>
            </div>
          )}
          {/* Gradient overlay at bottom */}
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '40%', background: 'linear-gradient(transparent, var(--bg))' }} />
          {/* Jersey number watermark */}
          <div style={{ position: 'absolute', top: '50%', right: '-0.1em', transform: 'translateY(-50%)', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: 'clamp(8rem, 18vw, 18rem)', color: 'rgba(180,20,20,0.08)', lineHeight: 1, pointerEvents: 'none', userSelect: 'none', letterSpacing: '-0.05em' }}>
            17
          </div>
        </div>
      </div>

      {/* Scroll indicator */}
      <div style={{ position: 'absolute', bottom: '2rem', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, opacity: 0.4 }}>
        <span style={{ fontFamily: "'Barlow Condensed',sans-serif", fontSize: '0.65rem', letterSpacing: '0.2em', color: 'var(--muted)', textTransform: 'uppercase' }}>Scroll</span>
        <svg width="14" height="20" viewBox="0 0 14 24" fill="none" stroke="var(--muted)" strokeWidth="1.5"><rect x="1" y="1" width="12" height="22" rx="6"/><circle cx="7" cy="7" r="2" fill="var(--muted)" stroke="none"><animate attributeName="cy" values="7;14;7" dur="1.6s" repeatCount="indefinite"/></circle></svg>
      </div>
    </section>
  );
};

Object.assign(window, { Nav, Hero });