/* Social flyer kit — variations */
const { useState, useEffect, useRef } = React;

// ============================================================
// SHARED PRIMITIVES
// ============================================================

const KLabStamp = ({ size = 32, color = 'var(--neon-magenta)', glow = true }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', filter: glow ? `drop-shadow(0 0 6px ${color})` : 'none' }}>
    <ellipse cx="50" cy="50" rx="38" ry="28" fill="none" stroke={color} strokeWidth="2.2" />
    <ellipse cx="50" cy="50" rx="38" ry="14" fill="none" stroke={color} strokeWidth="2.2" />
    <line x1="50" y1="22" x2="50" y2="78" stroke={color} strokeWidth="2.2" />
    <path d="M12 50 Q50 30 88 50" fill="none" stroke={color} strokeWidth="2.2" />
    <path d="M12 50 Q50 70 88 50" fill="none" stroke={color} strokeWidth="2.2" />
  </svg>
);

const Ticker = ({ items, color = 'var(--neon-magenta)', dur = 30 }) => {
  const text = items.join(' ↗ ') + ' ↗ ';
  return (
    <div style={{
      borderTop: `1px solid ${color}`, borderBottom: `1px solid ${color}`,
      overflow: 'hidden', height: 28, display: 'flex', alignItems: 'center',
    }}>
      <div className="anim-marquee" style={{
        whiteSpace: 'nowrap', fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.08em', textTransform: 'uppercase', color,
        animationDuration: `${dur}s`,
      }}>
        {(text + text + text + text).repeat(2)}
      </div>
    </div>
  );
};

const RingBg = () => (
  <div style={{
    position: 'absolute', inset: 0,
    background: `
      radial-gradient(circle at 50% 50%,
        transparent 0%, transparent 6%,
        var(--neon-magenta) 6.5%, var(--neon-magenta) 7%,
        transparent 7.5%, transparent 13%,
        var(--neon-magenta-deep) 13.5%, var(--neon-magenta-deep) 16%,
        transparent 16.5%, transparent 24%,
        var(--neon-magenta-deep) 24.5%, var(--neon-magenta-deep) 28%,
        transparent 28.5%, transparent 38%,
        var(--neon-magenta-deep) 38.5%, var(--neon-magenta-deep) 44%,
        transparent 44.5%, transparent 56%,
        var(--neon-magenta-deep) 56.5%, var(--neon-magenta-deep) 64%,
        transparent 64.5%
      ),
      radial-gradient(circle at 50% 50%, rgba(162,0,214,0.5) 0%, transparent 70%),
      #000`,
  }} />
);

// ============================================================
// FLYER VARIATION A — 1080×1350 PORTRAIT · "RINGS HERO"
// Concentric rings + huge wordmark + dense info block
// ============================================================

const FlyerA = () => (
  <div style={{
    width: 1080, height: 1350, background: '#000', position: 'relative',
    overflow: 'hidden', fontFamily: 'var(--font-body)', color: '#fff',
  }}>
    <RingBg />
    <div className="bg-scanlines" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />

    {/* Top mono rail */}
    <div style={{ position: 'absolute', top: 36, left: 48, right: 48, display: 'flex', justifyContent: 'space-between' }}>
      <div className="t-mono" style={{ color: 'var(--neon-magenta)' }}>// PRESENTED BY K-LAB</div>
      <div className="t-mono" style={{ color: 'var(--fg-2)' }}>[001] · EDC WEEK</div>
    </div>

    {/* Hero wordmark */}
    <div style={{ position: 'absolute', top: 200, left: 48, right: 48, textAlign: 'center' }}>
      <div className="t-d1 fx-aberration" style={{ fontSize: 220, lineHeight: 0.88 }}>
        K-LAB
      </div>
      <div className="t-tech" style={{ fontSize: 64, marginTop: 8, color: '#fff', letterSpacing: '0.18em' }}>
        DISCOVERY
      </div>
      <div className="t-jp" style={{ fontSize: 28, marginTop: 18, color: 'var(--neon-cyan)' }}>
        サウンド・エクスペリメント
      </div>
    </div>

    {/* Lineup block */}
    <div style={{ position: 'absolute', top: 720, left: 48, right: 48 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
        <div className="t-mono" style={{ color: 'var(--neon-magenta)', fontSize: 14 }}>// LINEUP</div>
        <div style={{ flex: 1, height: 1, background: 'var(--neon-magenta)' }} />
      </div>
      <div className="t-d3" style={{ fontSize: 72, lineHeight: 0.95, color: '#fff' }}>
        FINAL DRIVE!
      </div>
      <div className="t-d4" style={{ fontSize: 40, lineHeight: 1.1, color: 'var(--fg-2)' }}>
        HALO BLOOM · NOKTURNL<br />
        ENGINE\\BLOC · KAI&middot;808
      </div>
    </div>

    {/* Bottom info block */}
    <div style={{ position: 'absolute', bottom: 72, left: 48, right: 48 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '1px solid var(--line-strong)', paddingTop: 18 }}>
        <div>
          <div className="t-mono" style={{ color: 'var(--neon-green)', fontSize: 14, marginBottom: 6 }}>● FRI · 5.17.26 · 10PM</div>
          <div className="t-h2" style={{ color: '#fff' }}>K-WAY'S CAR LOUNGE</div>
          <div className="t-mono" style={{ color: 'var(--fg-2)', marginTop: 4 }}>3303 S JONES BLVD · LAS VEGAS · 21+</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <KLabStamp size={68} />
          <div className="t-mono" style={{ color: 'var(--fg-2)', fontSize: 14, marginTop: 6 }}>RSVP →</div>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// FLYER VARIATION B — 1080×1350 PORTRAIT · "TUNER STENCIL"
// Halftone photo zone + K-WAYS italic banner + chrome accents
// ============================================================

const FlyerB = () => (
  <div style={{
    width: 1080, height: 1350, background: '#000', position: 'relative',
    overflow: 'hidden', fontFamily: 'var(--font-body)', color: '#fff',
  }}>
    {/* Halftone band — photo placeholder zone */}
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, height: 720,
      background: 'linear-gradient(180deg, rgba(0,231,255,0.15) 0%, transparent 70%), #0a0a10',
    }}>
      <div className="bg-halftone" style={{ position: 'absolute', inset: 0, opacity: 0.6, mixBlendMode: 'screen' }} />
      <div className="bg-scanlines" style={{ position: 'absolute', inset: 0 }} />
      {/* Photo placeholder */}
      <div style={{ position: 'absolute', inset: 60, border: '1px dashed var(--line-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div className="t-mono" style={{ color: 'var(--fg-3)' }}>[ B&W PHOTO · DJ AT THE DECKS · HALFTONE OVERLAY ]</div>
      </div>
      {/* Mono rail */}
      <div style={{ position: 'absolute', top: 36, left: 48, right: 48, display: 'flex', justifyContent: 'space-between' }}>
        <div className="t-mono" style={{ color: 'var(--neon-cyan)' }}>// K-LAB × K-WAYS</div>
        <div className="t-mono" style={{ color: 'var(--neon-cyan)' }}>NIGHT 02 / 05</div>
      </div>
    </div>

    {/* K-WAYS italic banner — diagonal */}
    <div style={{
      position: 'absolute', top: 640, left: -40, right: -40, height: 160,
      background: 'var(--neon-magenta)', transform: 'rotate(-3deg)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden',
      boxShadow: 'var(--glow-magenta)',
    }}>
      <div className="t-speed" style={{ fontSize: 140, color: '#000', lineHeight: 1, whiteSpace: 'nowrap' }}>
        K-WAYS &nbsp;//&nbsp; K-WAYS &nbsp;//&nbsp; K-WAYS
      </div>
    </div>

    {/* Subtitle + lineup */}
    <div style={{ position: 'absolute', top: 880, left: 48, right: 48 }}>
      <div className="t-d2 fx-glow-magenta" style={{ fontSize: 88, lineHeight: 0.95 }}>
        REDLINE<br />NIGHTS
      </div>
      <div className="t-tech" style={{ fontSize: 22, marginTop: 14, color: 'var(--neon-cyan)' }}>
        BASS · TECHNO · BUILT VEGAS
      </div>
    </div>

    {/* Footer */}
    <div style={{ position: 'absolute', bottom: 48, left: 48, right: 48 }}>
      <div style={{ borderTop: '1px solid var(--line-strong)', paddingTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <div className="t-mono" style={{ color: 'var(--neon-green)', marginBottom: 4 }}>● 5.18.26 · 11PM–4AM</div>
          <div className="t-mono" style={{ color: 'var(--fg-2)' }}>3303 S JONES BLVD · 21+</div>
        </div>
        <div className="t-mono" style={{ color: 'var(--neon-magenta)', textAlign: 'right' }}>
          KWAYSCARLOUNGE.COM<br />
          @KLAB.LV
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// FLYER VARIATION C — 1080×1080 SQUARE · "GLITCH ANNOUNCE"
// Heavy glitched headline + ticker rails top & bottom
// ============================================================

const FlyerC = () => (
  <div style={{
    width: 1080, height: 1080, background: '#000', position: 'relative',
    overflow: 'hidden', fontFamily: 'var(--font-body)', color: '#fff',
  }}>
    <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.6 }} />
    <div className="bg-scanlines" style={{ position: 'absolute', inset: 0 }} />

    {/* Top ticker */}
    <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}>
      <Ticker items={['NEW RELEASE', 'FINAL DRIVE!', 'REDLINE', 'OUT NOW', 'SPOTIFY', 'SOUNDCLOUD']} dur={24} />
    </div>

    {/* Section marker + label */}
    <div style={{ position: 'absolute', top: 90, left: 48, right: 48, display: 'flex', justifyContent: 'space-between' }}>
      <div className="t-mono" style={{ color: 'var(--neon-cyan)' }}>// NEW · 5.10.26</div>
      <div className="t-mono" style={{ color: 'var(--fg-3)' }}>[K-LAB / RELEASES / 014]</div>
    </div>

    {/* The glitched headline */}
    <div style={{ position: 'absolute', top: 220, left: 48, right: 48 }}>
      <div className="t-mono-sm" style={{ color: 'var(--fg-3)', marginBottom: 12 }}>FINAL DRIVE! · TRACK 014</div>
      <div style={{ position: 'relative' }}>
        <div className="t-d1 fx-aberration-strong" style={{ fontSize: 240, lineHeight: 0.86, letterSpacing: '-0.04em' }}>
          REDLINE
        </div>
      </div>
      <div className="t-tech anim-flicker" style={{ fontSize: 32, marginTop: 14, color: 'var(--neon-magenta)' }}>
        128 BPM · 7:18 · TECHNO
      </div>
    </div>

    {/* Play strip */}
    <div style={{ position: 'absolute', bottom: 130, left: 48, right: 48,
        background: 'var(--bg-elev)', border: '1px solid var(--neon-magenta)',
        boxShadow: 'var(--glow-magenta-sm)', padding: 20,
        display: 'flex', alignItems: 'center', gap: 18,
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: '50%',
        background: 'var(--neon-magenta)', display: 'flex',
        alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--glow-magenta-sm)',
      }}>
        <div style={{
          width: 0, height: 0, borderTop: '12px solid transparent',
          borderBottom: '12px solid transparent', borderLeft: '18px solid #000', marginLeft: 4,
        }} />
      </div>
      <div style={{ flex: 1 }}>
        <div className="t-h3">FINAL DRIVE! — REDLINE</div>
        <div className="t-mono" style={{ color: 'var(--fg-2)', marginTop: 2 }}>K-LAB / SINGLE · 5.10.26</div>
      </div>
      <div className="t-mono" style={{ color: 'var(--neon-cyan)', textAlign: 'right' }}>
        ▲ NEW<br />
        OUT NOW →
      </div>
    </div>

    {/* Bottom ticker */}
    <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}>
      <Ticker items={['STREAM', 'FOLLOW', 'K-LAB.LV', 'FINALDRIVE.MUSIC', 'K-WAYS CAR LOUNGE']} color="var(--neon-cyan)" dur={20} />
    </div>
  </div>
);

// ============================================================
// SQUARE — 1080×1080 · "LINEUP DROP"
// ============================================================

const FlyerD = () => (
  <div style={{
    width: 1080, height: 1080, background: '#000', position: 'relative',
    overflow: 'hidden', fontFamily: 'var(--font-body)', color: '#fff',
  }}>
    <RingBg />

    <div style={{ position: 'absolute', top: 36, left: 48, right: 48, display: 'flex', justifyContent: 'space-between' }}>
      <div className="t-mono" style={{ color: 'var(--neon-magenta)' }}>// LINEUP DROP</div>
      <KLabStamp size={28} />
    </div>

    <div style={{ position: 'absolute', top: 120, left: 48, right: 48, textAlign: 'center' }}>
      <div className="t-tech" style={{ fontSize: 28, color: 'var(--neon-cyan)' }}>K-LAB DISCOVERY 001</div>
      <div className="t-d1" style={{ fontSize: 130, lineHeight: 0.95, marginTop: 8 }}>
        <span className="fx-aberration">FIVE NIGHTS</span>
      </div>
      <div className="t-d4" style={{ fontSize: 40, marginTop: 14, color: 'var(--fg-2)' }}>5.16 → 5.20 · EDC WEEK</div>
    </div>

    <div style={{ position: 'absolute', top: 440, left: 48, right: 48,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
      {[
        { n: '01', d: '5.16 THU', a: 'FINAL DRIVE!' },
        { n: '02', d: '5.17 FRI', a: 'HALO BLOOM' },
        { n: '03', d: '5.18 SAT', a: 'NOKTURNL' },
        { n: '04', d: '5.19 SUN', a: 'ENGINE\\BLOC' },
      ].map(item => (
        <div key={item.n} style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', padding: 18 }}>
          <div className="t-mono" style={{ color: 'var(--neon-magenta)' }}>{item.n} · {item.d}</div>
          <div className="t-h2" style={{ marginTop: 6 }}>{item.a}</div>
        </div>
      ))}
    </div>

    <div style={{ position: 'absolute', bottom: 36, left: 48, right: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
      <div className="t-mono" style={{ color: 'var(--fg-2)' }}>K-WAY'S CAR LOUNGE<br />3303 S JONES BLVD · 21+</div>
      <div className="t-mono" style={{ color: 'var(--neon-magenta)', textAlign: 'right', fontSize: 14 }}>RSVP →<br /><span style={{ color: 'var(--fg-3)' }}>K-LAB.LV/DISCOVERY</span></div>
    </div>
  </div>
);

window.FlyerA = FlyerA;
window.FlyerB = FlyerB;
window.FlyerC = FlyerC;
window.FlyerD = FlyerD;
window.KLabStamp = KLabStamp;
window.Ticker = Ticker;
window.RingBg = RingBg;