import React, { useState, useEffect, useRef } from 'react';
import {
  Menu, X, Building, Zap, Users, Laptop, Building2,
  Smartphone, BarChart2, CheckCircle, Target, Handshake,
  Award, MapPin, ChevronDown, Shield, MessageCircle, Star
} from 'lucide-react';

const GlobalStyles = () = (
  style
    {`
      @import url('httpsfonts.googleapis.comcss2family=Montserratwght@400;500;600;700;800&display=swap');
      
      root {
        --cream #F5F2EC;
        --white #FFFFFF;
        --navy #2D3170;
        --gold #C9A84C;
        --dark-blue #1A1F4E;
        --wpp #25D366;
      }

      html {
        scroll-behavior smooth;
        font-family 'Montserrat', sans-serif;
        background-color var(--cream);
      }

      body {
        margin 0;
        padding 0;
        -webkit-font-smoothing antialiased;
        -moz-osx-font-smoothing grayscale;
      }

      .font-montserrat {
        font-family 'Montserrat', sans-serif;
      }

      .text-gold-gradient {
        background linear-gradient(135deg, #C9A84C, #F0D080, #C9A84C);
        -webkit-background-clip text;
        -webkit-text-fill-color transparent;
        background-clip text;
      }

      .bg-gold-gradient {
        background linear-gradient(135deg, #C9A84C, #F0D080, #C9A84C);
      }

      .shadow-premium {
        box-shadow 0 4px 24px rgba(0,0,0,0.08);
      }

      .noise-overlay {
        position relative;
      }
      .noise-overlaybefore {
        content ;
        position absolute;
        top 0; left 0; width 100%; height 100%;
        opacity 0.03;
        pointer-events none;
        background-image url(dataimagesvg+xml,%3Csvg viewBox='0 0 200 200' xmlns='httpwww.w3.org2000svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'%3E%3Cfilter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'%3E%3Csvg%3E);
      }

      .pulse-ring {
        animation pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
      }

      @keyframes pulse-ring {
        0% { box-shadow 0 0 0 0 rgba(37, 211, 102, 0.7); }
        70% { box-shadow 0 0 0 15px rgba(37, 211, 102, 0); }
        100% { box-shadow 0 0 0 0 rgba(37, 211, 102, 0); }
      }
    `}
  style
);

const Reveal = ({ children, delay = 0, className = '' }) = {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() = {
    const observer = new IntersectionObserver(
      ([entry]) = {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      { threshold 0.1 }
    );
    if (ref.current) observer.observe(ref.current);
    return () = observer.disconnect();
  }, []);

  return (
    div
      ref={ref}
      className={`transition-all duration-700 ease-out w-full ${
        isVisible  'opacity-100 translate-y-0'  'opacity-0 translate-y-8'
      } ${className}`}
      style={{ transitionDelay `${delay}ms` }}
    
      {children}
    div
  );
};

const WPP_LINK = httpswa.me5521959215521text=Olá!%20Vim%20pelo%20site%20e%20quero%20conhecer%20os%20planos%20de%20saúde%20empresariais%20da%20Lexus%20Seguros.;

const Navbar = () = {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  useEffect(() = {
    const handleScroll = () = {
      setIsScrolled(window.scrollY  20);
    };
    window.addEventListener('scroll', handleScroll);
    return () = window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name 'Por que a Lexus', href '#por-que-a-lexus' },
    { name 'Planos', href '#planos' },
    { name 'Seguradoras', href '#seguradoras' },
    { name 'Depoimentos', href '#depoimentos' },
    { name 'Contato', href '#contato' },
  ];

  return (
    nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${isScrolled  'bg-[#FFFFFF] shadow-md py-3'  'bg-[#FFFFFF]90 backdrop-blur-md py-5'}`}
      div className=max-w-7xl mx-auto px-6 flex justify-between items-center
        { Logo Placeholder }
        a href=#inicio className=flex items-center gap-2
          div id=navbar-logo className=h-[40px] w-[120px] bg-[#1A1F4E]10 rounded flex items-center justify-center border border-[#1A1F4E]20 text-[#1A1F4E] font-bold text-xs tracking-widest uppercase
            LEXUS
          div
        a

        { Desktop Menu }
        div className=hidden mdflex items-center gap-8
          ul className=flex gap-6
            {navLinks.map((link) = (
              li key={link.name}
                a href={link.href} className=text-[#1A1F4E] font-medium hovertext-[#C9A84C] transition-colors text-sm
                  {link.name}
                a
              li
            ))}
          ul
          a href={WPP_LINK} target=_blank rel=noopener noreferrer className=bg-[#25D366] hoverbg-[#20b858] text-white px-5 py-2.5 rounded-full font-semibold flex items-center gap-2 transition-colors shadow-premium
            MessageCircle size={18} 
            Falar no WhatsApp
          a
        div

        { Mobile Toggle }
        button className=mdhidden text-[#1A1F4E] onClick={() = setIsMenuOpen(!isMenuOpen)}
          {isMenuOpen  X size={28}   Menu size={28} }
        button
      div

      { Mobile Menu }
      {isMenuOpen && (
        div className=mdhidden absolute top-full left-0 w-full bg-[#FFFFFF] shadow-lg border-t border-gray-100 flex flex-col py-4 px-6 gap-4
          {navLinks.map((link) = (
            a 
              key={link.name} 
              href={link.href} 
              onClick={() = setIsMenuOpen(false)}
              className=text-[#1A1F4E] font-medium py-2 border-b border-gray-50
            
              {link.name}
            a
          ))}
          a href={WPP_LINK} target=_blank rel=noopener noreferrer className=bg-[#25D366] text-white px-5 py-3 rounded-lg font-semibold flex items-center justify-center gap-2 mt-2
            MessageCircle size={18} 
            Falar no WhatsApp
          a
        div
      )}
    nav
  );
};

const Hero = () = {
  return (
    section id=inicio className=bg-[#F5F2EC] min-h-screen pt-32 pb-20 flex items-center overflow-hidden
      div className=max-w-7xl mx-auto px-6 grid lggrid-cols-2 gap-12 items-center
        
        { Left Column - Content }
        div className=relative z-10 flex flex-col items-start
          Reveal delay={100}
            div className=inline-block bg-[#1A1F4E]5 border border-[#1A1F4E]10 px-4 py-1.5 rounded-full mb-6
              span className=text-xs font-bold text-[#1A1F4E] tracking-widest uppercase
                • CORRETORA PREMIUM · RIO DE JANEIRO
              span
            div
          Reveal

          Reveal delay={200}
            h1 className=text-4xl mdtext-5xl lgtext-6xl font-extrabold text-[#1A1F4E] leading-tight mb-2
              Plano de Saúde com Desconto Real para MEI e CNPJ
            h1
            h2 className=text-2xl mdtext-3xl font-bold text-[#C9A84C] mb-6
              no Rio de Janeiro
            h2
          Reveal

          Reveal delay={300}
            p className=text-[#1A1F4E]80 text-lg mdtext-xl font-medium mb-8 max-w-xl leading-relaxed
              Quem tem empresa paga menos. Muito menos. Compare agora os melhores planos com condições exclusivas para MEI e empresas — sem burocracia, com atendimento humano.
            p
          Reveal

          Reveal delay={400} className=w-full flex flex-col smflex-row gap-4 mb-8
            a href={WPP_LINK} target=_blank rel=noopener noreferrer className=bg-[#C9A84C] hoverbg-[#d8b85e] text-[#1A1F4E] font-bold px-8 py-4 rounded-lg flex items-center justify-center gap-2 transition-all shadow-[0_0_20px_rgba(201,168,76,0.4)] hovershadow-[0_0_25px_rgba(201,168,76,0.6)] text-center w-full smw-auto
              Quero meu desconto agora →
            a
            a href=#planos className=border-2 border-[#2D3170] text-[#2D3170] font-bold px-8 py-4 rounded-lg flex items-center justify-center hoverbg-[#2D3170] hovertext-white transition-all text-center w-full smw-auto
              Ver planos disponíveis
            a
          Reveal

          Reveal delay={500}
            div className=flex items-center gap-2 text-sm font-semibold text-[#1A1F4E] mb-8 bg-white50 px-4 py-2 rounded-lg border border-[#1A1F4E]10
              Shield size={16} className=text-[#C9A84C] 
              spanConsulta gratuita e sem compromisso — Resposta em até 1 horaspan
            div
          Reveal

          Reveal delay={600} className=w-full
            div className=w-full h-px bg-[#C9A84C]30 mb-6div
            div className=flex flex-wrap gap-x-6 gap-y-2 text-sm font-semibold text-[#1A1F4E]70
              span className=flex items-center gap-1span className=text-[#C9A84C]✦span +500 empresas atendidasspan
              span className=flex items-center gap-1span className=text-[#C9A84C]✦span Rio de Janeiro & Grande Riospan
              span className=flex items-center gap-1span className=text-[#C9A84C]✦span 6 seguradoras parceirasspan
            div
          Reveal
        div

        { Right Column - Image }
        Reveal delay={400} className=relative hidden lgblock h-full min-h-[500px]
          div className=relative w-full h-[500px] rounded-2xl border border-[#C9A84C]50 shadow-premium overflow-hidden
            img 
              src=httpsimages.unsplash.comphoto-1573496359142-b8d87734a5a2w=600&q=80 
              alt=Empreendedora sorrindo 
              className=w-full h-full object-cover
            
            { Overlay Shield Decorativo }
            div className=absolute -bottom-10 -right-10 opacity-30 text-[#C9A84C]
              svg width=200 height=200 viewBox=0 0 24 24 fill=none stroke=currentColor strokeWidth=1 strokeLinecap=round strokeLinejoin=round
                path d=M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10zpath
              svg
            div
          div

          { Floating Badges }
          div className=absolute top-8 -left-8 bg-[#2D3170] text-white px-6 py-3 rounded-xl shadow-lg border border-[#C9A84C]30 animate-bounce style={{ animationDuration '3s' }}
            span className=block text-xs font-medium text-[#C9A84C]ECONOMIAspan
            span className=block font-bold text-lgaté 40%span
          div

          div className=absolute bottom-12 -right-8 bg-white text-[#1A1F4E] px-6 py-3 rounded-xl shadow-premium border border-gray-100
            span className=block text-xs font-bold text-[#C9A84C] uppercaseRESPOSTAspan
            span className=block font-bold text-mdem até 1hspan
          div
        Reveal

      div
    section
  );
};

const ValueProposition = () = {
  const cards = [
    {
      icon Building size={32} className=text-white ,
      title Tabela Empresarial,
      text Planos contratados via CNPJ têm acesso à tabela empresarial das operadoras, com preços até 40% menores que os planos individuais.
    },
    {
      icon Zap size={32} className=text-white ,
      title Menos carência,
      text Em muitos planos empresariais, as carências são reduzidas ou eliminadas. Você usa o plano muito antes.
    },
    {
      icon Users size={32} className=text-white ,
      title Inclui sua família,
      text Pelo CNPJ você pode incluir sócio, funcionários e dependentes, todos com o mesmo desconto corporativo.
    }
  ];

  return (
    section id=por-que-a-lexus className=bg-[#FFFFFF] py-24 relative border-t border-[#C9A84C]30
      div className=max-w-7xl mx-auto px-6
        Reveal
          div className=text-center mb-16
            span className=text-sm font-bold text-[#C9A84C] tracking-widest uppercase mb-2 blockA Diferençaspan
            h2 className=text-3xl mdtext-4xl font-extrabold text-[#1A1F4E] max-w-3xl mx-auto leading-tight
              Seu CNPJ vale span className=text-[#C9A84C]ourospan na hora de contratar um plano de saúde
            h2
          div
        Reveal

        div className=grid mdgrid-cols-3 gap-8 mb-16
          {cards.map((card, index) = (
            Reveal key={index} delay={index  150}
              div className=bg-white p-8 rounded-2xl border border-[#C9A84C]30 shadow-premium h-full flex flex-col transition-transform hover-translate-y-2
                div className=w-16 h-16 bg-[#2D3170] rounded-2xl flex items-center justify-center mb-6 shadow-md
                  {card.icon}
                div
                h3 className=text-xl font-bold text-[#C9A84C] mb-4{card.title}h3
                p className=text-[#1A1F4E]80 font-medium leading-relaxed flex-grow
                  {card.text}
                p
              div
            Reveal
          ))}
        div

        Reveal delay={400}
          div className=bg-[#2D3170] border border-[#C9A84C] rounded-2xl p-6 mdp-8 flex flex-col mdflex-row items-center justify-between gap-6 shadow-premium
            p className=text-white font-medium text-lg lgtext-xl max-w-3xl
              Planos PME exigem no mínimo 2 vidas (titular + 1 dependente ou funcionário). Fale com a Lexus e veja como se encaixar nas melhores condições.
            p
            a href={WPP_LINK} target=_blank rel=noopener noreferrer className=bg-[#25D366] text-white px-6 py-3 rounded-lg font-bold flex items-center gap-2 whitespace-nowrap hoverbg-[#20b858] transition-colors
              Simular economia agora →
            a
          div
        Reveal
      div
    section
  );
};

const Plans = () = {
  const plans = [
    {
      icon Laptop size={28} className=text-[#1A1F4E] ,
      badge A PARTIR DE 2 VIDAS,
      badgeColor bg-[#F5F2EC] text-[#1A1F4E],
      title MEI + Dependente,
      desc Você e mais 1 pessoa (cônjuge, filho ou sócio). Acesso à tabela empresarial com o melhor custo-benefício.,
      bullets [Titular + 1 dependente, Tabela empresarial, Cobertura nacional disponível, Sem carência em muitos planos],
      cta Quero esse plano →,
      highlight false
    },
    {
      icon Building2 size={28} className=text-[#1A1F4E] ,
      badge MAIS POPULAR,
      badgeColor bg-[#C9A84C] text-[#1A1F4E],
      title Empresa de 2 a 10 vidas,
      desc Para pequenas empresas, clínicas, escritórios e comércios. Quanto mais vidas, menor o preço por pessoa.,
      bullets [De 2 a 10 colaboradores, Inclui dependentes, Desconto progressivo por vidas, Negociação direta com operadora],
      cta Solicitar cotação →,
      highlight true
    },
    {
      icon Users size={28} className=text-[#1A1F4E] ,
      badge ATÉ 99 VIDAS,
      badgeColor bg-[#F5F2EC] text-[#1A1F4E],
      title Empresa de 10 a 99 vidas,
      desc Para empresas em crescimento. Condições especiais negociadas diretamente com as operadoras.,
      bullets [De 10 a 99 vidas, Gestão de apólice incluída, Melhores tabelas do mercado, Atendimento dedicado],
      cta Falar com especialista →,
      highlight false
    }
  ];

  return (
    section id=planos className=bg-[#F5F2EC] py-24
      div className=max-w-7xl mx-auto px-6
        Reveal
          div className=text-center mb-16
            span className=text-sm font-bold text-[#C9A84C] tracking-widest uppercase mb-2 blockNossos Planosspan
            h2 className=text-3xl mdtext-4xl font-extrabold text-[#1A1F4E] max-w-3xl mx-auto leading-tight mb-4
              Encontre o plano span className=text-[#C9A84C]idealspan para o seu perfil
            h2
            p className=text-[#1A1F4E]70 font-medium text-lg max-w-2xl mx-auto
              Trabalhamos com as principais operadoras e comparamos tudo pra você. Veja os perfis mais comuns que atendemos
            p
          div
        Reveal

        div className=grid lggrid-cols-3 gap-8 mb-16 items-center
          {plans.map((plan, index) = (
            Reveal key={index} delay={index  150} className={plan.highlight  'lg-mt-8 lgmb-8'  ''}
              div className={`bg-white rounded-2xl p-8 shadow-premium flex flex-col h-full relative ${plan.highlight  'border-4 border-[#C9A84C] z-10'  'border border-gray-100'}`}
                
                {plan.highlight && (
                  div className=absolute -top-5 left-12 -translate-x-12 bg-[#C9A84C] text-[#1A1F4E] font-bold px-4 py-1.5 rounded-full text-sm shadow-md whitespace-nowrap border border-[#FFFFFF]
                    ⭐ ESCOLHA MAIS POPULAR
                  div
                )}

                div className=mb-6
                  span className={`inline-block px-3 py-1 text-xs font-bold rounded-md mb-4 ${plan.badgeColor}`}
                    {plan.badge}
                  span
                  div className=flex items-center gap-4 mb-4
                    div className=p-3 bg-[#F5F2EC] rounded-lg
                      {plan.icon}
                    div
                    h3 className=text-2xl font-bold text-[#1A1F4E]{plan.title}h3
                  div
                  p className=text-[#1A1F4E]80 font-medium text-sm leading-relaxed h-20
                    {plan.desc}
                  p
                div

                div className=flex-grow
                  ul className=space-y-3 mb-8
                    {plan.bullets.map((bullet, i) = (
                      li key={i} className=flex items-start gap-2 text-[#1A1F4E]90 font-medium text-sm
                        CheckCircle size={18} className=text-[#25D366] shrink-0 mt-0.5 
                        span{bullet}span
                      li
                    ))}
                  ul
                div

                a href={WPP_LINK} target=_blank rel=noopener noreferrer className={`w-full py-4 rounded-lg font-bold flex items-center justify-center gap-2 transition-all ${plan.highlight  'bg-[#C9A84C] text-[#1A1F4E] hoverbg-[#d8b85e]'  'bg-[#1A1F4E] text-white hoverbg-[#2D3170]'}`}
                  {plan.cta}
                a
              div
            Reveal
          ))}
        div

        Reveal delay={300}
          div className=bg-[#2D3170] rounded-xl p-6 flex flex-col smflex-row items-center justify-between gap-6 shadow-md text-center smtext-left
            div className=flex items-start smitems-center gap-4
              div className=text-xl shrink-0 hidden smblockℹ️div
              p className=text-white text-sm mdtext-base font-medium
                Todos os planos PME exigem no mínimo 2 vidas. Nossa consultora avalia seu perfil e indica a melhor solução, mesmo que você seja MEI solo.
              p
            div
            a href={WPP_LINK} target=_blank rel=noopener noreferrer className=bg-[#25D366] text-white px-6 py-2.5 rounded-lg font-bold whitespace-nowrap hoverbg-[#20b858] transition-colors text-sm
              Tirar dúvidas no WhatsApp
            a
          div
        Reveal
      div
    section
  );
};

const HowItWorks = () = {
  const steps = [
    {
      num 01,
      icon Smartphone size={24} className=text-[#C9A84C] ,
      title Fale com nosso consultor,
      text Mande uma mensagem no WhatsApp. Nossas especialistas entendem seu perfil, sua empresa e quantas pessoas precisam de cobertura.
    },
    {
      num 02,
      icon BarChart2 size={24} className=text-[#C9A84C] ,
      title Receba uma comparação personalizada,
      text Apresentamos as melhores opções das principais operadoras com os preços reais da tabela empresarial para o seu caso.
    },
    {
      num 03,
      icon CheckCircle size={24} className=text-[#C9A84C] ,
      title Assine e ative seu plano,
      text Processo 100% digital. Você escolhe, assina online e seu plano é ativado rapidamente, sem complicação.
    }
  ];

  return (
    section id=como-funciona className=bg-[#FFFFFF] py-24 overflow-hidden
      div className=max-w-7xl mx-auto px-6
        Reveal
          div className=text-center mb-20
            span className=text-sm font-bold text-[#C9A84C] tracking-widest uppercase mb-2 blockComo Funcionaspan
            h2 className=text-3xl mdtext-4xl font-extrabold text-[#1A1F4E] max-w-3xl mx-auto leading-tight
              Do primeiro contato ao plano ativo span className=text-[#C9A84C]em diasspan
            h2
          div
        Reveal

        div className=relative
          { Linha conectora desktop }
          div className=hidden mdblock absolute top-12 left-0 w-full h-0.5 border-t-2 border-dashed border-[#C9A84C]40 z-0div

          div className=grid mdgrid-cols-3 gap-12 mdgap-6 relative z-10
            {steps.map((step, index) = (
              Reveal key={index} delay={index  200}
                div className=flex flex-col items-center text-center relative group
                  div className=w-24 h-24 bg-white rounded-full border-4 border-[#C9A84C] shadow-lg flex flex-col items-center justify-center mb-6 transition-transform group-hoverscale-110
                    span className=text-[#1A1F4E] font-bold text-xs mb-1PASSOspan
                    span className=text-[#C9A84C] font-extrabold text-xl leading-none{step.num}span
                  div
                  div className=bg-[#F5F2EC] p-3 rounded-full mb-4
                    {step.icon}
                  div
                  h3 className=text-xl font-bold text-[#1A1F4E] mb-3 px-4{step.title}h3
                  p className=text-[#1A1F4E]70 font-medium
                    {step.text}
                  p
                div
              Reveal
            ))}
          div
        div
      div
    section
  );
};

const Partners = () = {
  const partners = [
    Bradesco Saúde, Assim Saúde, SulAmérica,
    Amil, Select Saúde, Klini Saúde
  ];

  return (
    section id=seguradoras className=bg-[#2D3170] py-24 noise-overlay relative
      div className=max-w-7xl mx-auto px-6 relative z-10
        Reveal
          div className=text-center mb-16
            span className=text-sm font-bold text-[#C9A84C] tracking-widest uppercase mb-2 blockOperadoras Parceirasspan
            h2 className=text-3xl mdtext-4xl font-extrabold text-[#C9A84C] max-w-3xl mx-auto leading-tight
              As melhores operadoras do Brasil, todas em um só lugar
            h2
          div
        Reveal

        div className=grid grid-cols-2 mdgrid-cols-3 gap-4 mdgap-6 mb-12
          {partners.map((partner, index) = (
            Reveal key={index} delay={index  100}
              div className=bg-white rounded-xl h-24 mdh-32 flex items-center justify-center border border-[#C9A84C]30 shadow-md transition-all hovershadow-[0_0_15px_rgba(201,168,76,0.3)] hover-translate-y-1
                { Placeholder para as logos reais }
                span className=font-montserrat font-bold text-[#1A1F4E] text-lg mdtext-xl text-center px-4
                  {partner}
                span
              div
            Reveal
          ))}
        div

        Reveal delay={600}
          p className=text-center text-white80 italic font-medium text-lg
            Comparamos tudo pra você escolher com segurança e pagar o justo.
          p
        Reveal
      div
    section
  );
};

const WhyUs = () = {
  const diffs = [
    {
      icon Target size={32} className=text-[#C9A84C] ,
      title Especialistas em CNPJ e MEI,
      text Entendemos as regras das operadoras melhor do que ninguém. Você não vai pagar mais do que precisa.
    },
    {
      icon Handshake size={32} className=text-[#C9A84C] ,
      title Atendimento humanizado,
      text Nada de robôs ou formulários intermináveis. Você fala com uma consultora real, que conhece seu nome.
    },
    {
      icon Award size={32} className=text-[#C9A84C] ,
      title Acesso a todas as operadoras,
      text Bradesco, Amil, SulAmérica, Assim, Select, Klini — comparamos tudo e apresentamos o melhor pra você.
    },
    {
      icon MapPin size={32} className=text-[#C9A84C] ,
      title Do Rio para o Rio,
      text Somos daqui. Conhecemos os hospitais, as redes credenciadas e as melhores coberturas para quem mora no Rio de Janeiro.
    }
  ];

  return (
    section id=diferenciais className=bg-[#F5F2EC] py-24
      div className=max-w-7xl mx-auto px-6
        Reveal
          div className=text-center mb-16
            h2 className=text-3xl mdtext-4xl font-extrabold text-[#1A1F4E] max-w-4xl mx-auto leading-tight
              Não somos só uma corretora. Somos seus span className=text-[#C9A84C]consultores de confiançaspan.
            h2
          div
        Reveal

        div className=grid mdgrid-cols-2 gap-8
          {diffs.map((item, index) = (
            Reveal key={index} delay={index  150}
              div className=bg-white p-8 rounded-2xl border border-[#C9A84C]30 shadow-premium flex gap-6 items-start
                div className=w-16 h-16 shrink-0 bg-[#2D3170] rounded-xl flex items-center justify-center shadow-inner
                  {item.icon}
                div
                div
                  h3 className=text-xl font-bold text-[#C9A84C] mb-2{item.title}h3
                  p className=text-[#1A1F4E]80 font-medium leading-relaxed
                    {item.text}
                  p
                div
              div
            Reveal
          ))}
        div
      div
    section
  );
};

const Testimonials = () = {
  const reviews = [
    {
      text Eu pagava R$580 no meu plano individual. Pela Lexus, no plano empresarial, pago R$340 com cobertura melhor. Não acreditei até ver a fatura.,
      initial C,
      bgAvatar bg-[#2D3170],
      colorInitial text-[#C9A84C],
      border border-[#C9A84C],
      name Carlos M.,
      role MEI — Consultor de TI
    },
    {
      text Incluí eu, meu sócio e mais 2 funcionários. A consultora resolveu tudo por WhatsApp em dois dias. Processo incrível.,
      initial F,
      bgAvatar bg-[#C9A84C],
      colorInitial text-white,
      border border-white,
      name Fernanda R.,
      role Sócia — Clínica de Estética
    },
    {
      text Nunca soube que como MEI eu tinha acesso à tabela empresarial. A Lexus me mostrou isso e economizei bastante.,
      initial R,
      bgAvatar bg-[#1A1F4E],
      colorInitial text-[#C9A84C],
      border border-[#C9A84C],
      name Ricardo A.,
      role MEI — Designer Gráfico
    }
  ];

  return (
    section id=depoimentos className=bg-[#FFFFFF] py-24 border-t border-[#F5F2EC]
      div className=max-w-7xl mx-auto px-6
        Reveal
          div className=text-center mb-16
            span className=text-sm font-bold text-[#C9A84C] tracking-widest uppercase mb-2 blockDepoimentosspan
            h2 className=text-3xl mdtext-4xl font-extrabold text-[#1A1F4E] max-w-3xl mx-auto leading-tight
              Quem já contratou pela Lexus span className=text-[#C9A84C]não precisa procurar maisspan
            h2
          div
        Reveal

        div className=grid mdgrid-cols-3 gap-8
          {reviews.map((review, index) = (
            Reveal key={index} delay={index  200}
              div className=bg-white p-8 rounded-2xl border border-[#C9A84C]30 shadow-premium h-full flex flex-col
                div className=flex gap-1 mb-6
                  {[...Array(5)].map((_, i) = (
                    Star key={i} size={20} className=fill-[#C9A84C] text-[#C9A84C] 
                  ))}
                div
                p className=text-[#1A1F4E]80 font-medium italic mb-8 flex-grow leading-relaxed
                  {review.text}
                p
                div className=flex items-center gap-4 mt-auto
                  div className={`w-14 h-14 rounded-full flex items-center justify-center text-2xl font-bold border-2 ${review.bgAvatar} ${review.colorInitial} ${review.border}`}
                    {review.initial}
                  div
                  div
                    h4 className=font-bold text-[#1A1F4E]{review.name}h4
                    span className=text-sm font-medium text-[#1A1F4E]60{review.role}span
                  div
                div
              div
            Reveal
          ))}
        div
      div
    section
  );
};

const FAQ = () = {
  const [openIndex, setOpenIndex] = useState(0);

  const faqs = [
    {
      q Quantas pessoas preciso ter para contratar um plano PME,
      a Os planos PME (Pequena e Média Empresa) exigem no mínimo 2 vidas — por exemplo, titular + 1 dependente, 2 sócios, ou titular + 1 funcionário. MEI com apenas 1 vida pode acessar planos individuais; fale com nossa consultora para entender a melhor opção para o seu caso.
    },
    {
      q Qual a diferença real de preço entre plano PF e PJ,
      a Em média, o plano empresarial custa de 20% a 40% menos que o equivalente individual, dependendo da operadora e do perfil.
    },
    {
      q Posso incluir minha família no plano empresarial,
      a Sim. Cônjuge, filhos e dependentes podem ser incluídos com o mesmo desconto corporativo.
    },
    {
      q A Lexus cobra alguma taxa de consultoria,
      a Não cobramos nada. Nossa receita vem das comissões das operadoras, então a consultoria é 100% gratuita pra você.
    },
    {
      q Quanto tempo leva para o plano ser ativado,
      a Geralmente entre 3 e 7 dias úteis após a assinatura do contrato. Em alguns casos, ainda menos.
    }
  ];

  return (
    section id=faq className=bg-[#F5F2EC] py-24
      div className=max-w-3xl mx-auto px-6
        Reveal
          div className=text-center mb-16
            span className=text-sm font-bold text-[#C9A84C] tracking-widest uppercase mb-2 blockFAQspan
            h2 className=text-3xl mdtext-4xl font-extrabold text-[#1A1F4E] leading-tight
              Dúvidas comuns de quem está span className=text-[#C9A84C]pesquisandospan
            h2
          div
        Reveal

        div className=space-y-4
          {faqs.map((faq, index) = (
            Reveal key={index} delay={index  100}
              div 
                className={`border border-[#C9A84C]30 rounded-xl overflow-hidden transition-all duration-300 ${openIndex === index  'bg-white shadow-md'  'bg-transparent hoverbg-white50'}`}
              
                button 
                  onClick={() = setOpenIndex(openIndex === index  -1  index)}
                  className=w-full px-6 py-5 flex items-center justify-between text-left focusoutline-none
                
                  span className=font-bold text-[#1A1F4E] pr-4{faq.q}span
                  ChevronDown 
                    size={20} 
                    className={`text-[#C9A84C] shrink-0 transition-transform duration-300 ${openIndex === index  'rotate-180'  ''}`} 
                  
                button
                div 
                  className={`px-6 overflow-hidden transition-all duration-300 ease-in-out ${openIndex === index  'max-h-96 pb-5 opacity-100'  'max-h-0 opacity-0'}`}
                
                  p className=text-[#1A1F4E]80 font-medium leading-relaxed
                    {faq.a}
                  p
                div
              div
            Reveal
          ))}
        div
      div
    section
  );
};

const FinalCTA = () = {
  return (
    section id=contato className=bg-gradient-to-b from-[#1A1F4E] to-[#2D3170] py-24 relative overflow-hidden noise-overlay
      { Background Shield Watermark }
      div className=absolute top-12 left-12 -translate-x-12 -translate-y-12 opacity-[0.03] pointer-events-none w-full max-w-3xl text-[#C9A84C]
        svg viewBox=0 0 24 24 fill=currentColor className=w-full h-full
          path d=M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10zpath
        svg
      div

      div className=max-w-4xl mx-auto px-6 relative z-10 text-center
        Reveal
          div className=inline-flex items-center gap-2 bg-[#25D366]10 border border-[#25D366]30 px-4 py-2 rounded-full mb-8
            span className=w-2.5 h-2.5 bg-[#25D366] rounded-full animate-pulse shadow-[0_0_8px_#25D366]span
            span className=text-[#25D366] text-sm font-boldNossa consultora está disponível agoraspan
          div
        Reveal

        Reveal delay={100}
          h2 className=text-4xl mdtext-5xl font-extrabold text-white mb-6 leading-tight
            Pronto para pagar menos e ter span className=text-[#C9A84C]mais coberturaspan
          h2
        Reveal

        Reveal delay={200}
          p className=text-white80 text-lg mdtext-xl font-medium mb-12 max-w-2xl mx-auto
            Mande uma mensagem agora. Nossa consultora responde em até 1 hora e já te apresenta os planos com os preços reais para o seu CNPJ.
          p
        Reveal

        Reveal delay={300} className=flex flex-col items-center
          a href={WPP_LINK} target=_blank rel=noopener noreferrer className=bg-[#25D366] hoverbg-[#20b858] text-white px-8 py-5 rounded-xl font-bold text-lg mdtext-xl flex items-center justify-center gap-3 transition-all shadow-[0_8px_30px_rgba(37,211,102,0.4)] hovershadow-[0_8px_40px_rgba(37,211,102,0.6)] hover-translate-y-1 mb-6 pulse-ring w-full smw-auto
            MessageCircle size={28} 
            Falar com consultora AGORA — é grátis
          a
          
          p className=text-white50 text-sm font-medium mb-8
            ⏱ Tempo médio de resposta menos de 1 hora • Segunda a Sábado, 8h às 20h
          p

          div className=flex flex-wrap justify-center gap-x-8 gap-y-4 text-sm font-semibold text-white70
            span className=flex items-center gap-2Shield size={16} className=text-[#C9A84C]  Sem compromissospan
            span className=flex items-center gap-2Zap size={16} className=text-[#C9A84C]  Resposta rápidaspan
            span className=flex items-center gap-2CheckCircle size={16} className=text-[#C9A84C]  100% gratuitospan
          div
        Reveal
      div
    section
  );
};

const Footer = () = {
  return (
    footer className=bg-[#0F1235] py-12 border-t border-[#1A1F4E]
      div className=max-w-7xl mx-auto px-6 flex flex-col mdflex-row justify-between items-center mditems-start gap-8 text-center mdtext-left
        
        div className=flex flex-col items-center mditems-start
          { Logo Footer Placeholder }
          div id=footer-logo className=h-[48px] w-[140px] bg-white5 rounded flex items-center justify-center border border-white10 text-white font-bold text-sm tracking-widest uppercase mb-4
            LEXUS
          div
          p className=text-white60 font-medium text-sm
            Corretora de Seguros  Rio de Janeiro, RJ
          p
        div

        div className=flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm
          a href=#inicio className=text-white60 hovertext-[#C9A84C] font-medium transition-colorsInícioa
          a href=#planos className=text-white60 hovertext-[#C9A84C] font-medium transition-colorsPlanosa
          a href=#seguradoras className=text-white60 hovertext-[#C9A84C] font-medium transition-colorsSeguradorasa
          a href=#depoimentos className=text-white60 hovertext-[#C9A84C] font-medium transition-colorsDepoimentosa
          a href=#contato className=text-white60 hovertext-[#C9A84C] font-medium transition-colorsContatoa
        div

        div className=flex flex-col items-center mditems-end text-sm
          a href={WPP_LINK} className=text-[#25D366] font-bold mb-2 hoverunderline
            WhatsApp (21) 95921-5521
          a
          p className=text-white40 mb-1© 2026 Lexus Seguros. Todos os direitos reservados.p
        div
      div
    footer
  );
};

const FloatingWhatsApp = () = {
  return (
    
      { Desktop Floating Button }
      div className=hidden mdblock fixed bottom-8 right-8 z-50
        a href={WPP_LINK} target=_blank rel=noopener noreferrer className=flex items-center group
          div className=bg-white px-4 py-2 rounded-l-xl shadow-lg border border-gray-100 mr-[-10px] pr-5 opacity-0 translate-x-4 group-hoveropacity-100 group-hovertranslate-x-0 transition-all duration-300
            span className=block text-[#1A1F4E] font-bold text-sm whitespace-nowrapFalar agoraspan
            span className=block text-[#25D366] font-semibold text-xs whitespace-nowrapResposta em 1hspan
          div
          div className=bg-[#25D366] w-16 h-16 rounded-full flex items-center justify-center text-white shadow-premium relative z-10 hoverscale-110 transition-transform pulse-ring
            MessageCircle size={32} 
          div
        a
      div

      { Mobile Fixed Bottom Bar }
      div className=mdhidden fixed bottom-0 left-0 w-full z-50 bg-white border-t border-gray-200 p-4 pb-6 shadow-[0_-4px_20px_rgba(0,0,0,0.05)]
        a href={WPP_LINK} target=_blank rel=noopener noreferrer className=bg-[#25D366] text-white w-full py-4 rounded-xl flex items-center justify-center gap-2 font-bold text-lg shadow-premium pulse-ring
          MessageCircle size={24} 
          Falar agora — Resposta em 1h
        a
      div
    
  );
};

export default function App() {
  useEffect(() = {
    document.title = Lexus Seguros — Plano de Saúde para MEI e CNPJ no Rio de Janeiro;
    const metaDesc = document.querySelector('meta[name=description]');
    if (metaDesc) {
      metaDesc.setAttribute(content, Economize até 40% no plano de saúde usando seu CNPJ. Bradesco, Amil, SulAmérica e mais. Atendimento humanizado no Rio de Janeiro.);
    } else {
      const meta = document.createElement('meta');
      meta.name = description;
      meta.content = Economize até 40% no plano de saúde usando seu CNPJ. Bradesco, Amil, SulAmérica e mais. Atendimento humanizado no Rio de Janeiro.;
      document.head.appendChild(meta);
    }
  }, []);

  return (
    div className=font-montserrat text-[#1A1F4E] pb-[90px] mdpb-0
      GlobalStyles 
      Navbar 
      Hero 
      ValueProposition 
      Plans 
      HowItWorks 
      Partners 
      WhyUs 
      Testimonials 
      FAQ 
      FinalCTA 
      Footer 
      FloatingWhatsApp 
    div
  );
}