/* FullscreenMenu.jsx — fullscreen overlay nav with a side submenu for Dienstleistungen.
   3 variants: 'tiefblau' (deep blue), 'bild' (links + hover image preview), 'hell' (light minimal). */

const KG_MAIN_ITEMS = [
  { key: 'Home', label: 'Home', img: 'assets/work-drywall-ceiling.jpeg' },
  { key: 'Dienstleistungen', label: 'Dienstleistungen', img: 'assets/work-ceiling-lights.jpeg', sub: true },
  { key: 'Unternehmen', label: 'Unternehmen', img: 'assets/team-van.jpeg' },
  { key: 'Umbauten', label: 'Umbauten', img: 'assets/work-attic.jpeg' },
  { key: 'Kontakt', label: 'Kontakt', img: 'assets/building-modern.jpeg' }
];

const KG_SUB_ITEMS = [
  { key: 'gipser', label: 'Gipserarbeiten', desc: 'Innen- & Aussenputz, Decken, Wände', img: 'assets/work-drywall-ceiling.jpeg' },
  { key: 'spezial', label: 'Spezial Gipsarbeiten', desc: 'Trockenbau, Akustik, Gewölbe', img: 'assets/work-ceiling-lights.jpeg' },
  { key: 'fassaden', label: 'Fassaden', desc: 'Konstruktion, Sanierung, Dämmung', img: 'assets/building-modern.jpeg' }
];

function FullscreenMenu({ open, onClose, onNav, active, variant = 'tiefblau' }) {
  const [view, setView] = React.useState('main');   // 'main' | 'dienst'
  const [hoverImg, setHoverImg] = React.useState(KG_MAIN_ITEMS[0].img);

  React.useEffect(() => {
    if (open) { setView('main'); setHoverImg(KG_MAIN_ITEMS[0].img); }
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const dark = variant !== 'hell';
  const bg = variant === 'tiefblau'
    ? 'linear-gradient(150deg, #0E3A66 0%, #124B82 60%, #16243a 100%)'
    : variant === 'hell'
    ? 'var(--kg-paper)'
    : '#0E3A66';
  const fg = dark ? '#fff' : 'var(--kg-ink)';
  const muted = dark ? 'rgba(255,255,255,0.55)' : 'var(--kg-slate-500)';
  const logo = dark ? 'assets/logo-kigips-transparent.png' : 'assets/logo-kigips.png';

  const go = (page, anchor) => { onClose(); setTimeout(() => onNav(page, anchor), 240); };

  return (
    <div aria-hidden={!open} style={{
      position: 'fixed', inset: 0, zIndex: 70, background: bg,
      clipPath: open ? 'circle(150% at 92% 41px)' : 'circle(0% at 92% 41px)',
      transition: 'clip-path .62s var(--kg-ease)',
      pointerEvents: open ? 'auto' : 'none', overflow: 'hidden'
    }}>
      {/* top bar */}
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px', height: 82, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <img src={logo} alt="Kigips GmbH" onClick={() => go('Home')} style={{ height: 40, cursor: 'pointer' }} />
        <CloseButton onClick={onClose} dark={dark} />
      </div>

      {/* body */}
      <div style={{ position: 'relative', height: 'calc(100% - 82px)', overflow: 'hidden' }}>
        <div style={{ display: 'flex', height: '100%', maxWidth: 1200, margin: '0 auto', padding: '0 28px' }}>

          {/* ----- left: sliding menu column ----- */}
          <div style={{ flex: variant === 'bild' ? '0 0 52%' : '1 1 auto', position: 'relative', overflow: 'hidden' }}>
            {/* MAIN */}
            <Panel shown={view === 'main'} dir="left">
              <span style={{ fontFamily: 'var(--kg-font-body)', fontSize: 13, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: muted, marginBottom: 4 }}>Navigation</span>
              <nav style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 18 }}>
                {KG_MAIN_ITEMS.map((it, i) => (
                  <MenuLink key={it.key} index={i + 1} label={it.label} fg={fg} muted={muted}
                    active={active === it.key} open={open} delay={open ? 140 + i * 60 : 0} hasSub={it.sub}
                    onMouseEnter={() => setHoverImg(it.img)}
                    onClick={() => it.sub ? setView('dienst') : go(it.key)} />
                ))}
              </nav>
              <div style={{ marginTop: 38, opacity: open ? 1 : 0, transform: open ? 'none' : 'translateY(16px)', transition: 'all .7s var(--kg-ease) 480ms' }}>
                <Button variant={dark ? 'white' : 'primary'} size="lg" icon="arrow-right" onClick={() => go('Offerte')}>Offerte anfragen</Button>
              </div>
            </Panel>

            {/* DIENSTLEISTUNGEN SUBMENU */}
            <Panel shown={view === 'dienst'} dir="right">
              <button onClick={() => setView('main')} style={{
                display: 'inline-flex', alignItems: 'center', gap: 9, background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: 'var(--kg-font-body)', fontSize: 14, fontWeight: 700, letterSpacing: '.06em',
                color: muted, padding: 0, marginBottom: 22, width: 'fit-content'
              }}
                onMouseEnter={e => e.currentTarget.style.color = fg} onMouseLeave={e => e.currentTarget.style.color = muted}>
                <Icon name="arrow-left" size={18} /> Zurück zum Menü
              </button>
              <span className="kg-h3" style={{ color: fg, opacity: 0.55, fontSize: 15, letterSpacing: '.14em', textTransform: 'uppercase', fontFamily: 'var(--kg-font-body)', fontWeight: 700 }}>Dienstleistungen</span>
              <nav style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 16 }}>
                {KG_SUB_ITEMS.map((it, i) => (
                  <MenuLink key={it.key} label={it.label} desc={it.desc} fg={fg} muted={muted} sub
                    open={open && view === 'dienst'} delay={view === 'dienst' ? 80 + i * 70 : 0}
                    onMouseEnter={() => setHoverImg(it.img)}
                    onClick={() => go('Dienstleistungen', it.key)} />
                ))}
              </nav>
              <div style={{ marginTop: 30 }}>
                <Button variant={dark ? 'outline' : 'ghost'} icon="arrow-right" onClick={() => go('Dienstleistungen')}>Alle Dienstleistungen</Button>
              </div>
            </Panel>
          </div>

          {/* ----- right: contact (tiefblau/hell) or image preview (bild) ----- */}
          {variant === 'bild' ? (
            <div style={{ flex: '1 1 auto', position: 'relative', margin: '8px 0 36px 36px', borderRadius: 'var(--kg-radius-lg)', overflow: 'hidden' }} className="kg-menu-aside">
              {[...KG_MAIN_ITEMS, ...KG_SUB_ITEMS].map(it => (
                <div key={it.img + it.key} style={{
                  position: 'absolute', inset: 0, backgroundImage: `url(${it.img})`, backgroundSize: 'cover', backgroundPosition: 'center',
                  opacity: hoverImg === it.img ? 1 : 0, transform: hoverImg === it.img ? 'scale(1.02)' : 'scale(1.08)',
                  transition: 'opacity .6s var(--kg-ease), transform 1.2s var(--kg-ease)'
                }} />
              ))}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(14,58,102,0.1), rgba(14,58,102,0.45))' }} />
            </div>
          ) : (
            <div className="kg-menu-aside" style={{ flex: '0 0 320px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 56, opacity: open ? 1 : 0, transition: 'opacity .8s var(--kg-ease) 420ms' }}>
              <div style={{ borderTop: `1px solid ${dark ? 'rgba(255,255,255,0.18)' : 'var(--kg-line)'}`, paddingTop: 26, display: 'flex', flexDirection: 'column', gap: 16 }}>
                <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: muted }}>Kontakt</span>
                <a href="tel:+41715250808" style={{ display: 'flex', gap: 12, alignItems: 'center', textDecoration: 'none', color: fg, fontFamily: 'var(--kg-font-display)', fontWeight: 700, fontSize: 26 }}>071 525 08 08</a>
                <span style={{ display: 'flex', gap: 11, alignItems: 'center', color: dark ? 'rgba(255,255,255,0.78)' : 'var(--kg-fg2)', fontSize: 16 }}><Icon name="mail" size={18} color={dark ? '#fff' : 'var(--kg-blue)'} />info@kigips.ch</span>
                <span style={{ display: 'flex', gap: 11, alignItems: 'flex-start', color: dark ? 'rgba(255,255,255,0.78)' : 'var(--kg-fg2)', fontSize: 16 }}><Icon name="map-pin" size={18} color={dark ? '#fff' : 'var(--kg-blue)'} style={{ marginTop: 2 }} />Lindenwiesstrasse 10, 9200 Gossau</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* sliding panel */
function Panel({ children, shown, dir }) {
  const off = dir === 'left' ? '-8%' : '8%';
  return (
    <div style={{
      position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center',
      opacity: shown ? 1 : 0, transform: shown ? 'translateX(0)' : `translateX(${off})`,
      transition: 'opacity .42s var(--kg-ease), transform .52s var(--kg-ease)',
      pointerEvents: shown ? 'auto' : 'none'
    }}>{children}</div>
  );
}

/* big menu link */
function MenuLink({ index, label, desc, fg, muted, active, open, delay, hasSub, sub, onClick, onMouseEnter }) {
  const [h, setH] = React.useState(false);
  const size = sub ? 'clamp(30px, 4.6vw, 56px)' : 'clamp(38px, 6.2vw, 82px)';
  return (
    <button onClick={onClick} onMouseEnter={() => { setH(true); onMouseEnter && onMouseEnter(); }} onMouseLeave={() => setH(false)}
      style={{
        display: 'flex', alignItems: 'baseline', gap: 16, background: 'none', border: 'none', cursor: 'pointer',
        textAlign: 'left', padding: sub ? '8px 0' : '4px 0', width: 'fit-content',
        opacity: open ? 1 : 0, transform: open ? 'translateY(0)' : 'translateY(22px)',
        transition: `opacity .6s var(--kg-ease) ${delay}ms, transform .6s var(--kg-ease) ${delay}ms`
      }}>
      {index && <span style={{ fontFamily: 'var(--kg-font-body)', fontSize: 14, fontWeight: 700, color: muted, transform: h ? 'translateX(4px)' : 'none', transition: 'transform .3s var(--kg-ease)', minWidth: 22 }}>0{index}</span>}
      <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <span style={{
          fontFamily: 'var(--kg-font-display)', fontWeight: 800, fontSize: size, lineHeight: 1.0,
          letterSpacing: '-0.02em', color: h || active ? 'var(--kg-blue)' : fg,
          transform: h ? 'translateX(10px)' : 'none', transition: 'color .3s var(--kg-ease), transform .35s var(--kg-ease)',
          display: 'inline-flex', alignItems: 'center', gap: 14
        }}>
          {label}
          {hasSub && <span style={{ transform: h ? 'translateX(4px)' : 'none', transition: 'transform .3s var(--kg-ease)', display: 'inline-flex' }}><Icon name="chevron-right" size={sub ? 26 : 40} color="var(--kg-blue)" strokeWidth={2.2} /></span>}
        </span>
        {desc && <span style={{ fontFamily: 'var(--kg-font-body)', fontSize: 15, color: muted, transform: h ? 'translateX(10px)' : 'none', transition: 'transform .35s var(--kg-ease)' }}>{desc}</span>}
      </span>
    </button>
  );
}

/* close button */
function CloseButton({ onClick, dark }) {
  const [h, setH] = React.useState(false);
  const color = dark ? '#fff' : 'var(--kg-ink)';
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 11, background: 'none', border: 'none', cursor: 'pointer', padding: '8px 4px' }}>
      <span style={{ fontFamily: 'var(--kg-font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '.14em', textTransform: 'uppercase', color }} className="kg-burger-label">Schliessen</span>
      <span style={{ position: 'relative', width: 26, height: 18, transform: h ? 'rotate(90deg)' : 'none', transition: 'transform .4s var(--kg-ease)' }}>
        <span style={{ position: 'absolute', top: 8, left: 0, width: 26, height: 2, background: color, borderRadius: 2, transform: 'rotate(45deg)' }} />
        <span style={{ position: 'absolute', top: 8, left: 0, width: 26, height: 2, background: color, borderRadius: 2, transform: 'rotate(-45deg)' }} />
      </span>
    </button>
  );
}

Object.assign(window, { FullscreenMenu });