import { Card } from "@/components/ui/card";
import { ArrowRight, MapPin, Calendar, CreditCard } from "lucide-react";

const FeaturesSection = () => {
  const steps = [
    {
      number: "1",
      icon: <MapPin className="w-8 h-8" />,
      title: "Ingresa tu ubicación para comenzar a buscar lugares emblemáticos",
      description: "Nuestra IA detectará automáticamente puntos de interés, restaurantes, hoteles y actividades cerca de ti."
    },
    {
      number: "2", 
      icon: <Calendar className="w-8 h-8" />,
      title: "Haz una cita en el lugar que quieres visitar",
      description: "Reserva directamente desde la plataforma con confirmación instantánea y pagos seguros."
    },
    {
      number: "3",
      icon: <CreditCard className="w-8 h-8" />,
      title: "Visita el lugar y disfruta de la experiencia",
      description: "Accede a guías con IA, realidad aumentada y soporte 24/7 durante tu visita."
    }
  ];

  return (
    <section className="py-20" style={{ backgroundColor: '#f8f4f3' }}>
      <div className="max-w-7xl mx-auto px-4">
        {/* Section Header */}
        <div className="text-center mb-16">
          <div className="inline-block px-4 py-2 text-sm font-medium mb-4" style={{ backgroundColor: 'rgba(248, 69, 37, 0.1)', color: '#F84525', borderRadius: '9999px' }}>
            La Mejor Manera
          </div>
          <h2 className="text-4xl md:text-5xl font-bold mb-6" style={{ color: '#433c3a' }}>
            Encuentra Tu Lugar Soñado{" "}
            <span style={{ 
              background: 'linear-gradient(135deg, #F84525, #f7b733)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text'
            }}>La Mejor Manera</span>
          </h2>
          <p className="text-xl max-w-3xl mx-auto" style={{ color: '#6b7280' }}>
            Descubre categorías emocionantes. Encuentra exactamente lo que estás buscando.
          </p>
        </div>

        {/* Steps Grid */}
        <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {steps.map((step, index) => (
            <div key={index} className="relative">
              <div className="p-8 text-center h-full" style={{ 
                backgroundColor: 'rgba(255, 255, 255, 0.7)', 
                backdropFilter: 'blur(5px)',
                borderRadius: '1rem',
                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
                transition: 'all 0.3s ease-out'
              }}>
                {/* Step Number */}
                <div className="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl mx-auto mb-6" style={{
                  background: 'linear-gradient(135deg, #F84525, #f7b733)'
                }}>
                  {step.number}
                </div>

                {/* Icon */}
                <div className="mb-6 flex justify-center" style={{ color: '#F84525' }}>
                  {step.icon}
                </div>

                {/* Content */}
                <h3 className="text-xl font-semibold mb-4 leading-tight" style={{ color: '#433c3a' }}>
                  {step.title}
                </h3>
                <p className="leading-relaxed" style={{ color: '#6b7280' }}>
                  {step.description}
                </p>
              </div>

              {/* Arrow Connector (hidden on mobile) */}
              {index < steps.length - 1 && (
                <div className="hidden md:block absolute top-24 -right-4 z-10">
                  <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ backgroundColor: '#197db8' }}>
                    <ArrowRight className="w-4 h-4 text-white" />
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Bottom CTA */}
        <div className="text-center mt-16">
          <div className="max-w-2xl mx-auto">
            <h3 className="text-2xl font-semibold mb-4" style={{ color: '#433c3a' }}>
              ¿Listo para comenzar tu aventura?
            </h3>
            <p className="mb-8" style={{ color: '#6b7280' }}>
              Únete a miles de turistas que ya están disfrutando de experiencias únicas con nuestra plataforma.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="px-6 py-3 rounded-lg font-semibold text-white transition-all hover:transform hover:-translate-y-1" style={{
                backgroundColor: '#F84525',
                boxShadow: '0 4px 15px rgba(248, 69, 37, 0.3)'
              }}>
                Comenzar Ahora
              </button>
              <button className="px-6 py-3 rounded-lg font-medium border transition-all" style={{
                color: '#F84525',
                borderColor: 'rgba(248, 69, 37, 0.2)',
                backgroundColor: 'rgba(255, 255, 255, 0.1)',
                backdropFilter: 'blur(10px)'
              }}>
                Ver Demo
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FeaturesSection;