"use client";

import React from "react";
import Image from "next/image";
import { FaStar, FaShareAlt, FaPlus, FaCheckCircle, FaChevronRight, FaArrowRight, FaSearch, FaQuestionCircle, FaUserCircle } from "react-icons/fa";
import { MdVerifiedUser, MdInfo, MdSecurity, MdDevices } from "react-icons/md";
import { motion } from "framer-motion";
    import image from "@/assists/loading-frame-1.png"
import styles from "../download/styles.module.css";

import Navbar from "@/components/Navbar/Navbar";
import Hero from "@/components/Hero/Hero";
import Banner from "@/components/Banner/Banner";

const DownloadPage = () => {
    return (
        <div className="bg-white min-h-screen font-sans text-[#202124]">
            {/* Navbar */}
            <Navbar></Navbar>

            <main className={`${styles.container} pt-20 pb-16`}>
                {/* Hero Section */}
                <Hero></Hero>

                {/* Media Section: QR and Mockups */}


                {/* Screenshots Section */}
                <Banner></Banner>

                {/* About Section */}
                <section className="mt-8 border-b border-[#dadce0] pb-8">
                    <div className={styles.sectionTitle}>
                        এই অ্যাপ সম্পর্কে <FaArrowRight className="w-4 h-4 text-[#5f6368]" />
                    </div>
                    <p className="text-sm text-[#5f6368] leading-relaxed mb-6">
                        Go4Baji একটি ট্রাস্টেড ও নিরাপদ অনলাইন গেমিং অ্যাপ, যেখানে রয়েছে প্রিমিয়াম স্লট, লাইভ ক্যাসিনো এবং স্পোর্টস বিনোদন। খুব সহজ প্রক্রিয়ায়, দ্রুত ডিপোজিট এবং ইনস্ট্যান্ট উইথড্রয়াল—সবকিছু এক বিশ্বস্ত প্ল্যাটফর্মে।
                    </p>
                    <div className="mb-6">
                        <p className="font-medium text-sm mb-1">আপডেট তারিখ</p>
                        <p className="text-sm text-[#5f6368]">৫ ডিজে, ২০২৪</p>
                    </div>
                    <div className="flex flex-wrap gap-2">
                        {["bangladesh", "jilisilot", "crazytime", "cricket"].map(tag => (
                            <span key={tag} className={styles.chip}>{tag}</span>
                        ))}
                    </div>
                </section>

                {/* Data Safety Section */}
                <section className="mt-8 border-b border-[#dadce0] pb-8">
                    <div className={styles.sectionTitle}>
                        ডেটা সুরক্ষা <FaArrowRight className="w-4 h-4 text-[#5f6368]" />
                    </div>
                    <p className="text-sm text-[#5f6368] leading-relaxed mb-6">
                        ডেভেলপাররা কীভাবে আপনার ডেটা সংগ্রহ ও শেয়ার করে তা বোঝার মাধ্যমে সুরক্ষা শুরু হয়। ডেটা গোপনীয়তা ও সুরক্ষা অনুশীলন আপনার ব্যবহার, অঞ্চল এবং বয়সের ভিত্তিতে ভিন্ন হতে পারে। ডেভেলপার এই তথ্য সরবরাহ করেছে এবং সময়ের সাথে এটি আপডেট করতে পারে।
                    </p>
                    <div className="bg-[#f8f9fa] border border-[#dadce0] rounded-lg p-6 space-y-4">
                        <div className="flex gap-4 items-start">
                            <FaShareAlt className="w-5 h-5 text-[#5f6368] mt-1 rotate-180" />
                            <div>
                                <p className="text-sm font-medium">তৃতীয় পক্ষের সাথে ডেটা শেয়ার করা হয় না</p>
                                <p className="text-xs text-[#5f6368]">ডেভেলপার এই তথ্য শেয়ার করার ঘোষণা দেয়নি</p>
                            </div>
                        </div>
                        <div className="flex gap-4 items-start">
                            <MdSecurity className="w-5 h-5 text-[#5f6368] mt-1" />
                            <div>
                                <p className="text-sm font-medium">কোনো ডেটা সংগ্রহ করা হয় না</p>
                                <p className="text-xs text-[#5f6368]">ডেভেলপার কোনো ডেটা সংগ্রহের দাবি করেনি</p>
                            </div>
                        </div>
                        <div className="flex gap-4 items-start">
                            <MdInfo className="w-5 h-5 text-[#5f6368] mt-1" />
                            <div>
                                <p className="text-sm font-medium">আপনি ডেটা মুছে ফেলার অনুরোধ করতে পারেন</p>
                            </div>
                        </div>
                        <button className={`${styles.googlePlayGreen} text-sm font-bold pt-2`}>বিস্তারিত দেখুন</button>
                    </div>
                </section>

                {/* Ratings Section */}
                <section className="mt-8">
                    <div className={styles.sectionTitle}>
                        রেটিং ও রিভিউ <FaArrowRight className="w-4 h-4 text-[#5f6368]" />
                    </div>
                    <p className="text-xs text-[#5f6368] mb-6 flex items-center gap-1">
                        রেটিং এবং রিভিউ যাচাইকৃত <span className="p-0.5 bg-[#f8f9fa] rounded-full"><MdInfo className="w-3 h-3" /></span>
                    </p>

                    <div className="flex gap-4 mb-8">
                        <button className="px-4 py-1.5 rounded-full border border-[#01875f] bg-[#e6f4ea] text-[#01875f] text-sm font-medium flex items-center gap-2">
                            <MdDevices className="w-4 h-4" /> ফোন
                        </button>
                        <button className="px-4 py-1.5 rounded-full border border-[#dadce0] text-[#5f6368] text-sm font-medium flex items-center gap-2">
                            <MdDevices className="w-4 h-4" /> ট্যাবলেট
                        </button>
                    </div>

                    <div className="flex flex-col md:flex-row gap-8 items-center mb-12">
                        <div className="text-center md:text-left">
                            <div className="text-6xl font-normal mb-1">4.9</div>
                            <div className="flex justify-center md:justify-start gap-0.5 text-[#01875f] mb-1">
                                {[...Array(5)].map((_, i) => <FaStar key={i} className="w-3.5 h-3.5" />)}
                            </div>
                            <p className="text-xs text-[#5f6368]">37.6k রিভিউ</p>
                        </div>

                        <div className="flex-grow w-full max-w-sm space-y-1">
                            {[5, 4, 3, 2, 1].map(num => (
                                <div key={num} className="flex items-center gap-4">
                                    <span className="text-xs w-2">{num}</span>
                                    <div className={styles.ratingBar}>
                                        <div className={styles.ratingProgress} style={{ width: num === 5 ? '92%' : num === 4 ? '5%' : '1%' }}></div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Individual Reviews */}
                    <div className="space-y-8">
                        <Review
                            name="খেলোয়াড়"
                            rating={5}
                            date="১৫ ডিজে, ২০২৪"
                            content="এটা অত্যন্ত সুবিধাজনক এবং খেলাধুলা করার জন্য অসাধারণ, বাজারের অন্য অ্যাপের তুলনায় অনেক ভালো রয়েছে।"
                        />
                        <Review
                            name="মিলিতো"
                            rating={5}
                            date="১৪ ডিজে, ২০২৪"
                            content="এটি অনেক ভালো এবং আমি ব্যবহার করছি, ইন্টারফেস অ্যাপ সহজেবোধ্য আর অপশন গুলোতেও আছে, ফলানো খুব দ্রুত। সম্পূর্ণ আমার একাউন্টের জন্য নিরাপদ।"
                        />
                    </div>

                    <button className={`${styles.googlePlayGreen} text-sm font-bold mt-8`}>সমস্ত রিভিউ দেখুন</button>
                </section>
            </main>

            {/* Footer */}
            <footer className="bg-white border-[#dadce0] pt-12 pb-8">
                <div className={styles.container}>
                    <div className="grid grid-cols-1 gap-8 text-[#5f6368] mb-12">
                        <div>
                            <ul className="space-y-3 text-sm">
                                <li><a href="#" className="hover:underline">Play Pass</a></li>
                                <li><a href="#" className="hover:underline">Play Points</a></li>
                                <li><a href="#" className="hover:underline">গিফট কার্ড</a></li>
                                <li><a href="#" className="hover:underline">রিডিম</a></li>
                                <li><a href="#" className="hover:underline">ফেরত নীতি </a></li>
                            </ul>
                        </div>
                        <div>
                            <ul className="space-y-3 text-sm">
                                <li><a href="#" className="hover:underline">শিশু ও পরিবার </a></li>
                                <li><a href="#" className="hover:underline">প্যারেন্ট গাইড</a></li>
                                <li><a href="#" className="hover:underline">পরিবার ভাগাভাগি </a></li>
                            </ul>
                        </div>
                    </div>
                    <div className="grid grid-cols-3 md:grid-cols-5 gap-6 pt-8  border-[#dadce0] text-xs text-[#5f6368]">
                        <a href="#" className="hover:underline">সেবার শর্তাবলি</a>
                        <a href="#" className="hover:underline">গোপনীয়তা</a>
                        <a href="#" className="hover:underline">Apple Play সম্পর্কে</a>
                        <a href="#" className="hover:underline">ডেভেলপার </a>
                        <a href="#" className="hover:underline">Apple স্টোর</a>
                    </div>
                </div>
            </footer>
        </div>
    );
};

const Review = ({ name, rating, date, content }: { name: string, rating: number, date: string, content: string }) => (
    <div className="group">
        <div className="flex justify-between items-center mb-4">
            <div className="flex items-center gap-4">
                <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-gray-200 to-gray-400 flex items-center justify-center text-xs font-bold text-white">
                    {name[0]}
                </div>
                <span className="text-sm font-medium">{name}</span>
            </div>
            <button className="text-[#5f6368] opacity-0 group-hover:opacity-100 transition-opacity">
                <MdInfo className="w-5 h-5" />
            </button>
        </div>
        <div className="flex items-center gap-3 mb-2">
            <div className="flex gap-0.5 text-[#01875f]">
                {[...Array(5)].map((_, i) => <FaStar key={i} className="w-2.5 h-2.5" />)}
            </div>
            <span className="text-xs text-[#5f6368]">{date}</span>
        </div>
        <p className="text-sm text-[#5f6368] leading-relaxed mb-4">{content}</p>
        <div className="flex items-center gap-4">
            <span className="text-xs text-[#5f6368]">এটি কি আপনার কাজে লেগেছে?</span>
            <div className="flex gap-2">
                <button className="px-3 py-1 rounded-full border border-[#dadce0] text-xs hover:bg-gray-50">হ্যাঁ</button>
                <button className="px-3 py-1 rounded-full border border-[#dadce0] text-xs hover:bg-gray-50">না</button>
            </div>
        </div>
    </div>
);

export default DownloadPage;
