'use client';

import { useState } from "react";

const testimonials = [
    { id: 1, quote: "Their professionalism while consulting and knack for delivering within timelines. Their ability to make complex things exceedingly simple with a structured framework and deliver", name: "Mr. Sunil Gupta", position: "Co-founder & CEO- Yotta Infrastructure", image: "/testimonials/sunil-gupta.jpg", videoId: "w3Dd-1lPYvQ" },
    { id: 2, quote: "Workshop was highly insightful and helped us realise how we need to orchestrate ourselves as one team that needs to play to win. Nyra team was warm, professional and brings a lot of experience in the arena which they serve", name: "Mr. Siddharth Singh", position: "VP Marketing, Yotta Infrastructure", image: "/testimonials/siddharth-singh.jpg", videoId: "Re_NuawlyPY" },
    { id: 3, quote: "My anxiety of approaching people was gone after the sessions. The content was very simple and it motivated all of us", name: "Mr. Chandar Venkatraman", position: "Zonal Sales Manager – Radiometer", image: "/testimonials/chandar-venkatraman.jpg", videoId: "_L_3Sx_Q3RE" },
    { id: 4, quote: "What I liked about Nyra is how they customised the program for us and how they brought passion and commitment to the work they did", name: "Mr. Rohit Tandekar", position: "Sales HR Business Partner -Godrej Consumer Products", image: "/testimonials/rohit-tandekar.jpg", videoId: "DvcEkqZhSZA" },
    { id: 5, quote: "Team Nyra is a subject matter expert and they have done a phenomenal job. I am glad that we found them I would recommend this program to the corporates, these guys really know their job well", name: "Mr. Smit Dave", position: "General Manager – Radiometer", image: "/testimonials/smit-dave.jpg", videoId: "N9AXe1M_rbk" },
    { id: 6, quote: "My overall experience has been fantastic — the preparation, case studies, individual activities were really well thought through and genuinely interested the audience. The pre-work leading to specific activities was excellent. So overall a great experience.", name: "Mr. Nikhel Goel", position: "General Manager – Carestream", image: "/testimonials/nikhel-goel.jpg", videoId: "VkBD2k1Ij8A" },
    { id: 7, quote: "What I liked about them is their flexibility to create a structure as per the need shared with them rather than sticking to a standard format. They came up with relevant content which added value to participants and delivered seamlessly without any hiccups. It was indeed a wonderful experience working with Nyra Leadership Consulting.", name: "Mr. Rinto Raju", position: "Divisional Training Manager – Glenmark Pharmaceuticals", image: "/testimonials/rinto-raju.jpg", videoId: "Dm7eH5L08r0" },
];

function VideoPlayer({ videoId, name, position }: { videoId: string; name: string; position: string }) {
    const [hovered, setHovered] = useState(false);
    const [showPanel, setShowPanel] = useState(false);
    const ytUrl = `https://www.youtube.com/watch?v=${videoId}`;

    const channelTitle = `Client Experience Sharing | ${name} (${position})`;

    const handleShare = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        setShowPanel(false);
        if (navigator.share) {
            navigator.share({ title: channelTitle, url: ytUrl });
        } else {
            navigator.clipboard.writeText(ytUrl);
        }
    };

    const handleDotsClick = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        setShowPanel(true);
    };

    /*
     * WHY INLINE STYLES FOR THE CARD?
     * ─────────────────────────────────
     * `style jsx` in Next.js is scoped per-component at build time.
     * If the VideoPlayer component is used inside a parent that uses
     * `style jsx`, class names can get mis-scoped or stripped entirely —
     * which is exactly what your screenshot shows (elements rendering below
     * the thumbnail instead of overlaid on it).
     *
     * Inline styles have zero scoping issues: they always apply.
     *
     * The "padding-bottom: 56.25%" trick gives a 16:9 height without
     * needing a fixed px — required because the parent column width
     * is fluid (percentage-based grid).
     */
    return (
        <div
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
            style={{
                position: 'relative',
                width: '100%',
                paddingBottom: '56.25%', /* 9/16 = 56.25% → 16:9 aspect ratio */
                borderRadius: 8,
                overflow: 'hidden',
                background: '#0f0f0f',
                boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
                display: 'block',
            }}
        >
            {/* Thumbnail — stretched to fill via position:absolute */}
            <img
                loading="lazy"
                src={`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`}
                alt={`${name} testimonial video`}
                onError={(e) => {
                    e.currentTarget.src = `https://i.ytimg.com/vi/${videoId}/sddefault.jpg`;
                }}
                style={{
                    position: 'absolute',
                    top: 0, left: 0,
                    width: '100%', height: '100%',
                    objectFit: 'cover',
                    display: 'block',
                    transition: 'transform 0.3s ease',
                    transform: hovered ? 'scale(1.03)' : 'scale(1)',
                }}
            />

            {/* ── Top bar: favicon + title + dots (always shown on hover) ── */}
            <div style={{
                position: 'absolute',
                top: 0, left: 0, right: 0,
                zIndex: 4,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '10px 12px',
                opacity: hovered ? 1 : 0,
                transition: 'opacity 0.2s ease',
                pointerEvents: hovered ? 'auto' : 'none',
            }}>
                {/* Left: favicon + channel name */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0, flex: 1 }}>
                    {/* Logo wrapped in white circle — clean on any background */}
                    <div style={{
                        width: 36, height: 36,
                        borderRadius: '50%',
                        background: '#ffffff',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        flexShrink: 0,
                        boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
                        overflow: 'hidden',
                    }}>
                        <img
                            src="/favicon.ico"
                            alt="Nyra"
                            onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
                            style={{
                                width: 28, height: 28,
                                objectFit: 'contain',
                                display: 'block',
                            }}
                        />
                    </div>
                    <span style={{
                        fontSize: 18,
                        fontWeight: 400,
                        color: '#fff',
                        fontFamily: 'Helvetica, Arial, sans-serif',
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        textShadow: '0 1px 4px rgba(0,0,0,0.95)',
                        maxWidth: 230,
                    }}>
                        {channelTitle}
                    </span>
                </div>

                {/* Right: dots (⋮) only — matching original design */}
                <button
                    onClick={handleDotsClick}
                    title="More options"
                    style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: 32,
                        height: 32,
                        borderRadius: 4,
                        background: 'rgba(0,0,0,0.5)',
                        border: 'none',
                        cursor: 'pointer',
                        flexShrink: 0,
                    }}
                >
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="white">
                        <circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" />
                    </svg>
                </button>
            </div>

            {/* ── Full overlay panel (opens on dots click) — matches Image 3 ── */}
            {showPanel && (
                <div
                    onClick={(e) => e.stopPropagation()}
                    style={{
                        position: 'absolute',
                        inset: 0,
                        background: 'rgba(0,0,0,0.78)',
                        borderRadius: 8,
                        zIndex: 10,
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        padding: 16,
                    }}
                >
                    {/* Close button top-right */}
                    <button
                        onClick={(e) => { e.stopPropagation(); setShowPanel(false); }}
                        style={{
                            position: 'absolute',
                            top: 10, right: 12,
                            background: 'none',
                            border: 'none',
                            color: '#fff',
                            fontSize: 20,
                            cursor: 'pointer',
                            lineHeight: 1,
                            padding: 4,
                            opacity: 0.85,
                        }}
                        aria-label="Close"
                    >
                        ✕
                    </button>

                    {/* Panel title — "Watch later as [channel name]" */}
                    <p style={{
                        fontSize: 13,
                        color: 'rgba(255,255,255,0.9)',
                        fontFamily: 'Helvetica, Arial, sans-serif',
                        fontWeight: 600,
                        margin: '0 0 24px',
                        textAlign: 'center',
                    }}>
                        Watch later as Nyra Leadership
                    </p>

                    {/* Two large circular action buttons */}
                    <div style={{ display: 'flex', gap: 48, alignItems: 'flex-start', justifyContent: 'center' }}>
                        {/* Watch later */}
                        <a
                            href={ytUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            onClick={(e) => { e.stopPropagation(); setShowPanel(false); }}
                            style={{
                                display: 'flex',
                                flexDirection: 'column',
                                alignItems: 'center',
                                gap: 10,
                                textDecoration: 'none',
                            }}
                        >
                            <div style={{
                                width: 64, height: 64,
                                borderRadius: '50%',
                                background: 'rgba(255,255,255,0.18)',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                            }}>
                                <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
                                    <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
                                </svg>
                            </div>
                            <span style={{ fontSize: 13, fontWeight: 600, color: '#fff', fontFamily: 'Helvetica, Arial, sans-serif' }}>
                                Watch later
                            </span>
                        </a>

                        {/* Share */}
                        <button
                            onClick={handleShare}
                            style={{
                                display: 'flex',
                                flexDirection: 'column',
                                alignItems: 'center',
                                gap: 10,
                                background: 'none',
                                border: 'none',
                                cursor: 'pointer',
                            }}
                        >
                            <div style={{
                                width: 64, height: 64,
                                borderRadius: '50%',
                                background: 'rgba(255,255,255,0.18)',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                            }}>
                                <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
                                    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                                    <polyline points="16 6 12 2 8 6" />
                                    <line x1="12" y1="2" x2="12" y2="15" />
                                </svg>
                            </div>
                            <span style={{ fontSize: 13, fontWeight: 600, color: '#fff', fontFamily: 'Helvetica, Arial, sans-serif' }}>
                                Share
                            </span>
                        </button>
                    </div>
                </div>
            )}

            {/* Centred play button (links to YouTube) */}
            <a
                href={ytUrl}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={`Watch ${name} testimonial on YouTube`}
                style={{
                    position: 'absolute',
                    top: 0, left: 0, right: 0, bottom: 0,
                    zIndex: 3,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    textDecoration: 'none',
                }}
            >
                <div style={{
                    filter: 'drop-shadow(0 4px 10px rgba(0,0,0,0.5))',
                    transition: 'transform 0.2s ease',
                    transform: hovered ? 'scale(1.12)' : 'scale(1)',
                }}>
                    <svg viewBox="0 0 68 48" width="68" height="48">
                        <path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00" />
                        <path d="M 45,24 27,14 27,34" fill="#fff" />
                    </svg>
                </div>
            </a>
        </div>
    );
}

export default function TestimonialsPage() {
    return (
        <>
            {/* Global styles for layout — using `global` avoids scoping issues */}
            <style jsx global>{`
                .nyra-t * { box-sizing: border-box; }

                .nyra-cw { max-width: 1400px; margin: 0 auto; padding: 0 5.5%; }
                @media (max-width: 1200px) { .nyra-cw { padding: 0 4.5%; } }
                @media (max-width: 767px)  { .nyra-cw { padding: 0 20px; } }

                /* Hero */
                .nyra-hero { position: relative; margin-top: 105px; margin-bottom: 60px; }
                .nyra-hero-banner {
                    background: url('/testimonials/testimonials-hero.jpg') center 60% / cover no-repeat;
                    height: 60vh; min-height: 450px; max-height: 600px; width: 100%; display: block;
                }
                .nyra-hero-badge { position: absolute; bottom: -60px; left: 0; right: 0; z-index: 10; }
                .nyra-hero-badge-inner {
                    background: linear-gradient(-90deg, #b53855 0%, #62c0e2 100%);
                    border-radius: 10px 15px 0 0;
                    padding: 45px 85px;
                    display: inline-block;
                    max-width: 85%;
                }
                .nyra-hero-title {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 38px; font-weight: 700; color: #fff; margin: 0; line-height: 1.3;
                }
                @media (max-width: 1024px) {
                    .nyra-hero-banner { min-height: 380px; height: 55vh; }
                    .nyra-hero-badge-inner { padding: 35px 50px; max-width: 90%; }
                    .nyra-hero-title { font-size: 30px; }
                }
                @media (max-width: 767px) {
                    .nyra-hero { margin-bottom: 30px; }
                    .nyra-hero-banner { min-height: 340px; height: 75vw; }
                    .nyra-hero-badge { bottom: -30px; }
                    .nyra-hero-badge-inner { padding: 22px 28px; max-width: 95%; border-radius: 8px 10px 0 0; }
                    .nyra-hero-title { font-size: 20px; }
                }
                @media (max-width: 480px) {
                    .nyra-hero { margin-bottom: 25px; }
                    .nyra-hero-banner { min-height: 300px; height: 78vw; }
                    .nyra-hero-badge { bottom: -25px; }
                    .nyra-hero-badge-inner { padding: 16px 20px; max-width: 96%; }
                    .nyra-hero-title { font-size: 16px; }
                }

                /* Testimonials section */
                .nyra-section { padding-bottom: 60px; }
                @media (max-width: 767px) { .nyra-section { padding-bottom: 40px; } }

                /* Two-column grid */
                .nyra-item {
                    display: grid;
                    grid-template-columns: 1fr 380px;
                    gap: 50px;
                    padding: 15px 0;
                    align-items: start;
                }
                @media (max-width: 968px) { .nyra-item { grid-template-columns: 1fr; gap: 28px; } }
                @media (max-width: 767px) { .nyra-item { padding: 10px 0; } }

                /* Left column */
                .nyra-left { display: flex; flex-direction: column; gap: 20px; }

                .nyra-quote {
                    font-size: 18px; line-height: 1.7; color: #243858;
                    margin: 0; font-family: Helvetica, Arial, sans-serif; font-weight: 400;
                }
                @media (max-width: 1024px) { .nyra-quote { font-size: 16px; } }
                @media (max-width: 767px)  { .nyra-quote { font-size: 15px; line-height: 1.65; } }

                .nyra-profile { display: flex; align-items: center; gap: 20px; }
                .nyra-profile-img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
                .nyra-profile-name { font-size: 14px; font-weight: 700; color: #181B31; margin: 0 0 4px; font-family: Helvetica, Arial, sans-serif; }
                .nyra-profile-pos  { font-size: 12px; color: #8C8C8C; margin: 0; font-family: Helvetica, Arial, sans-serif; line-height: 1.4; }

                /* Right column (video) */
                .nyra-video-col { width: 100%; max-width: 380px; }
                @media (max-width: 968px) { .nyra-video-col { max-width: 100%; } }

                /* Dashed divider */
                .nyra-divider {
                    height: 1px;
                    background-image: repeating-linear-gradient(90deg, #f78da7 0, #f78da7 5px, transparent 5px, transparent 10px);
                    margin: 25px 0;
                }

                /* Footer bar */
                .nyra-footer-bar { height: 15px; background: #CF87B0; }
            `}</style>

            <div className="nyra-t">
                {/* HERO */}
                <section className="nyra-hero">
                    <div className="nyra-hero-banner" />
                    <div className="nyra-cw nyra-hero-badge">
                        <div className="nyra-hero-badge-inner">
                            <h1 className="nyra-hero-title">Testimonials</h1>
                        </div>
                    </div>
                </section>

                {/* TESTIMONIALS */}
                <section className="nyra-section">
                    <div className="nyra-cw">
                        {testimonials.map((t, index) => (
                            <div key={t.id}>
                                <div className="nyra-item">
                                    {/* Left — Quote + Profile */}
                                    <div className="nyra-left">
                                        <p className="nyra-quote">"{t.quote}"</p>
                                        <div className="nyra-profile">
                                            <img src={t.image} alt={t.name} className="nyra-profile-img" />
                                            <div>
                                                <h3 className="nyra-profile-name">{t.name}</h3>
                                                <p className="nyra-profile-pos">{t.position}</p>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Right — Video */}
                                    <div className="nyra-video-col">
                                        <VideoPlayer videoId={t.videoId} name={t.name} position={t.position} />
                                    </div>
                                </div>

                                {index < testimonials.length - 1 && <div className="nyra-divider" />}
                            </div>
                        ))}
                    </div>
                </section>

                <div className="nyra-footer-bar" />
            </div>
        </>
    );
}