import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Shield, Compass, Wind, HandshakeIcon, MapPin, Star, Flame } from "lucide-react";

const values = [
  { icon: HandshakeIcon, title: "Irmandade", desc: "Juntos na estrada e na vida. A força do ITAROTA79 é a união." },
  { icon: Shield, title: "Respeito", desc: "Respeito pela estrada, pelo próximo e pela cultura moto." },
  { icon: Compass, title: "Aventura", desc: "Cada rota é uma nova história. Cada curva, uma emoção." },
  { icon: Wind, title: "Liberdade", desc: "O vento no rosto, a estrada aberta e nenhum destino obrigatório." },
  { icon: MapPin, title: "Estrada", desc: "Quilômetros de experiência, paisagens e memórias inesquecíveis." },
  { icon: Star, title: "Compromisso", desc: "Compromisso com segurança, organização e com cada membro." },
];

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

  return (
    <section className="section-padding bg-background relative overflow-hidden" ref={ref}>
      {/* Background road texture */}
      <div className="absolute inset-0 opacity-[0.02]">
        <div className="absolute top-0 left-1/2 w-px h-full bg-foreground" />
        {[...Array(20)].map((_, i) => (
          <div key={i} className="absolute left-1/2 -translate-x-1/2 w-2 h-8 bg-foreground" style={{ top: `${i * 5}%` }} />
        ))}
      </div>

      <div className="container mx-auto relative z-10">
        <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, rotate: -180 }}
            animate={inView ? { scale: 1, rotate: 0 } : {}}
            transition={{ duration: 0.6, type: "spring" }}
            className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6"
          >
            <Flame className="w-8 h-8 text-primary" />
          </motion.div>
          <h2 className="font-display text-4xl md:text-5xl font-bold tracking-wider mb-4">
            NOSSA <span className="text-primary">ESSÊNCIA</span>
          </h2>
          <div className="w-20 h-1 bg-primary mx-auto mb-6" />
          <p className="text-lg text-muted-foreground max-w-xl mx-auto">
            Os valores que nos guiam em cada quilômetro percorrido.
          </p>
        </motion.div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {values.map((v, i) => (
            <motion.div
              key={v.title}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={inView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className="group relative overflow-hidden rounded-xl border border-border bg-card p-8 card-hover"
            >
              <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-full group-hover:bg-primary/10 group-hover:w-40 group-hover:h-40 transition-all duration-500" />
              <div className="absolute bottom-0 left-0 w-16 h-16 bg-primary/3 rounded-tr-full group-hover:bg-primary/5 transition-all duration-500" />
              <motion.div
                whileHover={{ rotate: 10, scale: 1.1 }}
                className="relative z-10"
              >
                <v.icon className="w-10 h-10 text-primary mb-4" />
              </motion.div>
              <h3 className="font-display text-xl font-semibold mb-2 relative z-10">{v.title}</h3>
              <p className="text-sm text-muted-foreground relative z-10">{v.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default EssenceSection;
