import React from "react";
import heroImg from "../assets/images/biryani.jpg";

export default function Hero() {
  return (
    <section className="relative w-full h-screen">

      {/* Background Image */}
      <img
        src={heroImg}
        alt="hero"
        className="absolute inset-0 w-full h-full object-cover"
      />

      {/* Dark Overlay */}
      <div className="absolute inset-0 bg-black/60"></div>

      {/* Content */}
      <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-6">

        {/* Tagline */}
        <p className="text-orange-400 text-lg md:text-xl font-semibold tracking-widest uppercase mb-4">
          Welcome to
        </p>

        {/* Restaurant Name */}
        <h1 className="text-white text-5xl md:text-8xl font-extrabold leading-tight">
          Diamond Star
        </h1>
        <h1 className="text-orange-500 text-5xl md:text-8xl font-extrabold leading-tight mb-6">
          Dhaba
        </h1>

        {/* Divider */}
        <div className="flex items-center gap-4 mb-6">
          <div className="w-20 h-[2px] bg-orange-500"></div>
          <span className="text-orange-500 text-xl">✦</span>
          <div className="w-20 h-[2px] bg-orange-500"></div>
        </div>

        {/* Subtitle */}
        <p className="text-gray-300 text-lg md:text-2xl max-w-xl mb-10">
          "Your Happy Place in Vijayapura"
        </p>

        {/* Button */}
        <a href="#menu" className="bg-orange-500 hover:bg-orange-600 text-white font-bold text-lg px-10 py-4 rounded-xl shadow-lg transition duration-300">
          Explore Our Menu
        </a>

      </div>
    </section>
  );
}