import { Button } from "@/components/ui/button";
import { ChevronRight, Code2, Zap, Smartphone, ShoppingCart, TrendingUp, Award, Users, ArrowRight, ChevronLeft, ChevronDown } from "lucide-react";
import { useState, useEffect } from "react";

/**
 * Design Philosophy: Dark Mode Premium Tech Agency
 * - Black background (#000000) with blue (#2563EB) and orange (#F97316) accents
 * - Minimalist, modern, professional aesthetic
 * - Smooth animations and transitions with Framer Motion
 * - Asymmetric layouts with ample whitespace
 * - Scroll-triggered animations and parallax effects
 */

export default function Home() {
  const [activeService, setActiveService] = useState(0);
  const [activeProject, setActiveProject] = useState(0);
  const [showScrollTop, setShowScrollTop] = useState(false);
  const [visibleSections, setVisibleSections] = useState<Record<string, boolean>>({});

  useEffect(() => {
    const handleScroll = () => {
      setShowScrollTop(window.scrollY > 500);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const services = [
    {
      title: "Web Tasarım & Yazılım",
      description: "Responsive, hızlı, SEO uyumlu web siteleri ve özel yazılım çözümleri.",
      icon: Code2,
      color: "text-blue-400",
    },
    {
      title: "Yazılım Ürünleri",
      description: "SaaS, mobil uygulamalar ve kurumsal yazılım çözümleri.",
      icon: Zap,
      color: "text-orange-400",
    },
    {
      title: "Mobil Uygulamalar",
      description: "iOS ve Android için native ve cross-platform uygulamalar.",
      icon: Smartphone,
      color: "text-blue-400",
    },
    {
      title: "E-ticaret Çözümleri",
      description: "Özel e-ticaret siteleri, pazaryeri entegrasyonları, ödeme sistemleri.",
      icon: ShoppingCart,
      color: "text-orange-400",
    },
    {
      title: "SEO & Dijital Reklam",
      description: "Google'da ilk sırada görünün. Google Ads, Meta reklamları, organik SEO.",
      icon: TrendingUp,
      color: "text-blue-400",
    },
    {
      title: "Kurumsal Kimlik & Tasarım",
      description: "Logo, kartvizit, katalog, ambalaj – markanızı güçlendiren tasarımlar.",
      icon: Award,
      color: "text-orange-400",
    },
  ];

  const projects = [
    {
      title: "Sub-Zero Yetkili Servisi",
      description: "Dünyanın en prestijli soğutma markası için geliştirilen; lüks segment standartlarında kullanıcı deneyimi ve tam entegre CRM.",
      image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663248831776/F8YdZ57En9QeMJoxbZtWaj/project-showcase-1-WVspus4bH8nsHE9TtHgiGz.webp",
      tech: ["React", "Node.js", "PostgreSQL"],
    },
    {
      title: "Maytag Yetkili Servisi",
      description: "Maytag standartlarını dijitale taşıyan, CRM otomasyonlu, gelişmiş backend mimarisi.",
      image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663248831776/F8YdZ57En9QeMJoxbZtWaj/project-showcase-2-A4gLPWgAjrk7E8Yjy3UD3r.webp",
      tech: ["Next.js", "Python", "MongoDB"],
    },
    {
      title: "Gaggenau Yetkili Servisi",
      description: "Gaggenau markasının lüks standartlarına uygun, yüksek güvenlikli backend ve CRM.",
      image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663248831776/F8YdZ57En9QeMJoxbZtWaj/software-product-1-LgNzAjP3snpsor32dLWUN7.webp",
      tech: ["Vue.js", "Go", "MySQL"],
    },
    {
      title: "Profilo Servis",
      description: "WhatsApp CRM entegreli, SEO uyumlu kurumsal web çözümü.",
      image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663248831776/F8YdZ57En9QeMJoxbZtWaj/software-product-2-J2gJPu2FpJ56448hTyD2Hb.webp",
      tech: ["React", "Firebase", "Twilio"],
    },
  ];

  const softwareProducts = [
    {
      title: "Yelken360",
      subtitle: "Tek Yazılım, Tüm İşletme",
      description: "360 Derece Dijital Yönetim Sistemi - İşletmenizin tüm süreçlerini tek platformda yönetin.",
      image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663248831776/F8YdZ57En9QeMJoxbZtWaj/software-product-1-LgNzAjP3snpsor32dLWUN7.webp",
      features: ["CRM", "Muhasebe", "Depo Yönetimi", "Raporlama"],
    },
    {
      title: "Ulubey Analytics",
      subtitle: "Veri Analitikleri Platformu",
      description: "Gerçek zamanlı verilerinizi analiz edin ve akıllı kararlar alın.",
      image: "https://d2xsxph8kpxj0f.cloudfront.net/310519663248831776/F8YdZ57En9QeMJoxbZtWaj/software-product-2-J2gJPu2FpJ56448hTyD2Hb.webp",
      features: ["Veri Görselleştirme", "Tahmin Analizi", "Raporlama", "API Entegrasyonu"],
    },
  ];

  const stats = [
    { value: "13+", label: "Yıl Deneyim" },
    { value: "250+", label: "Tamamlanan Proje" },
    { value: "35", label: "Uzman Ekip" },
    { value: "8", label: "Ödül" },
  ];

  return (
    <div className="min-h-screen bg-black text-white overflow-x-hidden">
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-black/95 backdrop-blur-md border-b border-gray-800 transition-all duration-300">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-orange-400 bg-clip-text text-transparent hover:scale-110 transition-transform duration-300" style={{ fontFamily: "'Poppins', sans-serif" }}>
            Ulubay
          </div>
          <div className="hidden md:flex items-center gap-8">
            <a href="#hizmetler" className="text-gray-400 hover:text-blue-400 transition duration-300 relative group">
              Hizmetler
              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-400 group-hover:w-full transition-all duration-300" />
            </a>
            <a href="#yazilimlar" className="text-gray-400 hover:text-blue-400 transition duration-300 relative group">
              Yazılımlar
              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-400 group-hover:w-full transition-all duration-300" />
            </a>
            <a href="#projeler" className="text-gray-400 hover:text-blue-400 transition duration-300 relative group">
              Projeler
              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-400 group-hover:w-full transition-all duration-300" />
            </a>
            <a href="#iletisim" className="text-gray-400 hover:text-blue-400 transition duration-300 relative group">
              İletişim
              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-400 group-hover:w-full transition-all duration-300" />
            </a>
          </div>
          <Button className="bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white hover:scale-105 transition-transform duration-300">
            Proje Başlat
          </Button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative py-20 md:py-32 overflow-hidden">
        <div
          className="absolute inset-0 opacity-20 animate-pulse"
          style={{
            backgroundImage: `url('https://d2xsxph8kpxj0f.cloudfront.net/310519663248831776/F8YdZ57En9QeMJoxbZtWaj/dark-hero-bg-8zNm5fZA2vVjYMR2G6SEj9.webp')`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-transparent to-orange-900/20" />

        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl">
            <h1
              className="text-5xl md:text-7xl font-bold mb-6 leading-tight bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent animate-fade-in"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Profesyonel Yazılım, Tasarım, Dijital Reklam
            </h1>
            <p className="text-xl text-gray-300 mb-8 leading-relaxed max-w-2xl animate-fade-in-delay opacity-0" style={{ animation: "fadeInUp 0.8s ease-out 0.2s forwards" }}>
              Markanızı ilgiyle büyütüyor, projelerinize değer katıyoruz. 13 yıldır dijitalde fark yaratıyoruz.
            </p>
            <Button className="bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white px-8 py-6 text-lg rounded-lg flex items-center gap-2 group hover:scale-105 transition-all duration-300 animate-fade-in-delay-2 opacity-0" style={{ animation: "fadeInUp 0.8s ease-out 0.4s forwards" }}>
              Projenizi Konuşalım
              <ChevronRight className="group-hover:translate-x-1 transition" />
            </Button>
          </div>
        </div>

        {/* Stats */}
        <div className="container mx-auto px-4 mt-20 relative z-10">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {stats.map((stat, i) => (
              <div
                key={i}
                className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-6 border border-gray-700 hover:border-blue-500 transition duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/20"
                style={{ animation: `fadeInUp 0.6s ease-out ${0.5 + i * 0.1}s forwards`, opacity: 0 }}
              >
                <div className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-orange-400 bg-clip-text text-transparent mb-2">
                  {stat.value}
                </div>
                <p className="text-gray-400 text-sm md:text-base">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
          <ChevronDown className="w-6 h-6 text-blue-400" />
        </div>
      </section>

      {/* Services Section */}
      <section id="hizmetler" className="py-20 md:py-32 bg-gradient-to-b from-gray-900 to-black">
        <div className="container mx-auto px-4">
          <div className="mb-16">
            <h2
              className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Hizmetlerimiz
            </h2>
            <p className="text-gray-400 text-lg max-w-2xl">
              Markanızın dijital dönüşümü için kapsamlı çözümler sunuyoruz.
            </p>
          </div>

          {/* Services Grid */}
          <div className="relative">
            <div className="grid md:grid-cols-2 gap-6">
              {services.map((service, i) => {
                const Icon = service.icon;
                return (
                  <div
                    key={i}
                    className="group bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-8 border border-gray-700 hover:border-blue-500 transition duration-300 cursor-pointer hover:scale-105 hover:shadow-lg hover:shadow-blue-500/10"
                    onClick={() => setActiveService(i)}
                    style={{ animation: `fadeInUp 0.6s ease-out ${0.2 + i * 0.1}s forwards`, opacity: 0 }}
                  >
                    <Icon className={`w-12 h-12 mb-4 ${service.color} group-hover:scale-110 transition duration-300 group-hover:rotate-12`} />
                    <h3
                      className="text-2xl font-bold text-white mb-3"
                      style={{ fontFamily: "'Poppins', sans-serif" }}
                    >
                      {service.title}
                    </h3>
                    <p className="text-gray-400 leading-relaxed mb-6">
                      {service.description}
                    </p>
                    <a
                      href="#"
                      className="inline-flex items-center gap-2 text-blue-400 hover:text-orange-400 transition duration-300 font-semibold group"
                    >
                      Daha Fazla Bilgi
                      <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition duration-300" />
                    </a>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Software Products Section */}
      <section id="yazilimlar" className="py-20 md:py-32 bg-black">
        <div className="container mx-auto px-4">
          <div className="mb-16">
            <h2
              className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Yazılım Ürünlerimiz
            </h2>
            <p className="text-gray-400 text-lg max-w-2xl">
              İşletmenizi dijitalleştirmek için geliştirdiğimiz modern yazılım çözümleri.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {softwareProducts.map((product, i) => (
              <div
                key={i}
                className="group bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-blue-500 transition duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/10"
                style={{ animation: `fadeInUp 0.6s ease-out ${0.2 + i * 0.2}s forwards`, opacity: 0 }}
              >
                <div className="relative h-64 overflow-hidden">
                  <img
                    src={product.image}
                    alt={product.title}
                    className="w-full h-full object-cover group-hover:scale-110 transition duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
                </div>
                <div className="p-8">
                  <h3
                    className="text-2xl font-bold text-white mb-2"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    {product.title}
                  </h3>
                  <p className="text-orange-400 font-semibold mb-3">{product.subtitle}</p>
                  <p className="text-gray-400 leading-relaxed mb-6">
                    {product.description}
                  </p>
                  <div className="flex flex-wrap gap-2 mb-6">
                    {product.features.map((feature, j) => (
                      <span
                        key={j}
                        className="px-3 py-1 bg-blue-900/30 text-blue-300 rounded-full text-sm border border-blue-700 hover:bg-blue-900/50 transition duration-300"
                      >
                        {feature}
                      </span>
                    ))}
                  </div>
                  <Button className="w-full bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white hover:scale-105 transition-all duration-300">
                    Detayları Gör
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Projects Section */}
      <section id="projeler" className="py-20 md:py-32 bg-gradient-to-b from-gray-900 to-black">
        <div className="container mx-auto px-4">
          <div className="mb-16">
            <h2
              className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Referans Projelerimiz
            </h2>
            <p className="text-gray-400 text-lg max-w-2xl">
              Dünyanın en prestijli markalarıyla çalıştığımız projelere göz atın.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {projects.map((project, i) => (
              <div
                key={i}
                className="group bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-orange-500 transition duration-300 hover:scale-105 hover:shadow-lg hover:shadow-orange-500/10"
                style={{ animation: `fadeInUp 0.6s ease-out ${0.2 + i * 0.15}s forwards`, opacity: 0 }}
              >
                <div className="relative h-64 overflow-hidden">
                  <img
                    src={project.image}
                    alt={project.title}
                    className="w-full h-full object-cover group-hover:scale-110 transition duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
                </div>
                <div className="p-8">
                  <h3
                    className="text-2xl font-bold text-white mb-3"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    {project.title}
                  </h3>
                  <p className="text-gray-400 leading-relaxed mb-6">
                    {project.description}
                  </p>
                  <div className="flex flex-wrap gap-2">
                    {project.tech.map((tech, j) => (
                      <span
                        key={j}
                        className="px-3 py-1 bg-orange-900/30 text-orange-300 rounded-full text-sm border border-orange-700 hover:bg-orange-900/50 transition duration-300"
                      >
                        {tech}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-12 text-center">
            <Button className="bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white px-8 py-6 text-lg hover:scale-105 transition-all duration-300">
              Tüm Referanslarımızı İnceleyin
            </Button>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="iletisim" className="py-20 md:py-32 bg-black border-t border-gray-800">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 gap-12">
            {/* Contact Form */}
            <div>
              <h2
                className="text-4xl md:text-5xl font-bold text-white mb-8"
                style={{ fontFamily: "'Poppins', sans-serif" }}
              >
                İletişim
              </h2>

              <form className="space-y-6">
                <input
                  type="text"
                  placeholder="Adınız"
                  className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none transition duration-300 hover:border-gray-600"
                />
                <input
                  type="email"
                  placeholder="E-posta"
                  className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none transition duration-300 hover:border-gray-600"
                />
                <textarea
                  placeholder="Mesajınız"
                  rows={5}
                  className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none transition duration-300 hover:border-gray-600 resize-none"
                />
                <Button className="w-full bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white py-3 hover:scale-105 transition-all duration-300">
                  Mesaj Gönder
                </Button>
              </form>
            </div>

            {/* Contact Info */}
            <div>
              <h3
                className="text-2xl font-bold text-white mb-8"
                style={{ fontFamily: "'Poppins', sans-serif" }}
              >
                Bize Ulaşın
              </h3>

              <div className="space-y-8">
                <div className="group cursor-pointer">
                  <p className="text-gray-400 text-sm mb-2 group-hover:text-blue-400 transition duration-300">Adres</p>
                  <p className="text-white text-lg group-hover:translate-x-2 transition duration-300">İstanbul, Türkiye</p>
                </div>
                <div className="group cursor-pointer">
                  <p className="text-gray-400 text-sm mb-2 group-hover:text-blue-400 transition duration-300">Telefon</p>
                  <p className="text-white text-lg group-hover:translate-x-2 transition duration-300">+90 (212) 123 45 67</p>
                </div>
                <div className="group cursor-pointer">
                  <p className="text-gray-400 text-sm mb-2 group-hover:text-blue-400 transition duration-300">E-posta</p>
                  <p className="text-white text-lg group-hover:translate-x-2 transition duration-300">info@ulubay.com</p>
                </div>

                {/* Social Media */}
                <div>
                  <p className="text-gray-400 text-sm mb-4">Sosyal Medya</p>
                  <div className="flex gap-4">
                    <a
                      href="#"
                      className="w-10 h-10 bg-gray-900 rounded-lg flex items-center justify-center text-blue-400 hover:bg-blue-600 hover:text-white transition duration-300 hover:scale-110 hover:rotate-12"
                    >
                      f
                    </a>
                    <a
                      href="#"
                      className="w-10 h-10 bg-gray-900 rounded-lg flex items-center justify-center text-blue-400 hover:bg-blue-600 hover:text-white transition duration-300 hover:scale-110 hover:rotate-12"
                    >
                      𝕏
                    </a>
                    <a
                      href="#"
                      className="w-10 h-10 bg-gray-900 rounded-lg flex items-center justify-center text-blue-400 hover:bg-blue-600 hover:text-white transition duration-300 hover:scale-110 hover:rotate-12"
                    >
                      in
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-black border-t border-gray-800 py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8 mb-12">
            <div>
              <div className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-orange-400 bg-clip-text text-transparent mb-4">
                Ulubay
              </div>
              <p className="text-gray-400">Profesyonel yazılım, tasarım ve dijital reklam ajansı.</p>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">Hizmetler</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-blue-400 transition duration-300">Web Tasarım</a></li>
                <li><a href="#" className="hover:text-blue-400 transition duration-300">Yazılım Geliştirme</a></li>
                <li><a href="#" className="hover:text-blue-400 transition duration-300">Mobil Uygulamalar</a></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">Şirket</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-blue-400 transition duration-300">Hakkımızda</a></li>
                <li><a href="#" className="hover:text-blue-400 transition duration-300">Referanslar</a></li>
                <li><a href="#" className="hover:text-blue-400 transition duration-300">Blog</a></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">Yasal</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-blue-400 transition duration-300">Gizlilik Politikası</a></li>
                <li><a href="#" className="hover:text-blue-400 transition duration-300">Kullanım Koşulları</a></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 pt-8 text-center text-gray-400">
            <p>© 2025 Ulubay. Tüm hakları saklıdır.</p>
          </div>
        </div>
      </footer>

      {/* Scroll to Top Button */}
      {showScrollTop && (
        <button
          onClick={scrollToTop}
          className="fixed bottom-8 right-8 w-12 h-12 bg-gradient-to-r from-blue-600 to-blue-500 rounded-full flex items-center justify-center text-white hover:from-blue-700 hover:to-blue-600 transition duration-300 hover:scale-110 z-40 shadow-lg shadow-blue-500/50 animate-bounce"
        >
          <ChevronRight className="w-6 h-6 rotate-[-90deg]" />
        </button>
      )}

      {/* Global Animations */}
      <style>{`
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes fadeInScale {
          from {
            opacity: 0;
            transform: scale(0.95);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }

        .animate-fade-in {
          animation: fadeInUp 0.8s ease-out forwards;
        }

        .animate-fade-in-delay {
          animation: fadeInUp 0.8s ease-out 0.2s forwards;
        }

        .animate-fade-in-delay-2 {
          animation: fadeInUp 0.8s ease-out 0.4s forwards;
        }

        /* Smooth scroll behavior */
        html {
          scroll-behavior: smooth;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
          width: 8px;
        }

        ::-webkit-scrollbar-track {
          background: #000;
        }

        ::-webkit-scrollbar-thumb {
          background: #2563EB;
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: #1d4ed8;
        }
      `}</style>
    </div>
  );
}