// D'Almada ISP Landing — components

const C = {
  bg: "#1A1A1A", bg2: "#282828", bg3: "#1F1F1F", card: "#2A2A2A", elevated: "#333333",
  lime: "#C9F31D", limeH: "#D4F73D", limeM: "rgba(201,243,29,0.12)", limeB: "rgba(201,243,29,0.25)",
  white: "#FFFFFF", gray1: "#A0A0A0", gray2: "#6B6B6B",
  border: "rgba(255,255,255,0.08)", borderH: "rgba(255,255,255,0.15)",
  danger: "#EF4444", success: "#22C55E",
  fDisp: "'Inter', sans-serif", fBody: "'Inter', sans-serif",
};

// ————— Responsividade hook —————
function useIsMobile(bp = 600) {
  const [mobile, setMobile] = React.useState(() => window.innerWidth <= bp);
  React.useEffect(() => {
    const fn = () => setMobile(window.innerWidth <= bp);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, [bp]);
  return mobile;
}

// ————— Logo —————
function LogoMark({ size = 32 }) {
  return (
    <svg viewBox="0 0 659.07 741.24" xmlns="http://www.w3.org/2000/svg" style={{ width: size, height: (size * 741.24) / 659.07, display: "block" }}>
      <path fill="#C9F31D" d="M631.42,176.7c-35.55-77.19-105.82-136.93-187.21-162.33-64.08-20-134.38-19.12-198.29,2.72-5.87,2.01-48.46,17.39-89.09,32.1-42.77,15.48-64.9,62.69-49.44,105.47l137.44,380.26s141.65-51.36,172.89-62.74c62.55-23,109.65-82.4,117.05-149.3,5.28-47.63-9.56-97.69-40.87-134.37-31.05-36.37-77.02-59.17-124.95-63.11-26.8-2.2-53.99,1.47-79.33,10.6l-47.46,17.21,36.19,99.82c22.67-8.22,41.19-14.92,47.93-17.33,38.39-13.58,86.98,3.95,99.98,45.93,8.25,26.59-.09,57.69-21.24,76.59-6.94,6.19-15.08,10.98-23.82,14.21-24.2,8.81-48.42,17.55-72.64,26.33l-19.6-54.07-73.8-203.57s57.63-20.85,61.96-22.41c50.01-17.87,106.72-16.52,155.71,4.46,50.64,21.68,91.69,63.91,109.74,117.24,20.39,60.28,9.97,129.78-27.79,181.99-22.85,31.59-55.4,56.05-91.99,69.77-.6.22-1.21.44-1.81.67-42.15,15.28-52.96,19.32-76.55,27.86l-112.06,40.62-40.25-111.04c-8.98-24.43-15.45-42.48-22.53-62.31l-.11.04-66.79-184.24-28.89,10.47c-39.12,14.18-59.34,57.37-45.16,96.49,16.23,44.78,77.93,214.96,113.83,314,14.56,40.15,58.89,60.87,99.03,46.3,75.9-27.55,187.84-68.19,216.61-78.67,73.45-27.01,136.26-83.29,170.61-154.41.97-2.02,1.92-4.05,2.85-6.09l.05-.09c36.48-80.23,36.81-174.71-.19-255.07Z" />
      <path fill="#C9F31D" opacity=".15" d="M607.31,242.26c-35.55-77.19-105.82-136.93-187.21-162.33-64.08-20-134.38-19.12-198.29,2.72-5.87,2.01-48.46,17.39-89.09,32.1-42.77,15.48-64.9,62.69-49.44,105.47l137.44,380.26s141.65-51.36,172.89-62.74c62.55-23,109.65-82.4,117.05-149.3,5.28-47.63-9.56-97.69-40.87-134.37-31.05-36.37-77.02-59.17-124.95-63.11-26.8-2.2-53.99,1.47-79.33,10.6l-47.46,17.21,36.19,99.82c22.67-8.22,41.19-14.92,47.93-17.33,38.39-13.58,86.98,3.95,99.98,45.93,8.25,26.59-.09,57.69-21.24,76.59-6.94,6.19-15.08,10.98-23.82,14.21-24.2,8.81-48.42,17.55-72.64,26.33l-19.6-54.07-73.8-203.57s57.63-20.85,61.96-22.41c50.01-17.87,106.72-16.52,155.71,4.46,50.64,21.68,91.69,63.91,109.74,117.24,20.39,60.28,9.97,129.78-27.79,181.99-22.85,31.59-55.4,56.05-91.99,69.77-.6.22-1.21.44-1.81.67-42.15,15.28-52.96,19.32-76.55,27.86l-112.06,40.62-40.25-111.04c-8.98-24.43-15.45-42.48-22.53-62.31l-.11.04-66.79-184.24-28.89,10.47c-39.12,14.18-59.34,57.37-45.16,96.49,16.23,44.78,77.93,214.96,113.83,314,14.56,40.15,58.89,60.87,99.03,46.3,75.9-27.55,187.84-68.19,216.61-78.67,73.45-27.01,136.26-83.29,170.61-154.41.97-2.02,1.92-4.05,2.85-6.09l.05-.09c36.48-80.23,36.81-174.71-.19-255.07Z" />
    </svg>
  );
}

// ————— Header —————
function Header({ onOpenForm }) {
  const isMobile = useIsMobile();
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(26,26,26,0.92)", backdropFilter: "blur(14px)",
      borderBottom: `1px solid ${C.border}`,
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: isMobile ? "12px 18px" : "14px 32px",
        display: "flex", alignItems: "center",
        justifyContent: "space-between", gap: isMobile ? 0 : 24,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flex: isMobile ? "0 0 auto" : "unset" }}>
          <LogoMark size={isMobile ? 28 : 34} />
        </div>
        {!isMobile && (
          <nav style={{ display: "flex", gap: 28, fontFamily: C.fBody, fontSize: 13, color: C.gray1 }}>
            <a href="#dores" style={{ color: "inherit", textDecoration: "none" }}>Dores</a>
            <a href="#servicos" style={{ color: "inherit", textDecoration: "none" }}>Serviços</a>
            <a href="#metodo" style={{ color: "inherit", textDecoration: "none" }}>Método</a>
            <a href="#resultados" style={{ color: "inherit", textDecoration: "none" }}>Resultados</a>
            <a href="#faq" style={{ color: "inherit", textDecoration: "none" }}>FAQ</a>
          </nav>
        )}
        <button onClick={onOpenForm} style={{
          ...primaryBtn({ small: true }),
          fontSize: isMobile ? 12 : 13,
          padding: isMobile ? "8px 14px" : "9px 18px",
        }}>Diagnóstico grátis</button>
      </div>
    </header>
  );
}

// ————— Buttons —————
function primaryBtn({ small } = {}) {
  return {
    fontFamily: C.fDisp, fontSize: small ? 13 : 15, fontWeight: 600, color: C.bg,
    background: C.lime, border: "none", borderRadius: 999,
    padding: small ? "9px 18px" : "14px 28px", cursor: "pointer",
    transition: "transform .15s, background .2s",
    boxShadow: "0 6px 24px rgba(201,243,29,0.18)",
  };
}
function ghostBtn() {
  return {
    fontFamily: C.fBody, fontSize: 14, fontWeight: 500, color: C.white,
    background: "transparent", border: `1px solid ${C.borderH}`, borderRadius: 999,
    padding: "12px 22px", cursor: "pointer",
  };
}

// ————— HERO —————
function Hero({ heroBg, onOpenForm }) {
  const bgVariants = {
    dark: { background: C.bg },
    limeburst: {
      background: `
        radial-gradient(ellipse 80% 60% at 85% 20%, rgba(201,243,29,0.22), transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 90%, rgba(201,243,29,0.10), transparent 60%),
        ${C.bg}`,
    },
    gradient: {
      background: `linear-gradient(145deg, #0F1605 0%, #1A1A1A 45%, #101010 100%)`,
    },
  };
  const isMobile = useIsMobile();
  return (
    <section data-screen-label="01 Hero" style={{
      position: "relative", overflow: "hidden",
      ...bgVariants[heroBg],
      borderBottom: `1px solid ${C.border}`,
    }}>
      {/* Grid pattern */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.4,
        backgroundImage:
          `linear-gradient(${C.border} 1px, transparent 1px), linear-gradient(90deg, ${C.border} 1px, transparent 1px)`,
        backgroundSize: "56px 56px",
        maskImage: "radial-gradient(ellipse 70% 80% at 50% 30%, black 40%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse 70% 80% at 50% 30%, black 40%, transparent 80%)",
      }} />
      <div style={{
        position: "relative", maxWidth: 1280, margin: "0 auto",
        padding: isMobile ? "64px 20px 56px" : "96px 32px 112px",
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "1.3fr 1fr",
        gap: isMobile ? 40 : 64,
        alignItems: "center",
      }}>
        <div style={{ textAlign: isMobile ? "center" : "left" }}>
          <div style={{ display: "flex", justifyContent: isMobile ? "center" : "flex-start", alignItems: "center", gap: 8, marginBottom: 24 }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              fontFamily: C.fBody, fontSize: 12, fontWeight: 600, color: C.lime,
              background: C.limeM, border: `1px solid ${C.limeB}`,
              padding: "5px 12px", borderRadius: 999, textTransform: "uppercase", letterSpacing: "0.08em",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: C.lime, boxShadow: `0 0 10px ${C.lime}` }} />
              Marketing para Provedores de Internet
            </span>
          </div>
          <h1 style={{
            fontFamily: C.fDisp,
            fontSize: isMobile ? 38 : 64,
            fontWeight: 800, color: C.white,
            margin: 0, letterSpacing: "-0.035em",
            lineHeight: isMobile ? 1.05 : 0.98,
            textTransform: "uppercase",
          }}>
            Seu CAC<br />
            sobe. Suas<br />
            vendas, <span style={{ color: C.lime }}>não.</span>
          </h1>
          <p style={{
            fontFamily: C.fBody, fontSize: isMobile ? 16 : 18, color: C.gray1, lineHeight: 1.55,
            margin: "20px 0", maxWidth: isMobile ? "100%" : 560,
          }}>
            Enquanto um de nossos clientes investe R$ 300 no seu bairro, você queima verba em anúncios que trazem curioso.{" "}
            <strong style={{ color: C.white }}>Paramos essa sangria.</strong>{" "}
            Tráfego geo-segmentado, IA no WhatsApp e método que fatura, não que enrola.
          </p>
          <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", gap: 12, marginTop: 32, flexWrap: "wrap", alignItems: isMobile ? "center" : "flex-start" }}>
            <button onClick={onOpenForm} style={{ ...primaryBtn(), width: isMobile ? "100%" : "auto" }}>
              Quero o diagnóstico grátis →
            </button>
            <a href="#dores" style={{ ...ghostBtn(), textDecoration: "none", display: "inline-flex", alignItems: "center", width: isMobile ? "100%" : "auto", justifyContent: "center" }}>
              Ver onde estou queimando dinheiro ↓
            </a>
          </div>
          <div style={{ marginTop: 36, display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap", justifyContent: isMobile ? "center" : "flex-start" }}>
            <div style={{ display: "flex", alignItems: "center" }}>
              {["#1A1A1A", "#333", "#444", "#222"].map((bg, i) => (
                <div key={i} style={{
                  width: 32, height: 32, borderRadius: "50%",
                  background: bg, border: `2px solid ${C.bg}`,
                  marginLeft: i === 0 ? 0 : -10,
                  display: "grid", placeItems: "center",
                  fontFamily: C.fDisp, fontSize: 11, fontWeight: 700, color: C.lime,
                }}>{["WN", "LR", "CP", "MS"][i]}</div>
              ))}
            </div>
            <div style={{ textAlign: isMobile ? "center" : "left" }}>
              <div style={{ color: "#F59E0B", fontSize: 14, letterSpacing: 2 }}>★★★★★</div>
              <div style={{ fontFamily: C.fBody, fontSize: 12, color: C.gray1, marginTop: 2 }}>
                +40 donos de ISP confiaram no método
              </div>
            </div>
          </div>
        </div>

        {/* Right card: visual proof / stats — hide on mobile */}
        {!isMobile && <HeroRightCard />}
      </div>
    </section>
  );
}

function FadeIn({ delay = 0, y = 10, blur = 8, children, style, className }) {
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setShown(true); return; }
    const t = setTimeout(() => setShown(true), delay);
    return () => clearTimeout(t);
  }, [delay]);
  return (
    <div className={className} style={{
      ...style,
      opacity: shown ? 1 : 0,
      filter: shown ? "blur(0px)" : `blur(${blur}px)`,
      transform: shown ? "translateY(0)" : `translateY(${y}px)`,
      transition: "opacity .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)",
      willChange: "opacity, filter, transform",
    }}>
      {children}
    </div>
  );
}

function HeroRightCard() {
  const [barsIn, setBarsIn] = React.useState(false);
  const [pulse, setPulse] = React.useState(0);

  React.useEffect(() => {
    const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setBarsIn(true); return; }
    const t = setTimeout(() => setBarsIn(true), 900);
    return () => clearTimeout(t);
  }, []);

  // Subtle repeating pulse on the "+48%" badge, staggered
  React.useEffect(() => {
    const id = setInterval(() => setPulse(p => p + 1), 3800);
    return () => clearInterval(id);
  }, []);

  const bars = [22, 35, 28, 48, 40, 62, 70, 55, 82, 75, 95, 128];

  return (
    <FadeIn delay={120} y={18} blur={14} style={{ position: "relative" }}>
      <div style={{
        position: "relative", background: C.bg2, borderRadius: 20,
        border: `1px solid ${C.border}`, overflow: "hidden",
        boxShadow: "0 40px 80px rgba(0,0,0,0.5)",
      }}>
        {/* Fake dashboard header */}
        <FadeIn delay={280} y={6} blur={6}>
          <div style={{
            padding: "14px 18px", borderBottom: `1px solid ${C.border}`,
            display: "flex", alignItems: "center", gap: 10, background: C.bg3,
          }}>
            <div style={{ display: "flex", gap: 5 }}>
              <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#3A3A3A" }} />
              <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#3A3A3A" }} />
              <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#3A3A3A" }} />
            </div>
            <span style={{ fontFamily: C.fBody, fontSize: 11, color: C.gray2, letterSpacing: "0.05em" }}>
              painel.dalmada.com / isp
            </span>
          </div>
        </FadeIn>

        <div style={{ padding: 20 }}>
          <FadeIn delay={420} y={6} blur={5}>
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14,
            }}>
              <span style={{ fontFamily: C.fBody, fontSize: 11, fontWeight: 600, color: C.gray1, textTransform: "uppercase", letterSpacing: "0.08em" }}>
                Últimos 90 dias
              </span>
              <span style={{
                fontFamily: C.fBody, fontSize: 10, fontWeight: 600, color: C.success,
                background: "rgba(34,197,94,0.1)", padding: "3px 8px", borderRadius: 999,
                display: "inline-flex", alignItems: "center", gap: 5,
              }}>
                <span style={{
                  width: 6, height: 6, borderRadius: "50%", background: C.success,
                  animation: "livePulse 1.6s ease-out infinite",
                }} />
                AO VIVO
              </span>
            </div>
          </FadeIn>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 14 }}>
            <FadeIn delay={560} y={10} blur={8}><StatTile big="−38%" label="CAC" tone={C.lime} /></FadeIn>
            <FadeIn delay={680} y={10} blur={8}><StatTile big="+214%" label="Ativações" tone={C.lime} /></FadeIn>
          </div>

          {/* Fake bar chart */}
          <FadeIn delay={820} y={12} blur={8}>
            <div style={{
              background: C.bg3, border: `1px solid ${C.border}`,
              borderRadius: 12, padding: 14,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                <span style={{ fontFamily: C.fBody, fontSize: 11, color: C.gray1 }}>Leads qualificados / semana</span>
                <span style={{ fontFamily: C.fDisp, fontSize: 13, fontWeight: 700, color: C.white }}>128</span>
              </div>
              <div style={{ display: "flex", gap: 4, alignItems: "flex-end", height: 72 }}>
                {bars.map((v, i) => (
                  <div key={i} style={{
                    flex: 1,
                    height: barsIn ? `${(v / 128) * 100}%` : "4%",
                    background: i === 11 ? C.lime : C.elevated,
                    borderRadius: 3,
                    opacity: barsIn ? 1 : 0.3,
                    filter: barsIn ? "blur(0)" : "blur(4px)",
                    transition: `height .9s cubic-bezier(.2,.8,.2,1) ${i * 55}ms, opacity .6s ease ${i * 55}ms, filter .6s ease ${i * 55}ms`,
                    boxShadow: i === 11 && barsIn ? `0 0 14px ${C.limeM}` : "none",
                  }} />
                ))}
              </div>
            </div>
          </FadeIn>

          {/* WhatsApp line */}
          <FadeIn delay={1500} y={10} blur={8}>
            <div style={{
              marginTop: 14, padding: "12px 14px", background: C.bg3,
              border: `1px solid ${C.limeB}`, borderRadius: 12,
              display: "flex", alignItems: "center", gap: 10,
              position: "relative", overflow: "hidden",
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: "50%", background: "rgba(37,211,102,0.15)",
                display: "grid", placeItems: "center", color: "#25D366", fontWeight: 700, fontSize: 16,
                animation: "waPulse 2.4s ease-out infinite",
              }}>●</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: C.fBody, fontSize: 12, fontWeight: 600, color: C.white }}>
                  IA qualificou 47 leads hoje
                </div>
                <div style={{ fontFamily: C.fBody, fontSize: 11, color: C.gray1 }}>
                  23 viraram venda · tempo médio: 4min
                </div>
              </div>
              <span key={pulse} style={{
                fontFamily: C.fDisp, fontSize: 11, fontWeight: 700, color: C.lime,
                background: C.limeM, padding: "4px 10px", borderRadius: 999,
                animation: "badgePop .6s cubic-bezier(.2,.8,.2,1)",
              }}>+48%</span>
            </div>
          </FadeIn>
        </div>
      </div>
      {/* Floating badge */}
      <FadeIn delay={1800} y={-8} blur={10}>
        <div style={{
          position: "absolute", top: -14, right: -14,
          fontFamily: C.fDisp, fontSize: 11, fontWeight: 700, color: C.bg,
          background: C.lime, padding: "6px 12px", borderRadius: 999,
          textTransform: "uppercase", letterSpacing: "0.08em",
          boxShadow: "0 8px 24px rgba(201,243,29,0.3)",
          transform: "rotate(4deg)",
          animation: "floatY 4.5s ease-in-out infinite",
        }}>Caso real · Provedor SC</div>
      </FadeIn>
    </FadeIn>
  );
}

function StatTile({ big, label, tone }) {
  return (
    <div style={{
      background: C.bg3, border: `1px solid ${C.border}`,
      borderRadius: 12, padding: "14px 16px",
    }}>
      <div style={{ fontFamily: C.fDisp, fontSize: 26, fontWeight: 800, color: tone, letterSpacing: "-0.02em" }}>{big}</div>
      <div style={{ fontFamily: C.fBody, fontSize: 11, color: C.gray1, textTransform: "uppercase", letterSpacing: "0.08em", marginTop: 2 }}>{label}</div>
    </div>
  );
}

// ————— DORES (Checklist) —————
function Dores({ onOpenForm }) {
  const isMobile = useIsMobile();
  const dores = [
    { t: "CAC mais alto que a mensalidade de 2 meses", d: "Você paga R$ 180 para conquistar um cliente que fatura R$ 89/mês. A conta não fecha." },
    { t: "Big telco entrou na sua área e levou seus clientes", d: "Promoção agressiva, fibra nova, e você sem resposta comercial rápida." },
    { t: "Agência genérica te vende curtida, não assinante", d: "Relatório bonito, planilha cheia, mas o técnico não instala ninguém novo." },
    { t: "Tráfego pago que traz gente sem dinheiro ou fora da área", d: "Verba queimada em clique que nunca vira venda. Cobertura ignorada." },
    { t: "Atendimento comercial demora 40 minutos pra responder", d: "Lead já fechou com o concorrente. Você nem sabia que ele existia." },
    { t: "Churn comendo sua base silenciosamente", d: "Ninguém reativa cancelado, ninguém ouve queixa. Cada mês menos assinante." },
  ];
  return (
    <section id="dores" data-screen-label="02 Dores" style={{
      background: C.bg,
      padding: isMobile ? "72px 20px" : "112px 32px",
      borderBottom: `1px solid ${C.border}`,
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <SectionLabel center={isMobile}>Seu dia a dia, sem filtro</SectionLabel>
        <h2 style={{ ...h2Style, textAlign: isMobile ? "center" : "left" }}>Você se reconhece em<br />quantas destas?</h2>
        <p style={{
          fontFamily: C.fBody, fontSize: isMobile ? 15 : 17, color: C.gray1, lineHeight: 1.55,
          maxWidth: 620, marginTop: 16,
          textAlign: isMobile ? "center" : "left",
          margin: isMobile ? "16px auto 0" : "16px 0 0",
        }}>
          Se marcou <strong style={{ color: C.lime }}>3 ou mais</strong>, você está pagando caro pra crescer devagar.
          É aí que o método entra.
        </p>

        <div style={{
          marginTop: isMobile ? 36 : 56,
          display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 14,
        }}>
          {dores.map((d, i) => (
            <label key={i} style={{
              display: "flex", alignItems: "flex-start", gap: 16,
              padding: "22px 24px", background: C.bg2,
              border: `1px solid ${C.border}`, borderRadius: 14,
              cursor: "pointer", transition: "all .2s",
              position: "relative", overflow: "hidden",
            }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = C.limeB;
                e.currentTarget.querySelector('.chk').style.background = C.lime;
                e.currentTarget.querySelector('.chk').style.borderColor = C.lime;
                e.currentTarget.querySelector('.chkI').style.opacity = 1;
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = C.border;
                e.currentTarget.querySelector('.chk').style.background = "transparent";
                e.currentTarget.querySelector('.chk').style.borderColor = C.borderH;
                e.currentTarget.querySelector('.chkI').style.opacity = 0;
              }}
            >
              <div className="chk" style={{
                width: 22, height: 22, borderRadius: 6, flexShrink: 0, marginTop: 2,
                border: `1.5px solid ${C.borderH}`, background: "transparent",
                display: "grid", placeItems: "center", transition: "all .2s",
              }}>
                <svg className="chkI" width="12" height="12" viewBox="0 0 12 12" style={{ opacity: 0, transition: "opacity .2s" }}>
                  <path d="M2 6l3 3 5-6" stroke={C.bg} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div>
                <div style={{ fontFamily: C.fDisp, fontSize: 16, fontWeight: 600, color: C.white, lineHeight: 1.3 }}>{d.t}</div>
                <div style={{ fontFamily: C.fBody, fontSize: 14, color: C.gray1, lineHeight: 1.5, marginTop: 6 }}>{d.d}</div>
              </div>
            </label>
          ))}
        </div>

        <div style={{
          marginTop: isMobile ? 32 : 56,
          padding: isMobile ? "24px 20px" : "28px 32px",
          background: `linear-gradient(135deg, ${C.bg2} 0%, #1A2A10 100%)`,
          border: `1px solid ${C.limeB}`, borderRadius: 18,
          display: "flex", flexDirection: isMobile ? "column" : "row",
          gap: isMobile ? 16 : 24,
          alignItems: isMobile ? "flex-start" : "center",
          justifyContent: "space-between", flexWrap: "wrap",
        }}>
          <div>
            <div style={{ fontFamily: C.fDisp, fontSize: isMobile ? 18 : 22, fontWeight: 700, color: C.white, textTransform: "uppercase", letterSpacing: "-0.01em" }}>
              Chega de diagnóstico. Bora pro remédio.
            </div>
            <div style={{ fontFamily: C.fBody, fontSize: 14, color: C.gray1, marginTop: 6 }}>
              Diagnóstico gratuito da sua operação. Sem script de vendas.
            </div>
          </div>
          <button onClick={onOpenForm} style={{ ...primaryBtn(), width: isMobile ? "100%" : "auto" }}>Quero o diagnóstico →</button>
        </div>
      </div>
    </section>
  );
}

// ————— SERVICOS / PILARES —————
function Servicos() {
  const isMobile = useIsMobile();
  const items = [
    {
      n: "01", label: "Tráfego geo",
      title: "TRÁFEGO POR CEP",
      desc: "Anúncio só pra quem mora onde sua fibra passa. Zero clique de fora de área.",
      tags: ["Google Ads", "Meta Ads", "Geo-fencing", "CEP"],
      tone: "default",
    },
    {
      n: "02", label: "IA Comercial",
      title: "IA + WHATSAPP",
      desc: "Atende, qualifica e já oferece o plano certo. 24h, sem folga, sem perder lead.",
      tags: ["WhatsApp", "Qualificação", "CRM", "Oferta"],
      tone: "featured",
    },
    {
      n: "03", label: "Retenção",
      title: "ANTI-CHURN",
      desc: "Reativação de cancelado e blindagem contra a big telco com campanha de retenção.",
      tags: ["Reativação", "NPS", "Upsell"],
      tone: "default",
    },
  ];
  return (
    <section id="servicos" data-screen-label="03 Serviços" style={{
      background: C.bg3,
      padding: isMobile ? "72px 20px" : "112px 32px",
      borderBottom: `1px solid ${C.border}`,
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionLabel center={isMobile}>O que fazemos no seu provedor</SectionLabel>
        <h2 style={{ ...h2Style, textAlign: isMobile ? "center" : "left" }}>Três alavancas.<br />Um <span style={{ color: C.lime }}>CAC menor.</span></h2>
        <p style={{
          fontFamily: C.fBody, fontSize: isMobile ? 15 : 17, color: C.gray1, lineHeight: 1.55,
          maxWidth: 620, marginTop: 16,
          textAlign: isMobile ? "center" : "left",
          margin: isMobile ? "16px auto 0" : "16px 0 0",
        }}>
          Sem pacote genérico. Sem "SEO institucional". Cada serviço existe pra puxar uma alavanca específica no P&L do provedor.
        </p>

        <div style={{
          marginTop: isMobile ? 36 : 56,
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
          gap: isMobile ? 14 : 20,
        }}>
          {items.map((s, i) => (
            <div key={i} style={{
              position: "relative",
              background: s.tone === "featured" ? `linear-gradient(180deg, ${C.bg2} 0%, #1A2010 100%)` : C.bg2,
              border: `1px solid ${s.tone === "featured" ? C.limeB : C.border}`,
              borderRadius: 18, padding: 28, overflow: "hidden",
              transition: "transform .2s, border-color .2s",
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; }}
            >
              {s.tone === "featured" && (
                <span style={{
                  position: "absolute", top: 20, right: 20,
                  fontFamily: C.fBody, fontSize: 10, fontWeight: 600, color: C.bg,
                  background: C.lime, padding: "4px 10px", borderRadius: 999,
                  textTransform: "uppercase", letterSpacing: "0.08em",
                }}>Carro-chefe</span>
              )}
              <div style={{
                fontFamily: C.fDisp, fontSize: 56, fontWeight: 800, color: C.lime,
                opacity: 0.18, lineHeight: 0.9, letterSpacing: "-0.05em",
              }}>{s.n}</div>
              <div style={{
                fontFamily: C.fBody, fontSize: 11, fontWeight: 600, color: C.lime,
                textTransform: "uppercase", letterSpacing: "0.08em", marginTop: 16,
              }}>{s.label}</div>
              <h3 style={{
                fontFamily: C.fDisp, fontSize: 26, fontWeight: 700, color: C.white,
                margin: "8px 0 12px", letterSpacing: "-0.02em",
              }}>{s.title}</h3>
              <p style={{
                fontFamily: C.fBody, fontSize: 14.5, color: C.gray1, lineHeight: 1.55, margin: 0,
              }}>{s.desc}</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 20 }}>
                {s.tags.map((t, j) => (
                  <span key={j} style={{
                    fontFamily: C.fBody, fontSize: 11, color: C.gray1,
                    background: C.bg, border: `1px solid ${C.border}`,
                    padding: "4px 10px", borderRadius: 999,
                  }}>{t}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ————— METODO —————
function Metodo() {
  const isMobile = useIsMobile();
  const steps = [
    { n: "01", t: "Diagnóstico cru", d: "Mergulhamos no seu P&L, cobertura, CAC real, churn, tempo médio de atendimento. 60 min, zero achismo." },
    { n: "02", t: "Plano de batalha", d: "Canais certos por bairro, script de WhatsApp, IA treinada no seu plano, meta semanal clara." },
    { n: "03", t: "Execução diária", d: "Anúncio, IA e time comercial rodando. Otimização semanal. Relatório que o dono entende." },
    { n: "04", t: "Escala e retenção", d: "CAC caindo, LTV subindo, churn domado. Só então a gente pensa em expandir pra novo bairro." },
  ];
  return (
    <section id="metodo" data-screen-label="04 Método" style={{
      background: C.bg,
      padding: isMobile ? "72px 20px" : "112px 32px",
      borderBottom: `1px solid ${C.border}`,
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <SectionLabel center={isMobile}>Método D'Almada para ISPs</SectionLabel>
        <h2 style={{ ...h2Style, textAlign: isMobile ? "center" : "left" }}>Do diagnóstico<br />ao CAC previsível.</h2>

        <div style={{ marginTop: isMobile ? 36 : 56, display: "grid", gap: 14 }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: isMobile ? "56px 1fr" : "120px 1fr auto",
              gap: isMobile ? 14 : 24,
              alignItems: "center",
              padding: isMobile ? "18px 16px" : "24px 28px",
              background: C.bg2, border: `1px solid ${C.border}`,
              borderLeft: `3px solid ${C.lime}`, borderRadius: 14,
            }}>
              <span style={{
                fontFamily: C.fDisp,
                fontSize: isMobile ? 36 : 56,
                fontWeight: 800, color: C.lime,
                opacity: 0.3, lineHeight: 0.9, letterSpacing: "-0.05em",
              }}>{s.n}</span>
              <div>
                <h4 style={{
                  fontFamily: C.fDisp,
                  fontSize: isMobile ? 16 : 20,
                  fontWeight: 700, color: C.white, margin: 0,
                  letterSpacing: "-0.01em",
                }}>{s.t}</h4>
                <p style={{
                  fontFamily: C.fBody,
                  fontSize: isMobile ? 13 : 14.5,
                  color: C.gray1,
                  margin: "6px 0 0", lineHeight: 1.55,
                }}>{s.d}</p>
              </div>
              {!isMobile && (
                <div style={{
                  fontFamily: C.fBody, fontSize: 11, fontWeight: 600, color: C.gray2,
                  textTransform: "uppercase", letterSpacing: "0.08em",
                }}>{i === 0 ? "Semana 1" : i === 1 ? "Semana 2" : i === 2 ? "Mês 1-3" : "Mês 3+"}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ————— RESULTADOS —————
function Resultados() {
  const isMobile = useIsMobile();
  const stats = [
    { n: "−38%", l: "CAC médio" },
    { n: "+214%", l: "Ativações/mês" },
    { n: "−47%", l: "Churn voluntário" },
    { n: "4 min", l: "Resposta no WPP" },
  ];
  return (
    <section id="resultados" data-screen-label="05 Resultados" style={{
      background: C.bg3,
      padding: isMobile ? "72px 20px" : "112px 32px",
      borderBottom: `1px solid ${C.border}`,
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <SectionLabel center={isMobile}>Resultados que cabem no P&L</SectionLabel>
        <h2 style={{ ...h2Style, textAlign: isMobile ? "center" : "left" }}>Números de provedor.<br />Não de agência.</h2>

        <div style={{
          marginTop: isMobile ? 36 : 56,
          display: "grid",
          gridTemplateColumns: isMobile ? "repeat(2,1fr)" : "repeat(4, 1fr)",
          gap: 14,
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: "36px 24px", background: C.bg2, borderRadius: 14,
              border: `1px solid ${C.border}`, textAlign: "center",
              position: "relative", overflow: "hidden",
            }}>
              <div style={{
                fontFamily: C.fDisp, fontSize: 56, fontWeight: 800, color: C.lime,
                letterSpacing: "-0.04em", lineHeight: 1,
              }}>{s.n}</div>
              <div style={{
                fontFamily: C.fBody, fontSize: 13, color: C.gray1, marginTop: 10,
                textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500,
              }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{
          fontFamily: C.fBody, fontSize: 12, color: C.gray2, textAlign: "center",
          marginTop: 24, letterSpacing: "0.05em",
        }}>
          Média dos 12 provedores ativos na carteira · últimos 6 meses
        </div>
      </div>
    </section>
  );
}

// ————— DEPOIMENTOS —————
function Depoimentos() {
  const isMobile = useIsMobile();
  const items = [
    {
      stars: 5, ini: "MS", n: "Marcos Silveira",
      base: "3.2k assinantes",
      q: "Em 90 dias o CAC caiu pela metade. A IA no WhatsApp responde às 23h e eu descubro cliente novo no relatório da manhã. Outro patamar.",
    },
    {
      stars: 5, ini: "LR", n: "Luciana Reis",
      base: "1.8k assinantes",
      q: "Fiquei 8 meses tentando crescer com agência genérica. Em 45 dias com o método deles, meu time comercial estava respondendo lead em menos de 5 minutos e as ativações triplicaram. Não troco mais.",
    },
    {
      stars: 5, ini: "CP", n: "Carlos Pedroso",
      base: "5.4k assinantes",
      q: "Cansei de agência que vende 'presença digital'. Esses caras falam a língua do provedor: plano, bairro, cobertura, ticket médio. Faturei mais em 6 meses que no ano anterior.",
    },
  ];
  return (
    <section id="depoimentos" data-screen-label="06 Depoimentos" style={{
      background: C.bg,
      padding: isMobile ? "72px 20px" : "112px 32px",
      borderBottom: `1px solid ${C.border}`,
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionLabel center={isMobile}>Donos de ISP falando</SectionLabel>
        <h2 style={{ ...h2Style, textAlign: isMobile ? "center" : "left" }}>Quem já trocou<br />agência bonita por<br />agência que entrega.</h2>

        <div style={{
          marginTop: isMobile ? 36 : 56,
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
          gap: isMobile ? 16 : 20,
        }}>
          {items.map((t, i) => (
            <div key={i} style={{
              background: C.bg2, border: `1px solid ${C.border}`,
              borderRadius: 18, padding: 28, display: "flex", flexDirection: "column",
              position: "relative",
            }}>
              <svg width="32" height="26" viewBox="0 0 32 26" style={{ position: "absolute", top: 22, right: 22, opacity: 0.15 }}>
                <path d="M0 26V14C0 6.3 4.3 0 12 0v6c-4 0-6 3-6 8h6v12H0zm18 0V14c0-7.7 4.3-14 12-14v6c-4 0-6 3-6 8h6v12H18z" fill={C.lime} />
              </svg>
              <div style={{ color: "#F59E0B", fontSize: 14, letterSpacing: 2, marginBottom: 16 }}>{"★".repeat(t.stars)}</div>
              <p style={{
                fontFamily: C.fBody, fontSize: 15, color: C.white, lineHeight: 1.6,
                margin: "0 0 24px", flex: 1,
              }}>"{t.q}"</p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 20, borderTop: `1px solid ${C.border}` }}>
                <div style={{
                  width: 42, height: 42, borderRadius: "50%", background: C.limeM,
                  border: `1px solid ${C.limeB}`, display: "grid", placeItems: "center",
                  fontFamily: C.fDisp, fontWeight: 700, fontSize: 14, color: C.lime,
                }}>{t.ini}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: C.fBody, fontSize: 13, fontWeight: 600, color: C.white }}>{t.n}</div>
                  <div style={{ fontFamily: C.fBody, fontSize: 12, color: C.gray2 }}>{t.r}</div>
                </div>
                <span style={{
                  fontFamily: C.fBody, fontSize: 10, fontWeight: 600, color: C.lime,
                  background: C.limeM, border: `1px solid ${C.limeB}`,
                  padding: "3px 8px", borderRadius: 999, textTransform: "uppercase", letterSpacing: "0.05em",
                }}>{t.base}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ————— FAQ —————
function FAQ() {
  const isMobile = useIsMobile();
  const [open, setOpen] = React.useState(0);
  const qs = [
    { q: "Atendem provedor com quantos assinantes?", a: "A partir de 500 assinantes. Abaixo disso, o método ainda não cabe no seu caixa — e a gente fala isso de cara." },
    { q: "Quanto custa?", a: "Investimento fechado só depois do diagnóstico. Varia com tamanho da base, cobertura e canais. O diagnóstico em si é gratuito e sem compromisso." },
    { q: "Em quanto tempo vejo resultado?", a: "Primeira queda de CAC perceptível em 30-45 dias. Resultado estruturado (CAC + churn + ativações) em 90 dias." },
    { q: "Vocês trabalham com exclusividade por região?", a: "Sim. Só atendemos um ISP por microrregião. Se seu concorrente te procurou antes, a gente recusa." },
    { q: "Preciso trocar minha agência atual?", a: "Não necessariamente. A gente entra no comercial e tráfego; se sua agência cuida só de redes orgânicas e branding, fica." },
    { q: "Vocês instalam IA no meu WhatsApp oficial?", a: "Sim. WhatsApp Business API, integrado ao seu CRM ou ao que a gente recomenda. Zero gambiarra." },
  ];
  return (
    <section id="faq" data-screen-label="07 FAQ" style={{
      background: C.bg3,
      padding: isMobile ? "72px 20px" : "112px 32px",
      borderBottom: `1px solid ${C.border}`,
    }}>
      <div style={{ maxWidth: 820, margin: "0 auto" }}>
        <SectionLabel center={isMobile}>Dúvidas reais de quem está na dúvida</SectionLabel>
        <h2 style={{ ...h2Style, textAlign: isMobile ? "center" : "left" }}>Perguntas sem<br />rodeio.</h2>

        <div style={{ marginTop: isMobile ? 32 : 48, display: "grid", gap: 10 }}>
          {qs.map((item, i) => {
            const isOpen = open === i;
            return (
              <button key={i} onClick={() => setOpen(isOpen ? -1 : i)} style={{
                textAlign: "left", background: isOpen ? C.bg2 : C.bg2,
                border: `1px solid ${isOpen ? C.limeB : C.border}`,
                borderRadius: 14,
                padding: isMobile ? "18px 18px" : "22px 26px",
                cursor: "pointer",
                transition: "border-color .2s, background .2s",
                fontFamily: C.fBody, color: C.white,
              }}>
                <div style={{
                  display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
                }}>
                  <span style={{ fontFamily: C.fDisp, fontSize: isMobile ? 14 : 17, fontWeight: 600, color: C.white }}>
                    {item.q}
                  </span>
                  <span style={{
                    width: 28, height: 28, borderRadius: "50%",
                    background: isOpen ? C.lime : C.bg3,
                    color: isOpen ? C.bg : C.lime,
                    display: "grid", placeItems: "center",
                    fontSize: 18, fontWeight: 700, flexShrink: 0,
                    border: `1px solid ${isOpen ? C.lime : C.border}`,
                    transition: "all .2s",
                  }}>{isOpen ? "−" : "+"}</span>
                </div>
                {isOpen && (
                  <p style={{
                    fontFamily: C.fBody, fontSize: 14.5, color: C.gray1,
                    margin: "14px 0 0", lineHeight: 1.6,
                  }}>{item.a}</p>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ————— CTA FINAL —————
function CTAFinal({ onOpenForm }) {
  const isMobile = useIsMobile();
  return (
    <section data-screen-label="08 CTA Final" style={{
      padding: isMobile ? "72px 20px" : "120px 32px",
      position: "relative", overflow: "hidden",
      background: `
        radial-gradient(ellipse 60% 100% at 50% 100%, rgba(201,243,29,0.22), transparent 70%),
        ${C.bg}`,
      borderBottom: `1px solid ${C.border}`,
    }}>
      <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center", position: "relative" }}>
        <SectionLabel center>Pronto pra parar de queimar verba?</SectionLabel>
        <h2 style={{ ...h2Style, fontSize: isMobile ? 34 : 56, textAlign: "center", margin: "16px auto 0" }}>
          Diagnóstico <span style={{ color: C.lime }}>grátis.</span><br />
          Sem script de vendas.
        </h2>
        <p style={{
          fontFamily: C.fBody, fontSize: isMobile ? 15 : 18, color: C.gray1, lineHeight: 1.55,
          maxWidth: 560, margin: "20px auto 0",
        }}>
          60 minutos com o time. Saímos com um plano de ação claro — você decide se contrata depois.
        </p>
        <div style={{ marginTop: 32, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <button onClick={onOpenForm} style={{
            ...primaryBtn(),
            fontSize: isMobile ? 15 : 16,
            padding: isMobile ? "14px 28px" : "16px 36px",
            width: isMobile ? "100%" : "auto",
          }}>
            Agendar diagnóstico →
          </button>
        </div>
        <div style={{
          marginTop: 28, display: "flex", gap: 24, justifyContent: "center", flexWrap: "wrap",
          fontFamily: C.fBody, fontSize: 13, color: C.gray2,
        }}>
          <span>✓ Sem compromisso</span>
          <span>✓ Sem script de vendas</span>
          <span>✓ 1 ISP por microrregião</span>
        </div>
      </div>
    </section>
  );
}

// ————— FOOTER —————
function Footer() {
  const isMobile = useIsMobile();
  return (
    <footer style={{ background: C.bg, padding: isMobile ? "36px 20px 28px" : "48px 32px 32px" }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        display: "flex",
        flexDirection: isMobile ? "column" : "row",
        justifyContent: isMobile ? "center" : "space-between",
        alignItems: "center",
        gap: isMobile ? 12 : 24,
        textAlign: isMobile ? "center" : "left",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <LogoMark size={isMobile ? 22 : 26} />
        </div>
        <div style={{ fontFamily: C.fBody, fontSize: 12, color: C.gray2 }}>
          © 2026 D'Almada Marketing · Marketing digital para provedores de internet
        </div>
      </div>
    </footer>
  );
}

// ————— POPUP FORM —————
function getUtms() {
  const p = new URLSearchParams(window.location.search);
  return {
    utm_source: p.get("utm_source") || "",
    utm_medium: p.get("utm_medium") || "",
    utm_campaign: p.get("utm_campaign") || "",
    utm_content: p.get("utm_content") || "",
    utm_term: p.get("utm_term") || "",
  };
}

function LeadPopup({ open, onClose }) {
  const [form, setForm] = React.useState({ nome: "", whatsapp: "", email: "", provedor: "" });
  const [utms] = React.useState(getUtms);
  const [sent, setSent] = React.useState(false);
  const [errors, setErrors] = React.useState({});

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

  if (!open) return null;

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.nome.trim()) er.nome = "Informe seu nome";
    if (!/^[\d\s()+-]{10,}$/.test(form.whatsapp.trim())) er.whatsapp = "WhatsApp inválido";
    if (!/^\S+@\S+\.\S+$/.test(form.email)) er.email = "Email inválido";
    if (!form.provedor.trim()) er.provedor = "Informe o nome do provedor";
    setErrors(er);
    if (Object.keys(er).length) return;
    setSent(true);
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: "lead_form_submit", ...form, ...utms });
    const payload = { ...form, ...utms };
    fetch("https://n8n.dalmada.com/webhook/provedor", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    }).catch(() => { });
    const msg = encodeURIComponent(`Olá tudo bem? Meu nome é ${form.nome.trim()} e gostaria de um diagnóstico para ${form.provedor.trim()}`);
    window.open(`https://wa.me/5511971254637?text=${msg}`, "_blank");
  };

  const fmtWpp = (v) => {
    const d = v.replace(/\D/g, "").slice(0, 11);
    if (d.length <= 2) return d;
    if (d.length <= 7) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
    return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
  };

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "rgba(0,0,0,0.75)", backdropFilter: "blur(6px)",
        display: "grid", placeItems: "center", padding: 20,
        animation: "fadeIn .2s ease",
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          width: "100%", maxWidth: 520, position: "relative",
          background: C.bg2, border: `1px solid ${C.limeB}`,
          borderRadius: 20, padding: 36, overflow: "hidden",
          boxShadow: "0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,243,29,0.1)",
          animation: "slideUp .3s cubic-bezier(.2,.8,.2,1)",
        }}
      >
        {/* lime accent corner */}
        <div style={{
          position: "absolute", top: -60, right: -60, width: 180, height: 180,
          borderRadius: "50%",
          background: `radial-gradient(circle, ${C.limeM} 0%, transparent 70%)`,
          pointerEvents: "none",
        }} />

        <button onClick={onClose} style={{
          position: "absolute", top: 16, right: 16,
          width: 32, height: 32, borderRadius: "50%",
          background: C.bg3, border: `1px solid ${C.border}`,
          color: C.gray1, cursor: "pointer", fontSize: 18, lineHeight: 1,
          display: "grid", placeItems: "center",
        }} aria-label="Fechar">×</button>

        {!sent ? (
          <>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              fontFamily: C.fBody, fontSize: 11, fontWeight: 600, color: C.lime,
              background: C.limeM, border: `1px solid ${C.limeB}`,
              padding: "4px 10px", borderRadius: 999, textTransform: "uppercase", letterSpacing: "0.08em",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: C.lime }} />
              Diagnóstico gratuito
            </div>
            <h3 style={{
              fontFamily: C.fDisp, fontSize: 28, fontWeight: 800, color: C.white,
              margin: "14px 0 8px", letterSpacing: "-0.02em", lineHeight: 1.1,
              textTransform: "uppercase",
            }}>
              Uma conversa. Zero script.
            </h3>
            <p style={{
              fontFamily: C.fBody, fontSize: 14, color: C.gray1, margin: "0 0 24px", lineHeight: 1.5,
            }}>
              Nos conte o básico. Respondemos em até 4h em horário comercial com 3 horários disponíveis.
            </p>

            <form onSubmit={submit} style={{ display: "grid", gap: 14 }}>
              <Field label="Seu nome" value={form.nome} onChange={v => update("nome", v)} err={errors.nome} placeholder="Como devemos te chamar?" />
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <Field label="Telefone" value={form.whatsapp} onChange={v => update("whatsapp", fmtWpp(v))} err={errors.whatsapp} placeholder="(11) 98000-0000" />
                <Field label="Email" value={form.email} onChange={v => update("email", v)} err={errors.email} placeholder="voce@provedor.com.br" type="email" />
              </div>
              <Field label="Nome do provedor" value={form.provedor} onChange={v => update("provedor", v)} err={errors.provedor} placeholder="Ex: NetVale ISP" />

              <button type="submit" style={{ ...primaryBtn(), marginTop: 8, width: "100%", whiteSpace: "nowrap" }}>
                Quero o diagnóstico grátis →
              </button>
              <div style={{ fontFamily: C.fBody, fontSize: 11, color: C.gray2, textAlign: "center", lineHeight: 1.5 }}>
                Seus dados são usados apenas para contato. Sem spam, sem lista de newsletter.
              </div>
            </form>
          </>
        ) : (
          <div style={{ textAlign: "center", padding: "20px 0" }}>
            <div style={{
              width: 72, height: 72, borderRadius: "50%", background: C.lime,
              display: "grid", placeItems: "center", margin: "0 auto 20px",
            }}>
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M6 17l6 6 14-16" stroke={C.bg} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <h3 style={{
              fontFamily: C.fDisp, fontSize: 26, fontWeight: 800, color: C.white,
              margin: 0, letterSpacing: "-0.02em", textTransform: "uppercase",
            }}>Recebido, {form.nome.split(" ")[0]}.</h3>
            <p style={{
              fontFamily: C.fBody, fontSize: 15, color: C.gray1, margin: "12px 0 24px", lineHeight: 1.5,
            }}>
              Nosso especialista entrará em contato para tratar do diagnóstico para <strong style={{ color: C.white }}>{form.provedor}</strong> ele irá te chamar no WhatsApp nas próximas horas.
            </p>
            <button onClick={onClose} style={ghostBtn()}>Fechar</button>
          </div>
        )}
      </div>
    </div>
  );
}

function Field({ label, value, onChange, err, placeholder, type = "text" }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{
        fontFamily: C.fBody, fontSize: 11, fontWeight: 600, color: C.gray1,
        textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6,
      }}>{label}</div>
      <input
        type={type} value={value} onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          width: "100%", fontFamily: C.fBody, fontSize: 15, color: C.white,
          background: C.bg3, border: `1px solid ${err ? C.danger : C.border}`,
          borderRadius: 10, padding: "12px 14px", outline: "none",
          transition: "border-color .15s",
          boxSizing: "border-box",
        }}
        onFocus={e => { if (!err) e.currentTarget.style.borderColor = C.limeB; }}
        onBlur={e => { if (!err) e.currentTarget.style.borderColor = C.border; }}
      />
      {err && <div style={{ fontFamily: C.fBody, fontSize: 11, color: C.danger, marginTop: 4 }}>{err}</div>}
    </label>
  );
}

// ————— SHARED TITLE HELPERS —————
const h2Style = {
  fontFamily: C.fDisp, fontSize: 48, fontWeight: 800, color: C.white,
  margin: "14px 0 0", letterSpacing: "-0.03em", textTransform: "uppercase",
  lineHeight: 1.02,
};

function SectionLabel({ children, center }) {
  return (
    <div style={{ textAlign: center ? "center" : "left" }}>
      <span style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        fontFamily: C.fBody, fontSize: 12, fontWeight: 600, color: C.lime,
        textTransform: "uppercase", letterSpacing: "0.08em",
      }}>
        <span style={{ width: 18, height: 2, background: C.lime }} />
        {children}
      </span>
    </div>
  );
}

Object.assign(window, {
  Header, Hero, Dores, Servicos, Metodo, Resultados, Depoimentos, FAQ, CTAFinal, Footer, LeadPopup,
});
