import Image from 'next/image'
import { Button } from '@/components/ui/Button'
import { Card, CardContent } from '@/components/ui/Card'
import {
  Phone,
  Users,
  MessageSquare,
  BarChart3,
  Shield,
  Mic,
  List,
  PhoneCall,
  Settings,
  Clock,
  ArrowRight,
} from 'lucide-react'

const features = [
  {
    icon: Phone,
    title: 'Identificador de Llamadas',
    description: 'Visualice quién llama antes de contestar.',
  },
  {
    icon: MessageSquare,
    title: 'IVR Contestador Automático',
    description: 'Configure menús interactivos para redirigir llamadas eficientemente.',
  },
  {
    icon: Users,
    title: 'Llamadas Gratuitas entre Extensiones',
    description: 'Conecte equipos sin costos adicionales.',
  },
  {
    icon: Clock,
    title: 'Llamada en Espera',
    description: 'Mejore la experiencia del cliente con música personalizada mientras espera.',
  },
  {
    icon: Mic,
    title: 'Grabación de Llamadas',
    description: 'Guarde y administre conversaciones importantes.',
  },
  {
    icon: PhoneCall,
    title: 'Transferencia de Llamadas',
    description: 'Facilite el flujo de comunicación, incluso a números externos.',
  },
  {
    icon: Settings,
    title: 'Asignación DID',
    description: 'Personalice números directos para departamentos o empleados.',
  },
  {
    icon: Phone,
    title: 'Sígueme',
    description: 'Redirija llamadas a su móvil o cualquier dispositivo.',
  },
  {
    icon: Users,
    title: 'Videollamadas',
    description: 'Mejore la colaboración remota con video HD.',
  },
  {
    icon: MessageSquare,
    title: 'Buzón de Voz',
    description: 'No pierda ningún mensaje importante.',
  },
  {
    icon: Users,
    title: 'Sala de Conferencia',
    description: 'Organice reuniones virtuales sin interrupciones.',
  },
  {
    icon: List,
    title: 'Colas de Llamadas',
    description: 'Gestione el flujo de llamadas con eficiencia.',
  },
  {
    icon: Shield,
    title: 'Función No Molestar',
    description: 'Controle cuándo está disponible.',
  },
  {
    icon: BarChart3,
    title: 'CDR - Registro de Llamadas',
    description: 'Analice y supervise el uso de las llamadas.',
  },
  {
    icon: Shield,
    title: 'Bloqueo de Números',
    description: 'Evite llamadas no deseadas.',
  },
]

export default function LambiCallPage() {
  return (
    <>
      {/* Hero */}
      <section className="relative bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900 pt-32 pb-20">
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-blue-500/20 rounded-full blur-3xl" />
          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-400/20 rounded-full blur-3xl" />
        </div>

        <div className="container-custom relative">
          <div className="max-w-3xl mx-auto text-center">
            <div className="bg-white rounded-2xl p-4 sm:p-6 inline-block mb-6">
              <Image
                src="/LogoLambicall.png"
                alt="LambiCall CloudPBX"
                width={280}
                height={140}
                className="h-16 sm:h-24 w-auto"
                priority
              />
            </div>

            <p className="text-xl sm:text-2xl text-blue-200 font-semibold">
              Comuníquese Mejor, Crezca Más
            </p>

            <p className="mt-6 text-lg text-blue-100 max-w-2xl mx-auto">
              La solución en la nube que revoluciona la forma en que su empresa se comunica.
              Transforme su conmutador IP con nuestra tecnología escalable y flexible.
            </p>

            <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
              <Button href="/demo" size="lg" className="bg-white text-blue-700 hover:bg-blue-50">
                Solicitar Demo
                <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
              <Button
                href="/contacto"
                size="lg"
                variant="outline"
                className="border-white text-white hover:bg-white/10"
              >
                Contáctanos
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="section-padding">
        <div className="container-custom">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              Funcionalidades
            </h2>
            <p className="mt-4 text-lg text-gray-600">
              Todo lo que necesitas para gestionar las comunicaciones de tu empresa
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 sm:gap-6">
            {features.map((feature, idx) => (
              <Card key={idx} hover>
                <CardContent className="p-4 sm:p-6 text-center">
                  <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                    <feature.icon className="w-6 h-6 text-blue-600" />
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">
                    {feature.title}
                  </h3>
                  <p className="text-sm text-gray-600">{feature.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section-padding">
        <div className="container-custom text-center">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">
            ¿Tienes preguntas?
          </h2>
          <p className="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
            Nuestro equipo está listo para ayudarte a encontrar la mejor solución
            para tu empresa.
          </p>
          <Button href="/contacto" size="lg" className="bg-blue-600 hover:bg-blue-700">
            Contactar a Ventas
          </Button>
        </div>
      </section>
    </>
  )
}