import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  MessageCircle,
  Mic,
  Image as ImageIcon,
  Zap,
  TrendingUp,
  Clock,
  Users,
  Shield,
  CheckCircle2,
  Star,
  ArrowRight,
  Sparkles,
  BarChart3,
  Globe,
  Lock,
  PhoneCall,
  FileText,
  DollarSign,
  Headphones,
  ChevronRight,
  Award,
  Mail,
  User,
  Building2
} from 'lucide-react';
import { motion } from 'framer-motion';

export default function Home() {
  const [scrolled, setScrolled] = useState(false);
  const [email, setEmail] = useState('');
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [loginEmail, setLoginEmail] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [signupName, setSignupName] = useState('');
  const [signupPharmacy, setSignupPharmacy] = useState('');
  const [signupEmail, setSignupEmail] = useState('');
  const [signupPassword, setSignupPassword] = useState('');

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

  const fadeInUp = {
    initial: { opacity: 0, y: 60 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true },
    transition: { duration: 0.6 }
  };

  const staggerContainer = {
    initial: {},
    whileInView: {
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  const openWhatsApp = () => {
    window.open('https://wa.me/5562983013105', '_blank');
  };

  const scrollToSection = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  const handleLogin = (e) => {
    e.preventDefault();
    // Aqui você implementaria a lógica de login
    console.log('Login:', { loginEmail, loginPassword });
    alert('Login em desenvolvimento!');
    setShowLoginModal(false); // Close modal after action
  };

  const handleSignup = (e) => {
    e.preventDefault();
    // Aqui você implementaria a lógica de cadastro
    console.log('Cadastro:', { signupName, signupPharmacy, signupEmail, signupPassword });
    alert('Cadastro em desenvolvimento!');
    setShowLoginModal(false); // Close modal after action
  };

  return (
    <div className="min-h-screen bg-[#FAFAF9]">
      {/* Login/Signup Modal */}
      <Dialog open={showLoginModal} onOpenChange={setShowLoginModal}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <div className="flex items-center gap-2 mb-2">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center">
                <MessageCircle className="w-6 h-6 text-white" />
              </div>
              <DialogTitle className="text-2xl">Infinity PharmIA</DialogTitle>
            </div>
            <DialogDescription>
              Acesse sua conta ou crie uma nova para começar
            </DialogDescription>
          </DialogHeader>

          <Tabs defaultValue="login" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="login">Login</TabsTrigger>
              <TabsTrigger value="signup">Cadastrar</TabsTrigger>
            </TabsList>

            <TabsContent value="login" className="space-y-4 mt-4">
              <form onSubmit={handleLogin} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="login-email">Email</Label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                    <Input
                      id="login-email"
                      type="email"
                      placeholder="seu@email.com"
                      value={loginEmail}
                      onChange={(e) => setLoginEmail(e.target.value)}
                      className="pl-10 h-12"
                      required
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="login-password">Senha</Label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                    <Input
                      id="login-password"
                      type="password"
                      placeholder="••••••••"
                      value={loginPassword}
                      onChange={(e) => setLoginPassword(e.target.value)}
                      className="pl-10 h-12"
                      required
                    />
                  </div>
                </div>

                <div className="flex justify-end">
                  <a href="#" className="text-sm text-blue-600 hover:text-blue-700">
                    Esqueceu sua senha?
                  </a>
                </div>

                <Button type="submit" className="w-full h-12 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800">
                  Entrar
                  <ArrowRight className="w-4 h-4 ml-2" />
                </Button>
              </form>
            </TabsContent>

            <TabsContent value="signup" className="space-y-4 mt-4">
              <form onSubmit={handleSignup} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="signup-name">Nome Completo</Label>
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                    <Input
                      id="signup-name"
                      type="text"
                      placeholder="João Silva"
                      value={signupName}
                      onChange={(e) => setSignupName(e.target.value)}
                      className="pl-10 h-12"
                      required
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="signup-pharmacy">Nome da Farmácia</Label>
                  <div className="relative">
                    <Building2 className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                    <Input
                      id="signup-pharmacy"
                      type="text"
                      placeholder="Farmácia Exemplo"
                      value={signupPharmacy}
                      onChange={(e) => setSignupPharmacy(e.target.value)}
                      className="pl-10 h-12"
                      required
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="signup-email">Email</Label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                    <Input
                      id="signup-email"
                      type="email"
                      placeholder="seu@email.com"
                      value={signupEmail}
                      onChange={(e) => setSignupEmail(e.target.value)}
                      className="pl-10 h-12"
                      required
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="signup-password">Senha</Label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                    <Input
                      id="signup-password"
                      type="password"
                      placeholder="••••••••"
                      value={signupPassword}
                      onChange={(e) => setSignupPassword(e.target.value)}
                      className="pl-10 h-12"
                      required
                    />
                  </div>
                  <p className="text-xs text-gray-500">Mínimo 8 caracteres</p>
                </div>

                <Button type="submit" className="w-full h-12 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800">
                  Criar Conta
                  <ArrowRight className="w-4 h-4 ml-2" />
                </Button>

                <p className="text-xs text-center text-gray-500">
                  Ao criar uma conta, você aceita nossos{' '}
                  <a href="#" className="text-blue-600 hover:underline">Termos de Uso</a>
                  {' '}e{' '}
                  <a href="#" className="text-blue-600 hover:underline">Política de Privacidade</a>
                </p>
              </form>
            </TabsContent>
          </Tabs>
        </DialogContent>
      </Dialog>

      {/* Fixed Header */}
      <motion.header
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
          scrolled ? 'bg-white/95 backdrop-blur-md shadow-lg' : 'bg-transparent'
        }`}
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.6 }}
      >
        <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center">
              <MessageCircle className="w-6 h-6 text-white" />
            </div>
            <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
              Infinity PharmIA
            </span>
          </div>

          <div className="hidden md:flex items-center gap-8">
            <button onClick={() => scrollToSection('como-funciona')} className="text-gray-600 hover:text-blue-600 transition-colors font-medium">
              Como Funciona
            </button>
            <button onClick={() => scrollToSection('recursos')} className="text-gray-600 hover:text-blue-600 transition-colors font-medium">
              Recursos
            </button>
            <button onClick={() => scrollToSection('precos')} className="text-gray-600 hover:text-blue-600 transition-colors font-medium">
              Preços
            </button>
            <button onClick={() => scrollToSection('depoimentos')} className="text-gray-600 hover:text-blue-600 transition-colors font-medium">
              Depoimentos
            </button>
          </div>

          <div className="flex items-center gap-3">
            <Button variant="outline" onClick={openWhatsApp} className="hidden sm:flex">
              Falar com Consultor
            </Button>
            <Button onClick={() => setShowLoginModal(true)} className="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800">
              Login
            </Button>
          </div>
        </nav>
      </motion.header>

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 px-4 overflow-hidden">
        {/* Decorative Background */}
        <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-green-50 to-blue-50 opacity-60" />
        <div className="absolute top-20 right-0 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-green-400/20 rounded-full blur-3xl" />

        <div className="relative max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -60 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8 }}
              className="space-y-8"
            >
              <Badge className="bg-gradient-to-r from-blue-600 to-green-600 text-white border-none">
                <Sparkles className="w-3 h-3 mr-1" />
                Inteligência Artificial para Farmácias
              </Badge>

              <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight">
                Automatize Seu
                <span className="block bg-gradient-to-r from-blue-600 via-green-600 to-blue-600 bg-clip-text text-transparent">
                  Atendimento
                </span>
                no WhatsApp
              </h1>

              <p className="text-xl text-gray-600 leading-relaxed">
                IA que processa pedidos via texto, áudio ou foto da receita. 
                Gera orçamentos automáticos e aumenta suas vendas em até 30%.
              </p>

              <div className="flex flex-col sm:flex-row gap-4">
                <Button 
                  size="lg" 
                  className="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-lg h-14 px-8"
                  onClick={() => setShowLoginModal(true)}
                >
                  <Zap className="w-5 h-5 mr-2" />
                  Começar Agora
                </Button>
                <Button 
                  size="lg" 
                  variant="outline"
                  className="text-lg h-14 px-8 border-2 hover:bg-blue-50"
                  onClick={openWhatsApp}
                >
                  <PhoneCall className="w-5 h-5 mr-2" />
                  Agendar Demonstração
                </Button>
              </div>

              <div className="flex items-center gap-8 pt-4">
                <div className="flex items-center gap-2">
                  <div className="flex -space-x-2">
                    {[1, 2, 3, 4].map((i) => (
                      <div key={i} className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 border-2 border-white" />
                    ))}
                  </div>
                  <div className="text-sm">
                    <div className="font-semibold text-gray-900">+150 Farmácias</div>
                    <div className="text-gray-500">Já automatizadas</div>
                  </div>
                </div>

                <div className="flex items-center gap-1">
                  {[1, 2, 3, 4, 5].map((i) => (
                    <Star key={i} className="w-5 h-5 fill-yellow-400 text-yellow-400" />
                  ))}
                  <span className="ml-2 font-semibold">4.9/5.0</span>
                </div>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 60 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="relative"
            >
              <div className="relative bg-white rounded-2xl shadow-2xl p-8 border border-gray-100">
                <img 
                  src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=800&q=80" 
                  alt="Dashboard Infinity PharmIA"
                  className="rounded-xl w-full"
                />
                <div className="absolute -top-4 -right-4 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-2xl p-4 shadow-xl">
                  <TrendingUp className="w-8 h-8 mb-2" />
                  <div className="font-bold text-2xl">+30%</div>
                  <div className="text-xs opacity-90">Vendas</div>
                </div>
                <div className="absolute -bottom-4 -left-4 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-2xl p-4 shadow-xl">
                  <Clock className="w-8 h-8 mb-2" />
                  <div className="font-bold text-2xl">24/7</div>
                  <div className="text-xs opacity-90">Disponível</div>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Problem & Solution */}
      <section className="py-20 px-4 bg-white" id="problema-solucao">
        <div className="max-w-7xl mx-auto">
          <motion.div {...fadeInUp} className="text-center mb-16">
            <Badge className="mb-4 bg-red-100 text-red-700 border-red-200">
              O Problema
            </Badge>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
              Sua Farmácia Está Perdendo Vendas
            </h2>
            <p className="text-xl text-gray-600">
              E você nem percebe o quanto isso custa
            </p>
          </motion.div>

          <motion.div 
            {...staggerContainer}
            className="grid md:grid-cols-3 gap-8 mb-20"
          >
            {[
              {
                icon: Users,
                color: 'red',
                title: 'Atendimento Sobrecarregado',
                problem: 'Equipe não consegue responder todos os clientes no WhatsApp',
                loss: 'Perda de R$ 15.000/mês em vendas não concretizadas'
              },
              {
                icon: Clock,
                color: 'orange',
                title: 'Respostas Demoradas',
                problem: 'Cliente espera horas para receber um orçamento',
                loss: '70% dos clientes desistem antes de comprar'
              },
              {
                icon: MessageCircle,
                color: 'yellow',
                title: 'Fora do Horário',
                problem: 'Pedidos fora do expediente não são atendidos',
                loss: 'Perde 40% das oportunidades noturnas/fins de semana'
              }
            ].map((item, index) => (
              <motion.div key={index} {...fadeInUp}>
                <Card className="h-full border-2 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                  <CardHeader>
                    <div className={`w-14 h-14 rounded-xl bg-${item.color}-100 flex items-center justify-center mb-4`}>
                      <item.icon className={`w-7 h-7 text-${item.color}-600`} />
                    </div>
                    <CardTitle className="text-xl">{item.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <p className="text-gray-600">{item.problem}</p>
                    <div className="bg-red-50 border border-red-200 rounded-lg p-3">
                      <p className="text-sm font-semibold text-red-700">{item.loss}</p>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </motion.div>

          <motion.div {...fadeInUp} className="text-center mb-12">
            <Badge className="mb-4 bg-green-100 text-green-700 border-green-200">
              A Solução
            </Badge>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
              Infinity PharmIA Resolve Tudo Isso
            </h2>
            <p className="text-xl text-gray-600">
              Automatize 100% do atendimento e venda mais
            </p>
          </motion.div>

          <motion.div 
            {...staggerContainer}
            className="grid md:grid-cols-3 gap-8"
          >
            {[
              {
                icon: Zap,
                color: 'blue',
                title: 'Atendimento Instantâneo',
                solution: 'IA responde em segundos, 24 horas por dia',
                benefit: 'Zero tempo de espera para seus clientes'
              },
              {
                icon: BarChart3,
                color: 'green',
                title: 'Múltiplos Atendimentos',
                solution: 'Atende 100+ clientes simultaneamente',
                benefit: 'Sua equipe foca em vendas complexas'
              },
              {
                icon: TrendingUp,
                color: 'purple',
                title: 'Vendas 24/7',
                solution: 'Não perde nenhum pedido, dia ou noite',
                benefit: '+30% de aumento nas vendas mensais'
              }
            ].map((item, index) => (
              <motion.div key={index} {...fadeInUp}>
                <Card className="h-full border-2 border-green-200 bg-gradient-to-br from-green-50 to-white hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                  <CardHeader>
                    <div className={`w-14 h-14 rounded-xl bg-gradient-to-br from-${item.color}-500 to-${item.color}-600 flex items-center justify-center mb-4`}>
                      <item.icon className="w-7 h-7 text-white" />
                    </div>
                    <CardTitle className="text-xl">{item.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <p className="text-gray-600">{item.solution}</p>
                    <div className="bg-green-100 border border-green-300 rounded-lg p-3">
                      <p className="text-sm font-semibold text-green-700 flex items-center gap-2">
                        <CheckCircle2 className="w-4 h-4" />
                        {item.benefit}
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20 px-4 bg-gradient-to-br from-blue-50 to-green-50" id="como-funciona">
        <div className="max-w-7xl mx-auto">
          <motion.div {...fadeInUp} className="text-center mb-16">
            <Badge className="mb-4 bg-blue-100 text-blue-700 border-blue-200">
              Simples e Rápido
            </Badge>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
              Como Funciona na Prática
            </h2>
            <p className="text-xl text-gray-600">
              Seus clientes fazem pedidos do jeito que preferem
            </p>
          </motion.div>

          <div className="grid lg:grid-cols-2 gap-12 items-center mb-20">
            <motion.div
              initial={{ opacity: 0, x: -40 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="space-y-6"
            >
              {[
                {
                  step: '01',
                  icon: MessageCircle,
                  title: 'Cliente Envia o Pedido',
                  description: 'Via texto, áudio ou foto da receita médica direto no WhatsApp',
                  color: 'blue'
                },
                {
                  step: '02',
                  icon: Sparkles,
                  title: 'IA Processa Automaticamente',
                  description: 'Nossa IA entende o pedido, verifica disponibilidade e calcula valores',
                  color: 'purple'
                },
                {
                  step: '03',
                  icon: FileText,
                  title: 'Orçamento Enviado Instantaneamente',
                  description: 'Cliente recebe orçamento completo em segundos, com opções de pagamento',
                  color: 'green'
                },
                {
                  step: '04',
                  icon: CheckCircle2,
                  title: 'Confirmação e Finalização',
                  description: 'Cliente confirma, paga e recebe. Tudo automatizado e rastreável',
                  color: 'orange'
                }
              ].map((item, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.1 }}
                  className="flex gap-4 group"
                >
                  <div className="relative">
                    <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br from-${item.color}-500 to-${item.color}-600 flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition-transform`}>
                      {item.step}
                    </div>
                    {index < 3 && (
                      <div className="absolute top-full left-1/2 -translate-x-1/2 w-0.5 h-6 bg-gradient-to-b from-gray-300 to-transparent" />
                    )}
                  </div>
                  <div className="flex-1 bg-white rounded-xl p-6 shadow-md group-hover:shadow-xl transition-all">
                    <div className="flex items-center gap-3 mb-2">
                      <item.icon className={`w-6 h-6 text-${item.color}-600`} />
                      <h3 className="text-xl font-bold">{item.title}</h3>
                    </div>
                    <p className="text-gray-600">{item.description}</p>
                  </div>
                </motion.div>
              ))}
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 40 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="relative"
            >
              <div className="bg-white rounded-3xl shadow-2xl p-8 border-4 border-green-200">
                <img 
                  src="https://images.unsplash.com/photo-1556742111-a301076d9d18?w=800&q=80" 
                  alt="Processo automático"
                  className="rounded-2xl w-full mb-4"
                />
                <div className="space-y-3">
                  <div className="flex items-center gap-3 bg-green-50 p-4 rounded-xl">
                    <Mic className="w-6 h-6 text-green-600" />
                    <span className="font-medium">Reconhecimento de Áudio</span>
                  </div>
                  <div className="flex items-center gap-3 bg-blue-50 p-4 rounded-xl">
                    <ImageIcon className="w-6 h-6 text-blue-600" />
                    <span className="font-medium">Leitura de Receitas (OCR)</span>
                  </div>
                  <div className="flex items-center gap-3 bg-purple-50 p-4 rounded-xl">
                    <Zap className="w-6 h-6 text-purple-600" />
                    <span className="font-medium">Processamento Inteligente</span>
                  </div>
                </div>
              </div>
              
              {/* Floating badge */}
              <div className="absolute -top-6 -right-6 bg-gradient-to-br from-yellow-400 to-orange-500 text-white rounded-2xl p-6 shadow-2xl rotate-6 hover:rotate-0 transition-transform">
                <Award className="w-10 h-10 mb-2" />
                <div className="font-bold text-lg">Tempo médio</div>
                <div className="text-3xl font-bold">5 seg</div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section className="py-20 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <motion.div {...fadeInUp} className="text-center mb-16">
            <Badge className="mb-4 bg-green-100 text-green-700 border-green-200">
              Resultados Comprovados
            </Badge>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
              Benefícios Mensuráveis
            </h2>
            <p className="text-xl text-gray-600">
              Dados reais de farmácias que já usam o sistema
            </p>
          </motion.div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                icon: Clock,
                value: '24/7',
                label: 'Atendimento Ininterrupto',
                description: 'Nunca perca um cliente por estar fechado',
                color: 'blue'
              },
              {
                icon: Zap,
                value: '80%',
                label: 'Redução no Tempo',
                description: 'Respostas em segundos, não em horas',
                color: 'purple'
              },
              {
                icon: TrendingUp,
                value: '+30%',
                label: 'Aumento em Vendas',
                description: 'Mais conversões e ticket médio maior',
                color: 'green'
              },
              {
                icon: DollarSign,
                value: 'R$ 8.500',
                label: 'Economia Mensal',
                description: 'Em custos operacionais e equipe',
                color: 'orange'
              }
            ].map((item, index) => (
              <motion.div
                key={index}
                {...fadeInUp}
                transition={{ delay: index * 0.1 }}
              >
                <Card className="h-full text-center hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-2 border-gray-100">
                  <CardHeader>
                    <div className={`w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-${item.color}-500 to-${item.color}-600 flex items-center justify-center mb-4`}>
                      <item.icon className="w-8 h-8 text-white" />
                    </div>
                    <div className={`text-5xl font-bold bg-gradient-to-r from-${item.color}-600 to-${item.color}-700 bg-clip-text text-transparent mb-2`}>
                      {item.value}
                    </div>
                    <CardTitle className="text-lg">{item.label}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600">{item.description}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Features Bento Grid */}
      <section className="py-20 px-4 bg-gradient-to-br from-gray-50 to-blue-50" id="recursos">
        <div className="max-w-7xl mx-auto">
          <motion.div {...fadeInUp} className="text-center mb-16">
            <Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
              Tecnologia de Ponta
            </Badge>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
              Recursos Principais
            </h2>
            <p className="text-xl text-gray-600">
              Tudo que você precisa para automatizar seu atendimento
            </p>
          </motion.div>

          <motion.div
            {...staggerContainer}
            className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
          >
            {[
              {
                icon: Mic,
                title: 'Processamento de Áudios',
                description: 'Transcreve e entende áudios enviados pelos clientes automaticamente',
                color: 'blue',
                size: 'normal'
              },
              {
                icon: ImageIcon,
                title: 'Leitura de Receitas',
                description: 'OCR avançado identifica medicamentos em fotos de receitas médicas',
                color: 'green',
                size: 'normal'
              },
              {
                icon: FileText,
                title: 'Orçamentos Automáticos',
                description: 'Gera propostas completas com preços, descontos e formas de pagamento',
                color: 'purple',
                size: 'normal'
              },
              {
                icon: Globe,
                title: 'Integração WhatsApp Business',
                description: 'Conecta direto com sua conta oficial do WhatsApp Business API',
                color: 'orange',
                size: 'normal'
              },
              {
                icon: Users,
                title: 'Múltiplos Atendimentos',
                description: 'Atende dezenas de clientes ao mesmo tempo sem perder qualidade',
                color: 'pink',
                size: 'normal'
              },
              {
                icon: BarChart3,
                title: 'Dashboard Analytics',
                description: 'Acompanhe métricas, conversões e performance em tempo real',
                color: 'indigo',
                size: 'normal'
              }
            ].map((feature, index) => (
              <motion.div
                key={index}
                {...fadeInUp}
                transition={{ delay: index * 0.1 }}
              >
                <Card className="h-full hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 border-2 border-gray-200 bg-white group">
                  <CardHeader>
                    <div className={`w-14 h-14 rounded-xl bg-gradient-to-br from-${feature.color}-500 to-${feature.color}-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
                      <feature.icon className="w-7 h-7 text-white" />
                    </div>
                    <CardTitle className="text-xl">{feature.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600">{feature.description}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </motion.div>

          <motion.div {...fadeInUp} className="mt-12 text-center">
            <Button size="lg" variant="outline" className="border-2" onClick={() => scrollToSection('precos')}>
              Ver Todos os Recursos
              <ChevronRight className="w-5 h-5 ml-2" />
            </Button>
          </motion.div>
        </div>
      </section>

      {/* Pricing */}
      <section className="py-20 px-4 bg-white" id="precos">
        <div className="max-w-7xl mx-auto">
          <motion.div {...fadeInUp} className="text-center mb-16">
            <Badge className="mb-4 bg-blue-100 text-blue-700 border-blue-200">
              Planos Flexíveis
            </Badge>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
              Escolha Seu Plano
            </h2>
            <p className="text-xl text-gray-600">
              Sem surpresas. Cancele quando quiser.
            </p>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {[
              {
                name: 'Starter',
                price: '97',
                description: 'Ideal para farmácias pequenas',
                limit: 'Até 100 orçamentos/mês',
                features: [
                  'Atendimento WhatsApp 24/7',
                  'Processamento de texto e áudio',
                  'Leitura de receitas (OCR)',
                  'Orçamentos automáticos',
                  'Dashboard básico',
                  'Suporte por email'
                ],
                popular: false,
                color: 'blue'
              },
              {
                name: 'Professional',
                price: '197',
                description: 'Mais vendido para farmácias médias',
                limit: 'Até 500 orçamentos/mês',
                features: [
                  'Tudo do Starter, mais:',
                  'Múltiplos atendentes simultâneos',
                  'Integração com estoque',
                  'Analytics avançado',
                  'Relatórios personalizados',
                  'Suporte prioritário via WhatsApp',
                  'Treinamento da equipe'
                ],
                popular: true,
                color: 'green'
              },
              {
                name: 'Enterprise',
                price: '397',
                description: 'Para redes e grandes farmácias',
                limit: 'Orçamentos ilimitados',
                features: [
                  'Tudo do Professional, mais:',
                  'Atendimentos ilimitados',
                  'API personalizada',
                  'Integração com ERP',
                  'Múltiplas filiais',
                  'Gerente de conta dedicado',
                  'SLA garantido',
                  'Customizações sob demanda'
                ],
                popular: false,
                color: 'purple'
              }
            ].map((plan, index) => (
              <motion.div
                key={index}
                {...fadeInUp}
                transition={{ delay: index * 0.1 }}
              >
                <Card className={`h-full relative ${
                  plan.popular 
                    ? 'border-4 border-green-500 shadow-2xl scale-105' 
                    : 'border-2 border-gray-200'
                }`}>
                  {plan.popular && (
                    <div className="absolute -top-4 left-1/2 -translate-x-1/2">
                      <Badge className="bg-gradient-to-r from-green-600 to-green-700 text-white px-6 py-2 text-sm">
                        <Star className="w-4 h-4 mr-1 inline" />
                        MAIS POPULAR
                      </Badge>
                    </div>
                  )}

                  <CardHeader className="text-center pb-8 pt-8">
                    <CardTitle className="text-2xl mb-2">{plan.name}</CardTitle>
                    <CardDescription className="text-base">{plan.description}</CardDescription>
                    <div className="mt-6">
                      <div className="flex items-baseline justify-center gap-2">
                        <span className="text-gray-600 text-xl">R$</span>
                        <span className="text-6xl font-bold bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
                          {plan.price}
                        </span>
                        <span className="text-gray-600">/mês</span>
                      </div>
                      <p className="text-sm text-gray-500 mt-2">{plan.limit}</p>
                    </div>
                  </CardHeader>

                  <CardContent className="space-y-4">
                    <ul className="space-y-3">
                      {plan.features.map((feature, idx) => (
                        <li key={idx} className="flex items-start gap-3">
                          <CheckCircle2 className={`w-5 h-5 mt-0.5 flex-shrink-0 ${
                            plan.popular ? 'text-green-600' : 'text-blue-600'
                          }`} />
                          <span className="text-gray-700">{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>

                  <CardFooter className="pt-6">
                    <Button 
                      className={`w-full h-12 text-lg ${
                        plan.popular
                          ? 'bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800'
                          : 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800'
                      }`}
                      onClick={() => setShowLoginModal(true)}
                    >
                      {plan.popular ? 'Começar Agora' : 'Escolher Plano'}
                      <ArrowRight className="w-5 h-5 ml-2" />
                    </Button>
                  </CardFooter>
                </Card>
              </motion.div>
            ))}
          </div>

          <motion.div {...fadeInUp} className="mt-12 text-center">
            <p className="text-gray-600 mb-4">
              Todos os planos incluem 7 dias de teste grátis • Sem cartão de crédito
            </p>
            <div className="flex items-center justify-center gap-6 text-sm text-gray-500">
              <div className="flex items-center gap-2">
                <Shield className="w-4 h-4" />
                <span>Dados Criptografados</span>
              </div>
              <div className="flex items-center gap-2">
                <Lock className="w-4 h-4" />
                <span>Conforme LGPD</span>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 px-4 bg-gradient-to-br from-blue-50 to-purple-50" id="depoimentos">
        <div className="max-w-7xl mx-auto">
          <motion.div {...fadeInUp} className="text-center mb-16">
            <Badge className="mb-4 bg-yellow-100 text-yellow-700 border-yellow-200">
              <Star className="w-3 h-3 mr-1 inline" />
              Avaliação 4.9/5.0
            </Badge>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
              O Que Nossos Clientes Dizem
            </h2>
            <p className="text-xl text-gray-600">
              Resultados reais de farmácias que transformaram seu atendimento
            </p>
          </motion.div>

          <motion.div
            {...staggerContainer}
            className="grid md:grid-cols-3 gap-8"
          >
            {[
              {
                name: 'Maria Silva',
                role: 'Proprietária',
                pharmacy: 'Farmácia Saúde Total',
                image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&q=80',
                quote: 'Aumentamos nossas vendas em 35% no primeiro mês. A IA atende melhor que alguns atendentes humanos!',
                result: '+35% em vendas',
                rating: 5
              },
              {
                name: 'João Santos',
                role: 'Gerente',
                pharmacy: 'Drogaria Bem Estar',
                image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&q=80',
                quote: 'Economizamos mais de R$ 12.000 por mês em custos de atendimento. O ROI foi imediato.',
                result: 'R$ 12k economia/mês',
                rating: 5
              },
              {
                name: 'Ana Paula Costa',
                role: 'Diretora',
                pharmacy: 'Rede FarmaSul (5 lojas)',
                image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&q=80',
                quote: 'Implementamos nas 5 lojas. Agora atendemos 24 horas e nossos clientes adoram a rapidez.',
                result: 'Atendimento 24/7',
                rating: 5
              }
            ].map((testimonial, index) => (
              <motion.div
                key={index}
                {...fadeInUp}
                transition={{ delay: index * 0.1 }}
              >
                <Card className="h-full hover:shadow-2xl transition-all duration-300 border-2 border-gray-200">
                  <CardHeader>
                    <div className="flex items-center gap-4 mb-4">
                      <img 
                        src={testimonial.image} 
                        alt={testimonial.name}
                        className="w-16 h-16 rounded-full object-cover border-4 border-blue-200"
                      />
                      <div>
                        <div className="font-bold text-lg">{testimonial.name}</div>
                        <div className="text-sm text-gray-600">{testimonial.role}</div>
                        <div className="text-sm text-blue-600">{testimonial.pharmacy}</div>
                      </div>
                    </div>
                    <div className="flex gap-1">
                      {Array(testimonial.rating).fill(0).map((_, i) => (
                        <Star key={i} className="w-5 h-5 fill-yellow-400 text-yellow-400" />
                      ))}
                    </div>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-700 italic mb-4">"{testimonial.quote}"</p>
                    <Badge className="bg-gradient-to-r from-green-500 to-green-600 text-white">
                      <TrendingUp className="w-3 h-3 mr-1" />
                      {testimonial.result}
                    </Badge>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-20 px-4 bg-white">
        <div className="max-w-4xl mx-auto">
          <motion.div {...fadeInUp} className="text-center mb-16">
            <Badge className="mb-4 bg-gray-100 text-gray-700 border-gray-200">
              Dúvidas Frequentes
            </Badge>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
              Perguntas e Respostas
            </h2>
            <p className="text-xl text-gray-600">
              Tudo que você precisa saber antes de começar
            </p>
          </motion.div>

          <motion.div {...fadeInUp}>
            <Accordion type="single" collapsible className="space-y-4">
              {[
                {
                  q: 'Como funciona a segurança e proteção de dados?',
                  a: 'Todos os dados são criptografados e armazenados em servidores seguros na AWS. Somos 100% conformes com a LGPD e não compartilhamos informações com terceiros. Seus dados de clientes e receitas médicas são protegidos com os mais altos padrões de segurança.'
                },
                {
                  q: 'Quanto tempo leva para implementar?',
                  a: 'A implementação é rápida! Em até 48 horas sua farmácia já estará atendendo automaticamente. Nossa equipe faz toda a configuração inicial, integração com seu WhatsApp Business e treinamento da sua equipe.'
                },
                {
                  q: 'Preciso ter conhecimento técnico?',
                  a: 'Não! O sistema é super intuitivo e não requer conhecimentos técnicos. Fornecemos treinamento completo e suporte contínuo. Se você sabe usar WhatsApp, consegue usar o Infinity PharmIA.'
                },
                {
                  q: 'E se a IA não entender algum pedido?',
                  a: 'A IA tem 98% de precisão, mas quando não tem certeza, ela encaminha automaticamente para um atendente humano. Você mantém total controle e pode revisar todos os atendimentos pelo dashboard.'
                },
                {
                  q: 'Posso cancelar quando quiser?',
                  a: 'Sim! Não há contrato de fidelidade. Você pode cancelar a qualquer momento e só paga pelo mês em uso. Acreditamos tanto no nosso produto que não precisamos prender ninguém.'
                },
                {
                  q: 'Como funciona o teste gratuito?',
                  a: '7 dias de teste completo, sem precisar cadastrar cartão de crédito. Você tem acesso a todos os recursos do plano escolhido e pode processar atendimentos reais. Se não gostar, não paga nada.'
                },
                {
                  q: 'Funciona com meu sistema de estoque atual?',
                  a: 'Sim! Fazemos integração com os principais sistemas de gestão farmacêutica (Farmatic, Linx, MV, etc). No plano Professional e Enterprise, a integração está incluída e nossa equipe faz todo o processo.'
                },
                {
                  q: 'Que tipo de suporte vocês oferecem?',
                  a: 'Todos os planos incluem suporte por email. Plano Professional tem suporte prioritário via WhatsApp. Plano Enterprise conta com gerente de conta dedicado e atendimento 24/7 com SLA garantido.'
                }
              ].map((faq, index) => (
                <AccordionItem key={index} value={`item-${index}`} className="border-2 border-gray-200 rounded-xl px-6 bg-gray-50">
                  <AccordionTrigger className="text-left font-semibold hover:text-blue-600">
                    {faq.q}
                  </AccordionTrigger>
                  <AccordionContent className="text-gray-600 leading-relaxed">
                    {faq.a}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </motion.div>

          <motion.div {...fadeInUp} className="mt-12 text-center">
            <p className="text-gray-600 mb-4">Ainda tem dúvidas?</p>
            <Button size="lg" variant="outline" onClick={openWhatsApp} className="border-2">
              <Headphones className="w-5 h-5 mr-2" />
              Falar com Nossa Equipe
            </Button>
          </motion.div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 px-4 bg-gradient-to-br from-blue-600 via-blue-700 to-green-600 text-white relative overflow-hidden" id="cta-final">
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjEiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmlkKSIvPjwvc3ZnPg==')] opacity-30" />
        
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <motion.div {...fadeInUp}>
            <Badge className="mb-6 bg-white/20 text-white border-white/30 backdrop-blur-sm">
              <Sparkles className="w-3 h-3 mr-1" />
              Oferta Especial
            </Badge>
            <h2 className="text-4xl sm:text-6xl font-bold mb-6 leading-tight">
              Comece a Vender Mais Hoje
            </h2>
            <p className="text-xl sm:text-2xl mb-8 text-blue-100">
              Teste por 7 dias grátis. Sem cartão de crédito. Cancele quando quiser.
            </p>

            <div className="bg-white/10 backdrop-blur-md border-2 border-white/30 rounded-2xl p-8 mb-8 max-w-xl mx-auto">
              <h3 className="text-2xl font-bold mb-4">Cadastre-se Agora</h3>
              <form className="space-y-4" onSubmit={(e) => {
                e.preventDefault();
                setShowLoginModal(true); // Open the modal instead of an alert
              }}>
                <Input 
                  type="text"
                  placeholder="Nome da Farmácia"
                  className="h-14 text-lg bg-white/90 border-white/50"
                  // Value and onChange can be added here if needed for pre-filling the signup form
                />
                <Input 
                  type="email"
                  placeholder="Seu melhor email"
                  value={email} // This is the existing email state, can be used to pre-fill signup email
                  onChange={(e) => setEmail(e.target.value)}
                  className="h-14 text-lg bg-white/90 border-white/50"
                />
                <Input 
                  type="tel"
                  placeholder="WhatsApp (com DDD)"
                  className="h-14 text-lg bg-white/90 border-white/50"
                  // Value and onChange can be added here if needed
                />
                <Button 
                  type="submit"
                  size="lg" 
                  className="w-full h-14 text-lg bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white shadow-xl"
                >
                  <Zap className="w-5 h-5 mr-2" />
                  Quero Aumentar Minhas Vendas
                </Button>
              </form>
              <p className="text-sm text-blue-100 mt-4">
                ✓ Sem compromisso ✓ Configuração em 48h ✓ Suporte completo
              </p>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <div className="flex items-center gap-2 text-blue-100">
                <Shield className="w-5 h-5" />
                <span>Dados 100% Seguros</span>
              </div>
              <div className="flex items-center gap-2 text-blue-100">
                <Lock className="w-5 h-5" />
                <span>Conforme LGPD</span>
              </div>
              <div className="flex items-center gap-2 text-blue-100">
                <Award className="w-5 h-5" />
                <span>+150 Farmácias</span>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-gray-300 py-12 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center">
                  <MessageCircle className="w-6 h-6 text-white" />
                </div>
                <span className="text-xl font-bold text-white">Infinity PharmIA</span>
              </div>
              <p className="text-sm text-gray-400">
                Inteligência artificial que automatiza atendimento e aumenta vendas de farmácias via WhatsApp.
              </p>
            </div>

            <div>
              <h4 className="font-semibold text-white mb-4">Produto</h4>
              <ul className="space-y-2 text-sm">
                <li><button onClick={() => scrollToSection('como-funciona')} className="hover:text-white transition-colors">Como Funciona</button></li>
                <li><button onClick={() => scrollToSection('recursos')} className="hover:text-white transition-colors">Recursos</button></li>
                <li><button onClick={() => scrollToSection('precos')} className="hover:text-white transition-colors">Preços</button></li>
                <li><button onClick={() => scrollToSection('depoimentos')} className="hover:text-white transition-colors">Depoimentos</button></li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-white mb-4">Empresa</h4>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="hover:text-white transition-colors">Sobre Nós</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Blog</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Casos de Sucesso</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Carreiras</a></li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-white mb-4">Contato</h4>
              <ul className="space-y-2 text-sm">
                <li className="flex items-center gap-2">
                  <MessageCircle className="w-4 h-4" />
                  <span>(62) 98301-3105</span>
                </li>
                <li className="flex items-center gap-2">
                  <span>contato@infinitypharmia.com.br</span>
                </li>
                <li className="mt-4">
                  <Button onClick={openWhatsApp} size="sm" className="bg-green-600 hover:bg-green-700">
                    <MessageCircle className="w-4 h-4 mr-2" />
                    WhatsApp
                  </Button>
                </li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm">
            <p className="text-gray-400">
              © 2025 Infinity PharmIA. Todos os direitos reservados.
            </p>
            <div className="flex gap-6">
              <a href="#" className="hover:text-white transition-colors">Política de Privacidade</a>
              <a href="#" className="hover:text-white transition-colors">Termos de Uso</a>
              <a href="#" className="hover:text-white transition-colors">LGPD</a>
            </div>
          </div>
        </div>
      </footer>

      {/* Floating WhatsApp Button */}
      <motion.button
        onClick={openWhatsApp}
        className="fixed bottom-6 right-6 w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full shadow-2xl flex items-center justify-center text-white z-50 hover:scale-110 transition-transform"
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ delay: 1, type: "spring" }}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <MessageCircle className="w-8 h-8" />
      </motion.button>
    </div>
  );
}