'use client'
import Link from "next/link"
import Layout from "@/components/layout/Layout"
import { Autoplay, Navigation, Pagination } from "swiper/modules"
import { Swiper, SwiperSlide } from "swiper/react"
import GallerySlider1 from '@/components/slider/GallerySlider1'

const swiperOptions = {
    modules: [Autoplay, Pagination, Navigation],
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,

    autoplay: {
        delay: 3000,
        disableOnInteraction: false, 
    },

    navigation: {
        nextEl: '.srn',
        prevEl: '.srp',
    },

    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
};

export default function About() {

    return (
        <>
            <Layout headerStyle={2} footerStyle={2} breadcrumbTitle="About Us" bgImage={"/assets/images/about/about-banner.webp"}>
                {/* History Section */}
                <section className="history-section-two">
                    <div className="auto-container">
                        <div className="row clearfix align-items-center">

                            {/* Image Column */}
                            <div className="image-column col-lg-7 col-md-12 col-sm-12">
                                <div className="inner-column">
                                    <div className="image">
                                        <img src="/assets/images/about/about-us.webp" alt="" />
                                    </div>
                                    <div className="image-two mb-4">
                                        <img src="/assets/images/about/about-us-element.webp" alt="" />
                                    </div>
                                </div>
                            </div>

                            {/* Content Column */}
                            <div className="content-column col-lg-5 col-md-12 col-sm-12">
                                <div className="inner-column">
                                    {/* Sec Title */}
                                    <div className="sec-title about-sec">
                                        <div className="title">About Us</div>
                                        <h2>Street Fresh. <span className="theme_color"> Full of Flavour.</span></h2>

                                        <div className="text">At Sixty5 Street, we believe great food starts with freshness and ends with bold, memorable flavour. Our menu is inspired by the vibrant energy of street-style eats, where every dish and every blend is crafted to feel lively, colourful, and satisfying. Whether it’s one of our refreshing fruit mixes or a flavour-packed bowl, everything we serve is designed to bring you real taste made from real ingredients.</div>

                                    </div>
                                    <ul className="list-style-two">
                                        <li>Fresh fruits and ingredients in every blend</li>
                                        <li>Street-inspired flavours prepared with care</li>
                                        <li>A vibrant experience that keeps you feeling energized</li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                </section>
                {/* End History Section */}

                {/* Menu Page Section */}
                <section className="menu-page-section">
                    <div className="auto-container">
                        <div className="row clearfix">

                            {/* Menu Block Two */}
                            <div className="menu-block-two col-lg-4 col-md-6 col-sm-12">
                                <div className="inner-box">
                                    <div className="icon">
                                        <img src="/assets/images/about/card-1.webp" alt="" />
                                    </div>
                                    <h6>Bold Flavours</h6>
                                    <div className="text">Every item is created to deliver bright, bold flavour. From our signature blends to our colourful bowls, we make sure each serving tastes fresh, lively, and instantly enjoyable.</div>
                                </div>
                            </div>

                            {/* Menu Block Two */}
                            <div className="menu-block-two col-lg-4 col-md-6 col-sm-12">
                                <div className="inner-box">
                                    <div className="icon">
                                        <img src="/assets/images/about/card-2.webp" alt="" />
                                    </div>
                                    <h6>Real Fruits</h6>
                                    <div className="text">We use high-quality fruits chosen for their natural sweetness and freshness. This ensures every mix, topping, and serving brings out authentic, clean flavour.</div>
                                </div>
                            </div>

                            {/* Menu Block Two */}
                            <div className="menu-block-two col-lg-4 col-md-6 col-sm-12">
                                <div className="inner-box">
                                    <div className="icon">
                                        <img src="/assets/images/about/card-3.webp" alt="" />
                                    </div>
                                    <h6>Healthy Blends</h6>
                                    <div className="text">Our blends are crafted to be both nourishing and delicious. Light, refreshing, and made fresh to order — perfect for energizing your day without compromise.</div>
                                </div>
                            </div>

                        </div>
                    </div>
                </section>
                {/* End Restaurant Section */}

                <section className="fluid-section-one">
                    <div className="outer-container clearfix">

                        <div className="content-column">
                            <div className="icon-box" style={{ backgroundImage: 'url(/assets/images/about/fresh-flavour-left-bottom-element.webp)' }} ></div>
                            <div className="inner-column">

                                <div className="sec-title">
                                    <h2>Fresh Flavour <br />  Fusion</h2>
                                    <div className="separate"></div>
                                    <div className="text">At Sixty5 Street, we are always creating something new, fresh, and full of flavour. Our upcoming beverage range is crafted with real fruits, clean ingredients, and creative blends that bring a refreshing twist to your day. These new additions are designed to energize, hydrate, and satisfy—all while staying true to our vibrant, street-style taste.</div>
                                </div>

                                <div className="button-box">
                                    <Link href="/menu" className="theme-btn btn-style-two clearfix"><span className="icon"></span>View Menu</Link>
                                </div>
                            </div>
                        </div>


                        <div className="image-column" style={{ backgroundImage: 'url(/assets/images/about/fresh-flavour-right.webp)' }} >
                        </div>

                    </div>
                </section>

                {/* Testimonial Section Two */}
                <section className="testimonial-section-two">
                    <div
                        className="icon-layer-two"
                        style={{ backgroundImage: "url(/assets/images/about/review-right-bottom-element.webp)" }}
                    ></div>

                    <div className="auto-container">
                        {/* Section Title */}
                        <div className="sec-title centered">
                            <div className="title">Google Reviews</div>
                            <h2>Hear from our happy customers</h2>
                            <div className="separate"></div>
                        </div>

                        <div className="inner-container">
                            <Swiper {...swiperOptions} className="single-item-carousel">
                                {/* Testimonial Block Two */}
                                <SwiperSlide>
                                    <div className="testimonial-block-two">
                                        <div className="inner-box">
                                            <div className="rating gap-1 mb-3">
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                            </div>
                                            <div className="text">
                                                “Absolutely love this place! Every blend tastes fresh and natural. The flavors pop, and you can really tell they use quality ingredients. Sixty5 Street never disappoints.”
                                            </div>
                                            <div className="designation">— Emily R.</div>
                                        </div>
                                    </div>
                                </SwiperSlide>

                                {/* Testimonial Block Two */}
                                <SwiperSlide>
                                    <div className="testimonial-block-two">
                                        <div className="inner-box">
                                            <div className="rating gap-1 mb-3">
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                            </div>
                                            <div className="text">
                                                “The perfect spot when you need something refreshing. Their fruit mixes are vibrant, clean, and full of energy. I always leave feeling great.”
                                            </div>
                                            <div className="designation">— Jason M.</div>
                                        </div>
                                    </div>
                                </SwiperSlide>

                                {/* Testimonial Block Two */}
                                <SwiperSlide>
                                    <div className="testimonial-block-two">
                                        <div className="inner-box">
                                            <div className="rating gap-1 mb-3">
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                            </div>
                                            <div className="text">
                                                “Sixty5 Street has mastered the art of fresh flavor. The bowls are colorful, the drinks are delicious, and everything feels thoughtfully prepared. A must-try!”
                                            </div>
                                            <div className="designation">— Sofia L.</div>
                                        </div>
                                    </div>
                                </SwiperSlide>

                                {/* Testimonial Block Two */}
                                <SwiperSlide>
                                    <div className="testimonial-block-two">
                                        <div className="inner-box">
                                            <div className="rating gap-1 mb-3">
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                            </div>
                                            <div className="text">
                                                “Consistently amazing! The blends are smooth, balanced, and not overly sweet. You can taste the real fruit in every sip. Highly recommend for healthy cravings.”
                                            </div>
                                            <div className="designation">— David P.</div>
                                        </div>
                                    </div>
                                </SwiperSlide>

                                {/* Testimonial Block Two */}
                                <SwiperSlide>
                                    <div className="testimonial-block-two">
                                        <div className="inner-box">
                                            <div className="rating gap-1 mb-3">
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                                <span className="fa fa-star"></span>
                                            </div>
                                            <div className="text">
                                                “Super fresh, super tasty. The street-style vibe makes the whole experience fun and lively. Sixty5 Street has quickly become one of my favorite places to grab a flavorful drink.”
                                            </div>
                                            <div className="designation">— Ava T.</div>
                                        </div>
                                    </div>
                                </SwiperSlide>
                            </Swiper>

                            {/* Google Review Button */}
                            <div className="btns-box text-center mt-4">
                                <Link
                                    href="https://www.google.com/search?sca_esv=0fe16c1f02c217b7&sxsrf=AE3TifOLptPQLUmmtN31E_3elXLW6TFOQw:1762618049873&si=AMgyJEtREmoPL4P1I5IDCfuA8gybfVI2d5Uj7QMwYCZHKDZ-E-aY0flGiK9jtBbvWKno0yJxYW9CK-ZYgm0G70i4ON2SMlNBNsid-fMvQPqNzI7FcY1u8NR67M0xsy1G8HMAZhtgOP2m&q=Sixty5+Street+Reviews&sa=X&ved=2ahUKEwjY5_L19-KQAxW89DgGHdw0AesQ0bkNegQILRAE&biw=1366&bih=633&dpr=1&sei=MHYRadbjFKWo4-EPlrjFkAs&zx=1762752154509&no_sw_cr=1#lrd=0x882b3dbb0e18ed73:0xbdb3783d6e6393c9,3,,,,"
                                    target="_blank"
                                    className="theme-btn btn-style-one clearfix"
                                >
                                    <span className="icon"></span> Review us on Google
                                </Link>
                            </div>
                        </div>
                    </div>
                </section>
                {/* End Testimonial Section Two */}

                {/* Gallery Section */}
                <section className="gallery-section">
                    <div className="outer-container">
                        <GallerySlider1 />
                    </div>
                </section>
                {/* End Gallery Section */}

            </Layout>
        </>
    )
}