"use client";
import React from 'react';
import Slider from 'react-slick';
import GsapReveal from '@/components/common/GsapReveal';

const BrandSlider = () => {
    const brands = [
        { id: 1, src: "/assets/img/add/icon-1.webp", alt: "Brand 1" },
        { id: 2, src: "/assets/img/add/icon-2.webp", alt: "Brand 2" },
        { id: 3, src: "/assets/img/add/icon-3.webp", alt: "Brand 3" },
        { id: 4, src: "/assets/img/add/icon-4.webp", alt: "Brand 4" },
        { id: 5, src: "/assets/img/add/icon-1.webp", alt: "Brand 1" },
        { id: 6, src: "/assets/img/add/icon-2.webp", alt: "Brand 2" },
        { id: 7, src: "/assets/img/add/icon-3.webp", alt: "Brand 3" },
        { id: 8, src: "/assets/img/add/icon-4.webp", alt: "Brand 4" },
    ];

    const settings = {
        dots: false,
        arrows: false,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        autoplay: true,
        speed: 1000,
        autoplaySpeed: 3000,
        cssEase: "ease",
        pauseOnHover: true,
        draggable: true,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 4,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 3,
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 400,
                settings: {
                    slidesToShow: 1,
                }
            },
            {
                breakpoint: 320,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    };

    return (
        <div className="brand-slider-area sp2">
            <div className="container">
                <div className="row">
                    <div className="col-lg-8 m-auto text-center">
                        <div className="brand-header heading2 text-center">
                            <GsapReveal y={20}>
                                <h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Partners</h5>
                            </GsapReveal>
                            <div className="space24"></div>
                            <GsapReveal y={20} delay={0.2}>
                                <h2 className="text-anime-style-3">Trusted by Growing Brands & Ambitious Businesses</h2>
                            </GsapReveal>
                            <div className="space16"></div>
                            <GsapReveal y={20} delay={0.3}>
                                <p>
                                    From startups to enterprise clients, businesses trust us to build scalable and performance-driven websites.
                                </p>
                            </GsapReveal>
                        </div>
                    </div>
                </div>
                <div className="space60"></div>
                <div className="brand-slider-inner">
                    <Slider {...settings}>
                        {brands.map((brand) => (
                            <div key={brand.id} className="brand-item">
                                <img src={brand.src} alt={brand.alt} />
                            </div>
                        ))}
                    </Slider>
                </div>
            </div>
        </div>
    );
};

export default BrandSlider;