/* global React, Hedgehog, SectionHead */
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

// rAF-based smooth scroll. Native scrollTo({behavior:'smooth'}) is a no-op when
// the site is embedded in the in-app mobile-browser iframe, so all in-page jump
// nav (topbar + media section jumps) would silently fail. This works anywhere.
window.smoothScrollTo = function smoothScrollTo(targetY) {
  const startY = window.scrollY;
  const maxY = document.documentElement.scrollHeight - window.innerHeight;
  const dest = Math.max(0, Math.min(targetY, maxY));
  const dist = dest - startY;
  if (Math.abs(dist) < 2) return;
  const dur = Math.min(900, Math.max(280, Math.abs(dist) * 0.45));
  const t0 = performance.now();
  function step(now) {
    const p = Math.min(1, (now - t0) / dur);
    const e = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
    window.scrollTo(0, startY + dist * e);
    if (p < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
};
const smoothScrollTo = window.smoothScrollTo;

// Consent-Hook: reagiert auf Cookie-Banner Entscheidung
function useConsent(category) {
  const [granted, setGranted] = useStateP(function() {
    return window.kwConsent ? window.kwConsent.has(category) : false;
  });
  useEffectP(function() {
    function handler(e) { setGranted(!!e.detail[category]); }
    document.addEventListener('kwConsentUpdate', handler);
    return function() { document.removeEventListener('kwConsentUpdate', handler); };
  }, [category]);
  return granted;
}

// SoundCloud Preview-Karte ohne Consent (rein lokal, kein externer Request)
function ScConsentCard({ scHandle, onAllow }) {
  const bars = [30,55,40,75,50,90,35,65,45,80,60,85,40,70,30,55,45,80,50,90,35,65];
  return (
    <div style={{
      position:'relative', width:'100%', height:200,
      background:'#111', borderRadius:8, overflow:'hidden',
      display:'flex', flexDirection:'column', alignItems:'center',
      justifyContent:'center', gap:14, cursor:'pointer'
    }} onClick={onAllow}>
      <div style={{
        position:'absolute', bottom:0, left:0, right:0, height:'55%',
        display:'flex', alignItems:'flex-end', gap:3, padding:'0 20px', opacity:0.18
      }}>
        {bars.map((h, i) => (
          <div key={i} style={{flex:1, height:`${h}%`, background:'#ff5500', borderRadius:'2px 2px 0 0'}} />
        ))}
      </div>
      <div style={{position:'relative',zIndex:1,textAlign:'center'}}>
        <div style={{fontSize:15,fontWeight:700,letterSpacing:'.06em',color:'#ff5500',marginBottom:4,textTransform:'uppercase'}}>
          SoundCloud
        </div>
        <div style={{fontSize:12,color:'#666',marginBottom:18}}>@{scHandle} · Mixes &amp; Sets</div>
        <button style={{
          background:'#ff5500', color:'#fff', border:'none',
          borderRadius:20, padding:'9px 22px', fontSize:13, fontWeight:600,
          cursor:'pointer', display:'inline-flex', alignItems:'center', gap:8
        }}>
          ▶ SoundCloud aktivieren
        </button>
        <div style={{marginTop:10,fontSize:11,color:'#555'}}>Externe Medien erlauben</div>
      </div>
    </div>
  );
}

// Fallback-Venues falls Settings-API nicht erreichbar
const VENUES_FALLBACK = [
  'Great Wall of China — Afterhour Rave, YinYang Music Festival',
  'The Mansion, Shanghai', 'Arena, Berlin', 'Subsonic Club, Groningen NL',
  'Ritter Butzke, Berlin', 'Elipamanoke, Leipzig', 'Bullitclub, München',
  'Pimpernel, München', 'Tante Erna, München',
  'Sputnik Springbreak Festival (Mainstage), Leipzig',
  'Else Garden, Berlin', 'Watergate, Berlin', 'Bootshaus, Cologne',
  'Musikraum, Cologne', 'u.v.m.',
];

function PlayedMarquee({ venues }) {
  const list = venues && venues.length ? venues : VENUES_FALLBACK;
  const items = [];
  for (let dup = 0; dup < 2; dup++) {
    items.push(
      <span key={`lead-${dup}`} className="marquee__lead">PLAYED @<span className="dot"></span></span>
    );
    list.forEach((v, i) => {
      items.push(
        <span key={`v-${dup}-${i}`} className="marquee__item">{v}<span className="dot"></span></span>
      );
    });
  }
  return (
    <div className="marquee">
      <div className="marquee__track">{items}</div>
    </div>
  );
}

function PageHome({ setPage }) {
  const [venues, setVenues] = useStateP([]);
  const [tx, setTx] = useStateP({});

  useEffectP(() => {
    fetch('/api/settings.php')
      .then(r => r.json())
      .then(d => {
        if (d.settings) {
          if (Array.isArray(d.settings.venues_marquee)) setVenues(d.settings.venues_marquee);
          setTx(d.settings);
        }
      })
      .catch(() => {});
  }, []);

  return (
    <div className="page-anim">
      <section className="hero" data-screen-label="Home Hero">
        <div className="hero__bg" />
        <Hedgehog src="assets/igel-balloon.png?v=4"
          className="hedgehog--balloon"
          style={{ top: '-2%', right: '4%' }} rot={0} />
        <Hedgehog src="assets/igel-reverse.png?v=5"
          className="hedgehog--med hedgehog--outlined"
          style={{ bottom: '26%', right: '18%' }} rot={4} anim={false} />
        <div className="hero__content">
          <div className="hero__eyebrow">
            <span className="live" />
            {tx.hero_eyebrow || 'Live · Summer Open-Air Series · 2026'}
          </div>
          <h1 className="hero__name">
            Kevin<br/>
            <span className="pink">Weigel</span>
          </h1>
          <div className="hero__tagline">
            {tx.hero_tagline || 'Techno / House / Groove'}
            <span className="hero__based">{tx.hero_location || 'Based in Munich, DE'}</span>
          </div>
          <div className="hero__ctas">
            <button className="btn btn--primary" onClick={() => setPage('shows')}>
              Upcoming Shows →
            </button>
            <button className="btn btn--ghost" onClick={() => setPage('media')}>
              ▶ Listen to mixes
            </button>
          </div>
        </div>
      </section>
      <PlayedMarquee venues={venues} />
    </div>
  );
}

/* =====================================================
   GROOVE
   ===================================================== */
function PageGroove() {
  return (
    <div className="page-anim section section--ink" data-screen-label="Groove">
      <SectionHead num="01 / Sound" title={<>Try the <span style={{color:'var(--pink)'}}>Engine</span></>} meta="Tap pads · play live" />
      <KevinEngine />
    </div>
  );
}

/* =====================================================
   ABOUT
   ===================================================== */
function PageAbout() {
  return (
    <div className="page-anim section section--paper" data-screen-label="About">
      <SectionHead num="02 / Bio" title={<>About <span style={{color:'var(--pink)'}}>Kevin</span></>} meta="Est. 2007" />
      <AboutBody />
    </div>
  );
}

const ABOUT_LEDE_DEFAULT = 'Sets that breathe, build, and break — Kevin Weigel has spent a decade carving a sound that lives somewhere between deep-rooted house and forward-leaning techno.';
const ABOUT_BIO_DEFAULT  = 'Born in Cologne and raised on the warehouse parties of the late 2010s, Kevin found his voice behind the decks at outdoor parties where the trees did the EQ and sunrise did the lights. His signature: long, evolving sets that hover around 124 BPM, lean into hypnotic loops, and reward the dancers who stay the whole night.\n\nUnder the Electronic Evolution banner, he curates a recurring open-air series in the woodlands outside Cologne — small, considered events that prize sound design and a careful crowd over headcount. Past appearances include festival slots across DE/NL/CH, intimate b2b sessions, and a regular residency at Musikraum.';

function AboutBody({ onPage }) {
  const [portrait, setPortrait] = useStateP(null);
  const [tx, setTx] = useStateP({});

  useEffectP(() => {
    fetch('/api/media.php?slot=portrait')
      .then(r => r.json())
      .then(d => { if (d.images && d.images[0]) setPortrait(d.images[0]); })
      .catch(() => {});
    fetch('/api/settings.php')
      .then(r => r.json())
      .then(d => { if (d.settings) setTx(d.settings); })
      .catch(() => {});
  }, []);

  const lede = tx.about_lede || ABOUT_LEDE_DEFAULT;
  const bioParagraphs = (tx.about_bio || ABOUT_BIO_DEFAULT)
    .split('\n\n').filter(p => p.trim());

  return (
    <div className="about-grid">
      <div className="about__portrait">
        {portrait ? (
          <img src={portrait.url} alt={portrait.alt_text || 'Kevin Weigel'} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'inherit'}} />
        ) : (
          <div style={{width:'100%',height:'100%',background:'var(--ink-soft)',borderRadius:'inherit',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--grey)',fontSize:13}}>
            Portrait
          </div>
        )}
      </div>
      <div className="about__copy">
        <p className="about__lede">{lede}</p>
        {bioParagraphs.map((p, i) => <p key={i}>{p}</p>)}
        {onPage && (
          <button className="btn btn--ink" style={{marginTop: 16}} onClick={onPage}>Read more →</button>
        )}
      </div>
    </div>
  );
}

/* =====================================================
   SHOWS
   ===================================================== */
function ShowsList({ rows = [], showStatus }) {
  return (
    <div className="shows-list">
      {rows.map((s, i) => (
        <div key={s.id || i} className="show-row">
          <div className="show-row__date">
            <span className="month">{s.month} {s.year}</span>
            {s.day}
          </div>
          <div className="show-row__venue">
            {s.venue}
            <span className="city">{s.city}</span>
          </div>
          <div className="show-row__meta">{s.event_type}</div>
          <div>
            {showStatus && (
              <span className="show-row__status" data-status={s.status}>
                {s.status === 'available' && 'Tickets available'}
                {s.status === 'limited'   && 'Last tickets'}
                {s.status === 'sold'      && 'Sold out'}
                {s.status === 'past'      && 'Past show'}
              </span>
            )}
          </div>
          <button
            className="show-row__cta"
            disabled={s.status === 'sold' || s.status === 'past'}
            onClick={() => {
              const url = s.status === 'past' ? s.recap_url : s.ticket_url;
              if (url) window.open(url, '_blank', 'noopener');
            }}
          >
            {s.status === 'past' ? 'Recap' : 'Link'}
          </button>
        </div>
      ))}
    </div>
  );
}

function PageShows() {
  const [filter, setFilter] = useStateP('upcoming');
  const [shows, setShows]   = useStateP([]);
  const [loading, setLoading] = useStateP(true);
  const [showStatus, setShowStatus] = useStateP(false);

  useEffectP(() => {
    // Ticket-Status-Einstellung aus API laden
    fetch('/api/settings.php')
      .then(r => r.json())
      .then(d => {
        if (d.settings) setShowStatus(d.settings.show_ticket_status === '1');
      })
      .catch(() => {});
  }, []);

  useEffectP(() => {
    setLoading(true);
    fetch(`/api/shows.php?filter=${filter}`)
      .then(r => r.json())
      .then(d => { setShows(d.shows || []); setLoading(false); })
      .catch(() => setLoading(false));
  }, [filter]);

  const upcomingCount = filter === 'upcoming' ? shows.length : '?';
  const pastCount     = filter === 'past'     ? shows.length : '?';

  return (
    <div className="page-anim section section--ink" data-screen-label="Shows">
      <SectionHead num="04 / Calendar" title={<>Shows & <span style={{color:'var(--pink)'}}>Dates</span></>} meta="" />
      <div className="shows__filter">
        <button data-active={filter === 'upcoming'} onClick={() => setFilter('upcoming')}>
          Upcoming {filter === 'upcoming' ? `(${shows.length})` : ''}
        </button>
        <button data-active={filter === 'past'} onClick={() => setFilter('past')}>
          Past {filter === 'past' ? `(${shows.length})` : ''}
        </button>
      </div>
      {loading ? (
        <div style={{textAlign:'center',padding:'40px',color:'var(--grey)'}}>Lädt…</div>
      ) : shows.length === 0 ? (
        <div style={{textAlign:'center',padding:'40px',color:'var(--grey)'}}>Keine Shows.</div>
      ) : (
        <ShowsList rows={shows} showStatus={showStatus} />
      )}
    </div>
  );
}

/* =====================================================
   MEDIA
   ===================================================== */
function FeaturedPlayer() {
  const [playing, setPlaying] = useStateP(false);
  const [progress, setProgress] = useStateP(32);

  useEffectP(() => {
    if (!playing) return;
    const id = setInterval(() => {
      setProgress(p => p >= 100 ? 0 : p + 0.5);
    }, 500);
    return () => clearInterval(id);
  }, [playing]);

  const total = 64 * 60 + 12;
  const cur = Math.round(total * progress / 100);
  const fmt = s => `${String(Math.floor(s/60)).padStart(2,'0')}:${String(s%60).padStart(2,'0')}`;

  return (
    <div className="media-featured">
      <div className={`media-featured__art ${playing ? 'playing' : ''}`}>
        <img src="assets/mn-circle.png" alt="" />
      </div>
      <div className="media-featured__info">
        <div>
          <div className="media-featured__num">Mix N°042 · Featured</div>
          <h2 className="media-featured__title">Forest<br/>Frequencies</h2>
          <div className="media-featured__sub">Wald.Stage Open-Air · 2026 · 64 min · 124 BPM</div>
        </div>
        <div className={`player ${playing ? 'playing' : ''}`}>
          <button className="player__play" onClick={() => setPlaying(p => !p)} aria-label={playing ? 'Pause' : 'Play'}>
            {playing ? (
              <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
            ) : (
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 5v14l12-7z"/></svg>
            )}
          </button>
          <div className="player__bar">
            <span className="player__time">{fmt(cur)}</span>
            <div className="player__progress" style={{ '--p': `${progress}%` }} onClick={(e) => {
              const r = e.currentTarget.getBoundingClientRect();
              setProgress(((e.clientX - r.left) / r.width) * 100);
            }} />
            <span className="player__time">64:12</span>
          </div>
          <div className="player__waves">
            <span style={{height: playing ? undefined : '30%'}}/>
            <span style={{height: playing ? undefined : '50%'}}/>
            <span style={{height: playing ? undefined : '40%'}}/>
            <span style={{height: playing ? undefined : '60%'}}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function VideoModal({ kind, src, externalUrl, videoUrl, onClose }) {
  useEffectP(() => {
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, []);
  return (
    <div className="video-modal" onClick={onClose}>
      <button className="video-modal__close" onClick={onClose} aria-label="Close">×</button>
      <div className={`video-modal__frame video-modal__frame--${kind}`} onClick={e => e.stopPropagation()}>
        {kind === 'local' ? (
          <video
            src={videoUrl}
            controls
            autoPlay
            playsInline
            style={{width:'100%',height:'100%',objectFit:'contain',background:'#000'}}
          />
        ) : (
          <iframe
            width="100%" height="100%"
            src={src}
            title="Kevin Weigel"
            frameBorder="0"
            scrolling="no"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen
          ></iframe>
        )}
      </div>
      {externalUrl && (
        <a
          className="video-modal__fallback"
          href={externalUrl}
          target="_blank"
          rel="noopener noreferrer"
          onClick={e => e.stopPropagation()}
        >
          {kind === 'yt' ? '↗ Auf YouTube öffnen' : '↗ Auf Instagram öffnen'}
        </a>
      )}
    </div>
  );
}

function IgThumb({ id, consentGranted }) {
  const [failed, setFailed] = useStateP(false);
  const igIcon = (
    <div className="video-card__ig-bg">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <rect x="3" y="3" width="18" height="18" rx="5"/>
        <circle cx="12" cy="12" r="4"/>
        <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/>
      </svg>
    </div>
  );
  if (!consentGranted || failed) return igIcon;
  return (
    <img
      src={`https://www.instagram.com/p/${id}/media/?size=l`}
      alt=""
      loading="lazy"
      referrerPolicy="no-referrer"
      onError={() => setFailed(true)}
    />
  );
}

function VideoGrid() {
  const [videos, setVideos] = useStateP([]);
  const [open, setOpen]     = useStateP(null);
  const consentGranted      = useConsent('externe_medien');

  useEffectP(() => {
    fetch('/api/videos.php')
      .then(r => r.json())
      .then(d => setVideos(d.videos || []))
      .catch(() => {});
  }, []);

  function requestConsent() {
    if (window.kwConsent) window.kwConsent.open();
  }

  return (
    <>
      <div className="video-grid">
        {videos.map((v, i) => {
          const externalUrl = v.kind === 'yt'
            ? `https://www.youtube.com/watch?v=${v.external_id}`
            : v.kind === 'ig'
            ? `https://www.instagram.com/p/${v.external_id}/`
            : v.video_url;

          const onClick = (e) => {
            e.preventDefault();
            if (v.kind === 'local') {
              // Lokale Videos: kein Consent nötig (eigener Server)
              setOpen({ kind: 'local', src: null, videoUrl: v.video_url, externalUrl: null });
              return;
            }
            if (!consentGranted) { requestConsent(); return; }
            if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
              window.open(externalUrl, '_blank', 'noopener');
              return;
            }
            if (v.kind === 'yt') {
              setOpen({ kind: 'yt', src: `https://www.youtube-nocookie.com/embed/${v.external_id}?autoplay=1&mute=1&playsinline=1&rel=0&modestbranding=1`, externalUrl });
            } else {
              setOpen({ kind: 'ig', src: `https://www.instagram.com/p/${v.external_id}/embed/captioned/`, externalUrl });
            }
          };

          // Thumbnail-Logik:
          // - Lokale Thumbnails (v.thumb_url) sind eigene Assets → immer zeigen
          // - YouTube-Thumbnails (img.youtube.com) nur mit Consent → sonst YT-Placeholder
          // - Instagram Live-Thumbnails nur mit Consent → sonst IG-Icon
          const thumb = v.kind === 'yt' ? (
            consentGranted ? (
              <img src={`https://img.youtube.com/vi/${v.external_id}/hqdefault.jpg`} alt="" loading="lazy" />
            ) : (
              // YouTube-Branded Placeholder (kein externer Request)
              <div style={{
                width:'100%',height:'100%',
                background:'linear-gradient(160deg,#1a0a0a,#0d0d0d)',
                display:'flex',flexDirection:'column',
                alignItems:'center',justifyContent:'center',gap:10,padding:12
              }}>
                <div style={{
                  width:44,height:30,background:'#ff0000',borderRadius:7,
                  display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0
                }}>
                  <svg viewBox="0 0 24 24" fill="white" width="18" height="18"><path d="M8 5v14l11-7z"/></svg>
                </div>
                <div style={{fontSize:11,color:'#aaa',textAlign:'center',lineHeight:1.5,maxWidth:130}}>{v.title}</div>
                <div style={{fontSize:10,color:'#555',letterSpacing:'.04em'}}>Klicken zum Aktivieren</div>
              </div>
            )
          ) : v.thumb_url ? (
            // Lokales Thumbnail (eigenes Asset) → immer sichtbar, kein externer Request
            <img src={v.thumb_url} alt="" loading="lazy" />
          ) : v.kind === 'ig' ? (
            <IgThumb id={v.external_id} consentGranted={consentGranted} />
          ) : (
            <div className="video-card__ig-bg" style={{display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,color:'var(--grey)'}}>▶ Video</div>
          );

          return (
            <a
              key={v.id || i}
              className="video-card"
              href={externalUrl || '#'}
              rel="noopener noreferrer"
              onClick={onClick}
            >
              <div className="video-card__thumb" data-kind={v.kind}>
                {thumb}
                <span className="video-card__play">▶</span>
                <span className="video-card__platform">
                  {v.kind === 'yt' ? 'YouTube' : v.kind === 'ig' ? 'Instagram' : 'Video'}
                </span>
              </div>
              <div className="video-card__title">{v.title}</div>
              <div className="video-card__meta">{v.place}</div>
            </a>
          );
        })}
      </div>
      {open && <VideoModal kind={open.kind} src={open.src} externalUrl={open.externalUrl} videoUrl={open.videoUrl} onClose={() => setOpen(null)} />}
    </>
  );
}

function GalleryLightbox({ img, onClose, onPrev, onNext, hasPrev, hasNext }) {
  useEffectP(() => {
    function onKey(e) {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft' && hasPrev) onPrev();
      if (e.key === 'ArrowRight' && hasNext) onNext();
    }
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [hasPrev, hasNext]);

  return (
    <div className="gallery-lb" onClick={onClose}>
      <button className="gallery-lb__close" onClick={onClose} aria-label="Schließen">×</button>
      {hasPrev && (
        <button className="gallery-lb__arrow gallery-lb__arrow--prev" onClick={e => { e.stopPropagation(); onPrev(); }} aria-label="Vorheriges Bild">‹</button>
      )}
      {hasNext && (
        <button className="gallery-lb__arrow gallery-lb__arrow--next" onClick={e => { e.stopPropagation(); onNext(); }} aria-label="Nächstes Bild">›</button>
      )}
      <img
        src={img.url}
        alt={img.alt_text || ''}
        className="gallery-lb__img"
        onClick={e => e.stopPropagation()}
      />
    </div>
  );
}

function Gallery() {
  const [images, setImages] = useStateP([]);
  const [openIdx, setOpenIdx] = useStateP(null);

  useEffectP(() => {
    fetch('/api/media.php?slot=gallery')
      .then(r => r.json())
      .then(d => setImages(d.images || []))
      .catch(() => {});
  }, []);

  if (images.length === 0) return null;

  return (
    <>
      <div className="gallery">
        {images.map((img, i) => (
          <div key={img.id} className="gallery__item" onClick={() => setOpenIdx(i)}>
            <img
              src={img.url}
              alt={img.alt_text || ''}
              loading="lazy"
              style={{
                objectPosition: `${img.focus_x ?? 50}% ${img.focus_y ?? 50}%`,
                transform: `scale(${img.zoom ?? 1})`,
                transformOrigin: `${img.focus_x ?? 50}% ${img.focus_y ?? 50}%`,
              }}
            />
          </div>
        ))}
      </div>
      {openIdx !== null && (
        <GalleryLightbox
          img={images[openIdx]}
          hasPrev={openIdx > 0}
          hasNext={openIdx < images.length - 1}
          onPrev={() => setOpenIdx(i => i - 1)}
          onNext={() => setOpenIdx(i => i + 1)}
          onClose={() => setOpenIdx(null)}
        />
      )}
    </>
  );
}

function PageMedia() {
  const [scHandle, setScHandle] = useStateP('kevinweigel');
  const [videoCount, setVideoCount] = useStateP(null);
  const consentGranted = useConsent('externe_medien');

  useEffectP(() => {
    fetch('/api/settings.php')
      .then(r => r.json())
      .then(d => {
        if (d.settings && d.settings.soundcloud_handle) setScHandle(d.settings.soundcloud_handle);
      })
      .catch(() => {});
    fetch('/api/videos.php')
      .then(r => r.json())
      .then(d => setVideoCount((d.videos || []).length))
      .catch(() => {});
  }, []);

  const scUrl    = `https://soundcloud.com/${scHandle}`;
  const embedSrc = 'https://w.soundcloud.com/player/?url=' + encodeURIComponent(scUrl) +
    '&color=%23E5179C&auto_play=false&hide_related=true&show_comments=false' +
    '&show_user=true&show_reposts=false&show_teaser=false&visual=false' +
    '&download=false&buying=false&sharing=true';

  function jump(id) {
    const el = document.getElementById(id);
    if (el) smoothScrollTo(el.getBoundingClientRect().top + window.scrollY - 80);
  }

  return (
    <div className="page-anim section section--ink" data-screen-label="Media">
      <SectionHead num="03 / Library" title={<>Mixes & <span style={{color:'var(--pink)'}}>Media</span></>} meta="" />

      <nav className="media-jump" aria-label="Section jump">
        <button onClick={() => jump('media-videos')}><span className="num">01</span> Video Clips</button>
        <button onClick={() => jump('media-soundcloud')}><span className="num">02</span> SoundCloud Mixes</button>
        <button onClick={() => jump('media-gallery')}><span className="num">03</span> Gallery</button>
      </nav>

      <h3 id="media-videos" className="mono media-anchor" style={{color:'var(--pink)',marginBottom:16}}>Video Clips</h3>
      <p className="mono" style={{color:'var(--paper-dim)',opacity:0.7,marginBottom:24,letterSpacing:'0.12em'}}>
        {videoCount !== null ? `${videoCount} videos` : 'Videos'} · YouTube + Instagram
      </p>
      <VideoGrid />

      <h3 id="media-soundcloud" className="mono media-anchor" style={{color:'var(--pink)',marginTop:96,marginBottom:16}}>SoundCloud Mixes</h3>
      <div className="sc-wrap">
        <div className="sc-meta">
          <div className="sc-meta__row">
            <span className="sc-tag"><span className="live"></span>SoundCloud Feed · Live</span>
            <a className="sc-profile-link" href={scUrl} target="_blank" rel="noreferrer">@{scHandle} ↗</a>
          </div>
          <p className="sc-blurb">All mixes streamed straight from SoundCloud — new sets land here as soon as they're uploaded.</p>
        </div>
        <div className="sc-frame">
          {consentGranted ? (
            <iframe
              title="Kevin Weigel on SoundCloud"
              width="100%" height="620" scrolling="no" frameBorder="no"
              allow="autoplay"
              src={embedSrc}
            ></iframe>
          ) : (
            <ScConsentCard
              scHandle={scHandle}
              onAllow={() => window.kwConsent && window.kwConsent.open()}
            />
          )}
        </div>
        <div className="sc-actions">
          <a className="btn btn--primary" href={scUrl} target="_blank" rel="noreferrer">Open full profile on SoundCloud ↗</a>
          <a className="btn btn--ghost" href={scUrl + '/sets'} target="_blank" rel="noreferrer">All playlists ↗</a>
        </div>
      </div>

      <h3 id="media-gallery" className="mono media-anchor" style={{color:'var(--pink)',marginTop:96,marginBottom:16}}>Gallery</h3>
      <Gallery />
    </div>
  );
}

/* =====================================================
   CONTACT
   ===================================================== */
function PageContact() {
  const [form, setForm]     = useStateP({ name: '', email: '', org: '', event: '', date: '', message: '' });
  const [errs, setErrs]     = useStateP({});
  const [sent, setSent]     = useStateP(false);
  const [submitting, setSubmitting] = useStateP(false);
  const [settings, setSettings]     = useStateP({});

  useEffectP(() => {
    fetch('/api/settings.php')
      .then(r => r.json())
      .then(d => { if (d.settings) setSettings(d.settings); })
      .catch(() => {});
  }, []);

  const showSide = settings.show_booking_sidebar === '1';

  function update(k, v) {
    setForm(f => ({ ...f, [k]: v }));
    if (errs[k]) setErrs(e => ({ ...e, [k]: null }));
  }

  async function submit(e) {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = 'Required';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) next.email = 'Valid email please';
    if (!form.message.trim() || form.message.trim().length < 12) next.message = 'Tell us a bit more (min 12 chars)';
    setErrs(next);
    if (Object.keys(next).length > 0) return;

    setSubmitting(true);
    try {
      const fd = new FormData();
      fd.append('name',    form.name);
      fd.append('email',   form.email);
      fd.append('org',     form.org);
      fd.append('event',   form.event);
      fd.append('date',    form.date);
      fd.append('message', form.message);
      fd.append('website', ''); // Honeypot — muss leer bleiben

      const resp = await fetch('/api/booking.php', { method: 'POST', body: fd });
      const data = await resp.json();

      if (resp.ok && data.ok) {
        setSent(true);
      } else if (data.errors) {
        setErrs(data.errors);
      } else {
        setErrs({ _server: data.error || 'Fehler beim Senden. Bitte erneut versuchen.' });
      }
    } catch {
      setErrs({ _server: 'Netzwerkfehler. Bitte erneut versuchen.' });
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="page-anim section section--ink" data-screen-label="Contact">
      <SectionHead num="05 / Booking" title={<>Get in <span style={{color:'var(--pink)'}}>touch</span></>} meta="Replies within 48h" />

      <div className="contact-grid">
        {sent ? (
          <div className="form__success">
            ▲ Booking enquiry sent — Kevin's management will reply within 48h.<br/>
            Thanks for the message.
          </div>
        ) : (
          <form className="form" onSubmit={submit} noValidate>
            {errs._server && <div className="err" style={{marginBottom:16}}>{errs._server}</div>}
            <div className="form__row two">
              <div>
                <label>Your name</label>
                <input value={form.name} onChange={e => update('name', e.target.value)} data-invalid={!!errs.name} placeholder="Jane Promoter" />
                {errs.name && <div className="err">{errs.name}</div>}
              </div>
              <div>
                <label>Email</label>
                <input type="email" value={form.email} onChange={e => update('email', e.target.value)} data-invalid={!!errs.email} placeholder="jane@yourvenue.de" />
                {errs.email && <div className="err">{errs.email}</div>}
              </div>
            </div>
            <div className="form__row two">
              <div>
                <label>Organisation / Venue</label>
                <input value={form.org} onChange={e => update('org', e.target.value)} placeholder="(optional)" />
              </div>
              <div>
                <label>Event type</label>
                <select value={form.event} onChange={e => update('event', e.target.value)} data-placeholder={!form.event}>
                  <option value="" disabled>What kind of event?</option>
                  <option>Festival</option>
                  <option>Club night</option>
                  <option>Open-air</option>
                  <option>Private</option>
                  <option>Brand / Other</option>
                </select>
              </div>
            </div>
            <div className="form__row">
              <label>Preferred date</label>
              <input type="text" value={form.date} onChange={e => update('date', e.target.value)} placeholder="e.g. Sat 15 Aug 2026" />
            </div>
            <div className="form__row">
              <label>Tell us about the show</label>
              <textarea rows="4" value={form.message} onChange={e => update('message', e.target.value)} data-invalid={!!errs.message} placeholder="Venue capacity, slot, soundsystem, fee range..." />
              {errs.message && <div className="err">{errs.message}</div>}
            </div>
            {/* Honeypot — unsichtbar für Menschen, für Bots sichtbar */}
            <input type="text" name="website" defaultValue="" style={{display:'none'}} tabIndex="-1" aria-hidden="true" />
            <button type="submit" className="form__submit" disabled={submitting}>
              {submitting ? 'Wird gesendet…' : 'Send Booking Enquiry →'}
            </button>
          </form>
        )}

        {showSide && (
        <aside className="contact-side">
          <div className="contact-card">
            <h4>Bookings</h4>
            <div className="name">Mn Management</div>
            <div className="role">Worldwide</div>
            {settings.booking_email && <a href={`mailto:${settings.booking_email}`}>{settings.booking_email}</a>}
            {settings.booking_phone && <a href={`tel:${settings.booking_phone.replace(/\s/g,'')}`}>{settings.booking_phone}</a>}
          </div>
          {settings.press_email && (
          <div className="contact-card">
            <h4>Press & Promos</h4>
            <div className="name">Electronic Evolution</div>
            <div className="role">Label & Series</div>
            <a href={`mailto:${settings.press_email}`}>{settings.press_email}</a>
          </div>
          )}
          {settings.tech_rider_text && (
          <div className="contact-card">
            <h4>Tech rider</h4>
            <div className="role" style={{marginBottom:12}}>{settings.tech_rider_text}</div>
          </div>
          )}
        </aside>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { PageHome, PageGroove, PageAbout, PageShows, PageMedia, PageContact, ShowsList });