"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, Users, Radio, Zap, DollarSign, MessageCircle, ArrowRight } from "lucide-react"
import Image from "next/image"

export default function SortWhatsPage() {
  const features = [
    {
      icon: Zap,
      title: "Simple y Rápido",
      description: "Configura tu sorteo en minutos. Sin complicaciones técnicas.",
    },
    {
      icon: Users,
      title: "Para Radios",
      description: "Diseñado específicamente para emisoras de radio y sus audiencias.",
    },
    {
      icon: CheckCircle,
      title: "Transparente",
      description: "Sorteos justos y verificables que generan confianza en tu audiencia.",
    },
  ]

  const benefits = [
    {
      icon: Radio,
      title: "Innová entre todos",
      description: "Diferénciate de la competencia con sorteos modernos e interactivos",
    },
    {
      icon: Users,
      title: "Productores satisfechos",
      description: "Herramientas que facilitan el trabajo de tus productores",
    },
  ]

  const pricing = [
    {
      icon: DollarSign,
      title: "Poca Inversión",
      description: "Abonos super accesibles para cualquier presupuesto",
    },
    {
      icon: Users,
      title: "Más público",
      description: "Aumenta la participación e interacción con tu audiencia",
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      {/* Hero Section */}
      <section className="py-16 md:py-20 bg-secondary relative overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-20"
          style={{
            backgroundImage: "url('/images/tech-background.png')",
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-br from-black/80 via-black/40 to-transparent" />

        <div className="container mx-auto px-4 relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="mt-8 md:mt-12">
              <div className="text-primary text-sm font-semibold tracking-[0.3em] uppercase mb-4">Producto TERA</div>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6 text-balance leading-tight text-shadow-lg">
                SortWhats
              </h1>
              <p className="text-xl md:text-2xl text-white/90 mb-8 text-pretty leading-relaxed text-shadow-md">
                La mejor opción para tus sorteos
              </p>
              <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 mb-8 border border-white/20">
                <p className="text-white text-lg font-light">
                  <span className="font-semibold text-primary">SortWhats es simple.</span>
                  <br />
                  Hace mucho más fáciles tus sorteos.
                </p>
              </div>
              <Button
                asChild
                size="lg"
                className="bg-primary hover:bg-primary/90 px-8 py-4 text-lg rounded-full hover:scale-105 transition-all duration-300"
              >
                <a href="#contacto" className="flex items-center gap-3">
                  Empezar Ahora
                  <ArrowRight className="h-5 w-5" />
                </a>
              </Button>
            </div>

            <div className="relative">
              <div className="bg-white/10 backdrop-blur-sm rounded-3xl p-8 border border-white/20">
                <div className="text-center">
                  <MessageCircle className="h-24 w-24 text-primary mx-auto mb-6" />
                  <h3 className="text-2xl font-bold text-white mb-4">Sorteos por WhatsApp</h3>
                  <p className="text-white/80 text-lg">
                    Integración directa con WhatsApp para sorteos automáticos y transparentes
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 md:py-24">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <div className="text-primary text-sm font-semibold tracking-[0.3em] uppercase mb-4">Características</div>
            <h2 className="text-3xl md:text-4xl font-black mb-6 text-balance">Estás a un paso</h2>
            <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
              Cada vez más radios de la ciudad de Rosario y alrededores están usando SortWhats
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
            {features.map((feature, index) => (
              <Card key={index} className="text-center p-8 border-0 shadow-lg bg-white/80 backdrop-blur-sm">
                <CardHeader className="pb-6">
                  <feature.icon className="h-16 w-16 text-primary mx-auto mb-4" />
                  <CardTitle className="text-xl font-bold">{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <h3 className="text-2xl md:text-3xl font-black mb-8">Hace mucho más fáciles tus Sorteos</h3>
              <div className="space-y-6">
                {benefits.map((benefit, index) => (
                  <div key={index} className="flex items-start gap-4">
                    <benefit.icon className="h-8 w-8 text-primary mt-1 flex-shrink-0" />
                    <div>
                      <h4 className="font-bold text-lg mb-2">{benefit.title}</h4>
                      <p className="text-muted-foreground">{benefit.description}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="relative">
              <Image
                src="/sortwhats-banner-cuadrada.png"
                alt="SortWhats - Hace mucho más fáciles tus sorteos"
                width={500}
                height={500}
                className="rounded-2xl shadow-2xl object-cover object-left aspect-square"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-20 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <div className="text-primary text-sm font-semibold tracking-[0.3em] uppercase mb-4">Actualizate</div>
            <h2 className="text-3xl md:text-4xl font-black mb-6 text-balance">La solución más cerca al menor costo</h2>
            <p className="text-muted-foreground text-lg max-w-3xl mx-auto">
              Los distintos abonos son super accesibles para que puedas brindar a tu audiencia el mejor servicio
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {pricing.map((item, index) => (
              <Card key={index} className="text-center p-8 border-0 shadow-lg bg-white/80 backdrop-blur-sm">
                <CardHeader className="pb-6">
                  <item.icon className="h-16 w-16 text-primary mx-auto mb-4" />
                  <CardTitle className="text-xl font-bold">{item.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base leading-relaxed">{item.description}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contacto" className="py-20 md:py-24">
        <div className="max-w-4xl mx-auto text-center px-4">
          <h2 className="text-3xl md:text-4xl font-black mb-6 text-balance">Escribinos</h2>
          <p className="text-muted-foreground text-lg mb-12 max-w-2xl mx-auto">
            Podemos ver juntos cuál es la solución que más se ajusta a tus necesidades
          </p>
        </div>

        <div className="bg-secondary rounded-none p-12 text-white w-full min-h-80 flex items-center justify-center">
          <div className="max-w-4xl mx-auto px-4 w-full">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
              <div className="text-left">
                <h3 className="text-2xl font-bold mb-4">¿Listo para empezar?</h3>
                <p className="text-white/80 mb-6">
                  Contactanos por WhatsApp y te ayudamos a configurar tu primer sorteo
                </p>
              </div>

              <div className="text-center">
                <Button
                  asChild
                  size="lg"
                  className="bg-primary hover:bg-primary/90 px-8 py-4 text-lg rounded-full hover:scale-105 transition-all duration-300 w-full md:w-auto"
                >
                  <a
                    href="https://wa.me/+5493464511893?text=Hola,%20quiero%20información%20sobre%20SortWhats"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-center gap-3"
                  >
                    <MessageCircle className="h-5 w-5" />
                    Iniciar Chat
                  </a>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}