'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';

export default function EventPromoHero() {
  return (
    <section className="relative overflow-hidden min-h-[400px] md:min-h-[500px] lg:min-h-[650px] flex items-center justify-center">
      {/* Background Image */}
      <div className="absolute inset-0 w-full h-full">
        <Image
          src="/images/event-promo/event-promo.avif"
          alt="Event and Promo Background"
          fill
          priority
          className="object-cover object-center md:object-right"
        />
      </div>

      {/* Bottom gradient fade to white */}
      <div className="absolute bottom-0 left-0 right-0 h-24 md:h-32 bg-gradient-to-t from-white to-transparent pointer-events-none z-10" />

      {/* Content */}
      <div className="relative z-10 container mx-auto px-4 text-left py-20 w-full flex flex-col items-start justify-center h-full">
        {/* Title: EVENT & PROMO */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
          className="relative inline-block mb-6"
        >
          {/* Sparkle decorations */}
          <SparkleDecoration
            className="absolute -top-4 -left-10 md:-top-6 md:-left-14 w-6 h-6 md:w-8 md:h-8"
            delay={0.8}
          />
          <SparkleDecoration
            className="absolute -top-2 -right-8 md:-top-4 md:-right-12 w-5 h-5 md:w-7 md:h-7"
            delay={1.0}
          />
          <SparkleDecoration
            className="absolute bottom-0 -left-12 md:bottom-2 md:-left-16 w-4 h-4 md:w-6 md:h-6"
            delay={1.2}
          />
          <SparkleDecoration
            className="absolute bottom-2 -right-10 md:bottom-4 md:-right-14 w-5 h-5 md:w-6 md:h-6"
            delay={0.9}
          />

          {/* Shadow text */}
          <h1
            className="font-title text-5xl sm:text-6xl md:text-7xl lg:text-[72px] leading-tight tracking-wide select-none text-left"
            aria-hidden="true"
          >
            <span className="absolute top-[4px] left-[4px] text-black/10 pointer-events-none">
              EVENT &<br />
              PROMO
            </span>
            {/* Stroke/outline text */}
            <span
              className="relative"
              style={{
                WebkitTextStroke: '2px #1C1D1F',
                color: 'transparent',
              }}
            >
              EVENT &<br />
              PROMO
            </span>
          </h1>
          {/* Main solid text */}
          <h1 className="font-title text-5xl sm:text-6xl md:text-7xl lg:text-[72px] leading-tight tracking-wide absolute inset-0 text-left">
            <span className="text-[#1C1D1F]">
              EVENT &<br />
              PROMO
            </span>
          </h1>
        </motion.div>

        {/* Subtitle bubble */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
          className="max-w-[450px]"
        >
          <div className="bg-[#1C1D1F] rounded-[10px] border-2 border-white/40 px-6 py-4 shadow-lg text-left">
            <p className="text-sm md:text-[13px] lg:text-[14px] text-white leading-relaxed">
              Ayo cari tau dan ikuti kegiatan serta kompetisi dari{' '}
              <strong className="font-bold">Garam Cap Kapal</strong> yang bisa
              diikuti keseruannya!
              <br />
              Temukan juga promo terbaru dari{' '}
              <strong className="font-bold">Garam Cap Kapal</strong>
              <br />
              yang bisa didapatkan di tiap bulannya.
            </p>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

function SparkleDecoration({
  className,
  delay = 0,
}: {
  className?: string;
  delay?: number;
}) {
  return (
    <motion.svg
      initial={{ opacity: 0, scale: 0 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{
        duration: 0.5,
        delay,
        ease: [0.22, 1, 0.36, 1],
      }}
      className={className}
      viewBox="0 0 24 24"
      fill="none"
    >
      {/* 4-pointed sparkle */}
      <path
        d="M12 0L14.5 9.5L24 12L14.5 14.5L12 24L9.5 14.5L0 12L9.5 9.5L12 0Z"
        fill="#000000"
      />
    </motion.svg>
  );
}