'use client';

import Link from 'next/link';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { FaInstagram, FaGlobe, FaYoutube } from 'react-icons/fa6';

export function SocialBannerSection() {
  return (
    <section
      className="w-full relative z-20 py-5"
      style={{
        backgroundImage: "url('/images/home/banner-bg.png')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      <div className="container mx-auto px-4 py-5 md:py-8">
        <div className="flex flex-col md:flex-row items-center justify-between gap-6 relative">
          {/* Left: Social Media Links */}
          <div className="flex flex-wrap items-center justify-center md:justify-start gap-3 sm:gap-4 text-[#FFFDF5] font-bold text-[10px] sm:text-xs md:text-sm">
            <Link
              href="https://instagram.com/garamcapkapal"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 bg-[#1C1D1F] rounded-full px-3 py-1.5 md:px-4 md:py-2 hover:bg-black transition-colors shadow-sm"
            >
              <FaInstagram className="text-sm md:text-base" />
              <span>garamcapkapal</span>
            </Link>
            <Link
              href="https://www.youtube.com/@garamcapkapalofficial"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 bg-[#1C1D1F] rounded-full px-3 py-1.5 md:px-4 md:py-2 hover:bg-black transition-colors shadow-sm"
            >
              <FaYoutube className="text-sm md:text-base" />
              <span>Garam Cap Kapal Official</span>
            </Link>
            <Link
              href="https://www.garamcapkapal.com"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 bg-[#1C1D1F] rounded-full px-3 py-1.5 md:px-4 md:py-2 hover:bg-black transition-colors shadow-sm"
            >
              <FaGlobe className="text-sm md:text-base" />
              <span>www.garamcapkapal.com</span>
            </Link>
          </div>

          {/* Right: Halal Logo */}
          <div className="md:absolute right-0 top-1/2 md:-translate-y-full hidden md:flex items-center shrink-0 z-30">
            <motion.div whileHover={{ scale: 1.05 }}>
              <Image
                src="/images/home/logo-halal.avif"
                alt="Sertifikasi Halal"
                width={302}
                height={178}
                className="w-[100px] h-[100px] md:w-[302px] md:h-[178px] object-contain drop-shadow-xl"
              />
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}