import Layout from "@/components/layout/Layout";
import GalleryLightbox from "./GalleryLightbox";

export const metadata = {
    title: "Gallery – Sixty5 Street Eats & Vibes",
    description: "Browse the Sixty5 Street gallery to see our bold bites, sizzling dishes and vibrant atmosphere. Get inspired by the food, flavor and fun.",
}

export default function GalleryPage() {
    const images = [
        "/assets/images/home/categories/combos.webp",
        "/assets/images/home/categories/milkshakes.webp",
        "/assets/images/home/categories/poutine.webp",
        "/assets/images/home/categories/salads.webp",
        "/assets/images/home/categories/shawarma.webp",
        "/assets/images/home/categories/dosa.webp"
    ];

    return (
        <Layout
            headerStyle={2}
            footerStyle={2}
            breadcrumbTitle="Gallery"
            bgImage="/assets/images/inner-banner/gallery-banner.webp"
        >
            {/* Gallery Section Two */}
            <section className="gallery-section-two sec-pad" id="gallery">
                <div className="outer-container">
                    <div className="sec-title mb-4 centered">
                        <div className="title">Our Gallery</div>
                        <h2>Explore Our Delicious Dishes</h2>
                        <div className="separate"></div>
                    </div>
                    <GalleryLightbox images={images} />
                </div>
            </section>
            {/* End Gallery Section Two */}
        </Layout>
    );
}
