const { useState, useRef, useEffect } = React;

// ── Videos ────────────────────────────────────────────────────
const videos = [
  {
    title: "What's Your Fantasy",
    subtitle: 'Live at Blue Island Beer Co — Chicago, IL',
    type: 'Cover',
    gated: false,
    embedUrl: 'https://drive.google.com/file/d/1MHI34rVnKSiciyTQM5CQfbfrY9OFdh4T/preview',
    color: 'rgba(20,40,60,0.7)',
  },
  {
    title: 'Original Content',
    subtitle: 'VIP exclusive',
    type: 'Original',
    gated: true,
    embedUrl: null,
    color: 'rgba(40,20,60,0.7)',
  },
  {
    title: 'Original Content',
    subtitle: 'VIP exclusive',
    type: 'Original',
    gated: true,
    embedUrl: null,
    color: 'rgba(60,20,20,0.7)',
  },
];

function VideoCard({ v, index }) {
  const [playing, setPlaying] = useState(false);
  return (
    <div className={`liquid-glass reveal reveal-delay-${index + 1}`} style={{ borderRadius: 20, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      {/* Video area */}
      <div style={{ position: 'relative', paddingTop: '56.25%', background: v.color }}>
        <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 10px)' }} />

        {v.gated ? (
          /* Locked state */
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
            <div style={{ fontSize: '2rem' }}>🔒</div>
            <div style={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.5)', textAlign: 'center', padding: '0 24px' }}>VIP Access required</div>
            <button className="btn-accent" style={{ padding: '7px 18px', fontSize: '0.78rem', marginTop: 4 }}>🔑 Get Access</button>
          </div>
        ) : playing ? (
          /* Embedded player */
          <div style={{ position: 'absolute', inset: 0 }}>
            <iframe
              src={v.embedUrl}
              style={{ width: '100%', height: '100%', border: 'none' }}
              allow="autoplay"
              allowFullScreen
            />
            <button onClick={() => setPlaying(false)}
              style={{ position: 'absolute', top: 8, right: 8, background: 'rgba(0,0,0,0.7)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff', borderRadius: '50%', width: 28, height: 28, cursor: 'pointer', fontSize: '0.8rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>✕</button>
          </div>
        ) : (
          /* Play button */
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
            onClick={() => setPlaying(true)}>
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(255,255,255,0.12)', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,0.25)', transition: 'transform 0.2s, background 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.1)'; e.currentTarget.style.background = 'rgba(255,255,255,0.2)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = 'rgba(255,255,255,0.12)'; }}>
              <IconPlay />
            </div>
          </div>
        )}

        {/* Type badge */}
        <div style={{ position: 'absolute', top: 12, left: 12, fontSize: '0.65rem', fontWeight: 600, padding: '4px 12px', borderRadius: 9999, background: 'rgba(0,0,0,0.65)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{v.type}</div>
      </div>

      {/* Info */}
      <div style={{ padding: '14px 18px' }}>
        <h4 style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: '1.1rem', color: '#fff', marginBottom: 4 }}>{v.title}</h4>
        <p style={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.4)', fontWeight: 300 }}>{v.subtitle}</p>
      </div>
    </div>
  );
}

function Videos() {
  const ref = useReveal();
  return (
    <section id="videos" style={{ padding: '100px 24px', background: '#000', maxWidth: 1200, margin: '0 auto' }}>
      <div ref={ref} className="reveal" style={{ marginBottom: 52 }}>
        <div className="section-badge" style={{ marginBottom: 20 }}>Videos</div>
        <h2 style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: 'clamp(2.4rem, 5vw, 3.5rem)', lineHeight: 0.92, letterSpacing: '-2px', color: '#fff' }}>
          Watch & feel.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
        {videos.map((v, i) => <VideoCard key={v.title} v={v} index={i} />)}
      </div>
    </section>
  );
}

// ── Gallery ───────────────────────────────────────────────────
const galleryItems = [
  { label: 'live show', span: 2 },
  { label: 'backstage', span: 1 },
  { label: 'studio session', span: 1 },
  { label: 'portrait', span: 1 },
  { label: 'live — crowd', span: 2 },
  { label: 'press photo', span: 1 },
];
const galleryColors = [
  'rgba(80,40,120,0.35)', 'rgba(20,60,120,0.3)', 'rgba(120,50,20,0.3)',
  'rgba(60,100,80,0.3)', 'rgba(100,30,80,0.35)', 'rgba(40,60,120,0.3)',
];

function Gallery() {
  const ref = useReveal();
  return (
    <section id="gallery" style={{ padding: '100px 24px', background: '#000' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div ref={ref} className="reveal" style={{ marginBottom: 52 }}>
          <div className="section-badge" style={{ marginBottom: 20 }}>Gallery</div>
          <h2 style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: 'clamp(2.4rem, 5vw, 3.5rem)', lineHeight: 0.92, letterSpacing: '-2px', color: '#fff' }}>
            In frame.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {galleryItems.map((g, i) => (
            <div key={i} className="photo-placeholder reveal" style={{
              gridColumn: `span ${g.span}`,
              borderRadius: 16,
              height: g.span === 2 ? 300 : 220,
              background: galleryColors[i],
              position: 'relative',
              overflow: 'hidden',
              transitionDelay: `${i * 0.07}s`,
            }}>
              <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 8px)' }} />
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 6 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21,15 16,10 5,21"/></svg>
                <span style={{ fontSize: '0.68rem', color: 'rgba(255,255,255,0.22)', fontFamily: 'monospace' }}>{g.label}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <button className="liquid-glass-strong" style={{ borderRadius: 9999, padding: '10px 28px', color: '#fff', fontSize: '0.85rem', fontWeight: 500, background: 'none', border: 'none', cursor: 'pointer' }}>
            View all photos <IconArrow />
          </button>
        </div>
      </div>
      <style>{`@media(max-width:640px){#gallery .reveal[style*="grid-column"]{grid-column:span 1!important;height:180px!important}}`}</style>
    </section>
  );
}

// ── Merch ─────────────────────────────────────────────────────
const merch = [
  { name: 'Essential Tee', price: '$35', color: 'rgba(60,40,100,0.4)' },
  { name: 'Overdrive Hoodie', price: '$65', color: 'rgba(20,50,90,0.4)' },
  { name: 'Debut Vinyl', price: '$28', color: 'rgba(120,60,20,0.35)' },
  { name: 'Tour Poster', price: '$18', color: 'rgba(60,90,60,0.35)' },
];

function Merch() {
  const ref = useReveal();
  return (
    <section id="merch" style={{ padding: '100px 24px', background: '#000' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div ref={ref} className="reveal" style={{ marginBottom: 52 }}>
          <div className="section-badge" style={{ marginBottom: 20 }}>Merch</div>
          <h2 style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: 'clamp(2.4rem, 5vw, 3.5rem)', lineHeight: 0.92, letterSpacing: '-2px', color: '#fff' }}>
            Wear the sound.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
          {merch.map((m, i) => (
            <div key={m.name} className={`liquid-glass reveal reveal-delay-${i + 1}`} style={{ borderRadius: 18, overflow: 'hidden' }}>
              {/* Product placeholder */}
              <div style={{ height: 240, background: m.color, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 9px)' }} />
                <div style={{ textAlign: 'center', color: 'rgba(255,255,255,0.2)', fontSize: '0.68rem', fontFamily: 'monospace' }}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1.5" style={{ display: 'block', margin: '0 auto 6px' }}><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
                  product shot
                </div>
              </div>
              <div style={{ padding: '16px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontWeight: 500, fontSize: '0.9rem', color: '#fff' }}>{m.name}</div>
                  <div style={{ fontSize: '0.8rem', color: 'var(--accent)', marginTop: 2 }}>{m.price}</div>
                </div>
                <button className="btn-accent" style={{ padding: '7px 16px', fontSize: '0.78rem' }}>Buy</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Press ─────────────────────────────────────────────────────
const pressQuotes = [
  { quote: "A sonic landscape that refuses to be categorized. FonDeW is the sound of tomorrow.", source: "Pitchfork" },
  { quote: "Breathtaking. Devastating. Essential listening.", source: "NME" },
  { quote: "Indie Fusion's most compelling new voice.", source: "The Guardian" },
];

function Press() {
  const ref = useReveal();
  return (
    <section id="press" style={{ padding: '100px 24px', background: '#000' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div ref={ref} className="reveal" style={{ marginBottom: 52, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20 }}>
          <div>
            <div className="section-badge" style={{ marginBottom: 20 }}>Press</div>
            <h2 style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: 'clamp(2.4rem, 5vw, 3.5rem)', lineHeight: 0.92, letterSpacing: '-2px', color: '#fff' }}>
              What they're saying.
            </h2>
          </div>
          <button className="btn-accent" style={{ padding: '10px 22px', fontSize: '0.85rem' }}>
            Download Press Kit
          </button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {pressQuotes.map((p, i) => (
            <div key={i} className={`liquid-glass reveal reveal-delay-${i + 1}`} style={{ borderRadius: 16, padding: '28px 32px', display: 'flex', gap: 28, alignItems: 'flex-start' }}>
              <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: '3rem', color: 'var(--accent)', lineHeight: 0.7, marginTop: 4, opacity: 0.6 }}>"</div>
              <div>
                <p style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: '1.2rem', color: 'rgba(255,255,255,0.85)', lineHeight: 1.5, marginBottom: 12 }}>
                  {p.quote}
                </p>
                <span style={{ fontSize: '0.78rem', fontWeight: 500, color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>— {p.source}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Contact ───────────────────────────────────────────────────
function Contact() {
  const ref = useReveal();
  const [form, setForm] = useState({ name: '', email: '', type: 'booking', message: '' });
  const [sent, setSent] = useState(false);
  const handleSubmit = e => {
    e.preventDefault();
    fetch('https://formspree.io/f/mvzdvgoq', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({ name: form.name, email: form.email, type: form.type, message: form.message }),
    })
    .then(r => r.ok ? setSent(true) : alert('Something went wrong. Please try again.'))
    .catch(() => alert('Something went wrong. Please try again.'));
  };

  return (
    <section id="contact" style={{ padding: '100px 24px', background: '#000' }}>
      <div style={{ maxWidth: 700, margin: '0 auto' }}>
        <div ref={ref} className="reveal" style={{ marginBottom: 52 }}>
          <div className="section-badge" style={{ marginBottom: 20 }}>Contact</div>
          <h2 style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: 'clamp(2.4rem, 5vw, 3.5rem)', lineHeight: 0.92, letterSpacing: '-2px', color: '#fff', marginBottom: 12 }}>
            Let's talk.
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.45)', fontWeight: 300, fontSize: '0.9rem' }}>Booking inquiries, press, licensing, or just to say hi.</p>
        </div>
        {sent ? (
          <div className="liquid-glass reveal revealed" style={{ borderRadius: 20, padding: '48px 32px', textAlign: 'center' }}>
            <div style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: '2rem', color: 'var(--accent)', marginBottom: 12 }}>Message received.</div>
            <p style={{ color: 'rgba(255,255,255,0.5)', fontWeight: 300 }}>We'll be in touch soon.</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="liquid-glass reveal" style={{ borderRadius: 20, padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div>
                <label style={{ display: 'block', fontSize: '0.75rem', color: 'rgba(255,255,255,0.4)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Name</label>
                <input className="glass-input" type="text" placeholder="Your name" required value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
              </div>
              <div>
                <label style={{ display: 'block', fontSize: '0.75rem', color: 'rgba(255,255,255,0.4)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Email</label>
                <input className="glass-input" type="email" placeholder="your@email.com" required value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
              </div>
            </div>
            <div>
              <label style={{ display: 'block', fontSize: '0.75rem', color: 'rgba(255,255,255,0.4)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Inquiry Type</label>
              <select className="glass-input" value={form.type} onChange={e => setForm({...form, type: e.target.value})} style={{ cursor: 'pointer' }}>
                <option value="booking">Booking / Shows</option>
                <option value="press">Press & Media</option>
                <option value="licensing">Sync & Licensing</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div>
              <label style={{ display: 'block', fontSize: '0.75rem', color: 'rgba(255,255,255,0.4)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Message</label>
              <textarea className="glass-input" placeholder="Tell us what you have in mind..." required value={form.message} onChange={e => setForm({...form, message: e.target.value})} />
            </div>
            <button type="submit" className="btn-accent" style={{ alignSelf: 'flex-start', padding: '11px 28px' }}>Send Message <IconArrow /></button>
          </form>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Videos, Gallery, Merch, Press, Contact });