'use client'

import { motion } from "framer-motion"
import Image from "next/image"
import { Check, Hotel, Star, Globe } from 'lucide-react'



export default function AboutClient({ lang, dict }: { lang: string, dict: any }) {
   const whyUs = [
      { title: dict.about.why['1'].t, desc: dict.about.why['1'].d },
      { title: dict.about.why['2'].t, desc: dict.about.why['2'].d },
      { title: dict.about.why['3'].t, desc: dict.about.why['3'].d },
      { title: dict.about.why['4'].t, desc: dict.about.why['4'].d }
   ]

   const stats = [
      { icon: <Hotel size={32} />, value: '8+', label: 'Premium Room' },
      { icon: <Star size={32} />, value: '4.8', label: 'Guest Rating' },
      { icon: <Globe size={32} />, value: '10+', label: 'Countries' }
   ]

   return (
      <main className="bg-[#FAF7F0] min-h-screen">


         {/* HERO SECTION */}
         <section className="pt-44 pb-20 px-6">
            <div className="max-w-4xl mx-auto text-center space-y-10">
               <motion.h1
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 1 }}
                  className="text-7xl md:text-[120px] font-serif text-[#1A1A1A] leading-[0.9] tracking-tight uppercase"
               >
                  {dict.about.title}
               </motion.h1>
               <motion.p
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.8, delay: 0.3 }}
                  className="text-[#1A1A1A]/70 text-lg md:text-xl max-w-2xl mx-auto font-medium leading-relaxed italic"
               >
                  {dict.about.subtitle}
               </motion.p>
            </div>
         </section>

         {/* STORY & WHY US SECTION */}
         <section className="py-24 px-6 md:px-12 max-w-[1400px] mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-start">

               {/* Left: Story */}
               <motion.div
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  className="lg:col-span-7 space-y-10"
               >
                  <h2 className="text-4xl md:text-5xl font-serif text-[#1A1A1A]">{dict.about.story.title}</h2>
                  <div className="space-y-8 text-[#1A1A1A]/70 text-lg leading-relaxed italic border-l-2 border-[#C88C4B] pl-8">
                     <p>{dict.about.story.p1}</p>
                     <p>{dict.about.story.p2}</p>
                  </div>
               </motion.div>

               {/* Right: Why Us Card */}
               <motion.div
                  initial={{ opacity: 0, x: 30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  className="lg:col-span-5 bg-white p-10 md:p-12 rounded-[2px] shadow-2xl border border-[#1A1A1A]/5"
               >
                  <h3 className="text-3xl font-serif text-[#1A1A1A] mb-8">{dict.about.why.title}</h3>
                  <div className="space-y-8">
                     {whyUs.map((item, idx) => (
                        <div key={idx} className="flex items-start space-x-4">
                           <div className="mt-1 bg-[#C88C4B]/10 p-1 rounded-full text-[#C88C4B]">
                              <Check size={16} />
                           </div>
                           <div className="space-y-1">
                              <p className="font-bold text-[#1A1A1A] text-sm uppercase tracking-wider">{item.title}</p>
                              <p className="text-[#1A1A1A]/60 text-sm italic">{item.desc}</p>
                           </div>
                        </div>
                     ))}
                  </div>
               </motion.div>
            </div>
         </section>

         {/* STATS SECTION */}
         <section className="py-24 px-6 md:px-12 max-w-[1400px] mx-auto overflow-hidden">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
               {stats.map((stat, idx) => (
                  <motion.div
                     key={idx}
                     initial={{ opacity: 0, y: 30 }}
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ delay: idx * 0.1 }}
                     className="bg-white p-12 text-center space-y-6 rounded-[2px] shadow-sm hover:shadow-xl transition-shadow duration-500 border border-[#1A1A1A]/5 group"
                  >
                     <div className="flex justify-center text-[#C88C4B] group-hover:scale-110 transition-transform duration-500">
                        {stat.icon}
                     </div>
                     <div className="space-y-1">
                        <p className="text-5xl font-serif text-[#1A1A1A]">{stat.value}</p>
                        <p className="text-[11px] font-bold tracking-[0.3em] uppercase text-[#1A1A1A]/40">{stat.label}</p>
                     </div>
                  </motion.div>
               ))}
            </div>
         </section>

         {/* VISION SECTION */}
         <section className="py-32 px-6">
            <div className="max-w-4xl mx-auto bg-white p-16 md:p-24 text-center space-y-10 rounded-[2px] shadow-2xl border border-[#1A1A1A]/5">
               <motion.h2
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true }}
                  className="text-[12px] font-bold tracking-[0.5em] uppercase text-[#1A1A1A]/30"
               >
                  {dict.about.vision.title}
               </motion.h2>
               <motion.p
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.2 }}
                  className="text-2xl md:text-4xl font-serif leading-tight text-[#1A1A1A] italic"
               >
                  {dict.about.vision.text}
               </motion.p>
            </div>
         </section>


      </main>
   )
}