/* global React */
const { useState, useEffect, useRef } = React;

// ============================================================
//  PRIMITIVES
// ============================================================

function Placeholder({ label, hot, style, className = '', children, src, alt, fit = 'cover', objectPosition }) {
  if (src) {
    return (
      <div className={`placeholder ${className}`} style={{ ...style, padding: 0, background: '#0a0a0a' }}>
        <img src={src} alt={alt || label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: fit, objectPosition: objectPosition || 'center' }} />
        {children}
      </div>
    );
  }
  return (
    <div className={`placeholder ${hot ? 'hot' : ''} ${className}`} style={style}>
      <span>{label}</span>
      {children}
    </div>
  );
}

function Mono({ children, style, className = '' }) {
  return <span className={`mono ${className}`} style={style}>{children}</span>;
}

// Vimeo facade — click-to-load with custom poster
function Vimeo({ id, title = 'Video', poster, style, className = '' }) {
  const [loaded, setLoaded] = useState(false);
  if (loaded) {
    return (
      <div className={className} style={{ position: 'relative', background: '#000', ...style }}>
        <iframe
          src={`https://player.vimeo.com/video/${id}?autoplay=1&title=0&byline=0&portrait=0&dnt=1`}
          title={title}
          allow="autoplay; fullscreen; picture-in-picture"
          allowFullScreen
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
        />
      </div>
    );
  }
  return (
    <button
      onClick={() => setLoaded(true)}
      className={className}
      style={{
        position: 'relative', background: '#000', cursor: 'pointer',
        border: 'none', padding: 0, overflow: 'hidden', textAlign: 'left',
        ...style,
      }}
    >
      {poster && (
        <img
          src={poster}
          alt={title}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }}
        />
      )}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55))' }}></div>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{
          width: 96, height: 96, borderRadius: '50%',
          background: 'rgba(230,57,70,0.95)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 28, paddingLeft: 7,
          border: '2px solid #fff',
        }} className="yt-play">▶</div>
      </div>
      <div style={{ position: 'absolute', top: 16, left: 16 }}>
        <div className="tape">★ LIVE · PLAY</div>
      </div>
      <div style={{
        position: 'absolute', bottom: 16, left: 16, right: 16,
        display: 'flex', justifyContent: 'space-between', color: '#fff',
      }}>
        <span className="mono" style={{ color: 'rgba(255,255,255,0.85)' }}>{title}</span>
        <span className="mono" style={{ color: 'rgba(255,255,255,0.85)' }}>Vimeo</span>
      </div>
      <style>{`button:hover .yt-play { transform: scale(1.08); }`}</style>
    </button>
  );
}

// YouTube facade — click-to-load (privacy + perf)
function YouTube({ id, title = 'Video', poster, style, className = '' }) {
  const [loaded, setLoaded] = useState(false);
  const thumb = poster || `https://i.ytimg.com/vi/${id}/maxresdefault.jpg`;
  if (loaded) {
    return (
      <div className={className} style={{ position: 'relative', background: '#000', ...style }}>
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&rel=0&modestbranding=1`}
          title={title}
          allow="autoplay; encrypted-media; picture-in-picture"
          allowFullScreen
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
        />
      </div>
    );
  }
  return (
    <button
      onClick={() => setLoaded(true)}
      className={className}
      style={{
        position: 'relative', background: '#000', cursor: 'pointer',
        border: 'none', padding: 0, overflow: 'hidden', textAlign: 'left',
        ...style,
      }}
    >
      <img
        src={thumb}
        alt={title}
        onError={(e) => { e.currentTarget.src = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`; }}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }}
      />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.5))' }}></div>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{
          width: 96, height: 96, borderRadius: '50%',
          background: 'rgba(230,57,70,0.95)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 28, paddingLeft: 7,
          border: '2px solid #fff',
          transition: 'transform 0.2s',
        }} className="yt-play">▶</div>
      </div>
      <div style={{
        position: 'absolute', top: 16, left: 16,
      }}>
        <div className="tape">★ LIVE · PLAY</div>
      </div>
      <div style={{
        position: 'absolute', bottom: 16, left: 16, right: 16,
        display: 'flex', justifyContent: 'space-between', color: '#fff',
      }}>
        <span className="mono" style={{ color: 'rgba(255,255,255,0.85)' }}>{title}</span>
        <span className="mono" style={{ color: 'rgba(255,255,255,0.85)' }}>YouTube</span>
      </div>
      <style>{`.yt-play { transition: transform .2s; } button:hover .yt-play { transform: scale(1.08); }`}</style>
    </button>
  );
}

// ============================================================
//  NAV
// ============================================================

function Nav() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(10,10,10,0.85)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--border)',
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto',
        padding: '18px 48px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }} className="nav-inner">
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 0 }} className="brand-lockup">
          <img src="assets/jjx-logo.svg" alt="John & John Xpanded" className="nav-logo" style={{ height: 88, width: 88, display: 'block' }} />
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 36 }} className="nav-links">
          <a href="#band" className="mono">01 — Band</a>
          <a href="#musik" className="mono">02 — Musik</a>
          <a href="#live" className="mono">03 — Live</a>
          <a href="#termine" className="mono">04 — Tournee</a>
          <a href="#booking" className="btn-primary" style={{
            padding: '10px 18px', fontSize: 12, letterSpacing: '0.08em',
            background: 'var(--accent)', color: '#fff',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontFamily: "'JetBrains Mono', monospace",
            textTransform: 'uppercase',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#fff', animation: 'pulse 1.6s infinite' }}></span>
            Jetzt buchen
          </a>
        </div>
      </div>
      <style>{`
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
        @media (max-width: 900px) {
          .nav-links a:not(.btn-primary) { display: none; }
          .nav-inner { padding: 12px 24px !important; }
          .nav-logo { height: 64px !important; width: 64px !important; }
        }
        @media (max-width: 600px) {
          .nav-inner { padding: 10px 16px !important; }
          .nav-logo { height: 52px !important; width: 52px !important; }
          .nav-links .btn-primary { padding: 9px 14px !important; font-size: 11px !important; }
        }
      `}</style>
    </nav>
  );
}

// ============================================================
//  HERO — Mosaik-Collage
// ============================================================

function HeroMosaic() {
  return (
    <section id="top" style={{ paddingTop: 60, paddingBottom: 80, borderTop: 'none' }}>
      <div className="container">
        {/* Top meta row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 40 }}>
          <Mono>Live-Band · seit 2014</Mono>
          <Mono>Bern / Zürich / Luzern · CH</Mono>
        </div>

        {/* Headline + subline */}
        <div style={{ marginBottom: 40 }}>
          <div className="tape" style={{ marginBottom: 28 }}>★ Buchungen 2026 offen</div>
          <h1 className="display" style={{ fontSize: 'clamp(56px, 10vw, 168px)', margin: 0 }}>
            Die perfekte <span style={{ color: 'var(--accent)' }}>Live-Band</span><br/>
            für unvergess&shy;liche Events.
          </h1>
        </div>

        {/* Big landscape pressefoto — full width, full image visible */}
        <div style={{
          position: 'relative',
          width: '100%',
          aspectRatio: '16 / 9',
          maxHeight: 620,
          marginBottom: 32,
          overflow: 'hidden',
          background: '#fff',
        }}>
          <img
            src="assets/band-presse.jpg"
            alt="John & John Xpanded — Pressefoto"
            style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
          />
          <div style={{ position: 'absolute', top: 20, left: 20 }} className="press-tape">
            <div className="tape">★ DIE BAND</div>
          </div>
          <div style={{
            position: 'absolute', bottom: 16, left: 20, right: 20,
            display: 'flex', justifyContent: 'space-between',
          }} className="press-foot">
            <Mono style={{ color: '#0a0a0a' }}>↓ 5 Musiker</Mono>
            <Mono style={{ color: '#0a0a0a' }}>★ John &amp; John Xpanded</Mono>
          </div>
        </div>

        {/* Subline + CTAs row */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr',
          gap: 48, alignItems: 'center', marginBottom: 56,
        }} className="hero-cta-row">
          <p style={{ fontSize: 20, color: 'var(--fg-muted)', lineHeight: 1.6, margin: 0, maxWidth: 640 }}>
            Mundart, Schwiizer Hits & Classic-Rock — gespielt von fünf Musikern, die wissen, wie man den Saal zum Kochen bringt. Vom Club bis zum Firmenanlass.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
            <a href="#booking" className="btn btn-primary btn-arrow">
              Verfügbarkeit prüfen <span className="arrow">→</span>
            </a>
            <a href="#live" className="btn btn-arrow">
              Live erleben <span className="arrow">→</span>
            </a>
          </div>
        </div>

        {/* Stats / strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          borderTop: '1px solid var(--border)',
          borderBottom: '1px solid var(--border)',
          gap: 0,
        }} className="stats-strip">
          {[
            ['Live, kein Playback', 'Echte Instrumente, echte Stimmen'],
            ['Mundart bis Classic-Rock', 'Drei Welten, ein Set'],
            ['Fünf Musiker', 'Hanspeter · Ruedi · Plüme · David · Cello'],
            ['Seit 2014', 'Geschliffen auf hunderten Bühnen'],
          ].map(([n, l]) => (
            <div key={n} style={{ padding: '28px 24px', borderRight: '1px solid var(--border)' }}>
              <div className="display" style={{ fontSize: 'clamp(20px, 1.6vw, 26px)', lineHeight: 1.15 }}>{n}</div>
              <Mono style={{ marginTop: 8, display: 'block' }}>{l}</Mono>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .hero-cta-row { grid-template-columns: 1fr !important; }
          .hero-cta-row > div { justify-content: flex-start !important; }
          .stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
          .stats-strip > div:nth-child(2) { border-right: none !important; }
          .stats-strip > div:nth-child(1), .stats-strip > div:nth-child(2) { border-bottom: 1px solid var(--border); }
        }
        @media (max-width: 600px) {
          .stats-strip { grid-template-columns: 1fr !important; }
          .stats-strip > div { border-right: none !important; border-bottom: 1px solid var(--border) !important; padding: 22px 18px !important; }
          .stats-strip > div:last-child { border-bottom: none !important; }
          .press-tape { display: none !important; }
          .press-foot { bottom: 8px !important; left: 12px !important; right: 12px !important; flex-direction: column !important; gap: 2px !important; }
          .press-foot .mono { font-size: 9px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
//  ÜBER DIE BAND
// ============================================================

function About() {
  return (
    <section id="band">
      <div className="container">
        <div className="section-label"><Mono>02 / Über die Band</Mono></div>

        {/* Headline + intro row */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80,
          alignItems: 'end', marginBottom: 64,
        }} className="about-intro">
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5.2vw, 84px)', margin: 0 }}>
            Fünf Profis,<br/>
            die für die <span className="accent">Bühne</span> leben.
          </h2>
          <div>
            <p style={{ margin: 0, fontSize: 18, lineHeight: 1.7 }}>
              <strong>John &amp; John Xpanded</strong> — das sind fünf erfahrene Musiker mit hunderten Auftritten in der Schweiz und darüber hinaus. Wir spielen, was die Leute kennen, lieben und mitsingen wollen: Mundart-Songs von Polo Hofer bis Züri West, die grössten Schweizer Hits und Classic-Rock-Klassiker, die nie alt werden.
            </p>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)' }}>
              Drei Stimmen vorne, eine Band, die sitzt — und jeder Song bekommt genau das Gewicht, das er braucht: handgemacht, laut wo's laut sein muss, leise wo's berührt. Kein Playback, kein Schnickschnack — nur fünf Musiker, ihre Instrumente und ein Saal voller Stimmen, die mitsingen. Und ja — eine Zugabe ist immer drin.
            </p>
          </div>
        </div>

        {/* Full-width landscape band photo */}
        <div style={{
          position: 'relative',
          aspectRatio: '3 / 2',
          maxHeight: 720,
          overflow: 'hidden',
          marginBottom: 48,
        }}>
          <img
            src="assets/band-live.jpg"
            alt="John & John Xpanded — Live"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
          <div style={{ position: 'absolute', top: 24, left: 24 }}>
            <div className="tape">★ John &amp; John Xpanded · 2026</div>
          </div>
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0,
            padding: '24px 28px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
            color: '#fff',
            background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.55))',
          }}>
            <Mono style={{ color: 'rgba(255,255,255,0.9)' }}>↳ Live in voller Bandbesetzung</Mono>
            <Mono style={{ color: 'rgba(255,255,255,0.9)' }}>5 Musiker · CH</Mono>
          </div>
        </div>

        {/* Member strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0,
          borderTop: '1px solid var(--border)',
        }} className="member-grid">
          {[
            { label: 'Gesang & Gitarre', name: 'Hanspeter Dubach', n: '01' },
            { label: 'Drums', name: 'Ruedi Maurer', n: '02' },
            { label: 'Gesang & Gitarre & Bluesharp', name: 'Plüme Imhof', n: '03' },
            { label: 'Bass', name: 'David Jegge', n: '04' },
            { label: 'Keyboard & Akkordeon & Gesang', name: 'Cello Hertner', n: '05' },
          ].map((m, i) => (
            <div key={m.name} style={{
              padding: '20px 22px',
              borderRight: i < 4 ? '1px solid var(--border)' : 'none',
              borderBottom: '1px solid var(--border)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                <Mono className="accent">{m.n}</Mono>
              </div>
              <div className="display" style={{ fontSize: 22, lineHeight: 1.05 }}>{m.name}</div>
              <Mono style={{ marginTop: 8, display: 'block', fontSize: 11 }}>{m.label}</Mono>
            </div>
          ))}
        </div>

        {/* Plüme highlight — Polo Hofer connection */}
        <div style={{
          marginTop: 64,
          display: 'grid',
          gridTemplateColumns: '5fr 7fr',
          gap: 48,
          alignItems: 'stretch',
          borderTop: '1px solid var(--border)',
          paddingTop: 64,
        }} className="pluemerow">
          <div style={{ position: 'relative', aspectRatio: '4 / 5', overflow: 'hidden', background: '#0a0a0a' }} className="pluemeimg">
            <img
              src="assets/john-john-xpanded-leadsaenger-akustikgitarre-rox-music-bar.jpg"
              alt="Plüme Imhof — Sänger und Gitarrist John & John Xpanded, ehemals Schmetterband mit Polo Hofer"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
            />
            <div style={{
              position: 'absolute', top: 16, left: 16,
            }}>
              <span className="tape">★ Schmetterband 1983–1987</span>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }} className="pluemetext">
            <Mono style={{ marginBottom: 16 }}>Bandporträt · 03 / 05</Mono>
            <h3 className="display" style={{ fontSize: 'clamp(36px, 4.2vw, 60px)', margin: 0, lineHeight: 1.02 }}>
              Plüme — eine Stimme,<br />die man <span className="accent">kennt</span>.
            </h3>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 620 }}>
              Plüme Imhof war fünf Jahre lang Sänger und Gitarrist bei der Schmetterband und Polo Hofers zweite Stimme. Zu hören auf Songs wie <em style={{ fontStyle: 'normal', color: 'var(--fg)' }}>«Alperose»</em>, <em style={{ fontStyle: 'normal', color: 'var(--fg)' }}>«Hopp Schwiiz»</em> und <em style={{ fontStyle: 'normal', color: 'var(--fg)' }}>«Wäge Dir»</em> — Schweizer Musikgeschichte, an der er mitgeschrieben hat.
            </p>
            <p style={{ marginTop: 14, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 620 }}>
              Mit Polo Hofer &amp; Schmetterband stand er auf den grossen Bühnen der Schweiz, war live im Schweizer Fernsehen — und 1985 im Vorprogramm der DDR-Kultband <em style={{ fontStyle: 'normal', color: 'var(--fg)' }}>«Puhdys»</em>.
            </p>
            <div style={{
              marginTop: 28,
              display: 'flex',
              flexWrap: 'wrap',
              gap: 24,
              paddingTop: 20,
              borderTop: '1px solid var(--border)',
            }}>
              <div>
                <Mono style={{ fontSize: 10 }}>Polo Hofer</Mono>
                <div className="display" style={{ fontSize: 18, marginTop: 4 }}>1983–87</div>
              </div>
              <div>
                <Mono style={{ fontSize: 10 }}>DDR-Tour</Mono>
                <div className="display" style={{ fontSize: 18, marginTop: 4 }}>1985 · Puhdys</div>
              </div>
              <div>
                <Mono style={{ fontSize: 10 }}>John &amp; John</Mono>
                <div className="display" style={{ fontSize: 18, marginTop: 4 }}>seit 1996</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .about-intro { grid-template-columns: 1fr !important; gap: 32px !important; align-items: start !important; }
          .member-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .member-grid > div:nth-child(2n) { border-right: none !important; }
          .member-grid > div:nth-child(5) { border-right: none !important; }
        }
        @media (max-width: 480px) {
          .member-grid { grid-template-columns: 1fr !important; }
          .member-grid > div { border-right: none !important; }
        }
        @media (max-width: 900px) {
          .pluemerow { grid-template-columns: 1fr !important; gap: 32px !important; padding-top: 48px !important; margin-top: 48px !important; }
          .pluemeimg { max-width: 420px; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
//  MUSIK & STIL — Audio-Player + Setlist
// ============================================================

const TRACKS = [
  { artist: 'John & John Xpanded', title: 'Trybguet', tag: 'Mundart', src: 'assets/audio/trybguet.mp3' },
  { artist: 'John & John Xpanded', title: 'Angels', tag: 'Classic-Rock', src: 'assets/audio/angels.mp3' },
  { artist: 'John & John Xpanded', title: 'Saftigs Müntschi', tag: 'Mundart', src: 'assets/audio/saftigs-muentschi.mp3' },
  { artist: 'Patent Ochsner', title: 'Für immer uf di', tag: 'Mundart', src: 'assets/audio/fuer-immer-uf-di.mp3' },
];

const SETLIST_PEARLS = [
  ['Mundart', ['Alperose', 'Hemmige', 'W.Nuss vo Bümpliz', 'I schänke dir mys Härz', 'Für immer uf di', 'Schwan', 'Heimweh', 'Summer 68']],
  ['Schweizer Hits', ['Giggerig', 'Teddybär', 'Kiosk', 'Lotti, Lotti', 'Dr Ferdinand isch gstorbe', 'Weisch no?']],
  ['Classic-Rock', ['Hotel California', 'Sultans of Swing', 'I shot the Sheriff', 'Summer of ’69', 'Money for Nothing', 'Superstition', 'Three Little Birds', 'Baila (Sexy Thing)']],
];

function MusicSection() {
  const [playing, setPlaying] = useState(null);
  const [setlistOpen, setSetlistOpen] = useState(false);
  const [progress, setProgress] = useState(0); // 0..1
  const [curTime, setCurTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const audioRef = useRef(null);

  // Format seconds as M:SS
  const fmt = (s) => {
    if (!s || isNaN(s)) return '0:00';
    const m = Math.floor(s / 60);
    const ss = Math.floor(s % 60).toString().padStart(2, '0');
    return m + ':' + ss;
  };

  // When `playing` changes, swap source and play (or pause)
  useEffect(() => {
    const el = audioRef.current;
    if (!el) return;
    if (playing === null) {
      el.pause();
      return;
    }
    const t = TRACKS[playing];
    if (!t.src) {
      // No real audio file yet — keep visual state but nothing to play
      setProgress(0); setCurTime(0); setDuration(0);
      return;
    }
    el.src = t.src;
    el.currentTime = 0;
    el.play().catch(() => {/* autoplay blocked — user must tap again */});
  }, [playing]);

  return (
    <section id="musik" style={{ background: '#070707' }}>
      <audio
        ref={audioRef}
        onTimeUpdate={(e) => {
          const a = e.currentTarget;
          setCurTime(a.currentTime);
          if (a.duration) setProgress(a.currentTime / a.duration);
        }}
        onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
        onEnded={() => {
          // Auto-advance to next playable track, or stop
          const next = TRACKS.findIndex((t, i) => i > playing && t.src);
          setPlaying(next >= 0 ? next : null);
        }}
      />
      <div className="container">
        <div className="section-label"><Mono>03 / Musik &amp; Stil</Mono></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }} className="music-grid">
          <div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 76px)', margin: 0 }}>
              Drei Welten.<br/>Eine Band.
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 480 }}>
              Wir verbinden, was zusammen­gehört: Schweizer Mundart-Songs, die jeder im Saal mitsingt — die grössten Hits der hiesigen Musik­szene — und Classic-Rock-Klassiker, die jede Tanz­fläche füllen.
            </p>

            <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[
                { tag: 'Mundart', desc: 'Polo Hofer, Züri West, Patent Ochsner' },
                { tag: 'Schweizer Hits', desc: 'Gölä, Span, Plüsch & Co.' },
                { tag: 'Classic-Rock', desc: 'Eagles, Dire Straits, Bryan Adams, Eric Clapton, CCR' },
              ].map((g, i) => (
                <div key={g.tag} style={{
                  display: 'grid',
                  gridTemplateColumns: '32px 1fr 1fr',
                  gap: 16,
                  padding: '20px 0',
                  borderTop: i === 0 ? '1px solid var(--border)' : 'none',
                  borderBottom: '1px solid var(--border)',
                }}>
                  <Mono>0{i+1}</Mono>
                  <div className="display" style={{ fontSize: 24 }}>{g.tag}</div>
                  <div style={{ color: 'var(--fg-muted)', fontSize: 14 }}>{g.desc}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Audio Player */}
          <div style={{ background: 'var(--bg-card)', padding: 28, border: '1px solid var(--border)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
              <Mono>★ Hörproben — Live-Mitschnitte</Mono>
              <Mono className="accent">{String(TRACKS.length).padStart(2,'0')} Tracks</Mono>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {TRACKS.map((t, i) => {
                const active = playing === i;
                return (
                  <button
                    key={i}
                    onClick={() => setPlaying(active ? null : i)}
                    style={{
                      display: 'grid',
                      gridTemplateColumns: '32px 1fr auto auto',
                      alignItems: 'center',
                      gap: 16,
                      padding: '18px 4px',
                      borderTop: '1px solid var(--border)',
                      textAlign: 'left',
                      color: active ? 'var(--fg)' : 'var(--fg-muted)',
                      transition: 'color 0.15s',
                    }}
                    onMouseEnter={e => e.currentTarget.style.color = 'var(--fg)'}
                    onMouseLeave={e => e.currentTarget.style.color = active ? 'var(--fg)' : 'var(--fg-muted)'}
                  >
                    <div style={{
                      width: 28, height: 28, borderRadius: '50%',
                      background: active ? 'var(--accent)' : 'transparent',
                      border: active ? '1px solid var(--accent)' : '1px solid var(--border)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      color: '#fff', fontSize: 10,
                    }}>
                      {active ? '❚❚' : '▶'}
                    </div>
                    <div>
                      <div style={{ color: 'var(--fg)', fontWeight: 600 }}>{t.title}</div>
                      <div style={{ fontSize: 12 }} className="mono">{t.artist}</div>
                    </div>
                    <Mono style={{ fontSize: 10 }}>{t.tag}</Mono>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>{t.src ? (active && duration ? fmt(duration) : '—') : (t.dur || '—')}</span>
                  </button>
                );
              })}
            </div>

            {/* progress when playing */}
            {playing !== null && (
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--border)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                  <Mono className="accent">▶ NOW PLAYING — {TRACKS[playing].title}</Mono>
                  <Mono>{fmt(curTime)} / {TRACKS[playing].src ? fmt(duration) : (TRACKS[playing].dur || '—')}</Mono>
                </div>
                <div
                  style={{ height: 4, background: 'var(--border)', position: 'relative', cursor: TRACKS[playing].src ? 'pointer' : 'default' }}
                  onClick={(e) => {
                    if (!TRACKS[playing].src || !audioRef.current || !duration) return;
                    const rect = e.currentTarget.getBoundingClientRect();
                    const pct = (e.clientX - rect.left) / rect.width;
                    audioRef.current.currentTime = pct * duration;
                  }}
                >
                  <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: (progress * 100).toFixed(1) + '%', background: 'var(--accent)' }}></div>
                </div>
                {!TRACKS[playing].src && (
                  <div style={{ marginTop: 12, fontSize: 12, color: 'var(--fg-muted)' }}>
                    <Mono>— Audio wird in Kürze hinzugefügt</Mono>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        {/* Setlist — kuratierte Perlen */}
        <div style={{ marginTop: 96, paddingTop: 56, borderTop: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
            <div className="display" style={{ fontSize: 'clamp(32px, 3.5vw, 48px)' }}>
              Aus unserem Repertoire
            </div>
            <Mono className="accent">★ Eine Auswahl</Mono>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 56,
          }} className="setlist-grid">
            {SETLIST_PEARLS.map(([cat, songs]) => (
              <div key={cat}>
                <Mono className="accent" style={{ display: 'block', marginBottom: 20, paddingBottom: 12, borderBottom: '1px solid var(--border)' }}>★ {cat}</Mono>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 0 }}>
                  {songs.map((s, i) => (
                    <li key={s} style={{
                      fontSize: 17,
                      padding: '14px 0',
                      borderBottom: '1px dashed var(--border)',
                      display: 'flex', alignItems: 'baseline', gap: 16,
                    }}>
                      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'var(--fg-muted)', minWidth: 20 }}>{String(i+1).padStart(2,'0')}</span>
                      <span>{s}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <p style={{ marginTop: 40, fontSize: 14, color: 'var(--fg-muted)', fontStyle: 'italic', maxWidth: 640 }}>
            Ein Auszug aus unserem Repertoire — die finale Setliste stimmen wir individuell auf Anlass und Publikum ab.
          </p>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .music-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .setlist-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 600px) {
          .music-grid > div:last-child { padding: 20px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
//  LIVE-ERLEBNIS
// ============================================================

function LiveExperience() {
  return (
    <section id="live" style={{ background: 'var(--accent)', color: '#fff', borderTop: 'none' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 40 }}>
          <div style={{ width: 32, height: 1, background: '#fff' }}></div>
          <Mono style={{ color: 'rgba(255,255,255,0.8)' }}>04 / Das Live-Erlebnis</Mono>
        </div>

        <h2 className="display" style={{ fontSize: 'clamp(48px, 7vw, 112px)', margin: 0, maxWidth: 1100 }}>
          Erster Schlag — und der Saal gehört uns.
        </h2>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 48, marginTop: 140,
        }} className="live-grid">
          {[
            { n: '01', t: 'Energie', d: 'Wir spielen jeden Gig, als wäre es der letzte. Power von der ersten Sekunde — und Reserven für die dritte Zugabe.' },
            { n: '02', t: 'Publikum', d: 'Mitsingen, mittanzen, mitfeiern. Wir lesen den Saal und passen das Set live an: vom leisen Apéro bis zum Vollgas-Finale.' },
            { n: '03', t: 'Stimmung', d: 'Mundart-Songs, die alle kennen. Hits, die niemand vergisst. Rock, der sitzt. Plus ein paar Überraschungen pro Abend.' },
          ].map(b => (
            <div key={b.n}>
              <div className="display" style={{ fontSize: 80, opacity: 0.4 }}>{b.n}</div>
              <div className="display" style={{ fontSize: 36, marginTop: 8 }}>{b.t}</div>
              <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, opacity: 0.95 }}>{b.d}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .live-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
//  REFERENZEN / EINSATZBEREICHE
// ============================================================

const USE_CASES = [
  { tag: 'Club bis Berghütte', icon: '♥', d: 'Club, Festsaal oder Bergrestaurant — wir wissen, wie man jede Location zum Klingen bringt.' },
  { tag: 'Firmenanlässe', icon: '◆', d: 'Vom GV-Apéro bis zum Mitarbeiterfest. Diskret im Hintergrund oder voll auf der Bühne.' },
  { tag: 'Festivals & Open Airs', icon: '☆', d: 'Erfahrene Bühnen-Crew mit eigener Technik. Plug & Play für Veranstalter.' },
  { tag: 'Geburtstage & Partys', icon: '★', d: 'Ob 40er, 50er oder runder Geburtstag — wir machen aus eurem Anlass eine Live-Party.' },
];

function UseCases() {
  return (
    <section id="referenzen">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div className="section-label"><Mono>05 / Einsatzbereiche</Mono></div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 76px)', margin: 0 }}>
              Wo wir spielen.
            </h2>
          </div>
          <Mono style={{ maxWidth: 320, color: 'var(--fg-muted)' }}>
            Über 180 Auftritte in 12 Jahren — von der Berghütte bis zur Stadthalle.
          </Mono>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0 }} className="usecases-grid">
          {USE_CASES.map((u, i) => (
            <div key={u.tag} style={{
              padding: '40px 32px',
              borderTop: '1px solid var(--border)',
              borderLeft: i % 2 === 1 ? '1px solid var(--border)' : 'none',
              transition: 'background 0.2s',
              cursor: 'pointer',
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-card)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
                <span className="accent" style={{ fontSize: 32 }}>{u.icon}</span>
                <Mono>0{i+1}</Mono>
              </div>
              <div className="display" style={{ fontSize: 40 }}>{u.tag}</div>
              <p style={{ marginTop: 16, color: 'var(--fg-muted)', lineHeight: 1.6, maxWidth: 420 }}>{u.d}</p>
            </div>
          ))}
        </div>

        {/* Quote / trust line */}
        <div style={{
          marginTop: 80, padding: '48px 0',
          borderTop: '1px solid var(--border)',
          display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48, alignItems: 'center',
        }} className="quote-grid">
          <Mono>★ Vertrauen seit 2014</Mono>
          <div className="display" style={{ fontSize: 'clamp(24px, 2.5vw, 36px)', lineHeight: 1.2 }}>
            „Die haben meine 50er-Party zu dem Abend gemacht, von dem alle noch reden.“
            <div className="mono" style={{ marginTop: 16, color: 'var(--fg-dim)' }}>— Markus B., Geburtstag Bern, 09/2025</div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .usecases-grid { grid-template-columns: 1fr !important; }
          .usecases-grid > div:nth-child(2) { border-left: none !important; }
          .quote-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
//  GALLERY
// ============================================================

function Gallery() {
  return (
    <section id="galerie" style={{ paddingLeft: 0, paddingRight: 0 }}>
      <div style={{ padding: '0 48px', maxWidth: 1320, margin: '0 auto 56px' }} className="gallery-header">
        <div className="section-label"><Mono>06 / Galerie &amp; Videos</Mono></div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 76px)', margin: 0 }}>
            Live, ungeschnitten.
          </h2>
          <Mono>↓ Scroll für mehr</Mono>
        </div>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)',
        gap: 6, padding: '0 4px',
      }} className="gallery-grid">
        {/* Hero — Live-Video von Vimeo */}
        <Vimeo
          id="1189068938"
          title="John & John Xpanded Live"
          poster="assets/john-john-xpanded-band-live-buehne-schwarzweiss-festival-schweiz.jpg"
          style={{ gridColumn: 'span 12', aspectRatio: '16 / 9' }}
        />

        {/* Full band on stage (landscape 3:2) */}
        <div style={{ gridColumn: 'span 12', aspectRatio: '3 / 2', position: 'relative', overflow: 'hidden', background: '#0a0a0a' }}>
          <img
            src="assets/john-john-xpanded-band-live-stage-rox-music-bar-bern.jpg"
            alt="John & John Xpanded — Schweizer Live-Band auf der Bühne der Rox Music Bar Bern, Mundart und Classic-Rock"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }}
          />
          <div style={{ position: 'absolute', top: 20, left: 20 }}>
            <div className="tape">★ LIVE · ROX MUSIC BAR</div>
          </div>
        </div>

        {/* Two wide shots side by side */}
        <div style={{ gridColumn: 'span 6', aspectRatio: '3 / 2', position: 'relative', overflow: 'hidden', background: '#0a0a0a' }}>
          <img
            src="assets/john-john-xpanded-gitarre-saengerin-live-rox-music-bar.jpg"
            alt="John & John Xpanded — Live mit Gast-Sängerin in der Rox Music Bar, Mundart Rock Schweiz"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }}
          />
        </div>
        <div style={{ gridColumn: 'span 6', aspectRatio: '3 / 2', position: 'relative', overflow: 'hidden', background: '#0a0a0a' }}>
          <img
            src="assets/john-john-xpanded-leadsaenger-gastsaengerin-live-rox-music-bar.jpg"
            alt="John & John Xpanded — Lead-Sänger und Gast-Sängerin live in der Rox Music Bar Schweiz"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }}
          />
        </div>

        {/* Four portraits — full image visible */}
        <div style={{ gridColumn: 'span 3', aspectRatio: '4 / 5', position: 'relative', overflow: 'hidden', background: '#0a0a0a' }}>
          <img
            src="assets/john-john-xpanded-leadsaenger-akustikgitarre-rox-music-bar.jpg"
            alt="John & John Xpanded — Lead-Sänger mit Akustikgitarre live, Mundart und Classic-Rock Schweiz"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
          />
        </div>
        <div style={{ gridColumn: 'span 3', aspectRatio: '4 / 5', position: 'relative', overflow: 'hidden', background: '#0a0a0a' }}>
          <img
            src="assets/john-john-xpanded-bassist-portrait-rox-music-bar-bern.jpg"
            alt="John & John Xpanded — Bassist live in der Rox Music Bar Bern, Schweizer Live-Band"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
          />
        </div>
        <div style={{ gridColumn: 'span 3', aspectRatio: '4 / 5', position: 'relative', overflow: 'hidden', background: '#0a0a0a' }}>
          <img
            src="assets/john-john-xpanded-drummer-portrait-sonor-rox-music-bar.jpg"
            alt="John & John Xpanded — Schlagzeuger mit Sonor Drums live in der Rox Music Bar Schweiz"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
          />
        </div>
        <div style={{ gridColumn: 'span 3', aspectRatio: '4 / 5', position: 'relative', overflow: 'hidden', background: '#0a0a0a' }}>
          <img
            src="assets/john-john-xpanded-leadsaenger-akustikgitarre-live.jpg"
            alt="John & John Xpanded — Lead-Sänger mit Akustikgitarre auf der Bühne, Schweizer Coverband"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
          />
        </div>
      </div>

      <div style={{ padding: '24px 48px 0', maxWidth: 1320, margin: '0 auto', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }} className="gallery-foot">
        <Mono style={{ color: 'var(--fg-dim)' }}>★ Live in der Rox Music Bar, Schweiz</Mono>
        <Mono style={{ color: 'var(--fg-dim)' }}>Fotos © G.J.U. Photography · Giorgi Jürg Urben</Mono>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .gallery-grid > div { grid-column: span 2 !important; }
          .gallery-grid > div:nth-child(n+4) { grid-column: span 1 !important; }
          .gallery-header, .gallery-foot { padding-left: 24px !important; padding-right: 24px !important; }
        }
        @media (max-width: 600px) {
          .gallery-header, .gallery-foot { padding-left: 28px !important; padding-right: 28px !important; }
          .gallery-grid > div:nth-child(n+4) { grid-column: span 2 !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
//  TERMINE / TOUR
// ============================================================

// Static fallback — used when calendar feed unavailable or empty
const FALLBACK_DATES = [
  { date: '01.08', month: 'AUG', year: '26', city: 'Erlach', venue: 'Strandwiese Erlach · 1. August-Feier', tag: 'Open Air', sold: false, link: 'https://tverlach.ch/event/1-augustfeier-3/' },
  { date: '07.08', month: 'AUG', year: '26', city: 'Waldenburg', venue: 'Waldweidfescht · 19:00', tag: 'Festival', sold: false, link: 'https://waldweidfescht.ch/' },
  { date: '25.09', month: 'SEP', year: '26', city: 'Bern', venue: 'chlyne Hecht · Seidenweg 5 · 19:00', tag: 'Konzert', sold: false, link: 'https://chlynehecht.ch/events' },
  { date: '10.10', month: 'OKT', year: '26', city: 'Kallnach', venue: 'Marti-Musik-Kreuzfahrt 2026 · 10.–17.10.', tag: 'Reise', sold: false, link: 'https://www.marti.ch/reisearten/marti-musik-kreuzfahrt/' },
  { date: '18.11', month: 'NOV', year: '26', city: 'Brugg', venue: 'Immaginazione Galerie · 19:00', tag: 'Konzert', sold: false, link: 'https://www.immaginazione.ch/' },
  { date: '19.12', month: 'DEZ', year: '26', city: 'Oberarth', venue: 'Horseshoe Event Bar · 20:00', tag: 'Konzert', sold: false, link: 'https://www.horseshoe.ch/' },
];

const MONTHS_DE = ['JAN','FEB','MRZ','APR','MAI','JUN','JUL','AUG','SEP','OKT','NOV','DEZ'];

function Tour() {
  const [dates, setDates] = useState(FALLBACK_DATES);

  useEffect(() => {
    let cancelled = false;
    fetch('/api/events')
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (cancelled || !data || !Array.isArray(data) || data.length === 0) return;
        // Map API response to row shape; expects: { start, title, location, url, allDayMulti }
        const now = Date.now();
        const rows = data
          .map(ev => {
            const d = new Date(ev.start);
            if (isNaN(d.getTime())) return null;
            const dd = String(d.getDate()).padStart(2, '0');
            const mm = String(d.getMonth() + 1).padStart(2, '0');
            const time = d.getHours() || d.getMinutes()
              ? ` · ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`
              : '';
            // Strip "Schweiz" / "Switzerland" / trailing ", CH" from location parts
            const stripCH = (s) => (s || '')
              .replace(/,?\s*(Schweiz|Switzerland|Suisse|Svizzera)\s*$/i, '')
              .replace(/,?\s*CH\s*$/i, '')
              .trim();
            const locParts = (ev.location || '').split(',').map(p => stripCH(p.trim())).filter(Boolean);
            // Try to find the city: usually the part containing a 4-digit postal code, else last part
            const cityPart = locParts.find(p => /\d{4}/.test(p)) || locParts[locParts.length - 1] || '—';
            const loc = stripCH(cityPart.replace(/^\d{4}\s*/, '')) || '—';
            const addressParts = locParts.filter(p => p !== cityPart);
            const address = addressParts.join(', ');
            // Title: just event name + time. Strip any trailing "· Schweiz" from title too.
            const cleanTitle = stripCH(ev.title || '').replace(/\s*[·•|]\s*(Schweiz|Switzerland|CH)\s*$/i, '').trim();
            const venue = cleanTitle + time;
            const cityLine = [address, loc].filter(Boolean).join(' · ');
            return {
              _ts: d.getTime(),
              date: `${dd}.${mm}`,
              month: MONTHS_DE[d.getMonth()],
              year: String(d.getFullYear()).slice(-2),
              city: cityLine || loc,
              venue,
              tag: ev.tag || 'Konzert',
              sold: false,
              link: ev.url || null,
            };
          })
          .filter(r => r && r._ts >= now - 86400000) // hide past (1d grace)
          .sort((a, b) => a._ts - b._ts);
        if (rows.length) setDates(rows);
      })
      .catch(() => {/* keep fallback */});
    return () => { cancelled = true; };
  }, []);

  return (
    <section id="termine" style={{ background: '#070707' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div className="section-label"><Mono>07 / Tour 2026</Mono></div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 76px)', margin: 0 }}>
              Wo wir<br/>als nächstes spielen.
            </h2>
          </div>
          <a href="#booking" className="btn btn-arrow">
            Eigenes Datum buchen <span className="arrow">→</span>
          </a>
        </div>

        <div style={{ borderTop: '1px solid var(--border)' }}>
          {dates.map((d, i) => {
            const Tag = d.link && !d.sold ? 'a' : 'div';
            const linkProps = d.link && !d.sold
              ? { href: d.link, target: '_blank', rel: 'noopener noreferrer' }
              : {};
            return (
              <Tag key={i} {...linkProps} style={{
                display: 'grid',
                gridTemplateColumns: '120px 1fr 1fr 140px 120px',
                gap: 24, alignItems: 'center',
                padding: '24px 16px',
                borderBottom: '1px solid var(--border)',
                opacity: d.sold ? 0.55 : 1,
                transition: 'background 0.15s',
                cursor: d.sold ? 'default' : (d.link ? 'pointer' : 'default'),
                color: 'inherit', textDecoration: 'none',
              }} className="tour-row"
                onMouseEnter={e => !d.sold && (e.currentTarget.style.background = '#101010')}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
              >
                <div>
                  <div className="display" style={{ fontSize: 40, lineHeight: 1 }}>{d.date}</div>
                  <Mono>{d.month} {d.year}</Mono>
                </div>
                <div>
                  <div className="display" style={{ fontSize: 24 }}>{d.venue}</div>
                  <div style={{ color: 'var(--fg-muted)', fontSize: 14 }}>{d.city}</div>
                </div>
                <Mono>{d.tag}</Mono>
                <div>
                  {d.sold
                    ? <Mono style={{ color: 'var(--fg-dim)' }}>— ausverkauft</Mono>
                    : d.link
                      ? <Mono className="accent">★ Info ↗</Mono>
                      : <Mono style={{ color: 'var(--fg-dim)' }}>—</Mono>}
                </div>
                <div style={{ textAlign: 'right' }}>
                  {!d.sold && d.link && <span style={{ fontSize: 20 }}>↗</span>}
                </div>
              </Tag>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .tour-row { grid-template-columns: 88px 1fr 28px !important; gap: 16px !important; padding: 20px 12px !important; }
          .tour-row > *:nth-child(3), .tour-row > *:nth-child(4) { display: none !important; }
          .tour-row > div:nth-child(2) > div:first-child { font-size: 18px !important; }
          .tour-row > div:first-child > div:first-child { font-size: 32px !important; }
        }
        @media (max-width: 480px) {
          .tour-row { grid-template-columns: 70px 1fr 22px !important; gap: 12px !important; }
          .tour-row > div:first-child > div:first-child { font-size: 26px !important; }
          .tour-row > div:nth-child(2) > div:first-child { font-size: 16px !important; line-height: 1.25 !important; }
          .tour-row > div:nth-child(2) > div:last-child { font-size: 12px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
//  BOOKING
// ============================================================

function Booking() {
  const [sent, setSent] = useState(false);

  return (
    <section id="booking">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }} className="booking-grid">
          <div>
            <div className="section-label"><Mono>08 / Booking</Mono></div>
            <h2 className="display" style={{ fontSize: 'clamp(48px, 6vw, 96px)', margin: 0 }}>
              Datum frei?<br/>
              <span className="accent">Lass uns spielen.</span>
            </h2>
            <p style={{ marginTop: 32, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 460 }}>
              Schick uns die wichtigsten Eckdaten — wir melden uns innert 48 Stunden mit Verfügbarkeit, Offerte und allem, was du wissen musst.
            </p>

            <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 20 }}>
              <div>
                <Mono>Direkt</Mono>
                <div style={{ fontSize: 22, marginTop: 4 }}><a href="mailto:booking@john-john-xpanded.ch" style={{ color: 'inherit' }}>booking@john-john-xpanded.ch</a></div>
              </div>
              <div>
                <Mono>Telefon</Mono>
                <div style={{ fontSize: 22, marginTop: 4 }}><a href="tel:+41792423650" style={{ color: 'inherit' }}>+41 79 242 36 50</a></div>
              </div>
              <div>
                <Mono>Antwortzeit</Mono>
                <div style={{ fontSize: 22, marginTop: 4 }}>&lt; 48 Stunden</div>
              </div>
            </div>
          </div>

          <div style={{ background: 'var(--bg-card)', padding: 40, border: '1px solid var(--border)' }}>
            {sent ? (
              <div style={{ padding: '60px 0', textAlign: 'center' }}>
                <img src="assets/jjx-logo.svg" alt="John & John Xpanded" style={{ width: 96, height: 96, display: 'block', margin: '0 auto' }} />
                <div className="display" style={{ fontSize: 32, marginTop: 16 }}>Anfrage raus.</div>
                <p style={{ color: 'var(--fg-muted)', marginTop: 12 }}>Wir melden uns innert 48h. Versprochen.</p>
              </div>
            ) : (
              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  const form = e.currentTarget;
                  const data = new FormData(form);
                  // Honeypot check
                  if (data.get('_honey')) { setSent(true); return; }
                  const payload = Object.fromEntries(data);
                  fetch('https://formsubmit.co/ajax/booking@john-john-xpanded.ch', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify(payload),
                  }).then(() => setSent(true))
                    .catch(() => setSent(true));
                }}
                style={{ display: 'flex', flexDirection: 'column', gap: 24 }}
              >
                <input type="hidden" name="_subject" value="Neue Booking-Anfrage — John & John Xpanded" />
                <input type="hidden" name="_template" value="table" />
                <input type="hidden" name="_captcha" value="false" />
                <p style={{ display: 'none' }}>
                  <label>Don't fill this out: <input name="_honey" /></label>
                </p>
                <Mono className="accent">★ Verfügbarkeit prüfen</Mono>

                <div>
                  <label>01 — Dein Name</label>
                  <input type="text" name="name" placeholder="Vor- und Nachname" required />
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                  <div>
                    <label>02 — Wunschdatum</label>
                    <input type="date" name="datum" required />
                  </div>
                  <div>
                    <label>03 — Anlass</label>
                    <select name="anlass" required defaultValue="">
                      <option value="" disabled>Wähle …</option>
                      <option>Hochzeit</option>
                      <option>Firmenanlass</option>
                      <option>Geburtstag</option>
                      <option>Festival / Open Air</option>
                      <option>Anderes</option>
                    </select>
                  </div>
                </div>

                <div>
                  <label>04 — E-Mail</label>
                  <input type="email" name="email" placeholder="du@email.ch" required />
                </div>

                <div>
                  <label>05 — Nachricht</label>
                  <textarea name="nachricht" rows="3" placeholder="Wo, wie viele Gäste, besondere Wünsche …"></textarea>
                </div>

                <button type="submit" className="btn btn-primary btn-arrow" style={{ width: '100%', justifyContent: 'space-between' }}>
                  Anfrage senden <span className="arrow">→</span>
                </button>

                <Mono style={{ color: 'var(--fg-dim)' }}>Unverbindlich. Keine Kosten. Keine Verpflichtung.</Mono>
              </form>
            )}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .booking-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 600px) {
          .booking-grid > div:last-child { padding: 24px !important; }
          .booking-grid form > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
//  FOOTER
// ============================================================

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--border)', padding: '64px 48px 32px', background: '#070707' }} className="site-footer">
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        {/* Giant logo solo — the logo IS the wordmark */}
        <div style={{
          paddingBottom: 56,
          borderBottom: '1px solid var(--border)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: 24,
          textAlign: 'center',
        }} className="footer-hero">
          <img
            src="assets/jjx-logo.svg"
            alt="John & John Xpanded"
            style={{
              width: 'clamp(220px, 32vw, 440px)',
              height: 'clamp(220px, 32vw, 440px)',
              display: 'block',
            }}
          />
          <Mono>★ Live-Band · seit 2014 ★</Mono>
        </div>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }} className="footer-grid">
          <div>
            <Mono>Kontakt</Mono>
            <div style={{ marginTop: 12 }}><a href="mailto:booking@john-john-xpanded.ch" style={{ color: 'inherit' }}>booking@john-john-xpanded.ch</a></div>
            <div><a href="tel:+41792423650" style={{ color: 'inherit' }}>+41 79 242 36 50</a></div>
          </div>
          <div>
            <Mono>Folgen</Mono>
            <div style={{ marginTop: 12 }}>
              <a href="https://www.instagram.com/johnundjohnxpanded/" target="_blank" rel="noopener" style={{ color: 'inherit' }}>Instagram ↗</a>
            </div>
            <div>
              <a href="https://youtu.be/rwE0lq73ZZQ" target="_blank" rel="noopener" style={{ color: 'inherit' }}>YouTube ↗</a>
            </div>
          </div>
          <div>
            <Mono>Sitemap</Mono>
            <div style={{ marginTop: 12 }}><a href="#band">Band</a></div>
            <div><a href="#musik">Musik</a></div>
            <div><a href="#termine">Tournee</a></div>
          </div>
          <div>
            <Mono>Standort</Mono>
            <div style={{ marginTop: 12 }}>Bern, Schweiz</div>
            <div>Bookings CH-weit</div>
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <Mono>© 2026 John &amp; John Xpanded — Live aus der Schweiz.</Mono>
          <Mono>
            <a href="legal/impressum.html" style={{ color: 'inherit' }}>Impressum</a>
            {' · '}
            <a href="legal/datenschutz.html" style={{ color: 'inherit' }}>Datenschutz</a>
          </Mono>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .footer-hero { grid-template-columns: 1fr !important; gap: 24px !important; }
          .site-footer { padding: 48px 24px 24px !important; }
        }
        @media (max-width: 600px) {
          .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .site-footer { padding: 40px 28px 24px !important; }
        }
      `}</style>
    </footer>
  );
}

// ============================================================
//  STICKY MOBILE CTA
// ============================================================

function StickyCTA() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a href="#booking"
      className="sticky-cta"
      style={{
        position: 'fixed',
        bottom: 16, left: 16, right: 16,
        zIndex: 100,
        background: 'var(--accent)',
        color: '#fff',
        padding: '18px 22px',
        display: show ? 'flex' : 'none',
        justifyContent: 'space-between',
        alignItems: 'center',
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 12,
        letterSpacing: '0.12em',
        textTransform: 'uppercase',
        fontWeight: 600,
        boxShadow: '0 12px 32px rgba(0,0,0,0.6)',
      }}>
      <span>★ Jetzt buchen</span>
      <span>→</span>
      <style>{`
        @media (min-width: 900px) { .sticky-cta { display: none !important; } }
      `}</style>
    </a>
  );
}

// ============================================================
//  EXPORTS
// ============================================================

Object.assign(window, {
  Nav, HeroMosaic, About, MusicSection, LiveExperience,
  UseCases, Gallery, Tour, Booking, Footer, StickyCTA,
  Placeholder, Mono, YouTube, Vimeo,
});