'use client';

import { WebsiteData } from '@/lib/hbfc-data';
import { HeartPulse, Users, Sparkles, Compass, Trees, ArrowRight } from 'lucide-react';
import { motion } from 'motion/react';

interface ImpactSectionProps {
  data: WebsiteData;
  onJoinClick: () => void;
}

export function ImpactSection({ data, onJoinClick }: ImpactSectionProps) {
  const iconList = [HeartPulse, Users, Sparkles, Compass, Trees];

  return (
    <section id="impact" 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">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 25 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center max-w-3xl mx-auto mb-8 sm:mb-12"
        >
          <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">
            <span>Holistic Civic Footprint</span>
          </div>
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-black text-neutral-900 uppercase tracking-tight mb-2 sm:mb-3">
            Our Impact
          </h2>
          <p className="text-neutral-600 text-xs sm:text-sm max-w-xl mx-auto leading-relaxed">
            HBFC is far more than a morning workout club. We transform public health, unite diverse leadership, boost Cross River eco-tourism, and uplift our local neighborhoods.
          </p>
        </motion.div>

        {/* 5 Impact Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3.5 sm:gap-6 mb-10 sm:mb-14">
          {data.impactPillars.map((pillar, idx) => {
            const IconComp = iconList[idx % iconList.length];
            return (
              <motion.div
                key={pillar.id}
                initial={{ opacity: 0, y: 25 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: idx * 0.08 }}
                whileHover={{ y: -4, transition: { duration: 0.2 } }}
                className="rounded-2xl p-4 sm:p-6 bg-neutral-50 border border-neutral-200 hover:border-emerald-300 transition-colors group flex flex-col justify-between shadow-xs hover:shadow-md"
              >
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <div className="w-10 h-10 rounded-xl bg-white border border-neutral-200 group-hover:border-emerald-200 text-emerald-700 flex items-center justify-center transition-colors shadow-xs">
                      <IconComp className="w-5 h-5 group-hover:scale-110 transition-transform" />
                    </div>
                    <span className="text-[11px] font-mono font-bold text-neutral-400">
                      0{idx + 1}
                    </span>
                  </div>

                  <h3 className="text-base sm:text-lg font-bold text-neutral-900 mb-0.5 group-hover:text-emerald-800 transition-colors">
                    {pillar.title}
                  </h3>
                  <p className="text-[10px] sm:text-xs font-semibold uppercase text-amber-700 tracking-wider mb-2">
                    {pillar.subtitle}
                  </p>
                  <p className="text-xs sm:text-sm text-neutral-600 leading-relaxed mb-4">
                    {pillar.desc}
                  </p>
                </div>

                <div className="pt-3 border-t border-neutral-200 flex items-baseline justify-between">
                  <div>
                    <span className="text-xl sm:text-2xl font-black text-neutral-900 block">
                      {pillar.stat}
                    </span>
                    <span className="text-[10px] sm:text-[11px] font-medium text-neutral-500">
                      {pillar.statLabel}
                    </span>
                  </div>
                </div>
              </motion.div>
            );
          })}

          {/* 6th Call-To-Action Card to balance grid */}
          <motion.div
            initial={{ opacity: 0, y: 25 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.4 }}
            whileHover={{ y: -6, transition: { duration: 0.2 } }}
            className="rounded-2xl p-6 sm:p-7 bg-gradient-to-br from-emerald-50 via-white to-emerald-50/30 border border-emerald-200 flex flex-col justify-between shadow-xs hover:shadow-lg"
          >
            <div>
              <div className="w-12 h-12 rounded-xl bg-amber-100 border border-amber-200 text-amber-800 flex items-center justify-center mb-4">
                <Sparkles className="w-6 h-6" />
              </div>
              <h3 className="text-xl font-bold text-neutral-900 mb-2">
                Join the Movement
              </h3>
              <p className="text-sm text-neutral-600 leading-relaxed mb-6">
                Be part of our next community outreach, hospital support drive, or mountain conservation trek. Your involvement makes Calabar healthier and stronger.
              </p>
            </div>

            <motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              id="impact-join-movement-btn"
              onClick={onJoinClick}
              className="w-full py-3 rounded-xl font-bold text-xs uppercase tracking-wider bg-emerald-600 hover:bg-emerald-700 text-white shadow-sm flex items-center justify-center gap-2 cursor-pointer transition-all"
            >
              <span>Volunteer & Get Involved</span>
              <ArrowRight className="w-4 h-4 text-amber-300" />
            </motion.button>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

export default ImpactSection;