'use client';

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

export default function CSRHero() {
  return (
    <section className="relative overflow-hidden min-h-[400px] md:min-h-[500px] lg:min-h-[650px] flex items-center justify-center">
      {/* Background Image */}
      <Image
        src="/images/csr/csr-hero.avif"
        alt="CSR Garam Cap Kapal"
        fill
        priority
        sizes="100vw"
        className="object-cover"
      />

      {/* Dark overlay for text readability */}
      <div className="absolute inset-0 bg-black/10 pointer-events-none" />

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

      {/* Content */}
      <div className="relative z-10 container mx-auto px-4 text-center py-20">
        {/* Title: CSR */}
        <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-6xl sm:text-7xl md:text-8xl lg:text-[107px] leading-none tracking-wide select-none"
            aria-hidden="true"
          >
            <span className="absolute top-[-10px] left-[10px] text-black/10 pointer-events-none">
              CSR
            </span>
            {/* Stroke/outline text */}
            <span
              className="relative top-[-8px]"
              style={{
                WebkitTextStroke: '2px #1C1D1F',
                color: 'transparent',
              }}
            >
              CSR
            </span>
          </h1>
          {/* Main solid text */}
          <h1 className="font-title text-6xl sm:text-7xl md:text-8xl lg:text-[107px] leading-none tracking-wide absolute inset-0">
            <span className="text-[#1C1D1F]">CSR</span>
          </h1>
        </motion.div>

        {/* Subtitle */}
        <motion.p
          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="text-base sm:text-lg md:text-xl lg:text-2xl text-[#1C1D1F] max-w-[700px] mx-auto leading-relaxed"
        >
          Kegiatan{' '}
          <strong className="font-bold">
            Corporate Social Responsibility (CSR)
          </strong>{' '}
          rutin yang dilakukan oleh{' '}
          <strong className="font-bold">PT Susanti Megah</strong> sebagai wujud
          komitmen untuk membantu masyarakat indonesia
        </motion.p>
      </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>
  );
}