'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';
import { FaWhatsapp } from 'react-icons/fa6';

const LOGOS = [
  { id: 1, src: '/images/home/activity/logo-1.png', alt: 'Kapal Explore Rasa' },
  { id: 2, src: '/images/home/activity/logo-2.png', alt: 'Kapal Masuk Pasar' },
  {
    id: 3,
    src: '/images/home/activity/logo-3.png',
    alt: 'Podcast Bongkar Muat',
  },
  { id: 4, src: '/images/home/activity/logo-4.png', alt: 'Kumpul Kawan Kapal' },
  { id: 5, src: '/images/home/activity/logo-5.png', alt: 'Cooking Demo' },
  {
    id: 6,
    src: '/images/home/activity/logo-6.png',
    alt: 'Cap Kapal Community',
  },
  { id: 7, src: '/images/home/activity/logo-7.png', alt: 'Sharing Session' },
  { id: 8, src: '/images/home/activity/logo-8.png', alt: 'Nahkoda Kapal' },
];

export function ActivityCommunitySection() {
  return (
    <div className="w-full relative py-12 md:py-20">
      <div className="container mx-auto px-4 relative z-10">
        {/* Title */}
        <div className="flex flex-col items-center justify-center text-center mb-12 lg:mb-16">
          <h2 className="text-[32px] sm:text-[44px] md:text-[64px] font-title uppercase tracking-wide flex flex-col md:flex-row justify-center items-center gap-2 md:gap-4 leading-none">
            <div className="relative">
              <span
                className="absolute top-[3px] left-[3px] text-white"
                aria-hidden="true"
              >
                AKTIVITAS
              </span>
              <span
                className="relative text-white"
                style={{ WebkitTextStroke: '2px #1C1D1F' }}
              >
                AKTIVITAS
              </span>
            </div>
            <div className="relative">
              <span className="relative text-[#6E5904] drop-shadow-[2px_2px_0px_#1C1D1F]">
                DAN
              </span>
            </div>
            <div className="relative">
              <span
                className="absolute top-[3px] left-[3px] text-white"
                aria-hidden="true"
              >
                KOMUNITAS
              </span>
              <span
                className="relative text-white"
                style={{ WebkitTextStroke: '2px #1C1D1F' }}
              >
                KOMUNITAS
              </span>
            </div>
          </h2>
        </div>

        {/* Text Boxes */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-16 md:mb-24">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="bg-white rounded-[24px] p-6 md:p-8 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] border-2 border-[#1C1D1F]"
          >
            <p className="text-base md:text-lg text-black font-medium leading-relaxed">
              Berbagai macam aktivitas yang sudah{' '}
              <span className="font-bold">Garam Cap Kapal</span> lakukan agar
              bisa berinteraksi langsung dan semakin dekat dengan konsumen.
            </p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="bg-white rounded-[24px] p-6 md:p-8 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] border-2 border-[#1C1D1F]"
          >
            <p className="text-base md:text-lg text-black font-medium leading-relaxed">
              Ingin menjadi bagian dari keseruan aktivitas{' '}
              <span className="font-bold">GARAM CAP KAPAL,</span> dan
              mendapatkan update resep dan tips menarik dari Garam Cap Kapal?
            </p>
          </motion.div>
        </div>

        {/* Logos Grid */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-x-6 gap-y-12 max-w-4xl mx-auto items-center justify-items-center mb-16">
          {LOGOS.map((logo, idx) => (
            <motion.div
              key={logo.id}
              initial={{ opacity: 0, scale: 0.8 }}
              whileInView={{ opacity: 1, scale: 1 }}
              whileHover={{ scale: 1.1, rotate: [-2, 2, -2, 0] }}
              viewport={{ once: true }}
              transition={{ delay: idx * 0.1 }}
              className="w-24 md:w-32 h-20 relative flex items-center justify-center"
            >
              <Image
                src={logo.src}
                alt={logo.alt}
                fill
                className="object-contain drop-shadow-md"
              />
            </motion.div>
          ))}
        </div>

        {/* CTA Button */}
        <div className="flex justify-center mt-8 md:mt-16">
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-black text-[#FFD738] rounded-full px-8 md:px-12 py-4 flex items-center gap-4 text-xl md:text-2xl font-title uppercase tracking-wide border-2 border-transparent shadow-[4px_4px_0px_0px_rgba(0,0,0,0.5)] hover:bg-[#111] transition-all"
            onClick={() => window.open('#', '_blank')} // Placeholder
          >
            Gabung & Berlayar Bersama
            <FaWhatsapp className="w-6 h-6 md:w-8 md:h-8" />
          </motion.button>
        </div>
      </div>

      {/* Floating Mascots */}
      <motion.div
        initial={{ x: -100, opacity: 0 }}
        whileInView={{ x: 0, opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8, ease: 'easeOut' }}
        className="absolute left-0 top-0 md:top-60 w-[150px] md:w-[300px] xl:w-[400px] aspect-square z-20 pointer-events-none"
      >
        <Image
          src="/images/home/activity/mascot-left.png"
          alt="Mascot Garam Cap Kapal"
          fill
          className="object-contain object-top-left"
        />
      </motion.div>

      {/* Decorative SVG Shapes - Assuming stars from previous sections or custom */}
      <StarIcon className="absolute top-20 left-[30%] w-6 h-6 text-white opacity-80" />
      <StarIcon className="absolute top-[40%] right-[20%] w-8 h-8 text-white opacity-60" />
      <StarIcon className="absolute bottom-[20%] left-[10%] w-4 h-4 text-white opacity-90" />
      <StarIcon className="absolute bottom-10 right-[30%] w-6 h-6 text-white opacity-70" />
    </div>
  );
}

function StarIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z" />
    </svg>
  );
}