import React, { useState, useEffect } from 'react';

import { motion, AnimatePresence } from 'framer-motion';

import { Link } from 'react-router-dom';

import { createPageUrl } from '../../utils';

import { ArrowRight } from 'lucide-react';

const heroImages = [

'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=1920&q=80',

'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=1920&q=80',

'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=1920&q=80',

];

export default function HeroSection() {

const [currentImage, setCurrentImage] = useState(0);

useEffect(() => {

const timer = setInterval(() => {

setCurrentImage((prev) => (prev + 1) % heroImages.length);

}, 5000);

return () => clearInterval(timer);

}, []);

return (

<section className="relative h-screen overflow-hidden">

{//}

<AnimatePresence mode="wait">

<motion.div

key={currentImage}

initial={{ opacity: 0, scale: 1.1 }}

animate={{ opacity: 1, scale: 1 }}

exit={{ opacity: 0 }}

transition={{ duration: 1.5 }}

className="absolute inset-0"

>

<div

className="absolute inset-0 bg-cover bg-center"

style={{ backgroundImage: }}

/>

<div className="absolute inset-0 bg-black/30" />

</motion.div>

</AnimatePresence>

{//}

<div className="relative z-10 h-full flex flex-col justify-end pb-24 lg:pb-32">

<div className="max-w-7xl mx-auto px-6 lg:px-12 w-full">

<motion.div

initial={{ opacity: 0, y: 40 }}

animate={{ opacity: 1, y: 0 }}

transition={{ duration: 1, delay: 0.5 }}

>

<h1 className="text-white text-5xl lg:text-8xl font-light tracking-tight mb-6">

Discover

<br />

<span className="font-semibold">Extraordinary</span>

</h1>

<p className="text-white/80 text-lg lg:text-xl max-w-xl mb-10 font-light">

Where exceptional talent meets visionary representation.

We curate the faces that shape the future of fashion.

</p>

<Link

to={createPageUrl('Models')}

className="inline-flex items-center gap-3 bg-white text-[#0A0A0A] px-8 py-4 text-sm tracking-[0.15em] uppercase font-medium hover:bg-[#C9A961] hover:text-white transition-all duration-300 group"

>

View Models

<ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />

</Link>

</motion.div>

</div>

{//}

<div className="absolute bottom-12 right-6 lg:right-12 flex gap-3">

{heroImages.map((_, index) => (

<button

key={index}

onClick={() => setCurrentImage(index)}

className={`w-12 h-0.5 transition-all duration-300 ${

index === currentImage ? 'bg-white' : 'bg-white/30'

}`}

/>

))}

</div>

</div>

</section>

);

}