import { useState } from 'react'
import { Button } from "/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "/components/ui/accordion"
import { Heart, Shield, Clock, Users, Play, Home, Search, Menu, User, Settings, Mail, Bell, Calendar, Star, Upload, Download, Trash, Edit, Plus, Minus, Check, X, ArrowRight } from "lucide-react"

export default function NoseSurgeryLandingPage() {
  const [faqOpen, setFaqOpen] = useState<string | null>(null)

  const handleFaqToggle = (value: string) => {
    setFaqOpen(faqOpen === value ? null : value)
  }

  const whatsappLink = "https://wa.me/+573107483009?l=es&text=Hola%2C%20vi%20la%20p%C3%A1gina%20web%20de%20cirug%C3%ADas%20pl%C3%A1sticas%20en%20Colombia%20y%20me%20gustar%C3%ADa%20m%C3%A1s%20informaci%C3%B3n."

  return (
    <div className="bg-white min-h-screen flex flex-col">
      {/* Sección Destacada con Propuesta de Valor */}
      <section className="bg-gray-100 py-16">
        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between">
          <div className="w-full md:w-1/2 text-center md:text-left">
            <h1 className="text-4xl font-bold mb-4">Transforma Tu Nariz, Transforma Tu Vida</h1>
            <p className="text-lg text-gray-600 mb-8">
              Cirujanos Plásticos de Colombia ofrece servicios expertos de cirugía nasal en Cali, Colombia. Nuestro equipo de cirujanos altamente experimentados se especializa en proporcionar procedimientos seguros y efectivos.
            </p>
            <Button variant="default" className="w-full md:w-auto">
              <a href={whatsappLink} target="_blank" rel="noopener noreferrer">
                Aprende Más
              </a>
            </Button>
          </div>
          <div className="w-full md:w-1/2 mt-8 md:mt-0">
            <div className="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96" />
          </div>
        </div>
      </section>

      {/* Descripciones de Tipos de Cirugías */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">Tipos de Cirugías</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Heart className="mr-2 h-6 w-6" />
                  Rinoplastia
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  La rinoplastia es un procedimiento quirúrgico para remodelar la nariz ajustando el hueso y la cartílago. Nuestros cirujanos experimentados pueden ayudarte a lograr la forma de nariz que deseas.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Shield className="mr-2 h-6 w-6" />
                  Septoplastia
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  La septoplastia es un procedimiento quirúrgico para corregir un septo desviado, mejorando la respiración. Nuestros cirujanos pueden ayudarte a respirar mejor y dormir mejor.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Clock className="mr-2 h-6 w-6" />
                  Rinoplastia Revisora
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  La rinoplastia revisora es una cirugía secundaria para corregir problemas de una cirugía nasal anterior. Nuestro equipo puede ayudarte a lograr el resultado perfecto.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Sección de Testimonios */}
      <section className="bg-gray-100 py-16">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">Testimonios</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "Cirujanos Plásticos de Colombia hicieron un trabajo excelente en mi cirugía nasal. No podría estar más feliz con los resultados!"
                </p>
                <p className="text-gray-400 mt-2">- María López</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "El equipo de Cirujanos Plásticos de Colombia fue muy profesional y me hizo sentir cómodo durante todo el proceso."
                </p>
                <p className="text-gray-400 mt-2">- Juan Pérez</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "Hice una septoplastia y ahora puedo respirar mucho mejor. Gracias, Cirujanos Plásticos de Colombia!"
                </p>
                <p className="text-gray-400 mt-2">- Ana Martínez</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "Los resultados de mi rinoplastia revisora superaron mis expectativas. Los cirujanos son verdaderamente hábiles."
                </p>
                <p className="text-gray-400 mt-2">- Carlos Gómez</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "Estaba nervioso sobre la cirugía, pero el personal de Cirujanos Plásticos de Colombia me hizo sentir tranquilo."
                </p>
                <p className="text-gray-400 mt-2">- Sofía Ramírez</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "El proceso de recuperación fue suave y los resultados son fantásticos. Altamente recomiendo Cirujanos Plásticos de Colombia."
                </p>
                <p className="text-gray-400 mt-2">- Luis Torres</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "Los cirujanos de Cirujanos Plásticos de Colombia son muy conocedores y proporcionaron un excelente cuidado."
                </p>
                <p className="text-gray-400 mt-2">- Isabella Fernández</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "Estaba muy satisfecho con los resultados de mi rinoplastia. El equipo es profesional y compasivo."
                </p>
                <p className="text-gray-400 mt-2">- Diego Muñoz</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "Las consultas previas a la cirugía fueron exhaustivas y me sentí bien preparado para el procedimiento."
                </p>
                <p className="text-gray-400 mt-2">- Valentina Díaz</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent>
                <p className="text-gray-600">
                  "La experiencia total con Cirujanos Plásticos de Colombia fue positiva. Definitivamente los recomendaría."
                </p>
                <p className="text-gray-400 mt-2">- Mateo Jiménez</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Botón de Llamada a la Acción */}
      <section className="py-16 bg-gray-100">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-8">¿Listo para Transformar Tu Nariz?</h2>
          <Button variant="default" className="w-full md:w-auto">
            <a href={whatsappLink} target="_blank" rel="noopener noreferrer">
              Contáctanos en WhatsApp
            </a>
          </Button>
        </div>
      </section>

      {/* Preguntas Frecuentes (FAQs) */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">Preguntas Frecuentes</h2>
          <Accordion type="single" collapsible value={faqOpen} onValueChange={handleFaqToggle}>
            <AccordionItem value="item-1">
              <AccordionTrigger>¿Qué es la rinoplastia?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  La rinoplastia es un procedimiento quirúrgico para remodelar la nariz ajustando el hueso y la cartílago para lograr una apariencia más estética.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-2">
              <AccordionTrigger>¿Qué es la septoplastia?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  La septoplastia es un procedimiento quirúrgico para corregir un septo desviado, lo que puede mejorar la respiración y reducir los problemas de sinusitis.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-3">
              <AccordionTrigger>¿Qué es la rinoplastia revisora?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  La rinoplastia revisora es una cirugía secundaria para corregir problemas de una cirugía nasal anterior, como asimetría o problemas de respiración.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-4">
              <AccordionTrigger>¿Cuánto tiempo dura el proceso de recuperación?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  El proceso de recuperación generalmente toma entre 2 y 4 semanas, pero los tiempos de recuperación individuales pueden variar.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-5">
              <AccordionTrigger>¿Cuáles son los riesgos de la cirugía nasal?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  Los riesgos de la cirugía nasal incluyen infecciones, hemorragias y reacciones adversas a la anestesia. Sin embargo, estos riesgos se minimizan con un cuidado adecuado y cirujanos experimentados.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-6">
              <AccordionTrigger>¿Cuánto cuesta la cirugía nasal?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  El costo de la cirugía nasal puede variar según la complejidad del procedimiento y los servicios adicionales. Ofrecemos precios competitivos y opciones de financiamiento.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-7">
              <AccordionTrigger>¿Ofrecen opciones de financiamiento?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  Sí, ofrecemos opciones de financiamiento para hacer que su cirugía nasal sea más asequible. Nuestro equipo de financiamiento puede ayudarlo a encontrar el mejor plan para sus necesidades.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-8">
              <AccordionTrigger>¿Cuál es el proceso para programar una consulta?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  Para programar una consulta, puede contactarnos a través de WhatsApp o correo electrónico. Nuestro equipo programará un horario conveniente para que pueda reunirse con uno de nuestros cirujanos.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-9">
              <AccordionTrigger>¿Qué debo esperar durante la consulta?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  Durante la consulta, nuestros cirujanos revisarán su historial médico, discutirán sus objetivos y le proporcionarán un plan de tratamiento personalizado.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-10">
              <AccordionTrigger>¿Cuáles son los beneficios de elegir Cirujanos Plásticos de Colombia?</AccordionTrigger>
              <AccordionContent>
                <p className="text-gray-600">
                  Nuestros cirujanos tienen experiencia extensa y son altamente hábiles. Ofrecemos un entorno seguro y cómodo, con cuidado personalizado y resultados excelentes.
                </p>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      </section>

      {/* Sección de Beneficios */}
      <section className="py-16 bg-gray-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">Beneficios de Elegir Cirujanos Plásticos de Colombia</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Heart className="mr-2 h-6 w-6" />
                  Expertise
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Nuestro equipo de cirujanos tiene experiencia extensa en cirugía nasal y es altamente hábil.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Shield className="mr-2 h-6 w-6" />
                  Seguridad
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Todas las cirugías se realizan en una instalación de vanguardia con la tecnología más avanzada.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Clock className="mr-2 h-6 w-6" />
                  Conveniencia
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Ofrecemos transporte, acompañamiento y alojamiento especializado para la recuperación.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Users className="mr-2 h-6 w-6" />
                  Cuidado Personalizado
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Cada paciente recibe un plan de tratamiento personalizado adaptado a sus necesidades específicas.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Star className="mr-2 h-6 w-6" />
                  Excelentes Resultados
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Nuestros cirujanos logran resultados excelentes con una alta satisfacción del paciente.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Calendar className="mr-2 h-6 w-6" />
                  Horarios Flexibles
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Ofrecemos horarios flexibles para adaptarnos a su estilo de vida ocupado.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Botón de Contacto de WhatsApp al Final */}
      <section className="py-16 bg-gray-100">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-8">Contáctanos Hoy</h2>
          <Button variant="default" className="w-full md:w-auto">
            <a href={whatsappLink} target="_blank" rel="noopener noreferrer">
              Contáctanos en WhatsApp
            </a>
          </Button>
        </div>
      </section>
    </div>
  )
}
Share
Refresh