"use client";

import { About } from "@/components/sections/about";
import { WhyUnipam } from "@/components/sections/why-unipam";
import { AboutVideoCTA } from "@/components/sections/about-video-cta";
import { motion } from "framer-motion";
import Image from "next/image";
import { useTranslation } from "@/lib/i18n/context";
import { IraqCampaignGallery } from "@/components/sections/iraq-campaign-gallery";

export default function AboutPage() {
  const { t, dir } = useTranslation();

  return (
    <div className="pt-20 overflow-hidden" dir={dir}>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        {/* About Section */}
        <About />

        {/* Video CTA Section */}
        <AboutVideoCTA />

        {/* Why UNIPAM Section (Integrated) */}
        <div className="bg-white">
          <WhyUnipam />
        </div>
        
        {/* Quality Commitment Section */}
        <section className="section-padding bg-soft-cream/30 border-t border-light-gray">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
              <div>
                <motion.div
                  initial={{ opacity: 0, x: dir === "rtl" ? 50 : -50 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  className="space-y-6"
                >
                  <h2 className="text-3xl md:text-4xl font-black text-dark-text leading-tight">
                    {dir === "rtl" ? "التزامنا بالجودة والابتكار" : "Our Commitment to Quality & Innovation"}
                  </h2>
                  <p className="text-lg text-dark-text/70 leading-relaxed">
                    {dir === "rtl" 
                      ? "في يونيبام، نضع صحة طفلك وراحته في مقدمة أولوياتنا. نحن نستخدم أحدث التقنيات وأفضل الخامات العالمية لضمان جودة استثنائية في كل حفاض ننتجه. فريقنا يعمل باستمرار على تطوير منتجاتنا لتواكب احتياجات الأمهات والآباء العصرية."
                      : "At UNIPAM, we prioritize your baby's health and comfort above all else. We use the latest technologies and the finest global materials to ensure exceptional quality in every diaper we produce. Our team is constantly working on developing our products to meet the modern needs of mothers and fathers."}
                  </p>
                  
                  <div className="grid grid-cols-2 gap-6 pt-4">
                    <div className="p-6 rounded-3xl bg-white shadow-sm border border-primary/10">
                      <h3 className="text-2xl font-black text-primary mb-1">10+</h3>
                      <p className="text-sm font-bold text-dark-text/40 uppercase tracking-wider">
                        {dir === "rtl" ? "سنوات خبرة" : "Years Experience"}
                      </p>
                    </div>
                    <div className="p-6 rounded-3xl bg-white shadow-sm border border-primary/10">
                      <h3 className="text-2xl font-black text-primary mb-1">24/7</h3>
                      <p className="text-sm font-bold text-dark-text/40 uppercase tracking-wider">
                        {dir === "rtl" ? "رعاية فائقة" : "Premium Care"}
                      </p>
                    </div>
                  </div>
                </motion.div>
              </div>

              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                className="relative"
              >
                <div className="absolute -inset-4 bg-gradient-to-tr from-primary/20 to-soft-teal/20 blur-2xl rounded-full opacity-50" />
                <div className="relative rounded-[40px] overflow-hidden shadow-2xl border-8 border-white">
                  <Image 
                    src="/images/product-lineup.jpg" 
                    alt="UNIPAM Quality" 
                    width={800} 
                    height={600} 
                    className="w-full h-auto hover:scale-105 transition-transform duration-700"
                  />
                </div>
              </motion.div>
            </div>
          </div>
        </section>

        <IraqCampaignGallery />
      </motion.div>
    </div>
  );
}