/* global React */
const { useState, useEffect } = React;

/* ===========================
   TOP NAV
   =========================== */
function TopNav({ active, setActive, theme, setTheme }) {
  const items = [
    { id: "home",     label: "Home" },
    { id: "services", label: "Serviços" },
    { id: "faq",      label: "FAQ" },
  ];

  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const main = document.querySelector(".main");
    if (!main) return;
    const onScroll = () => setScrolled(main.scrollTop > 12);
    main.addEventListener("scroll", onScroll, { passive: true });
    return () => main.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={"topnav" + (scrolled ? " topnav--scrolled" : "")}>
      <button
        className="topnav__brand"
        onClick={() => setActive("home")}
        aria-label="Voltar para Home"
      >
        <span className="topnav__brand-mark">
          <img src="assets/logo-zemploo.png" alt="" />
        </span>
        <span className="topnav__brand-word">Zemploo</span>
      </button>

      <nav className="topnav__nav" aria-label="Navegação principal">
        {items.map((it) => {
          const isActive = active === it.id;
          return (
            <button
              key={it.id}
              className={"topnav__item" + (isActive ? " topnav__item--active" : "")}
              onClick={() => setActive(it.id)}
              data-screen-label={`nav-${it.id}`}
            >
              <span>{it.label}</span>
              {isActive && <span className="topnav__item-bar" aria-hidden="true"></span>}
            </button>
          );
        })}
      </nav>

      <div className="topnav__right">
        <div className="topnav__theme" role="group" aria-label="Tema">
          <button
            className={"topnav__theme-btn" + (theme === "dark" ? " is-on" : "")}
            onClick={() => setTheme("dark")}
            aria-label="Tema escuro"
            title="Tema escuro"
          >
            <MoonIcon />
          </button>
          <button
            className={"topnav__theme-btn" + (theme === "light" ? " is-on" : "")}
            onClick={() => setTheme("light")}
            aria-label="Tema claro"
            title="Tema claro"
          >
            <SunIcon />
          </button>
        </div>

        <a className="topnav__social topnav__social--ig"
           href="https://instagram.com/zemploo"
           target="_blank" rel="noreferrer" aria-label="Instagram" title="Instagram">
          <InstagramIcon />
        </a>

        <a className="btn btn--primary btn--sm topnav__cta"
           href="https://wa.me/5514997021668" target="_blank" rel="noreferrer">
          Falar com a gente <ArrowUR />
        </a>
      </div>
    </header>
  );
}

/* ===========================
   ICONS (inline SVG)
   =========================== */
const I = (d, props = {}) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
       strokeLinecap="round" strokeLinejoin="round" width="20" height="20" {...props}>
    {d}
  </svg>
);
const HomeIcon   = () => I(<><path d="M3 11.5 12 4l9 7.5" /><path d="M5 10v10h14V10" /></>);
const GridIcon   = () => I(<><rect x="3" y="3" width="7" height="7" rx="1.4" /><rect x="14" y="3" width="7" height="7" rx="1.4" /><rect x="3" y="14" width="7" height="7" rx="1.4" /><rect x="14" y="14" width="7" height="7" rx="1.4" /></>);
const LetterIcon = () => I(<><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 7 9-7" /></>);
const HelpIcon   = () => I(<><circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.8.4-1 .8-1 1.7" /><circle cx="12" cy="17" r=".6" fill="currentColor" stroke="none" /></>);
const SunIcon    = () => I(<><circle cx="12" cy="12" r="3.5" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4" /></>);
const MoonIcon   = () => I(<><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z" /></>);
const ArrowUR    = () => I(<><path d="M7 17 17 7" /><path d="M9 7h8v8" /></>);
const ArrowR     = () => I(<><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></>);
const ArrowL     = () => I(<><path d="M19 12H5" /><path d="m11 6-6 6 6 6" /></>);
const ArrowDown  = () => I(<><path d="M12 5v14" /><path d="m6 13 6 6 6-6" /></>);
const PlayIcon   = () => I(<><path d="M8 5v14l11-7z" fill="currentColor" stroke="none" /></>);
const PlusIcon   = () => I(<><path d="M12 5v14M5 12h14" /></>);
const MinusIcon  = () => I(<><path d="M5 12h14" /></>);
const SparkIcon  = () => I(<><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" /></>);
const FlowIcon   = () => I(<><circle cx="5" cy="6" r="2" /><circle cx="19" cy="6" r="2" /><circle cx="12" cy="18" r="2" /><path d="M7 6h10M6 8l5 8M18 8l-5 8" /></>);
const ScreenIcon = () => I(<><rect x="3" y="4" width="18" height="13" rx="2" /><path d="M8 21h8M12 17v4" /></>);
const BrainIcon  = () => I(<><path d="M9 4a3 3 0 0 0-3 3v1a3 3 0 0 0-1 5 3 3 0 0 0 3 4 3 3 0 0 0 4 1V4" /><path d="M15 4a3 3 0 0 1 3 3v1a3 3 0 0 1 1 5 3 3 0 0 1-3 4 3 3 0 0 1-4 1" /></>);
const ChevDown  = () => I(<><path d="m6 9 6 6 6-6" /></>);
const CopyIcon  = () => I(<><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15V6a2 2 0 0 1 2-2h9" /></>);
const CodeIcon  = () => I(<><path d="m8 8-4 4 4 4M16 8l4 4-4 4M14 4l-4 16" /></>);
const EyeIcon   = () => I(<><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" /></>);
const PinIcon   = () => I(<><path d="M12 22s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z" /><circle cx="12" cy="10" r="2.5" /></>);
const TargetIcon = () => I(<><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" /></>);
const BoltIcon  = () => I(<><path d="m13 2-8 11h7l-1 9 8-11h-7l1-9z" /></>);
const ChartIcon = () => I(<><path d="M3 20h18" /><rect x="5" y="11" width="3" height="6" rx=".5" /><rect x="11" y="7" width="3" height="10" rx=".5" /><rect x="17" y="4" width="3" height="13" rx=".5" /></>);
const ShieldIcon = () => I(<><path d="M12 3 4 6v6c0 4.5 3 8 8 9 5-1 8-4.5 8-9V6z" /><path d="m9 12 2 2 4-4" /></>);
const HandshakeIcon = () => I(<><path d="m11 17 2 2 4-4" /><path d="M3 12h3l4 4" /><path d="m21 12-2-2-6 5-3-3-3 3" /><path d="m3 8 4-4h3l3 3" /></>);

const WhatsappIcon = () => (
  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
    <path d="M19.05 4.91A10 10 0 0 0 2.04 15.5L1 22l6.62-1.04A10 10 0 1 0 19.05 4.91zM12 20.1a8.1 8.1 0 0 1-4.13-1.13l-.3-.18-3.93.62.66-3.83-.2-.31A8.1 8.1 0 1 1 12 20.1zm4.43-6.08c-.24-.12-1.44-.71-1.66-.79s-.39-.12-.55.12-.63.79-.78.95-.29.18-.53.06a6.62 6.62 0 0 1-1.94-1.2 7.34 7.34 0 0 1-1.35-1.68c-.14-.24 0-.37.1-.49s.24-.29.36-.43.16-.24.24-.4.04-.3-.02-.42-.55-1.33-.76-1.81-.4-.41-.55-.42h-.47a.91.91 0 0 0-.66.31 2.78 2.78 0 0 0-.86 2.06c0 1.22.88 2.39 1 2.55s1.74 2.66 4.22 3.73a14.29 14.29 0 0 0 1.41.52 3.4 3.4 0 0 0 1.56.1 2.54 2.54 0 0 0 1.67-1.17 2.06 2.06 0 0 0 .14-1.17c-.06-.1-.22-.16-.46-.28z"/>
  </svg>
);
const InstagramIcon = () => (
  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
    <rect x="3" y="3" width="18" height="18" rx="5"/>
    <circle cx="12" cy="12" r="4"/>
    <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
  </svg>
);

window.ZTopNav = TopNav;
window.ZIcons = {
  HomeIcon, GridIcon, LetterIcon, HelpIcon, SunIcon, MoonIcon,
  ArrowUR, ArrowR, ArrowL, ArrowDown, PlayIcon, PlusIcon, MinusIcon, SparkIcon,
  FlowIcon, ScreenIcon, BrainIcon, ChevDown, CopyIcon, CodeIcon, EyeIcon,
  WhatsappIcon, InstagramIcon, PinIcon, TargetIcon, BoltIcon, ChartIcon,
  ShieldIcon, HandshakeIcon,
};