/* ==========================================
   SHELL — Header, Footer, page wrapper
   ========================================== */

const NAV = [
  { id: 'home', label: 'Início', path: '/' },
  { id: 'metodo', label: 'Método', path: '/metodo' },
  { id: 'solucoes', label: 'Soluções', path: '/solucoes' },
  { id: 'projetos', label: 'Projetos', path: '/projetos' },
  { id: 'mentoria', label: 'Mentoria', path: '/mentoria' },
  { id: 'blog', label: 'Conteúdo', path: '/conteudo' },
  { id: 'sobre', label: 'Sobre', path: '/sobre' },
  { id: 'contato', label: 'Contato', path: '/contato' },
];

const Header = ({ page, onNav, dark }) => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { setOpen(false); }, [page]);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const go = (p) => { setOpen(false); onNav(p); };
  const handleNavClick = (event, targetPage) => {
    if (
      event.defaultPrevented ||
      event.button !== 0 ||
      event.metaKey ||
      event.ctrlKey ||
      event.shiftKey ||
      event.altKey
    ) {
      return;
    }
    event.preventDefault();
    go(targetPage);
  };

  return (
    <React.Fragment>
      <header className={`site-header${dark ? ' dark' : ''}`}>
        <div className="site-header-inner">
          <a href="/" onClick={(event) => handleNavClick(event, 'home')} style={{ cursor: 'pointer' }}>
            <Logo dark={dark}/>
          </a>
          <nav className="site-nav">
            {NAV.map(n => (
              <a key={n.id}
                 href={n.path}
                 className={`nav-link${page === n.id ? ' active' : ''}`}
                 onClick={(event) => handleNavClick(event, n.id)}
                 style={{ cursor: 'pointer' }}>
                {n.label}
              </a>
            ))}
          </nav>
          <button className="btn btn-primary header-cta" onClick={() => go('contato')}>
            Falar comigo
            <Icon name="arrow-right" size={16} className="arrow"/>
          </button>
          <button className="header-burger" onClick={() => setOpen(!open)} aria-label="Abrir menu" aria-expanded={open}>
            <span className={`burger-icon${open ? ' open' : ''}`}><span/><span/><span/></span>
          </button>
        </div>
      </header>
      <div className={`mobile-menu-backdrop${open ? ' visible' : ''}`} onClick={() => setOpen(false)}/>
      <aside className={`mobile-menu${open ? ' open' : ''}`} aria-hidden={!open}>
        <div className="mobile-menu-head">
          <Logo/>
          <button className="mobile-close" onClick={() => setOpen(false)} aria-label="Fechar menu">
            <span className="burger-icon open"><span/><span/><span/></span>
          </button>
        </div>
        <nav className="mobile-nav">
          {NAV.map(n => (
            <a key={n.id}
               href={n.path}
               className={`mobile-nav-link${page === n.id ? ' active' : ''}`}
               onClick={(event) => handleNavClick(event, n.id)}>
              <span>{n.label}</span>
              <Icon name="arrow-right" size={16}/>
            </a>
          ))}
        </nav>
        <button className="btn btn-primary mobile-menu-cta" onClick={() => go('contato')}>
          Falar comigo <Icon name="arrow-right" size={16}/>
        </button>
        <div className="mobile-menu-social">
          <a href="#"><Icon name="linkedin" size={16}/></a>
          <a href="#"><Icon name="youtube" size={16}/></a>
          <a href="#"><Icon name="instagram" size={16}/></a>
        </div>
      </aside>
    </React.Fragment>
  );
};

const Footer = ({ onNav }) => (
  <footer className="site-footer">
    <div className="footer-inner">
      <div className="flex items-center gap-3">
        <SparkStar size={18}/>
        <span style={{ fontSize: 13.5, fontWeight: 500, color: '#6B6770' }}>
          © 2026 Yohann Escher
        </span>
      </div>
      <div className="footer-tags">
        <span>IA</span>
        <span>•</span>
        <span>AUTOMAÇÃO</span>
        <span>•</span>
        <span>SISTEMAS</span>
        <span>•</span>
        <span>EXECUÇÃO</span>
      </div>
      <div className="footer-social">
        <a href="#"><Icon name="linkedin" size={16}/></a>
        <a href="#"><Icon name="youtube" size={16}/></a>
        <a href="#"><Icon name="instagram" size={16}/></a>
      </div>
    </div>
  </footer>
);

// Reveal-on-scroll wrapper
const Reveal = ({ children, stagger = false, delay = 0, className = '', as = 'div', style = {} }) => {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => setInView(true), delay);
        io.disconnect();
      }
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  const Cls = `${stagger ? 'reveal-stagger' : 'reveal'} ${inView ? 'in' : ''} ${className}`;
  const Tag = as;
  return <Tag ref={ref} className={Cls} style={style}>{children}</Tag>;
};

// Avatar stack (for "Empresas que..." style)
const AvatarStack = ({ count = 3, more = '+', size = 28 }) => {
  const photos = [
    'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop',
    'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop',
    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop',
  ];
  return (
    <div className="avatar-stack" style={{ '--avatar-size': `${size}px` }}>
      {photos.slice(0, count).map((p, i) => (
        <div key={i} style={{ backgroundImage: `url(${p})`, width: size, height: size }}/>
      ))}
      {more && <div className="more" style={{ width: size, height: size }}>{more}</div>}
    </div>
  );
};

// Scroll-reveal section heading
const SectionHead = ({ eyebrow, title, lead, cta, side, dark }) => (
  <div className="section-head">
    <div className="lhs">
      {eyebrow && <div className="eyebrow mb-4">{eyebrow}</div>}
      {title && <h2 className="h-1" dangerouslySetInnerHTML={{__html: title}} style={dark ? {color: 'white'} : {}}/>}
      {lead && <p className={dark ? "muted-on-dark mt-4" : "muted mt-4"} style={{ maxWidth: 540 }}>{lead}</p>}
      {cta}
    </div>
    {side && <div>{side}</div>}
  </div>
);

window.Header = Header;
window.Footer = Footer;
window.Reveal = Reveal;
window.AvatarStack = AvatarStack;
window.SectionHead = SectionHead;
window.NAV = NAV;