"use client";

import Image from "next/image";
import Link from "next/link";

export default function TestimonialsSection() {
    return (
        <>
            <section className="w-full bg-[#B53855] testimonials-section">
                <div className="max-w-[1100px] mx-auto px-[20px] text-center testimonials-container">

                    {/* TITLE */}
                    <h2 className="testimonials-title uppercase tracking-wide" style={{ color: '#FFFFFF' }}>
                        HEAR FROM <br className="title-break" />TRUSTED CLIENTS
                    </h2>

                    {/* QUOTE */}
                    <p className="testimonials-quote leading-[1.8] mx-auto font-normal" style={{ color: '#FFFFFF' }}>
                        "Their professionalism while consulting and knack for delivering within timelines. Their ability to make complex things exceedingly simple with a structured framework and deliver"
                    </p>

                    {/* DASH */}
                    <div className="testimonials-dash mx-auto" style={{ borderBottom: '2px dashed #FFFFFF' }} />

                    {/* AUTHOR NAME */}
                    <div className="testimonials-author tracking-wider font-bold uppercase" style={{ color: '#FFFFFF' }}>
                        MR. SUNIL GUPTA
                    </div>

                    {/* AUTHOR TITLE */}
                    <div className="testimonials-role tracking-widest uppercase font-normal" style={{ color: '#FFFFFF' }}>
                        CO-FOUNDER & CEO- YOTTA INFRASTRUCTURE
                    </div>

                    {/* PLAY BUTTON */}
                    <div className="flex justify-center testimonials-play">
                        <Link href="/clients/testimonials" className="cursor-pointer hover:scale-105 transition-transform block">
                            <Image
                                src="/play-button.png"
                                alt="Play testimonial video"
                                width={139}
                                height={139}
                                className="object-contain testimonials-play-img"
                                style={{ backgroundColor: 'transparent' }}
                            />
                        </Link>
                    </div>

                    {/* VIEW ALL BUTTON */}
                    <div className="flex justify-center testimonials-cta">
                        <Link href="/clients/testimonials" className="cursor-pointer hover:scale-105 transition-transform block">
                            <Image
                                src="/view-all-testimonial-button.png"
                                alt="View all testimonials"
                                width={259}
                                height={45}
                                className="object-contain testimonials-cta-img"
                                style={{ backgroundColor: 'transparent' }}
                            />
                        </Link>
                    </div>

                </div>
            </section>

            <style jsx global>{`
                /* ── DESKTOP ── */
                .title-break { display: none; }
                .testimonials-section {
                    padding: 60px 0;
                }
                .testimonials-title {
                    font-size: 42px;
                    font-weight: 700;
                    margin-bottom: 30px;
                    line-height: 1.2;
                }
                .testimonials-quote {
                    font-size: 20px;
                    max-width: 900px;
                    margin-bottom: 24px;
                }
                .testimonials-dash {
                    width: 280px;
                    max-width: 80%;
                    margin-bottom: 18px;
                }
                .testimonials-author {
                    font-size: 22px;
                }
                .testimonials-role {
                    font-size: 13px;
                    margin-top: 6px;
                }
                .testimonials-play {
                    margin-top: 30px;
                }
                .testimonials-play-img {
                    width: 139px;
                    height: 139px;
                }
                .testimonials-cta {
                    margin-top: 20px;
                }
                .testimonials-cta-img {
                    width: 259px;
                    height: 45px;
                }

                /* ── TABLET ── */
                @media (max-width: 900px) {
                    .testimonials-section {
                        padding: 50px 0 !important;
                    }
                    .testimonials-title {
                        font-size: 32px !important;
                        margin-bottom: 20px !important;
                    }
                    .testimonials-quote {
                        font-size: 18px !important;
                        margin-bottom: 20px !important;
                    }
                    .testimonials-author {
                        font-size: 18px !important;
                    }
                    .testimonials-play {
                        margin-top: 24px !important;
                    }
                    .testimonials-cta {
                        margin-top: 16px !important;
                    }
                }

                /* ── MOBILE ── */
                @media (max-width: 600px) {
                    .title-break { display: inline !important; }
                    .testimonials-section {
                        padding: 36px 0 !important;
                    }
                    .testimonials-title {
                        font-size: 22px !important;
                        margin-bottom: 16px !important;
                        letter-spacing: 0.05em !important;
                    }
                    .testimonials-quote {
                        font-size: 15px !important;
                        line-height: 1.7 !important;
                        margin-bottom: 16px !important;
                        text-align: left !important;
                    }
                    .testimonials-dash {
                        width: 160px !important;
                        margin-bottom: 14px !important;
                    }
                    .testimonials-author {
                        font-size: 15px !important;
                    }
                    .testimonials-role {
                        font-size: 11px !important;
                        letter-spacing: 0.06em !important;
                        line-height: 1.5 !important;
                        margin-top: 4px !important;
                    }
                    .testimonials-play {
                        margin-top: 20px !important;
                    }
                    .testimonials-play-img {
                        width: 80px !important;
                        height: 80px !important;
                    }
                    .testimonials-cta {
                        margin-top: 14px !important;
                    }
                    .testimonials-cta-img {
                        width: 190px !important;
                        height: auto !important;
                    }
                }

                @media (max-width: 400px) {
                    .testimonials-title {
                        font-size: 19px !important;
                    }
                    .testimonials-play-img {
                        width: 68px !important;
                        height: 68px !important;
                    }
                    .testimonials-cta-img {
                        width: 170px !important;
                    }
                }
            `}</style>
        </>
    );
}