// ============================================================
// NAV + FOOTER — multi-page version
// Each page passes its current path to highlight the active link.
// ============================================================

const navLinks = [
  { label: 'Chi Siamo', href: 'chi-siamo.html', match: 'chi-siamo' },
  {
    label: 'Prodotti',
    href: 'prodotti/aiko.html',
    match: 'prodotti',
    children: [
      { label: 'AiKo Engine', href: 'prodotti/aiko.html', tag: 'AI' },
      { label: 'Kodari', href: 'prodotti/kodari.html', tag: 'Platform' },
      { label: 'Lumiere', href: 'prodotti/lumiere.html', tag: 'Frontend' },
      { label: 'Lestage', href: 'prodotti/lestage.html', tag: 'File Flow' },
    ],
  },
  { label: 'Servizi', href: 'servizi.html', match: 'servizi' },
  { label: 'Tecnologia', href: 'tecnologia.html', match: 'tecnologia' },
  { label: 'Contatti', href: 'contatti.html', match: 'contatti' },
];

// Resolve href relative to current page depth
// pages in /prodotti/ need ../prefix; root pages need direct
function resolveHref(href, depth = 0) {
  if (depth === 0) return href;
  return '../'.repeat(depth) + href;
}

function SiteNav({ depth = 0, current = '' }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [productsOpen, setProductsOpen] = useState(false);
  const [typed, setTyped] = useState('LumiKode');
  const closeTimer = useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    const target = scrolled ? '' : 'LumiKode';
    const id = setInterval(() => {
      setTyped(t => {
        if (t === target) return t;
        if (t.length < target.length) return target.slice(0, t.length + 1);
        return t.slice(0, -1);
      });
    }, 75);
    return () => clearInterval(id);
  }, [scrolled]);

  const targetText = scrolled ? '' : 'LumiKode';
  const isTyping = typed !== targetText;

  const homeHref = depth === 0 ? 'index.html' : '../index.html';

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      background: scrolled ? 'rgba(15,15,35,0.94)' : 'rgba(15,15,35,0.55)',
      backdropFilter: 'blur(16px)',
      WebkitBackdropFilter: 'blur(16px)',
      borderBottom: `1px solid rgba(255,215,0,${scrolled ? '0.18' : '0.08'})`,
      transition: 'all 0.3s ease',
    }}>
      <nav style={{
        maxWidth: 1280, margin: '0 auto',
        padding: scrolled ? '12px 5%' : '16px 5%',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        transition: 'padding 0.3s',
      }}>
        <a href={homeHref} style={{
          display: 'flex', alignItems: 'center', gap: typed.length === 0 ? 0 : 12, textDecoration: 'none',
          transition: 'gap 0.25s ease',
        }} aria-label="Lumikode home">
          <CompassLogo size={36} />
          <span style={{
            fontSize: '1.35rem', letterSpacing: 2, lineHeight: 1,
            display: 'inline-flex', alignItems: 'baseline', whiteSpace: 'nowrap',
          }}>
            <span style={{ fontFamily: "'Cinzel', serif", color: colors.brandGold, fontWeight: 500, lineHeight: 1 }}>{typed.slice(0, 4)}</span>
            <span style={{ fontFamily: "'Courier Prime', monospace", color: colors.brandGreen, fontWeight: 700, lineHeight: 1 }}>{typed.slice(4)}</span>
            {isTyping && (
              <span style={{
                display: 'inline-block', width: 2, height: '1em',
                background: colors.brandGold, marginLeft: typed.length ? 3 : 0,
                boxShadow: `0 0 6px ${colors.brandGold}`,
                animation: 'lk-blink 0.5s steps(2, end) infinite',
                alignSelf: 'center',
              }} />
            )}
          </span>
        </a>
        <style>{`@keyframes lk-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }`}</style>

        <ul className="nav-desktop" style={{
          display: 'flex', gap: 4, listStyle: 'none', alignItems: 'center',
          margin: 0, padding: 0,
        }}>
          {navLinks.map(item => {
            const isActive = current === item.match;
            const hasChildren = item.children && item.children.length > 0;
            return (
              <li key={item.label} style={{ position: 'relative' }}
                onMouseEnter={() => {
                  if (hasChildren) {
                    if (closeTimer.current) clearTimeout(closeTimer.current);
                    setProductsOpen(true);
                  }
                }}
                onMouseLeave={() => {
                  if (hasChildren) {
                    closeTimer.current = setTimeout(() => setProductsOpen(false), 150);
                  }
                }}
              >
                <a href={resolveHref(item.href, depth)}
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    fontFamily: "'DM Sans', sans-serif",
                    fontSize: '0.86rem', fontWeight: 500,
                    color: isActive ? colors.brandGold : colors.textMuted,
                    textDecoration: 'none',
                    padding: '8px 14px',
                    letterSpacing: 0.4,
                    borderRadius: 4,
                    background: isActive ? 'rgba(255,215,0,0.06)' : 'transparent',
                    transition: 'color 0.2s, background 0.2s',
                  }}
                  onMouseEnter={e => e.currentTarget.style.color = colors.brandGold}
                  onMouseLeave={e => e.currentTarget.style.color = isActive ? colors.brandGold : colors.textMuted}
                >
                  {item.label}
                  {hasChildren && (
                    <Icon name="chevron-down" size={12} style={{
                      transform: productsOpen ? 'rotate(180deg)' : 'rotate(0)',
                      transition: 'transform 0.25s',
                    }} />
                  )}
                </a>

                {/* Dropdown for products */}
                {hasChildren && productsOpen && (
                  <div style={{
                    position: 'absolute', top: '100%', left: 0,
                    minWidth: 280, padding: 10, marginTop: 4,
                    background: 'rgba(15,15,35,0.98)',
                    backdropFilter: 'blur(20px)',
                    border: `1px solid rgba(255,215,0,0.18)`,
                    borderRadius: 10,
                    boxShadow: `0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(255,215,0,0.06)`,
                    animation: 'fadeSlideDown 0.2s ease-out',
                  }}>
                    {item.children.map(child => (
                      <a key={child.label} href={resolveHref(child.href, depth)}
                        style={{
                          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                          padding: '10px 14px',
                          fontSize: '0.85rem',
                          color: colors.textPrimary,
                          textDecoration: 'none',
                          borderRadius: 6,
                          transition: 'background 0.15s, color 0.15s',
                        }}
                        onMouseEnter={e => {
                          e.currentTarget.style.background = 'rgba(255,215,0,0.06)';
                          e.currentTarget.style.color = colors.brandGold;
                        }}
                        onMouseLeave={e => {
                          e.currentTarget.style.background = 'transparent';
                          e.currentTarget.style.color = colors.textPrimary;
                        }}
                      >
                        <span style={{ fontWeight: 500 }}>{child.label}</span>
                        <span style={{
                          fontFamily: "'Courier Prime', monospace",
                          fontSize: '0.65rem',
                          color: colors.textDim, letterSpacing: 0.5,
                        }}>{child.tag}</span>
                      </a>
                    ))}
                  </div>
                )}
              </li>
            );
          })}

          <li style={{ marginLeft: 16 }}>
            <a href={resolveHref('contatti.html', depth)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.85rem', fontWeight: 600,
              padding: '9px 18px',
              background: `linear-gradient(135deg, ${colors.brandGold}, ${colors.brandGoldMuted})`,
              color: colors.bgPrimary,
              borderRadius: 6, textDecoration: 'none',
              letterSpacing: 0.5,
              boxShadow: `0 0 20px rgba(255,215,0,0.2)`,
              transition: 'transform 0.2s, box-shadow 0.2s',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 4px 25px rgba(255,215,0,0.35)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 0 20px rgba(255,215,0,0.2)'; }}
            >Iniziamo<Icon name="arrow-right" size={13} color={colors.bgPrimary} /></a>
          </li>
        </ul>

        <button
          onClick={() => setOpen(o => !o)}
          aria-label="Menu"
          className="hamburger-btn"
          style={{
            display: 'none',
            background: 'transparent', border: `1px solid rgba(255,215,0,0.3)`,
            color: colors.brandGold, padding: 8, borderRadius: 4, cursor: 'pointer',
          }}
        >
          <Icon name={open ? 'x' : 'menu'} size={20} color={colors.brandGold} />
        </button>
      </nav>

      {/* Mobile drawer */}
      {open && (
        <div className="mobile-drawer" style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'rgba(15,15,35,0.98)', backdropFilter: 'blur(20px)',
          borderBottom: `1px solid rgba(255,215,0,0.2)`,
          padding: 16, display: 'none', flexDirection: 'column', gap: 4,
        }}>
          {navLinks.map(item => (
            <React.Fragment key={item.label}>
              <a href={resolveHref(item.href, depth)} style={{
                display: 'block', padding: '12px 14px',
                fontSize: '0.95rem', color: colors.textPrimary,
                textDecoration: 'none', borderRadius: 6,
                background: current === item.match ? 'rgba(255,215,0,0.08)' : 'transparent',
              }}>{item.label}</a>
              {item.children && item.children.map(c => (
                <a key={c.label} href={resolveHref(c.href, depth)} style={{
                  display: 'block', padding: '8px 14px 8px 28px',
                  fontSize: '0.85rem', color: colors.textMuted,
                  textDecoration: 'none',
                }}>↳ {c.label}</a>
              ))}
            </React.Fragment>
          ))}
        </div>
      )}

      <style>{`
        @keyframes fadeSlideDown {
          from { opacity: 0; transform: translateY(-6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .nav-desktop { display: flex !important; }
        .hamburger-btn { display: none !important; }
        .mobile-drawer { display: none !important; }
        @media (max-width: 940px) {
          .nav-desktop { display: none !important; }
          .hamburger-btn { display: flex !important; align-items: center; justify-content: center; }
          .mobile-drawer { display: flex !important; }
        }
      `}</style>
    </header>
  );
}

function SiteFooter({ depth = 0 }) {
  return (
    <footer style={{
      padding: '60px 5% 30px',
      background: '#06060d',
      borderTop: `1px solid rgba(255,215,0,0.12)`,
      position: 'relative',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: '5%', right: '5%', height: 1,
        background: `linear-gradient(90deg, transparent, ${colors.brandGold}, ${colors.brandEmerald}, transparent)`,
        opacity: 0.4,
      }} />
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 36, marginBottom: 36,
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <CompassLogo size={32} />
              <div style={{ fontSize: '1.1rem' }}>
                <span style={{ fontFamily: "'Cinzel', serif", color: colors.brandGold, fontWeight: 500 }}>Lumi</span>
                <span style={{ fontFamily: "'Courier Prime', monospace", color: colors.brandGreen, fontWeight: 700 }}>Kode</span>
              </div>
            </div>
            <p style={{
              fontFamily: "'Cinzel', serif", fontSize: '0.85rem',
              color: colors.textGold, fontStyle: 'italic',
              lineHeight: 1.5, marginBottom: 8,
            }}>"Dove l'esperienza incontra l'innovazione"</p>
            <p style={{
              fontSize: '0.78rem', color: colors.textDim,
              fontFamily: "'Courier Prime', monospace", letterSpacing: 0.5,
              lineHeight: 1.7,
            }}>
              Via Circonvallazione Nord-Est 229<br />
              41049 Sassuolo (MO), Italia
            </p>
          </div>

          <div>
            <div style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: '0.7rem', color: colors.textGold,
              letterSpacing: 2, textTransform: 'uppercase',
              marginBottom: 14, fontWeight: 600,
            }}>Prodotti</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { label: 'AiKo Engine', href: 'prodotti/aiko.html' },
                { label: 'Kodari', href: 'prodotti/kodari.html' },
                { label: 'Lumiere', href: 'prodotti/lumiere.html' },
                { label: 'Lestage', href: 'prodotti/lestage.html' },
              ].map(l => (
                <a key={l.label} href={resolveHref(l.href, depth)} style={{
                  fontSize: '0.85rem', color: colors.textMuted,
                  textDecoration: 'none', transition: 'color 0.2s',
                }}
                  onMouseEnter={e => e.currentTarget.style.color = colors.brandGold}
                  onMouseLeave={e => e.currentTarget.style.color = colors.textMuted}
                >{l.label}</a>
              ))}
            </div>
          </div>

          <div>
            <div style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: '0.7rem', color: colors.textGold,
              letterSpacing: 2, textTransform: 'uppercase',
              marginBottom: 14, fontWeight: 600,
            }}>Azienda</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { label: 'Chi Siamo', href: 'chi-siamo.html' },
                { label: 'Servizi', href: 'servizi.html' },
                { label: 'Tecnologia', href: 'tecnologia.html' },
                { label: 'Contatti', href: 'contatti.html' },
              ].map(l => (
                <a key={l.label} href={resolveHref(l.href, depth)} style={{
                  fontSize: '0.85rem', color: colors.textMuted,
                  textDecoration: 'none', transition: 'color 0.2s',
                }}
                  onMouseEnter={e => e.currentTarget.style.color = colors.brandGold}
                  onMouseLeave={e => e.currentTarget.style.color = colors.textMuted}
                >{l.label}</a>
              ))}
            </div>
          </div>

          <div>
            <div style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: '0.7rem', color: colors.textGold,
              letterSpacing: 2, textTransform: 'uppercase',
              marginBottom: 14, fontWeight: 600,
            }}>Contatti</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <a href="mailto:info@lumikode.io" style={{ fontSize: '0.85rem', color: colors.textPrimary, fontFamily: "'Courier Prime', monospace", textDecoration: 'none' }}>info@lumikode.io</a>
              <a
                href="https://www.linkedin.com/company/lumikode-srl"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="LinkedIn di Lumikode"
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  fontSize: '0.85rem', color: colors.textPrimary,
                  fontFamily: "'Courier Prime', monospace",
                  textDecoration: 'none',
                  transition: 'color 0.2s',
                }}
                onMouseEnter={e => { e.currentTarget.style.color = colors.brandGold; }}
                onMouseLeave={e => { e.currentTarget.style.color = colors.textPrimary; }}
              >
                <LinkedinIcon size={14} />
                LinkedIn
              </a>
              <a href={resolveHref('contatti.html', depth)} style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: '0.78rem', color: colors.brandGold,
                textDecoration: 'none', marginTop: 6, fontWeight: 600,
              }}>
                Iniziamo <Icon name="arrow-right" size={12} color={colors.brandGold} />
              </a>
            </div>
          </div>
        </div>

        <div style={{
          paddingTop: 20,
          borderTop: '1px solid rgba(255,255,255,0.06)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 12,
        }}>
          <div style={{
            fontSize: '0.72rem', color: colors.textDim,
            fontFamily: "'Courier Prime', monospace", letterSpacing: 0.5,
            lineHeight: 1.7,
          }}>
            <div>© 2026 Lumikode SRL · Tutti i diritti riservati</div>
            <div style={{ opacity: 0.85 }}>P.IVA / C.F. / Reg. Imprese MO 04223040363 · SDI SUBM70N</div>
          </div>
          <p style={{
            fontSize: '0.7rem', color: colors.textDim,
            fontFamily: "'Courier Prime', monospace", letterSpacing: 1,
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%',
              background: colors.brandGreen,
              boxShadow: `0 0 8px ${colors.brandGreen}`,
              animation: 'blink 1.6s ease-in-out infinite',
            }} />
            AiKo Engine — operational
          </p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteNav, SiteFooter, navLinks, resolveHref });