import React from 'react';
import { ExternalLink, MapPin, Phone, MessageSquare, Code2, Sparkles, Building2, Globe, ShieldCheck, GraduationCap, Mail, Compass, Hotel, Plane } from 'lucide-react';
import azaanStudioBannerImg from '../assets/images/azaan_studio_banner_1786203364310.jpg';
import studyApexBannerImg from '../assets/images/study_apex_banner_1786203379501.jpg';
import hasanJunaidBannerImg from '../assets/images/hasan_junaid_banner_1786203394113.jpg';

export const PartnersSection: React.FC = () => {
  return (
    <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-10">
      {/* Section Header */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-3 border-b border-[#F2E5D9] pb-4">
        <div>
          <span className="text-xs font-bold tracking-widest text-[#C81E3D] uppercase flex items-center gap-1.5 justify-center sm:justify-start">
            <Sparkles className="w-3.5 h-3.5" />
            <span>OUR NETWORK & COLLABORATIONS</span>
          </span>
          <h2 className="text-2xl sm:text-3xl font-bold font-playfair text-[#1E2432] text-center sm:text-left mt-1">
            Our Official Global Partners
          </h2>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-xs font-bold text-slate-500 bg-stone-100 px-3 py-1 rounded-full border border-stone-200 flex items-center gap-1.5">
            <ShieldCheck className="w-3.5 h-3.5 text-emerald-600" /> Verified Alliances
          </span>
        </div>
      </div>

      <div className="grid grid-cols-1 gap-10">
        
        {/* PARTNER 1: Azaan CreatiXcel Studio */}
        <div className="bg-white rounded-3xl border border-[#E8D9CC] overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-0">
            
            {/* Left Column: Poster Image Preview */}
            <div className="lg:col-span-6 bg-slate-950 relative group overflow-hidden flex items-center justify-center p-3 sm:p-4 min-h-[300px]">
              <img
                src={azaanStudioBannerImg}
                alt="Azaan CreatiXcel Studio Smart Business Management System"
                referrerPolicy="no-referrer"
                className="w-full h-auto max-h-[440px] object-contain rounded-2xl group-hover:scale-102 transition-transform duration-500 shadow-2xl"
                onError={(e) => {
                  (e.target as HTMLImageElement).src = '/partners/azaan_studio.jpg';
                }}
              />
              <div className="absolute top-6 left-6 bg-slate-900/90 backdrop-blur-md text-white text-[11px] font-extrabold px-3 py-1 rounded-full border border-slate-700 shadow-md flex items-center gap-1.5">
                <Code2 className="w-3.5 h-3.5 text-amber-400" />
                <span>SOFTWARE SOLUTIONS</span>
              </div>
            </div>

            {/* Right Column: Studio Info & Direct Action Controls */}
            <div className="lg:col-span-6 p-6 sm:p-8 flex flex-col justify-between bg-gradient-to-br from-white via-[#FCF9F6] to-[#FAF3ED]">
              <div className="space-y-5">
                
                {/* Studio Title Badge */}
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <span className="px-3 py-0.5 rounded-md bg-[#C81E3D]/10 text-[#C81E3D] text-xs font-extrabold uppercase tracking-wider">
                      Official IT Partner
                    </span>
                    <span className="text-xs text-slate-400 font-bold">•</span>
                    <span className="text-xs text-slate-600 font-bold flex items-center gap-1">
                      <Building2 className="w-3.5 h-3.5 text-slate-500" /> Software Company
                    </span>
                  </div>

                  <h3 className="text-2xl sm:text-3xl font-extrabold font-playfair text-[#1E2432] leading-tight">
                    Azaan CreatiXcel Studio
                  </h3>

                  <p className="text-xs sm:text-sm font-medium text-slate-600 flex items-center gap-1.5">
                    <MapPin className="w-4 h-4 text-[#C81E3D] shrink-0" />
                    <span>Kasur, Punjab, Pakistan.</span>
                  </p>
                </div>

                {/* Company Profile Description */}
                <p className="text-xs sm:text-sm text-slate-700 leading-relaxed font-sans bg-white/80 p-4 rounded-2xl border border-[#F2E5D9] shadow-xs">
                  A complete <strong>Smart Business Management System</strong> provider offering high-performance inventory tracking, custom billing software, cloud synchronization, and tailored e-commerce digital solutions.
                </p>

                {/* Quick Contacts Grid */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
                  <a
                    href="https://wa.me/923459702966"
                    target="_blank"
                    rel="noreferrer"
                    className="p-3 bg-emerald-50 hover:bg-emerald-100 border border-emerald-200 rounded-xl flex items-center gap-3 transition-colors group cursor-pointer"
                  >
                    <div className="w-9 h-9 rounded-lg bg-emerald-600 text-white flex items-center justify-center shrink-0 shadow-xs">
                      <MessageSquare className="w-4 h-4" />
                    </div>
                    <div className="overflow-hidden">
                      <span className="text-[10px] font-bold text-emerald-800 uppercase block">WhatsApp Direct</span>
                      <span className="text-xs font-bold text-slate-900 group-hover:text-emerald-700 transition-colors truncate block">
                        +92 345 9702966
                      </span>
                    </div>
                  </a>

                  <a
                    href="tel:+923354302966"
                    className="p-3 bg-blue-50 hover:bg-blue-100 border border-blue-200 rounded-xl flex items-center gap-3 transition-colors group cursor-pointer"
                  >
                    <div className="w-9 h-9 rounded-lg bg-blue-600 text-white flex items-center justify-center shrink-0 shadow-xs">
                      <Phone className="w-4 h-4" />
                    </div>
                    <div className="overflow-hidden">
                      <span className="text-[10px] font-bold text-blue-800 uppercase block">Call Support</span>
                      <span className="text-xs font-bold text-slate-900 group-hover:text-blue-700 transition-colors truncate block">
                        +92 335 4302966
                      </span>
                    </div>
                  </a>
                </div>

              </div>

              {/* Action Buttons Bar */}
              <div className="pt-6 border-t border-[#F2E5D9] mt-6 flex flex-col sm:flex-row items-center gap-3">
                <a
                  href="https://azaan-creatixcel-studio.web.app"
                  target="_blank"
                  rel="noreferrer"
                  className="w-full sm:w-auto flex-1 inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-[#1E2432] hover:bg-[#C81E3D] text-white font-extrabold text-xs uppercase tracking-wider transition-all duration-300 shadow-md hover:shadow-lg cursor-pointer group"
                >
                  <Globe className="w-4 h-4 text-amber-400 group-hover:text-white transition-colors" />
                  <span>Visit Partner Website</span>
                  <ExternalLink className="w-4 h-4" />
                </a>

                <a
                  href="https://wa.me/923459702966?text=Hello%20Azaan%20CreatiXcel%20Studio,%20I%20am%20interested%20in%20your%20software%20solutions."
                  target="_blank"
                  rel="noreferrer"
                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-3.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider transition-colors shadow-sm cursor-pointer"
                >
                  <MessageSquare className="w-4 h-4" />
                  <span>Get Software Quote</span>
                </a>
              </div>

            </div>

          </div>
        </div>

        {/* PARTNER 2: Study Apex Global (SAG) */}
        <div className="bg-white rounded-3xl border border-[#E8D9CC] overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-0">
            
            {/* Left Column: Poster Image Preview */}
            <div className="lg:col-span-6 bg-sky-950 relative group overflow-hidden flex items-center justify-center p-3 sm:p-4 min-h-[300px]">
              <img
                src={studyApexBannerImg}
                alt="Study Apex Global SAG Study in the UK"
                referrerPolicy="no-referrer"
                className="w-full h-auto max-h-[440px] object-contain rounded-2xl group-hover:scale-102 transition-transform duration-500 shadow-2xl"
                onError={(e) => {
                  (e.target as HTMLImageElement).src = '/partners/study_apex.jpg';
                }}
              />
              <div className="absolute top-6 left-6 bg-sky-900/90 backdrop-blur-md text-white text-[11px] font-extrabold px-3 py-1 rounded-full border border-sky-700 shadow-md flex items-center gap-1.5">
                <GraduationCap className="w-3.5 h-3.5 text-sky-300" />
                <span>EDUCATION CONSULTANCY</span>
              </div>
            </div>

            {/* Right Column: Consultancy Info & Direct Action Controls */}
            <div className="lg:col-span-6 p-6 sm:p-8 flex flex-col justify-between bg-gradient-to-br from-white via-[#F4F9FF] to-[#EBF4FE]">
              <div className="space-y-5">
                
                {/* Title & Badge */}
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <span className="px-3 py-0.5 rounded-md bg-sky-600/10 text-sky-700 text-xs font-extrabold uppercase tracking-wider">
                      Official Education Partner
                    </span>
                    <span className="text-xs text-slate-400 font-bold">•</span>
                    <span className="text-xs text-slate-600 font-bold flex items-center gap-1">
                      <GraduationCap className="w-3.5 h-3.5 text-sky-600" /> Study Abroad Experts
                    </span>
                  </div>

                  <h3 className="text-2xl sm:text-3xl font-extrabold font-playfair text-[#1E2432] leading-tight">
                    Study Apex Global (SAG)
                  </h3>

                  <p className="text-xs sm:text-sm font-medium text-slate-600 flex items-center gap-1.5">
                    <MapPin className="w-4 h-4 text-sky-600 shrink-0" />
                    <span>Block CCA, DHA Phase 5, Lahore, Pakistan.</span>
                  </p>
                </div>

                {/* Profile Description */}
                <p className="text-xs sm:text-sm text-slate-700 leading-relaxed font-sans bg-white/80 p-4 rounded-2xl border border-sky-100 shadow-xs">
                  Building Futures Globally! Premier UK study visa and university admissions consultancy assisting students with top-tier British university placements, scholarship applications, and complete visa processing.
                </p>

                {/* Contacts Grid */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
                  <a
                    href="https://wa.me/923366050905"
                    target="_blank"
                    rel="noreferrer"
                    className="p-3 bg-emerald-50 hover:bg-emerald-100 border border-emerald-200 rounded-xl flex items-center gap-3 transition-colors group cursor-pointer"
                  >
                    <div className="w-9 h-9 rounded-lg bg-emerald-600 text-white flex items-center justify-center shrink-0 shadow-xs">
                      <MessageSquare className="w-4 h-4" />
                    </div>
                    <div className="overflow-hidden">
                      <span className="text-[10px] font-bold text-emerald-800 uppercase block">WhatsApp Contact</span>
                      <span className="text-xs font-bold text-slate-900 group-hover:text-emerald-700 transition-colors truncate block">
                        +92 336 6050905
                      </span>
                    </div>
                  </a>

                  <a
                    href="mailto:studyapexglobal@gmail.com"
                    className="p-3 bg-sky-50 hover:bg-sky-100 border border-sky-200 rounded-xl flex items-center gap-3 transition-colors group cursor-pointer"
                  >
                    <div className="w-9 h-9 rounded-lg bg-sky-600 text-white flex items-center justify-center shrink-0 shadow-xs">
                      <Mail className="w-4 h-4" />
                    </div>
                    <div className="overflow-hidden">
                      <span className="text-[10px] font-bold text-sky-800 uppercase block">Email Inquiry</span>
                      <span className="text-xs font-bold text-slate-900 group-hover:text-sky-700 transition-colors truncate block">
                        studyapexglobal@gmail.com
                      </span>
                    </div>
                  </a>
                </div>

              </div>

              {/* Action Buttons Bar */}
              <div className="pt-6 border-t border-sky-100 mt-6 flex flex-col sm:flex-row items-center gap-3">
                <a
                  href="https://studyapexglobal.com/"
                  target="_blank"
                  rel="noreferrer"
                  className="w-full sm:w-auto flex-1 inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-sky-900 hover:bg-sky-800 text-white font-extrabold text-xs uppercase tracking-wider transition-all duration-300 shadow-md hover:shadow-lg cursor-pointer group"
                >
                  <Globe className="w-4 h-4 text-amber-300 group-hover:text-white transition-colors" />
                  <span>Visit SAG Website</span>
                  <ExternalLink className="w-4 h-4" />
                </a>

                <a
                  href="https://wa.me/923366050905?text=Hello%20Study%20Apex%20Global,%20I%20want%20information%20regarding%20UK%20Study%20Visas."
                  target="_blank"
                  rel="noreferrer"
                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-3.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider transition-colors shadow-sm cursor-pointer"
                >
                  <GraduationCap className="w-4 h-4" />
                  <span>Book Free Counseling</span>
                </a>
              </div>

            </div>

          </div>
        </div>

        {/* PARTNER 3: Hasan Junaid Umrah & Hajj */}
        <div className="bg-white rounded-3xl border border-[#E8D9CC] overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-0">
            
            {/* Left Column: Poster Image Preview */}
            <div className="lg:col-span-6 bg-emerald-950 relative group overflow-hidden flex items-center justify-center p-3 sm:p-4 min-h-[300px]">
              <img
                src={hasanJunaidBannerImg}
                alt="Hasan Junaid Umrah and Hajj Services"
                referrerPolicy="no-referrer"
                className="w-full h-auto max-h-[440px] object-contain rounded-2xl group-hover:scale-102 transition-transform duration-500 shadow-2xl"
                onError={(e) => {
                  (e.target as HTMLImageElement).src = '/partners/hasan_junaid.jpg';
                }}
              />
              <div className="absolute top-6 left-6 bg-emerald-900/90 backdrop-blur-md text-amber-300 text-[11px] font-extrabold px-3 py-1 rounded-full border border-emerald-700 shadow-md flex items-center gap-1.5">
                <Compass className="w-3.5 h-3.5 text-amber-400" />
                <span>HAJJ & UMRAH SERVICES</span>
              </div>
            </div>

            {/* Right Column: Info & Actions */}
            <div className="lg:col-span-6 p-6 sm:p-8 flex flex-col justify-between bg-gradient-to-br from-white via-[#F4FBF7] to-[#EBF7F0]">
              <div className="space-y-5">
                
                {/* Title & Badge */}
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <span className="px-3 py-0.5 rounded-md bg-emerald-700/10 text-emerald-800 text-xs font-extrabold uppercase tracking-wider">
                      Official Spiritual Travel Partner
                    </span>
                    <span className="text-xs text-slate-400 font-bold">•</span>
                    <span className="text-xs text-slate-600 font-bold flex items-center gap-1">
                      <Compass className="w-3.5 h-3.5 text-emerald-700" /> Pilgrimage Services
                    </span>
                  </div>

                  <h3 className="text-2xl sm:text-3xl font-extrabold font-playfair text-[#1E2432] leading-tight">
                    Hasan Junaid — Umrah & Hajj
                  </h3>

                  <p className="text-xs sm:text-sm font-medium text-slate-600 flex items-center gap-1.5">
                    <Sparkles className="w-4 h-4 text-amber-500 shrink-0" />
                    <span>A Spiritual Journey of a Lifetime</span>
                  </p>
                </div>

                {/* Profile Description */}
                <p className="text-xs sm:text-sm text-slate-700 leading-relaxed font-sans bg-white/80 p-4 rounded-2xl border border-emerald-100 shadow-xs">
                  Complete Umrah & Hajj packages providing flight tickets, luxury hotel accommodations near Haram, organized transport, and guidance by knowledgeable Ustadhs.
                </p>

                {/* Key Facilities Highlights */}
                <div className="grid grid-cols-3 gap-2 bg-emerald-900/5 p-3 rounded-2xl border border-emerald-100 text-center">
                  <div className="flex flex-col items-center justify-center p-1.5">
                    <Plane className="w-4 h-4 text-emerald-700 mb-1" />
                    <span className="text-[11px] font-bold text-slate-800">Flight Tickets</span>
                  </div>
                  <div className="flex flex-col items-center justify-center p-1.5 border-x border-emerald-200/60">
                    <Compass className="w-4 h-4 text-emerald-700 mb-1" />
                    <span className="text-[11px] font-bold text-slate-800">Transport & Ustadr</span>
                  </div>
                  <div className="flex flex-col items-center justify-center p-1.5">
                    <Hotel className="w-4 h-4 text-emerald-700 mb-1" />
                    <span className="text-[11px] font-bold text-slate-800">Luxury Hotels</span>
                  </div>
                </div>

                {/* Contacts Grid */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
                  <a
                    href="https://wa.me/923344324065"
                    target="_blank"
                    rel="noreferrer"
                    className="p-3 bg-emerald-50 hover:bg-emerald-100 border border-emerald-200 rounded-xl flex items-center gap-3 transition-colors group cursor-pointer"
                  >
                    <div className="w-9 h-9 rounded-lg bg-emerald-600 text-white flex items-center justify-center shrink-0 shadow-xs">
                      <MessageSquare className="w-4 h-4" />
                    </div>
                    <div className="overflow-hidden">
                      <span className="text-[10px] font-bold text-emerald-800 uppercase block">WhatsApp / Call</span>
                      <span className="text-xs font-bold text-slate-900 group-hover:text-emerald-700 transition-colors truncate block">
                        +92 334 4324065
                      </span>
                    </div>
                  </a>

                  <a
                    href="mailto:info@hasanjunaid.com"
                    className="p-3 bg-teal-50 hover:bg-teal-100 border border-teal-200 rounded-xl flex items-center gap-3 transition-colors group cursor-pointer"
                  >
                    <div className="w-9 h-9 rounded-lg bg-teal-700 text-white flex items-center justify-center shrink-0 shadow-xs">
                      <Mail className="w-4 h-4" />
                    </div>
                    <div className="overflow-hidden">
                      <span className="text-[10px] font-bold text-teal-800 uppercase block">Email Contact</span>
                      <span className="text-xs font-bold text-slate-900 group-hover:text-teal-700 transition-colors truncate block">
                        info@hasanjunaid.com
                      </span>
                    </div>
                  </a>
                </div>

              </div>

              {/* Action Buttons Bar */}
              <div className="pt-6 border-t border-emerald-100 mt-6 flex flex-col sm:flex-row items-center gap-3">
                <a
                  href="https://hasanjunaid.com/"
                  target="_blank"
                  rel="noreferrer"
                  className="w-full sm:w-auto flex-1 inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-emerald-900 hover:bg-emerald-800 text-white font-extrabold text-xs uppercase tracking-wider transition-all duration-300 shadow-md hover:shadow-lg cursor-pointer group"
                >
                  <Globe className="w-4 h-4 text-amber-300 group-hover:text-white transition-colors" />
                  <span>Visit Hasan Junaid Website</span>
                  <ExternalLink className="w-4 h-4" />
                </a>

                <a
                  href="https://wa.me/923344324065?text=Hello%20Hasan%20Junaid,%20I%20am%20interested%20in%20Umrah%20and%20Hajj%20packages."
                  target="_blank"
                  rel="noreferrer"
                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-3.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider transition-colors shadow-sm cursor-pointer"
                >
                  <Compass className="w-4 h-4" />
                  <span>Book Pilgrimage Package</span>
                </a>
              </div>

            </div>

          </div>
        </div>

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