import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Users, Mountain, Route, Heart, Bike } from "lucide-react";

const AboutSection = () => {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-100px" });

  const features = [
    { icon: Users, title: "Irmandade", text: "União entre motociclistas que compartilham a mesma paixão pela estrada." },
    { icon: Mountain, title: "Aventura", text: "Rotas desafiadoras e paisagens de tirar o fôlego pelo Brasil." },
    { icon: Route, title: "Viagens", text: "Expedições planejadas com segurança, diversão e muita quilometragem." },
    { icon: Heart, title: "Paixão", text: "O motociclismo como estilo de vida, cultura e expressão de liberdade." },
  ];

  return (
    <section id="sobre" className="section-padding gradient-dark relative overflow-hidden" ref={ref}>
      {/* Road decoration */}
      <div className="absolute left-8 top-0 bottom-0 w-[2px] bg-primary/5 hidden lg:block">
        <motion.div
          initial={{ height: 0 }}
          animate={inView ? { height: "100%" } : {}}
          transition={{ duration: 1.5 }}
          className="w-full bg-primary/20"
        />
      </div>

      <div className="container mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <motion.div
            initial={{ scale: 0 }}
            animate={inView ? { scale: 1 } : {}}
            transition={{ duration: 0.5, type: "spring" }}
            className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6"
          >
            <Bike className="w-8 h-8 text-primary" />
          </motion.div>
          <h2 className="font-display text-4xl md:text-5xl font-bold tracking-wider text-dark-surface-foreground mb-4">
            SOBRE O <span className="text-primary">CLUBE</span>
          </h2>
          <div className="w-20 h-1 bg-primary mx-auto mb-6" />
          <p className="text-lg text-dark-surface-foreground/60 max-w-2xl mx-auto">
            O ITAROTA79 nasceu da paixão por viagens de moto e da vontade de reunir
            pessoas que compartilham o mesmo espírito aventureiro. Somos um clube de
            motociclistas unidos pela estrada, pelo respeito e pela irmandade.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {features.map((f, i) => (
            <motion.div
              key={f.title}
              initial={{ opacity: 0, y: 30 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: i * 0.15 }}
              className="group bg-secondary/50 border border-border/10 rounded-xl p-6 text-center card-hover relative overflow-hidden"
            >
              <div className="absolute -bottom-4 -right-4 w-24 h-24 bg-primary/5 rounded-full group-hover:bg-primary/10 transition-colors duration-500" />
              <div className="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 group-hover:scale-110 transition-all duration-300">
                <f.icon className="w-7 h-7 text-primary" />
              </div>
              <h3 className="font-display text-xl font-semibold text-dark-surface-foreground mb-2 relative z-10">{f.title}</h3>
              <p className="text-sm text-dark-surface-foreground/50 relative z-10">{f.text}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default AboutSection;
