import { motion } from "framer-motion";
import { Reveal } from "@/components/Reveal";
import iconicDestination from "@/assets/iconic-destination.jpg.asset.json";
import ultraLuxuryResort from "@/assets/ultra-luxury-resort.jpg.asset.json";
import privateEstate from "@/assets/private-estate.png.asset.json";

const cards = [
  {
    index: "I",
    title: "Iconic Destination",
    subtitle: "High Impact Visitor Experience",
    body: "A scenic gondola from waterfront to panoramic summit. Integrated dining and viewing platforms, direct capture of cruise ship guests, and a wildlife adventure park, designed for high volume, year round visitation.",
    image: iconicDestination.url,
    alt: "Aerial render of resort complex with gondola, waterpark, tennis courts, and waterfront activity zone",
  },
  {
    index: "II",
    title: "Ultra-Luxury Resort",
    subtitle: "Branded Hospitality Operation",
    body: "An immersive activity resort anchored by nature, wellness, and experiential programming. Structured for partnership with a globally recognized luxury operator, positioning the property for long-term international recognition.",
    image: ultraLuxuryResort.url,
    alt: "Aerial render of ultra-luxury resort with gondola, pools, geodesic domes, and yacht marina",
  },
  {
    index: "III",
    title: "Private Estate",
    subtitle: "Legacy Waterfront Holding",
    body: "A 144 acre private compound with an ultra-luxury main residence and guest lodges. Private helipad and yacht access, set along the only beluga whale migration corridor in the world.",
    image: privateEstate.url,
    alt: "Private estate render with timber and glass residence, private hangar, helipad, and runway above the coast",
  },
];

export function Vision() {
  return (
    <section id="vision" className="bg-paper text-ink py-32 md:py-48">
      <div className="mx-auto max-w-[1440px] px-6 md:px-12">
        <Reveal>
          <div className="flex items-center gap-6 mb-20 md:mb-32">
            <span className="label text-gold">02</span>
            <span className="rule flex-1 text-ink" />
            <span className="label text-stone-500">Development Pathways</span>
          </div>
        </Reveal>

        <Reveal>
          <h2 className="display text-ink text-[42px] sm:text-[60px] md:text-[80px] text-center mx-auto">
            Three Development Pathways
          </h2>
        </Reveal>
        <Reveal delay={0.15}>
          <p className="mt-8 text-center text-stone-600 max-w-2xl mx-auto leading-relaxed">
            Each concept leverages the site's unique position at the intersection of protected
            wilderness, global accessibility, and year round revenue potential.
          </p>
        </Reveal>

        <div className="mt-24 md:mt-32 grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 overflow-x-auto md:overflow-visible snap-x snap-mandatory md:snap-none -mx-6 px-6 md:mx-0 md:px-0">
          {cards.map((c, i) => (
            <Reveal key={c.title} delay={i * 0.1} className="min-w-[80%] md:min-w-0 snap-start">
              <motion.article
                whileHover={{ y: -8 }}
                transition={{ type: "spring", stiffness: 300, damping: 20 }}
                className="group cursor-default"
              >
                <div className="relative overflow-hidden border border-line-light group-hover:border-gold transition-colors duration-500 bg-stone-100">
                  <div className="aspect-[4/5] w-full overflow-hidden">
                    <img src={c.image} alt={c.alt} loading="lazy" className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" />
                  </div>
                </div>
                <div className="flex items-baseline gap-4 mt-6">
                  <span className="label text-gold">{c.index}</span>
                  <h3 className="display text-ink text-2xl md:text-3xl">{c.title}</h3>
                </div>
                <span className="label text-stone-500 mt-2 inline-block">{c.subtitle}</span>
                <p className="mt-4 text-stone-600 leading-relaxed text-[15px]">{c.body}</p>
              </motion.article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
