import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
import { Story } from '../types';

const stories: Story[] = [
  {
    id: '1',
    title: "KELİME KELİME FEMİNİST Bİ' DÜNYA",
    subtitle: "KAMPÜS CADILARI YAZI DİZİSİ",
    author: "Zeynep Yılmaz",
    authorImage: "https://picsum.photos/seed/author1/100/100",
    content: "Feminizmin dilini, tarihini ve geleceğini tartıştığımız yeni yazı dizimiz başlıyor. Kampüslerdeki cadıların sesine kulak verin.",
    imageUrl: "https://picsum.photos/seed/feminist1/1920/1080"
  },
  {
    id: '2',
    title: "GECEYİ DE SOKAKLARI DA İSTİYORUZ",
    subtitle: "8 MART ÖZEL DOSYASI",
    author: "Elif Demir",
    authorImage: "https://picsum.photos/seed/author2/100/100",
    content: "Karanlıktan korkmuyoruz, birbirimizden güç alıyoruz. 8 Mart Feminist Gece Yürüyüşü öncesi manifestomuz.",
    imageUrl: "https://picsum.photos/seed/night/1920/1080"
  },
  {
    id: '3',
    title: "AKADEMİDE CİNSİYET EŞİTLİĞİ",
    subtitle: "ARAŞTIRMA RAPORU",
    author: "Kampüs Cadıları",
    authorImage: "https://picsum.photos/seed/author3/100/100",
    content: "Üniversitelerde yaşanan cinsiyet temelli ayrımcılık ve taciz vakalarına dair kapsamlı raporumuz yayınlandı.",
    imageUrl: "https://picsum.photos/seed/academy/1920/1080"
  }
];

export const Hero: React.FC = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % stories.length);
    }, 6000);
    return () => clearInterval(timer);
  }, []);

  const nextSlide = () => setCurrentIndex((prev) => (prev + 1) % stories.length);
  const prevSlide = () => setCurrentIndex((prev) => (prev - 1 + stories.length) % stories.length);

  return (
    <section className="relative h-[85vh] w-full bg-brand-dark overflow-hidden mt-16 md:mt-20">
      {/* Background Slides */}
      {stories.map((story, index) => (
        <div
          key={story.id}
          className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
            index === currentIndex ? 'opacity-100' : 'opacity-0'
          }`}
        >
          <div className="absolute inset-0 bg-black/60 z-10" /> {/* Overlay */}
          <img
            src={story.imageUrl}
            alt={story.title}
            className="w-full h-full object-cover"
          />
        </div>
      ))}

      {/* Content */}
      <div className="absolute inset-0 z-20 flex items-center">
        <div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 w-full">
          <div className="max-w-4xl">
            {/* Tag/Marker */}
            <div className="inline-block mb-6 animate-slide-in">
              <span className="bg-brand-red text-white px-4 py-1.5 text-sm font-bold tracking-widest uppercase rounded">
                KISA Bİ HİKAYE
              </span>
            </div>

            {/* Title Block */}
            <h1 className="font-display text-5xl md:text-7xl lg:text-8xl font-bold text-white leading-[0.9] mb-8 uppercase animate-slide-in">
              {stories[currentIndex].title}
            </h1>

            {/* Description */}
            <p className="text-lg md:text-xl text-gray-200 max-w-2xl mb-10 font-light leading-relaxed animate-slide-in" style={{ animationDelay: '0.1s' }}>
              {stories[currentIndex].content}
            </p>

            {/* Author & CTA */}
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-6 animate-slide-in" style={{ animationDelay: '0.2s' }}>
              <div className="flex items-center gap-4 bg-white/10 backdrop-blur-sm p-2 pr-6 rounded-full border border-white/20">
                <img 
                  src={stories[currentIndex].authorImage} 
                  alt={stories[currentIndex].author} 
                  className="w-10 h-10 rounded-full object-cover border-2 border-brand-purple"
                />
                <div className="flex flex-col">
                  <span className="text-xs text-gray-300 uppercase tracking-wider">Yazar</span>
                  <span className="text-sm font-bold text-white">{stories[currentIndex].author}</span>
                </div>
              </div>

              <button className="group flex items-center gap-3 bg-brand-purple hover:bg-white text-white hover:text-brand-purple px-8 py-4 rounded-full font-bold tracking-wide transition-all duration-300">
                İNCELE
                <ArrowRight className="transform group-hover:translate-x-1 transition-transform" />
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Navigation Controls */}
      <div className="absolute bottom-10 right-10 z-30 flex items-center gap-4">
        <button 
          onClick={prevSlide}
          className="p-3 rounded-full border border-white/30 text-white hover:bg-brand-purple hover:border-brand-purple transition-colors"
        >
          <ChevronLeft size={24} />
        </button>
        <div className="flex gap-2">
          {stories.map((_, idx) => (
            <div 
              key={idx}
              onClick={() => setCurrentIndex(idx)}
              className={`h-1.5 rounded-full transition-all duration-300 cursor-pointer ${
                idx === currentIndex ? 'w-8 bg-brand-red' : 'w-2 bg-white/50 hover:bg-white'
              }`}
            />
          ))}
        </div>
        <button 
          onClick={nextSlide}
          className="p-3 rounded-full border border-white/30 text-white hover:bg-brand-purple hover:border-brand-purple transition-colors"
        >
          <ChevronRight size={24} />
        </button>
      </div>
    </section>
  );
};