'use client'
import Link from "next/link"
export default function Specials() {
    return (
        <>

            {/* Specials Section */}
            <section className="specials-section" id="specials">
                <div className="icon-layer-one" style={{ backgroundImage: 'url(assets/images/resource/special-icon-1.png)' }} ></div>
                <div className="icon-layer-two" style={{ backgroundImage: 'url(assets/images/resource/special-icon-2.png)' }} ></div>
                <div className="icon-layer-three" style={{ backgroundImage: 'url(assets/images/resource/special-icon-3.png)' }} ></div>
                <div className="icon-layer-four" style={{ backgroundImage: 'url(assets/images/resource/special-icon-4.png)' }} ></div>
                <div className="auto-container">
                    {/* Sec Title */}
                    <div className="sec-title centered">
                        <div className="title">Our most valuable asset</div>
                        <h2>Sixty5 Street Specials</h2>
                        <div className="separate"></div>
                    </div>
                    <div className="row clearfix">
                        {/* First Row - 4 cards (3 on md screens, 2 on sm) */}
                        <div className="special-block col-lg-3 col-md-4 col-sm-6 col-12">
                            <div className="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                                <div className="image">
                                    <Link href="milkshake"><img src="assets/images/home/special/chicken65-dry.webp" alt="" /></Link>
                                </div>
                                <div className="lower-content">
                                    <div className="clearfix">
                                        <div className="pull-left">
                                            <h4><Link href="milkshake">Chicken 65 dry</Link></h4>
                                        </div>
                                        <div className="pull-right">
                                            <div className="price">$8.99</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="special-block col-lg-3 col-md-4 col-sm-6 col-12">
                            <div className="inner-box wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                                <div className="image">
                                    <Link href="milkshake"><img src="assets/images/home/special/chicken65-wet.webp" alt="" /></Link>
                                </div>
                                <div className="lower-content">
                                    <div className="clearfix">
                                        <div className="pull-left">
                                            <h4><Link href="milkshake">Chicken 65 wet</Link></h4>
                                        </div>
                                        <div className="pull-right">
                                            <div className="price">$9.99</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="special-block col-lg-3 col-md-4 col-sm-6 col-12">
                            <div className="inner-box wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms">
                                <div className="image">
                                    <Link href="milkshake"><img src="assets/images/home/special/chicken65-biryani.webp" alt="" /></Link>
                                </div>
                                <div className="lower-content">
                                    <div className="clearfix">
                                        <div className="pull-left">
                                            <h4><Link href="milkshake">65 Biryani Bowl</Link></h4>
                                        </div>
                                        <div className="pull-right">
                                            <div className="price">$14.99</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="special-block col-lg-3 col-md-4 col-sm-6 col-12">
                            <div className="inner-box wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms">
                                <div className="image">
                                    <Link href="milkshake"><img src="assets/images/home/special/mutton-kothu.webp" alt="" /></Link>
                                </div>
                                <div className="lower-content">
                                    <div className="clearfix">
                                        <div className="pull-left">
                                            <h4><Link href="milkshake">Mutton Kothu</Link></h4>
                                        </div>
                                        <div className="pull-right">
                                            <div className="price">$17.99</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Second Row - 3 cards (will automatically adjust to 2 on md, 1 on sm) */}
                        {/* Second Row - 3 cards centered */}
                        <div className="row justify-content-center">
                            <div className="special-block col-lg-3 col-md-4 col-sm-6 col-12">
                                <div className="inner-box wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                                    <div className="image">
                                        <Link href="milkshake"><img src="assets/images/home/special/mutton-kothu.webp" alt="" /></Link>
                                    </div>
                                    <div className="lower-content">
                                        <div className="clearfix">
                                            <div className="pull-left">
                                                <h4><Link href="milkshake">Veg Kothu<br></br><br></br><br></br></Link></h4>
                                            </div>
                                            <div className="pull-right">
                                                <div className="price">$11.99</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="special-block col-lg-3 col-md-4 col-sm-6 col-12">
                                <div className="inner-box wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms">
                                    <div className="image">
                                        <Link href="milkshake"><img src="assets/images/home/special/chicken-kothu.webp" alt="" /></Link>
                                    </div>
                                    <div className="lower-content">
                                        <div className="clearfix">
                                            <div className="pull-left">
                                                <h4><Link href="milkshake">Chicken Kothu<br></br><br></br></Link></h4>
                                            </div>
                                            <div className="pull-right">
                                                <div className="price">$14.99</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="special-block col-lg-3 col-md-4 col-sm-6 col-12">
                                <div className="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                                    <div className="image">
                                        <Link href="milkshake"><img src="assets/images/home/special/mutton-biryani.webp" alt="" /></Link>
                                    </div>
                                    <div className="lower-content">
                                        <div className="clearfix">
                                            <div className="pull-left">
                                                <h4><Link href="milkshake">Mutton Biryani Bowl</Link></h4>
                                            </div>
                                            <div className="pull-right">
                                                <div className="price">$17.99</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            {/* End Specials Section */}

        </>
    )
}