// Shared site shell — Nav, Footer, page wrapper.
// Pages render their own content area between <SiteShell> tags.

const NAV_ITEMS = [
  { key: 'home',     label: 'Home',     href: 'index.html' },
  { key: 'termine',  label: 'Termine',  href: 'termine.html' },
  { key: 'anfragen', label: 'Anfragen', href: 'anfragen.html' },
  { key: 'galerie',  label: 'Galerie',  href: 'galerie.html' },
  { key: 'ueber',    label: 'Über uns', href: 'ueber-uns.html' },
];

function Nav({ active }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
    <header className="nav-shell" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(245,244,237,0.85)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--border-default)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', height: 72,
        display: 'flex', alignItems: 'center', gap: 32, padding: '0 32px',
      }}>
        <a href="index.html" style={{
          fontFamily: 'var(--font-serif)', fontSize: 24, fontWeight: 500,
          color: 'var(--fg-primary)', textDecoration: 'none', letterSpacing: '-0.3px',
          whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <img src="assets/logo.png" alt="" className="brand-logo" style={{ width: 52, height: 52, objectFit: 'contain', mixBlendMode: 'multiply', margin: '-6px 0' }}/>
          <span>Heiftenua<span style={{ color: 'var(--c-brand)' }}>.</span>Musi</span>
        </a>
        <nav className="hide-on-mobile" style={{ display: 'flex', gap: 26, flex: 1, marginLeft: 12 }}>
          {NAV_ITEMS.slice(1).map(item => (
            <a key={item.key} href={item.href} style={{
              fontSize: 15, fontWeight: 500, textDecoration: 'none',
              color: active === item.key ? 'var(--fg-primary)' : 'var(--fg-secondary)',
              borderBottom: active === item.key ? '1px solid var(--c-brand)' : '1px solid transparent',
              paddingBottom: 4, whiteSpace: 'nowrap',
              transition: 'color 160ms var(--ease)',
            }}>{item.label}</a>
          ))}
        </nav>
        <a href="anfragen.html" className="hide-on-mobile btn btn-primary"
           style={{ marginLeft: 'auto', textDecoration: 'none', padding: '9px 16px', fontSize: 14, borderRadius: 10 }}>
          Anfrage senden
        </a>
        {/* Mobile menu */}
        <button onClick={() => setOpen(!open)} aria-label="Menü"
          style={{
            display: 'none', marginLeft: 'auto',
            background: 'transparent', border: '1px solid var(--border-strong)',
            borderRadius: 8, padding: '8px 10px', cursor: 'pointer',
            fontFamily: 'var(--font-sans)', color: 'var(--fg-primary)',
          }}
          className="show-on-mobile mobile-burger">
          {open ? '✕' : 'Menü'}
        </button>
      </div>
      {open && (
        <div className="show-on-mobile" style={{
          borderTop: '1px solid var(--border-default)',
          padding: '12px 20px 20px', background: 'var(--bg-page)',
        }}>
          {NAV_ITEMS.map(item => (
            <a key={item.key} href={item.href} style={{
              display: 'block', padding: '10px 0', fontSize: 17,
              color: active === item.key ? 'var(--c-brand)' : 'var(--fg-primary)',
              textDecoration: 'none', borderBottom: '1px solid var(--border-default)',
              fontFamily: 'var(--font-serif)',
            }}>{item.label}</a>
          ))}
        </div>
      )}
      <style>{`
        @media (max-width: 820px) {
          .mobile-burger { display: inline-block !important; }
          .show-on-mobile { display: block !important; }
          header.nav-shell nav.hide-on-mobile { display: none !important; }
          header.nav-shell .btn-primary.hide-on-mobile { display: none !important; }
        }
        .show-on-mobile { display: none; }
      `}</style>
    </header>
    {active !== 'anfragen' && <a href="anfragen.html" className="sticky-cta btn btn-primary" style={{ textDecoration: 'none' }}>Anfrage senden</a>}
    </>
  );
}

function SoundDivider({ className = '', style, bars = 96 }) {
  return (
    <div className={`sound-divider reveal ${className}`} style={style} aria-hidden="true">
      <div className="sd-line"></div>
      <div className="sd-eq">
        {Array.from({ length: bars }).map((_, i) => {
          const env = 0.5 + 0.5 * Math.sin(i * 0.42 + 1);
          const peak = Math.min(1, 0.3 + 0.7 * env * (0.6 + ((i * 89) % 40) / 100)).toFixed(2);
          return <span key={i} style={{ '--peak': peak, '--dur': `${520 + (i * 137) % 780}ms`, '--delay': `-${(i * 251) % 1000}ms` }}></span>;
        })}
      </div>
      <div className="sd-marks">{Array.from({ length: 8 }).map((_, i) => <i key={i} style={{ '--i': i }}></i>)}</div>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{
      background: 'var(--bg-page)', borderTop: '1px solid var(--border-default)',
      padding: '64px 32px 36px', marginTop: 96,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SoundDivider style={{ marginBottom: 48 }}/>
        <div className="footer-grid" style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40,
        }}>
          <div>
            <img src="assets/logo.png" alt="Heiftenua Musi" className="brand-logo" style={{ width: 140, height: 140, objectFit: 'contain', mixBlendMode: 'multiply', margin: '-20px 0 -12px -14px', display: 'block' }}/>
            <div style={{
              fontFamily: 'var(--font-serif)', fontSize: 24, fontWeight: 500,
              color: 'var(--fg-primary)', letterSpacing: '-0.3px',
            }}>
              Heiftenua<span style={{ color: 'var(--c-brand)' }}>.</span>Musi
            </div>
            <p style={{ fontSize: 14, color: 'var(--fg-tertiary)', marginTop: 12, maxWidth: 360, lineHeight: 1.6 }}>
              Volksmusik aus dem Gurk‑ und Görtschitztal. Spezialisiert auf
              Volkstanzfeste, Frühschoppen und Kirchenkonzerte —
              authentisch, ehrlich, mit Freude an der Tradition.
            </p>
          </div>
          <FooterCol title="Seiten" items={[
            ['Home', 'index.html'],
            ['Termine', 'termine.html'],
            ['Galerie', 'galerie.html'],
            ['Über uns', 'ueber-uns.html'],
          ]}/>
          <FooterCol title="Hören & Folgen" items={[
            ['Videos & Hörproben', 'index.html#hoeren'],
            ['Instagram', 'https://www.instagram.com/heiftenua_musi/'],
          ]}/>
          <FooterCol title="Kontakt" items={[
            ['info@heiftenua.at', 'mailto:info@heiftenua.at'],
            ['heiftenua.at', 'https://www.heiftenua.at'],
            ['Anfrage stellen', 'anfragen.html'],
            ['Presse & Downloads', 'presse.html'],
          ]}/>
        </div>
        <div style={{
          marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--border-default)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
          fontSize: 12, color: 'var(--fg-tertiary)',
        }}>
          <span>© 2026 Heiftenua Musi · Kärnten</span>
          <span style={{ display: 'flex', gap: 6 }}>
            <a href="rechtliches.html#impressum" style={{ color: 'inherit', textDecoration: 'none' }} onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg-primary)'} onMouseLeave={(e) => e.currentTarget.style.color = 'inherit'}>Impressum</a>
            <span>·</span>
            <a href="rechtliches.html#datenschutz" style={{ color: 'inherit', textDecoration: 'none' }} onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg-primary)'} onMouseLeave={(e) => e.currentTarget.style.color = 'inherit'}>Datenschutz</a>
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="overline" style={{ marginBottom: 14 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(([label, href]) => (
          <a key={label} href={href} style={{
            fontSize: 14, color: 'var(--fg-secondary)', textDecoration: 'none',
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg-primary)'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'var(--fg-secondary)'}>
            {label}
          </a>
        ))}
      </div>
    </div>
  );
}

// Reveal-on-scroll observer
// Also watches the DOM so elements added later (tab switches, filters) still fade in.
function useReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) {
        const el = e.target; el.classList.add('in'); io.unobserve(el);
        // Staffel-Verzögerung nach dem Einblenden wieder entfernen, sonst bremst sie Hover-Effekte
        setTimeout(() => { el.style.transitionDelay = ''; }, (parseFloat(el.style.transitionDelay) || 0) + 450);
      } });
    }, { threshold: 0.08 });
    const scan = () => document.querySelectorAll('.reveal:not(.in)').forEach(el => {
      if (!el.dataset.rv) { // gestaffelt: Geschwister erscheinen nacheinander
        const sibs = Array.from(el.parentElement ? el.parentElement.children : []).filter(c => c.classList.contains('reveal'));
        el.style.transitionDelay = `${Math.min(sibs.indexOf(el), 7) * 70}ms`; el.dataset.rv = '1';
      }
      io.observe(el);
    });
    scan();
    const mo = new MutationObserver(scan);
    mo.observe(document.body, { childList: true, subtree: true });
    return () => { io.disconnect(); mo.disconnect(); };
  }, []);
}

// Tweaks integration — wires data attributes to body for paper-grain / dark / serif
function useTweaksWiring(tweaks) {
  React.useEffect(() => {
    document.body.setAttribute('data-grain', tweaks.grain ? 'on' : 'off');
    document.body.setAttribute('data-theme', tweaks.dark ? 'dark' : 'light');
    document.body.setAttribute('data-headlines', tweaks.serifHeadlines ? 'serif' : 'sans');
    document.body.setAttribute('data-motion', tweaks.motion === false ? 'off' : 'on');
  }, [tweaks.grain, tweaks.dark, tweaks.serifHeadlines, tweaks.motion]);
}

Object.assign(window, { Nav, Footer, SoundDivider, useReveal, useTweaksWiring });