import React from 'react';
import Image from 'next/image';
import { motion } from "framer-motion";
import image from "@/assists/loading-frame-1.png"

const QR = () => {
    return (
        <div>
            <div
                className="
            rounded-3xl
            p-4 md:p-16
            mb-16
            flex flex-row
            items-center
            md:justify-center
            gap-6 md:gap-12
            text-center
            relative
            overflow-x-auto
            md:overflow-visible
            "
            >
                {/* inner wrapper */}
                <div className="flex flex-row items-center gap-6 md:gap-12 min-w-max mx-auto">

                    {/* QR Phone */}
                    <div className="relative group flex-shrink-0">

                        <div
                            className="
                        relative
                        w-[150px] sm:w-[180px] md:w-[220px]
                        h-[300px] sm:h-[360px] md:h-[440px]
                        bg-[#1a1c1e]
                        rounded-[36px]
                        md:rounded-[40px]
                        border-[6px]
                        md:border-[8px]
                        border-[#3c4043]
                        shadow-2xl
                        overflow-hidden
                        flex flex-col
                        items-center
                        justify-center
                        transition-transform
                        hover:-translate-y-2
                        "
                        >

                            {/* notch */}
                            <div className="absolute top-0 w-28 h-7 bg-[#3c4043] rounded-b-2xl z-20"></div>


                            {/* QR */}
                            <div className="w-full h-full bg-white m-3 flex items-center justify-center p-4 md:p-8">

                                <div className="w-full aspect-square border-[10px] border-black p-3 grid grid-cols-10 gap-0.5 relative shadow-lg">

                                    {[...Array(100)].map((_, i) => (
                                        <div
                                            key={i}
                                            className={`w-full pt-[100%]
                                        ${Math.random() > 0.4
                                                    ? "bg-black"
                                                    : "bg-transparent"
                                                }`}
                                        />
                                    ))}

                                    <div className="absolute inset-0 m-auto w-8 h-8 bg-white border-2 border-black flex items-center justify-center">

                                        <div className="w-3 h-3 bg-green-600 rounded-sm" />

                                    </div>

                                </div>

                            </div>

                            <div className="absolute bottom-4 w-16 h-1.5 bg-gray-600 rounded-full"></div>

                        </div>

                    </div>



                    {/* CENTER QR TEXT */}

                    <div className="flex flex-col items-center gap-6 md:gap-8 relative z-10 flex-shrink-0">

                        <div className="p-6 md:p-8 bg-white/80 backdrop-blur-md rounded-3xl shadow-xl border border-white/50">

                            <div className="w-24 h-24 md:w-32 md:h-32 border-4 border-dashed border-green-200 rounded-2xl flex items-center justify-center relative bg-green-50/30">


                                <motion.div
                                    animate={{ opacity: [0.1, 0.3, 0.1] }}
                                    transition={{ repeat: Infinity, duration: 2 }}
                                    className="absolute inset-0 flex flex-wrap gap-1 p-2"
                                >

                                    {[...Array(64)].map((_, i) => (

                                        <div
                                            key={i}
                                            className={`w-3 h-3
                                        ${Math.random() > 0.3
                                                    ? "bg-green-600"
                                                    : "bg-transparent"
                                                }`}
                                        />

                                    ))}

                                </motion.div>


                                <div className="z-10 text-center">

                                    <div className="text-3xl md:text-4xl mb-2">
                                        🤳
                                    </div>

                                    <div className="text-[10px] font-black text-green-700 tracking-widest">

                                        SCAN QR

                                    </div>

                                </div>


                            </div>

                        </div>


                        <div className="bg-white/80 backdrop-blur-sm px-6 py-3 rounded-full shadow-sm border border-gray-100 flex items-center gap-3">

                            <div className="w-2 h-2 bg-green-500 rounded-full animate-ping"></div>

                            <p className="text-xs md:text-sm font-bold text-[#5f6368]">

                                ইন্সটল করতে QR কোডটি স্ক্যান করুন
                            </p>
                        </div>
                    </div>
                    {/* App Phone */}
                    <div className="relative group flex-shrink-0">
                        <div
                            className="
                        relative
                        w-[150px] sm:w-[180px] md:w-[220px]
                        h-[300px] sm:h-[360px] md:h-[440px]
                        bg-white
                        rounded-[36px]
                        md:rounded-[40px]
                        border-[6px]
                        md:border-[8px]
                        border-[#3c4043]
                        shadow-2xl
                        overflow-hidden
                        flex flex-col
                        items-center
                        transition-transform hover:-translate-y-2
                        "
                        >


                            <div className="absolute top-0 w-28 h-7 bg-[#3c4043] rounded-b-2xl z-20"></div>
                            <div className="w-full h-full flex flex-col items-center pt-16 p-6">
                                <div className="w-16 h-16 md:w-20 md:h-20 bg-black flex items-center justify-center mb-8 shadow-2xl ring-4 ring-green-50">
                                    <Image
                                        src={image}
                                        alt="App Icon"
                                        className="w-full h-full object-contain"
                                    />
                                </div>
                                <h3 className="font-black text-lg md:text-xl mb-1 text-[#202124]">
                                    Go4Baji
                                </h3>
                                <p className="text-xs text-[#5f6368] font-medium mb-12">
                                    Professional Gaming
                                </p>
                                {/* loading animation */}
                                <div className="w-full space-y-4 mb-16 px-2">
                                    <div className="h-2.5 w-full bg-gray-100 rounded-full relative overflow-hidden">
                                        <motion.div
                                            initial={{ x: "-100%" }}
                                            animate={{ x: "100%" }}
                                            transition={{
                                                repeat: Infinity,
                                                duration: 1.5,
                                                ease: "linear",
                                            }}
                                            className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-200 to-transparent w-full"
                                        />
                                    </div>
                                    <div className="h-2.5 w-4/5 bg-gray-100 rounded-full relative overflow-hidden">
                                        <motion.div
                                            initial={{ x: "-100%" }}
                                            animate={{ x: "100%" }}
                                            transition={{
                                                repeat: Infinity,
                                                duration: 1.5,
                                                ease: "linear",
                                                delay: 0.2,
                                            }}
                                            className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-200 to-transparent w-full"
                                        />
                                    </div>
                                </div>
                                <button className="bg-green-600 text-white text-sm px-8 md:px-12 py-3 rounded-xl font-black shadow-xl shadow-green-200 active:scale-95 hover:brightness-110 transition-all">
                                    ইন্সটল
                                </button>
                            </div>
                            <div className="absolute bottom-4 w-16 h-1.5 bg-gray-200 rounded-full"></div>
                        </div>
                    </div>
                </div>

            </div>
            
        </div>
    );
};

export default QR;