// All landing page sections except the inbox mockup.

const features = [
  { icon: InboxIcon,    title: 'Caixa de entrada unificada',
    desc: 'Gerencie múltiplos números de WhatsApp e atendentes em um único painel intuitivo.' },
  { icon: BotIcon,      title: 'Chatbot e automação',
    desc: 'Crie fluxos automáticos de atendimento, qualifique leads e responda 24/7 sem precisar de código.' },
  { icon: MegaphoneIcon,title: 'Campanhas em massa',
    desc: 'Dispare mensagens personalizadas para toda a sua base de contatos com poucos cliques.' },
  { icon: ChartIcon,    title: 'Relatórios em tempo real',
    desc: 'Acompanhe tempo médio de atendimento, volume de tickets e performance por atendente.' },
  { icon: PlugIcon,     title: 'Integrações nativas',
    desc: 'Conecte com N8N, Typebot, Dialogflow, OpenAI, webhooks e muito mais.' },
  { icon: ShieldIcon,   title: 'API Oficial do WhatsApp (Meta)',
    desc: 'Integração com a API oficial da Meta para empresas que precisam de escala e conformidade total.' },
];

const moreFeatures = [
  { icon: KanbanIcon,   label: 'Kanban de atendimentos' },
  { icon: UsersIcon,    label: 'Contatos e segmentação' },
  { icon: CalendarIcon, label: 'Agendamentos' },
  { icon: TagIcon,      label: 'Tags inteligentes' },
  { icon: ChatIcon,     label: 'Chat interno da equipe' },
  { icon: MegaphoneIcon,label: 'Campanhas e disparos' },
  { icon: FlowIcon,     label: 'Flowbuilder visual' },
  { icon: PlugIcon,     label: 'API & múltiplas conexões' },
  { icon: CakeIcon,     label: 'Campanhas de aniversário' },
  { icon: WebhookIcon,  label: 'Webhooks personalizados' },
  { icon: SparkleIcon,  label: 'IA e respostas sugeridas' },
  { icon: ShieldIcon,   label: 'Permissões e auditoria' },
];

const integrations = [
  { name: 'N8N',         tag: 'Automação' },
  { name: 'Typebot',     tag: 'Chatbots' },
  { name: 'OpenAI',      tag: 'IA' },
  { name: 'Dialogflow',  tag: 'NLP' },
  { name: 'Webhooks',    tag: 'Custom' },
  { name: 'Flowbuilder', tag: 'Fluxos' },
  { name: 'Meta API',    tag: 'Oficial' },
  { name: 'Zapier',      tag: 'No-code' },
];

/* -------------------- NAVBAR -------------------- */
function Navbar({ onCta }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen]         = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: '#funcionalidades', label: 'Funcionalidades' },
    { href: '#como-funciona',   label: 'Como funciona' },
    { href: '#integracoes',     label: 'Integrações' },
    { href: '#planos',          label: 'Planos' },
  ];

  return (
    <header className={`fixed top-0 inset-x-0 z-40 transition-all ${scrolled ? 'nav-scrolled' : 'bg-transparent'}`}>
      <div className="max-w-7xl mx-auto px-5 lg:px-8 h-20 flex items-center justify-between">
        <PulseLogo height={140} />
        <nav className="hidden md:flex items-center gap-8">
          {links.map(l => (
            <a key={l.href} href={l.href} className="text-[14px] font-medium text-ink-700 hover:text-brand-600 transition-colors">{l.label}</a>
          ))}
        </nav>

        <div className="flex items-center gap-3">
          <a href="#contato" onClick={onCta}
             className="cta-primary hidden sm:inline-flex items-center gap-2 bg-brand-gradient text-white text-[13.5px] font-semibold px-4 py-2.5 rounded-xl shadow-glow">
            Falar com especialista
            <ArrowRightIcon size={15} />
          </a>
          <button className="md:hidden p-2 rounded-lg ring-1 ring-ink-100 bg-white" onClick={() => setOpen(o => !o)} aria-label="Menu">
            {open ? <XIcon size={18} stroke="#1a1a2e" /> : <MenuIcon size={18} stroke="#1a1a2e" />}
          </button>
        </div>
      </div>

      {open && (
        <div className="md:hidden border-t border-ink-100 bg-white/95 backdrop-blur">
          <div className="px-5 py-4 flex flex-col gap-3">
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="text-[15px] font-medium text-ink-700">{l.label}</a>
            ))}
            <a href="#contato" onClick={() => setOpen(false)} className="cta-primary inline-flex items-center justify-center gap-2 bg-brand-gradient text-white text-[14px] font-semibold px-4 py-3 rounded-xl">
              Falar com especialista <ArrowRightIcon size={15} />
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

/* -------------------- LOGO -------------------- */
function PulseLogo({ dark = false, height = 32 }) {
  // The supplied PNG includes the wordmark + "POWERED BY CAVA" lockup.
  // On dark backgrounds, the gradient stays visible (transparency preserved).
  return (
    <a href="#top" className="flex items-center" aria-label="Pulse">
      <img
        src={(window.__resources && window.__resources.pulseLogo) || "assets/pulse-logo.png"}
        alt="Pulse — powered by CAVA"
        style={{ height: height, width: 'auto', display: 'block' }}
        draggable="false"
      />
    </a>
  );
}

/* -------------------- HERO -------------------- */
function Hero({ headline, subheadline, waLink }) {
  return (
    <section id="top" className="relative pt-32 lg:pt-36 pb-20 lg:pb-28 overflow-hidden hero-glow">
      <div className="max-w-7xl mx-auto px-5 lg:px-8 grid lg:grid-cols-12 gap-10 lg:gap-12 items-center relative z-10">
        <div className="lg:col-span-6 reveal">
          <div className="inline-flex items-center gap-2 bg-brand-100 text-brand-700 text-[12px] font-semibold rounded-full px-3 py-1.5 mb-5">
            <SparkleIcon size={13} stroke="#9d35f0" />
            Novo: respostas com IA + Flowbuilder visual
          </div>
          <h1 className="text-[40px] sm:text-[48px] lg:text-[58px] leading-[1.05] font-extrabold tracking-tight text-ink-900" style={{ textWrap: 'pretty' }}>
            {headline}
          </h1>
          <p className="mt-6 text-[17px] lg:text-[18px] leading-relaxed text-ink-500 max-w-xl">
            {subheadline}
          </p>

          <div className="mt-8 flex flex-col sm:flex-row gap-3">
            <a href={waLink} target="_blank" rel="noopener"
               className="cta-primary inline-flex items-center justify-center gap-2 bg-brand-gradient text-white text-[15px] font-semibold px-6 py-4 rounded-xl shadow-glowLg">
              <WhatsAppIcon size={18} fill="#fff" />
              Quero conhecer a Pulse
              <ArrowRightIcon size={16} />
            </a>
            <a href="#como-funciona"
               className="inline-flex items-center justify-center gap-2 bg-white text-brand-600 text-[15px] font-semibold px-6 py-4 rounded-xl ring-2 ring-brand-500 hover:bg-brand-50 transition-colors" style={{ boxShadow: 'inset 0 0 0 1.5px #9d35f0' }}>
              <PlayIcon size={14} stroke="#9d35f0" />
              Ver demonstração
            </a>
          </div>

          {/* Trust strip */}
          <div className="mt-10 flex items-center gap-6 flex-wrap">
            <div className="flex -space-x-2">
              {['#fde2e4','#dcc4fa','#cdeac0','#ffe9b8','#bee3f8'].map((c, i) => (
                <div key={i} className="w-8 h-8 rounded-full ring-2 ring-white" style={{ background: c }} />
              ))}
            </div>
            <div className="text-[13px] text-ink-500">
              <div className="font-semibold text-ink-900">+1.200 equipes atendendo no ritmo certo</div>
              <div className="flex items-center gap-1">
                {Array.from({length: 5}).map((_, i) => (
                  <svg key={i} width="12" height="12" viewBox="0 0 24 24" fill="#f5b800"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
                ))}
                <span className="ml-1.5">4,9/5 no atendimento</span>
              </div>
            </div>
          </div>
        </div>

        <div className="lg:col-span-6 reveal">
          <InboxMockup />
        </div>
      </div>

      <div className="hero-wave" />
    </section>
  );
}

/* -------------------- FEATURES -------------------- */
function Features() {
  return (
    <section id="funcionalidades" className="bg-brand-50/60 py-24 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl reveal">
          <div className="text-[12.5px] font-bold uppercase tracking-[0.18em] text-brand-600 mb-3">Funcionalidades</div>
          <h2 className="text-[34px] lg:text-[44px] font-extrabold tracking-tight text-ink-900 leading-[1.1]" style={{ textWrap: 'balance' }}>
            Tudo que sua equipe precisa em um só lugar
          </h2>
          <p className="mt-4 text-[17px] text-ink-500 max-w-2xl">
            Da primeira mensagem ao fechamento do negócio: a Pulse cobre todo o ciclo de atendimento e vendas no WhatsApp.
          </p>
        </div>

        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {features.map((f, i) => {
            const Ico = f.icon;
            return (
              <div key={i} className="feature-card rounded-2xl p-6 bg-white reveal" style={{ transitionDelay: `${i * 60}ms` }}>
                <div className="w-11 h-11 rounded-xl bg-brand-100 grid place-items-center text-brand-600 mb-5">
                  <Ico size={22} stroke="#9d35f0" />
                </div>
                <h3 className="text-[17px] font-bold text-ink-900 mb-1.5">{f.title}</h3>
                <p className="text-[14px] text-ink-500 leading-relaxed">{f.desc}</p>
              </div>
            );
          })}
        </div>

        {/* Secondary feature chips */}
        <div className="mt-14 reveal">
          <div className="text-[13px] font-semibold text-ink-700 mb-4">E ainda inclui:</div>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2.5">
            {moreFeatures.map((f, i) => {
              const Ico = f.icon;
              return (
                <div key={i} className="flex items-center gap-2.5 bg-white rounded-xl px-3.5 py-3 ring-1 ring-ink-100 hover:ring-brand-200 transition-colors">
                  <div className="w-8 h-8 rounded-lg bg-brand-50 grid place-items-center text-brand-600">
                    <Ico size={16} stroke="#9d35f0" />
                  </div>
                  <span className="text-[13.5px] font-medium text-ink-900">{f.label}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------- HOW IT WORKS -------------------- */
function HowItWorks({ waLink }) {
  const steps = [
    { n: '1', t: 'Conecte seus números',
      d: 'Adicione seus números de WhatsApp (via QR code ou API Oficial) em minutos.',
      icon: PhoneIcon },
    { n: '2', t: 'Configure sua equipe e automações',
      d: 'Crie filas, distribua atendentes, monte chatbots e regras de atendimento.',
      icon: BotIcon },
    { n: '3', t: 'Atenda, venda e cresça',
      d: 'Acompanhe tudo em tempo real e tome decisões baseadas em dados concretos.',
      icon: TrendingUp },
  ];

  return (
    <section id="como-funciona" className="bg-white py-24 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl reveal">
          <div className="text-[12.5px] font-bold uppercase tracking-[0.18em] text-brand-600 mb-3">Como funciona</div>
          <h2 className="text-[34px] lg:text-[44px] font-extrabold tracking-tight text-ink-900 leading-[1.1]" style={{ textWrap: 'balance' }}>
            Em três passos sua operação está no ar
          </h2>
        </div>

        <div className="mt-14 relative">
          {/* connector line (desktop) */}
          <div className="hidden lg:block absolute top-12 left-[12%] right-[12%] h-px bg-gradient-to-r from-brand-200 via-brand-300 to-brand-200" />
          <div className="grid lg:grid-cols-3 gap-6 lg:gap-10 relative">
            {steps.map((s, i) => {
              const Ico = s.icon;
              return (
                <div key={i} className="relative reveal" style={{ transitionDelay: `${i * 100}ms` }}>
                  <div className="lg:flex lg:flex-col lg:items-start">
                    <div className="flex items-center gap-4 mb-5">
                      <div className="step-num text-[64px] leading-none">{s.n}</div>
                      <div className="w-12 h-12 rounded-2xl bg-brand-50 ring-1 ring-brand-100 grid place-items-center">
                        <Ico size={22} stroke="#9d35f0" />
                      </div>
                    </div>
                    <h3 className="text-[20px] font-bold text-ink-900 mb-2">{s.t}</h3>
                    <p className="text-[15px] text-ink-500 leading-relaxed max-w-sm">{s.d}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="mt-16 flex flex-col sm:flex-row items-center justify-center gap-4 reveal">
          <span className="text-[16px] text-ink-700 font-medium">Pronto para começar?</span>
          <a href={waLink} target="_blank" rel="noopener"
             className="cta-primary inline-flex items-center gap-2 bg-brand-gradient text-white text-[14.5px] font-semibold px-5 py-3 rounded-xl shadow-glow">
            <WhatsAppIcon size={16} fill="#fff" />
            Falar com um especialista
            <ArrowRightIcon size={15} />
          </a>
        </div>
      </div>
    </section>
  );
}

/* -------------------- INTEGRATIONS -------------------- */
function Integrations() {
  // Original wordmark "tiles" — we don't recreate vendor logos
  return (
    <section id="integracoes" className="bg-brand-50 py-24 lg:py-28 overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl reveal">
          <div className="text-[12.5px] font-bold uppercase tracking-[0.18em] text-brand-600 mb-3">Integrações</div>
          <h2 className="text-[34px] lg:text-[44px] font-extrabold tracking-tight text-ink-900 leading-[1.1]" style={{ textWrap: 'balance' }}>
            Conecta com as ferramentas que você já usa
          </h2>
          <p className="mt-4 text-[17px] text-ink-500 max-w-2xl">
            A TalkPulse se integra nativamente com as principais ferramentas do mercado — e via webhooks com qualquer outra.
          </p>
        </div>

        <div className="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-3 reveal">
          {integrations.map((it, i) => (
            <div key={i} className="bg-white rounded-2xl ring-1 ring-ink-100 px-5 py-6 flex flex-col items-center text-center hover:ring-brand-200 hover:-translate-y-0.5 transition-all">
              <div className="text-[16px] font-bold text-ink-900">{it.name}</div>
              <div className="text-[11px] uppercase tracking-wider text-ink-300 mt-1">{it.tag}</div>
            </div>
          ))}
        </div>

        {/* Marquee strip */}
        <div className="mt-10 reveal">
          <div className="text-[12px] text-ink-500 mb-3 text-center">+ Google Calendar · Notion · HubSpot · RD Station · Pipedrive · Stripe · e qualquer API via webhook</div>
          <div className="relative overflow-hidden mask-fade">
            <div className="flex gap-3 marquee-track w-max">
              {[...integrations, ...integrations].map((it, i) => (
                <div key={i} className="flex items-center gap-2 bg-white rounded-full ring-1 ring-ink-100 px-4 py-2">
                  <span className="w-2 h-2 rounded-full bg-brand-400" />
                  <span className="text-[12.5px] font-semibold text-ink-700">{it.name}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <style>{`
          .mask-fade { mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
        `}</style>
      </div>
    </section>
  );
}

/* -------------------- PRICING -------------------- */
function Pricing({ signupUrl, waLink }) {
  const essencialFeatures = [
    '1 usuário',
    '2 conexões de WhatsApp',
    '10 filas de atendimento',
    'WhatsApp Oficial (Meta) e não oficial',
    'Campanhas e disparos',
    'Agendamentos',
    'API externa',
    'Kanban de atendimentos',
    'Integrações nativas',
  ];

  const personalizadoFeatures = [
    'Usuários, conexões e filas sob medida',
    'Tudo do plano Essencial, sem limites rígidos',
    'Onboarding e suporte dedicados',
    'Contrato adaptado à sua demanda',
  ];

  return (
    <section id="planos" className="bg-white py-24 lg:py-28">
      <div className="max-w-6xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl mx-auto text-center reveal">
          <div className="text-[12.5px] font-bold uppercase tracking-[0.18em] text-brand-600 mb-3">Planos</div>
          <h2 className="text-[34px] lg:text-[44px] font-extrabold tracking-tight text-ink-900 leading-[1.1]" style={{ textWrap: 'balance' }}>
            Comece hoje. Cresça quando precisar.
          </h2>
          <p className="mt-4 text-[17px] text-ink-500">
            Teste 7 dias grátis, sem cartão de crédito.
          </p>
        </div>

        <div className="mt-14 grid lg:grid-cols-2 gap-6 items-start">
          {/* Essencial */}
          <div className="relative rounded-3xl bg-brand-50/60 ring-1 ring-brand-100 p-8 lg:p-10 reveal">
            <div className="inline-flex items-center gap-2 bg-brand-gradient text-white text-[11.5px] font-bold uppercase tracking-wider rounded-full px-3 py-1.5 mb-6">
              <ZapIcon size={12} stroke="#fff" />
              7 dias grátis
            </div>

            <h3 className="text-[22px] font-bold text-ink-900">Essencial</h3>
            <p className="mt-1.5 text-[14.5px] text-ink-500">Para times que querem começar a operar hoje.</p>

            <div className="mt-7 flex items-baseline gap-1.5">
              <span className="text-[44px] font-extrabold tracking-tight text-ink-900">R$ 450</span>
              <span className="text-[15px] font-medium text-ink-500">/mês</span>
            </div>

            <a href={signupUrl} target="_blank" rel="noopener"
               className="cta-primary mt-7 w-full inline-flex items-center justify-center gap-2 bg-brand-gradient text-white text-[15.5px] font-bold px-6 py-4 rounded-xl shadow-glow">
              Criar conta grátis
              <ArrowRightIcon size={16} />
            </a>

            <ul className="mt-8 space-y-3">
              {essencialFeatures.map((f, i) => (
                <li key={i} className="flex items-start gap-2.5 text-[14.5px] text-ink-700">
                  <span className="mt-0.5 shrink-0"><CheckIcon size={16} stroke="#9d35f0" /></span>
                  {f}
                </li>
              ))}
            </ul>
          </div>

          {/* Personalizado */}
          <div className="relative rounded-3xl bg-white ring-1 ring-ink-100 p-8 lg:p-10 reveal" style={{ transitionDelay: '80ms' }}>
            <div className="inline-flex items-center gap-2 bg-ink-100 text-ink-700 text-[11.5px] font-bold uppercase tracking-wider rounded-full px-3 py-1.5 mb-6">
              <SparkleIcon size={12} stroke="#4a4a6a" />
              Sob demanda
            </div>

            <h3 className="text-[22px] font-bold text-ink-900">Personalizado</h3>
            <p className="mt-1.5 text-[14.5px] text-ink-500">Para operações que precisam de escala e flexibilidade.</p>

            <div className="mt-7 flex items-baseline gap-1.5">
              <span className="text-[44px] font-extrabold tracking-tight text-ink-900">Sob medida</span>
            </div>

            <a href={waLink} target="_blank" rel="noopener"
               className="mt-7 w-full inline-flex items-center justify-center gap-2 bg-white text-brand-600 text-[15.5px] font-bold px-6 py-4 rounded-xl ring-2 ring-brand-500 hover:bg-brand-50 transition-colors">
              <WhatsAppIcon size={17} fill="#25D366" />
              Falar com um especialista
            </a>

            <ul className="mt-8 space-y-3">
              {personalizadoFeatures.map((f, i) => (
                <li key={i} className="flex items-start gap-2.5 text-[14.5px] text-ink-700">
                  <span className="mt-0.5 shrink-0"><CheckIcon size={16} stroke="#9d35f0" /></span>
                  {f}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------- CONTACT CTA -------------------- */
function ContactCTA({ waLink }) {
  return (
    <section id="contato" className="relative py-24 lg:py-28 overflow-hidden">
      <div className="absolute inset-0 bg-brand-gradient" />
      {/* decorative wave */}
      <svg className="absolute inset-0 w-full h-full opacity-25 mix-blend-overlay" viewBox="0 0 1200 600" preserveAspectRatio="none" aria-hidden="true">
        <path d="M0 380 C 200 320, 400 460, 600 380 S 1000 300, 1200 380 L 1200 600 L 0 600 Z" fill="#ffffff" />
        <path d="M0 460 C 200 400, 400 520, 600 460 S 1000 380, 1200 460 L 1200 600 L 0 600 Z" fill="#ffffff" opacity="0.5" />
      </svg>

      <div className="max-w-4xl mx-auto px-5 lg:px-8 relative z-10 text-center text-white">
        <div className="inline-flex items-center gap-2 bg-white/15 backdrop-blur text-white text-[12px] font-semibold rounded-full px-3 py-1.5 mb-6 reveal">
          <SparkleIcon size={13} stroke="#fff" />
          Vamos conversar sobre o seu projeto?
        </div>
        <h2 className="text-[36px] sm:text-[44px] lg:text-[54px] font-extrabold tracking-tight leading-[1.05] reveal" style={{ textWrap: 'balance' }}>
          Cada empresa tem um ritmo. <br className="hidden sm:block" />
          A TalkPulse acompanha o seu.
        </h2>
        <p className="mt-6 text-[17px] lg:text-[18px] text-white/90 max-w-2xl mx-auto leading-relaxed reveal">
          Precisa de mais usuários, conexões ou filas do que o plano Essencial oferece? Fale com nosso time agora e receba uma proposta personalizada para o tamanho e o momento do seu negócio.
        </p>

        <div className="mt-10 flex flex-col items-center gap-3 reveal">
          <a href={waLink} target="_blank" rel="noopener"
             className="cta-primary inline-flex items-center gap-3 bg-white text-brand-600 text-[16px] font-bold px-7 py-4 rounded-2xl shadow-glowLg hover:bg-white">
            <WhatsAppIcon size={22} fill="#25D366" />
            Falar com o time da TalkPulse no WhatsApp
            <ArrowRightIcon size={18} />
          </a>
          <div className="text-[13px] text-white/85 flex items-center gap-1.5">
            <ClockIcon size={13} stroke="#fff" />
            Resposta em até 30 minutos em horário comercial
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------- FOOTER -------------------- */
function Footer({ waLink }) {
  return (
    <footer className="bg-ink-900 text-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8 py-16 grid md:grid-cols-3 gap-10">
        <div>
          <PulseLogo dark height={56} />
          <p className="mt-4 text-[14.5px] text-white/70 max-w-xs leading-relaxed">
            Atendimento que pulsa no ritmo do seu negócio.
          </p>
        </div>

        <div className="md:text-center">
          <div className="text-[12.5px] font-bold uppercase tracking-[0.18em] text-white/50 mb-4">Navegação</div>
          <ul className="space-y-2.5">
            <li><a href="#funcionalidades" className="text-[14.5px] text-white/80 hover:text-white">Funcionalidades</a></li>
            <li><a href="#como-funciona"   className="text-[14.5px] text-white/80 hover:text-white">Como funciona</a></li>
            <li><a href="#integracoes"     className="text-[14.5px] text-white/80 hover:text-white">Integrações</a></li>
            <li><a href="#planos"          className="text-[14.5px] text-white/80 hover:text-white">Planos</a></li>
            <li><a href="#contato"         className="text-[14.5px] text-white/80 hover:text-white">Fale conosco</a></li>
          </ul>
        </div>

        <div className="md:text-right">
          <div className="text-[12.5px] font-bold uppercase tracking-[0.18em] text-white/50 mb-4">Fale com a gente</div>
          <a href={waLink} target="_blank" rel="noopener"
             className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/15 ring-1 ring-white/15 text-white text-[14px] font-semibold px-4 py-2.5 rounded-xl transition-colors">
            <WhatsAppIcon size={18} fill="#25D366" />
            Abrir WhatsApp
          </a>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="max-w-7xl mx-auto px-5 lg:px-8 py-5 flex flex-col sm:flex-row items-center justify-between gap-2 text-[12.5px] text-white/50">
          <span>© 2026 TalkPulse. Todos os direitos reservados.</span>
          <span className="flex items-center gap-4">
            <a href="#" className="hover:text-white">Termos</a>
            <a href="#" className="hover:text-white">Privacidade</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Navbar, Hero, Features, HowItWorks, Integrations, Pricing, ContactCTA, Footer, PulseLogo });