"use client";

import { motion } from "framer-motion";

const mediaLogos = [
  { name: "VOGUE", style: "serif" },
  { name: "Allure", style: "sans" },
  { name: "ELLE", style: "serif" },
  { name: "COSMOPOLITAN", style: "serif" },
  { name: "Bazaar", style: "serif" },
  { name: "GLAMOUR", style: "serif" },
  { name: "WOMEN'S HEALTH", style: "sans" },
  { name: "Shape", style: "sans" },
];

function LogoItem({ name }: { name: string }) {
  const isSerif = name === "VOGUE" || name === "ELLE" || name === "COSMOPOLITAN" || name === "Bazaar" || name === "GLAMOUR";
  
  return (
    <div className="flex items-center justify-center px-10 py-4 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-500 flex-shrink-0">
      <span 
        className={`
          text-xl md:text-2xl tracking-[0.15em] text-white font-bold
          ${isSerif ? 'font-serif italic' : 'font-sans uppercase'}
        `}
        style={{
          textShadow: '0 0 20px rgba(255,255,255,0.1)',
        }}
      >
        {name}
      </span>
    </div>
  );
}

export default function AsSeenIn() {
  return (
    <section className="py-12 bg-[#1a1a1a] overflow-hidden border-y border-white/10">
      <div className="container mx-auto px-4 mb-8">
        <motion.p
          className="text-center text-[10px] uppercase tracking-[0.4em] text-[#c9a962] font-bold"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          As Featured In
        </motion.p>
      </div>

      {/* Scrolling Marquee */}
      <div className="relative">
        {/* Left gradient fade */}
        <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-[#1a1a1a] to-transparent z-10 pointer-events-none" />
        
        {/* Right gradient fade */}
        <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-[#1a1a1a] to-transparent z-10 pointer-events-none" />
        
        {/* Marquee container */}
        <div className="flex overflow-hidden">
          <motion.div
            className="flex items-center gap-16"
            animate={{
              x: [0, -50 + "%"],
            }}
            transition={{
              x: {
                repeat: Infinity,
                repeatType: "loop",
                duration: 30,
                ease: "linear",
              },
            }}
          >
            {/* First set of logos */}
            {mediaLogos.map((logo, index) => (
              <LogoItem key={`first-${index}`} name={logo.name} />
            ))}
            {/* Duplicate for seamless loop */}
            {mediaLogos.map((logo, index) => (
              <LogoItem key={`second-${index}`} name={logo.name} />
            ))}
          </motion.div>
        </div>
      </div>
    </section>
  );
}