"use client";

import React from "react";
import { motion } from "framer-motion";
import { Bed, Bath, Warehouse, Coffee, Ruler, FileText, Download } from "lucide-react";
import { ABOUT_CONTENT } from "@/config/siteContent";

interface AboutProps {
  onOpenPdf: (pdfName: string) => void;
}

const ICON_MAP: Record<string, React.ElementType> = {
  Bed,
  Bath,
  Warehouse,
  Coffee,
  Ruler,
};

export default function About({ onOpenPdf }: AboutProps) {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.05,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 12 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.25 } },
  };

  return (
    <section id="about" className="py-20 lg:py-28 bg-[#f5f6f8] text-zinc-900 overflow-hidden">
      <div className="max-w-7xl mx-auto px-6 lg:px-12">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          
          {/* Left Column Text & Details */}
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.3 }}
            className="lg:col-span-6 space-y-8"
          >
            <div>
              <h2 className="text-4xl sm:text-5xl font-black font-serif tracking-tight text-zinc-900 mb-6">
                {ABOUT_CONTENT.titlePrefix} <span className="text-gold-gradient font-serif">{ABOUT_CONTENT.titleHighlight}</span>
              </h2>
              <p className="text-zinc-600 text-base sm:text-lg leading-relaxed font-normal">
                {ABOUT_CONTENT.description}
              </p>
            </div>

            {/* Specs Grid */}
            <motion.div 
              variants={containerVariants}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              className="grid grid-cols-2 sm:grid-cols-3 gap-6 pt-6 border-t border-zinc-200"
            >
              {ABOUT_CONTENT.specs.map((spec, idx) => {
                const IconComponent = ICON_MAP[spec.iconName] || Bed;
                return (
                  <motion.div 
                    key={idx} 
                    variants={itemVariants}
                    whileHover={{ scale: 1.02 }}
                    className="flex items-center gap-3.5 group cursor-default"
                  >
                    <div className="w-12 h-12 rounded-xl bg-white shadow-sm flex items-center justify-center text-zinc-700 group-hover:bg-[#c5a059] group-hover:text-white transition duration-200 border border-zinc-200/60">
                      <IconComponent size={22} strokeWidth={1.75} />
                    </div>
                    <div>
                      <p className="text-[11px] uppercase tracking-wider text-zinc-500 font-bold">
                        {spec.label}
                      </p>
                      <p className="text-sm font-extrabold text-zinc-900">
                        {spec.value}
                      </p>
                    </div>
                  </motion.div>
                );
              })}
            </motion.div>

            {/* PDF Downloads */}
            <div className="pt-6 border-t border-zinc-200 flex flex-wrap items-center gap-6">
              {ABOUT_CONTENT.downloads.map((doc, idx) => (
                <motion.button
                  key={idx}
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  onClick={() => onOpenPdf(doc.filename)}
                  className="flex items-center gap-3 text-zinc-800 hover:text-[#c5a059] font-bold text-sm transition group"
                >
                  <div className="p-2.5 bg-white rounded-lg shadow-sm text-zinc-600 group-hover:bg-amber-50 group-hover:text-[#c5a059] transition border border-zinc-200/60">
                    <FileText size={18} />
                  </div>
                  <div className="text-left">
                    <span className="block text-[11px] text-zinc-400 uppercase font-semibold tracking-wider">Download</span>
                    <span className="font-bold text-xs sm:text-sm">{doc.title}</span>
                  </div>
                  <Download size={14} className="ml-1 opacity-60 group-hover:opacity-100 transition" />
                </motion.button>
              ))}
            </div>
          </motion.div>

          {/* Right Column Image */}
          <motion.div 
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.3 }}
            className="lg:col-span-6 relative flex justify-center"
          >
            <div className="absolute -inset-4 bg-gradient-to-tr from-amber-100/50 via-amber-50 to-amber-100/30 rounded-3xl transform rotate-2 shadow-sm pointer-events-none" />
            
            <div className="relative z-10 w-full max-w-md lg:max-w-none shadow-2xl rounded-2xl overflow-hidden group border border-zinc-200">
              <img
                src={ABOUT_CONTENT.mainImage}
                alt={ABOUT_CONTENT.mainImageCaption}
                className="w-full h-[480px] lg:h-[580px] object-cover transition-transform duration-500 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition duration-200 flex items-end p-6">
                <span className="text-white text-xs font-bold uppercase tracking-widest bg-[#c5a059] px-3.5 py-1.5 rounded-md shadow-md">
                  {ABOUT_CONTENT.mainImageCaption}
                </span>
              </div>
            </div>
          </motion.div>

        </div>
      </div>
    </section>
  );
}