/* 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={{
          borderRadius: '50%',
          background: 'rgba(230,57,70,0.95)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', 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>{`
        .yt-play { width: 96px; height: 96px; font-size: 28px; }
        button:hover .yt-play { transform: scale(1.08); }
        @media (max-width: 600px) {
          .yt-play { width: 48px !important; height: 48px !important; font-size: 16px !important; border-width: 1.5px !important; }
        }
      `}</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={{
          borderRadius: '50%',
          background: 'rgba(230,57,70,0.95)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', 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 { width: 96px; height: 96px; font-size: 28px; transition: transform .2s; }
        button:hover .yt-play { transform: scale(1.08); }
        @media (max-width: 600px) {
          .yt-play { width: 48px !important; height: 48px !important; font-size: 16px !important; border-width: 1.5px !important; }
        }
      `}</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="/referenzen" className="mono">04 — Referenzen</a>
          <a href="/repertoire" className="mono">05 — Repertoire</a>
          <a href="#termine" className="mono">06 — Tournee</a>
          <a href="/firmenanlass" className="mono">07 — Firmenanlass</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>
            Event anfragen
          </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>Schweizer Liveband · 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 }}>
            Deine <span style={{ color: 'var(--accent)' }}>Coverband</span><br/>
            aus der Schweiz.
          </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="Coverband John & John Xpanded — Pressefoto: Schweizer Liveband mit Mundartrock, Schweizer Hits und Classic-Rock für Firmenevents und Festivals"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', 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 }}>
            Mundartrock, Schweizer Hits & Classic-Rock — fünf Vollblutmusiker, die für echtes Konzertfeeling sorgen. Unsere Coverband spielt <a href="/firmenanlass" style={{ color: 'var(--accent)' }}>Firmenanlässe</a>, Festivals, Clubs und grosse Partynächte in der ganzen Schweiz. Live, kein Playback.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
            <a href="#booking" className="btn btn-primary btn-arrow">
              Event anfragen <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">
          {[
            ['Coverband Schweiz', 'Mundartrock · Schweizer Hits · Classic-Rock'],
            ['Drei Welten, ein Set', 'Mundartrock, Schweizer Hits, Classic-Rock'],
            ['Fünf Musiker', 'Hanspeter · Ruedi · Plüme · David · Cello'],
            ['Über 180 Auftritte', 'Clubs · Festivals · Firmenanlässe'],
          ].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 { display: none !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
//  COVERBAND SCHWEIZ — SEO-Textabschnitt + interne Link-Box
// ============================================================

function CoverbandSEO() {
  const links = [
    { t: 'Band für Firmenanlass buchen', href: '/firmenanlass', n: '01' },
    { t: 'Unser Repertoire — Mundartrock, Schweizer Hits & Classic-Rock', href: '/repertoire', n: '02' },
    { t: 'Referenzen & bisherige Auftritte ansehen', href: '/referenzen', n: '03' },
    { t: 'Biografie & Press Kit', href: '/press-kit/biografie.html', n: '04' },
  ];
  return (
    <section id="coverband-schweiz">
      <div className="container">
        <div className="section-label"><Mono>Coverband Schweiz</Mono></div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80,
          alignItems: 'start', marginBottom: 72,
        }} className="about-intro">
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5.2vw, 84px)', margin: 0 }}>
            Coverband Schweiz für<br/>
            Firmen, <span className="accent">Festivals</span> und Clubs.
          </h2>
          <div>
            <p style={{ margin: 0, fontSize: 18, lineHeight: 1.7 }}>
              <strong>John &amp; John Xpanded</strong> ist eure Coverband aus der Schweiz für alle, die
              echte Livemusik wollen. Als Liveband spielen wir Mundartrock, Schweizer Hits und
              Classic-Rock – von Polo Hofer, Züri West und Patent Ochsner bis zu den Eagles, Dire
              Straits und Bryan Adams.
            </p>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)' }}>
              Ob als Partyband für die grosse Partynacht, am Firmenanlass, an Festivals, Stadtfesten
              oder in Clubs und Locations: Wir holen ein breites Publikum ab und bringen mehrere
              Generationen zum Mitsingen. Wir bringen eigene Technik, klare Abläufe und ein flexibles
              Programm mit – dezent beim Apéro, stimmungsvoll beim Dinner, mit voller Energie für die
              Party.
            </p>
          </div>
        </div>

        {/* Interne Link-Box */}
        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 40 }}>
          <Mono className="accent" style={{ display: 'block', marginBottom: 28 }}>★ John &amp; John Xpanded buchen</Mono>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
            borderTop: '1px solid var(--border)', borderLeft: '1px solid var(--border)',
          }} className="booklink-grid">
            {links.map((l) => (
              <a key={l.href} href={l.href} className="booklink" style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
                padding: '28px 28px',
                borderRight: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
                textDecoration: 'none', color: 'inherit',
              }}>
                <span style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                  <Mono className="accent" style={{ flexShrink: 0 }}>{l.n}</Mono>
                  <span className="display" style={{ fontSize: 'clamp(19px, 1.7vw, 24px)', lineHeight: 1.15 }}>{l.t}</span>
                </span>
                <span className="accent booklink-arrow" style={{ fontSize: 24, flexShrink: 0, transition: 'transform 0.18s' }}>→</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </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> — eine professionelle Coverband aus der Schweiz, fünf erfahrene Musiker, eine Liveband, die für die Bühne lebt. Wir spielen Mundartrock von Polo Hofer bis Züri West, die grössten Schweizer Hits und Classic-Rock-Klassiker — handgemacht, energiegeladen und mit dem Respekt vor dem Song, den nur Musiker mit dreissig Jahren Bühnenroutine mitbringen.
            </p>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)' }}>
              Drei Stimmen vorne, kein Playback, kein Schnickschnack. Wir machen Clubs voll, Firmenanlässe besonders und Stadtfeste zum Highlight. Live ist nicht Marketing — live ist, wofür wir hier sind.
            </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 auf der Bühne — Coverband Schweiz für Firmenevents, Festivals und Clubs"
            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))',
          }} className="band-live-overlay">
            <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 der Coverband John & John Xpanded, ehemals Schmetterband mit Polo Hofer, Mundartrock Schweiz"
              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: 600px) {
          .band-live-overlay {
            padding: 16px !important;
            background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85)) !important;
          }
          .band-live-overlay .mono { font-size: 9px !important; letter-spacing: 0.08em !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: 280px !important; margin: 0 auto !important; aspect-ratio: 1 / 1 !important; }
        }
        @media (max-width: 600px) {
          .pluemeimg { max-width: 240px !important; }
        }
      `}</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: 'Firmenevents & Corporate', icon: '◆', d: 'Vom GV-Apéro bis zum Mitarbeiterfest. Diskret im Hintergrund oder voll auf der Bühne — wir lesen den Anlass.' },
  { tag: 'Clubs & Bars', icon: '♥', d: 'Vom Rox in Bern bis ins Berner Oberland: dort, wo man die Band hört, sieht und spürt. Konzertfeeling auf jeder Bühne.' },
  { tag: 'Stadtfeste & Festivals', icon: '☆', d: 'Open Air, Plug & Play. Erfahrene Bühnen-Crew mit eigener Technik. Veranstalter wissen: kein Theater, nur Show.' },
  { tag: 'Private Anlässe & Partys', icon: '★', d: 'Runde Geburtstage, Jubiläen, grosse Feste. Wenn der Saal voll werden soll — wir bringen die Energie.' },
];

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 }}>
              Liveband für Firmenevents,<br/>
              Festivals &amp; Clubs.
            </h2>
          </div>
          <Mono style={{ maxWidth: 320, color: 'var(--fg-muted)' }}>
            Über 180 Auftritte in 12 Jahren — von der Clubbühne bis zum Stadtfest.
          </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 — Coverband Schweiz live in der Rox Music Bar Bern, Mundartrock 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 Gastsängerin — Mundart-Coverband Schweiz, Konzertfeeling in der Rox Music Bar"
            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 Gastsängerin live, Schweizer Coverband mit Mundart und Classic-Rock"
            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, Mundartrock-Coverband Schweiz live"
            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, Coverband 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-drummer-portrait-sonor-rox-music-bar.jpg"
            alt="John & John Xpanded — Schlagzeuger mit Sonor Drums live, Schweizer Coverband am Konzert"
            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, Coverband für Schweizer Firmenevents und Festivals"
            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-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
          .gallery-grid > div { grid-column: span 1 !important; }
          .gallery-grid > div:nth-child(n+4) { grid-column: span 1 !important; }
          .gallery-header, .gallery-foot { padding-left: 20px !important; padding-right: 20px !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(/[,\n]/).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>09 / 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">★ Event anfragen</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>Firmenanlass</option>
                      <option>Club / Bar</option>
                      <option>Festival / Open Air</option>
                      <option>Stadtfest</option>
                      <option>Geburtstag / Privatfeier</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>
  );
}

// ============================================================
//  PRESS KIT
// ============================================================

function PressKit() {
  const items = [
    {
      num: '01',
      title: 'Pressefotos',
      desc: 'Hi-Res Bandfoto für Print und Web. Aktuell als Vierer-Foto — neue 5er-Aufnahme folgt.',
      meta: 'JPG · 2000 × 2161',
      href: 'assets/band-presse.jpg',
      download: true,
    },
    {
      num: '02',
      title: 'Tech Rider',
      desc: 'Bühnenplan, Backline, Stromanschlüsse und Sound-Anforderungen — als PDF.',
      meta: 'PDF · Druckfertig',
      href: 'assets/jjx-tech-rider.pdf',
      download: true,
    },
    {
      num: '03',
      title: 'Biografie',
      desc: 'Kurz- und Langversion auf Deutsch — für Anmoderation, Programm und Presse.',
      meta: 'Online · PDF-Druck',
      href: 'press-kit/biografie.html',
      download: false,
      external: true,
    },
    {
      num: '04',
      title: 'Logo-Paket',
      desc: 'JJX-Logo in 5 Formaten — SVG, EPS und PNG (transparent, 500 & 1500 px).',
      meta: 'SVG · EPS · PNG',
      href: 'press-kit/logos.html',
      download: false,
      external: true,
    },
  ];

  return (
    <section id="press">
      <div className="container">
        <div className="section-label"><Mono>10 / Press Kit</Mono></div>

        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-end',
          flexWrap: 'wrap',
          gap: 24,
          marginBottom: 56,
        }} className="press-header">
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 76px)', margin: 0, maxWidth: 720 }}>
            Für Veranstalter<br/>&amp; Presse.
          </h2>
          <Mono style={{ maxWidth: 320, color: 'var(--fg-muted)' }}>
            Alles, was du brauchst — kompakt zum Download oder direkt von uns.
          </Mono>
        </div>

        <div style={{
          marginBottom: 56,
          padding: '32px 36px',
          border: '1px solid var(--accent)',
          background: 'rgba(230,57,70,0.06)',
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          gap: 32,
          alignItems: 'center',
        }} className="press-zip-banner">
          <div>
            <Mono className="accent" style={{ marginBottom: 8, display: 'block' }}>★ Alles auf einmal</Mono>
            <div className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', lineHeight: 1.1, margin: 0 }}>
              Komplettes Press Kit
            </div>
            <p style={{ marginTop: 12, color: 'var(--fg-muted)', maxWidth: 520, marginBottom: 0 }}>
              Bandfoto, Tech Rider, Logo-Paket — alles in einer ZIP-Datei. Für Veranstalter, die einmal laden und fertig sein wollen.
            </p>
          </div>
          <a
            href="assets/john-john-xpanded-press-kit.zip"
            download
            className="btn btn-primary btn-arrow"
            style={{ whiteSpace: 'nowrap' }}
          >
            ZIP herunterladen <span className="arrow">↓</span>
          </a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0 }} className="press-grid">
          {items.map((it, i) => {
            const linkProps = it.download
              ? { href: it.href, download: '' }
              : it.external
              ? { href: it.href, target: '_blank', rel: 'noopener' }
              : { href: it.href };
            return (
              <a
                key={it.num}
                {...linkProps}
                style={{
                  display: 'block',
                  padding: '40px 32px',
                  borderTop: '1px solid var(--border)',
                  borderLeft: i % 2 === 1 ? '1px solid var(--border)' : 'none',
                  transition: 'background 0.2s',
                  color: 'inherit',
                  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: 32 }}>
                  <Mono>{it.num}</Mono>
                  <span className="accent" style={{ fontSize: 24, lineHeight: 1 }}>↓</span>
                </div>
                <div className="display" style={{ fontSize: 40 }}>{it.title}</div>
                <p style={{ marginTop: 16, color: 'var(--fg-muted)', lineHeight: 1.6, maxWidth: 420 }}>{it.desc}</p>
                <Mono className="accent" style={{ marginTop: 24, display: 'block' }}>{it.meta}</Mono>
              </a>
            );
          })}
        </div>

        <div style={{ marginTop: 48, padding: '32px 0', borderTop: '1px solid var(--border)' }}>
          <Mono>★ Brauchst du etwas anderes?</Mono>
          <p style={{ marginTop: 12, color: 'var(--fg-muted)', maxWidth: 640 }}>
            Stage Plot, Hospitality Rider, weitere Fotos oder ein Factsheet?
            Schreib uns kurz: <a href="mailto:booking@john-john-xpanded.ch" className="accent" style={{ textDecoration: 'underline' }}>booking@john-john-xpanded.ch</a>
          </p>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .press-grid { grid-template-columns: 1fr !important; }
          .press-grid > a:nth-child(2) { border-left: none !important; }
          .press-header { flex-direction: column; align-items: flex-start !important; }
          .press-zip-banner { grid-template-columns: 1fr !important; gap: 20px !important; padding: 24px !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>★ Event anfragen</span>
      <span>→</span>
      <style>{`
        @media (min-width: 900px) { .sticky-cta { display: none !important; } }
      `}</style>
    </a>
  );
}

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

// ============================================================
//  FAQ — Häufige Fragen zur Coverband-Buchung
// ============================================================

const FAQ_ITEMS = [
  {
    q: 'Was kostet eine Coverband in der Schweiz?',
    a: 'Der Preis richtet sich nach Anlass, Spieldauer und Besetzung. Für eine genaue Offerte kontaktiert uns einfach mit den Eckdaten eures Events — wir machen euch ein faires, transparentes Angebot.',
  },
  {
    q: 'Welche Musik spielt John & John Xpanded?',
    a: 'Mundartrock, Schweizer Hits und Classic-Rock — die grossen Mitsing- und Tanznummern aus mehreren Jahrzehnten. Polo Hofer, Züri West, Patent Ochsner, Gölä bis Eagles, Dire Straits und Bryan Adams.',
  },
  {
    q: 'In welcher Region tretet ihr auf?',
    a: 'Wir sind in der ganzen Schweiz unterwegs. Unsere Musiker stammen aus verschiedenen Kantonen — ihr bucht uns von Zürich bis Genf, von Bern bis ins Tessin.',
  },
  {
    q: 'Wie weit im Voraus sollte man eine Coverband buchen?',
    a: 'Beliebte Daten in der Firmenfeier- und Event-Saison (Mai–September, November–Dezember) sind oft Monate im Voraus ausgebucht. Am besten frühzeitig anfragen — wir reservieren euch unverbindlich.',
  },
  {
    q: 'Spielt ihr auch an Firmenanlässen und Mitarbeiterfesten?',
    a: 'Ja — Firmenevents sind unser Kerngeschäft. Wir passen die Setlist und die Lautstärke an euren Anlass an: vom stimmungsvollen Apéro bis zur Vollgas-Partynacht.',
  },
  {
    q: 'Bringt ihr eigene Technik mit?',
    a: 'Ja. Wir haben eigene PA, Licht und Bühnentechnik — Plug & Play für Veranstalter. Bei grösseren Events arbeiten wir gerne mit eurem Technik-Team zusammen.',
  },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <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>08 / FAQ</Mono></div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 76px)', margin: 0 }}>
              Häufige Fragen zur<br/>
              <span className="accent">Coverband-Buchung.</span>
            </h2>
          </div>
          <Mono style={{ maxWidth: 320, color: 'var(--fg-muted)' }}>
            Antwort fehlt? Schreibt uns direkt — wir melden uns innert 48h.
          </Mono>
        </div>

        <div style={{ borderTop: '1px solid var(--border)' }}>
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid var(--border)' }}>
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{
                    width: '100%',
                    background: 'transparent',
                    border: 'none',
                    color: 'inherit',
                    padding: '28px 0',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'flex-start',
                    gap: 24,
                    textAlign: 'left',
                    cursor: 'pointer',
                    fontFamily: 'inherit',
                  }}
                >
                  <span className="display" style={{ fontSize: 'clamp(22px, 2.2vw, 32px)', lineHeight: 1.2, flex: 1 }}>
                    {item.q}
                  </span>
                  <span className="accent" style={{ fontSize: 28, lineHeight: 1, transition: 'transform 0.2s', transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)', flexShrink: 0, marginTop: 8 }}>
                    +
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 400 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.3s ease',
                }}>
                  <p style={{
                    margin: 0,
                    paddingBottom: 28,
                    paddingRight: 60,
                    fontSize: 17,
                    lineHeight: 1.7,
                    color: 'var(--fg-muted)',
                    maxWidth: 820,
                  }}>
                    {item.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

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