// ===========================================================
// FIRMA — Oferta IA Landing
// ===========================================================

const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
};

const ASSET = (key, fallback) => typeof window !== "undefined" && window.__resources && window.__resources[key] || fallback;

// ----- Ticker -----
const Ticker = () => {
  const items = [
  "POSICIONAMENTO EM CHATGPT",
  "RECOMENDAÇÃO POR IA",
  "PRESENÇA EM GEMINI",
  "AUTORIDADE EM CLAUDE",
  "AI DISCOVERABILITY",
  "ESTRATÉGIA EDITORIAL",
  "POSICIONAMENTO EM CHATGPT",
  "RECOMENDAÇÃO POR IA",
  "PRESENÇA EM GEMINI",
  "AUTORIDADE EM CLAUDE",
  "AI DISCOVERABILITY",
  "ESTRATÉGIA EDITORIAL"];

  return (
    <div className="ticker">
      <div className="ticker__track">
        {items.map((t, i) =>
        <span key={i} className="ticker__item">{t}</span>
        )}
      </div>
    </div>);

};

// ----- Nav -----
const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);

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

  React.useEffect(() => {
    const onResize = () => {if (window.innerWidth > 1024) setOpen(false);};
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  return (
    <nav className={`nav ${open ? "nav--open" : ""}`}>
      <div className="nav__inner">
        <a href="#" className="nav__brand" onClick={close}>
          <img src={ASSET("logoBlack", "assets/logo-firma-black.png")} alt="Firma" className="nav__logo" />
          <div className="nav__wordmark">
            FIRMA
            <small>OFERTA · IA</small>
          </div>
        </a>

        <div className="nav__links">
          <a className="nav__link" href="#contexto">Contexto</a>
          <a className="nav__link" href="#trabalho">O que fazemos</a>
          <a className="nav__link" href="#processo">Processo</a>
          <a className="nav__link" href="#fechamento">Contato</a>
        </div>

        <a className="nav__cta" href="#fechamento" onClick={close}>Falar com a equipe</a>

        <button
          type="button"
          className="nav__toggle"
          aria-label={open ? "Fechar menu" : "Abrir menu"}
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}>
          
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>

      {/* Mobile panel */}
      <div className={`nav__panel ${open ? "is-open" : ""}`} aria-hidden={!open}>
        <a className="nav__panel-link" href="#contexto" onClick={close}>
          <span className="n">01</span> Contexto
        </a>
        <a className="nav__panel-link" href="#trabalho" onClick={close}>
          <span className="n">02</span> O que fazemos
        </a>
        <a className="nav__panel-link" href="#processo" onClick={close}>
          <span className="n">03</span> Processo
        </a>
        <a className="nav__panel-link" href="#fechamento" onClick={close}>
          <span className="n">04</span> Contato
        </a>
        <a className="nav__panel-cta" href="#fechamento" onClick={close}>
          Falar com a equipe
          <span className="arrow">→</span>
        </a>
      </div>
    </nav>);

};

// ----- Hero form -----
const WEBHOOKS = [
"https://agencia-firma-n8n.ew0aju.easypanel.host/webhook-test/16822246-b899-48b2-9915-421ffe23a4c7",
"https://agencia-firma-n8n.ew0aju.easypanel.host/webhook/16822246-b899-48b2-9915-421ffe23a4c7"];

const PAGE_TAG = "sua_empresa_ia";
const WHATSAPP_REDIRECT = "https://api.whatsapp.com/send/?phone=5511991852903&text=Ol%C3%A1%21+Quero+entender+como+minha+empresa+pode+aparecer+nas+IAs.&type=phone_number&app_absent=0";

// Brazilian phone mask: (11) 99999-9999 / (11) 9999-9999
const maskPhoneBR = (raw) => {
  const d = (raw || "").replace(/\D/g, "").slice(0, 11);
  if (d.length === 0) return "";
  if (d.length <= 2) return "(" + d;
  if (d.length <= 6) return "(" + d.slice(0, 2) + ") " + d.slice(2);
  if (d.length <= 10) return "(" + d.slice(0, 2) + ") " + d.slice(2, 6) + "-" + d.slice(6);
  return "(" + d.slice(0, 2) + ") " + d.slice(2, 7) + "-" + d.slice(7);
};
const stripPhone = (raw) => (raw || "").replace(/\D/g, "");
const isValidPhoneBR = (digits) => digits.length === 10 || digits.length === 11;

const HeroForm = ({ title = "ENTRAR EM CONTATO" }) => {
  const [data, setData] = React.useState({ nome: "", email: "", whatsapp: "", empresa: "" });
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error
  const [errMsg, setErrMsg] = React.useState("");
  const [phoneErr, setPhoneErr] = React.useState(false);

  const onChange = (k) => (e) => setData({ ...data, [k]: e.target.value });
  const onPhone = (e) => {
    setData((d) => ({ ...d, whatsapp: maskPhoneBR(e.target.value) }));
    if (phoneErr) setPhoneErr(false);
  };
  const onPhoneKey = (e) => {
    const allowed = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", "Home", "End"];
    if (allowed.includes(e.key)) return;
    if (e.metaKey || e.ctrlKey) return;
    if (!/^\d$/.test(e.key)) e.preventDefault();
  };

  const submit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    setErrMsg("");

    const digits = stripPhone(data.whatsapp);
    if (!isValidPhoneBR(digits)) {
      setPhoneErr(true);
      setErrMsg("Informe um WhatsApp válido — DDD + número (10 ou 11 dígitos).");
      setStatus("error");
      return;
    }

    const payload = {
      Nome: data.nome.trim(),
      Email: data.email.trim(),
      Whatsapp: digits,
      Empresa: data.empresa.trim(),
      pagina: PAGE_TAG
    };
    console.log("[FIRMA · lead payload]", payload);

    // Send as application/x-www-form-urlencoded so n8n parses each field separately
    const formBody = new URLSearchParams();
    Object.entries(payload).forEach(([k, v]) => formBody.append(k, v));

    // Fire both webhooks in background — keepalive ensures delivery even if user navigates
    WEBHOOKS.forEach((url) => {
      try {
        fetch(url, {
          method: "POST",
          body: formBody,
          mode: "no-cors",
          keepalive: true
        }).catch((err) => console.warn("[FIRMA · webhook fail]", url, err));
      } catch (err) {
        console.warn("[FIRMA · webhook throw]", url, err);
      }
    });

    // Redirect to WhatsApp
    window.location.href = WHATSAPP_REDIRECT;
  };

  if (status === "sent") {
    return (
      <div className="form-card">
        <h3 className="form-card__title">OBRIGADO</h3>
        <p className="form-card__sub">A equipe responde em até um dia útil. Enquanto isso, continue a leitura — o cenário que está mudando é mais profundo do que parece.</p>
      </div>);

  }

  return (
    <div className="form-card">
      <h3 className="form-card__title">{title}</h3>
      <p className="form-card__sub">Deixe seus dados. Retornamos para entender o cenário da sua empresa.</p>
      <form onSubmit={submit} noValidate>
        <input type="hidden" name="pagina" value={PAGE_TAG} readOnly />

        <div className="field">
          <label htmlFor="nome">Nome</label>
          <input
            type="text"
            id="nome"
            name="Nome"
            placeholder="Como podemos te chamar?"
            value={data.nome}
            onChange={onChange("nome")}
            required
            autoComplete="name" />
          
        </div>
        <div className="field">
          <label htmlFor="email">E-mail</label>
          <input
            type="email"
            id="email"
            name="Email"
            placeholder="voce@empresa.com"
            value={data.email}
            onChange={onChange("email")}
            required
            autoComplete="email" />
          
        </div>
        <div className="field">
          <label htmlFor="whatsapp">Whatsapp</label>
          <input
            type="tel"
            id="whatsapp"
            name="Whatsapp"
            placeholder="(11) 99999-9999"
            value={data.whatsapp}
            onChange={onPhone}
            onKeyDown={onPhoneKey}
            required
            inputMode="numeric"
            maxLength={15}
            autoComplete="tel-national"
            style={phoneErr ? { borderColor: "var(--stamp)" } : undefined} />
          
        </div>
        <div className="field">
          <label htmlFor="empresa">Empresa</label>
          <input
            type="text"
            id="empresa"
            name="Empresa"
            placeholder="Nome da sua empresa"
            value={data.empresa}
            onChange={onChange("empresa")}
            required
            autoComplete="organization" />
          
        </div>

        <button className="btn-primary" type="submit" disabled={status === "sending"}>
          {status === "sending" ? "Enviando..." : "Entrar em contato"}
          <span className="arrow">{status === "sending" ? "…" : "→"}</span>
        </button>

        {status === "error" && errMsg ?
        <p className="form-card__legal" style={{ color: "var(--stamp)" }}>{errMsg}</p> :

        <p className="form-card__legal">Conversa estratégica, sem compromisso comercial.</p>
        }
      </form>
    </div>);

};

// ----- Hero video (VTurb player) -----
const HeroVideo = () => {
  React.useEffect(() => {
    if (document.getElementById("vturb-firma-loader")) return;
    const s = document.createElement("script");
    s.id = "vturb-firma-loader";
    s.src = "https://scripts.converteai.net/12c16187-ebaa-430c-bc3f-9601c00518f4/players/6a399839d85a946218035f6a/v4/player.js";
    s.async = true;
    document.head.appendChild(s);
  }, []);
  return (
    <div className="hero__video">
      <vturb-smartplayer
        id="vid-6a399839d85a946218035f6a"
        style={{ display: "block", margin: "0 auto", width: "100%" }}
      ></vturb-smartplayer>
    </div>
  );
};

// ----- Hero -----
const Hero = () =>
<section className="hero" data-screen-label="01 Hero">
    <div className="hero__word"><span>RECOMENDADO</span></div>
    <div className="hero__inner">
      <div className="hero__grid">
        <div className="hero__left">
          <div className="hero__eyebrow">
            <span className="dot"></span>
            POSICIONAMENTO PARA INTELIGÊNCIAS ARTIFICIAIS
          </div>
          <h1 className="hero__headline">
            Faça as principais IA's do mercado<br />
            <em>indicarem</em> a sua empresa<br />
            para os clientes.
          </h1>
          <p className="hero__sub">
            <strong>Cada vez mais pessoas estão deixando de pesquisar no Google para perguntar diretamente para inteligências artificiais como ChatGPT e Gemini.</strong>
            {" "}
            Quando isso acontece, elas não recebem uma lista de opções. Elas recebem uma recomendação.
          </p>
          <div className="hero__trust">
            <div className="trust-item">
              <span className="trust-item__value">+11</span>
              <span className="trust-item__label">Anos de Firma</span>
            </div>
            <span className="trust-divider"></span>
            <div className="trust-item">
              <span className="trust-item__value">+500</span>
              <span className="trust-item__label">Projetos assinados</span>
            </div>
            <span className="trust-divider"></span>
            <div className="trust-item">
              <span className="trust-item__value">06</span>
              <span className="trust-item__label">Pilares editoriais</span>
            </div>
          </div>
          <div className="hero__cta-row">
            <a href="#fechamento" className="btn-primary">
              Quero entender como minha empresa pode aparecer
              <span className="arrow">→</span>
            </a>
          </div>
        </div>

        <div className="hero__right">
          <div className="hero__video-wrap">
            <div className="hero__image-glow"></div>
            <HeroVideo />
            <div className="float float--a"><span className="dot"></span>chatgpt.com</div>
            <div className="float float--b"><span className="dot"></span>gemini.google</div>
            <div className="float float--c"><span className="dot"></span>claude.ai</div>
            <div className="float float--d"><span className="dot"></span>perplexity.ai</div>
          </div>
        </div>
      </div>
    </div>
  </section>;


// ----- Transição (comparativo Antes x Agora) -----
const Transition = () =>
<section className="transition" id="contexto" data-screen-label="02 Comparativo">
    <div className="transition__inner">
      <div className="section-tag reveal" style={{ borderStyle: "solid", padding: "0px", borderWidth: "0px" }}><span className="num" style={{ color: "rgb(0, 0, 0)" }}>01</span> <span>O QUE MUDOU NA DECISÃO</span></div>

      <div className="compare__grid">
        <div className="compare__col compare__col--before reveal" style={{ padding: "36px 32px 32px" }}>
          <div className="col__eyebrow">Modelo anterior</div>
          <h3><span className="marker">✕</span>Como era antes</h3>
          <p className="col__lede">As pessoas pesquisavam no Google, e ele entregava várias opções na primeira página.</p>
          <ul className="compare__list">
            <li className="compare__list-label" style={{border: "none", padding: 0}}>Como funcionava</li>
            <li><span className="ico">G</span>Google</li>
            <li><span className="ico">≡</span>Lista de resultados</li>
            <li><span className="ico">∞</span>Múltiplas opções</li>
            <li><span className="ico">⇄</span>Concorrência direta</li>
          </ul>
        </div>

        <div className="compare__col compare__col--after reveal">
          <div className="col__eyebrow">Decisão por IA</div>
          <h3><span className="marker">✓</span>Como é agora</h3>
          <p className="col__lede">As pessoas perguntam para uma IA o que ela indica, e ela entrega <strong>1 ou 2 opções</strong>.</p>
          <ul className="compare__list">
            <li className="compare__list-label" style={{border: "none", padding: 0}}>Como funciona agora</li>
            <li><span className="ico">★</span>IA recomendando</li>
            <li><span className="ico">1·2</span>1 ou 2 opções</li>
            <li><span className="ico">→</span>Resposta direta</li>
            <li><span className="ico">⚡</span>Tomada de decisão acelerada</li>
          </ul>
          <div className="warn">Se a IA não indica sua empresa hoje, você está perdendo negócio.</div>
        </div>
      </div>
    </div>
  </section>;


// ----- Aprofundamento / Simulação IA -----
const AILogo = ({ kind }) => {
  // Monochrome-tinted geometric emblems, brand-tinted
  const sw = 1.6;
  if (kind === "chatgpt") return (
    <svg viewBox="0 0 24 24" fill="none" stroke="#10A37F" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v18M3 12h18M5.5 5.5l13 13M18.5 5.5l-13 13" />
    </svg>);

  if (kind === "gemini") return (
    <svg viewBox="0 0 24 24" fill="none" stroke="#4285F4" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3 L13.5 10.5 L21 12 L13.5 13.5 L12 21 L10.5 13.5 L3 12 L10.5 10.5 Z" />
    </svg>);

  if (kind === "claude") return (
    <svg viewBox="0 0 24 24" fill="none" stroke="#D97757" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v18M12 3l4 6M12 3l-4 6M3 12l6 4M3 12l6-4M21 12l-6 4M21 12l-6-4M12 21l4-6M12 21l-4-6" />
    </svg>);

  if (kind === "perplexity") return (
    <svg viewBox="0 0 24 24" fill="none" stroke="#20C9C9" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="4" width="16" height="16" rx="2" />
      <path d="M12 4v16M4 12h16" />
    </svg>);

  if (kind === "copilot") return (
    <svg viewBox="0 0 24 24" fill="none" stroke="#7C44FA" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12c0-3 2.5-5 5.5-5h3a4 4 0 0 1 4 4v2a4 4 0 0 1-4 4h-3c-3 0-5.5-2-5.5-5z" />
      <path d="M21 12c0 3-2.5 5-5.5 5h-3a4 4 0 0 1-4-4v-2a4 4 0 0 1 4-4h3" />
    </svg>);

  if (kind === "grok") return (
    <svg viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 5l14 14M19 5L5 19" />
    </svg>);

  return null;
};

const Depth = () =>
<section className="depth" data-screen-label="03 Filtro IA">
    <div className="panel">
      <div className="section-tag reveal"><span className="num" style={{ color: "rgb(0, 0, 0)" }}>02</span> <span>O FILTRO INVISÍVEL</span></div>

      <div className="ai-sim__head reveal">
        <h2>As IA's são o <em>filtro</em> que existe entre você e seus próximos clientes.</h2>
        <p>Faça com que elas indiquem sua empresa e veja seus negócios crescerem muito mais rápido.</p>
      </div>

      <div className="ai-sim__grid">
        <article className="chat-card reveal">
          <div className="chat-card__head">
            <span className="logo logo--gpt">G</span>
            <span className="name">ChatGPT</span>
            <span className="status">RECOMENDANDO</span>
          </div>
          <div className="chat-card__user">
            <span className="who">USUÁRIO</span>
            GPT, qual a melhor empresa para resolver esse problema?
          </div>
          <p className="chat-card__reply">
            Considerando autoridade, conteúdo estruturado e reputação, eu indicaria:
          </p>
          <div className="chat-pick">
            <span className="rank">01</span>
            <span className="name">Empresa X</span>
            <span className="why">Recomendada</span>
          </div>
          <div className="chat-pick">
            <span className="rank">02</span>
            <span className="name">Empresa Y</span>
            <span className="why">Alternativa</span>
          </div>
          <div className="chat-card__reasons">
            <span className="tag">Autoridade</span>
            <span className="tag">Conteúdo estruturado</span>
            <span className="tag">Relevância</span>
            <span className="tag">Reputação</span>
          </div>
        </article>

        <article className="chat-card reveal">
          <div className="chat-card__head">
            <span className="logo logo--gem">✦</span>
            <span className="name">Gemini</span>
            <span className="status">RECOMENDANDO</span>
          </div>
          <div className="chat-card__user">
            <span className="who">USUÁRIO</span>
            Gemini, me indique uma empresa que forneça os seguintes produtos…
          </div>
          <p className="chat-card__reply">
            Pelo nível de especialização e organização das informações, as melhores opções são:
          </p>
          <div className="chat-pick">
            <span className="rank">01</span>
            <span className="name">Empresa A</span>
            <span className="why">Recomendada</span>
          </div>
          <div className="chat-pick">
            <span className="rank">02</span>
            <span className="name">Empresa B</span>
            <span className="why">Alternativa</span>
          </div>
          <div className="chat-card__reasons">
            <span className="tag">Especialização</span>
            <span className="tag">Reconhecimento</span>
            <span className="tag">Informação organizada</span>
          </div>
        </article>
      </div>

      <div className="ai-scene reveal">
        <img src={ASSET("aiScene", "assets/scenario-chatgpt.png")} alt="Cenário de recomendação por IA — ChatGPT indicando empresa" />
      </div>
    </div>
  </section>;


// Minimal line icons
const Icon = ({ name }) => {
  const common = { width: 22, height: 22, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "compass") return (
    <svg viewBox="0 0 24 24" {...common}><circle cx="12" cy="12" r="9" /><path d="M15.5 8.5L13 14l-5.5 2.5L10 11z" /></svg>);

  if (name === "layers") return (
    <svg viewBox="0 0 24 24" {...common}><path d="M12 3l9 5-9 5-9-5z" /><path d="M3 13l9 5 9-5" /><path d="M3 18l9 5 9-5" /></svg>);

  if (name === "wand") return (
    <svg viewBox="0 0 24 24" {...common}><path d="M15 4l5 5L9 20H4v-5z" /><path d="M14 5l5 5" /></svg>);

  return null;
};

// ----- O que fazemos -----
const What = () =>
<section className="what" id="trabalho" data-screen-label="04 O que fazemos">
    <div className="what__inner">
      <div className="what__head">
        <h2 className="reveal">Como nós fazemos as IA's <em>indicarem a sua empresa?</em></h2>
        <p className="reveal">Três frentes simultâneas que reorganizam sua presença digital para a lógica de recomendação por inteligências artificiais.</p>
      </div>
      <div className="what__grid">
        <article className="card reveal">
          <div className="card__num">01</div>
          <div className="card__icon"><Icon name="compass" /></div>
          <h3 className="card__title">MAPEAMOS AS PERGUNTAS REAIS</h3>
          <p className="card__body" style={{ margin: "0px" }}>Mapeamos as perguntas reais que o seu público faz para uma IA. Montamos uma lista das perguntas que influenciam a decisão do cliente.</p>
        </article>
        <article className="card reveal">
          <div className="card__num">02</div>
          <div className="card__icon"><Icon name="layers" /></div>
          <h3 className="card__title">AUDITAMOS A SUA PRESENÇA DIGITAL</h3>
          <p className="card__body" style={{ margin: "0px" }}>Reescrevemos conteúdos sob a lógica de recomendação das inteligências artificiais.</p>
        </article>
        <article className="card reveal">
          <div className="card__num">03</div>
          <div className="card__icon"><Icon name="wand" /></div>
          <h3 className="card__title">CRIAMOS NOVOS CONTEÚDOS ESTRATÉGICOS</h3>
          <p className="card__body" style={{ padding: "0px", margin: "15px 0px 0px" }}>Preenchemos oportunidades para ampliar presença e relevância dentro das IA's.</p>
        </article>
      </div>
    </div>
  </section>;


// ----- Growth chart (substitui Process) -----
const Process = () => {
  const [isMobile, setIsMobile] = React.useState(false);
  React.useEffect(() => {
    const check = () => setIsMobile(window.innerWidth <= 760);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);

  // Chart geometry — desktop is wide; mobile is taller/portrait for legibility
  const W = isMobile ? 660 : 1200;
  const H = isMobile ? 560 : 380;
  const padL = isMobile ? 66 : 76;
  const padR = isMobile ? 30 : 48;
  const padT = isMobile ? 70 : 56;
  const padB = isMobile ? 66 : 50;
  const innerW = W - padL - padR;
  const innerH = H - padT - padB;

  // In-SVG type + stroke scale up on mobile so they survive the downscale
  const fsY = isMobile ? 19 : 12;
  const fsX = isMobile ? 18 : 11;
  const fsAxis = isMobile ? 15 : 10;
  const swLine = isMobile ? 5 : 3;
  const dotR = isMobile ? 6 : 3.5;

  // Data: month index, value (clients/opportunities)
  const points = [
  { m: 0, v: 18 },
  { m: 1, v: 22 },
  { m: 2, v: 24 },
  { m: 3, v: 28 },
  { m: 4, v: 26 },
  { m: 5, v: 32 },
  { m: 6, v: 36 }, // marker
  { m: 7, v: 48 },
  { m: 8, v: 64 },
  { m: 9, v: 82 },
  { m: 10, v: 104 },
  { m: 11, v: 128 }];

  const maxV = 140;
  const maxM = 11;
  const x = (m) => padL + m / maxM * innerW;
  const y = (v) => padT + (1 - v / maxV) * innerH;

  const buildPath = (pts) => {
    if (pts.length < 2) return "";
    let d = `M ${x(pts[0].m)} ${y(pts[0].v)}`;
    for (let i = 1; i < pts.length; i++) {
      const p0 = pts[i - 1],p1 = pts[i];
      const cx1 = x(p0.m) + (x(p1.m) - x(p0.m)) * 0.5;
      const cy1 = y(p0.v);
      const cx2 = cx1;
      const cy2 = y(p1.v);
      d += ` C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x(p1.m)} ${y(p1.v)}`;
    }
    return d;
  };

  const beforePts = points.slice(0, 7);
  const afterPts = points.slice(6);
  const pathBefore = buildPath(beforePts);
  const pathAfter = buildPath(afterPts);
  const areaAfter = `${pathAfter} L ${x(afterPts[afterPts.length - 1].m)} ${y(0)} L ${x(afterPts[0].m)} ${y(0)} Z`;

  // On mobile, fewer X labels to avoid crowding
  const monthLabels = ["M1", "M2", "M3", "M4", "M5", "M6", "M7", "M8", "M9", "M10", "M11", "M12"];
  const showLabel = (i) => !isMobile || i === 0 || i === 6 || i === 11;
  const yTicks = [0, 35, 70, 105, 140];

  // Marker positions as % for HTML pills outside SVG
  const markerX = x(6);
  const markerXpct = markerX / W * 100;
  const endXpct = x(11) / W * 100;
  const endYpct = (y(128) - (isMobile ? 64 : 56)) / H * 100; // pill sits above the last point

  return (
    <section className="process" id="processo" data-screen-label="05 Crescimento">
      <div className="growth__inner">
        <div className="section-tag reveal"><span className="num" style={{ color: "rgb(0, 0, 0)" }}>03</span> <span>O QUE ACONTECE DEPOIS</span></div>
        <div className="growth__head reveal">
          <h2>A curva muda quando a IA começa a <em>indicar a sua empresa.</em></h2>
          <p>A presença é a mesma. O time é o mesmo. O que mudou foi quem está sendo recomendado.</p>
        </div>

        <div className="growth__chart reveal">
          <div className="growth__topbar">
            <div className="title">Cenário simulado · ciclo 12 meses</div>
            <div className="growth__kpis">
              <div className="kpi">
                <span className="l">Baseline</span>
                <strong>Mês 6</strong>
              </div>
              <div className="kpi kpi--accent">
                <span className="l">Demanda final</span>
                <strong>+3,5×</strong>
              </div>
              <div className="kpi">
                <span className="l">Aceleração</span>
                <strong>após mês 6</strong>
              </div>
            </div>
          </div>

          <div className="growth__chart-area">
            <div className="growth__canvas">
            <div
                className="chart-pill chart-pill--start"
                style={{ left: `${markerXpct}%`, top: "1%" }}>
              
              Início das recomendações por IA's
            </div>
            <div
                className="chart-pill chart-pill--end"
                style={{ left: `${endXpct}%`, top: `${endYpct}%`, transform: "translate(-100%, 0)" }}>
              
              +3,5× Demanda
            </div>

            <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label="Curva de crescimento após recomendações por IA">
            <defs>
              <linearGradient id="areaG" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#6CE236" stopOpacity="0.28" />
                <stop offset="100%" stopColor="#6CE236" stopOpacity="0" />
              </linearGradient>
              <filter id="glowF" x="-30%" y="-30%" width="160%" height="160%">
                <feGaussianBlur stdDeviation="5" />
              </filter>
            </defs>

            {/* Y axis grid */}
            {yTicks.map((t) =>
                <g key={t}>
                <line x1={padL} y1={y(t)} x2={W - padR} y2={y(t)} stroke="rgba(14,14,14,0.05)" strokeDasharray="2 5" />
                <text x={padL - 14} y={y(t) + 5} textAnchor="end" fontFamily="JetBrains Mono" fontSize={fsY} fill="rgba(14,14,14,0.42)">{t}</text>
              </g>
                )}

            {/* Y axis label — rotated vertical */}
            <text
                  x={isMobile ? 24 : 28}
                  y={padT + innerH / 2}
                  transform={`rotate(-90 ${isMobile ? 24 : 28} ${padT + innerH / 2})`}
                  textAnchor="middle"
                  fontFamily="JetBrains Mono"
                  fontSize={fsAxis}
                  letterSpacing="2"
                  fill="rgba(14,14,14,0.40)">
                
              UNIDADES
            </text>

            {/* X axis labels */}
            {monthLabels.map((lbl, i) =>
                showLabel(i) ?
                <text
                  key={i}
                  x={x(i)}
                  y={H - (isMobile ? 32 : 26)}
                  textAnchor="middle"
                  fontFamily="JetBrains Mono"
                  fontSize={fsX}
                  letterSpacing="1"
                  fontWeight={i === 6 ? "700" : "400"}
                  fill={i === 6 ? "#0a0a0a" : "rgba(14,14,14,0.4)"}>
                
                {lbl}
              </text> : null
                )}
            <text x={padL} y={H - (isMobile ? 10 : 8)} textAnchor="start" fontFamily="JetBrains Mono" fontSize={fsAxis} letterSpacing="2" fill="rgba(14,14,14,0.40)">MESES</text>

            {/* Area fill — after */}
            <path d={areaAfter} fill="url(#areaG)" />

            {/* Line BEFORE — graphite */}
            <path d={pathBefore} fill="none" stroke="rgba(14,14,14,0.45)" strokeWidth={swLine - 0.5} strokeLinecap="round" />
            {beforePts.map((p, i) =>
                <circle key={`b${i}`} cx={x(p.m)} cy={y(p.v)} r={dotR - 1} fill="#fff" stroke="rgba(14,14,14,0.45)" strokeWidth="1.5" />
                )}

            {/* Marker — vertical line only; pill rendered as HTML above */}
            <line x1={markerX} y1={padT - 10} x2={markerX} y2={H - padB} stroke="#0a0a0a" strokeWidth="1" strokeDasharray="4 5" opacity="0.35" />

            {/* Line AFTER — neon with subtle glow */}
            <path d={pathAfter} fill="none" stroke="#6CE236" strokeWidth={swLine + 1} strokeLinecap="round" opacity="0.25" filter="url(#glowF)" />
            <path d={pathAfter} fill="none" stroke="#6CE236" strokeWidth={swLine} strokeLinecap="round" />

            {afterPts.map((p, i) =>
                <g key={`a${i}`}>
                <circle cx={x(p.m)} cy={y(p.v)} r={dotR + 2} fill="#6CE236" opacity="0.22" />
                <circle cx={x(p.m)} cy={y(p.v)} r={dotR} fill="#6CE236" />
              </g>
                )}
          </svg>
          </div>
          </div>

          <div className="growth__legend">
            <div className="item">
              <span className="swatch swatch--before"></span>
              <span><strong>Antes</strong> · presença sem recomendação</span>
            </div>
            <div className="item">
              <span className="swatch swatch--after"></span>
              <span><strong>Depois</strong> · recomendado pelas IA's</span>
            </div>
            <span className="growth__stat">↗ Aceleração da curva</span>
          </div>
        </div>
      </div>
    </section>);

};

// ----- Fechamento final -----
const Final = () =>
<section className="final" id="fechamento" data-screen-label="06 Fechamento">
    <div className="panel">
      <div className="final__inner">
        <div className="final__left">
          <div className="section-tag reveal"><span className="num" style={{ color: "rgb(0, 0, 0)" }}>04</span> <span>DIAGNÓSTICO</span></div>
          <h2 className="reveal" style={{ fontWeight: "600" }}>
            Solicite um diagnóstico gratuito para saber quais perguntas feitas hoje poderiam <em>indicar sua empresa nas IA's.</em>
          </h2>
          <p className="reveal">Preencha o formulário ao lado para receber gratuitamente.</p>
          <ul className="final__benefits reveal">
            <li><span className="check">✓</span>Mapa das perguntas que decidem sua categoria<span className="meta">01</span></li>
            <li><span className="check">✓</span>Onde sua empresa já aparece (ou não)<span className="meta">02</span></li>
            <li><span className="check">✓</span>Próximos passos para entrar na recomendação<span className="meta">03</span></li>
          </ul>
        </div>
        <div className="final__right reveal">
          <HeroForm title="ENTRAR EM CONTATO" />
        </div>
      </div>
    </div>
  </section>;


// ----- Footer -----
const Footer = () =>
<footer className="footer">
    <div className="footer__inner">
      <div className="footer__brand">
        <img src={ASSET("logoWhite", "assets/logo-firma-white.png")} alt="Firma" />
        <div className="nav__wordmark">FIRMA<small>SEU TIME DE MARKETING_</small></div>
      </div>
      <div className="footer__meta">
        © Firma · São Paulo · 2026 <span className="dot">•</span> Posicionamento para IA
      </div>
    </div>
  </footer>;


// ----- App -----
const App = () => {
  useReveal();
  return (
    <>
      <div className="bg-stage"></div>
      <Nav />
      <Hero />
      <Transition />
      <Depth />
      <What />
      <Process />
      <Final />
      <Footer />
    </>);

};

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