"use client";

const clients = [
    { name: 'Adani Ports and Logistics', logo: '/clients/adani.png' },
    { name: 'Adani Connex', logo: '/clients/adaniconnex.png' },
    { name: 'Alembic', logo: '/clients/alembic.png' },
    { name: 'BASF', logo: '/clients/basf.png' },
    { name: 'Carestream', logo: '/clients/carestream.png' },
    { name: 'Godrej', logo: '/clients/godrej.png' },
    { name: 'Hindustan Coca-Cola Beverages', logo: '/clients/cocacola.png' },
    { name: 'HDFC Mutual Fund', logo: '/clients/hdfc.png' },
    { name: 'Huhtamaki', logo: '/clients/huhtamaki.png' },
    { name: 'Credit Suisse', logo: '/clients/creditsuisse.png' },
    { name: 'CCINEW', logo: '/clients/CCI_NEW.png' },
    { name: 'ONGC', logo: '/clients/ongcLogo.png' },
];

export default function ClientsPage() {
    const rows: typeof clients[] = [];
    for (let i = 0; i < clients.length; i += 6) {
        rows.push(clients.slice(i, i + 6));
    }

    return (
        <>
            <style jsx>{`
                /* ── Content wrapper ── */
                .cw {
                    max-width: 1400px;
                    margin: 0 auto;
                    padding: 0 5.5%;
                    box-sizing: border-box;
                }
                @media (max-width: 1200px) { .cw { padding: 0 4.5%; } }
                @media (max-width: 767px)  { .cw { padding: 0 20px; } }

                /* ── Hero — position UNCHANGED: bottom -60px ── */
                .hero-section {
                    position: relative;
                    margin-top: 105px;
                    margin-bottom: 60px;
                }
                .hero-banner {
                    background: url('/clients/hero-clients.jpg') left center / cover no-repeat;
                    min-height: 500px;
                    height: 60vh;
                    width: 100%;
                }
                .hero-badge {
                    position: absolute;
                    bottom: -60px;
                    left: 0;
                    right: 0;
                    z-index: 10;
                }
                .hero-badge-inner {
                    background: linear-gradient(-90deg, #b53855, #62c0e2);
                    padding: 45px 85px;
                    border-radius: 10px 15px 0 0;
                    display: inline-block;
                    max-width: 85%;
                }
                .hero-title {
                    color: #fff;
                    font-size: 38px;
                    font-weight: 700;
                    margin: 0;
                    line-height: 1.3;
                    font-family: Helvetica, Arial, sans-serif;
                    white-space: normal;
                    word-wrap: break-word;
                }

                /* Scale title box — bottom stays -60px on desktop/tablet */
                @media (max-width: 1024px) {
                    .hero-banner { min-height: 380px; height: 55vh; }
                    .hero-badge-inner { padding: 35px 50px; max-width: 90%; }
                    .hero-title { font-size: 30px; }
                }
                @media (max-width: 767px) {
                    .hero-section { margin-bottom: 30px; }
                    .hero-banner { min-height: 340px; height: 75vw; }
                    .hero-badge { bottom: -30px; }
                    .hero-badge-inner { padding: 22px 28px; max-width: 95%; border-radius: 8px 10px 0 0; }
                    .hero-title { font-size: 20px; }
                }
                @media (max-width: 480px) {
                    .hero-section { margin-bottom: 25px; }
                    .hero-banner { min-height: 300px; height: 78vw; }
                    .hero-badge { bottom: -25px; }
                    .hero-badge-inner { padding: 16px 20px; max-width: 96%; }
                    .hero-title { font-size: 16px; }
                }

                /* ── Clients section ── */
                .clients-section {
                    background: #fff;
                    padding: 80px 0;
                }
                @media (max-width: 767px) { .clients-section { padding: 48px 0; } }

                /* ── Desktop: static rows with separators ── */
                .clients-desktop { display: block; }

                .logos-row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 40px;
                    padding: 0 20px;
                }
                .logo-item {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 20px;
                    transition: transform 0.3s ease;
                    min-width: 0;
                }
                .logo-item img {
                    max-width: 180px;
                    max-height: 70px;
                    width: auto;
                    height: auto;
                    object-fit: contain;
                    display: block;
                }
                .logo-item:hover { transform: scale(1.05); }
                .row-separator {
                    width: 100%;
                    height: 1px;
                    border-top: 1px dotted #f78da7;
                    margin: 50px 0;
                }

                /* ── Tablet + Mobile: auto-scroll carousel, no dots ── */
                .clients-carousel { display: none; }

                @media (max-width: 1024px) {
                    .clients-desktop  { display: none; }
                    .clients-carousel { display: block; overflow: hidden; width: 100%; }

                    /* Two rows of carousels scrolling in opposite directions */
                    .carousel-row {
                        display: flex;
                        width: max-content;
                        margin-bottom: 32px;
                    }
                    .carousel-row:last-child { margin-bottom: 0; }

                    .carousel-row-forward  { animation: scrollLeft  22s linear infinite; }
                    .carousel-row-backward { animation: scrollRight 22s linear infinite; }

                    .carousel-row:hover { animation-play-state: paused; }

                    .carousel-logo {
                        flex: 0 0 auto;
                        width: 160px;
                        padding: 0 24px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .carousel-logo img {
                        max-width: 120px;
                        max-height: 55px;
                        width: auto;
                        height: auto;
                        object-fit: contain;
                        display: block;
                        transition: transform 0.3s ease;
                    }
                    .carousel-logo:hover img { transform: scale(1.08); }

                    /* Separator between rows */
                    .carousel-separator {
                        width: 100%;
                        height: 1px;
                        border-top: 1px dotted #f78da7;
                        margin: 32px 0;
                    }
                }

                @media (max-width: 767px) {
                    .carousel-logo { width: 130px; padding: 0 16px; }
                    .carousel-logo img { max-width: 100px; max-height: 45px; }
                    .carousel-separator { margin: 24px 0; }
                }
                @media (max-width: 480px) {
                    .carousel-logo { width: 110px; padding: 0 12px; }
                    .carousel-logo img { max-width: 85px; max-height: 40px; }
                }

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

                /* ── Footer ── */
                .footer-bar { height: 10px; background: #2c3e50; }
            `}</style>

            {/* ── HERO BANNER ── */}
            <section className="hero-section">
                <div className="hero-banner" />
                <div className="cw hero-badge">
                    <div className="hero-badge-inner">
                        <h1 className="hero-title">Clients</h1>
                    </div>
                </div>
            </section>

            {/* ── CLIENTS GRID ── */}
            <section className="clients-section">
                <div className="cw">

                    {/* Desktop: original rows with separators */}
                    <div className="clients-desktop">
                        {rows.map((row, rowIndex) => (
                            <div key={rowIndex}>
                                <div className="logos-row">
                                    {row.map((client, index) => (
                                        <div key={index} className="logo-item">
                                            <img src={client.logo} alt={client.name} />
                                        </div>
                                    ))}
                                </div>
                                {rowIndex < rows.length - 1 && <div className="row-separator" />}
                            </div>
                        ))}
                    </div>

                    {/* Tablet + Mobile: two carousel rows — row 1 scrolls left, row 2 scrolls right */}
                    <div className="clients-carousel">
                        {/* Row 1: first 6 logos, scrolls left */}
                        <div className="carousel-row carousel-row-forward">
                            {[...clients, ...clients].map((client, i) => (
                                <div key={i} className="carousel-logo">
                                    <img src={client.logo} alt={client.name} />
                                </div>
                            ))}
                        </div>

                        <div className="carousel-separator" />

                        {/* Row 2: all logos reversed, scrolls right */}
                        <div className="carousel-row carousel-row-backward">
                            {[...[...clients].reverse(), ...[...clients].reverse()].map((client, i) => (
                                <div key={i} className="carousel-logo">
                                    <img src={client.logo} alt={client.name} />
                                </div>
                            ))}
                        </div>
                    </div>

                </div>
            </section>

            {/* ── FOOTER BAR ── */}
            <div className="footer-bar" />
        </>
    );
}