// ============================================================
// shared.jsx — Nav e Footer para o site multi-página
// Carregado DEPOIS de sections.jsx, sobrescreve window.Nav e window.Footer
// ============================================================

// Download e Cadastro removidos: o servidor ainda não está linkado ao site.
// A única ação da landing é entrar na lista de espera.
const NAV_LINKS = [
  { href: '/index.php',    img: '/assets/btn-home.png',      label: 'Início',   page: 'home',     blue: false },
  { href: '/noticias.php', img: '/assets/btn-noticias.png',  label: 'Notícias', page: 'noticias', blue: false },
  { href: '/rankings.php', img: '/assets/btn-rankings.png',  label: 'Rankings', page: 'rankings', blue: false },
  { href: '/sobre.php',    img: '/assets/btn-sobre.png',     label: 'Sobre',    page: 'sobre',    blue: false },
];

const MultiNav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const { t }      = useT();
  const currentPage = (typeof window !== 'undefined' && window.CURRENT_PAGE) || 'home';

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

  // ── LANDING (home): página de captação, SEM navegação pra outras páginas. ──
  // Logo central em destaque (levemente maior) + seletor de idioma discreto à direita.
  // As outras páginas (notícias, rankings, sobre) seguem com o menu completo abaixo.
  if (currentPage === 'home') {
    return (
      <nav className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${
        scrolled
          ? 'bg-stone-950/90 backdrop-blur-md border-b border-gold-700/30 py-2'
          : 'bg-gradient-to-b from-stone-950/80 via-stone-950/40 to-transparent py-3'
      }`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 flex items-center justify-center relative">
          {/* Logo central — clicável, leva ao topo da própria landing */}
          <a
            href="#"
            aria-label="KingdomTale"
            className="block transition-transform duration-200 hover:scale-105"
          >
            <img
              src="/assets/logo.webp"
              alt="KingdomTale"
              className="h-16 sm:h-20 lg:h-24 w-auto select-none"
              style={{ filter: 'drop-shadow(0 4px 14px rgba(0,0,0,0.7)) drop-shadow(0 0 22px rgba(218,165,32,0.35))' }}
              draggable="false"
            />
          </a>

          {/* Seletor de idioma — discreto (menor/sóbrio), canto superior direito */}
          <div className="absolute right-2 sm:right-4 top-1/2 -translate-y-1/2">
            <LangToggle className="scale-90 sm:scale-95 opacity-70 hover:opacity-100 transition-opacity" />
          </div>
        </div>
      </nav>
    );
  }

  const goldFilter   = 'drop-shadow(0 4px 14px rgba(0,0,0,0.7)) drop-shadow(0 0 22px rgba(218,165,32,0.6)) brightness(1.0)';
  const goldHover    = 'drop-shadow(0 6px 22px rgba(0,0,0,0.7)) drop-shadow(0 0 32px rgba(255,200,80,0.95)) drop-shadow(0 0 55px rgba(218,165,32,0.55)) brightness(1.18)';
  const blueFilter   = 'drop-shadow(0 4px 14px rgba(0,0,0,0.7)) drop-shadow(0 0 18px rgba(80,150,255,0.6)) brightness(1.02)';
  const blueHover    = 'drop-shadow(0 6px 22px rgba(0,0,0,0.7)) drop-shadow(0 0 28px rgba(120,170,255,0.9)) drop-shadow(0 0 50px rgba(80,140,255,0.55)) brightness(1.2)';
  const activeBoost  = 'brightness(1.25) drop-shadow(0 0 18px rgba(218,165,32,0.5))';

  return (
    <>
      {/* Logo top-left */}
      <a
        href="/index.php"
        className="fixed top-1 left-6 sm:top-1.5 sm:left-10 lg:left-16 z-[60] block transition-transform duration-200 hover:scale-105"
        aria-label="KingdomTale — Início"
      >
        <img
          src="/assets/logo.webp"
          alt="KingdomTale"
          className="h-12 md:h-16 lg:h-20 w-auto select-none pointer-events-none"
          style={{ filter: 'drop-shadow(0 4px 14px rgba(0,0,0,0.7)) drop-shadow(0 0 22px rgba(218,165,32,0.35))' }}
          draggable="false"
        />
      </a>

      {/* Language toggle top-right */}
      <div className="fixed top-2 right-3 sm:top-2.5 sm:right-4 z-[60]">
        <LangToggle />
      </div>

      <nav className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${
        scrolled
          ? 'bg-stone-950/90 backdrop-blur-md border-b border-gold-700/30 py-2'
          : 'bg-gradient-to-b from-stone-950/80 via-stone-950/40 to-transparent py-4'
      }`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 flex items-center justify-center gap-4 relative">

          {/* Desktop — botões ornamentais */}
          <div className="hidden md:flex items-center gap-1 lg:gap-3">

            {NAV_LINKS.map((b) => {
              const base  = b.blue ? blueFilter : goldFilter;
              const hover = b.blue ? blueHover  : goldHover;
              const isActive = currentPage === b.page;
              return (
                <a
                  key={b.page}
                  href={b.href}
                  className="relative h-20 lg:h-24 transition-transform duration-200 hover:-translate-y-0.5"
                  aria-label={b.label}
                  aria-current={isActive ? 'page' : undefined}
                >
                  <img
                    src={b.img}
                    alt={b.label}
                    className="h-full w-auto select-none pointer-events-none transition-[filter] duration-200"
                    style={{ filter: isActive ? activeBoost : base }}
                    onMouseEnter={e => { e.currentTarget.style.filter = hover; }}
                    onMouseLeave={e => { e.currentTarget.style.filter = isActive ? activeBoost : base; }}
                  />
                </a>
              );
            })}
          </div>

          {/* Mobile — links de texto compactos */}
          <div className="flex md:hidden items-center justify-center gap-3 flex-wrap pl-16 pr-20">
            {[
              { href: '/index.php',    label: 'INÍCIO',    page: 'home'     },
              { href: '/noticias.php', label: 'NOTÍCIAS',  page: 'noticias' },
              { href: '/rankings.php', label: 'RANKINGS',  page: 'rankings' },
              { href: '/sobre.php',    label: 'SOBRE',     page: 'sobre'    },
            ].map(l => (
              <a key={l.page} href={l.href}
                className={`font-impact tracking-[0.2em] text-[10px] transition-colors
                  ${currentPage === l.page ? 'text-gold-300' : 'text-parchment/80 hover:text-gold-400'}`}>
                {l.label}
              </a>
            ))}
          </div>

        </div>
      </nav>
    </>
  );
};

// Footer com domínio atualizado para kingdomtale.com.br
const MultiFooter = () => {
  const { t } = useT();
  const currentPage = (typeof window !== 'undefined' && window.CURRENT_PAGE) || 'home';

  // ── LANDING (home): rodapé enxuto — sem colunas de navegação ("Reino"/"Jurídico"). ──
  // Mantém logo+nome, lema, domínio, seletor de idioma, link de Privacidade
  // (obrigatório p/ LGPD e aprovação de anúncios) e a linha de copyright/disclaimer.
  // As outras páginas seguem com o rodapé completo abaixo.
  if (currentPage === 'home') {
    return (
      <footer className="relative bg-stone-950 border-t border-gold-700/30 pt-16 pb-10">
        <div className="max-w-3xl mx-auto px-6 flex flex-col items-center text-center gap-5">
          <div className="flex items-center gap-3">
            <img
              src="/assets/logo.webp"
              alt="KingdomTale"
              className="h-10 w-auto select-none"
              draggable="false"
            />
            <span className="font-display font-black tracking-[0.2em] text-parchment text-lg">KINGDOMTALE</span>
          </div>

          <p className="font-body italic text-parchment/50 text-sm max-w-md leading-relaxed">
            {t('foot_motto')}
          </p>

          <p className="font-impact tracking-[0.3em] text-xs text-gold-500/60">
            kingdomtale.com.br
          </p>

          {/* Política de Privacidade — obrigatória (LGPD + aprovação Facebook/Google Ads) */}
          <a href="/privacidade.php" className="font-body text-sm text-parchment/70 hover:text-gold-400 transition-colors">
            {t('foot_privacy')}
          </a>

          <LangToggle />

          <OrnamentDivider />

          <div className="flex flex-col items-center gap-2 text-xs text-parchment/40 font-body">
            <span>{t('foot_rights')}</span>
            <span className="italic max-w-md leading-relaxed">{t('foot_disclaimer')}</span>
          </div>
        </div>
      </footer>
    );
  }

  return (
    <footer className="relative bg-stone-950 border-t border-gold-700/30 pt-16 pb-10">
      <div className="max-w-7xl mx-auto px-6 flex flex-col gap-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
          <div className="md:col-span-2 flex flex-col gap-4">
            <div className="flex items-center gap-3">
              <img
                src="/assets/logo.webp"
                alt="KingdomTale"
                className="h-10 w-auto select-none"
                draggable="false"
              />
              <span className="font-display font-black tracking-[0.2em] text-parchment text-lg">KINGDOMTALE</span>
            </div>
            <p className="font-body italic text-parchment/50 text-sm max-w-md leading-relaxed">
              {t('foot_motto')}
            </p>
            <p className="font-impact tracking-[0.3em] text-xs text-gold-500/60 mt-2">
              kingdomtale.com.br
            </p>
            <div className="mt-3"><LangToggle /></div>
          </div>

          <div className="flex flex-col gap-3">
            <div className="font-impact tracking-[0.4em] text-xs text-gold-500/70 mb-2">{t('foot_links')}</div>
            {[{ k: 'foot_rules' }, { k: 'foot_support' }, { k: 'foot_donate' }].map(l => (
              <a key={l.k} href="#" className="font-body text-sm text-parchment/70 hover:text-gold-400 transition-colors w-fit">
                {t(l.k)}
              </a>
            ))}
          </div>

          <div className="flex flex-col gap-3">
            <div className="font-impact tracking-[0.4em] text-xs text-gold-500/70 mb-2">{t('foot_legal')}</div>
            {[
              { k: 'foot_terms',   href: '#' },
              { k: 'foot_privacy', href: '/privacidade.php' },
              { k: 'foot_contact', href: 'mailto:contato@kingdomtale.com.br' },
            ].map(l => (
              <a key={l.k} href={l.href} className="font-body text-sm text-parchment/70 hover:text-gold-400 transition-colors w-fit">
                {t(l.k)}
              </a>
            ))}
          </div>
        </div>

        <OrnamentDivider />

        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 text-xs text-parchment/40 font-body">
          <span>{t('foot_rights')}</span>
          <span className="italic max-w-md text-right">{t('foot_disclaimer')}</span>
        </div>
      </div>
    </footer>
  );
};

// Sobrescrever Nav e Footer do sections.jsx com as versões multi-página
window.Nav    = MultiNav;
window.Footer = MultiFooter;