"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Phone, MapPin, Clock, Instagram, Facebook, Heart, Calendar, ShoppingBag, Star } from "lucide-react"

export default function LisandraScarel() {
  const whatsappNumber = "5493564665845"
  const whatsappMessage = "¡Hola! Me gustaría reservar un turno para un servicio de estética."

  const openWhatsApp = (customMessage?: string) => {
    const message = customMessage || whatsappMessage
    window.open(`https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`, "_blank")
  }

  const servicios = [
    {
      nombre: "Depilación tradicional y descartable con cera",
      descripcion: "Técnica rápida, efectiva y con máxima higiene para una piel suave.",
      imagen: "/placeholder.svg?height=300&width=400",
    },
    {
      nombre: "Manicura – Arreglo estético de manos",
      descripcion: "Embellecimiento y cuidado de manos. Limpieza, limado, cutículas y esmaltado.",
      imagen: "/placeholder.svg?height=300&width=400",
    },
    {
      nombre: "Pedicura completa",
      descripcion:
        "Tratamiento profesional completo para la salud y belleza de tus pies: durezas, uñas encarnadas y más.",
      imagen: "/placeholder.svg?height=300&width=400",
    },
    {
      nombre: "Limpieza facial",
      descripcion: "Piel renovada y luminosa mediante limpieza profunda con extracción de impurezas.",
      imagen: "/placeholder.svg?height=300&width=400",
    },
    {
      nombre: "Maquillaje profesional",
      descripcion: "Ideal para eventos o sesiones especiales. Resalta tu belleza con técnicas modernas.",
      imagen: "/placeholder.svg?height=300&width=400",
    },
  ]

  const productos = [
    {
      nombre: "Mary Kay - Cuidado Facial",
      descripcion: "Línea completa de productos para el cuidado facial diario.",
      imagen: "/placeholder.svg?height=250&width=250",
    },
    {
      nombre: "Bio Glosse - Cosmética Natural",
      descripcion: "Cosmética de calidad para el cuidado facial y corporal.",
      imagen: "/placeholder.svg?height=250&width=250",
    },
    {
      nombre: "Mary Kay - Maquillaje",
      descripcion: "Productos de maquillaje profesional de alta calidad.",
      imagen: "/placeholder.svg?height=250&width=250",
    },
  ]

  const galeriaImagenes = [
    "/placeholder.svg?height=300&width=300",
    "/placeholder.svg?height=300&width=300",
    "/placeholder.svg?height=300&width=300",
    "/placeholder.svg?height=300&width=300",
    "/placeholder.svg?height=300&width=300",
    "/placeholder.svg?height=300&width=300",
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-rose-50 via-pink-50 to-amber-50 relative overflow-hidden">
      {/* Elementos decorativos de fondo */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-rose-200/30 to-pink-300/20 rounded-full blur-3xl"></div>
        <div className="absolute top-1/2 -left-40 w-96 h-96 bg-gradient-to-br from-amber-200/20 to-rose-200/30 rounded-full blur-3xl"></div>
        <div className="absolute -bottom-40 right-1/3 w-72 h-72 bg-gradient-to-br from-pink-200/25 to-rose-300/20 rounded-full blur-3xl"></div>
      </div>

      {/* Patrón decorativo */}
      <div className="absolute inset-0 opacity-5">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23ec4899' fillOpacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          }}
        ></div>
      </div>

      {/* Botón fijo de reservas */}
      <div className="fixed bottom-6 right-6 z-50">
        <Button
          onClick={() => openWhatsApp()}
          className="bg-gradient-to-r from-rose-400 via-pink-500 to-rose-500 hover:from-rose-500 hover:via-pink-600 hover:to-rose-600 text-white shadow-2xl rounded-full px-6 py-3 text-sm font-medium border-2 border-white/20 backdrop-blur-sm transform hover:scale-105 transition-all duration-300"
        >
          <Calendar className="w-4 h-4 mr-2" />
          Reservá tu turno
        </Button>
      </div>

      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-rose-100/60 via-pink-100/40 to-amber-100/60" />
        <Image
          src="/placeholder.svg?height=1080&width=1920"
          alt="Salón de estética elegante"
          fill
          className="object-cover opacity-20"
        />

        {/* Elementos decorativos flotantes */}
        <div className="absolute top-20 left-10 w-4 h-4 bg-rose-300/40 rounded-full animate-pulse"></div>
        <div className="absolute top-40 right-20 w-6 h-6 bg-amber-300/40 rounded-full animate-pulse delay-1000"></div>
        <div className="absolute bottom-40 left-20 w-3 h-3 bg-pink-300/40 rounded-full animate-pulse delay-500"></div>

        <div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
          <div className="mb-8">
            <div className="relative inline-block mb-6">
              <div className="absolute inset-0 bg-gradient-to-r from-rose-400/20 via-pink-400/30 to-amber-400/20 rounded-3xl blur-xl transform scale-110"></div>
              <div className="relative bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-6 border border-white/20">
                <h1 className="text-5xl md:text-7xl font-bold text-gray-800 mb-2 leading-tight">
                  <span className="bg-gradient-to-r from-rose-500 via-pink-500 to-amber-400 bg-clip-text text-transparent drop-shadow-sm">
                    Lisandra Scarel
                  </span>
                </h1>
                <p className="text-2xl md:text-3xl text-gray-700 font-light tracking-wide">Estética & Belleza</p>
              </div>
            </div>

            <div className="flex items-center justify-center gap-2 mb-8">
              {[...Array(5)].map((_, i) => (
                <Star key={i} className="w-5 h-5 text-amber-400 fill-current" />
              ))}
            </div>
          </div>

          <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto leading-relaxed font-light">
            Reflejamos tu belleza natural con arte y cuidado.
          </p>

          <div className="bg-white/80 backdrop-blur-lg rounded-2xl p-8 mb-10 max-w-lg mx-auto border border-rose-200/50 shadow-2xl">
            <div className="flex items-center justify-center mb-6">
              <Clock className="w-6 h-6 text-rose-400 mr-3" />
              <span className="font-semibold text-gray-800 text-lg">Con cita previa de Martes a Sábado</span>
            </div>
            <div className="flex items-center justify-center">
              <MapPin className="w-6 h-6 text-rose-400 mr-3" />
              <span className="text-gray-700 text-lg">Independencia 1910</span>
            </div>
          </div>

          <Button
            onClick={() => openWhatsApp()}
            size="lg"
            className="bg-gradient-to-r from-rose-400 via-pink-500 to-rose-500 hover:from-rose-500 hover:via-pink-600 hover:to-rose-600 text-white px-10 py-5 text-xl rounded-full shadow-2xl transform hover:scale-105 transition-all duration-300 border-2 border-white/20 backdrop-blur-sm"
          >
            <Phone className="w-6 h-6 mr-3" />
            Reservá tu turno
          </Button>
        </div>
      </section>

      {/* Servicios */}
      <section id="servicios" className="py-24 px-4 relative">
        <div className="max-w-7xl mx-auto relative z-10">
          <div className="text-center mb-20">
            <div className="inline-block mb-6">
              <div className="w-20 h-1 bg-gradient-to-r from-rose-400 to-amber-400 rounded-full mx-auto mb-4"></div>
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Nuestros Servicios</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
              Tratamientos profesionales diseñados para realzar tu belleza natural
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {servicios.map((servicio, index) => (
              <Card
                key={index}
                className="group hover:shadow-2xl transition-all duration-500 border-2 border-rose-200/50 bg-white/90 backdrop-blur-sm hover:border-rose-300/70 transform hover:-translate-y-2"
              >
                <div className="relative overflow-hidden rounded-t-lg border-b-4 border-rose-300">
                  <Image
                    src={servicio.imagen || "/placeholder.svg"}
                    alt={servicio.nombre}
                    width={400}
                    height={300}
                    className="w-full h-52 object-cover group-hover:scale-110 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                </div>
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg text-gray-800 group-hover:text-rose-600 transition-colors duration-300">
                    {servicio.nombre}
                  </CardTitle>
                  <CardDescription className="text-gray-600 leading-relaxed">{servicio.descripcion}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-1 bg-gradient-to-r from-rose-200 to-amber-200 rounded-full"></div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Productos */}
      <section
        id="productos"
        className="py-24 px-4 bg-gradient-to-r from-rose-50/80 via-pink-50/60 to-amber-50/80 relative"
      >
        <div className="max-w-6xl mx-auto relative z-10">
          <div className="text-center mb-20">
            <div className="inline-block mb-6">
              <ShoppingBag className="w-16 h-16 text-rose-400 mx-auto mb-4" />
              <div className="w-20 h-1 bg-gradient-to-r from-rose-400 to-amber-400 rounded-full mx-auto"></div>
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Productos de Calidad</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
              Venta de productos Mary Kay y Bio Glosse para el cuidado de tu belleza
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {productos.map((producto, index) => (
              <Card
                key={index}
                className="group hover:shadow-2xl transition-all duration-500 border-2 border-amber-200/60 bg-white/95 backdrop-blur-sm hover:border-amber-300/80 transform hover:-translate-y-2"
              >
                <div className="relative overflow-hidden rounded-t-lg border-b-4 border-amber-300">
                  <Image
                    src={producto.imagen || "/placeholder.svg"}
                    alt={producto.nombre}
                    width={250}
                    height={250}
                    className="w-full h-52 object-cover group-hover:scale-110 transition-transform duration-500"
                  />
                </div>
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg text-gray-800 group-hover:text-amber-600 transition-colors duration-300">
                    {producto.nombre}
                  </CardTitle>
                  <CardDescription className="text-gray-600 leading-relaxed">{producto.descripcion}</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-500 text-center bg-amber-50/50 py-2 px-4 rounded-lg border border-amber-200/50">
                    Consultá disponibilidad y precios por WhatsApp
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Galería */}
      <section id="galeria" className="py-24 px-4 relative">
        <div className="max-w-6xl mx-auto relative z-10">
          <div className="text-center mb-20">
            <div className="inline-block mb-6">
              <div className="w-20 h-1 bg-gradient-to-r from-rose-400 to-amber-400 rounded-full mx-auto mb-4"></div>
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Nuestros Trabajos</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
              Resultados reales de nuestros tratamientos de belleza
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
            {galeriaImagenes.map((imagen, index) => (
              <div
                key={index}
                className="relative group overflow-hidden rounded-2xl border-2 border-rose-200/50 hover:border-rose-300/70 transition-all duration-500 transform hover:-translate-y-1"
              >
                <Image
                  src={imagen || "/placeholder.svg"}
                  alt={`Trabajo ${index + 1}`}
                  width={300}
                  height={300}
                  className="w-full h-52 object-cover group-hover:scale-110 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                <div className="absolute bottom-4 left-4 right-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <p className="text-sm font-medium">Trabajo realizado</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gradient-to-r from-gray-800 via-gray-900 to-gray-800 text-white py-16 px-4 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-rose-900/20 to-amber-900/20"></div>
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <div className="mb-10">
            <h3 className="text-3xl font-bold mb-6 bg-gradient-to-r from-rose-400 via-pink-400 to-amber-400 bg-clip-text text-transparent">
              Lisandra Scarel – Estética & Belleza
            </h3>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-6 mb-8">
              <Button
                onClick={() => openWhatsApp()}
                className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-6 py-3 rounded-full border-2 border-white/20"
              >
                <Phone className="w-5 h-5 mr-2" />
                +54 9 3564 665845
              </Button>
              <div className="flex gap-4">
                <Button
                  onClick={() => window.open("https://instagram.com", "_blank")}
                  variant="ghost"
                  size="sm"
                  className="text-white hover:text-rose-400 border border-white/20 rounded-full p-3 hover:bg-white/10 transition-all duration-300"
                >
                  <Instagram className="w-6 h-6" />
                </Button>
                <Button
                  onClick={() => window.open("https://facebook.com", "_blank")}
                  variant="ghost"
                  size="sm"
                  className="text-white hover:text-rose-400 border border-white/20 rounded-full p-3 hover:bg-white/10 transition-all duration-300"
                >
                  <Facebook className="w-6 h-6" />
                </Button>
              </div>
            </div>
          </div>

          <div className="border-t border-gray-700/50 pt-8">
            <p className="text-xl text-gray-300 flex items-center justify-center leading-relaxed">
              Gracias por confiar tu belleza en manos expertas
              <Heart className="w-6 h-6 ml-3 text-rose-400 animate-pulse" />
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}