// =====================================================
// Beenem — Landing page components
// =====================================================
const { useState, useEffect, useRef } = React;

const WA_LINK = "https://wa.me/5541988162297?text=Ol%C3%A1%2C%20quero%20agendar%20um%20diagn%C3%B3stico%20com%20a%20Beenem";

// ---- Brand mark (gradient B) -------------------------
function BrandMark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden="true">
      <defs>
        <linearGradient id="beenem-grad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#A100F2"/>
          <stop offset="100%" stopColor="#6C007D"/>
        </linearGradient>
      </defs>
      <circle cx="20" cy="20" r="20" fill="url(#beenem-grad)"/>
      <text x="11" y="29" fill="white" fontSize="24" fontWeight="900" fontFamily="'Fixel Display', Georgia, serif">B</text>
    </svg>
  );
}

// ---- Background atmosphere ---------------------------
function Atmosphere() {
  return (
    <div className="bg-atmosphere" aria-hidden="true">
      <div className="bg-atmosphere__lines" />
      <div className="bg-atmosphere__blob bg-atmosphere__blob--a" />
      <div className="bg-atmosphere__blob bg-atmosphere__blob--b" />
      <div className="bg-atmosphere__blob bg-atmosphere__blob--c" />
      <div className="bg-atmosphere__grain" />
    </div>);
}

// ---- Cursor ------------------------------------------
function CursorDot() {
  const dotRef = useRef(null);
  const ghostRef = useRef(null);
  useEffect(() => {
    if (window.matchMedia("(max-width: 1024px), (hover: none)").matches) return;
    let x = -50, y = -50, gx = -50, gy = -50;
    let raf;
    const onMove = (e) => { x = e.clientX; y = e.clientY; };
    const tick = () => {
      gx += (x - gx) * 0.18;
      gy += (y - gy) * 0.18;
      if (dotRef.current) dotRef.current.style.transform = `translate(${x - 4}px, ${y - 4}px)`;
      if (ghostRef.current) ghostRef.current.style.transform = `translate(${gx - 14}px, ${gy - 14}px)`;
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener("mousemove", onMove);
    raf = requestAnimationFrame(tick);
    return () => { window.removeEventListener("mousemove", onMove); cancelAnimationFrame(raf); };
  }, []);
  return <>
    <div ref={ghostRef} className="cursor-ghost" />
    <div ref={dotRef} className="cursor-dot" />
  </>;
}

// ---- Nav ---------------------------------------------
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

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

  const close = () => setOpen(false);

  return (
    <nav className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
      <a href="#top" className="nav__brand" onClick={close}>
        <img src="assets/logo-horizontal-white.png" alt="Beenem Performance Digital" className="nav__logo" />
      </a>

      <div className="nav__links">
        <a href="#metodo">Como funciona</a>
        <a href="#case">Casos</a>
        <a href="#fundadores">Quem somos</a>
      </div>

      <a href={WA_LINK} className="btn btn--pill nav__cta-desk" target="_blank" rel="noopener noreferrer">Agendar diagnóstico</a>

      <button
        className={`nav__hamburger ${open ? "nav__hamburger--open" : ""}`}
        onClick={() => setOpen(o => !o)}
        aria-label={open ? "Fechar menu" : "Abrir menu"}
        aria-expanded={open}
      >
        <span className="nav__hamburger-bar" />
        <span className="nav__hamburger-bar" />
        <span className="nav__hamburger-bar" />
      </button>

      {open && (
        <div className="nav__mobile-overlay" role="dialog" aria-modal="true">
          <nav className="nav__mobile-links">
            <a href="#metodo" onClick={close}>Como funciona</a>
            <a href="#case" onClick={close}>Casos</a>
            <a href="#fundadores" onClick={close}>Quem somos</a>
            <a href={WA_LINK} className="btn btn--primary" onClick={close} target="_blank" rel="noopener noreferrer">
              Agendar diagnóstico
            </a>
          </nav>
        </div>
      )}
    </nav>);
}

// ---- Hero --------------------------------------------
function Hero() {
  const [scrollY, setScrollY] = useState(0);
  useEffect(() => {
    const onS = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  return (
    <section className="hero" id="top">
      <div className="hero__bg-photo" aria-hidden="true" />
      {/* Mobile-only portrait photo — stacked above text */}
      <div className="hero__mobile-photo" aria-hidden="true">
        <img
          src="assets/foto-fundadores-mobile.jpg"
          alt=""
          loading="eager"
          decoding="async"
          fetchpriority="high"
        />
      </div>
      <div className="hero__bg-text" aria-hidden="true" style={{ transform: `translate3d(0, ${scrollY * 0.3}px, 0)` }}>BEENEM</div>
      <div className="hero__inner">
        <div className="hero__copy">
          <span className="hero__eyebrow">Agência de Tráfego Pago · Água Verde - Curitiba</span>
          <h1 className="hero__headline">
            <em>Pare de Perder Vendas para a Concorrência.</em>
          </h1>
          <p className="hero__sub">
            Ter o melhor produto ou serviço não basta se ninguém consegue te encontrar. Chega de depender da sorte ou do "boca a boca".
          </p>
          <p className="hero__sub">
            Transformamos seu investimento no Google e Instagram em uma máquina diária de captação de clientes qualificados.
          </p>
          <div className="hero__actions">
            <a href={WA_LINK} className="btn btn--primary" target="_blank" rel="noopener noreferrer">
              Agendar Reunião de Diagnóstico
            </a>
          </div>
          <div className="hero__proof">
            <span>Diagnóstico sem custo</span>
          </div>
        </div>
      </div>
    </section>);
}

// ---- Social proof bar --------------------------------
function ProofBar() {
  const logos = [
    { src: "assets/pb-biguacu.png",        alt: "Imobiliária Biguaçu" },
    { src: "assets/pb-braty.png",          alt: "Braty" },
    { src: "assets/pb-abaco.png",          alt: "Ábaco" },
    { src: "assets/pb-gessi.png",          alt: "Gessi Empreendimentos" },
    { src: "assets/pb-kuster.png",         alt: "Kuster Imóveis" },
    { src: "assets/pb-lideranca.png",      alt: "Liderança" },
    { src: "assets/pb-lago-azul.png",      alt: "Lago Azul" },
    { src: "assets/pb-rachel-jordan.png",  alt: "Rachel Jordan" },
    { src: "assets/pb-sogato.png",         alt: "Só Gato" },
    { src: "assets/pb-silvana-rocha.png",  alt: "Silvana Rocha" },
    { src: "assets/pb-tbo.png",            alt: "TBO" },
    { src: "assets/pb-th-transportes.png", alt: "TH Transportes" },
    { src: "assets/pb-viva-deltaville.png",alt: "Viva Deltaville" },
    { src: "assets/pb-wande.png",          alt: "Wande" },
  ];

  const wrapRef = useRef(null);
  const posRef = useRef(0);
  const rafRef = useRef(null);
  const dragRef = useRef({ active: false, startX: 0, startPos: 0 });

  useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const speed = reduced ? 0 : 0.6;
    const tick = () => {
      if (!dragRef.current.active && speed > 0) {
        posRef.current -= speed;
        const half = wrap.scrollWidth / 2;
        if (posRef.current <= -half) posRef.current += half;
        wrap.style.transform = `translateX(${posRef.current}px)`;
      }
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, []);

  const onPointerDown = (e) => {
    dragRef.current = { active: true, startX: e.clientX, startPos: posRef.current };
  };
  const onPointerMove = (e) => {
    if (!dragRef.current.active) return;
    const dx = e.clientX - dragRef.current.startX;
    let pos = dragRef.current.startPos + dx;
    const half = wrapRef.current.scrollWidth / 2;
    if (pos > 0) pos -= half;
    if (pos <= -half) pos += half;
    posRef.current = pos;
    wrapRef.current.style.transform = `translateX(${pos}px)`;
  };
  const onPointerUp = () => { dragRef.current.active = false; };

  const LogoItems = () => logos.map((l, i) =>
    <div key={i} className="proof-bar__logo">
      <img src={l.src} alt={l.alt} loading="lazy" decoding="async"
        style={l.wb ? {filter:"invert(1) brightness(1.8)", mixBlendMode:"screen"} : undefined}
      />
    </div>
  );

  return (
    <section className="proof-bar">
      <p className="proof-bar__title">Empresas que confiam na Beenem</p>
      <div
        className="proof-bar__marquee"
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerLeave={onPointerUp}
        onPointerCancel={onPointerUp}
        style={{ cursor: 'grab', touchAction: 'pan-y' }}
      >
        <div className="proof-bar__combined" ref={wrapRef}>
          <div className="proof-bar__track" aria-hidden="true"><LogoItems /></div>
          <div className="proof-bar__track" aria-hidden="true"><LogoItems /></div>
        </div>
      </div>
    </section>);
}

// ---- CountUp -----------------------------------------
function CountUp({ to, suffix = "", prefix = "", duration = 1500 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        const start = performance.now();
        const tick = (t) => {
          const p = Math.min(1, (t - start) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setVal(Math.round(to * eased));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
        io.disconnect();
      }
    }, { threshold: 0.5 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{prefix}{val}{suffix}</span>;
}

// ---- Stats -------------------------------------------
function Stats() {
  const metrics = [
    { to: 5,  prefix: "R$", suffix: "M+", label: "Em verba gerenciada" },
    { to: 70, prefix: "",   suffix: "+",  label: "Clientes atendidos" },
    { to: 5,   prefix: "",   suffix: "+",  label: "Anos de experiência" },
    { to: 150, prefix: "R$", suffix: "M", label: "Em vendas geradas" },
  ];
  return (
    <section className="stats">
      <div className="stats__inner">
        {metrics.map((m, i) =>
          <div key={i} className="stats__item reveal">
            <span className="stats__num">
              <CountUp to={m.to} prefix={m.prefix} suffix={m.suffix} />
            </span>
            <span className="stats__label">{m.label}</span>
          </div>
        )}
      </div>
    </section>);
}

// ---- CTA separator (between sections) ----------------
function CTABanner({ cta, href = WA_LINK }) {
  return (
    <div className="cta-sep">
      <a href={href} className="btn btn--primary reveal" target="_blank" rel="noopener noreferrer">{cta}</a>
    </div>
  );
}

// ---- Problem -----------------------------------------
function Problem() {
  const items = [
    "Campanhas que geram clique, mas não geram venda",
    "Marketing sem previsibilidade",
    "Agência que entrega post, mas não crescimento",
    "Sensação de que sua empresa poderia vender muito mais",
    "Falta de clareza sobre onde está o gargalo",
    "Dependência de indicação ou sorte para crescer",
    "Nunca investiu em marketing e não sabe por onde começar",
  ];

  return (
    <section className="problem">
      <div className="problem__inner">
        <span className="section-eyebrow reveal">Problema</span>
        <h2 className="problem__title reveal">Se você se identifica com isso…</h2>
        <ul className="problem__list">
          {items.map((t, i) =>
            <li key={i} className="problem__item reveal">
              <span className="problem__num">0{i + 1}</span>
              <span className="problem__text">
                <span className="problem__x">×</span>
                {t}
              </span>
            </li>
          )}
        </ul>
        <div className="problem__cta-block reveal">
          <a href={WA_LINK} className="btn btn--primary" target="_blank" rel="noopener noreferrer">
            Você precisa falar com a nossa equipe
          </a>
        </div>
      </div>
    </section>);
}

// ---- Method ------------------------------------------
function Method() {
  const ref = useRef(null);
  const [y, setY] = useState(0);
  useEffect(() => {
    const onS = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      setY((window.innerHeight - r.top) * 0.12);
    };
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);

  const steps = [
    { n: "01", title: "Diagnóstico",
      lead: "Antes de investir R$1 em tráfego, entendemos:",
      bullets: ["oferta", "posicionamento", "comunicação", "aquisição", "gargalos comerciais"],
      close: "Porque campanha nenhuma salva uma estrutura confusa." },
    { n: "02", title: "Construção",
      lead: "Criamos uma operação de crescimento:",
      bullets: ["campanhas", "criativos", "estratégia", "funis", "distribuição", "percepção de marca"],
      close: "Tudo conectado e pensado de forma estratégica." },
    { n: "03", title: "Escala",
      lead: "Depois da validação:",
      bullets: ["ampliamos aquisição", "otimizamos conversão", "reduzimos desperdício", "aumentamos previsibilidade"],
      close: "Crescimento saudável não é pico, é consistência." }
  ];

  return (
    <section ref={ref} className="method" id="metodo">
      <div className="method__bg-text" aria-hidden="true" style={{ transform: `translate3d(0, ${-y}px, 0)` }}>MÉTODO</div>
      <div className="method__inner">
        <span className="section-eyebrow reveal">Método Beenem</span>
        <h2 className="method__title reveal">Como vamos ajudar a sua empresa a crescer mais</h2>
        <div className="method__steps">
          {steps.map((s) =>
            <div key={s.n} className="method__step reveal">
              <div className="method__step-left">
                <span className="method__num">{s.n}</span>
                <h3 className="method__name">{s.title}</h3>
              </div>
              <div className="method__step-right">
                <p className="method__lead">{s.lead}</p>
                <ul className="method__bullets">
                  {s.bullets.map((b, i) => <li key={i}>{b}</li>)}
                </ul>
                <p className="method__closing">{s.close}</p>
              </div>
            </div>
          )}
        </div>
        <p className="method__final reveal">Não entregamos só campanhas. Construímos <em>sistemas de crescimento</em> para empresas que querem parar de improvisar.</p>
        <div className="cta-sep reveal">
          <a href={WA_LINK} className="btn btn--primary" target="_blank" rel="noopener noreferrer">Agendar diagnóstico</a>
        </div>
      </div>
    </section>);
}

// ---- Service icons -----------------------------------
const serviceIcons = {
  "Meta Ads": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
    </svg>
  ),
  "Google Ads": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/><path d="M11 8v6M8 11h6"/>
    </svg>
  ),
  "Landing Pages": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>
    </svg>
  ),
  "Consultoria Comercial": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
    </svg>
  ),
  "Design e Edição de Vídeo para Criativos": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/>
    </svg>
  ),
  "Roteiros para Vídeos": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
    </svg>
  ),
};

// ---- Services ----------------------------------------
function Services() {
  const list = [
    { name: "Meta Ads", desc: "Campanhas estratégicas no Facebook e Instagram para alcançar o público certo com a mensagem certa no momento certo." },
    { name: "Google Ads", desc: "Apareça no topo da busca quando seu cliente está procurando exatamente o que você oferece." },
    { name: "Landing Pages", desc: "Páginas de alta conversão construídas para transformar cliques em leads e leads em clientes." },
    { name: "Consultoria Comercial", desc: "Diagnóstico completo do seu funil de vendas, da captação ao fechamento." },
    { name: "Design e Edição de Vídeo para Criativos", desc: "Criativos que param o scroll e geram resultado. Produção completa para campanhas de tráfego pago." },
    { name: "Roteiros para Vídeos", desc: "Scripts estratégicos que comunicam valor, geram conexão e convertem visualizações em clientes." },
  ];
  return (
    <section className="services" id="servicos">
      <div className="services__inner">
        <span className="section-eyebrow reveal">O que fazemos</span>
        <h2 className="services__title reveal">Tudo que sua empresa precisa para crescer com tráfego pago.</h2>
        <div className="services__grid">
          {list.map((s, i) =>
            <div key={i} className="service-card reveal">
              <span className="service-card__num">0{i + 1}</span>
              <span className="service-card__icon" aria-hidden="true">
                {serviceIcons[s.name]}
              </span>
              <h3 className="service-card__name">{s.name}</h3>
              <p className="service-card__desc">{s.desc}</p>
            </div>
          )}
        </div>
        <div className="cta-sep reveal" style={{ marginTop: 'var(--space-8)' }}>
          <a href={WA_LINK} className="btn btn--primary services__cta" target="_blank" rel="noopener noreferrer">Agendar diagnóstico</a>
        </div>
      </div>
    </section>);
}

// ---- Testimonials ------------------------------------
function Testimonials() {
  const items = [
    {
      img: "assets/logo-biguacu.webp", imgType: "logo",
      paragraphs: [
        "A Beenem atende nossa imobiliária desde 2023. Antes disso, tínhamos muita dificuldade para gerar vendas com consistência através do digital.",
        "Com a gestão de tráfego da equipe no Meta Ads e Google Ads, nossos resultados cresceram de forma clara e previsível. Hoje conseguimos gerar muito mais oportunidades e manter uma operação mais estável.",
        "Profissionais comprometidos, estratégicos e acima da média.",
      ],
      name: "Imobiliária Biguaçu", company: "", result: "Cliente desde 2023",
    },
    {
      img: "assets/logo-rachel.png", imgType: "logo",
      paragraphs: [
        "Desde que comecei com a Beenem, em 2023, meus cursos de consultoria de imagem passaram a ter muito mais alcance e resultado através do tráfego pago.",
        "Além das campanhas, também tivemos evolução nas vendas dos produtos pelo site. A equipe sempre foi muito presente, atenciosa e focada em encontrar formas reais de atingir nossas metas e objetivos.",
      ],
      name: "Rachel Jordan", company: "Consultoria de Imagem", result: "Desde 2023",
    },
    {
      img: "assets/vinicius-dmg.png", imgType: "photo",
      paragraphs: [
        "Minha primeira venda como corretor veio através das campanhas feitas pela Beenem.",
        "Depois disso, comecei a vender com muito mais frequência no digital, chegando a manter uma média de uma venda por mês através das campanhas.",
        "O trabalho da equipe realmente mudou minha realidade profissional.",
      ],
      name: "Vinicius Domingues", company: "Corretor de Imóveis", result: "1 venda/mês",
    },
    {
      img: "assets/silvana-rocha.png", imgType: "photo",
      paragraphs: [
        "Eu já estava desacreditada no digital porque tinha investido antes e não tinha tido retorno, mesmo colocando valores altos em anúncios.",
        "Com a Beenem foi diferente. Em menos de 2 meses consegui vender 3 apartamentos através das campanhas.",
        "Além dos resultados, o que mais me marcou foi sentir que finalmente existia estratégia, acompanhamento e um trabalho feito com atenção de verdade.",
      ],
      name: "Silvana", company: "Corretora de Imóveis", result: "3 aptos em 2 meses",
    },
    {
      img: "assets/logo-th.avif", imgType: "logo",
      paragraphs: [
        "Desde que comecei a trabalhar com a Beenem, consegui melhorar muito minha presença digital e alcançar minhas metas com mais consistência.",
        "O custo das campanhas no Google Ads está muito bom e os resultados vêm aumentando mês após mês.",
        "Já estamos há quase 1 ano trabalhando juntos e a evolução continua acontecendo. A equipe é muito prestativa no dia a dia e isso me dá tranquilidade para focar no que realmente importa: vender e cuidar da operação da empresa.",
      ],
      name: "Thiago", company: "TH Transportes", result: "Quase 1 ano juntos",
    },
  ];

  const trackRef = useRef(null);
  const activeRef = useRef(0);
  const autoRef = useRef(null);
  const dragRef = useRef({ startX: 0, dragging: false });
  const [active, setActive] = useState(0);
  const n = items.length;

  const isMobile = () => window.matchMedia("(max-width: 768px)").matches;
  const maxIdx = () => isMobile() ? n - 1 : Math.max(0, n - 2);

  const slideTo = (raw) => {
    const m = maxIdx();
    const next = raw < 0 ? m : raw > m ? 0 : raw;
    activeRef.current = next;
    setActive(next);
    if (trackRef.current && trackRef.current.children[next]) {
      trackRef.current.style.transform =
        `translateX(-${trackRef.current.children[next].offsetLeft}px)`;
    }
  };

  const bump = () => slideTo(activeRef.current >= maxIdx() ? 0 : activeRef.current + 1);

  useEffect(() => {
    autoRef.current = setInterval(bump, 7000);
    return () => clearInterval(autoRef.current);
  }, []);

  const go = (dir) => {
    clearInterval(autoRef.current);
    slideTo(activeRef.current + dir);
    autoRef.current = setInterval(bump, 7000);
  };

  const jumpTo = (i) => {
    clearInterval(autoRef.current);
    slideTo(i);
    autoRef.current = setInterval(bump, 7000);
  };

  const onPointerDown = (e) => {
    dragRef.current = { startX: e.clientX, dragging: true };
    e.currentTarget.setPointerCapture(e.pointerId);
  };
  const onPointerUp = (e) => {
    if (!dragRef.current.dragging) return;
    dragRef.current.dragging = false;
    const dx = e.clientX - dragRef.current.startX;
    if (Math.abs(dx) > 40) go(dx < 0 ? 1 : -1);
  };
  const onPointerCancel = () => { dragRef.current.dragging = false; };

  return (
    <section className="testimonials">
      <div className="testimonials__inner">
        <div className="testimonials__header reveal">
          <div>
            <span className="section-eyebrow">O que dizem</span>
            <h2 className="testimonials__title">Quem já encontrou<br/>seus resultados.</h2>
          </div>
          <div className="testimonials__arrows">
            <button className="testimonials__btn" onClick={() => go(-1)} aria-label="Anterior">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>
            <button className="testimonials__btn" onClick={() => go(1)} aria-label="Próximo">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </div>
        </div>

        <div className="testimonials__viewport"
          onPointerDown={onPointerDown}
          onPointerUp={onPointerUp}
          onPointerCancel={onPointerCancel}
          style={{ touchAction: 'pan-y', cursor: 'grab' }}
        >
          <div className="testimonials__track" ref={trackRef}>
            {items.map((it, i) => (
              <div key={i} className={`testimonials__card${i === active ? " is-active" : ""}`}>
                <blockquote className="testimonials__quote">
                  {it.paragraphs.map((p, j) => <p key={j}>{p}</p>)}
                </blockquote>
                <footer className="testimonials__foot">
                  <div className={`testimonials__photo${it.imgType === "logo" ? " testimonials__photo--logo" : ""}`}>
                    <img src={it.img} alt={it.name} loading="lazy" decoding="async" />
                  </div>
                  <div className="testimonials__meta">
                    <strong className="testimonials__name">{it.name}</strong>
                    {it.company && <span className="testimonials__company">{it.company}</span>}
                  </div>
                  <span className="testimonials__chip">{it.result}</span>
                </footer>
              </div>
            ))}
          </div>
        </div>

        <div className="testimonials__dots">
          {items.map((_, i) => (
            <button key={i}
              className={`testimonials__dot${i === active ? " active" : ""}`}
              onClick={() => jumpTo(i)}
              aria-label={`Depoimento ${i + 1}`}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Founders ----------------------------------------
function Founders() {
  return (
    <section className="founders" id="fundadores">
      <div className="founders__inner">
        <span className="section-eyebrow reveal">Quem somos</span>
        <h2 className="founders__title reveal">A história por trás<br/>da <em>operação</em>.</h2>

        <div className="founders__origin reveal">
          <div className="founders__origin-body">
            <p>
              A Beenem começou de um jeito simples: duas pessoas tentando entender por que algumas empresas crescem muito…
              e outras continuam invisíveis mesmo tendo um produto ou serviço bom.
            </p>
            <p>
              Desde 2021, a gente já entrou em operações muito diferentes. De construtoras vendendo empreendimentos…
              a clínicas tentando lotar agenda. De e-commerces buscando escala… a advogados querendo posicionamento.
              Negócios locais. Empresas de serviço. Marcas pessoais. Infoprodutores.
              Algumas começando do zero. Outras já faturando alto e tentando destravar crescimento.
            </p>
            <p>
              E no fim, quase todas chegavam com a mesma sensação: "a empresa tem potencial… mas o marketing ainda não acompanha isso."
            </p>
            <p>
              Nesse caminho, gerenciamos mais de <span className="founders__origin-stat">R$5 milhões</span> em mídia
              e participamos de mais de <span className="founders__origin-stat">R$150 milhões</span> em vendas geradas.
              Mas no fim, o trabalho sempre girou em torno da mesma coisa: fazer empresas crescerem com mais clareza, previsibilidade e direção.
            </p>
            <span className="founders__origin-location">Água Verde · Curitiba</span>
          </div>
        </div>

        <div className="founders__grid">
          <div className="founder reveal">
            <div className="founder__photo">
              <img src="assets/foto-matheus.jpg" alt="Matheus Chester" loading="lazy" decoding="async" style={{objectPosition: "50% 15%"}} />
            </div>
            <div className="founder__info">
              <h3 className="founder__name">Matheus Chester</h3>
              <span className="founder__role">Comercial, diagnóstico e relacionamento</span>
              <p className="founder__bio">
                Normalmente é quem entra primeiro na operação. Pra entender uma coisa simples:
                a empresa realmente precisa de mais tráfego… ou só está crescendo sem direção?
              </p>
              <p className="founder__bio">
                É quem olha: aquisição, posicionamento, processo comercial, gargalos de venda, comunicação.
                Porque muita empresa não vende pouco por falta de anúncio.
                Vende pouco porque marketing e comercial pararam de conversar faz tempo.
              </p>
            </div>
          </div>

          <div className="founder reveal">
            <div className="founder__photo">
              <img src="assets/foto-mavi.png" alt="Maria Victória" loading="lazy" decoding="async" />
            </div>
            <div className="founder__info">
              <h3 className="founder__name">Maria Victória</h3>
              <span className="founder__role">Operação, campanhas e estratégia</span>
              <p className="founder__bio">
                É quem pega toda a parte estratégica… e faz ela acontecer sem virar caos.
                Cuida da operação, campanhas, acompanhamento de performance e organização das entregas da Beenem.
              </p>
              <p className="founder__bio">
                Porque campanha boa não nasce de "inspiração".
                Nasce de processo, consistência e leitura de dados.
              </p>
            </div>
          </div>
        </div>

        <div className="founders__caption reveal">
          <span className="founders__caption-mark">// sócios</span>
          <p className="founders__caption-text">
            Sócios na empresa. E também na vida. A Beenem cresceu junto com a gente, e talvez por isso o jeito que trabalhamos seja tão próximo das empresas que entram aqui.
          </p>
        </div>
      </div>
    </section>);
}

// ---- Not for -----------------------------------------
function NotFor() {
  const items = [
    'você procura apenas "posts"',
    "quer resultado imediato sem estrutura",
    "busca preço baixo ao invés de crescimento",
    "não está disposto a melhorar operação e posicionamento",
  ];

  return (
    <section className="notfor">
      <div className="notfor__inner">
        <span className="section-eyebrow reveal">Para quem não é</span>
        <h2 className="notfor__title reveal">A Beenem não é para todo mundo.</h2>
        <p className="notfor__intro reveal">Provavelmente não faz sentido trabalhar com a gente se:</p>
        <ul className="notfor__list">
          {items.map((t, i) =>
            <li key={i} className="notfor__item reveal">
              <span className="notfor__item-mark">—</span>
              <span>{t}</span>
            </li>
          )}
        </ul>
        <div className="notfor__flip reveal">
          <p className="notfor__flip-intro">Agora…</p>
          <p className="notfor__flip-body">
            Se sua empresa já entendeu que marketing é uma ferramenta de crescimento…
            A conversa muda e ela precisa começar agora.
          </p>
          <a href={WA_LINK} className="btn btn--primary" target="_blank" rel="noopener noreferrer">
            Agendar diagnóstico
          </a>
        </div>
      </div>
    </section>);
}

// ---- CTA ---------------------------------------------
function CTASection() {
  return (
    <section className="cta" id="cta">
      <div className="cta__glow" />
      <div className="cta__inner">
        <span className="section-eyebrow cta__eyebrow reveal">Diagnóstico Beenem</span>
        <h2 className="cta__title reveal">Pronto para<br/>parar de improvisar?</h2>
        <p className="cta__opening reveal">
          Toda empresa cresce até um ponto.<br />
          Depois disso… o que trouxe você até aqui normalmente não leva para o próximo nível.
        </p>
        <p className="cta__label reveal">O diagnóstico da Beenem existe pra identificar exatamente isso:</p>
        <ul className="cta__bullets reveal">
          <li>o que está travando crescimento</li>
          <li>onde sua operação perde oportunidade</li>
          <li>e o que hoje faria mais diferença no faturamento da empresa</li>
        </ul>
        <a href={WA_LINK} className="btn btn--primary btn--lg reveal" target="_blank" rel="noopener noreferrer">
          Agendar diagnóstico
        </a>
      </div>
    </section>);
}

// ---- Footer ------------------------------------------
function Footer() {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <img src="assets/logo-horizontal-white.png" alt="Beenem Performance Digital" className="footer__logo" />
        <div className="footer__links">
          <a href="https://instagram.com/beenemperformance" target="_blank" rel="noopener noreferrer">Instagram</a>
          <a href={WA_LINK} target="_blank" rel="noopener noreferrer">WhatsApp</a>
        </div>
      </div>
      <div className="footer__meta">
        <span>Curitiba, Brasil</span>
        <span>Beenem Performance Digital</span>
        <span>2026</span>
      </div>
    </footer>);
}

// ---- WhatsApp FAB ------------------------------------
function WhatsAppFAB() {
  return (
    <a
      href={WA_LINK}
      className="wa-fab"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Conversar no WhatsApp"
    >
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
      </svg>
      <span className="wa-fab__label">WhatsApp</span>
    </a>
  );
}

// ---- Qualify Modal -----------------------------------
function QualifyModal({ open, onClose }) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({ nome: "", wa: "", segmento: "", investimento: "", desafio: "" });

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const formatPhone = (v) => {
    const d = v.replace(/\D/g, "").slice(0, 11);
    if (d.length <= 10)
      return d.replace(/(\d{2})(\d{4})(\d{0,4})/, "($1) $2-$3").replace(/-$/, "");
    return d.replace(/(\d{2})(\d{1})(\d{4})(\d{0,4})/, "($1) $2 $3-$4").replace(/-$/, "");
  };

  const step1Valid = form.nome.trim().length > 1 && form.wa.replace(/\D/g, "").length >= 10;
  const step2Valid = form.segmento && form.investimento && form.desafio;

  const WEBHOOK_URL = "COLE_AQUI_A_URL_DO_MAKE"; // ← trocar quando criar o webhook no Make

  const submit = () => {
    const payload = {
      nome: form.nome,
      whatsapp: form.wa,
      segmento: form.segmento,
      investimento: form.investimento,
      desafio: form.desafio,
      timestamp: new Date().toISOString(),
    };

    fetch(WEBHOOK_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    }).catch(() => {});

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: "Form Beenem", ...payload });

    const msg = encodeURIComponent(
      `Olá! Vim pelo site da Beenem e gostaria de agendar um diagnóstico.\n\n` +
      `*Nome:* ${form.nome}\n` +
      `*WhatsApp:* ${form.wa}\n` +
      `*Segmento:* ${form.segmento}\n` +
      `*Investimento em marketing:* ${form.investimento}\n` +
      `*Principal desafio:* ${form.desafio}\n\n` +
      `Pode me ajudar?`
    );
    window.open(`https://wa.me/5541988162297?text=${msg}`, "_blank", "noopener,noreferrer");
    onClose();
  };

  useEffect(() => {
    if (!open) {
      const t = setTimeout(() => {
        setStep(1);
        setForm({ nome: "", wa: "", segmento: "", investimento: "", desafio: "" });
      }, 300);
      return () => clearTimeout(t);
    }
  }, [open]);

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

  if (!open) return null;

  return (
    <div className="qmodal-backdrop" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="qmodal" role="dialog" aria-modal="true" aria-label="Formulário de diagnóstico">
        <button className="qmodal__close" onClick={onClose} aria-label="Fechar">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M18 6 6 18M6 6l12 12"/>
          </svg>
        </button>

        <div className="qmodal__progress">
          <div className={`qmodal__step-dot${step >= 1 ? " active" : ""}`}><span>1</span></div>
          <div className={`qmodal__progress-line${step >= 2 ? " filled" : ""}`} />
          <div className={`qmodal__step-dot${step >= 2 ? " active" : ""}`}><span>2</span></div>
        </div>

        {step === 1 && (
          <div className="qmodal__body">
            <h2 className="qmodal__title">Vamos entender o seu negócio.</h2>
            <p className="qmodal__sub">Antes de conversarmos, preencha algumas informações para entendermos melhor sobre a sua empresa.</p>
            <div className="qmodal__fields">
              <label className="qmodal__label">
                Nome completo
                <input className="qmodal__input" type="text" placeholder="Seu nome" value={form.nome}
                  onChange={e => set("nome", e.target.value)} autoFocus />
              </label>
              <label className="qmodal__label">
                WhatsApp
                <input className="qmodal__input" type="tel" placeholder="(41) 9 9999-9999" value={form.wa}
                  onChange={e => set("wa", formatPhone(e.target.value))}
                  onKeyDown={e => e.key === "Enter" && step1Valid && setStep(2)} />
              </label>
            </div>
            <button className={`btn btn--primary qmodal__cta${step1Valid ? "" : " disabled"}`}
              onClick={() => { if (step1Valid) setStep(2); }}>
              Continuar →
            </button>
          </div>
        )}

        {step === 2 && (
          <div className="qmodal__body">
            <span className="section-eyebrow">Quase lá</span>
            <h2 className="qmodal__title">Sobre<br/>sua empresa.</h2>
            <div className="qmodal__fields">
              <label className="qmodal__label">
                Segmento do negócio
                <select className="qmodal__input qmodal__select" value={form.segmento}
                  onChange={e => set("segmento", e.target.value)}>
                  <option value="">Selecione…</option>
                  <option>Saúde e Clínicas</option>
                  <option>Imóveis</option>
                  <option>Educação</option>
                  <option>Serviços B2B</option>
                  <option>Varejo / E-commerce</option>
                  <option>Indústria</option>
                  <option>Outro</option>
                </select>
              </label>
              <label className="qmodal__label">
                Investimento mensal em marketing
                <select className="qmodal__input qmodal__select" value={form.investimento}
                  onChange={e => set("investimento", e.target.value)}>
                  <option value="">Selecione…</option>
                  <option>Ainda não invisto</option>
                  <option>Até R$ 2.000/mês</option>
                  <option>R$ 2.000 – R$ 5.000/mês</option>
                  <option>R$ 5.000 – R$ 15.000/mês</option>
                  <option>Acima de R$ 15.000/mês</option>
                </select>
              </label>
              <label className="qmodal__label">
                Principal desafio hoje
                <select className="qmodal__input qmodal__select" value={form.desafio}
                  onChange={e => set("desafio", e.target.value)}>
                  <option value="">Selecione…</option>
                  <option>Leads sem qualidade</option>
                  <option>Alto custo por lead</option>
                  <option>Nunca investi — não sei por onde começar</option>
                  <option>Agência anterior não entregou resultado</option>
                  <option>Quero escalar o que já funciona</option>
                </select>
              </label>
            </div>
            <div className="qmodal__actions">
              <button className="btn btn--ghost" onClick={() => setStep(1)}>← Voltar</button>
              <button className={`btn btn--primary${step2Valid ? "" : " disabled"}`}
                onClick={() => { if (step2Valid) submit(); }}>
                Quero meu diagnóstico
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  BrandMark, Atmosphere, CursorDot, Nav, Hero, ProofBar, Stats,
  CTABanner, Problem, Method, Services, Testimonials, Founders, NotFor,
  CTASection, Footer, WhatsAppFAB, QualifyModal
});