/* K-Lab Discovery 001 — event landing page components */
const { useState, useEffect } = React;

// ============================================================
// EventHeader — sticky top mono ticker + nav
// ============================================================
const EventHeader = ({ active = 'discovery' }) => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 50,
    background: '#000', borderBottom: '1px solid var(--line)',
    backdropFilter: 'blur(20px)',
  }}>
    <div style={{
      borderBottom: '1px solid var(--neon-magenta)',
      overflow: 'hidden', height: 28, display: 'flex', alignItems: 'center',
    }}>
      <div className="anim-marquee t-mono" style={{
        whiteSpace: 'nowrap', color: 'var(--neon-magenta)',
        fontSize: 11, letterSpacing: '0.08em',
      }}>
        K-LAB ↗ DISCOVERY 001 ↗ EDC WEEK ↗ 5.16 → 5.20 ↗ K-WAYS CAR LOUNGE ↗ 3303 S JONES BLVD ↗ 21+ ↗ K-LAB ↗ DISCOVERY 001 ↗ EDC WEEK ↗ 5.16 → 5.20 ↗ K-WAYS CAR LOUNGE ↗ 3303 S JONES BLVD ↗ 21+ ↗
      </div>
    </div>
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '14px 32px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <KLabStamp size={36} />
        <div className="t-d4" style={{ fontSize: 22, lineHeight: 1 }}>K-LAB</div>
      </div>
      <nav style={{ display: 'flex', gap: 28 }}>
        {['lineup', 'nights', 'venue', 'rsvp'].map(k => (
          <a key={k} href={`#${k}`} className="t-mono"
            style={{
              color: active === k ? 'var(--neon-magenta)' : 'var(--fg-2)',
              textDecoration: 'none', cursor: 'pointer',
            }}>
            // {k.toUpperCase()}
          </a>
        ))}
      </nav>
      <a href="#rsvp" style={{
        background: 'var(--neon-magenta)', color: '#000',
        padding: '10px 22px', borderRadius: 999,
        fontFamily: 'var(--font-body)', fontWeight: 700,
        textTransform: 'uppercase', letterSpacing: '0.04em',
        fontSize: 13, textDecoration: 'none', display: 'inline-flex', gap: 6,
      }}>
        RSVP →
      </a>
    </div>
  </header>
);

// ============================================================
// Hero — full-bleed rings, huge type, kanji subtitle
// ============================================================
const Hero = () => (
  <section style={{ position: 'relative', minHeight: '92vh', overflow: 'hidden', borderBottom: '1px solid var(--neon-magenta)' }}>
    <RingBg />
    <div className="bg-scanlines" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
    {/* Side rails */}
    <div style={{ position: 'absolute', top: 60, left: 24, transform: 'rotate(-90deg)', transformOrigin: 'left top' }}>
      <div className="t-mono" style={{ color: 'var(--fg-3)', whiteSpace: 'nowrap' }}>[K-LAB / EVENTS / DISCOVERY / 001]</div>
    </div>
    <div style={{ position: 'absolute', top: 60, right: 24, transform: 'rotate(90deg)', transformOrigin: 'right top' }}>
      <div className="t-mono" style={{ color: 'var(--neon-cyan)', whiteSpace: 'nowrap' }}>EDC WEEK ↗ 5.16 → 5.20</div>
    </div>

    {/* The hero stack */}
    <div style={{
      position: 'relative', zIndex: 2, textAlign: 'center',
      paddingTop: 'min(14vh, 140px)', paddingLeft: 60, paddingRight: 60,
    }}>
      <div className="t-tech anim-flicker" style={{ fontSize: 'clamp(14px, 2vw, 22px)', color: 'var(--neon-cyan)', marginBottom: 24 }}>
        ▲ ANNOUNCED · 4.28.26
      </div>

      <div style={{ lineHeight: 0.86 }}>
        <div className="t-hero" style={{ fontSize: 'clamp(64px, 14vw, 220px)' }}>
          <span className="fx-aberration-strong">K-LAB</span>
        </div>
        <div className="t-outline" style={{ fontSize: 'clamp(56px, 11vw, 180px)', color: '#fff', marginTop: 8 }}>
          DISCOVERY
        </div>
      </div>

      <div className="t-jp" style={{ fontSize: 'clamp(18px, 2vw, 28px)', color: 'var(--neon-magenta)', marginTop: 28, letterSpacing: '0.24em' }}>
        サウンド・エクスペリメント
      </div>

      <div style={{ marginTop: 48, display: 'flex', justifyContent: 'center', gap: 56, flexWrap: 'wrap' }}>
        <div>
          <div className="t-mono-sm" style={{ color: 'var(--fg-3)' }}>WHEN</div>
          <div className="t-d4" style={{ fontSize: 32, lineHeight: 1.05, marginTop: 4 }}>5.16 → 5.20.26</div>
          <div className="t-mono" style={{ color: 'var(--fg-2)', marginTop: 4 }}>FIVE NIGHTS · 10PM → 4AM</div>
        </div>
        <div style={{ width: 1, background: 'var(--line)' }} />
        <div>
          <div className="t-mono-sm" style={{ color: 'var(--fg-3)' }}>WHERE</div>
          <div className="t-d4" style={{ fontSize: 32, lineHeight: 1.05, marginTop: 4 }}>K-WAYS CAR LOUNGE</div>
          <div className="t-mono" style={{ color: 'var(--fg-2)', marginTop: 4 }}>3303 S JONES BLVD · LAS VEGAS · 21+</div>
        </div>
      </div>

      <div style={{ marginTop: 64 }}>
        <a href="#rsvp" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          background: 'var(--neon-magenta)', color: '#000',
          padding: '20px 44px', borderRadius: 999,
          fontFamily: 'var(--font-body)', fontWeight: 700,
          textTransform: 'uppercase', letterSpacing: '0.06em',
          fontSize: 18, textDecoration: 'none', boxShadow: 'var(--glow-magenta)',
        }}>RSVP THE WEEK →</a>
      </div>
    </div>
  </section>
);

// ============================================================
// Lineup — five nights grid
// ============================================================
const NIGHTS = [
  { n: '01', day: 'THU', date: '5.16', sub: 'OPENING', headliner: 'FINAL DRIVE!', supports: ['HALO BLOOM'], color: 'var(--neon-magenta)' },
  { n: '02', day: 'FRI', date: '5.17', sub: 'TECHNO',  headliner: 'NOKTURNL',     supports: ['ENGINE\\BLOC', 'KAI·808'], color: 'var(--neon-cyan)' },
  { n: '03', day: 'SAT', date: '5.18', sub: 'BASS',    headliner: 'REDLINE\nKINGS', supports: ['DJ MIRAGE', 'KOSMODROM'], color: 'var(--neon-pink)' },
  { n: '04', day: 'SUN', date: '5.19', sub: 'AFTER',   headliner: 'HOUSE OF FIVE', supports: ['VOLT THIEF', 'NIGHTCREW'], color: 'var(--neon-green)' },
  { n: '05', day: 'MON', date: '5.20', sub: 'CLOSE',   headliner: 'K-WAY\n(B2B)', supports: ['INVITE TBA'], color: 'var(--neon-magenta)' },
];

const NightCard = ({ night }) => (
  <article style={{
    background: 'var(--bg-elev)', border: '1px solid var(--line)',
    padding: 24, display: 'flex', flexDirection: 'column', gap: 14,
    position: 'relative', overflow: 'hidden',
    transition: 'all var(--d-short) var(--ease-stiff)', cursor: 'pointer',
  }}
  onMouseEnter={(e) => { e.currentTarget.style.borderColor = night.color; e.currentTarget.style.boxShadow = `0 0 24px ${night.color}55`; }}
  onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.boxShadow = 'none'; }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
      <div>
        <div className="t-mono" style={{ color: night.color }}>NIGHT {night.n}</div>
        <div className="t-d4" style={{ fontSize: 28, marginTop: 4 }}>{night.day} · {night.date}</div>
      </div>
      <div className="t-tech" style={{ color: night.color, fontSize: 12 }}>{night.sub}</div>
    </div>
    <div style={{ height: 1, background: 'var(--line)' }} />
    <div>
      <div className="t-mono-sm" style={{ color: 'var(--fg-3)' }}>HEADLINER</div>
      <div className="t-d3" style={{ fontSize: 36, lineHeight: 0.95, marginTop: 4, whiteSpace: 'pre-line' }}>{night.headliner}</div>
    </div>
    <div>
      <div className="t-mono-sm" style={{ color: 'var(--fg-3)' }}>+ SUPPORT</div>
      <div className="t-body" style={{ color: 'var(--fg-2)', marginTop: 4 }}>
        {night.supports.join(' · ')}
      </div>
    </div>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
      <div className="t-mono-sm" style={{ color: 'var(--fg-3)' }}>10PM–4AM · 21+</div>
      <div className="t-mono" style={{ color: night.color }}>RSVP →</div>
    </div>
  </article>
);

const Lineup = () => (
  <section id="lineup" style={{ padding: '96px 32px', background: '#000' }}>
    <div style={{ maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 48 }}>
        <div className="t-mono" style={{ color: 'var(--neon-magenta)' }}>// LINEUP</div>
        <div style={{ flex: 1, height: 1, background: 'var(--neon-magenta)' }} />
        <div className="t-mono" style={{ color: 'var(--fg-3)' }}>[05 NIGHTS]</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, gap: 48, flexWrap: 'wrap' }}>
        <div className="t-d2" style={{ fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.95 }}>
          FIVE NIGHTS<br /><span style={{ color: 'var(--neon-magenta)' }}>ZERO SLEEP</span>
        </div>
        <div className="t-body" style={{ maxWidth: 420, color: 'var(--fg-2)' }}>
          Five back-to-back nights of resident sets, breakout B2Bs, and surprise drop-ins from the broader K-Lab orbit. Every night ends at 4AM. Bring water, bring your boys.
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
        {NIGHTS.map(n => <NightCard key={n.n} night={n} />)}
      </div>
    </div>
  </section>
);

// ============================================================
// Venue panel
// ============================================================
const Venue = () => (
  <section id="venue" style={{ padding: '96px 32px', background: 'var(--bg-elev)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
    <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(280px, 1fr) minmax(320px, 1.4fr)', gap: 64, alignItems: 'center' }}>
      <div>
        <div className="t-mono" style={{ color: 'var(--neon-cyan)', marginBottom: 14 }}>// VENUE</div>
        <div className="t-d2" style={{ fontSize: 'clamp(40px, 6vw, 80px)', lineHeight: 0.95 }}>
          K-WAY'S<br />
          <span style={{
            fontFamily: 'var(--font-speed)', display: 'inline-block',
            transform: 'skewX(-10deg)', color: 'var(--neon-magenta)',
          }}>CAR LOUNGE</span>
        </div>
        <div className="t-jp" style={{ fontSize: 18, color: 'var(--neon-cyan)', marginTop: 18, letterSpacing: '0.2em' }}>
          クイウェイズ カーラウンジ
        </div>
        <div className="t-body" style={{ color: 'var(--fg-2)', marginTop: 24, maxWidth: 480 }}>
          K-Lab's headquarters. Where car culture, hookah, and the city's heaviest underground sets share the same room. Twenty-one and up — every night.
        </div>
        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div className="t-mono"><span style={{ color: 'var(--fg-3)' }}>ADDR </span>3303 S JONES BLVD · LAS VEGAS</div>
          <div className="t-mono"><span style={{ color: 'var(--fg-3)' }}>HOURS</span> NIGHTLY · 21+</div>
          <div className="t-mono"><span style={{ color: 'var(--fg-3)' }}>WEB  </span>KWAYSCARLOUNGE.COM</div>
        </div>
      </div>
      <div style={{
        background: '#000', border: '1px solid var(--line)', aspectRatio: '4/3', position: 'relative',
        overflow: 'hidden',
      }}>
        {/* Map placeholder */}
        <div className="bg-grid" style={{ position: 'absolute', inset: 0 }} />
        <div className="bg-scanlines" style={{ position: 'absolute', inset: 0 }} />
        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 24, height: 24, background: 'var(--neon-magenta)', borderRadius: '50%', boxShadow: 'var(--glow-magenta)',
        }} />
        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 80, height: 80, border: '1.5px solid var(--neon-magenta)', borderRadius: '50%',
        }} className="anim-ripple" />
        <div style={{
          position: 'absolute', top: 16, left: 16, padding: '6px 10px', background: '#000',
          border: '1px solid var(--neon-magenta)',
        }}>
          <div className="t-mono" style={{ color: 'var(--neon-magenta)' }}>● K-WAY'S</div>
        </div>
        <div style={{ position: 'absolute', bottom: 16, right: 16 }}>
          <div className="t-mono-sm" style={{ color: 'var(--fg-3)' }}>[ MAP PLACEHOLDER · 36.105°N, 115.219°W ]</div>
        </div>
      </div>
    </div>
  </section>
);

// ============================================================
// RSVP CTA
// ============================================================
const RsvpCta = () => (
  <section id="rsvp" style={{ position: 'relative', padding: '120px 32px 96px', background: '#000', overflow: 'hidden' }}>
    <RingBg />
    <div className="bg-scanlines" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
    <div style={{ position: 'relative', maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
      <div className="t-mono" style={{ color: 'var(--neon-cyan)' }}>// RSVP</div>
      <div className="t-d1" style={{ fontSize: 'clamp(56px, 9vw, 128px)', lineHeight: 0.92, marginTop: 16 }}>
        <span className="fx-aberration">ON THE LIST</span><br />OR ON THE STREET
      </div>
      <div className="t-body" style={{ color: 'var(--fg-2)', marginTop: 24, maxWidth: 620, marginLeft: 'auto', marginRight: 'auto' }}>
        RSVP is free but capped per night. List closes at 9PM the day-of. After that, it's first come, first in.
      </div>
      <form style={{
        marginTop: 40, display: 'flex', gap: 0, maxWidth: 560, margin: '40px auto 0',
        border: '1px solid var(--neon-magenta)', background: '#000',
      }} onSubmit={(e) => { e.preventDefault(); alert("On the list. We'll see you at K-Way's."); }}>
        <input
          placeholder="YOU@EXAMPLE.COM"
          style={{
            flex: 1, background: 'transparent', border: 0, color: '#fff',
            fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '0.06em',
            padding: '18px 20px', outline: 0, textTransform: 'uppercase',
          }} />
        <select style={{
          background: 'transparent', border: 0, borderLeft: '1px solid var(--neon-magenta)',
          color: 'var(--fg)', fontFamily: 'var(--font-mono)', fontSize: 12,
          padding: '0 16px', outline: 0, letterSpacing: '0.08em',
          textTransform: 'uppercase',
        }}>
          <option style={{background:'#000'}}>5.16</option>
          <option style={{background:'#000'}}>5.17</option>
          <option style={{background:'#000'}}>5.18</option>
          <option style={{background:'#000'}}>5.19</option>
          <option style={{background:'#000'}}>5.20</option>
          <option style={{background:'#000'}}>ALL FIVE</option>
        </select>
        <button type="submit" style={{
          background: 'var(--neon-magenta)', color: '#000', border: 0,
          fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14,
          letterSpacing: '0.06em', textTransform: 'uppercase',
          padding: '0 28px', cursor: 'pointer',
        }}>RSVP →</button>
      </form>
      <div className="t-mono-sm" style={{ color: 'var(--fg-3)', marginTop: 20 }}>
        21+ ONLY · ID AT DOOR · NO RE-ENTRY AFTER 1AM
      </div>
    </div>
  </section>
);

// ============================================================
// Footer
// ============================================================
const Footer = () => (
  <footer style={{ background: '#000', borderTop: '1px solid var(--line)', padding: '48px 32px' }}>
    <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
      <div>
        <KLabStamp size={48} />
        <div className="t-d4" style={{ fontSize: 24, lineHeight: 1, marginTop: 12 }}>K-LAB</div>
        <div className="t-jp" style={{ fontSize: 14, color: 'var(--fg-3)', marginTop: 6, letterSpacing: '0.2em' }}>
          サウンド・エクスペリメント
        </div>
      </div>
      <div>
        <div className="t-mono" style={{ color: 'var(--neon-magenta)', marginBottom: 12 }}>// FOLLOW</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <a className="t-mono" style={{ color: 'var(--fg)', textDecoration: 'none' }} href="#">@K-LAB.LV ↗</a>
          <a className="t-mono" style={{ color: 'var(--fg)', textDecoration: 'none' }} href="#">@KWAYSCARLOUNGE ↗</a>
          <a className="t-mono" style={{ color: 'var(--fg)', textDecoration: 'none' }} href="#">SOUNDCLOUD / FINAL DRIVE! ↗</a>
          <a className="t-mono" style={{ color: 'var(--fg)', textDecoration: 'none' }} href="#">SPOTIFY / FINAL DRIVE! ↗</a>
        </div>
      </div>
      <div>
        <div className="t-mono" style={{ color: 'var(--neon-magenta)', marginBottom: 12 }}>// VENUE</div>
        <div className="t-body" style={{ color: 'var(--fg-2)' }}>
          K-Way's Car Lounge<br />
          3303 S Jones Blvd<br />
          Las Vegas, NV<br />
          21+
        </div>
      </div>
    </div>
    <div style={{ maxWidth: 1400, margin: '48px auto 0', borderTop: '1px solid var(--line)', paddingTop: 18, display: 'flex', justifyContent: 'space-between' }}>
      <div className="t-mono-sm" style={{ color: 'var(--fg-3)' }}>© K-LAB · 2026 · ALL NIGHTS RESERVED</div>
      <div className="t-mono-sm" style={{ color: 'var(--fg-3)' }}>BUILT IN LAS VEGAS ↗</div>
    </div>
  </footer>
);

window.EventHeader = EventHeader;
window.Hero = Hero;
window.Lineup = Lineup;
window.Venue = Venue;
window.RsvpCta = RsvpCta;
window.Footer = Footer;