'use client';

import { WebsiteData } from '@/lib/hbfc-data';
import { Mountain, Compass, MapPin, CheckCircle, ArrowUpRight, Flame, Shield } from 'lucide-react';
import { motion } from 'motion/react';

interface OmrExpeditionProps {
  data: WebsiteData;
  onExploreEventsClick: () => void;
}

export function OmrExpedition({ data, onExploreEventsClick }: OmrExpeditionProps) {
  const omr = data.omrExpedition;

  return (
    <section id="omr-expedition" className="py-10 sm:py-16 md:py-20 relative bg-white border-t border-neutral-200 overflow-hidden">
      <div className="max-w-7xl mx-auto px-3.5 sm:px-6 lg:px-8">
        {/* Header Tag */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="flex flex-col md:flex-row md:items-end justify-between mb-8 sm:mb-12 gap-4 sm:gap-6"
        >
          <div>
            <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-800 text-[10px] sm:text-xs font-bold uppercase tracking-widest mb-2.5">
              <Mountain className="w-3 h-3 text-amber-600" />
              <span>Flagship Adventure</span>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-black text-neutral-900 uppercase tracking-tight">
              {omr.title}
            </h2>
            <p className="text-amber-700 font-semibold text-xs sm:text-sm md:text-base mt-1 tracking-wide">
              {omr.tagline}
            </p>
          </div>

          <div className="flex items-center gap-2">
            <motion.button
              whileHover={{ scale: 1.04, y: -2 }}
              whileTap={{ scale: 0.96 }}
              id="omr-expedition-view-btn"
              onClick={onExploreEventsClick}
              className="px-4 py-2 rounded-xl text-[11px] sm:text-xs font-bold uppercase tracking-wider bg-white hover:bg-neutral-50 text-neutral-800 border border-neutral-300 hover:border-emerald-500 flex items-center gap-1.5 transition-all cursor-pointer shadow-xs"
            >
              <span>View Itinerary</span>
              <ArrowUpRight className="w-3.5 h-3.5 text-emerald-700" />
            </motion.button>
          </div>
        </motion.div>

        {/* Big Mountain Showcase Banner */}
        <motion.div
          initial={{ opacity: 0, scale: 0.98, y: 20 }}
          whileInView={{ opacity: 1, scale: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.7 }}
          className="relative rounded-2xl sm:rounded-3xl overflow-hidden border border-neutral-200 shadow-md mb-8 sm:mb-12 group"
        >
          <div className="relative h-[300px] sm:h-[400px] md:h-[460px] w-full">
            <img
              src={omr.image}
              alt="Obudu Mountain Resort Expedition"
              className="w-full h-full object-cover object-center brightness-[0.9] contrast-[1.05] group-hover:scale-105 transition-transform duration-700"
            />
            {/* Gradient overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-neutral-950/85 via-neutral-950/35 to-transparent" />

            {/* Bottom Content within Image */}
            <div className="absolute bottom-4 sm:bottom-8 left-4 sm:left-8 right-4 sm:right-8 flex flex-col md:flex-row md:items-end justify-between gap-4">
              <div className="max-w-xl">
                <span className="px-2.5 py-0.5 rounded text-[10px] sm:text-xs font-black uppercase bg-emerald-600 text-white tracking-wider mb-2 inline-block shadow-md">
                  11KM High-Altitude Climb
                </span>
                <p className="text-xs sm:text-sm text-white leading-relaxed drop-shadow-md">
                  {omr.description}
                </p>
              </div>

              {/* Stats badges */}
              <div className="flex flex-wrap gap-2">
                <div className="px-3 py-1.5 rounded-lg sm:rounded-xl bg-white/95 backdrop-blur-md border border-neutral-200 text-left shadow-xs">
                  <span className="text-[9px] uppercase font-bold text-emerald-700 block">Distance</span>
                  <span className="text-xs sm:text-base font-black text-neutral-900">{omr.distance}</span>
                </div>

                <div className="px-3 py-1.5 rounded-lg sm:rounded-xl bg-white/95 backdrop-blur-md border border-neutral-200 text-left shadow-xs">
                  <span className="text-[9px] uppercase font-bold text-amber-700 block">Summit Altitude</span>
                  <span className="text-xs sm:text-base font-black text-neutral-900">{omr.altitude}</span>
                </div>

                <div className="px-3 py-1.5 rounded-lg sm:rounded-xl bg-white/95 backdrop-blur-md border border-neutral-200 text-left hidden sm:block shadow-xs">
                  <span className="text-[9px] uppercase font-bold text-neutral-500 block">Terrain</span>
                  <span className="text-xs sm:text-base font-black text-neutral-900">22 Bends Road</span>
                </div>
              </div>
            </div>
          </div>
        </motion.div>

        {/* Expedition Highlights Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {omr.highlights.map((highlight, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: idx * 0.08 }}
              whileHover={{ y: -4, transition: { duration: 0.2 } }}
              className="p-5 rounded-2xl bg-neutral-50 border border-neutral-200 hover:border-emerald-300 transition-colors flex flex-col justify-between shadow-xs hover:shadow-md"
            >
              <div>
                <div className="w-8 h-8 rounded-lg bg-emerald-100 border border-emerald-200 text-emerald-800 flex items-center justify-center font-bold text-xs mb-3">
                  0{idx + 1}
                </div>
                <p className="text-sm text-neutral-800 font-medium leading-relaxed">
                  {highlight}
                </p>
              </div>
              <div className="mt-4 pt-3 border-t border-neutral-200 flex items-center gap-1 text-[11px] font-bold text-amber-700 uppercase tracking-wider">
                <CheckCircle className="w-3.5 h-3.5" />
                <span>Verified Activity</span>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default OmrExpedition;