"use client"
import image from "@/assists/loading-frame-1.png"
import Image from 'next/image';
import React from 'react';
import { FaPlus, FaShareAlt, FaStar } from "react-icons/fa";
import { MdDevices, MdVerifiedUser } from "react-icons/md";
import { motion } from "framer-motion";
import { CiBookmarkPlus } from "react-icons/ci";

const Hero = () => {
    return (

        <section>

            <div className="flex flex-row gap-8 items-start mb-12 pt-5">
                {/* App Icon */}
                <div className="relative">
                    <div className={`appIcon bg-black flex items-center justify-center overflow-hidden`}>
                        {/* <div className="text-green-500 text-6xl font-bold">b</div> */}
                        <Image src={image} alt="App Icon" className="w-full h-full object-contain" />
                        {/* In a real scenario, this would be <Image src="/logo.png" /> */}
                    </div>
                </div>

                <div className="flex-grow ">
                    <div className="flex justify-between items-start">
                        <div>
                            <h1 className="text-3xl md:text-4xl font-bold mb-1">Go4Baji</h1>
                            <p className={`googlePlayGreen font-medium mb-1`} >go4baji.vip</p>
                            <p className="text-sm text-[#5f6368] flex items-center gap-1">
                                <MdVerifiedUser className="w-4 h-4" /> Play Protect দ্বারা যাচাইকৃত
                            </p>
                        </div>
                    </div>
                </div>

            </div>

            {/* Stats Bar */}
            <div className="flex gap-8 mt-6 border-b border-[#dadce0] pb-4 overflow-x-auto no-scrollbar">
                <div className="text-center min-w-[70px]">
                    <div className="font-bold flex items-center justify-center gap-0.5">
                        4.9 <FaStar className="w-2.5 h-2.5" />
                    </div>
                    <p className="text-xs text-[#5f6368]">37.6k রিভিউ</p>
                </div>
                <div className="w-[1px] bg-[#dadce0] h-8 self-center"></div>
                <div className="text-center min-w-[70px]">
                    <div className="font-bold">100 k+</div>
                    <p className="text-xs text-[#5f6368]">ডাউনলোড</p>
                </div>
                <div className="w-[1px] bg-[#dadce0] h-8 self-center"></div>
                <div className="text-center min-w-[70px]">
                    <div className="flex justify-center bg-[#f8f9fa] rounded p-1 mb-1">
                        <MdDevices className="w-4 h-4" />
                    </div>
                    <p className="text-xs text-[#5f6368]">Featured</p>
                </div>
            </div>


            {/* QR Code Phone */}

            

            <div className="mt-8 flex flex-col gap-4">
                <div
                    onClick={() => window.location.href = '/go4baji.apk'}
                    className={`googlePlayBgGreen w-full  px-12  py-2  rounded-md text-center text-yellow-400 text-base`}
                >
                    <p>
                        <motion.span
                            animate={{ scale: [1, 1.2, 1] }}
                            transition={{ repeat: Infinity, duration: 1.5 }}
                            className="mr-2"
                        >
                            ⚡
                        </motion.span>
                        দ্রুত ইন্সটল করুন
                    </p>
                    <div className="text-[10px] opacity-80 text-white block ml-2">১০ সেকেন্ডের মধ্যে ডাউনলোড করুন</div>
                </div>

                <div className="flex justify-center gap-4">
                    <button className={`outlinedButton flex-1 md:flex-none`}>
                        <FaShareAlt className="w-4 h-4" /> শেয়ার
                    </button>
                    <button className={`outlinedButton flex-1 md:flex-none`}>
                        <CiBookmarkPlus className="w-5 h-5" /> উইশলিস্টে যোগ করুন
                    </button>
                </div>
            </div>
        </section>


    );
};

export default Hero;