function Nav() {
  const [activeIdx, setActiveIdx] = React.useState(0);
  const [scrolled, setScrolled]   = React.useState(false);

  const links = [
    {
      href: '#topo', label: 'Início',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
          strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="17" height="17">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
          <polyline points="9 22 9 12 15 12 15 22"/>
        </svg>
      ),
    },
    {
      href: '#sistemas', label: 'Sistemas',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
          strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="17" height="17">
          <rect x="3" y="3" width="7" height="7" rx="1"/>
          <rect x="14" y="3" width="7" height="7" rx="1"/>
          <rect x="3" y="14" width="7" height="7" rx="1"/>
          <rect x="14" y="14" width="7" height="7" rx="1"/>
        </svg>
      ),
    },
    {
      href: '#contato', label: 'Contato',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
          strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="17" height="17">
          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
          <polyline points="22,6 12,13 2,6"/>
        </svg>
      ),
    },
    {
      href: 'https://wa.me/5533999364685',
      target: '_blank',
      rel: 'noopener noreferrer',
      label: 'WhatsApp',
      icon: (
        <svg viewBox="0 0 24 24" fill="currentColor" width="17" height="17">
          <path d="M12 2a10 10 0 0 0-8.7 14.9L2 22l5.3-1.4A10 10 0 1 0 12 2Zm5.4 14.4c-.2.7-1.3 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.7-.6-3-1.3-5-4.3-5.1-4.5-.2-.2-1.2-1.6-1.2-3 0-1.5.7-2.2 1-2.5.2-.3.5-.4.7-.4h.5c.2 0 .4 0 .6.5l.9 2c.1.2 0 .4-.1.5l-.3.4-.3.4c-.1.1-.2.2-.1.5.1.2.6 1.1 1.4 1.8 1 .9 1.8 1.2 2 1.3.2.1.4.1.5-.1l.6-.7c.2-.2.4-.2.6-.1l1.9.9c.2.1.4.2.5.2.1.1.1.7-.1 1.4Z"/>
        </svg>
      ),
    },
  ];

  // Scroll-spy — apenas para links de âncora (ignora links externos)
  React.useEffect(() => {
    const anchors = links.filter(l => l.href.startsWith('#'));
    const sections = anchors
      .map(l => document.querySelector(l.href))
      .filter(Boolean);
    const onScroll = () => {
      setScrolled(window.scrollY > 30);
      const y = window.scrollY + window.innerHeight * 0.35;
      let idx = 0;
      sections.forEach((s, i) => { if (s.offsetTop <= y) idx = i; });
      setActiveIdx(idx);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const TriggerIcon = (
    <div className="fluid-icon-swap">
      <span className="fluid-icon fluid-icon--menu">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
          strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="18" height="18">
          <line x1="3" y1="6"  x2="21" y2="6"/>
          <line x1="3" y1="12" x2="21" y2="12"/>
          <line x1="3" y1="18" x2="21" y2="18"/>
        </svg>
      </span>
      <span className="fluid-icon fluid-icon--close">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
          strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="18" height="18">
          <line x1="18" y1="6"  x2="6"  y2="18"/>
          <line x1="6"  y1="6"  x2="18" y2="18"/>
        </svg>
      </span>
    </div>
  );

  return (
    <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="nav-inner">
        <a href="#topo" className="nav-brand" aria-label="CodeBraz">
          <img src="logo_codebraz_transparent.png" alt="CodeBraz" className="nav-brand-logo" />
        </a>

        <FluidMenuContainer triggerIcon={TriggerIcon} triggerLabel="Menu">
          {links.map((l, i) => (
            <FluidMenuItem
              key={l.href}
              href={l.href}
              target={l.target}
              rel={l.rel}
              label={l.label}
              icon={l.icon}
              isActive={activeIdx === i}
              onClick={l.href.startsWith('#') ? () => setActiveIdx(i) : undefined}
            />
          ))}
        </FluidMenuContainer>
      </div>
    </nav>
  );
}

function Contact() {
  return (
    <section className="section contact" id="contato">
      <div className="container">
        <div className="contact-card">
          <div className="contact-eyebrow">
            <span className="contact-dot" aria-hidden="true"></span>
            FALE COM A GENTE
          </div>
          <h2 className="contact-headline">
            Vamos construir algo <em>juntos?</em>
          </h2>
          <p className="contact-sub">
            Agende uma conversa de 20 min. Apresentamos as soluções e vemos como podemos ajudar o seu negócio — sem enrolação.
          </p>
          <div className="contact-channels">
            <a href="https://wa.me/5533999364685" className="contact-channel" data-track="contato_whatsapp">
              <span className="contact-channel-icon" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M12 2a10 10 0 0 0-8.7 14.9L2 22l5.3-1.4A10 10 0 1 0 12 2Zm5.4 14.4c-.2.7-1.3 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.7-.6-3-1.3-5-4.3-5.1-4.5-.2-.2-1.2-1.6-1.2-3 0-1.5.7-2.2 1-2.5.2-.3.5-.4.7-.4h.5c.2 0 .4 0 .6.5l.9 2c.1.2 0 .4-.1.5l-.3.4-.3.4c-.1.1-.2.2-.1.5.1.2.6 1.1 1.4 1.8 1 .9 1.8 1.2 2 1.3.2.1.4.1.5-.1l.6-.7c.2-.2.4-.2.6-.1l1.9.9c.2.1.4.2.5.2.1.1.1.7-.1 1.4Z" fill="currentColor"/>
                </svg>
              </span>
              <span className="contact-channel-body">
                <span className="contact-channel-label">WhatsApp</span>
                <span className="contact-channel-value">+55 (33) 99936-4685</span>
              </span>
              <span className="contact-channel-arrow" aria-hidden="true">→</span>
            </a>
            <a href="mailto:contato@codebraz.com.br" className="contact-channel" data-track="contato_email">
              <span className="contact-channel-icon" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M3 6h18v12H3z" stroke="currentColor" strokeWidth="1.6"/>
                  <path d="M3 7l9 7 9-7" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
                </svg>
              </span>
              <span className="contact-channel-body">
                <span className="contact-channel-label">E-mail</span>
                <span className="contact-channel-value">contato@codebraz.com.br</span>
              </span>
              <span className="contact-channel-arrow" aria-hidden="true">→</span>
            </a>
            <a href="#sistemas" className="contact-channel" data-track="contato_sistemas">
              <span className="contact-channel-icon" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" strokeWidth="1.6"/>
                  <rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" strokeWidth="1.6"/>
                  <rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" strokeWidth="1.6"/>
                  <rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" strokeWidth="1.6"/>
                </svg>
              </span>
              <span className="contact-channel-body">
                <span className="contact-channel-label">Sistemas</span>
                <span className="contact-channel-value">Veja o que já construímos</span>
              </span>
              <span className="contact-channel-arrow" aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const systems = [
    { label: 'chat.gigadesk.com.br', url: 'https://chat.gigadesk.com.br' },
    { label: 'bravocondo.cloud', url: 'https://bravocondo.cloud' },
    { label: 'bravo.gigadesk.com.br', url: 'https://bravo.gigadesk.com.br' },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-systems">
          <span className="footer-systems-label">Nossos sistemas</span>
          <ul className="footer-systems-list">
            {systems.map(s => (
              <li key={s.url}>
                <a href={s.url} target="_blank" rel="noopener noreferrer" className="footer-system-link">
                  <span className="footer-system-dot" aria-hidden="true"></span>
                  {s.label}
                  <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
                    <path d="M3 3h6v6M9 3L3 9" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                  </svg>
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div className="footer-inner">
          <div className="footer-brand">
            © 2025 <a href="admin.html" className="footer-admin-link" title="Acesso administrativo">code<b>braz</b></a>
          </div>
          <div className="footer-meta">
            <span>contato@codebraz.com.br</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    document.querySelectorAll('[data-reveal]').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <HeroHub />
      <Systems />
      <Contact />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);