import heroSuit from “@/assets/hero-suit.jpg”;
import { Button } from “@/components/ui/button”;
import { ChevronDown } from “lucide-react”;
const HeroSection = () => {
const scrollToExplore = () => {
const element = document.getElementById(“suit-parts”);
element?.scrollIntoView({
behavior: “smooth”
});
};
return <section className=”relative min-h-screen flex items-center justify-center overflow-hidden”>
{/* Background Image */}
<div className=”absolute inset-0″>
<img src={heroSuit} alt=”Elegant navy tailored suit in luxury atelier” className=”w-full h-full object-cover object-center” />
<div className=”absolute inset-0 bg-gradient-to-r from-navy/90 via-navy/70 to-transparent” />
<div className=”absolute inset-0 bg-gradient-to-t from-navy/60 via-transparent to-navy/30″ />
</div>

{/* Content */}
<div className=”relative z-10 container mx-auto px-6 lg:px-12″>
<div className=”max-w-2xl”>
<p className=”text-gold tracking-[0.3em] uppercase text-sm font-sans mb-6 animate-fade-up opacity-0″>
Bespoke Tailoring
</p>
<h1 className=”text-5xl md:text-6xl lg:text-7xl text-ivory leading-tight mb-6 animate-fade-up opacity-0 delay-100 font-mono”>thiết kế và chế tác độc bản

cho từng khách hàng<br />
<span className=”italic”>Perfect</span> Suit
</h1>
<p className=”text-ivory/80 text-lg md:text-xl font-sans leading-relaxed mb-10 max-w-lg animate-fade-up opacity-0 delay-200″>
Quá trình này đảm bảo độ vừa vặn tuyệt đối, tôn lên vóc dáng và phong cách riêng của người mặc dựa trên số đo chuẩn xác và yêu cầu cá nhân.
</p>
<div className=”flex flex-col sm:flex-row gap-4 animate-fade-up opacity-0 delay-300″>
<Button variant=”gold” size=”xl” onClick={scrollToExplore}>
Explore Components
</Button>
<Button variant=”hero” size=”xl”>
Book Consultation
</Button>
</div>
</div>
</div>

{/* Scroll Indicator */}
<button onClick={scrollToExplore} className=”absolute bottom-12 left-1/2 -translate-x-1/2 text-ivory/60 hover:text-ivory transition-colors animate-fade-in opacity-0 delay-500″ aria-label=”Scroll to explore”>
<div className=”flex flex-col items-center gap-2″>
<span className=”text-xs tracking-[0.2em] uppercase font-sans”>
Discover
</span>
<ChevronDown className=”w-5 h-5 animate-bounce” />
</div>
</button>
</section>;
};
export default HeroSection;