"use client";

import Image from "next/image";

const CLIENTS = [
    "/clients/adani.png",
    "/clients/adaniconnex.png",
    "/clients/alembic.png",
    "/clients/basf.png",
    "/clients/carestream.png",
    "/clients/CCI_NEW.png",
    "/clients/godrej.png",
    "/clients/cocacola.png",
    "/clients/hdfc.png",
    "/clients/huhtamaki.png",
];

const DASHED_LINE = {
    backgroundImage: 'repeating-linear-gradient(to right, #d86a8c 0, #d86a8c 2px, transparent 2px, transparent 5px)',
    backgroundSize: '5px 1px',
    backgroundRepeat: 'repeat-x' as const,
};

export default function ClientsSection() {
    return (
        <>
            <section className="clients-section">
                <div className="clients-cw">

                    {/* TITLE */}
                    <h2 className="clients-title">WHO ARE OUR CLIENTS?</h2>

                    {/* DASHED LINE */}
                    <div className="clients-title-line" style={DASHED_LINE} />

                    {/* DESCRIPTION */}
                    <p className="clients-desc">
                        The success stories of our customers have not been generated by clever
                        marketing or a clever website; rather, they are the true voiced opinions
                        of our customers. The impact and results of using our services are what
                        these success stories are about.
                    </p>

                    {/* ── DESKTOP: two static rows ── */}
                    <div className="clients-desktop">
                        <div className="clients-row">
                            {CLIENTS.slice(0, 5).map((logo, i) => (
                                <div key={i} className="clients-logo-wrap">
                                    <div style={{ position: 'relative', width: '175px', height: '87px' }}>
                                        <Image src={logo} alt="Client logo" fill className="object-contain" />
                                    </div>
                                </div>
                            ))}
                        </div>
                        <div className="clients-mid-line" style={DASHED_LINE} />
                        <div className="clients-row">
                            {CLIENTS.slice(5, 10).map((logo, i) => (
                                <div key={i} className="clients-logo-wrap">
                                    <div style={{ position: 'relative', width: '175px', height: '87px' }}>
                                        <Image src={logo} alt="Client logo" fill className="object-contain" />
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* ── TABLET + MOBILE: auto-scroll carousel, NO dots ── */}
                    <div className="clients-carousel">
                        {/* Row 1 scrolls left */}
                        <div className="carousel-track carousel-forward">
                            {[...CLIENTS, ...CLIENTS].map((logo, i) => (
                                <div key={i} className="carousel-logo">
                                    <div style={{ position: 'relative', width: '120px', height: '60px' }}>
                                        <Image src={logo} alt="Client logo" fill className="object-contain" />
                                    </div>
                                </div>
                            ))}
                        </div>

                        {/* Separator */}
                        <div className="carousel-sep" style={DASHED_LINE} />

                        {/* Row 2 scrolls right */}
                        <div className="carousel-track carousel-backward">
                            {[...[...CLIENTS].reverse(), ...[...CLIENTS].reverse()].map((logo, i) => (
                                <div key={i} className="carousel-logo">
                                    <div style={{ position: 'relative', width: '120px', height: '60px' }}>
                                        <Image src={logo} alt="Client logo" fill className="object-contain" />
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                </div>
            </section>

            <style jsx global>{`
                .clients-section {
                    width: 100%;
                    background: #fff;
                    padding: 40px 0 80px;
                }
                .clients-cw {
                    max-width: 1140px;
                    margin: 0 auto;
                    padding: 0 20px;
                    text-align: center;
                    box-sizing: border-box;
                }

                /* ── Title ── */
                .clients-title {
                    font-size: 35px;
                    font-weight: 700;
                    color: #0F1B43;
                    letter-spacing: 0.05em;
                    line-height: 1.2;
                    margin-bottom: 8px;
                }
                .clients-title-line {
                    width: 490px;
                    max-width: 90%;
                    height: 1px;
                    margin: 16px auto 30px;
                }

                /* ── Description ── */
                .clients-desc {
                    max-width: 880px;
                    font-size: 18px;
                    line-height: 1.8;
                    color: #5D6371;
                    margin: 0 auto;
                }

                /* ── Desktop rows ── */
                .clients-desktop {
                    margin-top: 60px;
                    display: flex;
                    flex-direction: column;
                    gap: 50px;
                }
                .clients-mid-line { height: 1px; width: 100%; }
                .clients-row {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 40px;
                    flex-wrap: wrap;
                }
                .clients-logo-wrap {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                /* Hide carousel on desktop */
                .clients-carousel { display: none; }

                /* ── Tablet + Mobile: show carousel, hide desktop ── */
                @media (max-width: 1024px) {
                    .clients-desktop  { display: none; }
                    .clients-carousel {
                        display: flex;
                        flex-direction: column;
                        margin-top: 40px;
                        gap: 0;
                        overflow: hidden;
                        width: 100%;
                    }

                    .carousel-track {
                        display: flex;
                        width: max-content;
                    }
                    .carousel-forward  { animation: scrollLeft  18s linear infinite; }
                    .carousel-backward { animation: scrollRight 18s linear infinite; }
                    .carousel-track:hover { animation-play-state: paused; }

                    .carousel-logo {
                        flex: 0 0 auto;
                        padding: 16px 20px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .carousel-sep {
                        height: 1px;
                        width: 100%;
                        margin: 28px 0;
                    }

                    @keyframes scrollLeft {
                        0%   { transform: translateX(0); }
                        100% { transform: translateX(-50%); }
                    }
                    @keyframes scrollRight {
                        0%   { transform: translateX(-50%); }
                        100% { transform: translateX(0); }
                    }
                }

                /* ── Tablet specific ── */
                @media (max-width: 1024px) and (min-width: 768px) {
                    .clients-title { font-size: 28px; }
                    .clients-desc  { font-size: 16px; }
                }

                /* ── Mobile ── */
                @media (max-width: 767px) {
                    .clients-section { padding: 30px 0 50px; }
                    .clients-title { font-size: 20px; }
                    .clients-desc  { font-size: 15px; text-align: left; }
                    .carousel-logo { padding: 12px 14px; }
                }
                @media (max-width: 480px) {
                    .clients-title { font-size: 18px; }
                }
            `}</style>
        </>
    );
}