import React, { useState, useEffect, useRef } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { ArrowRight, Upload } from 'lucide-react';
import LoadingScreen from '@/components/ui/LoadingScreen';
import { useIsMobile } from '@/hooks/useIsMobile';

interface LayoutProps { children: React.ReactNode; }

/* ── SVG icons ─────────────────────────────────────────── */
const IgIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8" fill="currentColor" stroke="none"/></svg>;
const LiIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>;
const FbIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>;
const SOCIAL = [
  { href:'https://instagram.com', Icon:IgIcon, label:'Instagram' },
  { href:'https://linkedin.com',  Icon:LiIcon, label:'LinkedIn'  },
  { href:'https://facebook.com',  Icon:FbIcon, label:'Facebook'  },
];

/* ── Nav data ──────────────────────────────────────────── */
interface NavItem {
  key: string; label: string; path: string;
  subLabel?: string;
  sub?: { label: string; path: string }[];
}
const NAV: NavItem[] = [
  {
    key: 'preistraeger', label: 'Preisträger:innen', path: '/preistraeger',
    subLabel: 'PREISTRÄGER:INNEN',
    sub: [
      { label: 'Alle Preisträger:innen',      path: '/preistraeger' },
      { label: 'Sieger & Aufsteiger 2025',    path: '/preistraeger' },
    ],
  },
  {
    key: 'teilnahme', label: 'Ihr Weg zum Preis', path: '/teilnahme',
    subLabel: 'IHR WEG ZUM PREIS',
    sub: [
      { label: 'Teilnahmevoraussetzungen',    path: '/teilnahme#voraussetzungen' },
      { label: 'Kriterien & Bewertung',       path: '/teilnahme#kriterien' },
      { label: 'Fristen & Termine',           path: '/teilnahme#fristen' },
      { label: 'Bewerbungsformular',          path: '/teilnahme#bewerben' },
    ],
  },
  {
    key: 'bmp', label: 'Der BMP', path: '/der-bmp',
    subLabel: 'DER BMP',
    sub: [
      { label: 'Was ist der Preis?',          path: '/der-bmp#was-ist' },
      { label: 'Geschichte & Werte',          path: '/der-bmp#geschichte' },
      { label: 'Vorteile der Auszeichnung',   path: '/der-bmp#vorteile' },
    ],
  },
  {
    key: 'netzwerk', label: 'Netzwerk', path: '/netzwerk',
    subLabel: 'NETZWERK',
    sub: [
      { label: 'Jury-Mitglieder',             path: '/netzwerk#jury' },
      { label: 'Partner & Sponsoren',         path: '/netzwerk#partner' },
      { label: 'Schirmherrschaft',            path: '/netzwerk#schirmherrschaft' },
      { label: 'Mitglied werden',             path: '/mitglied-werden' },
    ],
  },
  {
    key: 'presse', label: 'Presse', path: '/presse',
    subLabel: 'PRESSE',
    sub: [
      { label: 'Events & Gala',               path: '/presse#events' },
      { label: 'Downloads & Impressionen',    path: '/presse#downloads' },
    ],
  },
];

const SECONDARY = [
  { label:'Startseite',  path:'/' },
  { label:'Kontakt',     path:'/kontakt' },
  { label:'Impressum',   path:'/impressum' },
  { label:'Datenschutz', path:'/datenschutz' },
];

/* ── Tokens ────────────────────────────────────────────── */
const NAVY   = '#111D55';
const ANTHRA = '#1A2030';   // nav + footer shared bg
const GOLD = '#EFBF04';
const MUTED = '#D0D5DD';
const SEP  = 'rgba(239,191,4,0.2)';
const LINE = 'rgba(239,191,4,0.35)';
const FF_DISPLAY = '"IBM Plex Sans", sans-serif';
const FF_BODY    = '"Inter", sans-serif';

/* ── SocialLink helper ─────────────────────────────────── */
const SocialLink: React.FC<{ href:string; Icon:()=>JSX.Element; label:string }> = ({ href, Icon, label }) => (
  <a href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
    style={{ color:MUTED, display:'flex', textDecoration:'none', transition:'color .2s' }}
    onMouseEnter={e=>(e.currentTarget.style.color=GOLD)}
    onMouseLeave={e=>(e.currentTarget.style.color=MUTED)}
  ><Icon /></a>
);


/* ── Component ──────────────────────────────────────────── */
const Layout: React.FC<LayoutProps> = ({ children }) => {
  const [open, setOpen]        = useState(false);            // desktop overlay
  const [activeKey, setActive] = useState<string | null>(null); // desktop hover subnav
  const [mobileOpen, setMobileOpen] = useState(false);      // mobile sidebar overlay
  const [expandKey, setExpand] = useState<string | null>(null); // mobile accordion
  const [lang, setLang]        = useState<'DE'|'EN'>('DE');
  const [mounted, setMounted]  = useState(false);
  const [showLoader, setShowLoader] = useState(() => {
    if (typeof window === 'undefined') return false;
    sessionStorage.removeItem('bmp-intro-seen');
    return true;
  });
  const [formVisible, setFormVisible] = useState(false);
  const location               = useLocation();
  const firstLinkRef           = useRef<HTMLAnchorElement>(null);
  const isLegalPage            = ['/impressum', '/datenschutz'].includes(location.pathname);
  const isMobile               = useIsMobile();

  // Close everything on route change
  useEffect(() => {
    setOpen(false);
    setMobileOpen(false);
    setExpand(null);
    if (location.hash) {
      setTimeout(() => {
        const el = document.querySelector(location.hash);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 120);
    } else {
      window.scrollTo(0, 0);
    }
  }, [location]);

  // Reset mobile accordion when its overlay closes
  useEffect(() => {
    if (!mobileOpen) setTimeout(() => setExpand(null), 220);
  }, [mobileOpen]);

  // Body scroll lock (either overlay)
  useEffect(() => {
    const anyOpen = open || mobileOpen;
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    if (anyOpen) {
      document.body.style.overflow = 'hidden';
      document.body.style.paddingRight = open ? `${scrollbarWidth}px` : '';
    } else {
      document.body.style.overflow = '';
      document.body.style.paddingRight = '';
      setTimeout(() => setActive(null), 220);
    }
    return () => {
      document.body.style.overflow = '';
      document.body.style.paddingRight = '';
    };
  }, [open, mobileOpen]);

  // Focus first desktop nav link on open
  useEffect(() => {
    if (open) setTimeout(() => firstLinkRef.current?.focus(), 300);
  }, [open]);

  // Escape closes either overlay
  useEffect(() => {
    const h = (e:KeyboardEvent) => {
      if (e.key === 'Escape') { if (open) setOpen(false); if (mobileOpen) setMobileOpen(false); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [open, mobileOpen]);

  useEffect(() => {
    const t = setTimeout(() => setMounted(true), 60);
    return () => clearTimeout(t);
  }, []);

  // Hide floating CTA when the form section (#bewerben) is in view – homepage only
  useEffect(() => {
    setFormVisible(false);
    if (location.pathname !== '/') return;
    const el = document.getElementById('bewerben');
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => setFormVisible(entry.isIntersecting),
      { threshold: 0.05 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [location.pathname]);

  return (
    <div
      style={{ paddingTop: 60, paddingLeft: 0 }}
      className="min-h-screen flex flex-col bg-background text-foreground font-body"
    >
      {showLoader && <LoadingScreen onDone={() => setShowLoader(false)} />}

      {/* ── GLOBAL BAYERN CSS ────────────────────────── */}
      <style>{`
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #060C14; }
        ::-webkit-scrollbar-thumb { background: #051A87; }
        ::-webkit-scrollbar-thumb:hover { background: #03126B; }
        * { scrollbar-width: thin; scrollbar-color: #051A87 #060C14; }
        ::selection { background: #051A87; color: #fff; }
      `}</style>


      {/* ═══════════════════════════════════════════════════════════ */}
      {/* ══  DESKTOP CHROME (≥768px) – original top bar + overlay  ══ */}
      {/* ═══════════════════════════════════════════════════════════ */}
      {!isMobile && (
        <>
          {/* ── TOP BAR ──────────────────────────────────── */}
          <header style={{
            position:'fixed', top:0, left:0, right:0, height:60,
            background:ANTHRA, borderBottom:`1px solid ${LINE}`,
            display:'flex', alignItems:'center',
            zIndex:400, userSelect:'none',
            transform: mounted ? 'translateY(0)' : 'translateY(-100%)',
            transition:'transform 0.45s cubic-bezier(0.22,1,0.36,1)',
          }}>

            {/* LEFT – logo */}
            <div style={{ flex:1, display:'flex', alignItems:'center', padding:'0 24px', height:'100%', borderRight:`1px solid ${LINE}` }}>
              <Link to="/" style={{ display:'flex', alignItems:'center', textDecoration:'none' }}>
                <img
                  src="/bmp-logo.png"
                  alt="Der Bayerische Mittelstandspreis 2026"
                  style={{ height:38, width:'auto', display:'block', objectFit:'contain' }}
                />
              </Link>
            </div>

            {/* CENTER – hamburger */}
            <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', height:'100%', borderRight:`1px solid ${LINE}`, gap:16 }}>
              <span style={{ fontSize:8, color:'rgba(5,26,135,0.5)', letterSpacing:2, userSelect:'none' }}>◆</span>
              <button
                onClick={() => setOpen(v => !v)}
                aria-expanded={open}
                aria-label="Navigation öffnen"
                style={{ display:'flex', alignItems:'center', gap:14, background:'none', border:'none', cursor:'pointer', padding:'8px 16px' }}
              >
                <div style={{ width:20, height:15, position:'relative' }}>
                  <span style={{ position:'absolute', top:0, left:0, width:'100%', height:1.5, background:MUTED, transformOrigin:'center', transition:'transform .3s ease, opacity .3s ease', transform: open ? 'translateY(6.5px) rotate(45deg)' : 'none' }} />
                  <span style={{ position:'absolute', top:'50%', left:0, width:'100%', height:1.5, background:MUTED, marginTop:'-0.75px', transition:'opacity .3s', opacity: open ? 0 : 1 }} />
                  <span style={{ position:'absolute', bottom:0, left:0, width:'100%', height:1.5, background:MUTED, transformOrigin:'center', transition:'transform .3s ease', transform: open ? 'translateY(-6.5px) rotate(-45deg)' : 'none' }} />
                </div>
                <span style={{ fontSize:9, fontWeight:600, textTransform:'uppercase', letterSpacing:'.22em', color:MUTED, lineHeight:1, fontFamily:FF_DISPLAY }}>Menü</span>
              </button>
              <span style={{ fontSize:8, color:'rgba(5,26,135,0.5)', letterSpacing:2, userSelect:'none' }}>◆</span>
            </div>

            {/* RIGHT – social + lang */}
            <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'flex-end', gap:20, padding:'0 28px', height:'100%' }}>
              <div style={{ display:'flex', gap:14, alignItems:'center' }}>
                {SOCIAL.map(s => <SocialLink key={s.label} {...s} />)}
              </div>
              <div style={{ width:1, height:20, background:'rgba(239,191,4,0.3)' }} />
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                {(['DE','EN'] as const).map((l, i) => (
                  <React.Fragment key={l}>
                    {i===1 && <span style={{ color:'rgba(239,191,4,.35)', fontSize: 14 }}>|</span>}
                    <button
                      onClick={() => setLang(l)}
                      style={{ fontSize:10, fontWeight:600, letterSpacing:'.1em', textTransform:'uppercase', background:'none', border:'none', cursor:'pointer', padding:'1px 0', lineHeight:1, color:lang===l ? GOLD : MUTED, transition:'color .2s', fontFamily:FF_DISPLAY }}
                      onMouseEnter={e => { if (lang !== l) e.currentTarget.style.color = '#fff'; }}
                      onMouseLeave={e => { if (lang !== l) e.currentTarget.style.color = MUTED; }}
                    >{l}</button>
                  </React.Fragment>
                ))}
              </div>
            </div>

          </header>

          {/* ── DESKTOP OVERLAY ──────────────────────────── */}
          <div role="dialog" aria-modal="true" aria-label="Navigation"
            style={{
              position:'fixed', top:60, left:0, right:0, bottom:0,
              background:ANTHRA, zIndex:300,
              display:'flex', flexDirection:'column',
              opacity: open ? 1 : 0,
              pointerEvents: open ? 'all' : 'none',
              transition:`opacity ${open ? '.28s' : '.2s'} ease`,
            }}
          >
            <div style={{ display:'flex', flexDirection:'column', height:'100%', overflow:'hidden' }}>

              {/* TOP – tagline + logo */}
              <div style={{ flex:'1 1 50%', display:'flex', alignItems:'flex-end', padding:'0 80px 48px', position:'relative', minHeight:0, zIndex:1 }}>
                <div>
                  <div style={{ fontSize:12, color:'rgba(255,255,255,.4)', letterSpacing:'.12em', textTransform:'uppercase', marginBottom:12, fontFamily:FF_DISPLAY }}>
                    Bayerischer Mittelstandspreis
                  </div>
                  <div style={{ fontSize:'clamp(42px,6.5vw,88px)', fontWeight:900, color:'#fff', textTransform:'uppercase', lineHeight:.95, letterSpacing:'-.01em', fontFamily:FF_DISPLAY }}>
                    EXZELLENZ HAT<br/>EINEN NAMEN.
                  </div>
                </div>
                <div style={{ position:'absolute', top:48, right:80 }}>
                  <img src="/bmp-logo.png" alt="BMP Logo" style={{ height:40, width:'auto', display:'block', opacity:0.9 }} />
                </div>
              </div>

              {/* BOTTOM – 3 columns */}
              <div style={{
                flex:'0 0 auto',
                display:'grid', gridTemplateColumns:'1fr 1.4fr 1fr',
                borderTop:`1px solid ${SEP}`,
              }}>

                {/* LEFT – main nav */}
                <div style={{ borderRight:`1px solid ${SEP}`, padding:'40px 0 40px 60px' }}>
                  <ul style={{ listStyle:'none' }}>
                    {NAV.map((item, idx) => (
                      <li key={item.key} style={{ borderTop:`1px solid ${SEP}` }}>
                        <Link
                          ref={idx===0 ? firstLinkRef : undefined}
                          to={item.path}
                          onClick={() => setOpen(false)}
                          onMouseEnter={() => setActive(item.key)}
                          style={{
                            display:'flex', alignItems:'center', justifyContent:'space-between',
                            padding:'14px 40px 14px 0',
                            textDecoration:'none',
                            color: activeKey===item.key ? GOLD : '#fff',
                            fontSize:'clamp(15px,1.4vw,20px)',
                            fontFamily:FF_DISPLAY,
                            fontWeight:600, textTransform:'uppercase', letterSpacing:'.03em',
                            transition:'color .15s, transform .15s, opacity .3s ease-out',
                            transform: open
                              ? `translateX(${activeKey===item.key ? 6 : 0}px)`
                              : 'translateX(-16px)',
                            opacity: open ? 1 : 0,
                            transitionDelay: open ? `${.04 + idx*.06}s` : '0s',
                          }}
                        >
                          {item.label}
                          <span style={{ color:GOLD, fontSize:'1.15em', marginLeft:10, flexShrink:0 }}>›</span>
                        </Link>
                      </li>
                    ))}
                    <li style={{ borderTop:`1px solid ${SEP}` }} />
                  </ul>
                </div>

                {/* MIDDLE – subnav */}
                <div style={{ borderRight:`1px solid ${SEP}`, padding:'40px 48px', position:'relative', minHeight:440 }}>
                  {NAV.map(item => (
                    <div key={item.key} style={{
                      position: 'absolute',
                      top: 40,
                      left: 48,
                      right: 48,
                      opacity: activeKey===item.key ? 1 : 0,
                      transform: activeKey===item.key ? 'translateY(0)' : 'translateY(8px)',
                      transition:'opacity .2s ease, transform .2s ease',
                      pointerEvents: activeKey===item.key ? 'all' : 'none',
                    }}>
                      <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'.22em', color:'#009EE0', marginBottom:16, fontFamily:FF_DISPLAY }}>
                        Überblick
                      </div>
                      <div style={{ fontSize: 16, fontWeight:700, textTransform:'uppercase', letterSpacing:'.1em', color:'#fff', marginBottom:20, fontFamily:FF_DISPLAY }}>
                        {item.subLabel}
                      </div>
                      <ul style={{ listStyle:'none' }}>
                        {item.sub?.map(sub => (
                          <li key={sub.path} style={{ borderTop:'1px solid rgba(239,191,4,.12)' }}>
                            <Link to={sub.path} onClick={() => setOpen(false)}
                              style={{ display:'block', padding:'9px 0', textDecoration:'none', color:MUTED, fontSize: 16, fontFamily:FF_BODY, transition:'color .15s, padding-left .15s' }}
                              onMouseEnter={e=>{ e.currentTarget.style.color='#fff'; e.currentTarget.style.paddingLeft='8px'; }}
                              onMouseLeave={e=>{ e.currentTarget.style.color=MUTED; e.currentTarget.style.paddingLeft='0'; }}
                            >{sub.label}</Link>
                          </li>
                        ))}
                        <li style={{ borderTop:'1px solid rgba(239,191,4,.12)' }} />
                      </ul>
                    </div>
                  ))}
                </div>

                {/* RIGHT – utilities */}
                <div style={{ padding:'40px 80px 40px 48px', display:'flex', flexDirection:'column', gap:24 }}>

                  <div style={{ display:'flex', alignItems:'center', gap:20, flexWrap:'wrap' }}>
                    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                      {(['DE','EN'] as const).map((l,i) => (
                        <React.Fragment key={l}>
                          {i===1 && <span style={{ color:'rgba(239,191,4,.35)', fontSize: 14 }}>|</span>}
                          <button onClick={() => setLang(l)}
                            style={{ fontSize:12, fontWeight:600, letterSpacing:'.1em', textTransform:'uppercase', background:'none', border:'none', cursor:'pointer', padding:0, color:lang===l ? GOLD : MUTED, transition:'color .2s' }}
                            onMouseEnter={e=>{ if(lang!==l) e.currentTarget.style.color='#fff'; }}
                            onMouseLeave={e=>{ if(lang!==l) e.currentTarget.style.color=MUTED; }}
                          >{l}</button>
                        </React.Fragment>
                      ))}
                    </div>
                    <div style={{ display:'flex', gap:14 }}>
                      {SOCIAL.map(s => <SocialLink key={s.label} {...s} />)}
                    </div>
                  </div>

                  <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                    {SECONDARY.map(item => (
                      <Link key={item.path} to={item.path} onClick={() => setOpen(false)}
                        style={{ fontSize: 16, color:MUTED, textDecoration:'none', fontFamily:FF_BODY, transition:'color .15s', width:'fit-content' }}
                        onMouseEnter={e=>(e.currentTarget.style.color=GOLD)}
                        onMouseLeave={e=>(e.currentTarget.style.color=MUTED)}
                      >{item.label}</Link>
                    ))}
                  </div>

                  <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                    <Link to="/teilnahme#bewerben" onClick={() => setOpen(false)}
                      style={{ display:'inline-block', background:'#EFBF04', color:'#101828', fontSize: 15, fontWeight:700, textTransform:'uppercase', letterSpacing:'.12em', padding:'11px 24px', textDecoration:'none', transition:'background .2s, box-shadow .2s', borderRadius:0, fontFamily:FF_DISPLAY }}
                      onMouseEnter={e=>{ e.currentTarget.style.background='#FFD130'; e.currentTarget.style.boxShadow='0 0 18px rgba(239,191,4,0.65), 0 0 40px rgba(239,191,4,0.3)'; }}
                      onMouseLeave={e=>{ e.currentTarget.style.background='#EFBF04'; e.currentTarget.style.boxShadow='none'; }}
                    >Jetzt bewerben</Link>
                    <Link to="/mitglied-werden" onClick={() => setOpen(false)}
                      style={{ display:'inline-block', background:'transparent', color:MUTED, fontSize: 15, fontWeight:700, textTransform:'uppercase', letterSpacing:'.12em', padding:'10px 24px', textDecoration:'none', transition:'border-color .2s, color .2s', borderRadius:0, fontFamily:FF_DISPLAY, border:'1.5px solid rgba(239,191,4,0.35)' }}
                      onMouseEnter={e=>{ e.currentTarget.style.borderColor='#EFBF04'; e.currentTarget.style.color='#EFBF04'; }}
                      onMouseLeave={e=>{ e.currentTarget.style.borderColor='rgba(239,191,4,0.35)'; e.currentTarget.style.color=MUTED; }}
                    >Mitglied werden</Link>

                    <div style={{ height:'1px', background:'rgba(239,191,4,0.12)', margin:'4px 0' }} />

                    <Link to="/formular-hochladen" onClick={() => setOpen(false)}
                      style={{
                        display:'flex', alignItems:'center', gap:10,
                        background:'rgba(255,255,255,0.04)',
                        color:'rgba(255,255,255,0.45)',
                        fontSize:11, fontWeight:700,
                        textTransform:'uppercase', letterSpacing:'.14em',
                        padding:'10px 18px',
                        textDecoration:'none',
                        fontFamily:FF_DISPLAY,
                        border:'1px dashed rgba(255,255,255,0.15)',
                        transition:'color .2s, border-color .2s, background .2s',
                      }}
                      onMouseEnter={e=>{
                        e.currentTarget.style.color='#fff';
                        e.currentTarget.style.borderColor='rgba(255,255,255,0.4)';
                        e.currentTarget.style.background='rgba(255,255,255,0.07)';
                      }}
                      onMouseLeave={e=>{
                        e.currentTarget.style.color='rgba(255,255,255,0.45)';
                        e.currentTarget.style.borderColor='rgba(255,255,255,0.15)';
                        e.currentTarget.style.background='rgba(255,255,255,0.04)';
                      }}
                    >
                      <Upload size={12} strokeWidth={2} /> Formular hochladen
                    </Link>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </>
      )}


      {/* ═══════════════════════════════════════════════════════════ */}
      {/* ══  MOBILE CHROME (<768px) – top bar + fullscreen overlay ══ */}
      {/* ═══════════════════════════════════════════════════════════ */}
      {isMobile && (
        <>
          {/* ── TOP BAR ──────────────────────────────────── */}
          <header style={{
            position:'fixed', top:0, left:0, right:0, height:60,
            background:ANTHRA, borderBottom:`1px solid ${LINE}`,
            display:'flex', alignItems:'center', justifyContent:'space-between',
            padding:'0 8px 0 20px',
            zIndex:400, userSelect:'none',
            transform: mounted ? 'translateY(0)' : 'translateY(-100%)',
            transition:'transform 0.45s cubic-bezier(0.22,1,0.36,1)',
          }}>
            {/* Logo */}
            <Link to="/" style={{ display:'flex', alignItems:'center', textDecoration:'none' }}>
              <img src="/bmp-logo.png" alt="Bayerischer Mittelstandspreis 2026" style={{ height:32, width:'auto', display:'block', objectFit:'contain' }} />
            </Link>

            {/* Hamburger */}
            <button
              onClick={() => setMobileOpen(true)}
              aria-expanded={mobileOpen}
              aria-label="Navigation öffnen"
              style={{ display:'flex', alignItems:'center', justifyContent:'center', width:48, height:48, background:'none', border:'none', cursor:'pointer', padding:0, flexShrink:0 }}
            >
              <div style={{ width:24, position:'relative', display:'flex', flexDirection:'column', gap:5 }}>
                <span style={{ display:'block', height:2, background:MUTED, borderRadius:2 }} />
                <span style={{ display:'block', height:2, background:MUTED, borderRadius:2 }} />
                <span style={{ display:'block', height:2, width:'70%', background:GOLD, borderRadius:2 }} />
              </div>
            </button>
          </header>

          {/* ── FULLSCREEN OVERLAY ───────────────────────── */}
          <div role="dialog" aria-modal="true" aria-label="Navigation"
            style={{
              position: 'fixed', inset: 0,
              background: ANTHRA,
              zIndex: 500,
              opacity: mobileOpen ? 1 : 0,
              pointerEvents: mobileOpen ? 'all' : 'none',
              transition: `opacity ${mobileOpen ? '.28s' : '.2s'} ease`,
              display: 'flex', flexDirection: 'column',
              overflow: 'hidden',
            }}
          >
            {/* Brand watermark */}
            <div aria-hidden style={{
              position:'absolute', bottom:24, left:24, right:24,
              fontFamily:FF_DISPLAY, fontWeight:900,
              fontSize:'clamp(40px,17vw,80px)', lineHeight:.9,
              textTransform:'uppercase', letterSpacing:'-.02em',
              color:'rgba(255,255,255,.04)',
              pointerEvents:'none', userSelect:'none', zIndex:0,
            }}>Exzellenz<br/>seit 2005</div>

            {/* Header row: logo + close */}
            <div style={{ position:'relative', zIndex:1, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 8px 0 20px', height:60, borderBottom:`1px solid ${SEP}`, flexShrink:0 }}>
              <Link to="/" onClick={() => setMobileOpen(false)} style={{ display:'flex', alignItems:'center', textDecoration:'none' }}>
                <img src="/bmp-logo.png" alt="BMP Logo" style={{ height:32, width:'auto', display:'block', objectFit:'contain' }} />
              </Link>
              <button onClick={() => setMobileOpen(false)} aria-label="Menü schließen"
                style={{ display:'flex', alignItems:'center', justifyContent:'center', width:48, height:48, background:'none', border:'none', cursor:'pointer', padding:0, flexShrink:0 }}>
                <div style={{ width:26, height:26, position:'relative', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <span style={{ position:'absolute', width:22, height:2, background:MUTED, borderRadius:2, transform:'rotate(45deg)' }} />
                  <span style={{ position:'absolute', width:22, height:2, background:MUTED, borderRadius:2, transform:'rotate(-45deg)' }} />
                </div>
              </button>
            </div>

            {/* Scrollable body */}
            <div style={{ position:'relative', zIndex:1, flex:1, overflowY:'auto', WebkitOverflowScrolling:'touch' }}>

              {/* Accordion nav */}
              <nav>
                <ul style={{ listStyle:'none', margin:0, padding:0 }}>
                  {NAV.map((item, idx) => {
                    const expanded = expandKey === item.key;
                    return (
                      <li key={item.key} style={{ borderBottom:`1px solid ${SEP}` }}>
                        <button
                          onClick={() => setExpand(k => k === item.key ? null : item.key)}
                          aria-expanded={expanded}
                          style={{
                            display:'flex', alignItems:'center', justifyContent:'space-between', width:'100%',
                            padding:'18px 24px',
                            background: expanded ? 'rgba(239,191,4,0.04)' : 'none',
                            border:'none', cursor:'pointer',
                            color: expanded ? GOLD : '#fff',
                            textAlign:'left', minHeight:60,
                            transition:'color .18s, background .18s',
                          }}
                        >
                          <span style={{ display:'flex', alignItems:'baseline', gap:12 }}>
                            <span style={{ fontFamily:FF_DISPLAY, fontSize:11, fontWeight:700, color: expanded ? GOLD : 'rgba(255,255,255,.28)', letterSpacing:'.1em', transition:'color .18s' }}>
                              0{idx + 1}
                            </span>
                            <span style={{ fontFamily:FF_DISPLAY, fontSize:19, fontWeight:600, textTransform:'uppercase', letterSpacing:'.02em' }}>
                              {item.label}
                            </span>
                          </span>
                          <span style={{ color:GOLD, fontSize:22, lineHeight:1, transition:'transform .26s cubic-bezier(0.22,1,0.36,1)', display:'inline-block', transform: expanded ? 'rotate(90deg)' : 'none' }}>›</span>
                        </button>

                        {/* Subnav */}
                        <div style={{ overflow:'hidden', maxHeight: expanded ? 520 : 0, transition:'max-height .3s cubic-bezier(0.22,1,0.36,1)' }}>
                          {item.sub && (
                            <ul style={{ listStyle:'none', margin:0, padding:'0 24px 18px 48px' }}>
                              {item.sub.map(sub => (
                                <li key={sub.label + sub.path}>
                                  <Link to={sub.path} onClick={() => setMobileOpen(false)}
                                    style={{ display:'flex', alignItems:'center', minHeight:46, padding:'4px 0', textDecoration:'none', color:'rgba(255,255,255,.62)', fontSize:15, fontFamily:FF_BODY }}
                                  >{sub.label}</Link>
                                </li>
                              ))}
                            </ul>
                          )}
                        </div>
                      </li>
                    );
                  })}
                </ul>
              </nav>

              {/* CTAs */}
              <div style={{ padding:'24px 24px 8px', display:'flex', flexDirection:'column', gap:12 }}>
                <Link to="/teilnahme#bewerben" onClick={() => setMobileOpen(false)}
                  style={{ display:'flex', alignItems:'center', justifyContent:'center', minHeight:52, background:GOLD, color:'#101828', fontSize:14, fontWeight:700, textTransform:'uppercase', letterSpacing:'.12em', textDecoration:'none', fontFamily:FF_DISPLAY }}
                >Jetzt bewerben</Link>
                <Link to="/mitglied-werden" onClick={() => setMobileOpen(false)}
                  style={{ display:'flex', alignItems:'center', justifyContent:'center', minHeight:50, background:'transparent', color:'#fff', fontSize:14, fontWeight:700, textTransform:'uppercase', letterSpacing:'.12em', textDecoration:'none', fontFamily:FF_DISPLAY, border:`1.5px solid ${LINE}` }}
                >Mitglied werden</Link>
                <Link to="/formular-hochladen" onClick={() => setMobileOpen(false)}
                  style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:8, minHeight:46, background:'none', color:'rgba(255,255,255,0.5)', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'.14em', textDecoration:'none', fontFamily:FF_DISPLAY, border:'1px dashed rgba(255,255,255,0.2)' }}
                ><Upload size={13} strokeWidth={2} /> Formular hochladen</Link>
              </div>

              {/* Footer zone: lang + social + secondary */}
              <div style={{ marginTop:8, padding:'20px 24px 28px', borderTop:`1px solid ${SEP}`, display:'flex', flexDirection:'column', gap:18 }}>
                {/* Lang + social row */}
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                    {(['DE','EN'] as const).map((l, i) => (
                      <React.Fragment key={l}>
                        {i === 1 && <span style={{ color:LINE, fontSize:13 }}>|</span>}
                        <button onClick={() => setLang(l)}
                          style={{ fontSize:12, fontWeight:600, letterSpacing:'.1em', textTransform:'uppercase', background:'none', border:'none', cursor:'pointer', color:lang===l ? GOLD : MUTED, padding:'4px 0', lineHeight:1, fontFamily:FF_DISPLAY }}
                        >{l}</button>
                      </React.Fragment>
                    ))}
                  </div>
                  <div style={{ display:'flex', gap:18 }}>
                    {SOCIAL.map(s => <SocialLink key={s.label} {...s} />)}
                  </div>
                </div>
                {/* Secondary links */}
                <div style={{ display:'flex', flexWrap:'wrap', gap:'0 20px' }}>
                  {SECONDARY.map(item => (
                    <Link key={item.path} to={item.path} onClick={() => setMobileOpen(false)}
                      style={{ display:'inline-flex', alignItems:'center', minHeight:40, fontSize:13, color:'rgba(255,255,255,.5)', textDecoration:'none', fontFamily:FF_BODY }}
                    >{item.label}</Link>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </>
      )}


      {/* ── FLOATING CTA ─────────────────────────────── */}
      {location.pathname === '/' && !formVisible && !isMobile && (
        <Link
          to="/teilnahme"
          style={{
            position: 'fixed', bottom: 32, right: 32, zIndex: 300,
            display: 'flex', alignItems: 'center', gap: 10,
            background: '#111D55', color: '#fff',
            fontFamily: FF_DISPLAY, fontSize: 14, fontWeight: 700,
            textTransform: 'uppercase', letterSpacing: '0.14em',
            padding: '14px 22px', textDecoration: 'none',
            boxShadow: '0 4px 24px rgba(3,9,58,0.5)',
            transform: mounted ? 'translateY(0)' : 'translateY(80px)',
            opacity: mounted ? 1 : 0,
            transition: 'transform 0.5s cubic-bezier(0.22,1,0.36,1) 0.6s, opacity 0.4s ease 0.6s, background 0.15s, color 0.15s',
          }}
          onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = '#EFBF04'; (e.currentTarget as HTMLElement).style.color = '#101828'; }}
          onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = '#111D55'; (e.currentTarget as HTMLElement).style.color = '#fff'; }}
        >
          Jetzt bewerben <ArrowRight size={13} />
        </Link>
      )}

      {/* ── MAIN ─────────────────────────────────────── */}
      <main className="flex-1" style={!isLegalPage ? { borderTop: '2px solid #111D55' } : {}}>{children}</main>

      {/* ── FOOTER ───────────────────────────────────── */}
      <footer style={{
        background: '#1A2030',
        borderTop: `4px solid ${GOLD}`,
        position: 'relative',
        overflow: 'hidden',
      }}>
        {/* Radial glow top-left */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          background: 'radial-gradient(ellipse 600px 300px at 0% 0%, rgba(239,191,4,0.04) 0%, transparent 60%)',
          pointerEvents: 'none',
        }} />

        {/* ── EDITORIAL HEADLINE BAND ── */}
        <div style={{
          position: 'relative',
          padding: isMobile ? '28px 24px 16px' : '36px 64px 0',
        }}>
          <h2 style={{
            fontFamily: FF_DISPLAY,
            fontWeight: 900,
            fontSize: 'clamp(1.6rem, 3vw, 2.8rem)',
            textTransform: 'uppercase',
            letterSpacing: '-0.03em',
            color: '#fff',
            margin: 0,
            lineHeight: 1,
            whiteSpace: isMobile ? 'normal' : 'nowrap',
          }}>
            Der Preis des <span style={{ color: GOLD }}>Bayerischen</span> Mittelstands
          </h2>

          {/* Gold rule beneath headline */}
          <div style={{
            marginTop: 14,
            display: 'flex',
            alignItems: 'center',
            gap: 16,
          }}>
            <div style={{ width: 36, height: 1, background: GOLD }} />
            <span style={{
              fontFamily: FF_DISPLAY,
              fontSize: 9,
              fontWeight: 700,
              textTransform: 'uppercase',
              letterSpacing: '0.35em',
              color: 'rgba(239,191,4,0.55)',
            }}>Exzellenz seit 2005</span>
            <div style={{ flex: 1, height: 1, background: 'rgba(239,191,4,0.18)' }} />
          </div>
        </div>

        {/* ── MAIN BODY: asymmetric layout ── */}
        <div style={{
          position: 'relative',
          padding: isMobile ? '24px 24px' : '24px 64px 20px',
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          gap: isMobile ? 40 : 0,
          alignItems: 'flex-start',
        }}>

          {/* Decorative year – desktop only */}
          {!isMobile && (
            <div style={{
              position: 'absolute',
              left: 52,
              top: -28,
              fontFamily: FF_DISPLAY,
              fontWeight: 900,
              fontSize: 160,
              lineHeight: 1,
              color: 'transparent',
              WebkitTextStroke: '1px rgba(239,191,4,0.1)',
              userSelect: 'none',
              pointerEvents: 'none',
              zIndex: 0,
            }}>2026</div>
          )}

          {/* ── LEFT COLUMN: copy + CTAs ── */}
          <div style={{
            position: 'relative',
            zIndex: 1,
            flex: isMobile ? 'none' : '0 0 420px',
            maxWidth: isMobile ? '100%' : 420,
          }}>
            {/* Logo */}
            <img
              src="/bmp-logo.png"
              alt="Bayerischer Mittelstandspreis"
              style={{ width: 140, height: 'auto', marginBottom: 10, opacity: 0.9 }}
            />

            <p style={{
              fontFamily: FF_BODY,
              fontSize: 15,
              lineHeight: 1.65,
              color: 'rgba(255,255,255,0.45)',
              margin: '0 0 16px 0',
              maxWidth: 300,
            }}>
              Die renommierteste Auszeichnung für herausragende Unternehmen des bayerischen Mittelstands.
            </p>

            {/* CTA stack */}
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'flex-start',
              gap: 8,
            }}>
              <Link
                to="/teilnahme#bewerben"
                style={{
                  fontFamily: FF_DISPLAY,
                  fontSize: 16,
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '0.12em',
                  color: '#101828',
                  background: GOLD,
                  padding: '10px 22px',
                  textDecoration: 'none',
                  display: 'inline-block',
                  borderRadius: 2,
                  transition: 'background 0.15s, box-shadow 0.2s',
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.background = '#FFD130';
                  e.currentTarget.style.boxShadow = '0 0 18px rgba(239,191,4,0.65), 0 0 40px rgba(239,191,4,0.3)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.background = GOLD;
                  e.currentTarget.style.boxShadow = 'none';
                }}
              >Kostenlos bewerben</Link>

              <Link
                to="/mitglied-werden"
                style={{
                  fontFamily: FF_DISPLAY,
                  fontSize: 16,
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '0.12em',
                  color: MUTED,
                  border: '1.5px solid rgba(239,191,4,0.35)',
                  padding: '8px 22px',
                  textDecoration: 'none',
                  display: 'inline-block',
                  borderRadius: 2,
                  transition: 'border-color 0.15s, color 0.15s',
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.borderColor = GOLD;
                  e.currentTarget.style.color = GOLD;
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.borderColor = 'rgba(239,191,4,0.35)';
                  e.currentTarget.style.color = MUTED;
                }}
              >Mitglied werden</Link>

              <Link
                to="/netzwerk#sponsoring"
                style={{
                  fontFamily: FF_DISPLAY,
                  fontSize: 16,
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '0.12em',
                  color: 'rgba(255,255,255,0.4)',
                  textDecoration: 'none',
                  paddingTop: 4,
                  transition: 'color 0.15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
                onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.4)'; }}
              >Sponsoring-Anfrage →</Link>
            </div>
          </div>

          {/* ── RIGHT COLUMN: nav links ── */}
          <div style={{
            position: 'relative',
            zIndex: 1,
            flex: 1,
            display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            justifyContent: isMobile ? 'flex-start' : 'flex-end',
            alignItems: 'flex-start',
            gap: isMobile ? 32 : 0,
            paddingLeft: isMobile ? 0 : 64,
          }}>

            {/* Nav pair container with gold vertical separator */}
            <div style={{
              display: 'flex',
              flexDirection: isMobile ? 'column' : 'row',
              gap: isMobile ? 32 : 0,
              alignItems: 'flex-start',
            }}>

              {/* BMP 2026 column */}
              <div style={{ minWidth: isMobile ? 'auto' : 160 }}>
                <p style={{
                  fontFamily: FF_DISPLAY,
                  fontSize: 9,
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '0.28em',
                  color: 'rgba(255,255,255,0.3)',
                  margin: '0 0 10px 0',
                }}>BMP 2026</p>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[
                    { l: 'Startseite', p: '/' },
                    { l: 'Preisträger', p: '/preistraeger' },
                    { l: 'Teilnahme', p: '/teilnahme' },
                  ].map(item => (
                    <li key={item.p}>
                      <Link
                        to={item.p}
                        style={{
                          fontFamily: FF_BODY,
                          fontSize: 16,
                          color: 'rgba(255,255,255,0.55)',
                          textDecoration: 'none',
                          transition: 'color 0.2s',
                          display: 'inline-block',
                        }}
                        onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
                        onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.55)'; }}
                      >{item.l}</Link>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Gold vertical separator – desktop only */}
              {!isMobile && (
                <div style={{
                  width: 1,
                  alignSelf: 'stretch',
                  background: 'rgba(239,191,4,0.22)',
                  margin: '0 40px',
                  flexShrink: 0,
                }} />
              )}

              {/* Engagement column */}
              <div style={{ minWidth: isMobile ? 'auto' : 160 }}>
                <p style={{
                  fontFamily: FF_DISPLAY,
                  fontSize: 9,
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '0.28em',
                  color: 'rgba(255,255,255,0.3)',
                  margin: '0 0 10px 0',
                }}>Engagement</p>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[
                    { l: 'Netzwerk & Jury', p: '/netzwerk' },
                    { l: 'Presse', p: '/presse' },
                    { l: 'Kontakt', p: '/kontakt' },
                  ].map(item => (
                    <li key={item.p}>
                      <Link
                        to={item.p}
                        style={{
                          fontFamily: FF_BODY,
                          fontSize: 16,
                          color: 'rgba(255,255,255,0.55)',
                          textDecoration: 'none',
                          transition: 'color 0.2s',
                          display: 'inline-block',
                        }}
                        onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
                        onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.55)'; }}
                      >{item.l}</Link>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Gold vertical separator – desktop only */}
              {!isMobile && (
                <div style={{
                  width: 1,
                  alignSelf: 'stretch',
                  background: 'rgba(239,191,4,0.22)',
                  margin: '0 40px',
                  flexShrink: 0,
                }} />
              )}

              {/* Legal column */}
              <div style={{ minWidth: isMobile ? 'auto' : 120 }}>
                <p style={{
                  fontFamily: FF_DISPLAY,
                  fontSize: 9,
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '0.28em',
                  color: 'rgba(255,255,255,0.3)',
                  margin: '0 0 10px 0',
                }}>Legal</p>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[
                    { l: 'Datenschutz', p: '/datenschutz' },
                    { l: 'Impressum', p: '/impressum' },
                  ].map(item => (
                    <li key={item.p}>
                      <Link
                        to={item.p}
                        style={{
                          fontFamily: FF_BODY,
                          fontSize: 16,
                          color: 'rgba(255,255,255,0.55)',
                          textDecoration: 'none',
                          transition: 'color 0.2s',
                          display: 'inline-block',
                        }}
                        onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
                        onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.55)'; }}
                      >{item.l}</Link>
                    </li>
                  ))}
                </ul>
              </div>

            </div>
          </div>
        </div>

        {/* ── PARTNER STRIP ── */}
        <div style={{
          borderTop: '1px solid rgba(239,191,4,0.15)',
          borderBottom: '1px solid rgba(239,191,4,0.15)',
          padding: isMobile ? '20px 24px' : '20px 64px',
          display: 'flex',
          alignItems: 'center',
          gap: isMobile ? 16 : 28,
          flexWrap: 'wrap',
        }}>
          <span style={{
            fontFamily: FF_DISPLAY,
            fontSize: 8,
            fontWeight: 700,
            textTransform: 'uppercase',
            letterSpacing: '0.32em',
            color: 'rgba(255,255,255,0.22)',
            flexShrink: 0,
          }}>Partner</span>
          <div style={{ width: 1, height: 20, background: 'rgba(239,191,4,0.2)', flexShrink: 0 }} />
          <img
            src="/images/ewif-logo.png"
            alt="EWIF – Europäisches Wirtschaftsforum"
            style={{ height: 32, width: 'auto', opacity: 0.5, filter: 'brightness(2)', display: 'block' }}
          />
          <img
            src="/images/partner-logos.png"
            alt="Hochschule für angewandtes Management · Gipfeldialog Altaussee"
            style={{ height: 32, width: 'auto', opacity: 0.5, filter: 'brightness(2)', display: 'block' }}
          />
        </div>

        {/* ── BOTTOM BAR ── */}
        <div style={{
          padding: isMobile ? '20px 24px' : '20px 64px',
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'flex-start' : 'center',
          justifyContent: 'space-between',
          gap: isMobile ? 16 : 0,
        }}>
          <p style={{
            fontFamily: FF_DISPLAY,
            fontSize: 10,
            fontWeight: 400,
            textTransform: 'uppercase',
            letterSpacing: '0.2em',
            color: 'rgba(255,255,255,0.3)',
            margin: 0,
          }}>
            © 2026 Bayerischer Mittelstandspreis · Alle Rechte vorbehalten
          </p>
          <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
            {SOCIAL.map(s => <SocialLink key={s.label} {...s} />)}
          </div>
        </div>
      </footer>

    </div>
  );
};

export default Layout;