export default function About() {
  return (
    <section id="about" className="min-h-screen flex items-center bg-white">

      <div className="w-full max-w-7xl mx-auto px-6 lg:px-16 py-20">
        <div className="flex flex-col lg:flex-row items-center gap-16">

          {/* Left - Text */}
          <div className="flex-1">

            {/* Heading */}
            <h2 className="text-6xl md:text-7xl font-extrabold leading-tight">
              <span className="text-gray-900">About </span>
              <span className="text-orange-500">Us</span>
            </h2>

            {/* Decorative Line */}
            <div className="flex items-center mt-4 mb-8">
              <div className="w-24 h-[2px] bg-orange-500"></div>
              <span className="mx-4 text-orange-500 text-2xl">✦</span>
              <div className="w-24 h-[2px] bg-orange-500"></div>
            </div>

            {/* Text */}
            <p className="text-gray-700 text-2xl leading-relaxed">
              Welcome to{" "}
              <span className="text-orange-500 font-bold">
                Diamond Star Dhaba
              </span>
              , Vijayapura. We serve delicious biryani,
              tandoori dishes, paneer specials, and family meals.
            </p>

            <p className="text-gray-700 text-2xl leading-relaxed mt-8">
              We also take catering and bulk food orders for weddings,
              parties, and special occasions.
            </p>

            {/* Button */}
            <button className="mt-10 bg-orange-500 hover:bg-orange-600 text-white font-bold text-2xl px-8 py-4 rounded-xl shadow-lg transition duration-300">
              🍽 Visit Us & Enjoy
            </button>

          </div>

          {/* Right - Image */}
          <div className="flex-1 w-full">
            <img
              src="https://images.unsplash.com/photo-1603360946369-dc9bb6258143?w=800&auto=format&fit=crop"
              alt="Chicken Dish"
              className="w-full h-[500px] object-cover rounded-2xl shadow-2xl border-4 border-orange-500"
            />
          </div>

        </div>
      </div>
    </section>
  );
}