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

// ============ HEADER ============
function Header({ accent }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(247,242,232,0.96)' : 'rgba(247,242,232,0)',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      transition: 'all .3s ease',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 32px' }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src="assets/logo.jpg" alt="HOGA-MS" style={{ height: 52, width: 'auto', mixBlendMode: 'multiply' }} />
        </a>
        <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          {[['Verein','about'],['Silberne Kiepe','kiepe'],['Ausbildung','ausbildung'],['Termine','termine'],['Aktuelles','news'],['Kontakt','kontakt']].map(([l,h]) => (
            <a key={h} href={'#'+h} style={{ color: scrolled ? 'var(--ink)' : 'var(--ink)', fontSize: 14, fontWeight: 500, letterSpacing: '0.02em' }}>{l}</a>
          ))}
          <a href="#mitglied" style={{
            background: 'var(--green)', color: '#fff',
            padding: '10px 20px', borderRadius: 999, fontSize: 14, fontWeight: 600,
            letterSpacing: '0.02em', boxShadow: '0 2px 12px rgba(31,107,58,0.25)'
          }}>Mitglied werden →</a>
        </nav>
      </div>
    </header>
  );
}

// ============ HERO ============
function Hero({ heroMode }) {
  const imgs = window.HERO_IMAGES;
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    if (heroMode !== 'slideshow') return;
    const t = setInterval(() => setIdx(i => (i+1) % imgs.length), 5200);
    return () => clearInterval(t);
  }, [heroMode, imgs.length]);

  return (
    <section id="top" style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden', color: '#fff' }}>
      <div style={{ position: 'absolute', inset: 0 }}>
        {imgs.map((src, i) => (
          <div key={src} style={{
            position: 'absolute', inset: 0,
            backgroundImage: `url(${src})`, backgroundSize: 'cover', backgroundPosition: 'center',
            opacity: heroMode === 'slideshow' ? (i === idx ? 1 : 0) : (i === 0 ? 1 : 0),
            transition: 'opacity 1.8s ease-in-out',
            transform: heroMode === 'slideshow' ? `scale(${1 + (i === idx ? 0.04 : 0)})` : 'none',
            transitionProperty: 'opacity, transform',
            transitionDuration: '1.8s, 6s'
          }} />
        ))}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,15,10,0.55) 0%, rgba(20,15,10,0.3) 40%, rgba(20,15,10,0.85) 100%)' }} />
      </div>

      <div style={{ position: 'relative', zIndex: 2, minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '120px 32px 80px' }}>
        <div className="container" style={{ padding: 0 }}>
          <div style={{ display: 'inline-block', padding: '6px 14px', border: '1px solid rgba(255,255,255,0.4)', borderRadius: 999, fontSize: 12, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 28, color: 'var(--gold-warm)' }}>
            Gegründet 07.04.2026 · Stadthotel Münster
          </div>
          <h1 className="serif" style={{ fontSize: 'clamp(48px, 8vw, 112px)', fontWeight: 500, lineHeight: 0.98, maxWidth: 1100, textWrap: 'balance', marginBottom: 32 }}>
            Münster isst und<br/>
            schläft gut — <em style={{ color: 'var(--gold-warm)', fontWeight: 400 }}>dank uns.</em>
          </h1>
          <p style={{ fontSize: 20, maxWidth: 640, lineHeight: 1.5, opacity: 0.92, marginBottom: 40 }}>
            Der Hotel- und Gaststättenverein Münster — das Netzwerk, das der lokalen Gastro-Szene den Rücken stärkt. Kein Paragrafen-Club. Ehrenamt aus Überzeugung.
          </p>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <a href="#mitglied" style={{ background: 'var(--gold-warm)', color: 'var(--ink)', padding: '16px 32px', borderRadius: 4, fontWeight: 600, letterSpacing: '0.02em' }}>Mitglied werden</a>
            <a href="#kiepe" style={{ background: 'rgba(255,255,255,0.1)', color: '#fff', padding: '16px 32px', borderRadius: 4, fontWeight: 600, letterSpacing: '0.02em', border: '1px solid rgba(255,255,255,0.3)', backdropFilter: 'blur(4px)' }}>Silberne Kiepe 2026 →</a>
          </div>
        </div>
        {heroMode === 'slideshow' && (
          <div style={{ position: 'absolute', bottom: 32, right: 32, display: 'flex', gap: 8 }}>
            {imgs.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} style={{
                width: i === idx ? 32 : 8, height: 4, border: 0, padding: 0, borderRadius: 2,
                background: i === idx ? 'var(--gold-warm)' : 'rgba(255,255,255,0.4)',
                transition: 'all .4s', cursor: 'pointer'
              }} />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// ============ INTRO / ABOUT ============
function About() {
  return (
    <section id="about" data-screen-label="Verein" style={{ padding: '120px 0', background: 'var(--paper)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--green)', fontWeight: 600, marginBottom: 20 }}>
            ① Warum wir das machen
          </div>
          <h2 className="serif" style={{ fontSize: 'clamp(36px,4.5vw,64px)', lineHeight: 1, marginBottom: 28, color: 'var(--ink)' }}>
            In der Küche ist es <em style={{ color: 'var(--green)' }}>stressig genug.</em>
          </h2>
          <p style={{ color: 'var(--ink-soft)', fontSize: 18 }}>
            Da braucht man jemanden, der sich im Hintergrund um das große Ganze kümmert. Genau das tun wir — vom Empfang bis zur Stadtpolitik.
          </p>
        </div>
        <div>
          <p style={{ fontSize: 19, lineHeight: 1.7, marginBottom: 24 }}>
            Wir vertreten eure Interessen gegenüber der Stadt, fördern den Nachwuchs und sorgen dafür, dass die kulinarische Kultur in Münster nicht nur überlebt, sondern <strong>richtig aufblüht.</strong>
          </p>
          <p style={{ fontSize: 19, lineHeight: 1.7, color: 'var(--ink-soft)' }}>
            Wir sind eine Gemeinschaft, die sich gegenseitig unterstützt. Bei uns gibt es kein Gegeneinander, sondern nur ein Miteinander. Der Vorstand arbeitet komplett ehrenamtlich.
          </p>
          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 32 }}>
            {[
              { n: '01', t: 'Networking pur', d: 'Tausch dich mit Kollegen aus, die genau die gleichen Herausforderungen haben wie du.' },
              { n: '02', t: 'Nachwuchs-Power', d: 'Wir feiern unsere Azubis bei der Lossprechung und bieten jungen Talenten eine Bühne.' },
              { n: '03', t: 'Voller Einsatz', d: 'Ob Politik oder Tourismus — wir mischen uns ein, damit Münster ein Top-Pflaster bleibt.' },
            ].map(b => (
              <div key={b.n} style={{ borderTop: '1px solid var(--line)', paddingTop: 20 }}>
                <div className="serif" style={{ fontSize: 32, color: 'var(--gold)', fontStyle: 'italic', marginBottom: 8 }}>{b.n}</div>
                <h3 className="serif" style={{ fontSize: 22, marginBottom: 8 }}>{b.t}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.55, margin: 0 }}>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FOUNDERS ============
function Founders() {
  return (
    <section style={{ padding: '100px 0', background: 'var(--paper-warm)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48, flexWrap: 'wrap', gap: 16 }}>
          <h2 className="serif" style={{ fontSize: 'clamp(32px,4vw,52px)' }}>Wer wir sind — die Gründungsmitglieder</h2>
          <div style={{ fontSize: 13, color: 'var(--ink-soft)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>07. April 2026 · Stadthotel Münster</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(220px,1fr))', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
          {window.FOUNDERS.map((f, i) => (
            <div key={i} style={{ background: 'var(--paper-warm)', padding: '28px 24px', minHeight: 140 }}>
              <div className="serif" style={{ fontSize: 12, color: 'var(--gold)', marginBottom: 16, letterSpacing: '0.1em' }}>· 0{i+1}</div>
              <h3 className="serif" style={{ fontSize: 22, marginBottom: 4, lineHeight: 1.15 }}>{f.name}</h3>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: 0 }}>{f.line}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ KIEPE — big bg image with overlay + timeline ============
function Kiepe({ showCountdown }) {
  const [filter, setFilter] = useState('silberne');
  const [decade, setDecade] = useState('all');
  const all = window.HALL_OF_FAME;
  const byKind = filter === 'all' ? all : all.filter(h => h.kind === filter);
  const decades = useMemo(() => {
    const ds = new Set(byKind.map(h => Math.floor(h.year/10)*10));
    return ['all', ...Array.from(ds).sort((a,b)=>b-a)];
  }, [filter]);
  const filtered = decade === 'all' ? byKind : byKind.filter(h => Math.floor(h.year/10)*10 === decade);
  // descending
  const sorted = [...filtered].sort((a,b) => b.year - a.year);

  // Countdown
  const [now, setNow] = useState(Date.now());
  useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []);
  const target = new Date('2026-11-29T19:00:00+01:00').getTime();
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff/86400000);
  const hours = Math.floor((diff%86400000)/3600000);
  const mins = Math.floor((diff%3600000)/60000);
  const secs = Math.floor((diff%60000)/1000);

  return (
    <section id="kiepe" data-screen-label="Silberne Kiepe" style={{ position: 'relative', color: '#f6efde' }}>
      {/* HERO BLOCK */}
      <div style={{ position: 'relative', minHeight: '90vh', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'url(assets/kiepe-2024-kaiser-doelling.jpg)',
          backgroundSize: 'cover', backgroundPosition: 'center 30%',
          filter: 'saturate(0.85)'
        }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,10,5,0.75) 0%, rgba(15,10,5,0.55) 50%, rgba(15,10,5,0.92) 100%)' }} />
        <div className="container" style={{ position: 'relative', zIndex: 2, padding: '140px 32px 80px' }}>
          <div style={{ display: 'inline-block', padding: '6px 14px', border: '1px solid rgba(201,163,97,0.5)', borderRadius: 999, fontSize: 12, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 28, color: 'var(--gold-warm)' }}>
            ② Das Sahnehäubchen · seit Jahrzehnten
          </div>
          <h2 className="serif" style={{ fontSize: 'clamp(56px, 9vw, 140px)', fontWeight: 500, lineHeight: 0.95, maxWidth: 1100, marginBottom: 32, textWrap: 'balance' }}>
            Die <em style={{ color: 'var(--gold-warm)', fontWeight: 400 }}>Silberne Kiepe</em><br/>
            <span style={{ fontSize: '0.55em', opacity: 0.85 }}>Wenn Leidenschaft ein Zuhause findet.</span>
          </h2>
          <p style={{ fontSize: 20, maxWidth: 720, lineHeight: 1.55, opacity: 0.88, marginBottom: 48 }}>
            Eine Hommage an die Botschafter der Münsteraner Gastlichkeit. Keine Trophäe aus Edelmetall — ein Symbol für das Herzblut, das hinter verschlossenen Küchentüren fließt.
          </p>

          {showCountdown && (
            <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'flex-end' }}>
              <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.7, marginBottom: 12 }}>29. November 2026 · 19:00</div>
              <div style={{ display: 'flex', gap: 28 }}>
                {[['Tage',days],['Std',hours],['Min',mins],['Sek',secs]].map(([l,v]) => (
                  <div key={l}>
                    <div className="serif" style={{ fontSize: 64, lineHeight: 1, color: 'var(--gold-warm)', fontWeight: 500 }}>{String(v).padStart(2,'0')}</div>
                    <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.7, marginTop: 6 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* PILLARS */}
      <div style={{ background: '#1a140d', padding: '100px 0', position: 'relative' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 48 }}>
            {[
              { t: 'Herausragendes Engagement', d: 'Menschen, die weit über das Übliche hinausgehen — Tag für Tag, Abend für Abend.' },
              { t: 'Wurzeln & Visionen', d: 'Westfälische Tradition trifft auf mutige neue Wege. Beides gehört zusammen.' },
              { t: 'Gemeinschaft', d: 'Persönlichkeiten, die Münster als Gastgeber nach außen strahlen lassen.' },
            ].map(p => (
              <div key={p.t}>
                <div style={{ width: 40, height: 1, background: 'var(--gold-warm)', marginBottom: 20 }} />
                <h3 className="serif" style={{ fontSize: 26, marginBottom: 12, color: '#f6efde' }}>{p.t}</h3>
                <p style={{ color: 'rgba(246,239,222,0.7)', fontSize: 16, lineHeight: 1.6, margin: 0 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* GALLERY STRIP */}
      <div style={{ background: '#1a140d', paddingBottom: 100 }}>
        <div className="container">
          <h3 className="serif" style={{ fontSize: 36, marginBottom: 36, color: '#f6efde' }}>Momente aus 2022 & 2024</h3>
        </div>
        <div style={{ display: 'flex', gap: 16, overflowX: 'auto', padding: '0 32px', scrollSnapType: 'x mandatory', scrollBehavior: 'smooth' }}>
          {window.KIEPE_GALLERY.map((g, i) => (
            <figure key={i} style={{ flex: '0 0 380px', margin: 0, scrollSnapAlign: 'start' }}>
              <div style={{ aspectRatio: '4/5', backgroundImage: `url(${g.src})`, backgroundSize: 'cover', backgroundPosition: 'center', filter: 'saturate(0.9)' }} />
              <figcaption style={{ fontSize: 13, padding: '12px 0', color: 'rgba(246,239,222,0.65)', letterSpacing: '0.02em' }}>{g.caption}</figcaption>
            </figure>
          ))}
        </div>
      </div>

      {/* HALL OF FAME TIMELINE */}
      <div style={{ background: '#15110a', padding: '120px 0 140px', borderTop: '1px solid rgba(201,163,97,0.15)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 24 }}>
            <div>
              <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-warm)', marginBottom: 16 }}>Hall of Fame</div>
              <h3 className="serif" style={{ fontSize: 'clamp(36px,4.5vw,56px)', color: '#f6efde', maxWidth: 720 }}>Die Preisträger:innen — ein Vorbild, das inspiriert.</h3>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-end' }}>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {[['silberne','Silberne Kiepe'],['gastro','Gastro-Kiepe'],['all','Alle']].map(([k,l]) => (
                  <button key={k} onClick={() => { setFilter(k); setDecade('all'); }} style={{
                    padding: '10px 18px', borderRadius: 999, border: '1px solid',
                    borderColor: filter === k ? 'var(--gold-warm)' : 'rgba(246,239,222,0.25)',
                    background: filter === k ? 'var(--gold-warm)' : 'transparent',
                    color: filter === k ? '#1a140d' : '#f6efde',
                    fontSize: 13, fontWeight: 700, letterSpacing: '0.05em', cursor: 'pointer', transition: 'all .2s'
                  }}>{l}</button>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {decades.map(d => (
                  <button key={d} onClick={() => setDecade(d)} style={{
                    padding: '5px 12px', borderRadius: 999, border: '1px solid',
                    borderColor: decade === d ? 'var(--gold-warm)' : 'rgba(246,239,222,0.15)',
                    background: 'transparent',
                    color: decade === d ? 'var(--gold-warm)' : 'rgba(246,239,222,0.7)',
                    fontSize: 12, fontWeight: 500, letterSpacing: '0.05em', cursor: 'pointer', transition: 'all .2s'
                  }}>{d === 'all' ? 'Alle Jahrzehnte' : d + 'er'}</button>
                ))}
              </div>
            </div>
          </div>

          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', left: 24, top: 0, bottom: 0, width: 1, background: 'rgba(201,163,97,0.3)' }} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {sorted.map((h, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 32, alignItems: 'center', position: 'relative', padding: '14px 0', opacity: h.cancelled ? 0.55 : 1 }}>
                  <div style={{ position: 'absolute', left: 18, top: '50%', marginTop: -7, width: 13, height: 13, borderRadius: '50%', background: h.cancelled ? 'transparent' : 'var(--gold-warm)', border: h.cancelled ? '1px dashed rgba(201,163,97,0.5)' : '3px solid #15110a' }} />
                  <div className="serif" style={{ fontSize: 44, color: 'var(--gold-warm)', textAlign: 'left', paddingLeft: 60, lineHeight: 1, fontStyle: 'italic' }}>{h.year}</div>
                  <div style={{ display: 'grid', gridTemplateColumns: h.img ? '80px 1fr auto' : '1fr auto', gap: 20, alignItems: 'center', padding: '8px 24px', borderLeft: '1px solid rgba(201,163,97,0.15)' }}>
                    {h.img && <div style={{ width: 80, height: 80, backgroundImage: `url(${h.img})`, backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: '50%', filter: 'sepia(0.2)' }} />}
                    <div>
                      <h4 className="serif" style={{ fontSize: 24, color: h.cancelled ? 'rgba(246,239,222,0.55)' : '#f6efde', margin: 0, fontStyle: h.cancelled ? 'italic' : 'normal', fontWeight: 500 }}>
                        {h.honorific && !h.cancelled && <span style={{ color: 'rgba(246,239,222,0.55)', fontSize: 16, fontStyle: 'italic', marginRight: 8 }}>{h.honorific}</span>}
                        {h.name}
                        {h.deceased && <span style={{ color: 'rgba(201,163,97,0.7)', fontSize: 18, marginLeft: 6 }}>†</span>}
                      </h4>
                    </div>
                    {!h.cancelled && (
                      <span style={{ fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: h.kind === 'gastro' ? 'var(--gold-warm)' : 'rgba(246,239,222,0.5)', border: '1px solid', borderColor: h.kind === 'gastro' ? 'var(--gold-warm)' : 'rgba(246,239,222,0.2)', padding: '4px 10px', borderRadius: 999, whiteSpace: 'nowrap' }}>
                        {h.kind === 'gastro' ? 'Gastro' : 'Silberne'}
                      </span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <p style={{ marginTop: 56, textAlign: 'center', color: 'rgba(246,239,222,0.45)', fontSize: 13, fontStyle: 'italic' }}>
            † verstorben · Die Silberne Kiepe wird seit 1984 verliehen, die Gastro-Kiepe seit 2022.
          </p>
        </div>
      </div>
    </section>
  );
}

// ============ AUSBILDUNG / FREISPRECHUNG ============
function Ausbildung() {
  return (
    <section id="ausbildung" data-screen-label="Freisprechungsfeier" style={{ padding: '120px 0', background: 'var(--paper)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--green)', fontWeight: 600, marginBottom: 20 }}>
            ③ Freisprechungsfeier · Nachwuchs
          </div>
          <h2 className="serif" style={{ fontSize: 'clamp(36px,5vw,72px)', lineHeight: 1, marginBottom: 32 }}>
            Vom Lehrling zur <em style={{ color: 'var(--green)' }}>Fachkraft.</em><br/>
            Ein Meilenstein mit Tradition.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.7, marginBottom: 20 }}>
            Bei einer Freisprechung im Gastgewerbe werden Auszubildende nach bestandener Abschlussprüfung feierlich in den Gesellenstand erhoben. Sie erhalten ihre Gesellenbriefe, werden offiziell „losgesprochen" und als vollwertige Fachkräfte aufgenommen.
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--ink-soft)', marginBottom: 32 }}>
            Diesen Meilenstein würdig zu erhalten ist eine unserer ehrenvollsten Aufgaben. Gemeinsam mit der <strong>IHK Münster</strong> bieten wir alle gastronomischen Berufe als Ausbildungsberufe in unseren Betrieben an — und informieren interessierte Menschen sehr gerne.
          </p>
          <a href="#kontakt" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--green)', fontWeight: 600, borderBottom: '1px solid var(--green)', paddingBottom: 2 }}>
            Ausbildung anfragen →
          </a>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ aspectRatio: '4/5', background: 'linear-gradient(135deg, var(--paper-deep) 0%, var(--paper-warm) 100%)', position: 'relative', overflow: 'hidden', border: '1px solid var(--line)' }}>
            <div style={{ position: 'absolute', inset: 24, border: '1px solid var(--gold)', padding: '40px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div className="serif" style={{ fontSize: 14, fontStyle: 'italic', color: 'var(--gold)', letterSpacing: '0.1em' }}>· Gesellenbrief ·</div>
                <h3 className="serif" style={{ fontSize: 42, lineHeight: 1.1, marginTop: 32, color: 'var(--ink)' }}>Hiermit wird bestätigt, dass …</h3>
                <p style={{ color: 'var(--ink-soft)', marginTop: 24, lineHeight: 1.6 }}>… nach erfolgreich abgelegter Abschlussprüfung in das Gastgewerbe aufgenommen wird.</p>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '1px solid var(--gold)', paddingTop: 16, fontSize: 12, color: 'var(--ink-soft)', letterSpacing: '0.08em' }}>
                <span>HOGA-MS e.V.</span>
                <span>IHK MÜNSTER</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ CALENDAR ============
function Calendar({ events }) {
  const items = events && events.length ? events : window.EVENTS;
  return (
    <section id="termine" data-screen-label="Termine" style={{ padding: '120px 0', background: 'var(--paper-warm)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--green)', fontWeight: 600, marginBottom: 16 }}>④ Kalender</div>
          <h2 className="serif" style={{ fontSize: 'clamp(36px,4.5vw,60px)' }}>Anstehende Termine</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: 24 }}>
          {items.map((e, i) => (
            <article key={i} style={{
              background: e.primary ? '#1a140d' : '#fff',
              color: e.primary ? '#f6efde' : 'var(--ink)',
              padding: '36px 32px', border: e.primary ? 'none' : '1px solid var(--line)', position: 'relative',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 280
            }}>
              <div style={{ position: 'absolute', top: 16, right: 16, fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: e.primary ? 'var(--gold-warm)' : 'var(--gold)', fontWeight: 600 }}>{e.tag}</div>
              <div>
                <div className="serif" style={{ fontSize: 14, fontStyle: 'italic', color: e.primary ? 'var(--gold-warm)' : 'var(--gold)', marginBottom: 8 }}>· {e.time}{e.time && e.time !== 'tba' ? ' Uhr' : ''} ·</div>
                <div className="serif" style={{ fontSize: 32, lineHeight: 1.1, marginBottom: 8 }}>{window.formatDate(e.date)}</div>
                <h3 className="serif" style={{ fontSize: 26, marginBottom: 14, lineHeight: 1.15 }}>{e.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.5, opacity: 0.85, margin: 0 }}>{e.desc}</p>
              </div>
              <div style={{ marginTop: 28, paddingTop: 16, borderTop: `1px solid ${e.primary ? 'rgba(201,163,97,0.2)' : 'var(--line)'}`, fontSize: 13, opacity: 0.75 }}>
                📍 {e.place}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ NEWS ============
function News({ news }) {
  const [openIdx, setOpenIdx] = useState(null);
  const items = news && news.length ? news : window.NEWS_ITEMS;
  const lead = items.find(n => n.lead) || items[0];
  const rest = items.filter(n => n !== lead);
  return (
    <section id="news" data-screen-label="Aktuelles" style={{ padding: '120px 0', background: 'var(--paper)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ marginBottom: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--green)', fontWeight: 600, marginBottom: 16 }}>⑤ Aktuelles</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px,4.5vw,60px)' }}>Was uns gerade bewegt</h2>
          </div>
          <a href="#" style={{ fontSize: 14, fontWeight: 600, letterSpacing: '0.05em' }}>Alle News →</a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 56 }}>
          <article style={{ background: '#fff', border: '1px solid var(--line)', overflow: 'hidden' }}>
            <div style={{ aspectRatio: '16/10', backgroundImage: `url(${lead.image || 'assets/kiepe-2024-vorstand.jpg'})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
            <div style={{ padding: '36px 40px 44px' }}>
              <div style={{ fontSize: 12, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--gold)', fontWeight: 600, marginBottom: 16 }}>{lead.cat} · {window.formatDateShort(lead.date)}</div>
              <h3 className="serif" style={{ fontSize: 'clamp(28px,3.2vw,42px)', lineHeight: 1.1, marginBottom: 20 }}>{lead.title}</h3>
              <p style={{ fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.65, marginBottom: 24 }}>{lead.excerpt}</p>
              <details>
                <summary style={{ cursor: 'pointer', color: 'var(--green)', fontWeight: 600, listStyle: 'none' }}>Mehr lesen →</summary>
                <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.7, color: 'var(--ink-soft)' }}>{lead.body}</p>
              </details>
            </div>
          </article>

          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {rest.map((n, i) => (
              <article key={i} style={{ borderTop: i === 0 ? 'none' : '1px solid var(--line)', padding: '24px 0' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--gold)', fontWeight: 600, marginBottom: 8 }}>{n.cat} · {window.formatDateShort(n.date)}</div>
                <h4 className="serif" style={{ fontSize: 22, lineHeight: 1.2, marginBottom: 8 }}>{n.title}</h4>
                <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55, margin: 0 }}>{n.excerpt}</p>
                <button onClick={() => setOpenIdx(openIdx === i ? null : i)} style={{ background: 'transparent', border: 0, padding: '12px 0 0', color: 'var(--green)', fontWeight: 600, fontSize: 14, cursor: 'pointer' }}>
                  {openIdx === i ? 'Weniger zeigen ↑' : 'Mehr lesen →'}
                </button>
                {openIdx === i && <p style={{ marginTop: 8, fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-soft)', borderLeft: '2px solid var(--gold)', paddingLeft: 16 }}>{n.body}</p>}
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ MEMBERSHIP FORM ============
function Membership() {
  const [data, setData] = useState({ betrieb: '', name: '', email: '', tel: '', kategorie: 'gastronomie', nachricht: '' });
  const [sent, setSent] = useState(false);
  const set = k => e => setData(d => ({ ...d, [k]: e.target.value }));
  const submit = e => { e.preventDefault(); setSent(true); };

  return (
    <section id="mitglied" data-screen-label="Mitglied werden" style={{ padding: '140px 0', background: '#1a140d', color: '#f6efde', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.07, backgroundImage: 'url(assets/kiepe-2024-publikum.jpg)', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'saturate(0)' }} />
      <div className="container" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-warm)', fontWeight: 600, marginBottom: 20 }}>Werd Teil der Truppe!</div>
          <h2 className="serif" style={{ fontSize: 'clamp(40px,5.5vw,80px)', lineHeight: 0.98, marginBottom: 28 }}>
            Wenn du Münsteraner <em style={{ color: 'var(--gold-warm)' }}>Gastfreundschaft</em> im Blut hast — gehörst du zu uns.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, opacity: 0.85, marginBottom: 24 }}>
            Egal ob kleines Café, traditionsreiches Hotel oder Förderer der Szene. Pro Mitgliedschaft ist ein kostenloser Eintritt zur <strong>Silbernen Kiepe</strong> bereits inklusive.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <a href="#" style={{ background: 'var(--gold-warm)', color: '#1a140d', padding: '14px 24px', borderRadius: 4, fontWeight: 600, fontSize: 14 }}>📄 Beitrittserklärung (PDF) ↓</a>
            <a href="#" style={{ border: '1px solid rgba(246,239,222,0.3)', color: '#f6efde', padding: '14px 24px', borderRadius: 4, fontWeight: 600, fontSize: 14 }}>Satzung ansehen</a>
          </div>
        </div>
        <form onSubmit={submit} style={{ background: 'rgba(246,239,222,0.04)', border: '1px solid rgba(246,239,222,0.15)', padding: '40px 36px' }}>
          {sent ? (
            <div style={{ textAlign: 'center', padding: '40px 20px' }}>
              <div className="serif" style={{ fontSize: 56, color: 'var(--gold-warm)', marginBottom: 16 }}>✓</div>
              <h3 className="serif" style={{ fontSize: 28, marginBottom: 12 }}>Moin und willkommen!</h3>
              <p style={{ opacity: 0.8 }}>Wir melden uns kurzfristig bei dir. Bis dahin: schon mal den 29.11.2026 freihalten.</p>
            </div>
          ) : (
            <>
              <h3 className="serif" style={{ fontSize: 28, marginBottom: 24 }}>Mitgliedsantrag</h3>
              {[
                ['betrieb','Betrieb / Unternehmen', 'text'],
                ['name','Dein Name', 'text'],
                ['email','E-Mail', 'email'],
                ['tel','Telefon (optional)', 'tel'],
              ].map(([k,l,t]) => (
                <label key={k} style={{ display: 'block', marginBottom: 18 }}>
                  <span style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(246,239,222,0.7)' }}>{l}</span>
                  <input type={t} value={data[k]} onChange={set(k)} required={t !== 'tel'} style={inputStyle} />
                </label>
              ))}
              <label style={{ display: 'block', marginBottom: 18 }}>
                <span style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(246,239,222,0.7)' }}>Kategorie</span>
                <select value={data.kategorie} onChange={set('kategorie')} style={inputStyle}>
                  <option value="hotellerie">Hotellerie</option>
                  <option value="gastronomie">Gastronomie</option>
                  <option value="cafe">Café / Bar</option>
                  <option value="foerderer">Förderer:in</option>
                </select>
              </label>
              <label style={{ display: 'block', marginBottom: 24 }}>
                <span style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(246,239,222,0.7)' }}>Nachricht (optional)</span>
                <textarea value={data.nachricht} onChange={set('nachricht')} rows="3" style={{ ...inputStyle, resize: 'vertical', fontFamily: 'inherit' }} />
              </label>
              <button type="submit" style={{ background: 'var(--gold-warm)', color: '#1a140d', border: 0, padding: '16px 32px', fontWeight: 700, fontSize: 14, letterSpacing: '0.05em', width: '100%', borderRadius: 4 }}>
                ANTRAG SENDEN
              </button>
              <p style={{ fontSize: 11, opacity: 0.5, marginTop: 14, textAlign: 'center' }}>Mit dem Absenden bestätigst du unsere Datenschutzhinweise.</p>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

const inputStyle = {
  width: '100%', marginTop: 6, background: 'rgba(246,239,222,0.06)',
  border: '1px solid rgba(246,239,222,0.18)', borderBottomColor: 'rgba(201,163,97,0.4)',
  padding: '12px 14px', color: '#f6efde', fontSize: 15, borderRadius: 2, outline: 'none',
  fontFamily: 'inherit'
};

// ============ CONTACT ============
function Contact() {
  const [d, setD] = useState({ name: '', email: '', betreff: '', nachricht: '' });
  const [sent, setSent] = useState(false);
  return (
    <section id="kontakt" data-screen-label="Kontakt" style={{ padding: '120px 0', background: 'var(--paper-warm)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--green)', fontWeight: 600, marginBottom: 16 }}>Kontakt</div>
          <h2 className="serif" style={{ fontSize: 'clamp(36px,4.5vw,60px)', marginBottom: 32 }}>Sag Moin.</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, fontSize: 16, lineHeight: 1.5 }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--gold)', fontWeight: 600 }}>Anschrift</div>
              <div>HOGA-MS e.V.<br/>Zur Haskenau 81<br/>48157 Münster</div>
            </div>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--gold)', fontWeight: 600 }}>E-Mail</div>
              <a href="mailto:info@hoga-ms.de" style={{ borderBottom: '1px solid var(--green)' }}>info@hoga-ms.de</a>
            </div>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--gold)', fontWeight: 600 }}>Vorstand</div>
              <div>1. Vorsitz: Hendrik Eggert<br/>2. Vorsitz: Moritz Ludorf</div>
            </div>
          </div>
        </div>
        <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ background: '#fff', border: '1px solid var(--line)', padding: '40px 40px' }}>
          {sent ? (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <div className="serif" style={{ fontSize: 56, color: 'var(--green)' }}>✓</div>
              <h3 className="serif" style={{ fontSize: 28, marginTop: 12 }}>Danke — wir melden uns.</h3>
            </div>
          ) : (
            <>
              <h3 className="serif" style={{ fontSize: 28, marginBottom: 24 }}>Nachricht senden</h3>
              {[['name','Name','text'],['email','E-Mail','email'],['betreff','Betreff','text']].map(([k,l,t]) => (
                <label key={k} style={{ display: 'block', marginBottom: 16 }}>
                  <span style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{l}</span>
                  <input type={t} value={d[k]} onChange={e => setD(p => ({ ...p, [k]: e.target.value }))} required style={lightInput} />
                </label>
              ))}
              <label style={{ display: 'block', marginBottom: 20 }}>
                <span style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Nachricht</span>
                <textarea value={d.nachricht} onChange={e => setD(p => ({ ...p, nachricht: e.target.value }))} rows="4" required style={{ ...lightInput, resize: 'vertical', fontFamily: 'inherit' }} />
              </label>
              <button type="submit" style={{ background: 'var(--green)', color: '#fff', border: 0, padding: '14px 28px', fontWeight: 600, fontSize: 14, letterSpacing: '0.05em', cursor: 'pointer' }}>
                Senden →
              </button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

const lightInput = {
  width: '100%', marginTop: 6, background: 'var(--paper)', border: '1px solid var(--line)',
  padding: '12px 14px', color: 'var(--ink)', fontSize: 15, outline: 'none', borderRadius: 2,
  fontFamily: 'inherit'
};

// ============ FOOTER + LEGAL ============
function Footer() {
  const [open, setOpen] = useState(null);
  return (
    <footer style={{ background: '#15110a', color: 'rgba(246,239,222,0.7)', padding: '80px 0 40px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 60, marginBottom: 56 }}>
          <div>
            <img src="assets/logo.jpg" alt="HOGA-MS" style={{ height: 70, filter: 'invert(0.92) brightness(1.2) saturate(0.7)', mixBlendMode: 'screen' }} />
            <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.6, maxWidth: 320 }}>
              Hotel- und Gaststättenverein Münster e.V. — das Netzwerk für Münsters Gastgewerbe. Gegründet 2026.
            </p>
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-warm)', marginBottom: 16 }}>Verein</div>
            {['Über uns','Vorstand','Satzung','Mitglied werden','Beitrittserklärung'].map(l => <a key={l} href="#" style={{ display: 'block', color: 'inherit', padding: '4px 0', fontSize: 14 }}>{l}</a>)}
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-warm)', marginBottom: 16 }}>Kontakt</div>
            <div style={{ fontSize: 14, lineHeight: 1.7 }}>
              HOGA-MS e.V.<br/>
              Zur Haskenau 81<br/>
              48157 Münster<br/>
              <a href="mailto:info@hoga-ms.de" style={{ color: 'var(--gold-warm)' }}>info@hoga-ms.de</a>
            </div>
          </div>
        </div>

        <div style={{ borderTop: '1px solid rgba(246,239,222,0.1)', paddingTop: 32 }}>
          {[
            ['impressum', 'Impressum', <ImpressumBody />],
            ['datenschutz', 'Datenschutzerklärung', <DatenschutzBody />],
          ].map(([k,l,body]) => (
            <div key={k} style={{ borderBottom: '1px solid rgba(246,239,222,0.08)' }}>
              <button onClick={() => setOpen(open === k ? null : k)} style={{
                background: 'transparent', border: 0, color: '#f6efde', width: '100%', textAlign: 'left',
                padding: '18px 0', fontSize: 15, fontWeight: 600, letterSpacing: '0.02em', cursor: 'pointer',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center'
              }}>
                <span>{l}</span>
                <span style={{ color: 'var(--gold-warm)', fontSize: 20 }}>{open === k ? '−' : '+'}</span>
              </button>
              {open === k && <div style={{ padding: '0 0 24px', fontSize: 13.5, lineHeight: 1.7, opacity: 0.85, maxWidth: 880 }}>{body}</div>}
            </div>
          ))}
        </div>

        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, fontSize: 12, opacity: 0.5 }}>
          <span>© {new Date().getFullYear()} HOGA-MS e.V. — Alle Rechte vorbehalten.</span>
          <span>Konzeption, Gestaltung & Realisierung: art y vent GmbH</span>
        </div>
      </div>
    </footer>
  );
}

function ImpressumBody() {
  return (
    <div>
      <p><strong>Anbieter:</strong> Hotel- und Gaststättenverband Münster (HOGA-MS) e.V.<br/>Zur Haskenau 81 · 48157 Münster</p>
      <p><strong>Kontakt:</strong> E-Mail: info@hoga-ms.de</p>
      <p><strong>Vorstand:</strong> 1. Vorsitzender Hendrik Eggert · 2. Vorsitzender Moritz Ludorf<br/>(Gemäß Satzung vertreten der 1. und 2. Vorsitzende den Verein gemeinsam.)</p>
      <p><strong>Registereintrag:</strong> Amtsgericht Münster · Registernummer: [VR-Nummer einfügen]</p>
      <p><strong>Verantwortlich i.S.d. § 18 Abs. 2 MStV:</strong> Hendrik Eggert · Zur Haskenau 81 · 48157 Münster</p>
      <p><strong>Konzeption, Gestaltung & Realisierung:</strong> art y vent GmbH · Marcus Geßler · Steinfurter Straße 104 · 48149 Münster · info@gastro.ms</p>
    </div>
  );
}

function DatenschutzBody() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <p><strong>1. Datenschutz auf einen Blick.</strong> Der Schutz Ihrer persönlichen Daten ist uns ein wichtiges Anliegen. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der DSGVO.</p>
      <p><strong>2. Verantwortliche Stelle.</strong> Hotel- und Gaststättenverband Münster e.V., Hendrik Eggert, Zur Haskenau 81, 48157 Münster, info@hoga-ms.de.</p>
      <p><strong>3. Datenerfassung.</strong> Mitgliedsanträge & Kontaktformulare werden zur Bearbeitung gespeichert und nicht ohne Einwilligung weitergegeben. Server-Log-Dateien werden technisch notwendig erfasst.</p>
      <p><strong>4. Ihre Rechte.</strong> Auskunft, Berichtigung, Sperrung oder Löschung Ihrer Daten — jederzeit und unentgeltlich.</p>
      <p><strong>5. Silberne Kiepe & Veranstaltungen.</strong> Für die Organisation der Veranstaltung „Silberne Kiepe" werden Mitgliederdaten (Name, Betrieb) verarbeitet, um das Anrecht auf die inklusive Eintrittskarte zu prüfen.</p>
      <p><strong>6. Kontaktformular und E-Mail.</strong> Verarbeitung gem. Art. 6 Abs. 1 lit. b DSGVO.</p>
      <p><strong>7. Newsletter & Branchen-Infos.</strong> Versand auf Grundlage Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO). Abmeldung jederzeit per kurzer Nachricht an info@hoga-ms.de. Keine Tools zur geheimen Auswertung Ihres Leseverhaltens.</p>
    </div>
  );
}

Object.assign(window, { Header, Hero, About, Founders, Kiepe, Ausbildung, Calendar, News, Membership, Contact, Footer });
