"use client";

import Image from "next/image";

export default function AboutSection() {
    return (
        <section className="relative w-full bg-[#0a0a0a] py-20 px-4 sm:px-6 lg:px-8 flex justify-center items-center">
            {/* Main Container with Gold Border */}
            <div className="relative w-full max-w-7xl border-4 border-[#c49c5c] p-2 sm:p-4">

                {/* Inner Flex Container */}
                <div className="flex flex-col lg:flex-row w-full h-full">

                    {/* Left: Image Section */}
                    <div className="relative w-full lg:w-1/2 h-[400px] lg:h-[600px]">
                        <Image
                            src="/images/restaurant-interior.png"
                            alt="Restaurant Interior"
                            fill
                            className="object-cover"
                            priority
                        />
                    </div>

                    {/* Right: Content Section */}
                    <div className="relative w-full lg:w-1/2 bg-[#111] p-8 lg:p-16 flex flex-col justify-center items-center text-center">

                        {/* Background Pattern Overlay (Optional) */}
                        <div className="absolute inset-0 opacity-5 pointer-events-none bg-[url('/images/pattern-overlay.png')] bg-repeat"></div>

                        {/* Ornamental Icon */}
                        <div className="mb-6">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" fill="#c49c5c" />
                            </svg>
                        </div>

                        {/* Title */}
                        <h2 className="text-[#c49c5c] font-serif text-4xl lg:text-6xl uppercase tracking-widest mb-4">
                            About Antalya
                        </h2>

                        {/* Subtitle */}
                        <h3 className="text-[#E0C080] font-serif text-xl lg:text-2xl mb-8 font-light italic">
                            Experience Unforgettable Turkish Fusion
                        </h3>

                        {/* Description */}
                        <p className="text-gray-300 font-sans text-sm lg:text-base leading-relaxed max-w-lg mb-10 opacity-80">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
                            auctor prid vinds the es numre testur ad auipmot et durs ain a anportos
                            reda lirdore in agne romraligut.
                        </p>

                        {/* Button */}
                        <button className="px-8 py-3 border-2 border-[#c49c5c] text-[#c49c5c] uppercase tracking-wider hover:bg-[#c49c5c] hover:text-black transition-all duration-300 font-medium">
                            Learn More
                        </button>
                    </div>
                </div>
            </div>
        </section>
    );
}
