/**
 * Landing Page - MediConnect
 * Página inicial moderna e profissional do sistema
 * @version 1.0
 */

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import Logo from "../components/images/logo.PNG";
import {
  Calendar,
  Users,
  BarChart3,
  Bell,
  Clock,
  FileText,
  CheckCircle,
  ArrowRight,
  Shield,
  Cloud,
  Smartphone,
  MessageSquare,
  Database,
  Headphones,
  Menu,
  X,
  Activity,
  Heart,
  Stethoscope,
  TrendingUp,
  Zap,
  Target,
} from "lucide-react";

export default function LandingPage() {
  const navigate = useNavigate();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
      setMobileMenuOpen(false);
    }
  };

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900">
      {/* Header/Navigation */}
      <header className="fixed top-0 w-full bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm shadow-sm z-50">
        <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            {/* Logo */}
            <div className="flex items-center gap-2">
              <img
                src={Logo}
                alt="MediConnect"
                className="h-12 w-12 rounded-lg object-contain shadow-sm"
              />
              <div>
                <span className="text-lg font-bold text-gray-900 dark:text-white">
                  MediConnect
                </span>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Gestão Médica
                </p>
              </div>
            </div>

            {/* Desktop Navigation */}
            <div className="hidden md:flex items-center gap-8">
              <button
                onClick={() => scrollToSection("features")}
                className="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
              >
                Recursos
              </button>
              <button
                onClick={() => scrollToSection("how-it-works")}
                className="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
              >
                Como Funciona
              </button>
              <button
                onClick={() => scrollToSection("users")}
                className="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
              >
                Para Quem
              </button>
              <button
                onClick={() => navigate("/login")}
                className="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
              >
                Entrar
              </button>
              <button
                onClick={() => navigate("/login")}
                className="px-6 py-2 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-lg hover:shadow-lg transition-shadow font-medium"
              >
                Começar Grátis
              </button>
            </div>

            {/* Mobile Menu Button */}
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="md:hidden p-2 text-gray-600 dark:text-gray-300"
            >
              {mobileMenuOpen ? (
                <X className="h-6 w-6" />
              ) : (
                <Menu className="h-6 w-6" />
              )}
            </button>
          </div>

          {/* Mobile Menu */}
          {mobileMenuOpen && (
            <div className="md:hidden py-4 border-t border-gray-200 dark:border-gray-700">
              <div className="flex flex-col gap-4">
                <button
                  onClick={() => scrollToSection("features")}
                  className="text-left text-gray-600 dark:text-gray-300 hover:text-emerald-600"
                >
                  Recursos
                </button>
                <button
                  onClick={() => scrollToSection("how-it-works")}
                  className="text-left text-gray-600 dark:text-gray-300 hover:text-emerald-600"
                >
                  Como Funciona
                </button>
                <button
                  onClick={() => scrollToSection("users")}
                  className="text-left text-gray-600 dark:text-gray-300 hover:text-emerald-600"
                >
                  Para Quem
                </button>
                <button
                  onClick={() => navigate("/login")}
                  className="text-left text-gray-600 dark:text-gray-300 hover:text-emerald-600"
                >
                  Entrar
                </button>
                <button
                  onClick={() => navigate("/login")}
                  className="px-6 py-2 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-lg font-medium"
                >
                  Começar Grátis
                </button>
              </div>
            </div>
          )}
        </nav>
      </header>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left Content */}
            <div className="space-y-8">
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-sm font-medium">
                <Zap className="h-4 w-4" />
                Sistema de Gestão Médica Inteligente
              </div>

              <h1 className="text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight">
                MediConnect
                <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
                  Gestão Médica Simplificada
                </span>
              </h1>

              <p className="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
                Sistema completo de agendamento e acompanhamento de consultas
                médicas. Automatize sua agenda, reduza no-shows e foque no que
                importa: cuidar dos pacientes.
              </p>

              <div className="flex flex-col sm:flex-row gap-4">
                <button
                  onClick={() => navigate("/login")}
                  className="group px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:shadow-xl transition-all font-semibold flex items-center justify-center gap-2"
                >
                  Começar Agora
                  <ArrowRight className="h-5 w-5 group-hover:translate-x-1 transition-transform" />
                </button>
                <button
                  onClick={() => scrollToSection("features")}
                  className="px-8 py-4 border-2 border-blue-600 text-blue-600 dark:text-blue-400 rounded-xl hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors font-semibold"
                >
                  Ver Demonstração
                </button>
              </div>

              {/* Floating Feature Icons */}
              <div className="flex flex-wrap gap-4 pt-8">
                <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-md">
                  <Calendar className="h-5 w-5 text-blue-600" />
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Agenda Inteligente
                  </span>
                </div>
                <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-md">
                  <Activity className="h-5 w-5 text-purple-600" />
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Analytics em Tempo Real
                  </span>
                </div>
                <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-md">
                  <Bell className="h-5 w-5 text-pink-600" />
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Notificações Automáticas
                  </span>
                </div>
              </div>
            </div>

            {/* Right Illustration */}
            <div className="relative">
              <div className="relative bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-3xl p-8 shadow-2xl">
                {/* Mockup Dashboard */}
                <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
                  <div className="bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-4 flex items-center gap-3">
                    <div className="flex gap-2">
                      <div className="w-3 h-3 bg-white/30 rounded-full"></div>
                      <div className="w-3 h-3 bg-white/30 rounded-full"></div>
                      <div className="w-3 h-3 bg-white/30 rounded-full"></div>
                    </div>
                    <div className="flex-1 bg-white/20 rounded px-4 py-1 text-white text-sm">
                      mediconnectbrasilapp.com
                    </div>
                  </div>
                  <div className="p-6 space-y-4">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full"></div>
                      <div className="flex-1 space-y-2">
                        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
                        <div className="h-2 bg-gray-100 dark:bg-gray-800 rounded w-1/2"></div>
                      </div>
                    </div>
                    <div className="grid grid-cols-3 gap-4">
                      <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 space-y-2">
                        <Calendar className="h-6 w-6 text-blue-600" />
                        <div className="h-2 bg-blue-200 dark:bg-blue-800 rounded w-full"></div>
                      </div>
                      <div className="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 space-y-2">
                        <Users className="h-6 w-6 text-purple-600" />
                        <div className="h-2 bg-purple-200 dark:bg-purple-800 rounded w-full"></div>
                      </div>
                      <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 space-y-2">
                        <BarChart3 className="h-6 w-6 text-blue-600" />
                        <div className="h-2 bg-blue-200 dark:bg-blue-800 rounded w-full"></div>
                      </div>
                    </div>
                    <div className="space-y-3">
                      {[1, 2, 3].map((i) => (
                        <div
                          key={i}
                          className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
                        >
                          <div className="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full"></div>
                          <div className="flex-1 space-y-2">
                            <div className="h-2 bg-gray-200 dark:bg-gray-600 rounded w-full"></div>
                            <div className="h-2 bg-gray-100 dark:bg-gray-700 rounded w-2/3"></div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Floating Stats */}
                <div className="absolute -right-4 -top-4 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 animate-pulse">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                      <TrendingUp className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-gray-900 dark:text-white">
                        98%
                      </div>
                      <div className="text-sm text-gray-600 dark:text-gray-400">
                        Satisfação
                      </div>
                    </div>
                  </div>
                </div>

                <div className="absolute -left-4 bottom-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center">
                      <Users className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-gray-900 dark:text-white">
                        2.5k+
                      </div>
                      <div className="text-sm text-gray-600 dark:text-gray-400">
                        Consultas
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Trust Indicators Bar */}
      <section className="py-12 bg-white dark:bg-gray-800 border-y border-gray-200 dark:border-gray-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center">
              <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
                2.500+
              </div>
              <div className="text-gray-600 dark:text-gray-400 mt-2">
                Consultas Agendadas
              </div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-purple-600 dark:text-purple-400">
                150+
              </div>
              <div className="text-gray-600 dark:text-gray-400 mt-2">
                Médicos Ativos
              </div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-pink-600 dark:text-pink-400">
                98%
              </div>
              <div className="text-gray-600 dark:text-gray-400 mt-2">
                Satisfação
              </div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-purple-600 dark:text-purple-400">
                24/7
              </div>
              <div className="text-gray-600 dark:text-gray-400 mt-2">
                Suporte
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section
        id="features"
        className="py-24 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900"
      >
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
              Recursos Principais
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Tudo que você precisa para gerenciar sua prática médica de forma
              eficiente
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* Feature 1 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Calendar className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Agendamento Inteligente
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Sistema automatizado de marcação de consultas com verificação de
                disponibilidade em tempo real e prevenção de conflitos.
              </p>
            </div>

            {/* Feature 2 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Users className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Gestão de Pacientes
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Prontuários digitais completos com histórico médico, exames e
                acompanhamento personalizado de cada paciente.
              </p>
            </div>

            {/* Feature 3 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <BarChart3 className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Dashboard Analítico
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Métricas em tempo real sobre ocupação, receita, taxa de
                comparecimento e produtividade da sua prática.
              </p>
            </div>

            {/* Feature 4 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Bell className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Notificações Automáticas
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Lembretes via SMS e e-mail para pacientes e médicos sobre
                consultas agendadas, reduzindo no-shows em até 40%.
              </p>
            </div>

            {/* Feature 5 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-teal-400 to-cyan-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Clock className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Sala de Espera Virtual
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Check-in digital e visualização de pacientes aguardando
                atendimento em tempo real para melhor gestão do fluxo.
              </p>
            </div>

            {/* Feature 6 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-violet-400 to-purple-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <FileText className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Relatórios Médicos
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Geração automatizada de relatórios, prescrições e documentos
                médicos com templates personalizáveis.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section
        id="how-it-works"
        className="py-24 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800"
      >
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
              Como Funciona
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Comece a usar o MediConnect em 4 passos simples
            </p>
          </div>

          <div className="relative">
            {/* Timeline Line */}
            <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-emerald-200 via-teal-200 to-blue-200 dark:from-emerald-900 dark:via-teal-900 dark:to-blue-900 transform -translate-y-1/2"></div>

            <div className="grid lg:grid-cols-4 gap-8 lg:gap-4 relative">
              {/* Step 1 */}
              <div className="text-center">
                <div className="relative inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-full mb-6 shadow-lg">
                  <span className="text-3xl font-bold text-white">1</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                  Cadastro Rápido
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  Crie sua conta em menos de 2 minutos. Gratuito para começar,
                  sem cartão de crédito.
                </p>
              </div>

              {/* Step 2 */}
              <div className="text-center">
                <div className="relative inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full mb-6 shadow-lg">
                  <span className="text-3xl font-bold text-white">2</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                  Configure Disponibilidade
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  Defina seus horários de atendimento, tipos de consulta e
                  durações em minutos.
                </p>
              </div>

              {/* Step 3 */}
              <div className="text-center">
                <div className="relative inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full mb-6 shadow-lg">
                  <span className="text-3xl font-bold text-white">3</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                  Receba Agendamentos
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  Pacientes agendam online 24/7. Você é notificado
                  automaticamente por SMS e e-mail.
                </p>
              </div>

              {/* Step 4 */}
              <div className="text-center">
                <div className="relative inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full mb-6 shadow-lg">
                  <span className="text-3xl font-bold text-white">4</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                  Gerencie e Atenda
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  Acesse prontuários, gere relatórios e acompanhe suas métricas
                  em tempo real.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* User Personas Section */}
      <section
        id="users"
        className="py-24 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900"
      >
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
              Para Quem é o MediConnect
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Soluções personalizadas para cada tipo de usuário
            </p>
          </div>

          <div className="grid lg:grid-cols-3 gap-8">
            {/* Médicos */}
            <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mb-6">
                <Stethoscope className="h-8 w-8 text-white" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                Médicos
              </h3>
              <ul className="space-y-3">
                {[
                  "Agenda organizada automaticamente",
                  "Acesso rápido a prontuários",
                  "Redução de no-shows em 40%",
                  "Dashboard com métricas de desempenho",
                  "Prescrições e relatórios digitais",
                  "Notificações em tempo real",
                ].map((benefit, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-600 dark:text-gray-300">
                      {benefit}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Clínicas */}
            <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
              <div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-500 rounded-2xl flex items-center justify-center mb-6">
                <Target className="h-8 w-8 text-white" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                Clínicas e Consultórios
              </h3>
              <ul className="space-y-3">
                {[
                  "Gestão multi-médico integrada",
                  "Controle financeiro completo",
                  "Relatórios administrativos",
                  "Sistema de secretaria virtual",
                  "Agendamento online para pacientes",
                  "Analytics e insights de negócio",
                ].map((benefit, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-purple-600 dark:text-purple-400 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-600 dark:text-gray-300">
                      {benefit}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Pacientes */}
            <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
              <div className="w-16 h-16 bg-gradient-to-br from-pink-400 to-purple-500 rounded-2xl flex items-center justify-center mb-6">
                <Heart className="h-8 w-8 text-white" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                Pacientes
              </h3>
              <ul className="space-y-3">
                {[
                  "Agendamento online 24/7",
                  "Lembretes automáticos por SMS",
                  "Histórico médico acessível",
                  "Check-in digital sem filas",
                  "Acesso a exames e relatórios",
                  "Comunicação direta com médico",
                ].map((benefit, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-pink-600 dark:text-pink-400 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-600 dark:text-gray-300">
                      {benefit}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Technology Section */}
      <section className="py-24 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
              Tecnologia de Ponta
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Segurança, confiabilidade e performance garantidas
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                icon: Cloud,
                title: "Cloud-Based",
                description:
                  "Acesse de qualquer lugar, em qualquer dispositivo. Dados seguros na nuvem.",
                color: "from-blue-400 to-cyan-500",
              },
              {
                icon: Shield,
                title: "Segurança LGPD",
                description:
                  "Conformidade total com LGPD. Seus dados e dos pacientes protegidos.",
                color: "from-blue-400 to-cyan-500",
              },
              {
                icon: Smartphone,
                title: "Mobile-Friendly",
                description:
                  "Design responsivo para tablet, celular e desktop. Use em movimento.",
                color: "from-purple-400 to-pink-500",
              },
              {
                icon: MessageSquare,
                title: "Integração SMS",
                description:
                  "Envio automático de confirmações e lembretes por SMS para pacientes.",
                color: "from-orange-400 to-red-500",
              },
              {
                icon: Database,
                title: "Backup Automático",
                description:
                  "Dados protegidos com backup diário automático. Nunca perca informações.",
                color: "from-indigo-400 to-purple-500",
              },
              {
                icon: Headphones,
                title: "Suporte 24/7",
                description:
                  "Equipe dedicada disponível sempre que você precisar de ajuda.",
                color: "from-teal-400 to-cyan-500",
              },
            ].map((tech, i) => (
              <div
                key={i}
                className="bg-gray-50 dark:bg-gray-900 rounded-xl p-6 hover:shadow-lg transition-shadow"
              >
                <div
                  className={`w-12 h-12 bg-gradient-to-br ${tech.color} rounded-lg flex items-center justify-center mb-4`}
                >
                  <tech.icon className="h-6 w-6 text-white" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
                  {tech.title}
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  {tech.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
            Comece Grátis Hoje
          </h2>
          <p className="text-xl text-blue-50 mb-8">
            Sem cartão de crédito. Sem compromisso. 14 dias de teste grátis.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
            <button
              onClick={() => navigate("/login")}
              className="px-10 py-4 bg-white text-blue-600 rounded-xl hover:bg-blue-50 transition-colors font-bold text-lg shadow-xl"
            >
              Criar Conta Grátis
            </button>
            <button
              onClick={() => scrollToSection("features")}
              className="px-10 py-4 border-2 border-white text-white rounded-xl hover:bg-white/10 transition-colors font-bold text-lg"
            >
              Saber Mais
            </button>
          </div>
          <div className="flex items-center justify-center gap-8 text-blue-50">
            <div className="flex items-center gap-2">
              <CheckCircle className="h-5 w-5" />
              <span>14 dias grátis</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle className="h-5 w-5" />
              <span>Cancele quando quiser</span>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 dark:bg-black text-gray-300 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            {/* Brand */}
            <div className="md:col-span-1">
              <div className="flex items-center gap-2 mb-4">
                <img
                  src={Logo}
                  alt="MediConnect"
                  className="h-10 w-10 rounded-lg object-contain"
                />
                <span className="text-xl font-bold text-white">
                  MediConnect
                </span>
              </div>
              <p className="text-sm text-gray-400">
                Gestão médica simplificada para profissionais que querem focar
                no que importa.
              </p>
            </div>

            {/* Product */}
            <div>
              <h4 className="font-bold text-white mb-4">Produto</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <button
                    onClick={() => scrollToSection("features")}
                    className="hover:text-blue-400 transition-colors"
                  >
                    Recursos
                  </button>
                </li>
                <li>
                  <button
                    onClick={() => scrollToSection("how-it-works")}
                    className="hover:text-blue-400 transition-colors"
                  >
                    Como Funciona
                  </button>
                </li>
                <li>
                  <button
                    onClick={() => scrollToSection("users")}
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Para Quem
                  </button>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Preços
                  </a>
                </li>
              </ul>
            </div>

            {/* Support */}
            <div>
              <h4 className="font-bold text-white mb-4">Suporte</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Documentação
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Tutoriais
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    FAQ
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Contato
                  </a>
                </li>
              </ul>
            </div>

            {/* Company */}
            <div>
              <h4 className="font-bold text-white mb-4">Empresa</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Sobre
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Blog
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Carreiras
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Privacidade
                  </a>
                </li>
              </ul>
            </div>
          </div>

          {/* Bottom Bar */}
          <div className="pt-8 border-t border-gray-800 flex flex-col sm:flex-row justify-between items-center gap-4">
            <p className="text-sm text-gray-400">
              © 2025 MediConnect. Todos os direitos reservados.
            </p>
            <div className="flex gap-4">
              {[
                { icon: "📘", label: "Facebook" },
                { icon: "📸", label: "Instagram" },
                { icon: "🐦", label: "Twitter" },
                { icon: "💼", label: "LinkedIn" },
              ].map((social, i) => (
                <button
                  key={i}
                  className="w-8 h-8 bg-gray-800 hover:bg-gray-700 rounded-lg flex items-center justify-center transition-colors"
                  aria-label={social.label}
                >
                  {social.icon}
                </button>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
