'use client';

import { WebsiteData } from '@/lib/hbfc-data';
import { Quote, Sparkles, Award } from 'lucide-react';
import { motion } from 'motion/react';

interface ChairmanMessageProps {
  data: WebsiteData;
}

export function ChairmanMessage({ data }: ChairmanMessageProps) {
  const chairman = data.chairman;

  return (
    <section id="chairman" 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 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="rounded-2xl sm:rounded-3xl bg-neutral-50 border border-neutral-200 p-5 sm:p-8 lg:p-12 shadow-xs relative overflow-hidden"
        >
          {/* Gold & Emerald top accent line */}
          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-600 via-amber-400 to-emerald-600" />

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-10 items-center">
            {/* Chairman Portrait */}
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="lg:col-span-5 flex flex-col items-center text-center"
            >
              <div className="relative w-44 h-44 sm:w-60 sm:h-60 rounded-2xl sm:rounded-3xl overflow-hidden border-2 border-emerald-300 shadow-md p-1 bg-gradient-to-br from-emerald-100 to-amber-100 mb-4 sm:mb-5 group">
                <div className="w-full h-full rounded-xl sm:rounded-2xl overflow-hidden relative">
                  <img
                    src={chairman.image}
                    alt={chairman.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/50 via-transparent to-transparent" />
                </div>
              </div>

              <h3 className="text-lg sm:text-xl font-black text-neutral-900 tracking-tight">
                {chairman.name}
              </h3>
              <p className="text-xs sm:text-sm font-bold uppercase tracking-wider text-amber-700 mt-0.5">
                {chairman.role}
              </p>
              <p className="text-[11px] sm:text-xs text-neutral-500 mt-0.5 font-medium">
                Healthy Billionaires Fitness Club
              </p>
            </motion.div>

            {/* Chairman's Message Content */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.15 }}
              className="lg:col-span-7 space-y-4 sm:space-y-5"
            >
              <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">
                <Quote className="w-3 h-3 text-amber-600" />
                <span>Chairman&apos;s Address</span>
              </div>

              {/* Highlight Quote */}
              <blockquote className="text-sm sm:text-lg font-semibold text-neutral-800 italic leading-relaxed border-l-2 border-amber-400 pl-3 sm:pl-4">
                &ldquo;{chairman.quote}&rdquo;
              </blockquote>

              {/* Message Body */}
              <p className="text-xs sm:text-sm text-neutral-600 leading-relaxed">
                {chairman.message}
              </p>

              <div className="pt-3 border-t border-neutral-200 flex flex-wrap items-center justify-between gap-3">
                <div className="flex items-center gap-2.5">
                  <div className="w-8 h-8 rounded-lg bg-emerald-100 text-emerald-800 border border-emerald-200 flex items-center justify-center font-bold text-xs">
                    HB
                  </div>
                  <div>
                    <span className="text-[11px] sm:text-xs font-bold text-neutral-900 block">Executive Secretariat</span>
                    <span className="text-[10px] text-neutral-500">Calabar, Cross River State</span>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

export default ChairmanMessage;