'use client';

import { motion } from 'framer-motion';

export function SectionHeader({
  title,
  accent,
}: {
  title: string;
  accent: string;
}) {
  return (
    <div className="text-center mb-4 md:mb-6">
      <motion.h2
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ delay: 0.1 }}
        className="text-4xl sm:text-5xl md:text-[64px] lg:text-[72px] font-title uppercase tracking-wide flex flex-row justify-center items-center gap-3 sm:gap-4 md:gap-6 mb-2"
      >
        <div className="relative shrink-0">
          {/* Back solid text */}
          <span
            className="absolute top-[3px] left-[3px] text-[#6E5904] leading-[1.1] whitespace-nowrap"
            aria-hidden="true"
          >
            {title}
          </span>
          {/* Front hollow text */}
          <span
            className="relative leading-[1.1] block whitespace-nowrap"
            style={{
              WebkitTextStroke: '2px #1C1D1F',
              color: 'transparent',
            }}
          >
            {title}
          </span>
        </div>

        <div className="relative shrink-0">
          {/* Back solid text */}
          <span
            className="absolute top-[3px] left-[3px] text-[#FFD738] leading-[1.1] whitespace-nowrap"
            aria-hidden="true"
          >
            {accent}
          </span>
          {/* Front hollow text */}
          <span
            className="relative leading-[1.1] block whitespace-nowrap"
            style={{
              WebkitTextStroke: '2px #1C1D1F',
              color: 'transparent',
            }}
          >
            {accent}
          </span>
        </div>
      </motion.h2>
      <motion.div
        initial={{ scaleX: 0 }}
        whileInView={{ scaleX: 1 }}
        viewport={{ once: true }}
        transition={{ delay: 0.3 }}
        className="w-16 md:w-24 h-1 bg-[#FFD738] rounded-full mx-auto mt-3 md:mt-6"
      />
    </div>
  );
}

export default SectionHeader;