// Videos, Gallery, Skills sections

const VideoCard = ({ video, index, inView }) => {
  const [playing, setPlaying] = React.useState(false);

  return (
    <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(20px)', transition: `opacity 0.6s ${index * 0.1}s, transform 0.6s ${index * 0.1}s` }}>
      <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
        {playing ? (
          <iframe src={video.url + '?autoplay=1'} title={video.title}
            style={{ width: '100%', aspectRatio: '16/9', display: 'block', border: 'none' }}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
        ) : (
          <div onClick={() => setPlaying(true)} style={{ cursor: 'pointer', position: 'relative', aspectRatio: '16/9', background: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
            {/* Thumbnail */}
            <div style={{ position: 'absolute', inset: 0, background: 'var(--surface)' }}>
              {video.thumb
                ? <img src={video.thumb} alt={video.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                : <svg width="100%" height="100%" style={{ opacity: 0.12 }} preserveAspectRatio="none">
                    <defs><pattern id={`vstrip${index}`} 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(#vstrip${index})`}/>
                  </svg>
              }
            </div>
            {/* Red gradient bottom */}
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '50%', background: 'linear-gradient(transparent, rgba(0,0,0,0.7))' }} />
            {/* Play button */}
            <div style={{ position: 'relative', zIndex: 2, width: 64, height: 64, background: 'var(--red)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 32px rgba(180,20,20,0.5)', transition: 'transform 0.2s, box-shadow 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.1)'; e.currentTarget.style.boxShadow = '0 0 48px rgba(180,20,20,0.7)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = '0 0 32px rgba(180,20,20,0.5)'; }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white" style={{ marginLeft: 3 }}><polygon points="5,3 19,12 5,21"/></svg>
            </div>
            {/* Video index */}
            <div style={{ position: 'absolute', top: '1rem', left: '1rem', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: '3rem', color: 'rgba(255,255,255,0.05)', lineHeight: 1, userSelect: 'none' }}>{String(index + 1).padStart(2, '0')}</div>
          </div>
        )}
        <div style={{ padding: '1.1rem 1.25rem' }}>
          <p style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '1rem', color: 'var(--text)', marginBottom: 4 }}>{video.title}</p>
          <p style={{ fontFamily: "'Inter',sans-serif", fontSize: '0.78rem', color: 'var(--muted)', lineHeight: 1.5 }}>{video.desc}</p>
        </div>
      </div>
    </div>
  );
};

const Videos = () => {
  const p = window.PLAYER;
  const [ref, inView] = window.useInView();

  return (
    <section id="highlights" ref={ref} style={{ background: 'var(--bg)', padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,5vw,5rem)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: '3rem', opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(16px)', transition: 'opacity 0.6s, transform 0.6s' }}>
          <window.SectionLabel>Scout Section</window.SectionLabel>
          <window.SectionTitle>Highlight Videos</window.SectionTitle>
          <window.RedLine />
          <p style={{ fontFamily: "'Inter',sans-serif", color: 'var(--muted)', fontSize: '0.9rem', maxWidth: 500 }}>
            Full game footage, season highlights, and skill-specific reels — everything a scout or coach needs to evaluate.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '1.5rem' }}>
          {p.videos.map((v, i) => (
            <VideoCard key={i} video={v} index={i} inView={inView} />
          ))}
        </div>
      </div>
    </section>
  );
};

const Gallery = () => {
  const [ref, inView] = window.useInView();
  const [lightbox, setLightbox] = React.useState(null);

  const photos = Array.from({ length: 6 }, (_, i) => ({
    label: `Action photo ${i + 1}`,
    aspect: i === 0 ? '4/3' : i === 3 ? '4/3' : '3/4',
    tall: i === 1 || i === 4,
  }));

  return (
    <section id="gallery" ref={ref} style={{ background: 'var(--surface)', padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,5vw,5rem)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: '3rem', opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(16px)', transition: 'opacity 0.6s, transform 0.6s' }}>
          <window.SectionLabel>Photography</window.SectionLabel>
          <window.SectionTitle>In Action</window.SectionTitle>
          <window.RedLine />
        </div>

        <div style={{ columns: 'auto 240px', columnGap: '1rem', opacity: inView ? 1 : 0, transition: 'opacity 0.7s 0.2s' }}>
          {photos.map((ph, i) => (
            <div key={i} onClick={() => setLightbox(i)}
              style={{ breakInside: 'avoid', marginBottom: '1rem', cursor: 'zoom-in', position: 'relative', overflow: 'hidden', borderRadius: 4, border: '1px solid var(--border)' }}
              onMouseEnter={e => { e.currentTarget.querySelector('.gallery-overlay').style.opacity = '1'; }}
              onMouseLeave={e => { e.currentTarget.querySelector('.gallery-overlay').style.opacity = '0'; }}>
              <window.Placeholder label={ph.label} height={ph.tall ? 340 : 240} style={{ borderRadius: 0, border: 'none' }} />
              <div className="gallery-overlay" style={{ position: 'absolute', inset: 0, background: 'rgba(180,20,20,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0, transition: 'opacity 0.25s' }}>
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
              </div>
            </div>
          ))}
        </div>

        {/* Lightbox */}
        {lightbox !== null && (
          <div onClick={() => setLightbox(null)}
            style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'zoom-out' }}>
            <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, padding: '2rem', maxWidth: 640, width: '90%' }}>
              <window.Placeholder label={`Action photo ${lightbox + 1} — full size`} height={420} style={{ borderRadius: 4 }} />
              <p style={{ fontFamily: "'Barlow Condensed',sans-serif", color: 'var(--muted)', fontSize: '0.75rem', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '1rem', textAlign: 'center' }}>Click anywhere to close</p>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

const SkillBar = ({ skill, index, inView }) => {
  const [barWidth, setBarWidth] = React.useState(0);

  React.useEffect(() => {
    if (inView) {
      const t = setTimeout(() => setBarWidth(skill.level), 200 + index * 80);
      return () => clearTimeout(t);
    }
  }, [inView]);

  return (
    <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(12px)', transition: `opacity 0.5s ${index * 0.06}s, transform 0.5s ${index * 0.06}s` }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1.25rem', padding: '1.25rem', background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4 }}>
        <div style={{ flexShrink: 0, width: 40, height: 40, borderRadius: '50%', border: '2px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <svg viewBox="0 0 36 36" width="40" height="40" style={{ position: 'absolute', top: -2, left: -2, transform: 'rotate(-90deg)' }}>
            <circle cx="18" cy="18" r="15" fill="none" stroke="var(--border)" strokeWidth="2"/>
            <circle cx="18" cy="18" r="15" fill="none" stroke="var(--red)" strokeWidth="2" strokeDasharray={`${2 * Math.PI * 15}`} strokeDashoffset={`${2 * Math.PI * 15 * (1 - barWidth / 100)}`} strokeLinecap="round" style={{ transition: 'stroke-dashoffset 1s ease' }}/>
          </svg>
          <span style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 800, fontSize: '0.7rem', color: 'var(--text)', position: 'relative', zIndex: 1 }}>{skill.level}</span>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
            <p style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.95rem', color: 'var(--text)', letterSpacing: '0.05em' }}>{skill.name}</p>
          </div>
          <div style={{ height: 3, background: 'var(--border)', borderRadius: 2, marginBottom: '0.5rem' }}>
            <div style={{ height: '100%', width: `${barWidth}%`, background: `linear-gradient(90deg, var(--red) 0%, #ff4444 100%)`, borderRadius: 2, transition: 'width 1s ease' }} />
          </div>
          <p style={{ fontFamily: "'Inter',sans-serif", fontSize: '0.78rem', color: 'var(--muted)', lineHeight: 1.5 }}>{skill.desc}</p>
        </div>
      </div>
    </div>
  );
};

const Skills = () => {
  const p = window.PLAYER;
  const [ref, inView] = window.useInView();

  return (
    <section id="skills" ref={ref} style={{ background: 'var(--bg)', padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,5vw,5rem)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: '3rem', opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(16px)', transition: 'opacity 0.6s, transform 0.6s' }}>
          <window.SectionLabel>Player Profile</window.SectionLabel>
          <window.SectionTitle>Skills & Playing Style</window.SectionTitle>
          <window.RedLine />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '1rem' }}>
          {p.skills.map((s, i) => (
            <SkillBar key={s.name} skill={s} index={i} inView={inView} />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Videos, Gallery, Skills });