// UI-Bausteine: Header, Footer, Marquee, Buttons, Wireframe-Helfer
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ============ Hash-Routing ============
function useHashRoute() {
  const parse = () => {
    const h = (window.location.hash || '#/').replace(/^#/, '');
    const [path, query = ''] = h.split('?');
    const params = Object.fromEntries(new URLSearchParams(query));
    const segs = path.split('/').filter(Boolean);
    return { path, segs, params };
  };
  const [route, setRoute] = useState(parse);
  useEffect(() => {
    const onHash = () => { setRoute(parse()); window.scrollTo(0, 0); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return route;
}

function navigate(to) {
  if (!to.startsWith('#')) to = '#' + to;
  window.location.hash = to.replace(/^#/, '');
}

// ============ Header ============
function Header({ route }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { to: '/anlaesse',     label: 'Anlässe' },
    { to: '/leistungen',   label: 'Leistungen' },
    { to: '/galerie',      label: 'Galerie' },
    { to: '/ueber-uns',    label: 'Über uns' },
    { to: '/kontakt',      label: 'Kontakt' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(244,237,224,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all 220ms ease',
    }}>
      <div className="of-header-inner" style={{
        maxWidth: 1320, margin: '0 auto', padding: '18px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href={typeof location !== 'undefined' && location.pathname.includes('konfigurator') ? 'index.html' : '#/'} style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', color: 'inherit' }}>
          <img src="assets/logo-navy-on-transparent.png" alt="Onkelfinke" style={{
            width: 44, height: 44, display: 'block', objectFit: 'contain',
          }} />
          <div>
            <div className="serif" style={{ fontSize: 18, fontWeight: 600, lineHeight: 1 }}>Onkelfinke</div>
            <div className="mono" style={{ fontSize: 9, color: 'var(--muted)', marginTop: 2 }}>PARTYPLANER · CATERING</div>
          </div>
        </a>

        <nav style={{ display: 'flex', gap: 32, alignItems: 'center' }} className="of-nav-desk">
          {links.map(l => (
            <a key={l.to} href={'#' + l.to} className="mono" style={{
              fontSize: 11, fontWeight: 500,
              opacity: route.path === l.to ? 1 : 0.7,
              borderBottom: route.path === l.to ? '1px solid var(--navy)' : '1px solid transparent',
              paddingBottom: 2,
            }}>{l.label}</a>
          ))}
        </nav>

        <a href="#/konfigurator" className="mono of-cta-header" style={{
          background: 'var(--navy)', color: 'var(--cream)',
          padding: '12px 22px', borderRadius: 999, fontSize: 11, fontWeight: 500,
          display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          Fest planen
          <span style={{ fontSize: 14 }}>→</span>
        </a>
      </div>
    </header>
  );
}

// ============ Marquee ============
function Marquee({ items, speed = 60 }) {
  const text = items.join('  ·  ');
  return (
    <div className="of-marquee" style={{ overflow: 'hidden', borderTop: '1px solid var(--navy)', borderBottom: '1px solid var(--navy)', background: 'var(--cream)', padding: '16px 0' }}>
      <div style={{
        display: 'inline-block', whiteSpace: 'nowrap',
        animation: `marquee ${speed}s linear infinite`,
      }} className="serif">
        {Array.from({ length: 4 }).map((_, i) => (
          <span key={i} style={{ fontSize: 28, fontStyle: 'italic', paddingRight: 40 }}>{text}  ·  </span>
        ))}
      </div>
      <style>{`@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </div>
  );
}

// ============ Footer ============
function Footer() {
  return (
    <footer className="of-footer" style={{ background: 'var(--navy)', color: 'var(--cream)', padding: '80px 32px 32px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="of-footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 64 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
              <img src="assets/logo-main-on-dark.png" alt="Onkelfinke" style={{ width: 64, height: 64, display: 'block', objectFit: 'contain' }} />
              <div className="serif of-footer-brand-h" style={{ fontSize: 36, fontStyle: 'italic', fontWeight: 500, lineHeight: 1.1 }}>
                Onkelfinke<br/><span style={{ opacity: 0.6 }}>Partyplaner & Catering</span>
              </div>
            </div>
            <p style={{ opacity: 0.7, lineHeight: 1.6, maxWidth: 380 }}>
              Wir machen Feste. Seit Jahren, mit Liebe, ohne Stress. Du sagst was, wir machen.
            </p>
          </div>
          <div>
            <div className="mono" style={{ opacity: 0.5, marginBottom: 16 }}>Anlässe</div>
            {window.SITE_DATA.ANLAESSE.map(a => (
              <div key={a.id} style={{ marginBottom: 8 }}><a href={'#/anlaesse/' + a.id} style={{ opacity: 0.85 }}>{a.label}</a></div>
            ))}
          </div>
          <div>
            <div className="mono" style={{ opacity: 0.5, marginBottom: 16 }}>Mehr</div>
            <div style={{ marginBottom: 8 }}><a href="#/leistungen" style={{ opacity: 0.85 }}>Leistungen</a></div>
            <div style={{ marginBottom: 8 }}><a href="#/galerie" style={{ opacity: 0.85 }}>Galerie</a></div>
            <div style={{ marginBottom: 8 }}><a href="#/ueber-uns" style={{ opacity: 0.85 }}>Über uns</a></div>
            <div style={{ marginBottom: 8 }}><a href="#/faq" style={{ opacity: 0.85 }}>FAQ</a></div>
          </div>
          <div>
            <div className="mono" style={{ opacity: 0.5, marginBottom: 16 }}>Kontakt</div>
            <div style={{ marginBottom: 8 }}><a href="mailto:info@onkelfinke.de" style={{ opacity: 0.85 }}>info@onkelfinke.de</a></div>
            <div style={{ marginBottom: 8 }}><a href="tel:+4915205862058" style={{ opacity: 0.85 }}>0152 058 620 58</a></div>
            <div style={{ marginBottom: 8 }}><a href="https://wa.me/4915205862058" style={{ opacity: 0.85 }}>WhatsApp →</a></div>
            <div style={{ marginTop: 16, opacity: 0.6, lineHeight: 1.5 }}>Hauskoppelstieg 7<br/>22111 Hamburg</div>
          </div>
        </div>
        <div className="of-footer-bottom" style={{ borderTop: '1px solid rgba(244,237,224,0.18)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', opacity: 0.5, fontSize: 12 }}>
          <div>© {new Date().getFullYear()} Onkelfinke</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#/impressum">Impressum</a>
            <a href="#/datenschutz">Datenschutz</a>
            <a href="#/agb">AGB</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ============ Wireframe-Note ============
function WFNote({ children }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      background: 'rgba(0,16,39,0.06)', border: '1px dashed var(--line-strong)',
      padding: '6px 12px', borderRadius: 999,
      fontFamily: '"Roboto Mono", monospace', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase',
      color: 'var(--muted)',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }}></span>
      {children}
    </div>
  );
}

// ============ Section ============
function Section({ children, label, title, eyebrow, bg, py = 120, ...rest }) {
  return (
    <section className="of-section" style={{ background: bg || 'transparent', padding: `${py}px 32px`, ...rest.style }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        {(label || eyebrow) && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
            {label && <span className="mono" style={{ color: 'var(--muted)' }}>{label}</span>}
            {eyebrow && <span style={{ flex: 1, height: 1, background: 'var(--line)' }}></span>}
          </div>
        )}
        {title && (
          <h2 className="serif of-h2" style={{ fontSize: 64, lineHeight: 1.05, fontWeight: 500, margin: '0 0 48px', maxWidth: 900 }}>{title}</h2>
        )}
        {children}
      </div>
    </section>
  );
}

// ============ Button ============
function Btn({ children, variant = 'primary', size = 'md', icon, ...props }) {
  const sizes = {
    sm: { padding: '10px 18px', fontSize: 11 },
    md: { padding: '14px 28px', fontSize: 12 },
    lg: { padding: '20px 36px', fontSize: 13 },
  };
  const variants = {
    primary: { background: 'var(--navy)', color: 'var(--cream)', border: '1px solid var(--navy)' },
    ghost:   { background: 'transparent', color: 'var(--navy)', border: '1px solid var(--navy)' },
    cream:   { background: 'var(--cream)', color: 'var(--navy)', border: '1px solid var(--navy)' },
    light:   { background: 'transparent', color: 'var(--cream)', border: '1px solid var(--cream)' },
  };
  return (
    <button {...props} className="mono" style={{
      ...sizes[size], ...variants[variant],
      borderRadius: 999, fontWeight: 500, cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', gap: 10,
      transition: 'transform 120ms ease',
      ...(props.style || {}),
    }}>
      {children}
      {icon !== false && <span style={{ fontFamily: 'system-ui', letterSpacing: 0 }}>→</span>}
    </button>
  );
}

// ============ Placeholder Block ============
function PH({ label, h = 200, w, style, ...rest }) {
  return (
    <div className="ph" style={{ height: h, width: w || '100%', ...style }} {...rest}>{label}</div>
  );
}

window.UI = { useHashRoute, navigate, Header, Footer, Marquee, WFNote, Section, Btn, PH };