import BannerHeader from '@/components/bannerHeader';
import React from 'react';
import csrImg from '../../../../public/assets/banners/header-banner/csr3.webp'
import Link from 'next/link';

const CSRPage = () => {
  return (
    <div className="bg-gradient-to-br from-gray-50 to-gray-100 font-sans">
        <BannerHeader bannerTitle='CSR' image={csrImg.src}></BannerHeader>
      <div className="container mx-auto px-4 py-12 md:py-20">
        <div className="flex flex-col lg:flex-row bg-white rounded-3xl shadow-2xl overflow-hidden transition-all duration-300 hover:shadow-3xl">
          
          <div className="lg:w-1/2 relative group">
            <img 
              src="https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
              alt="Corporate Social Responsibility - Community and Environment" 
              className="w-full h-full object-cover absolute inset-0"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-black/20 to-transparent lg:bg-gradient-to-r lg:from-black/30 lg:via-transparent"></div>
            
            <div className="absolute bottom-6 left-6 bg-white/90 backdrop-blur-sm px-4 py-2 rounded-full shadow-lg">
              <p className="text-sm font-semibold text-gray-800">🌱 Committed to Sustainability</p>
            </div>
            
            <div className="pb-[75%] lg:pb-full lg:h-full"></div>
          </div>

          <div className="lg:w-1/2 p-8 md:p-12 lg:p-14 bg-white">
            <div className="inline-flex items-center gap-2 bg-emerald-50 px-4 py-1.5 rounded-full mb-6">
              <span className="w-2 h-2 bg-emerald-600 rounded-full"></span>
              <span className="text-emerald-700 text-sm font-medium tracking-wide">SQ GROUP</span>
            </div>

            <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 mb-6 leading-tight">
              Corporate Social Responsibility
            </h1>
            
            <p className="text-gray-600 text-lg leading-relaxed mb-8 border-l-4 border-emerald-500 pl-5 italic">
              Conducting business responsibly while contributing positively to society, communities, employees, and the environment.
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-10">
              <div className="flex items-start gap-3 group">
                <div className="bg-emerald-100 p-2 rounded-lg group-hover:bg-emerald-200 transition-colors">
                  <svg className="w-5 h-5 text-emerald-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                  </svg>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">Education</h3>
                  <p className="text-sm text-gray-500">Supporting institutions & learning</p>
                </div>
              </div>
              <div className="flex items-start gap-3 group">
                <div className="bg-emerald-100 p-2 rounded-lg group-hover:bg-emerald-200 transition-colors">
                  <svg className="w-5 h-5 text-emerald-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                  </svg>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">Employee Welfare</h3>
                  <p className="text-sm text-gray-500">Well-being & development</p>
                </div>
              </div>
              <div className="flex items-start gap-3 group">
                <div className="bg-emerald-100 p-2 rounded-lg group-hover:bg-emerald-200 transition-colors">
                  <svg className="w-5 h-5 text-emerald-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                  </svg>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">Community Dev</h3>
                  <p className="text-sm text-gray-500">Welfare & quality of life</p>
                </div>
              </div>
              <div className="flex items-start gap-3 group">
                <div className="bg-emerald-100 p-2 rounded-lg group-hover:bg-emerald-200 transition-colors">
                  <svg className="w-5 h-5 text-emerald-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">Env. Responsibility</h3>
                  <p className="text-sm text-gray-500">Sustainable operations</p>
                </div>
              </div>
            </div>

            <div className="space-y-4 text-gray-600 mb-8">
              <p className="leading-relaxed">
                <span className="font-semibold text-gray-800">Occupational health & safety</span> standards are maintained across all manufacturing facilities and offices, while promoting equal opportunity, fair employment practices, and professional development.
              </p>
              <p className="leading-relaxed">
                Driven by <span className="font-semibold text-gray-800">integrity, compassion, and long-term sustainability</span>, SQ Group continues to integrate responsible business practices into its operations while contributing to national social and economic progress.
              </p>
            </div>

            <div className="flex flex-wrap items-center justify-between gap-4 pt-4 border-t border-gray-100">
              <div className="flex -space-x-2">
                {[...Array(4)].map((_, i) => (
                  <div key={i} className="w-8 h-8 rounded-full bg-emerald-200 border-2 border-white flex items-center justify-center text-xs font-bold text-emerald-800">
                    {String.fromCharCode(65 + i)}
                  </div>
                ))}
              </div>
              <Link href={'/contact'} className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2.5 px-6 rounded-full transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-2">
                Contact Us
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </Link>
            </div>
            <div className="mt-6 text-center text-gray-600 text-xs font-semibold">
              <span>✨ Committed to National Social & Economic Progress</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CSRPage;