/**
 * Screenshots — App Store-style preview gallery.
 *
 * Five marketing screenshots of the app, presented as a horizontally
 * scrollable strip on mobile and a 5-up grid on wider viewports. Drop
 * the corresponding PNGs into `assets/screenshots/` (filenames below)
 * and the component picks them up — no other wiring needed.
 *
 * Source files:
 *   assets/screenshots/01.png  Compete in challenges
 *   assets/screenshots/02.png  Lock tempting apps
 *   assets/screenshots/03.png  Gain ELO by winning
 *   assets/screenshots/04.png  Set the rules
 *   assets/screenshots/05.png  Climb the ranks
 */

function Screenshots() {
  const shots = [
    { src: 'assets/screenshots/01.png', caption: 'Compete in challenges' },
    { src: 'assets/screenshots/02.png', caption: 'Lock tempting apps' },
    { src: 'assets/screenshots/03.png', caption: 'Gain ELO by winning' },
    { src: 'assets/screenshots/04.png', caption: 'Set the rules' },
    { src: 'assets/screenshots/05.png', caption: 'Climb the ranks' },
  ];

  return (
    <section id="screenshots" style={{ padding: '120px 32px 80px', position: 'relative' }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(900px 500px at 50% 50%, rgba(122,68,238,0.08), transparent 60%)',
      }}/>
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        {window.SectionHeader ? (
          <window.SectionHeader
            eyebrow="See it in action"
            title={<>The whole loop, <span style={{ background: 'linear-gradient(90deg,#ff8a9c,#a378ff,#5ae6c8)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>in five screens</span></>}
            sub="Set rules. Lock apps. Compete. Earn ELO. Climb the ladder."
            maxWidth={780}
          />
        ) : (
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', color: '#a378ff', textTransform: 'uppercase', marginBottom: 12 }}>See it in action</div>
            <h2 style={{ fontSize: 'clamp(36px, 6vw, 56px)', fontWeight: 800, color: '#fff', margin: 0, letterSpacing: '-0.02em' }}>The whole loop, in five screens</h2>
            <p style={{ fontSize: 16, color: '#aaa3cc', maxWidth: 600, margin: '20px auto 0', lineHeight: 1.5 }}>Set rules. Lock apps. Compete. Earn ELO. Climb the ladder.</p>
          </div>
        )}

        <div className="screenshot-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(5, 1fr)',
          gap: 20,
          marginTop: 48,
          alignItems: 'start',
        }}>
          {shots.map((s, i) => (
            <ScreenshotCard key={s.src} src={s.src} caption={s.caption} index={i}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function ScreenshotCard({ src, caption, index }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
      transition: 'transform 0.3s',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-6px)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      <div style={{
        width: '100%',
        aspectRatio: '9 / 19.5',
        borderRadius: 28,
        overflow: 'hidden',
        background: 'linear-gradient(180deg, rgba(122,68,238,0.18) 0%, rgba(15,10,30,0.6) 100%)',
        border: '1px solid rgba(255,255,255,0.06)',
        boxShadow: '0 24px 60px -20px rgba(122,68,238,0.4), 0 0 0 1px rgba(255,255,255,0.04) inset',
      }}>
        <img
          src={src}
          alt={caption}
          loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          onError={(e) => {
            // Fallback when the PNG hasn't been added yet — don't break the layout.
            e.currentTarget.style.display = 'none';
            const placeholder = e.currentTarget.nextSibling;
            if (placeholder) placeholder.style.display = 'flex';
          }}
        />
        <div style={{
          display: 'none', width: '100%', height: '100%',
          alignItems: 'center', justifyContent: 'center',
          color: '#aaa3cc', fontSize: 11, padding: 20, textAlign: 'center', lineHeight: 1.5,
        }}>
          Drop {src} into the assets folder
        </div>
      </div>
      <div style={{
        fontSize: 13, color: '#cbc4e8', fontWeight: 600, letterSpacing: '-0.01em',
        textAlign: 'center',
      }}>
        {caption}
      </div>
    </div>
  );
}

window.Screenshots = Screenshots;