"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { X, MessageCircle, Zap, TrendingUp, Star } from "lucide-react"
import Image from "next/image"

export default function OdooModal() {
  const [isOpen, setIsOpen] = useState(false)

  useEffect(() => {
    // Verificar si el modal ya se mostró en esta sesión
    const hasShownModal = sessionStorage.getItem("odoo-modal-shown")

    if (!hasShownModal) {
      // Mostrar el modal después de 2 segundos
      const timer = setTimeout(() => {
        setIsOpen(true)
        sessionStorage.setItem("odoo-modal-shown", "true")
      }, 2000)

      return () => clearTimeout(timer)
    }
  }, [])

  const closeModal = () => {
    setIsOpen(false)
  }

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md mx-auto relative animate-scale-in">
        <div className="bg-gradient-to-br from-purple-600 via-blue-600 to-indigo-700 rounded-2xl shadow-2xl overflow-hidden border-4 border-white/20">
          <button
            onClick={closeModal}
            className="absolute top-4 right-4 p-2 hover:bg-white/20 rounded-full transition-colors z-10 text-white"
          >
            <X className="h-5 w-5" />
          </button>

          {/* Header promocional */}
          <div className="text-center pt-8 pb-6 px-6 text-white relative">
            <div className="absolute inset-0 bg-gradient-to-r from-yellow-400/20 to-orange-400/20 animate-pulse"></div>
            <div className="relative z-10">
              <div className="flex items-center justify-center mb-4">
                <div className="bg-white/10 backdrop-blur-sm rounded-xl p-3 border border-white/20">
                  <Image
                    src="/images/odoo-ready-partner.png"
                    alt="Odoo Ready Partner"
                    width={120}
                    height={60}
                    className="h-8 w-auto"
                  />
                </div>
              </div>

              <div className="mb-3">
                <h2 className="text-2xl font-black mb-2 text-shadow-lg">🚀 ¡TRANSFORMA TU NEGOCIO!</h2>
                <div className="inline-flex items-center gap-2 bg-yellow-400 text-black px-4 py-1 rounded-full text-sm font-bold animate-bounce">
                  <Star className="h-4 w-4" />
                  PARTNERS OFICIALES ODOO
                </div>
              </div>
            </div>
          </div>

          {/* Contenido promocional */}
          <div className="bg-white rounded-t-3xl p-6 -mt-2">
            <div className="text-center mb-6">
              <h3 className="text-xl font-bold text-gray-900 mb-2">¿Listo para automatizar todo?</h3>
              <p className="text-gray-600 text-sm leading-relaxed">
                Implementamos Odoo ERP completo para que tu empresa crezca sin límites
              </p>
            </div>

            {/* Beneficios destacados */}
            <div className="grid grid-cols-2 gap-3 mb-6">
              <div className="flex items-center gap-2 bg-green-50 p-3 rounded-xl">
                <Zap className="h-5 w-5 text-green-600" />
                <span className="text-sm font-semibold text-green-800">Consulta Gratis</span>
              </div>
              <div className="flex items-center gap-2 bg-blue-50 p-3 rounded-xl">
                <TrendingUp className="h-5 w-5 text-blue-600" />
                <span className="text-sm font-semibold text-blue-800">Presupuesto $0</span>
              </div>
            </div>

            {/* Call to action principal */}
            <div className="space-y-3">
              <Button
                asChild
                size="lg"
                className="w-full bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 text-white font-bold py-4"
              >
                <a
                  href="https://wa.me/5493413110700?text=¡Hola!%20Quiero%20transformar%20mi%20negocio%20con%20Odoo.%20¿Podemos%20hablar?"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-center gap-3"
                >
                  <MessageCircle className="h-6 w-6" />
                  ¡QUIERO MI CONSULTA GRATIS!
                </a>
              </Button>

              <p className="text-center text-xs text-gray-500">📞 Respuesta inmediata por WhatsApp</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}