import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { MapPin, Calendar, Flag, Heart } from "lucide-react";
import itabaianaImg from "@/assets/itabaiana-city.jpg";

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

  return (
    <section
      className="section-padding gradient-dark relative overflow-hidden"
      ref={ref}
    >
      {/* Background decoration */}
      <div className="absolute inset-0 opacity-5">
        <div className="absolute top-0 left-1/4 w-px h-full bg-primary" />
        <div className="absolute top-0 left-3/4 w-px h-full bg-primary" />
      </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 }}
            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"
          >
            <Flag className="w-8 h-8 text-primary" />
          </motion.div>
          <h2 className="font-display text-4xl md:text-5xl font-bold tracking-wider text-secondary-foreground mb-4">
            NOSSA <span className="text-primary">ORIGEM</span>
          </h2>
          <div className="w-20 h-1 bg-primary mx-auto mb-6" />
        </motion.div>

        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Image */}
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.7, delay: 0.2 }}
            className="relative group"
          >
            <div className="relative rounded-2xl overflow-hidden">
              <img
                src={itabaianaImg}
                alt="Cidade de Itabaiana, Sergipe - berço do ITAROTA79"
                className="w-full h-[400px] object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-secondary/80 via-transparent to-transparent" />
              <div className="absolute bottom-6 left-6 right-6">
                <div className="flex items-center gap-2 text-secondary-foreground/90">
                  <MapPin className="w-5 h-5 text-primary" />
                  <span className="font-display text-lg tracking-wider">
                    Itabaiana, Sergipe
                  </span>
                </div>
              </div>
            </div>
            {/* Decorative frame */}
            <div className="absolute -bottom-3 -right-3 w-full h-full border-2 border-primary/20 rounded-2xl -z-10" />
          </motion.div>

          {/* Story */}
          <motion.div
            initial={{ opacity: 0, x: 40 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.7, delay: 0.3 }}
            className="space-y-6"
          >
            <div className="flex items-center gap-3 text-primary">
              <Calendar className="w-5 h-5" />
              <span className="font-display text-lg tracking-wider">
                Fundado em 2025 — Itabaiana, SE
              </span>
            </div>

            <p className="text-secondary-foreground/70 leading-relaxed text-lg">
              O <span className="text-primary font-semibold">ITAROTA79</span>{" "}
              nasceu em 2025, na cidade de Itabaiana, no coração de Sergipe, a
              partir da amizade de amigos motociclistas que compartilhavam um
              sonho em comum:{" "}
              <strong className="text-secondary-foreground">
                reunir pessoas apaixonadas por viagens de moto e transformar
                cada estrada em uma história inesquecível.
              </strong>
            </p>

            <p className="text-secondary-foreground/60 leading-relaxed">
              Tudo começou em uma viagem simples até a Serra de Itabaiana. No
              caminho, entre curvas, paisagens e o ronco dos motores, surgiu a
              ideia de criar algo maior, um clube que fosse mais que encontros
              esporádicos. Um espaço de irmandade, respeito e paixão pela
              estrada.
            </p>

            {/* 
            <p className="text-secondary-foreground/60 leading-relaxed">
              Desde então, o ITAROTA79 cresceu e se tornou referência para motociclistas
              da região, promovendo viagens por todo o Nordeste, fortalecendo a cultura
              moto e criando laços que vão muito além do asfalto. Cada rota percorrida
              é um capítulo dessa história que continuamos escrevendo juntos.
            </p> */}

            <div className="flex items-center gap-3 pt-4">
              <Heart className="w-5 h-5 text-primary" />
              <span className="text-secondary-foreground/50 font-display tracking-wider text-sm uppercase">
                Da Serra ao asfalto — juntos desde o primeiro quilômetro
              </span>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default FoundersSection;
