import React, { useState } from "react";
import { motion } from "framer-motion";
import {
  Bot,
  Megaphone,
  Share2,
  ArrowRight,
  CheckCircle2,
  Sparkles,
  BarChart3,
  MessageCircle,
  Target,
  ShieldCheck,
  Zap,
  Menu,
  X,
  Star,
  PhoneCall,
  BrainCircuit,
  LineChart,
  Users,
  CalendarCheck,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

const fadeUp = {
  hidden: { opacity: 0, y: 28 },
  visible: { opacity: 1, y: 0 },
};

const stagger = {
  visible: {
    transition: {
      staggerChildren: 0.12,
    },
  },
};

const services = [
  {
    icon: Bot,
    title: "Agentes de IA para Atendimento",
    description:
      "Atendimento 24/7 com agentes inteligentes treinados para responder, qualificar leads, recuperar vendas e encaminhar oportunidades reais para seu time.",
    features: ["WhatsApp e site", "Qualificação automática", "Base de conhecimento", "Follow-up inteligente"],
  },
  {
    icon: Megaphone,
    title: "Gestão de Tráfego Pago",
    description:
      "Campanhas orientadas por dados para transformar investimento em previsibilidade comercial, com criativos, funis e otimização contínua.",
    features: ["Meta Ads", "Google Ads", "Remarketing", "Otimização de CPA"],
  },
  {
    icon: Share2,
    title: "Gestão de Redes Sociais",
    description:
      "Conteúdo com posicionamento, frequência e intenção comercial para construir autoridade, relacionamento e demanda qualificada.",
    features: ["Calendário editorial", "Design premium", "Copy estratégica", "Relatórios mensais"],
  },
];

const phases = [
  {
    number: "01",
    title: "Diagnóstico Comercial",
    text: "Mapeamos sua oferta, funil, canais, objeções, tom de voz e gargalos de conversão.",
    icon: Target,
  },
  {
    number: "02",
    title: "Arquitetura da Máquina",
    text: "Desenhamos a jornada completa: anúncio, conteúdo, landing page, atendimento por IA e passagem para vendas.",
    icon: BrainCircuit,
  },
  {
    number: "03",
    title: "Implementação Integrada",
    text: "Conectamos campanhas, agentes de IA, automações, CRM, criativos e redes sociais em um único fluxo.",
    icon: Zap,
  },
  {
    number: "04",
    title: "Otimização e Escala",
    text: "Analisamos dados, testamos hipóteses e ampliamos o que traz leads, conversas e vendas com melhor custo.",
    icon: LineChart,
  },
];

const metrics = [
  { value: "24/7", label: "Atendimento ativo" },
  { value: "+3x", label: "Mais velocidade no lead" },
  { value: "360°", label: "Funil integrado" },
  { value: "IA + Mídia", label: "Execução híbrida" },
];

const plans = [
  {
    name: "Start",
    price: "Essencial",
    description: "Para empresas que querem organizar presença digital e iniciar captação com inteligência.",
    items: ["Gestão de 1 rede social", "Campanhas iniciais", "Relatório mensal", "Configuração básica de IA"],
  },
  {
    name: "Growth",
    price: "Mais escolhido",
    description: "Para negócios que desejam tráfego, conteúdo e atendimento automatizado trabalhando juntos.",
    highlighted: true,
    items: ["Gestão de tráfego completa", "Agente de IA treinado", "Calendário de conteúdo", "Otimização quinzenal", "Dashboard de performance"],
  },
  {
    name: "Scale",
    price: "Avançado",
    description: "Para operações que precisam escalar vendas com automação, mídia e inteligência comercial.",
    items: ["Múltiplos agentes de IA", "Funis por segmento", "Testes A/B", "Integração com CRM", "Reuniões estratégicas"],
  },
];

function Header() {
  const [open, setOpen] = useState(false);
  const links = ["Serviços", "Método", "Planos", "Contato"];

  return (
    <header className="fixed left-0 top-0 z-50 w-full border-b border-white/10 bg-slate-950/75 backdrop-blur-xl">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 lg:px-8">
        <a href="#top" className="flex items-center gap-3">
          <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-cyan-400 text-slate-950 shadow-lg shadow-cyan-400/20">
            <Sparkles size={23} />
          </div>
          <div>
            <p className="text-lg font-black tracking-tight text-white">NEXAIA</p>
            <p className="-mt-1 text-xs text-slate-400">Marketing & Inteligência Artificial</p>
          </div>
        </a>

        <nav className="hidden items-center gap-8 md:flex">
          {links.map((link) => (
            <a key={link} href={`#${link.toLowerCase()}`} className="text-sm font-medium text-slate-300 transition hover:text-cyan-300">
              {link}
            </a>
          ))}
        </nav>

        <a href="#contato" className="hidden md:block">
          <Button className="rounded-full bg-white px-5 font-bold text-slate-950 hover:bg-cyan-200">
            Solicitar diagnóstico
          </Button>
        </a>

        <button onClick={() => setOpen(!open)} className="rounded-xl border border-white/10 p-2 text-white md:hidden">
          {open ? <X /> : <Menu />}
        </button>
      </div>

      {open && (
        <div className="border-t border-white/10 bg-slate-950 px-5 py-5 md:hidden">
          <div className="flex flex-col gap-4">
            {links.map((link) => (
              <a key={link} onClick={() => setOpen(false)} href={`#${link.toLowerCase()}`} className="text-slate-200">
                {link}
              </a>
            ))}
            <a href="#contato" onClick={() => setOpen(false)}>
              <Button className="w-full rounded-full bg-cyan-400 font-bold text-slate-950 hover:bg-cyan-300">Solicitar diagnóstico</Button>
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

function SectionTitle({ eyebrow, title, description }) {
  return (
    <motion.div variants={fadeUp} initial="hidden" whileInView="visible" viewport={{ once: true, margin: "-100px" }} transition={{ duration: 0.6 }} className="mx-auto mb-12 max-w-3xl text-center">
      <p className="mb-3 text-sm font-black uppercase tracking-[0.25em] text-cyan-300">{eyebrow}</p>
      <h2 className="text-3xl font-black tracking-tight text-white md:text-5xl">{title}</h2>
      <p className="mt-5 text-lg leading-8 text-slate-300">{description}</p>
    </motion.div>
  );
}

function Hero() {
  return (
    <section id="top" className="relative overflow-hidden bg-slate-950 pt-32 text-white md:pt-40">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.24),transparent_36%),radial-gradient(circle_at_top_right,rgba(168,85,247,0.2),transparent_34%),linear-gradient(to_bottom,rgba(15,23,42,0),#020617)]" />
      <div className="absolute left-1/2 top-28 h-72 w-72 -translate-x-1/2 rounded-full bg-cyan-400/10 blur-3xl" />

      <div className="relative mx-auto grid max-w-7xl items-center gap-12 px-5 pb-20 lg:grid-cols-[1.05fr_0.95fr] lg:px-8">
        <motion.div variants={stagger} initial="hidden" animate="visible">
          <motion.div variants={fadeUp} className="mb-6 inline-flex items-center gap-2 rounded-full border border-cyan-300/20 bg-cyan-300/10 px-4 py-2 text-sm font-semibold text-cyan-100">
            <Bot size={17} /> Marketing, IA e vendas conectados em uma única operação
          </motion.div>

          <motion.h1 variants={fadeUp} className="max-w-4xl text-4xl font-black leading-tight tracking-tight md:text-6xl lg:text-7xl">
            Transforme atenção em conversa, conversa em lead e lead em venda.
          </motion.h1>

          <motion.p variants={fadeUp} className="mt-7 max-w-2xl text-lg leading-8 text-slate-300 md:text-xl">
            Criamos máquinas de crescimento com agentes de inteligência artificial, tráfego pago e redes sociais para empresas que querem vender mais sem perder oportunidades pelo caminho.
          </motion.p>

          <motion.div variants={fadeUp} className="mt-9 flex flex-col gap-4 sm:flex-row">
            <a href="#contato">
              <Button className="h-14 rounded-full bg-cyan-400 px-8 text-base font-black text-slate-950 hover:bg-cyan-300">
                Quero minha estratégia <ArrowRight className="ml-2" size={19} />
              </Button>
            </a>
            <a href="#metodo">
              <Button variant="outline" className="h-14 rounded-full border-white/15 bg-white/5 px-8 text-base font-bold text-white hover:bg-white/10 hover:text-white">
                Ver método
              </Button>
            </a>
          </motion.div>
        </motion.div>

        <motion.div initial={{ opacity: 0, scale: 0.94, y: 30 }} animate={{ opacity: 1, scale: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }} className="relative">
          <div className="absolute -inset-4 rounded-[2.5rem] bg-gradient-to-br from-cyan-400/30 via-fuchsia-500/10 to-blue-500/20 blur-2xl" />
          <Card className="relative overflow-hidden rounded-[2.2rem] border-white/10 bg-white/[0.06] shadow-2xl shadow-cyan-950/60 backdrop-blur-xl">
            <CardContent className="p-6 md:p-8">
              <div className="mb-6 flex items-center justify-between">
                <div>
                  <p className="text-sm font-bold text-slate-400">Painel de Crescimento</p>
                  <h3 className="text-2xl font-black text-white">Operação integrada</h3>
                </div>
                <div className="rounded-2xl bg-emerald-400/15 px-3 py-2 text-sm font-bold text-emerald-300">Online</div>
              </div>

              <div className="grid gap-4">
                {[
                  { label: "Leads qualificados", value: "1.284", icon: Users },
                  { label: "Conversas por IA", value: "8.742", icon: MessageCircle },
                  { label: "ROAS em otimização", value: "4.7x", icon: BarChart3 },
                ].map((item) => (
                  <div key={item.label} className="flex items-center justify-between rounded-3xl border border-white/10 bg-slate-950/50 p-5">
                    <div className="flex items-center gap-4">
                      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-300/10 text-cyan-300">
                        <item.icon />
                      </div>
                      <p className="font-bold text-slate-200">{item.label}</p>
                    </div>
                    <p className="text-2xl font-black text-white">{item.value}</p>
                  </div>
                ))}
              </div>

              <div className="mt-6 rounded-3xl bg-gradient-to-br from-cyan-400 to-blue-500 p-5 text-slate-950">
                <p className="text-sm font-black uppercase tracking-widest">Agente IA</p>
                <p className="mt-2 text-xl font-black">“Olá! Posso entender sua necessidade e agendar uma conversa com o especialista ideal.”</p>
              </div>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </section>
  );
}

function Metrics() {
  return (
    <section className="border-y border-white/10 bg-slate-950 py-8">
      <div className="mx-auto grid max-w-7xl grid-cols-2 gap-4 px-5 md:grid-cols-4 lg:px-8">
        {metrics.map((metric) => (
          <div key={metric.label} className="rounded-3xl bg-white/[0.04] p-6 text-center">
            <p className="text-3xl font-black text-white">{metric.value}</p>
            <p className="mt-2 text-sm font-medium text-slate-400">{metric.label}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Services() {
  return (
    <section id="serviços" className="bg-slate-950 px-5 py-24 lg:px-8">
      <SectionTitle
        eyebrow="Serviços"
        title="As três forças que movem sua aquisição digital"
        description="Não tratamos IA, tráfego e conteúdo como peças soltas. Unimos tudo em uma experiência comercial contínua, mensurável e escalável."
      />

      <motion.div variants={stagger} initial="hidden" whileInView="visible" viewport={{ once: true, margin: "-100px" }} className="mx-auto grid max-w-7xl gap-6 md:grid-cols-3">
        {services.map((service) => (
          <motion.div key={service.title} variants={fadeUp}>
            <Card className="h-full rounded-[2rem] border-white/10 bg-white/[0.04] transition hover:-translate-y-2 hover:bg-white/[0.07]">
              <CardContent className="flex h-full flex-col p-7">
                <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-2xl bg-cyan-300/10 text-cyan-300">
                  <service.icon size={28} />
                </div>
                <h3 className="text-2xl font-black text-white">{service.title}</h3>
                <p className="mt-4 flex-1 leading-7 text-slate-300">{service.description}</p>
                <div className="mt-7 grid gap-3">
                  {service.features.map((feature) => (
                    <div key={feature} className="flex items-center gap-3 text-sm font-semibold text-slate-200">
                      <CheckCircle2 className="text-cyan-300" size={18} /> {feature}
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </motion.div>
    </section>
  );
}

function Method() {
  return (
    <section id="metodo" className="relative overflow-hidden bg-slate-900 px-5 py-24 lg:px-8">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(34,211,238,0.12),transparent_40%)]" />
      <div className="relative mx-auto max-w-7xl">
        <SectionTitle
          eyebrow="Método"
          title="Da descoberta à escala: tudo conectado por dados"
          description="Nosso processo evita campanhas isoladas e cria uma jornada na qual cada etapa alimenta a próxima."
        />

        <div className="grid gap-6 lg:grid-cols-4">
          {phases.map((phase, index) => (
            <motion.div key={phase.title} initial={{ opacity: 0, y: 25 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: index * 0.08 }} className="relative">
              <Card className="h-full rounded-[2rem] border-white/10 bg-slate-950/70">
                <CardContent className="p-7">
                  <div className="mb-7 flex items-center justify-between">
                    <span className="text-5xl font-black text-white/10">{phase.number}</span>
                    <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-300/10 text-cyan-300">
                      <phase.icon />
                    </div>
                  </div>
                  <h3 className="text-xl font-black text-white">{phase.title}</h3>
                  <p className="mt-4 leading-7 text-slate-300">{phase.text}</p>
                </CardContent>
              </Card>
              {index < phases.length - 1 && <div className="absolute -right-4 top-1/2 hidden text-cyan-300/60 lg:block"><ArrowRight /></div>}
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Benefits() {
  const items = [
    { icon: MessageCircle, title: "Menos leads perdidos", text: "A IA responde rápido, coleta dados e mantém o interesse vivo até o contato humano certo." },
    { icon: ShieldCheck, title: "Mais consistência comercial", text: "Toda interação segue uma lógica estratégica, com tom de voz, critérios e próximos passos definidos." },
    { icon: CalendarCheck, title: "Mais reuniões qualificadas", text: "O atendimento automatizado filtra curiosos e prioriza oportunidades com intenção real de compra." },
    { icon: BarChart3, title: "Mais clareza de performance", text: "Você acompanha o que atrai, engaja, conversa e converte — não apenas curtidas ou cliques." },
  ];

  return (
    <section className="bg-slate-950 px-5 py-24 lg:px-8">
      <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[0.9fr_1.1fr]">
        <motion.div initial={{ opacity: 0, x: -25 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}>
          <p className="mb-3 text-sm font-black uppercase tracking-[0.25em] text-cyan-300">Por que funciona</p>
          <h2 className="text-3xl font-black tracking-tight text-white md:text-5xl">Marketing não termina no clique. Ele começa na conversa.</h2>
          <p className="mt-6 text-lg leading-8 text-slate-300">
            Campanhas atraem atenção. Redes sociais constroem desejo. Agentes de IA transformam esse interesse em diálogo imediato. Quando essas frentes operam juntas, o crescimento deixa de depender de sorte.
          </p>
          <div className="mt-8 flex items-center gap-3 rounded-3xl border border-cyan-300/20 bg-cyan-300/10 p-5 text-cyan-100">
            <Star className="shrink-0" />
            <p className="font-semibold">A proposta é simples: criar um sistema que nunca deixa uma oportunidade esfriar.</p>
          </div>
        </motion.div>

        <div className="grid gap-5 sm:grid-cols-2">
          {items.map((item, index) => (
            <motion.div key={item.title} initial={{ opacity: 0, y: 25 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: index * 0.08 }}>
              <Card className="h-full rounded-[2rem] border-white/10 bg-white/[0.04]">
                <CardContent className="p-6">
                  <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-cyan-300">
                    <item.icon />
                  </div>
                  <h3 className="text-xl font-black text-white">{item.title}</h3>
                  <p className="mt-3 leading-7 text-slate-300">{item.text}</p>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Plans() {
  return (
    <section id="planos" className="bg-slate-900 px-5 py-24 lg:px-8">
      <SectionTitle
        eyebrow="Planos"
        title="Escolha o nível da sua máquina de crescimento"
        description="Cada plano pode ser ajustado ao seu momento, segmento e estrutura comercial."
      />

      <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-3">
        {plans.map((plan) => (
          <Card key={plan.name} className={`relative rounded-[2rem] ${plan.highlighted ? "border-cyan-300 bg-cyan-300 text-slate-950 shadow-2xl shadow-cyan-900/40" : "border-white/10 bg-white/[0.04] text-white"}`}>
            {plan.highlighted && <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-slate-950 px-4 py-2 text-xs font-black uppercase tracking-widest text-cyan-300">Recomendado</div>}
            <CardContent className="p-8">
              <p className={`text-sm font-black uppercase tracking-[0.25em] ${plan.highlighted ? "text-slate-700" : "text-cyan-300"}`}>{plan.price}</p>
              <h3 className="mt-3 text-3xl font-black">{plan.name}</h3>
              <p className={`mt-4 leading-7 ${plan.highlighted ? "text-slate-800" : "text-slate-300"}`}>{plan.description}</p>
              <div className="mt-8 grid gap-4">
                {plan.items.map((item) => (
                  <div key={item} className="flex items-center gap-3 font-semibold">
                    <CheckCircle2 size={19} /> {item}
                  </div>
                ))}
              </div>
              <a href="#contato">
                <Button className={`mt-9 h-13 w-full rounded-full font-black ${plan.highlighted ? "bg-slate-950 text-white hover:bg-slate-800" : "bg-white text-slate-950 hover:bg-cyan-200"}`}>
                  Conversar sobre este plano
                </Button>
              </a>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section id="contato" className="relative overflow-hidden bg-slate-950 px-5 py-24 lg:px-8">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom,rgba(34,211,238,0.18),transparent_42%)]" />
      <div className="relative mx-auto max-w-5xl rounded-[2.5rem] border border-white/10 bg-white/[0.06] p-8 text-center shadow-2xl backdrop-blur-xl md:p-14">
        <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-3xl bg-cyan-400 text-slate-950">
          <PhoneCall size={30} />
        </div>
        <h2 className="text-3xl font-black tracking-tight text-white md:text-5xl">Pronto para criar uma operação que responde, atrai e vende?</h2>
        <p className="mx-auto mt-6 max-w-3xl text-lg leading-8 text-slate-300">
          Solicite um diagnóstico e descubra como conectar agentes de IA, tráfego pago e redes sociais em um funil inteligente para o seu negócio.
        </p>
        <div className="mt-9 flex flex-col justify-center gap-4 sm:flex-row">
          <a href="https://wa.me/5500000000000?text=Ol%C3%A1%2C%20quero%20um%20diagn%C3%B3stico%20para%20minha%20empresa" target="_blank" rel="noreferrer">
            <Button className="h-14 rounded-full bg-cyan-400 px-8 text-base font-black text-slate-950 hover:bg-cyan-300">
              Chamar no WhatsApp <ArrowRight className="ml-2" size={19} />
            </Button>
          </a>
          <a href="mailto:contato@nexaia.com.br">
            <Button variant="outline" className="h-14 rounded-full border-white/15 bg-white/5 px-8 text-base font-bold text-white hover:bg-white/10 hover:text-white">
              Enviar e-mail
            </Button>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-white/10 bg-slate-950 px-5 py-10 lg:px-8">
      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-5 text-center md:flex-row md:text-left">
        <div>
          <p className="text-lg font-black text-white">NEXAIA</p>
          <p className="text-sm text-slate-400">Agência de Marketing, IA e Performance</p>
        </div>
        <p className="text-sm text-slate-500">© 2026 NEXAIA. Todos os direitos reservados.</p>
      </div>
    </footer>
  );
}

export default function MarketingAgencyWebsite() {
  return (
    <main className="min-h-screen bg-slate-950 font-sans">
      <Header />
      <Hero />
      <Metrics />
      <Services />
      <Method />
      <Benefits />
      <Plans />
      <CTA />
      <Footer />
    </main>
  );
}