import { Heart, Smile, Shield } from "lucide-react";

const features = [
  {
    icon: Smile,
    title: "Crianças felizes",
    description: "Diversão garantida em um espaço pensado para a alegria dos pequenos",
  },
  {
    icon: Shield,
    title: "Pais tranquilos",
    description: "Ambiente seguro para você aproveitar a festa sem preocupações",
  },
  {
    icon: Heart,
    title: "Momentos especiais",
    description: "Memórias inesquecíveis que vão durar para sempre",
  },
];

export const ConnectionSection = () => {
  return (
    <section className="py-16 md:py-24 bg-background">
      <div className="container mx-auto px-6">
        <div className="max-w-4xl mx-auto">
          {/* Main Message */}
          <div className="text-center mb-16 animate-fade-in">
            <h2 className="font-display font-bold text-3xl md:text-4xl text-foreground mb-6">
              A festa dos sonhos, sem dor de cabeça
            </h2>
            <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
              No Só Folia, cuidamos de cada detalhe para que você aproveite 
              cada momento ao lado da sua família. Enquanto as crianças se divertem, 
              você relaxa e celebra.
            </p>
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="text-center p-6 rounded-2xl bg-secondary/50 hover:bg-secondary transition-all duration-300 hover:-translate-y-1"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-4">
                  <feature.icon className="w-8 h-8 text-primary" />
                </div>
                <h3 className="font-display font-bold text-xl text-foreground mb-2">
                  {feature.title}
                </h3>
                <p className="text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
