'use client';

const videos = [
    { id: 1, videoId: "SuAp49A78q8", title: "Creativity Rules with Nikhil" },
    { id: 2, videoId: "mjEQz7Hfbiw", title: "Creativity Rules with Ridima" },
    { id: 3, videoId: "kHvRMWsXcys", title: "Creativity Rules with Ridima" },
    { id: 4, videoId: "xfFeBKmGlMU", title: "Creativity Rules with Akshay" },
    { id: 5, videoId: "J_9wzEvl-d4", title: "Creativity rules with Ronn K" },
    { id: 6, videoId: "ghWjDyWEM0w", title: "Creativity rules with Sunil Lu" },
    { id: 7, videoId: "OPX0_nMVzMo", title: "Creativity Rules with Gauta" },
    { id: 8, videoId: "Q_gC9JLdi1Y", title: "Creativity Rules with Tim W" },
];

export default function VideosPage() {
    return (
        <>
            {/* ===== HERO ===== */}
            <section className="vp-hero">
                <div className="vp-hero-bg" />
                <div className="vp-cw vp-hero-badge-wrap">
                    <div className="vp-hero-badge">
                        <h1 className="vp-hero-title">Videos</h1>
                    </div>
                </div>
            </section>

            <div className="vp-spacing" />

            {/* ===== GRID ===== */}
            <section className="vp-section">
                <div className="vp-cw">
                    <div className="vp-grid">
                        {videos.map((video) => (
                            <div key={video.id} className="vp-card">
                                <a
                                    href={`https://www.youtube.com/watch?v=${video.videoId}`}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="vp-link"
                                >
                                    <div className="vp-thumb-wrap">
                                        {/* Thumbnail */}
                                        <img
                                            src={`https://i.ytimg.com/vi/${video.videoId}/maxresdefault.jpg`}
                                            alt={video.title}
                                            className="vp-thumb"
                                            onError={(e) => {
                                                e.currentTarget.src = `https://i.ytimg.com/vi/${video.videoId}/sddefault.jpg`;
                                            }}
                                        />

                                        {/* Top gradient */}
                                        <div className="vp-top-gradient" />

                                        {/* Top bar */}
                                        <div className="vp-top-bar">
                                            <div className="vp-bar-left">
                                                {/* White circle logo */}
                                                <div className="vp-logo-circle">
                                                    <img
                                                        src="/favicon.ico"
                                                        alt="Nyra"
                                                        className="vp-logo"
                                                        onError={(e) => {
                                                            (e.currentTarget as HTMLImageElement).style.display = 'none';
                                                        }}
                                                    />
                                                </div>
                                                <span className="vp-bar-title">{video.title}...</span>
                                            </div>
                                            {/* Dots */}
                                            <button
                                                className="vp-dots-btn"
                                                onClick={(e) => e.preventDefault()}
                                            >
                                                <svg width="18" height="18" viewBox="0 0 24 24">
                                                    <circle cx="12" cy="5" r="2" fill="white" />
                                                    <circle cx="12" cy="12" r="2" fill="white" />
                                                    <circle cx="12" cy="19" r="2" fill="white" />
                                                </svg>
                                            </button>
                                        </div>

                                        {/* YouTube red play button */}
                                        <div className="vp-play-wrap">
                                            <div className="vp-play-btn">
                                                <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>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ===== STYLES ===== */}
            <style jsx>{`
                * { box-sizing: border-box; }

                /* ── Content wrapper ── */
                .vp-cw { max-width: 1400px; margin: 0 auto; padding: 0 5.5%; }
                @media (max-width: 1200px) { .vp-cw { padding: 0 4%; } }
                @media (max-width: 767px)  { .vp-cw { padding: 0 20px; } }
                @media (max-width: 480px)  { .vp-cw { padding: 0 16px; } }

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

                /* 1024px */
                @media (max-width: 1024px) {
                    .vp-hero { margin-top: 90px; }
                    .vp-hero-bg { min-height: 380px; height: 55vh; }
                    .vp-hero-badge { padding: 35px 55px; max-width: 90%; }
                    .vp-hero-title { font-size: 32px; }
                }
                /* 768px */
                @media (max-width: 768px) {
                    .vp-hero { margin-top: 75px; margin-bottom: 35px; }
                    .vp-hero-bg { min-height: 320px; height: 52vw; }
                    .vp-hero-badge-wrap { bottom: -35px; }
                    .vp-hero-badge { padding: 24px 32px; max-width: 92%; border-radius: 8px 12px 0 0; }
                    .vp-hero-title { font-size: 22px; }
                }
                /* 480px */
                @media (max-width: 480px) {
                    .vp-hero { margin-top: 65px; margin-bottom: 25px; }
                    .vp-hero-bg { min-height: 240px; height: 56vw; }
                    .vp-hero-badge-wrap { bottom: -28px; }
                    .vp-hero-badge { padding: 16px 22px; max-width: 95%; border-radius: 6px 10px 0 0; }
                    .vp-hero-title { font-size: 18px; }
                }
                /* 360px */
                @media (max-width: 360px) {
                    .vp-hero-bg { min-height: 200px; height: 58vw; }
                    .vp-hero-badge { padding: 13px 18px; max-width: 97%; }
                    .vp-hero-title { font-size: 15px; }
                }

                /* Spacing after hero */
                .vp-spacing { height: 10px; }
                @media (max-width: 768px) { .vp-spacing { height: 16px; } }
                @media (max-width: 480px) { .vp-spacing { height: 12px; } }

                /* ── Grid section ── */
                .vp-section { padding: 5px 0 80px; }
                @media (max-width: 768px) { .vp-section { padding: 5px 0 50px; } }
                @media (max-width: 480px) { .vp-section { padding: 5px 0 36px; } }

                /* ── Video grid ── */
                .vp-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 40px;
                }
                @media (max-width: 1200px) { .vp-grid { gap: 32px; } }
                @media (max-width: 968px)  { .vp-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
                @media (max-width: 600px)  { .vp-grid { grid-template-columns: 1fr; gap: 24px; } }
                @media (max-width: 480px)  { .vp-grid { gap: 20px; } }

                /* ── Card ── */
                .vp-card { width: 100%; }
                .vp-link { display: block; text-decoration: none; }

                /* ── Thumbnail wrapper ── */
                .vp-thumb-wrap {
                    position: relative;
                    aspect-ratio: 16 / 9;
                    border-radius: 8px;
                    overflow: hidden;
                    background: #0f0f0f;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
                }
                @media (max-width: 480px) { .vp-thumb-wrap { border-radius: 6px; } }

                .vp-thumb {
                    position: absolute; top: 0; left: 0;
                    width: 100%; height: 100%;
                    object-fit: cover; display: block;
                    transition: transform 0.3s ease;
                }
                .vp-link:hover .vp-thumb { transform: scale(1.05); }

                /* ── Top gradient ── */
                .vp-top-gradient {
                    position: absolute; top: 0; left: 0; right: 0; height: 70px;
                    background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, transparent 100%);
                    z-index: 1; pointer-events: none;
                }

                /* ── Top bar ── */
                .vp-top-bar {
                    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
                    display: flex; align-items: center; justify-content: space-between;
                    padding: 10px 12px;
                }
                @media (max-width: 480px) { .vp-top-bar { padding: 8px 10px; } }

                .vp-bar-left {
                    display: flex; align-items: center; gap: 10px;
                    flex: 1; min-width: 0;
                }
                @media (max-width: 480px) { .vp-bar-left { gap: 8px; } }

                /* White circle logo */
                .vp-logo-circle {
                    width: 36px; height: 36px; border-radius: 50%;
                    background: #fff; display: flex; align-items: center; justify-content: center;
                    flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.3); overflow: hidden;
                }
                .vp-logo { width: 28px; height: 28px; object-fit: contain; display: block; }

                @media (max-width: 768px) {
                    .vp-logo-circle { width: 30px; height: 30px; }
                    .vp-logo { width: 22px; height: 22px; }
                }
                @media (max-width: 480px) {
                    .vp-logo-circle { width: 26px; height: 26px; }
                    .vp-logo { width: 19px; height: 19px; }
                }

                .vp-bar-title {
                    font-size: 18px; font-weight: 400; color: #fff;
                    font-family: Helvetica, Arial, sans-serif;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                    text-shadow: 0 1px 4px rgba(0,0,0,0.95);
                }
                @media (max-width: 968px) { .vp-bar-title { font-size: 15px; } }
                @media (max-width: 768px) { .vp-bar-title { font-size: 13px; } }
                @media (max-width: 480px) { .vp-bar-title { font-size: 11px; } }

                .vp-dots-btn {
                    background: rgba(0,0,0,0.5); border: none; cursor: pointer;
                    padding: 5px; border-radius: 4px;
                    display: flex; align-items: center; justify-content: center;
                    flex-shrink: 0; transition: background 0.2s;
                }
                .vp-dots-btn:hover { background: rgba(0,0,0,0.8); }

                /* ── Play button ── */
                .vp-play-wrap {
                    position: absolute; inset: 0; z-index: 1;
                    display: flex; align-items: center; justify-content: center;
                }
                .vp-play-btn {
                    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
                    transition: transform 0.2s ease;
                }
                .vp-link:hover .vp-play-btn { transform: scale(1.12); }

                /* Scale play button on small screens */
                @media (max-width: 600px) {
                    .vp-play-btn svg { width: 54px; height: 38px; }
                }
                @media (max-width: 480px) {
                    .vp-play-btn svg { width: 44px; height: 31px; }
                }
                @media (max-width: 360px) {
                    .vp-play-btn svg { width: 38px; height: 27px; }
                }
            `}</style>
        </>
    );
}