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

/* ============================================================
   WILLFOR — Landing Page
   Palette:
     --essencia  #F5F5F5
     --firmeza   #1C6F99
     --base      #1C3B5A
     --modernidade #0A2239
     --conexao   #C69C6D
   Type: Poppins (display + UI), Inter (base / body fallback)
   ============================================================ */

/* ---------- LOGOS ---------- */
const Mark = ({ tone = "light", className = "" }) =>
<img
  src={tone === "light" ? "assets/wf-mark-white.png" : "assets/wf-mark-navy.png"}
  alt="WF"
  className={className}
  style={{ height: "100%", width: "auto", display: "block" }} />;



const Wordmark = ({ tone = "light", height = 28 }) =>
<div style={{ display: "flex", alignItems: "center", gap: 12, height }}>
    <div style={{ height: "100%" }}>
      <Mark tone={tone} />
    </div>
    <div
    className="font-display"
    style={{
      fontSize: height * 0.7,
      fontWeight: 500,
      letterSpacing: "0.04em",
      color: tone === "light" ? "var(--essencia)" : "var(--modernidade)",
      lineHeight: 1
    }}>
    
      WILLFOR
    </div>
  </div>;


/* ---------- NAV ---------- */
function Nav({ onContact }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 32);
    fn();
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const links = [
  { href: "#expertise", label: "Empresa" },
  { href: "#servicos", label: "Serviços" },
  { href: "#ia", label: "IA aplicada" },
  { href: "#processo", label: "Processo" },
  { href: "#sobre", label: "Sobre" }];

  return (
    <header
      className="nav"
      style={{
        background: scrolled ? "rgba(10,34,57,0.85)" : "transparent",
        borderBottom: scrolled ?
        "1px solid rgba(245,245,245,0.08)" :
        "1px solid transparent",
        backdropFilter: scrolled ? "blur(12px)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(12px)" : "none"
      }}>
      
      <div className="nav__inner">
        <a href="#top" aria-label="Willfor — início">
          <Wordmark tone="light" height={26} />
        </a>
        <nav className="nav__links">
          {links.map((l) =>
          <a key={l.href} href={l.href}>
              {l.label}
            </a>
          )}
        </nav>
        <button className="btn btn--ghost btn--sm" onClick={onContact}>
          Agendar reunião
          <span className="arr" aria-hidden>→</span>
        </button>
      </div>
    </header>);

}

/* ---------- HERO ---------- */
function Hero({ onContact }) {
  return (
    <section id="top" className="hero">
      <div className="hero__grid" aria-hidden></div>
      <div className="hero__glow" aria-hidden></div>

      <div className="container hero__inner">
        <div className="eyebrow">
          <span className="eyebrow__dot"></span>
          Consultoria em Tecnologia &amp; IA aplicada
        </div>

        <h1 className="display">
          Operações inteligentes,<br />
          <span className="display--accent">decisões mais precisas.</span>
        </h1>

        <p className="lede">
          A Willfor é a consultoria estratégica que conecta visão de negócio,
          arquitetura de processos e inteligência artificial — entregando
          eficiência operacional mensurável para empresas que querem crescer
          sem improviso.
        </p>

        <div className="hero__ctas">
          <button className="btn btn--primary" onClick={onContact}>
            Agendar uma reunião
            <span className="arr" aria-hidden>→</span>
          </button>
          <a href="#servicos" className="btn btn--text">
            Conheça nossos serviços
          </a>
        </div>

        <div className="hero__meta">
          <div>
            <div className="meta__k">+15 anos</div>
            <div className="meta__l">estruturando operações e produtos digitais</div>
          </div>
          <div className="meta__sep" aria-hidden></div>
          <div>
            <div className="meta__k">IA aplicada</div>
            <div className="meta__l">a problemas reais de operação</div>
          </div>
          <div className="meta__sep" aria-hidden></div>
          <div>
            <div className="meta__k">Discovery → Delivery</div>
            <div className="meta__l">metodologia completa</div>
          </div>
        </div>
      </div>

      {/* Decorative mark watermark */}
      <div className="hero__watermark" aria-hidden>
        <Mark tone="light" />
      </div>
    </section>);

}

/* ---------- AUTHORITY ---------- */
function Authority() {
  const pillars = [
  {
    n: "01",
    t: "Gestão de produto",
    d: "Discovery, especificação funcional e priorização orientada a impacto de negócio."
  },
  {
    n: "02",
    t: "Especialização em IA",
    d: "Aplicação prática de IA generativa, agentes e assistentes em fluxos de trabalho reais."
  },
  {
    n: "03",
    t: "Arquitetura de processos",
    d: "Mapeamento, estruturação e padronização de operações complexas, ponta a ponta."
  },
  {
    n: "04",
    t: "Automação inteligente",
    d: "Workflows orquestrados, integrações e ferramentas sob medida para a operação."
  },
  {
    n: "05",
    t: "Documentação técnica",
    d: "Conhecimento operacional registrado, escalável e auditável dentro da empresa."
  },
  {
    n: "06",
    t: "Visão de negócio",
    d: "Decisões guiadas por contexto estratégico, não apenas por entregas técnicas."
  }];

  return (
    <section id="expertise" className="section section--light">
      <div className="container">
        <div className="section__head">
          <div className="kicker">
            <span className="kicker__bar" aria-hidden></span>
            01 — Empresa
          </div>
          <h2 className="h2">
            Negócio e tecnologia <em>tratados como uma coisa só.</em>
          </h2>
          <p className="section__lede">
            Atuamos como parceiros estratégicos de empresas que precisam
            estruturar operação, aplicar tecnologia com critério e transformar
            complexidade em previsibilidade.
          </p>
        </div>

        <div className="pillars">
          {pillars.map((p) =>
          <article key={p.n} className="pillar">
              <div className="pillar__n">{p.n}</div>
              <h3 className="pillar__t">{p.t}</h3>
              <p className="pillar__d">{p.d}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- SERVICES ---------- */
function Services() {
  const services = [
  {
    tag: "Serviço 01",
    title: "IA & Automação inteligente",
    body:
    "IA generativa, agentes e assistentes integrados aos fluxos da operação. Automação de workflows que libera tempo das pessoas para o que realmente importa.",
    bullets: [
    "Assistentes de IA corporativos",
    "Agentes e copilotos de operação",
    "Automação de processos repetitivos",
    "Ganho de produtividade mensurável"]

  },
  {
    tag: "Serviço 02",
    title: "Melhoria de processos",
    body:
    "Mapeamos, redesenhamos e padronizamos processos críticos para destravar capacidade — sem fricção desnecessária, sem retrabalho silencioso.",
    bullets: [
    "Diagnóstico operacional",
    "Redesenho de fluxos",
    "Padronização e governança",
    "Eficiência ponta a ponta"]

  },
  {
    tag: "Serviço 03",
    title: "Estruturação de sistemas & produtos",
    body:
    "Da descoberta à especificação. Documentação, histórias de usuário e product thinking aplicados a sistemas internos e produtos digitais.",
    bullets: [
    "Discovery e research",
    "Especificação funcional",
    "Documentação técnica",
    "Roadmap orientado a impacto"]

  },
  {
    tag: "Serviço 04",
    title: "Soluções customizadas",
    body:
    "Sistemas corporativos, dashboards, integrações e plataformas internas sob medida — construídas para a forma como sua empresa realmente opera.",
    bullets: [
    "Sistemas internos",
    "Dashboards e BI operacional",
    "Integrações e APIs",
    "Plataformas sob medida"]

  }];


  return (
    <section id="servicos" className="section section--dark">
      <div className="container">
        <div className="section__head section__head--dark">
          <div className="kicker kicker--dark">
            <span className="kicker__bar" aria-hidden></span>
            02 — Serviços
          </div>
          <h2 className="h2 h2--dark">
            Quatro frentes que se combinam <br />
            <em>conforme a operação exige.</em>
          </h2>
        </div>

        <div className="services">
          {services.map((s, i) =>
          <article key={i} className="service">
              <div className="service__tag">{s.tag}</div>
              <h3 className="service__title">{s.title}</h3>
              <p className="service__body">{s.body}</p>
              <ul className="service__bullets">
                {s.bullets.map((b, j) =>
              <li key={j}>
                    <span className="bullet" aria-hidden></span>
                    {b}
                  </li>
              )}
              </ul>
              <div className="service__hover" aria-hidden></div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- AI DIFFERENTIAL ---------- */
function AI() {
  const points = [
  {
    k: "Operacional",
    t: "IA como ferramenta de trabalho real",
    d: "Aplicada onde ela substitui esforço repetitivo, qualifica decisões e acelera entregas — não como vitrine."
  },
  {
    k: "Mensurável",
    t: "Resultados que aparecem em indicadores",
    d: "Produtividade, tempo de ciclo, custo unitário e qualidade. IA precisa gerar valor visível em dashboards reais."
  },
  {
    k: "Sob medida",
    t: "Adaptada ao seu domínio",
    d: "Assistentes e agentes alinhados à linguagem, aos dados e aos processos da sua empresa — não soluções genéricas."
  },
  {
    k: "Estratégica",
    t: "Implementação com critério",
    d: "Identificamos onde IA é a resposta certa — e onde não é. Tecnologia aplicada com sobriedade, não com hype."
  }];

  return (
    <section id="ia" className="section section--light section--ai">
      <div className="container ai">
        <div className="ai__head">
          <div className="kicker">
            <span className="kicker__bar" aria-hidden></span>
            03 — IA aplicada
          </div>
          <h2 className="h2 h2--ai">
            Inteligência artificial não é tendência.
            <br />
            <em>É infraestrutura operacional.</em>
          </h2>
          <p className="section__lede">
            Tratamos IA como qualquer outra ferramenta de gestão: precisa
            resolver um problema específico, integrar-se ao processo certo e
            entregar resultado verificável. Nada mais, nada menos.
          </p>
        </div>

        <div className="ai__grid">
          <div className="ai__viz" aria-hidden>
            <div className="ai__viz-inner">
              <div className="ai__rings">
                <div className="ring ring-1"></div>
                <div className="ring ring-2"></div>
                <div className="ring ring-3"></div>
                <div className="ring-mark">
                  <Mark tone="dark" />
                </div>
              </div>
              <div className="ai__nodes">
                {["Dados", "Processos", "Decisões", "Pessoas", "Saída", "Sistemas"].map(
                  (n, i) =>
                  <div key={i} className={`node node-${i}`}>
                      <span>{n}</span>
                    </div>

                )}
              </div>
            </div>
          </div>

          <div className="ai__points">
            {points.map((p, i) =>
            <div className="ai-point" key={i}>
                <div className="ai-point__k">
                  <span className="ai-point__bar" aria-hidden></span>
                  {p.k}
                </div>
                <h3 className="ai-point__t">{p.t}</h3>
                <p className="ai-point__d">{p.d}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- PROCESS ---------- */
function Process() {
  const steps = [
  {
    n: "01",
    t: "Discovery",
    d: "Imersão no negócio, entendimento de contexto, mapeamento de stakeholders e identificação das alavancas reais de valor."
  },
  {
    n: "02",
    t: "Diagnóstico",
    d: "Análise crítica de processos, sistemas e capacidades. Apontamos onde há retrabalho, perda e oportunidade de automação."
  },
  {
    n: "03",
    t: "Estruturação",
    d: "Redesenho de processos, especificação funcional, definição de arquitetura e priorização orientada a impacto."
  },
  {
    n: "04",
    t: "Automação",
    d: "Construção das soluções: agentes, integrações, dashboards e sistemas sob medida — sempre conectados à operação real."
  },
  {
    n: "05",
    t: "Delivery",
    d: "Implantação assistida, transferência de conhecimento, documentação completa e treinamento dos times envolvidos."
  },
  {
    n: "06",
    t: "Melhoria contínua",
    d: "Acompanhamento de indicadores, evolução das soluções e ajustes finos. O trabalho não termina no go-live."
  }];

  return (
    <section id="processo" className="section section--dark section--process">
      <div className="container">
        <div className="section__head section__head--dark">
          <div className="kicker kicker--dark">
            <span className="kicker__bar" aria-hidden></span>
            04 — Como trabalhamos
          </div>
          <h2 className="h2 h2--dark">
            Um método honesto, <em>do diagnóstico à melhoria contínua.</em>
          </h2>
          <p className="section__lede section__lede--dark">
            Cada projeto é diferente, mas o critério é o mesmo. Seguimos uma
            sequência clara para que decisões aconteçam no momento certo, com
            informação suficiente.
          </p>
        </div>

        <ol className="process">
          {steps.map((s, i) =>
          <li key={s.n} className="step">
              <div className="step__head">
                <span className="step__n">{s.n}</span>
                <span className="step__line" aria-hidden></span>
              </div>
              <h3 className="step__t">{s.t}</h3>
              <p className="step__d">{s.d}</p>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

/* ---------- ABOUT ---------- */
function About() {
  return (
    <section id="sobre" className="section section--light section--about">
      <div className="container about">
        <div className="about__l">
          <div className="kicker">
            <span className="kicker__bar" aria-hidden></span>
            05 — Sobre a Willfor
          </div>
          <h2 className="h2">
            Uma consultoria que entende
            <br />
            <em>negócio e tecnologia como linguagem única.</em>
          </h2>
        </div>
        <div className="about__r">
          <p className="about__p">
            Nascemos para preencher a lacuna entre a estratégia de negócio e a
            execução técnica. Atuamos lado a lado com gestores, diretores e
            empresários que precisam transformar operações complexas em
            estruturas claras, automatizadas e escaláveis.
          </p>
          <p className="about__p">
            Trabalhamos com mentalidade de produto, rigor de consultoria e
            fluência em IA aplicada. Entregamos soluções que se sustentam para
            além do projeto — porque vêm acompanhadas de documentação, método
            e contexto.
          </p>

          <div className="attrs">
            {[
            "clareza",
            "seriedade",
            "proximidade",
            "inovação",
            "transparência",
            "modernidade",
            "minimalismo",
            "estratégia"].
            map((a) =>
            <span className="attr" key={a}>
                {a}
              </span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- FINAL CTA ---------- */
function FinalCTA({ onContact }) {
  return (
    <section className="section section--cta">
      <div className="cta__bg" aria-hidden>
        <div className="cta__grid"></div>
        <div className="cta__glow"></div>
      </div>
      <div className="container cta">
        <div className="cta__mark" aria-hidden>
          <Mark tone="light" />
        </div>
        <h2 className="cta__title">
          Vamos transformar sua operação <br />
          <em>com critério, método e IA aplicada.</em>
        </h2>
        <p className="cta__lede">
          Agende uma conversa inicial. Em 30 minutos identificamos juntos onde
          existe maior alavanca de eficiência no seu negócio — e como seguir
          adiante.
        </p>
        <div className="cta__actions">
          <button className="btn btn--primary btn--lg" onClick={onContact}>
            Falar com um especialista
            <span className="arr" aria-hidden>→</span>
          </button>
          <a href="mailto:contato@willfor.com.br" className="btn btn--text btn--text-light">
            contato@willfor.com.br
          </a>
        </div>
      </div>
    </section>);

}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <Wordmark tone="light" height={30} />
          <p className="footer__tag">Consultoria em tecnologia</p>
        </div>

        <div className="footer__cols">
          <div>
            <div className="footer__h">Navegação</div>
            <a href="#expertise">Expertise</a>
            <a href="#servicos">Serviços</a>
            <a href="#ia">IA aplicada</a>
            <a href="#processo">Processo</a>
            <a href="#sobre">Sobre</a>
          </div>
          <div>
            <div className="footer__h">Contato</div>
            <a href="mailto:contato@willfor.com.br">contato@willfor.com.br</a>
            <a href="tel:+5511995061125">+55 11 99506-1125</a>
            <a href="#">São Paulo · Brasil</a>
          </div>
          <div>
            <div className="footer__h">REDES OFICIAIS</div>
            <div className="socials">
              <a
                href="https://wa.me/5511995061125?text=Ol%C3%A1%2C%20gostaria%20de%20falar%20com%20a%20Willfor."
                target="_blank"
                rel="noopener noreferrer"
                className="social"
                aria-label="WhatsApp">
                
                <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                  <path fill="currentColor" d="M19.05 4.91A10 10 0 0 0 12 2C6.5 2 2 6.5 2 12c0 1.76.46 3.45 1.34 4.95L2 22l5.25-1.38A10 10 0 0 0 12 22c5.5 0 10-4.5 10-10 0-2.67-1.04-5.18-2.95-7.09Zm-7.05 15.4a8.31 8.31 0 0 1-4.24-1.16l-.3-.18-3.12.82.83-3.04-.2-.31a8.31 8.31 0 1 1 7.03 3.87Zm4.55-6.23c-.25-.13-1.47-.72-1.7-.8-.23-.08-.39-.13-.56.12-.16.25-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23a7.5 7.5 0 0 1-1.39-1.72c-.14-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.13-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.13-.56-1.35-.77-1.85-.2-.49-.41-.42-.56-.43h-.48a.93.93 0 0 0-.68.31c-.23.25-.89.87-.89 2.12s.91 2.46 1.04 2.62c.13.17 1.8 2.75 4.36 3.86.61.26 1.08.42 1.45.54.61.19 1.16.17 1.6.1.49-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.15-1.18-.06-.1-.23-.16-.48-.29Z" />
                </svg>
                <span>WhatsApp</span>
              </a>
              <a
                href="https://www.instagram.com/willforconsultoria/"
                target="_blank"
                rel="noopener noreferrer"
                className="social"
                aria-label="Instagram">
                
                <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="5" />
                  <circle cx="12" cy="12" r="4" />
                  <circle cx="17.2" cy="6.8" r="0.9" fill="currentColor" stroke="none" />
                </svg>
                <span>Instagram</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div className="container footer__base">
        <span>© {new Date().getFullYear()} Willfor — Consultoria em Tecnologia. Todos os direitos reservados.</span>
        <span className="footer__pol">
          <a href="#">Política de privacidade</a>
          <span aria-hidden>·</span>
          <a href="#">Termos</a>
        </span>
      </div>
    </footer>);

}

/* ---------- FLOATING WHATSAPP ---------- */
function WhatsAppFab() {
  return (
    <a
      className="wa-fab"
      href="https://wa.me/5511995061125?text=Ol%C3%A1%2C%20gostaria%20de%20falar%20com%20a%20Willfor."
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Conversar pelo WhatsApp">
      
      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
        <path fill="currentColor" d="M19.05 4.91A10 10 0 0 0 12 2C6.5 2 2 6.5 2 12c0 1.76.46 3.45 1.34 4.95L2 22l5.25-1.38A10 10 0 0 0 12 22c5.5 0 10-4.5 10-10 0-2.67-1.04-5.18-2.95-7.09Zm-7.05 15.4a8.31 8.31 0 0 1-4.24-1.16l-.3-.18-3.12.82.83-3.04-.2-.31a8.31 8.31 0 1 1 7.03 3.87Zm4.55-6.23c-.25-.13-1.47-.72-1.7-.8-.23-.08-.39-.13-.56.12-.16.25-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23a7.5 7.5 0 0 1-1.39-1.72c-.14-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.13-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.13-.56-1.35-.77-1.85-.2-.49-.41-.42-.56-.43h-.48a.93.93 0 0 0-.68.31c-.23.25-.89.87-.89 2.12s.91 2.46 1.04 2.62c.13.17 1.8 2.75 4.36 3.86.61.26 1.08.42 1.45.54.61.19 1.16.17 1.6.1.49-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.15-1.18-.06-.1-.23-.16-.48-.29Z" />
      </svg>
      <span className="wa-fab__label">Falar no WhatsApp</span>
    </a>);

}

/* ---------- CONTACT MODAL ---------- */
function ContactModal({ open, onClose }) {
  const [form, setForm] = useState({ name: "", company: "", email: "", phone: "", goal: "IA & Automação", msg: "" });
  const [sent, setSent] = useState(false);
  const firstField = useRef(null);

  useEffect(() => {
    if (open) {
      setSent(false);
      setTimeout(() => firstField.current && firstField.current.focus(), 60);
      const fn = (e) => e.key === "Escape" && onClose();
      window.addEventListener("keydown", fn);
      document.body.style.overflow = "hidden";
      return () => {
        window.removeEventListener("keydown", fn);
        document.body.style.overflow = "";
      };
    }
  }, [open, onClose]);

  if (!open) return null;

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <div className="modal" role="dialog" aria-modal="true" aria-label="Agendar reunião">
      <div className="modal__scrim" onClick={onClose}></div>
      <div className="modal__card">
        <button className="modal__close" onClick={onClose} aria-label="Fechar">×</button>
        {!sent ?
        <>
            <div className="modal__head">
              <div className="kicker kicker--dark">
                <span className="kicker__bar" aria-hidden></span>
                Agendar reunião
              </div>
              <h3 className="modal__title">
                Conte-nos um pouco <em>sobre o seu desafio.</em>
              </h3>
              <p className="modal__lede">
                Respondemos em até um dia útil para combinar uma conversa inicial de 30 minutos.
              </p>
            </div>
            <form className="form" onSubmit={submit}>
              <div className="form__row">
                <label className="field">
                  <span>Nome</span>
                  <input ref={firstField} required value={form.name} onChange={onChange("name")} type="text" placeholder="Seu nome completo" />
                </label>
                <label className="field">
                  <span>Empresa</span>
                  <input required value={form.company} onChange={onChange("company")} type="text" placeholder="Nome da empresa" />
                </label>
              </div>
              <div className="form__row">
                <label className="field">
                  <span>E-mail corporativo</span>
                  <input required value={form.email} onChange={onChange("email")} type="email" placeholder="voce@empresa.com" />
                </label>
                <label className="field">
                  <span>Telefone</span>
                  <input value={form.phone} onChange={onChange("phone")} type="tel" placeholder="(00) 00000-0000" />
                </label>
              </div>
              <label className="field">
                <span>Frente de interesse</span>
                <select value={form.goal} onChange={onChange("goal")}>
                  <option>IA &amp; Automação</option>
                  <option>Melhoria de processos</option>
                  <option>Estruturação de sistemas &amp; produtos</option>
                  <option>Soluções customizadas</option>
                  <option>Ainda não tenho certeza</option>
                </select>
              </label>
              <label className="field">
                <span>Contexto (opcional)</span>
                <textarea rows="4" value={form.msg} onChange={onChange("msg")} placeholder="Conte brevemente o que você quer destravar."></textarea>
              </label>
              <div className="form__actions">
                <button type="button" className="btn btn--text btn--text-dark" onClick={onClose}>Cancelar</button>
                <button type="submit" className="btn btn--primary">
                  Enviar solicitação
                  <span className="arr" aria-hidden>→</span>
                </button>
              </div>
            </form>
          </> :

        <div className="sent">
            <div className="sent__icon" aria-hidden>
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 12 10 18 20 6" /></svg>
            </div>
            <h3 className="modal__title">Recebemos sua solicitação.</h3>
            <p className="modal__lede">
              Em breve um especialista da Willfor entra em contato para alinhar
              data e horário da conversa. Obrigado.
            </p>
            <div className="form__actions form__actions--center">
              <button className="btn btn--primary" onClick={onClose}>Fechar</button>
            </div>
          </div>
        }
      </div>
    </div>);

}

/* ---------- APP ---------- */
function App() {
  const [open, setOpen] = useState(false);
  const openModal = () => setOpen(true);
  const closeModal = () => setOpen(false);

  // smooth scroll for anchors
  useEffect(() => {
    const fn = (e) => {
      const t = e.target.closest('a[href^="#"]');
      if (!t) return;
      const id = t.getAttribute("href");
      if (id.length < 2) return;
      const el = document.querySelector(id);
      if (!el) return;
      e.preventDefault();
      const y = el.getBoundingClientRect().top + window.scrollY - 24;
      window.scrollTo({ top: y, behavior: "smooth" });
    };
    document.addEventListener("click", fn);
    return () => document.removeEventListener("click", fn);
  }, []);

  // reveal-on-scroll
  useEffect(() => {
    const els = document.querySelectorAll("[data-reveal], .pillar, .service, .ai-point, .step, .section__head, .about__l, .about__r, .cta");
    els.forEach((el) => el.classList.add("reveal"));
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("reveal--in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav onContact={openModal} />
      <main>
        <Hero onContact={openModal} />
        <Authority />
        <Services />
        <AI />
        <Process />
        <About />
        <FinalCTA onContact={openModal} />
      </main>
      <Footer />
      <WhatsAppFab />
      <ContactModal open={open} onClose={closeModal} />
    </>);

}

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