'use client';

import { WebsiteData } from '@/lib/hbfc-data';
import { Target, Compass, Award, Activity, Users, Mountain, HeartHandshake, ShieldCheck } from 'lucide-react';
import { motion } from 'motion/react';

interface AboutSectionProps {
  data: WebsiteData;
}

export function AboutSection({ data }: AboutSectionProps) {
  const iconMap: Record<string, any> = {
    Activity,
    Users,
    Mountain,
    HeartHandshake,
    Award,
  };

  return (
    <section id="about" 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 Heading */}
        <motion.div
          initial={{ opacity: 0, y: 25 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-50px' }}
          transition={{ duration: 0.6 }}
          className="text-center max-w-3xl mx-auto mb-10 sm:mb-14"
        >
          <div className="flex justify-center mb-3">
            <motion.div
              whileHover={{ scale: 1.08 }}
              className="w-12 h-12 rounded-2xl bg-black border border-amber-400/70 p-0.5 shadow-xs flex items-center justify-center"
            >
              <img
                src="/hbfc-logo.jpg"
                alt="HBFC Official Crest"
                className="w-full h-full object-contain"
                referrerPolicy="no-referrer"
              />
            </motion.div>
          </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">
            <ShieldCheck className="w-3.5 h-3.5 text-amber-600" />
            <span>Our Heritage & Purpose</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">
            About HBFC
          </h2>
          <p className="text-amber-600 font-bold text-xs sm:text-sm md:text-base tracking-wide uppercase">
            {data.brand.motto}
          </p>
        </motion.div>

        {/* History Story Block */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-10 items-center mb-12 sm:mb-16">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="lg:col-span-6 space-y-3.5 sm:space-y-4"
          >
            <div className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-md text-[11px] font-bold uppercase bg-emerald-100 text-emerald-900 border border-emerald-200">
              Founded in 2019 • Calabar
            </div>
            <h3 className="text-xl sm:text-2xl font-black text-neutral-900 leading-snug">
              A Movement Dedicated to Vitality, Leadership, and Impact
            </h3>
            <p className="text-neutral-600 text-xs sm:text-sm leading-relaxed">
              {data.about.history}
            </p>
            <div className="pt-2 flex flex-wrap gap-3 text-[11px] font-semibold text-neutral-500">
              <span className="flex items-center gap-1 text-neutral-800">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-600" /> Cross River State, Nigeria
              </span>
              <span className="flex items-center gap-1 text-neutral-800">
                <span className="w-1.5 h-1.5 rounded-full bg-amber-500" /> Non-typical Gym: Lifestyle & Community
              </span>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="lg:col-span-6 grid grid-cols-1 sm:grid-cols-2 gap-4"
          >
            {/* Mission Card */}
            <motion.div
              whileHover={{ y: -4, borderColor: '#6ee7b7' }}
              transition={{ duration: 0.2 }}
              className="p-6 rounded-2xl bg-neutral-50 border border-neutral-200 shadow-xs flex flex-col justify-between hover:shadow-md transition-shadow"
            >
              <div>
                <div className="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-800 border border-emerald-200 flex items-center justify-center mb-4">
                  <Target className="w-5 h-5" />
                </div>
                <h4 className="text-lg font-black text-neutral-900 uppercase tracking-wider mb-2">
                  Our Mission
                </h4>
                <p className="text-neutral-600 text-sm leading-relaxed">
                  {data.about.mission}
                </p>
              </div>
              <div className="mt-4 pt-3 border-t border-neutral-200 text-[11px] font-bold text-emerald-800 uppercase tracking-wider">
                Purpose Driven
              </div>
            </motion.div>

            {/* Vision Card */}
            <motion.div
              whileHover={{ y: -4, borderColor: '#fcd34d' }}
              transition={{ duration: 0.2 }}
              className="p-6 rounded-2xl bg-neutral-50 border border-neutral-200 shadow-xs flex flex-col justify-between hover:shadow-md transition-shadow"
            >
              <div>
                <div className="w-10 h-10 rounded-xl bg-amber-100 text-amber-800 border border-amber-200 flex items-center justify-center mb-4">
                  <Compass className="w-5 h-5" />
                </div>
                <h4 className="text-lg font-black text-neutral-900 uppercase tracking-wider mb-2">
                  Our Vision
                </h4>
                <p className="text-neutral-600 text-sm leading-relaxed">
                  {data.about.vision}
                </p>
              </div>
              <div className="mt-4 pt-3 border-t border-neutral-200 text-[11px] font-bold text-amber-800 uppercase tracking-wider">
                Continental Outlook
              </div>
            </motion.div>
          </motion.div>
        </div>

        {/* Values Section */}
        <div className="mb-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="text-center max-w-2xl mx-auto mb-10"
          >
            <h3 className="text-xl sm:text-2xl font-black text-neutral-900 uppercase tracking-wider mb-2">
              Our Core Values
            </h3>
            <p className="text-neutral-600 text-sm">
              The foundational principles steering every walk, expedition, and civic engagement.
            </p>
          </motion.div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
            {data.about.values.map((val, idx) => {
              const IconComp = iconMap[val.icon] || Award;
              return (
                <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: -6, transition: { duration: 0.2 } }}
                  className="p-5 rounded-2xl bg-white border border-neutral-200 hover:border-emerald-300 transition-colors group shadow-xs hover:shadow-lg"
                >
                  <div className="w-10 h-10 rounded-xl bg-neutral-50 text-emerald-700 border border-neutral-200 group-hover:bg-emerald-50 group-hover:border-emerald-200 flex items-center justify-center mb-4 transition-colors">
                    <IconComp className="w-5 h-5 group-hover:scale-110 transition-transform" />
                  </div>
                  <h4 className="text-sm font-bold text-neutral-900 mb-2 group-hover:text-emerald-800 transition-colors">
                    {val.title}
                  </h4>
                  <p className="text-xs text-neutral-600 leading-relaxed">
                    {val.desc}
                  </p>
                </motion.div>
              );
            })}
          </div>
        </div>

        {/* Leadership Section */}
        <div id="leadership" className="pt-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="text-center max-w-2xl mx-auto mb-12"
          >
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-neutral-100 border border-neutral-200 text-neutral-700 text-xs font-semibold uppercase tracking-wider mb-2">
              Governance & Vision
            </div>
            <h3 className="text-2xl sm:text-4xl font-black text-neutral-900 uppercase tracking-tight mb-2">
              Leadership
            </h3>
            <p className="text-neutral-600 text-sm">
              Distinguished individuals guiding the vision and operations of Healthy Billionaires Fitness Club.
            </p>
          </motion.div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
            {data.leadership.map((leader, idx) => (
              <motion.div
                key={leader.id}
                initial={{ opacity: 0, y: 25 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.45, delay: idx * 0.08 }}
                whileHover={{ y: -6, transition: { duration: 0.2 } }}
                className="rounded-2xl bg-white border border-neutral-200 overflow-hidden hover:border-amber-300 transition-colors group shadow-xs hover:shadow-xl flex flex-col"
              >
                <div className="aspect-[4/5] relative overflow-hidden bg-neutral-100">
                  <img
                    src={leader.image}
                    alt={leader.name}
                    className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-neutral-950/40 via-transparent to-transparent" />
                </div>
                <div className="p-4 flex-1 flex flex-col justify-between">
                  <div>
                    <h4 className="text-sm font-bold text-neutral-900 group-hover:text-emerald-700 transition-colors">
                      {leader.name}
                    </h4>
                    <p className="text-xs text-amber-700 font-semibold mt-1 leading-snug">
                      {leader.role}
                    </p>
                  </div>
                  <div className="mt-3 pt-2.5 border-t border-neutral-100 flex items-center justify-between text-[10px] text-neutral-500 font-semibold uppercase tracking-wider">
                    <span>HBFC Executive</span>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default AboutSection;