/* ============================================================
   TRAW — Nav, Hero, Logos, Services
   ============================================================ */
const { useState: useStateA, useEffect: useEffectA } = React;

const NAV_ITEMS = [
  { id: "servicos", label: "Serviços" },
  { id: "processo", label: "Processo" },
  { id: "sobre", label: "Quem Somos" },
  { id: "projetos", label: "Projetos" },
  { id: "contato", label: "Contato" },
];

/* ---------------- NAV ---------------- */
function Nav() {
  const [scrolled, setScrolled] = useStateA(false);
  const [open, setOpen] = useStateA(false);
  const [active, setActive] = useStateA("");

  useEffectA(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffectA(() => {
    const sections = NAV_ITEMS.map((i) => document.getElementById(i.id)).filter(Boolean);
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
      },
      { rootMargin: "-45% 0px -50% 0px" }
    );
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);

  useEffectA(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);

  const go = (e, id) => {
    e.preventDefault();
    setOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <React.Fragment>
      <header className={"nav" + (scrolled ? " scrolled" : "")}>
        <div className="nav-inner">
          <a href="#top" className="nav-logo" onClick={(e) => go(e, "top")} aria-label="Traw — início">
            <img src="assets/logotipotraw.png" alt="Traw" />
          </a>
          <nav className="nav-links">
            {NAV_ITEMS.map((i) => (
              <a key={i.id} href={"#" + i.id}
                 className={"nav-link" + (active === i.id ? " active" : "")}
                 onClick={(e) => go(e, i.id)}>{i.label}</a>
            ))}
          </nav>
          <div className="nav-cta">
            <a className="btn btn-primary" href={waLink()} target="_blank" rel="noopener noreferrer">
              Solicitar Orçamento <Icon name="arrow" size={18} />
            </a>
            <button className={"nav-burger" + (open ? " open" : "")} onClick={() => setOpen(!open)} aria-label="Menu">
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </header>

      <div className={"mobile-menu" + (open ? " open" : "")}>
        {NAV_ITEMS.map((i) => (
          <a key={i.id} href={"#" + i.id} onClick={(e) => go(e, i.id)}>{i.label}</a>
        ))}
        <a className="btn btn-primary" href={waLink()} target="_blank" rel="noopener noreferrer">
          Solicitar Orçamento <Icon name="arrow" size={18} />
        </a>
      </div>
    </React.Fragment>
  );
}

/* ---------------- HERO ---------------- */
function Hero() {
  const ref = useReveal();
  return (
    <section className="hero" id="top" ref={ref}>
      <div className="hero-bg" aria-hidden="true">
        <div className="hero-grid"></div>
        <div className="hero-blob b1"></div>
        <div className="hero-blob b2"></div>
        <div className="hero-pill hp1"></div>
        <div className="hero-pill hp2"></div>
        <div className="hero-pill hp3"></div>
      </div>
      <div className="wrap hero-inner">
        <div className="hero-text">
          <span className="hero-chip" data-reveal>
            <span className="dot"><Icon name="bolt" size={12} /></span>
            Sites que constroem autoridade e vendem
          </span>
          <h1 data-reveal data-delay="60">
            Transformamos sua<br />
            <span className="grad-text">presença digital</span><br />
            em resultados reais
          </h1>
          <p className="hero-lead" data-reveal data-delay="140">
            Websites profissionais e otimizados para destacar sua marca,
            gerar autoridade e transformar visitantes em clientes.
          </p>
          <div className="hero-actions" data-reveal data-delay="200">
            <a className="btn btn-primary" href={waLink("Olá! Quero um orçamento para o meu site com a Traw.")} target="_blank" rel="noopener noreferrer">
              Quero meu site <Icon name="arrow" size={18} />
            </a>
            <a className="btn btn-ghost" href="#projetos" onClick={(e) => { e.preventDefault(); document.getElementById("projetos").scrollIntoView({ behavior: "smooth" }); }}>
              Ver projetos
            </a>
          </div>
          <div className="hero-trust" data-reveal data-delay="260">
            <span className="tcheck"><Icon name="check" size={16} /> Design sob medida</span>
            <span className="divider"></span>
            <span className="tcheck"><Icon name="check" size={16} /> Performance &amp; SEO</span>
            <span className="divider"></span>
            <span className="tcheck"><Icon name="check" size={16} /> Suporte contínuo</span>
          </div>
        </div>

        <div className="hero-visual" data-reveal data-delay="180">

          <div className="hero-mock-desktop">
            <div className="browser floaty">
              <div className="browser-bar">
                <div className="dots"><i></i><i></i><i></i></div>
                <div className="browser-url"><Icon name="shield" size={13} /> traw.com.br</div>
              </div>
              <img className="browser-shot" src="assets/traw-erp.png" alt="Site Traw ERP desenvolvido pela Traw" loading="lazy" />
            </div>
          </div>

          <div className="hero-mock-mobile">
            <img src="assets/traw-mobile-hero.png" alt="Site Traw no celular" className="mob-hero-img" loading="lazy" />
          </div>

          <div className="float-card perf floaty d1">
            <div className="ring"><b>98</b></div>
            <div className="lbl"><small>Performance</small><b>Pontuação alta</b></div>
          </div>
          <div className="float-card live floaty">
            <span className="pulse"></span> Site no ar
          </div>
          <div className="float-mark"><Icon name="bolt" size={32} /></div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- LOGOS / PROVA SOCIAL ---------------- */
function Logos() {
  const phrases = [
    <React.Fragment>Mais <span>clientes</span></React.Fragment>,
    <React.Fragment>Online <span>24h</span></React.Fragment>,
    <React.Fragment>Código <span>blindado</span></React.Fragment>,
    <React.Fragment>Visível no <span>Google</span></React.Fragment>,
    <React.Fragment>Design que <span>converte</span></React.Fragment>,
  ];
  const items = [...phrases, ...phrases];
  return (
    <section className="logos">
      <div className="logos-track">
        {items.map((p, i) => (
          <React.Fragment key={i}>
            <span className="mark">{p}</span>
            <span className="mark-sep" aria-hidden="true">·</span>
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

/* ---------------- SERVICES ---------------- */
const SERVICES = [
  { ic: "code", title: "Desenvolvimento Web", desc: "Sites institucionais e sistemas sob medida, rápidos, seguros e construídos com tecnologia atual.", tags: ["React", "Next.js", "Responsivo"] },
  { ic: "layout", title: "Design & UX/UI", desc: "Interfaces elegantes e intuitivas que transmitem autoridade e guiam o visitante até a conversão.", tags: ["UI Design", "Protótipo", "Identidade"] },
  { ic: "rocket", title: "Landing Pages", desc: "Páginas de alta conversão para campanhas e lançamentos, focadas em captar e qualificar leads.", tags: ["Conversão", "Campanhas", "Leads"] },
  { ic: "search", title: "SEO & Performance", desc: "Otimização técnica para o seu site carregar rápido e ser encontrado por quem procura você.", tags: ["SEO técnico", "Core Web Vitals", "Analytics"] },
  { ic: "cart", title: "E-commerce", desc: "Lojas virtuais completas e integradas, prontas para vender com uma experiência de compra fluida.", tags: ["Loja virtual", "Pagamentos", "Integrações"] },
  { ic: "wrench", title: "Manutenção & Suporte", desc: "Acompanhamento contínuo, atualizações e melhorias para o seu site evoluir junto com o negócio.", tags: ["Suporte", "Hospedagem", "Evolução"] },
];

function Services() {
  const ref = useReveal();
  return (
    <section className="section services" id="servicos" ref={ref}>
      <div className="wrap">
        <div className="sec-head center" data-reveal>
          <span className="eyebrow center">Nossos serviços</span>
          <h2 className="sec-title">Tudo o que seu site precisa<br />para gerar resultado</h2>
          <p className="sec-sub">Do conceito à publicação, cuidamos de cada detalhe técnico e visual para transformar sua presença digital em uma máquina de vendas.</p>
        </div>
        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <article className="svc-card" key={s.title} data-reveal data-delay={(i % 3) * 90}>
              <div className="svc-ic"><Icon name={s.ic} size={26} /></div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="svc-tags">{s.tags.map((t) => <span key={t}>{t}</span>)}</div>
            </article>
          ))}
        </div>
        <div className="scroll-hint">
          <div className="sh-dots"><span className="on"></span><span></span><span></span></div>
          Deslize para ver mais
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Logos, Services });