// WebbIA™ Tech — shared shell components (nav, footer, aurora, reveals, icons)

const Aurora = () => (
  <>
    <div className="aurora" aria-hidden="true"></div>
    <div className="grain" aria-hidden="true"></div>
  </>
);

const Logo = () => (
  <a href="#home" className="logo" onClick={(e) => { e.preventDefault(); window.navigate && window.navigate('home'); }}>
    <span className="logo-mark" aria-hidden="true"></span>
    <span>WebbIA<span className="logo-tm">TM</span> Tech</span>
  </a>
);

const Icon = ({ name, size = 16 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case 'arrow-right': return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-up-right': return <svg {...props}><path d="M7 17L17 7M8 7h9v9"/></svg>;
    case 'check': return <svg {...props}><path d="M20 6L9 17l-5-5"/></svg>;
    case 'spark': return <svg {...props}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>;
    case 'chat': return <svg {...props}><path d="M21 12a8 8 0 0 1-12 7l-5 1 1-5a8 8 0 1 1 16-3z"/></svg>;
    case 'globe': return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case 'phone': return <svg {...props}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.7 19.7 0 0 1-8.6-3 19.4 19.4 0 0 1-6-6 19.7 19.7 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 12.7 12.7 0 0 0 .7 2.8 2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5 12.7 12.7 0 0 0 2.8.7A2 2 0 0 1 22 16.9z"/></svg>;
    case 'rocket': return <svg {...props}><path d="M5 13l3 3M14.5 6.5a6 6 0 0 1 6 6c-3 1-6 4-7 7l-2-2m-3-3l-2-2c3-1 6-4 7-7M9 15c-1.5 1.5-2 5-2 5s3.5-.5 5-2"/></svg>;
    case 'trend': return <svg {...props}><path d="M3 17l6-6 4 4 8-8M14 7h7v7"/></svg>;
    case 'clock': return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'zero': return <svg {...props}><circle cx="12" cy="12" r="7"/><path d="M5 5l14 14"/></svg>;
    case 'sun': return <svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>;
    case 'moon': return <svg {...props}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>;
    case 'flow': return <svg {...props}><circle cx="5" cy="5" r="2"/><circle cx="19" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M7 5h10M5 7v10M19 7v10M7 19h10"/></svg>;
    case 'crm': return <svg {...props}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 4v16"/></svg>;
    case 'whats': return <svg {...props}><path d="M21 12a9 9 0 1 1-3.6-7.2L21 4l-1 3.5A9 9 0 0 1 21 12z"/><path d="M8 11c0 3 2 5 5 5l1.5-1.5-2-1L11 14a4 4 0 0 1-2-2l.5-1.5-1-2L7 9a3 3 0 0 1 1-1"/></svg>;
    case 'star': return <svg {...props}><path d="M12 3l2.6 6 6.4.6-4.8 4.4 1.4 6.5L12 17l-5.6 3.5L7.8 14 3 9.6 9.4 9z"/></svg>;
    case 'plus': return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'arrow-down': return <svg {...props}><path d="M12 5v14M5 12l7 7 7-7"/></svg>;
    case 'mail': return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case 'cpu': return <svg {...props}><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></svg>;
    default: return null;
  }
};

const NavBar = ({ current, onNav }) => {
  const links = [
    { id: 'home', label: 'Início' },
    { id: 'produto', label: 'Produtos' },
    { id: 'sobre', label: 'Sobre' },
  ];
  return (
    <header className="nav">
      <div className="container nav-row">
        <Logo />
        <nav className="nav-links" aria-label="Principal">
          {links.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={`nav-link ${current === l.id ? 'active' : ''}`}
              onClick={(e) => { e.preventDefault(); onNav(l.id); }}
            >{l.label}</a>
          ))}
          <button
            className="btn btn-primary"
            style={{ marginLeft: 12, height: 40, padding: '0 18px', fontSize: 13 }}
            onClick={() => onNav('contato')}
          >
            Diagnóstico gratuito <Icon name="arrow-up-right" size={14} />
          </button>
        </nav>
      </div>
    </header>
  );
};

const Footer = ({ onNav }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span className="logo-mark" aria-hidden="true"></span>
            <span style={{ fontWeight: 500 }}>WebbIA<span className="logo-tm">TM</span> Tech</span>
          </div>
          <p className="muted" style={{ maxWidth: 320, fontSize: 14, lineHeight: 1.6 }}>
            Soluções corporativas com IA e automação N8N para pequenas e médias empresas que não podem perder clientes.
          </p>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot"></span>Navegação</div>
          {['home','produto','sobre'].map(id => (
            <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); onNav(id); }}
               style={{ display:'block', padding:'6px 0', fontSize:14, color:'var(--text-secondary)' }}>
              {id === 'home' ? 'Início' : id.charAt(0).toUpperCase() + id.slice(1)}
            </a>
          ))}
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot"></span>Contato</div>
          <div className="footer-row"><Icon name="globe"/> webbiatech.com.br</div>
          <div className="footer-row"><Icon name="phone"/> +55 11 97990-1764</div>
          <div className="footer-row"><Icon name="chat"/> Rodrigo Guimarães</div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 WebbIA™ Tech · Todos os direitos reservados</span>
        <span>Conversion Flow™ · v2.6</span>
      </div>
    </div>
  </footer>
);

// Reveal-on-scroll hook
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

Object.assign(window, { Aurora, Logo, Icon, NavBar, Footer, useReveal });