import React, { useCallback, useMemo, useRef, useState } from "react";
import { motion } from "framer-motion";
import { UploadCloud, Info, Search, CheckCircle2, XCircle, File } from "lucide-react";

// ------------------------------------------------------------
// Minimal UI primitives (Tailwind-styled)
// ------------------------------------------------------------
const Button = ({ className = "", children, ...props }) => (
  <button
    className={`inline-flex items-center justify-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium shadow-sm ring-1 ring-black/5 hover:shadow-md transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 bg-white/80 hover:bg-white/90 backdrop-blur ${className}`}
    {...props}
  >
    {children}
  </button>
);

const Card = ({ className = "", children }) => (
  <div className={`rounded-3xl border border-white/20 bg-white/10 backdrop-blur-xl shadow-xl ${className}`}>{children}</div>
);

const CardHeader = ({ className = "", children }) => (
  <div className={`flex items-center justify-between p-6 ${className}`}>{children}</div>
);

const CardTitle = ({ className = "", children }) => (
  <h3 className={`text-lg font-semibold ${className}`}>{children}</h3>
);

const CardContent = ({ className = "", children }) => (
  <div className={`p-6 pt-0 ${className}`}>{children}</div>
);

const Badge = ({ children, className = "" }) => (
  <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ring-1 ring-inset ring-white/20 bg-white/10 ${className}`}>{children}</span>
);

// ------------------------------------------------------------
// Data: Master list of accepted extensions (grouped)
// Each item: { ext, platform, desc }
// ------------------------------------------------------------
const EXT_GROUPS = [
  {
    title: "1. EXECUTABLE & INSTALLATION FILES",
    items: [
      { ext: ".exe", platform: "Windows", desc: "Executable application" },
      { ext: ".msi", platform: "Windows", desc: "Microsoft Installer package" },
      { ext: ".app", platform: "macOS/Linux", desc: "Application bundle" },
      { ext: ".bat", platform: "Windows", desc: "Batch script for automation" },
      { ext: ".cmd", platform: "Windows", desc: "Command script" },
      { ext: ".com", platform: "Windows/DOS", desc: "Legacy executable format" },
      { ext: ".scr", platform: "Windows", desc: "Screensaver executable" },
      { ext: ".sh", platform: "Linux/Unix", desc: "Shell script file" },
      { ext: ".run", platform: "Linux", desc: "Self-extracting installer" },
      { ext: ".bin", platform: "All", desc: "Binary executable or firmware" },
      { ext: ".out", platform: "Linux", desc: "Compiled executable output" },
      { ext: ".deb", platform: "Linux", desc: "Debian-based software package" },
      { ext: ".rpm", platform: "Linux", desc: "RedHat Package Manager package" },
      { ext: ".pkg", platform: "macOS/Linux", desc: "Generic installer package" },
      { ext: ".appimage", platform: "Linux", desc: "Portable app executable" },
      { ext: ".wsf", platform: "Windows", desc: "Windows Script File" },
      { ext: ".gadget", platform: "Windows", desc: "Desktop gadget installer" },
    ],
  },
  {
    title: "2. TEXT & DOCUMENT FILES",
    items: [
      { ext: ".txt", platform: "All", desc: "Plain text file" },
      { ext: ".log", platform: "All", desc: "Application/system log file" },
      { ext: ".md", platform: "All", desc: "Markdown documentation" },
      { ext: ".csv", platform: "All", desc: "Comma-Separated Values data" },
      { ext: ".json", platform: "All", desc: "Data format for APIs/config" },
      { ext: ".yaml", platform: "All", desc: "Human-readable config format" },
      { ext: ".yml", platform: "All", desc: "Alternate YAML extension" },
      { ext: ".xml", platform: "All", desc: "Structured markup language" },
      { ext: ".doc", platform: "Windows", desc: "MS Word document (old)" },
      { ext: ".docx", platform: "Windows", desc: "MS Word document (modern)" },
      { ext: ".odt", platform: "Linux", desc: "OpenDocument text file" },
      { ext: ".rtf", platform: "Windows", desc: "Rich Text Format" },
      { ext: ".tex", platform: "All", desc: "LaTeX scientific document" },
      { ext: ".pdf", platform: "All", desc: "Portable Document Format" },
      { ext: ".epub", platform: "All", desc: "eBook format" },
      { ext: ".mobi", platform: "All", desc: "Kindle eBook format" },
      { ext: ".pages", platform: "macOS", desc: "Apple Pages document" },
    ],
  },
  {
    title: "3. IMAGE & GRAPHIC FILES",
    items: [
      { ext: ".jpg", platform: "All", desc: "Compressed image" },
      { ext: ".jpeg", platform: "All", desc: "JPEG image" },
      { ext: ".png", platform: "All", desc: "Lossless image" },
      { ext: ".gif", platform: "All", desc: "Animated/static image" },
      { ext: ".bmp", platform: "Windows", desc: "Bitmap image" },
      { ext: ".tiff", platform: "All", desc: "High-quality image" },
      { ext: ".tif", platform: "All", desc: "TIFF alt extension" },
      { ext: ".webp", platform: "All", desc: "Optimized web image" },
      { ext: ".heic", platform: "macOS/iOS", desc: "High Efficiency Image Codec" },
      { ext: ".ico", platform: "Windows", desc: "Icon file" },
      { ext: ".icns", platform: "macOS", desc: "Mac icon file" },
      { ext: ".svg", platform: "All", desc: "Scalable vector graphics" },
      { ext: ".psd", platform: "Windows", desc: "Photoshop project" },
      { ext: ".ai", platform: "Windows", desc: "Illustrator file" },
      { ext: ".xcf", platform: "Linux", desc: "GIMP project" },
      { ext: ".raw", platform: "All", desc: "Camera RAW data" },
    ],
  },
  {
    title: "4. AUDIO & MUSIC FILES",
    items: [
      { ext: ".mp3", platform: "All", desc: "Compressed audio" },
      { ext: ".wav", platform: "All", desc: "Uncompressed audio" },
      { ext: ".ogg", platform: "Linux/All", desc: "Open-source audio" },
      { ext: ".flac", platform: "All", desc: "Lossless audio" },
      { ext: ".aac", platform: "All", desc: "Advanced Audio Coding" },
      { ext: ".wma", platform: "Windows", desc: "Windows Media Audio" },
      { ext: ".midi", platform: "All", desc: "MIDI data" },
      { ext: ".mid", platform: "All", desc: "MIDI alt extension" },
      { ext: ".m4a", platform: "All", desc: "MPEG-4 audio" },
      { ext: ".opus", platform: "All", desc: "VoIP-optimized codec" },
    ],
  },
  {
    title: "5. VIDEO & MULTIMEDIA FILES",
    items: [
      { ext: ".mp4", platform: "All", desc: "Widely used video" },
      { ext: ".mkv", platform: "All", desc: "Matroska container" },
      { ext: ".avi", platform: "Windows", desc: "Audio Video Interleave" },
      { ext: ".mov", platform: "macOS", desc: "QuickTime video" },
      { ext: ".wmv", platform: "Windows", desc: "Windows Media Video" },
      { ext: ".webm", platform: "All", desc: "Web-optimized video" },
      { ext: ".flv", platform: "All", desc: "Flash Video" },
      { ext: ".mpeg", platform: "All", desc: "MPEG-1/2 video" },
      { ext: ".mpg", platform: "All", desc: "MPEG alt extension" },
      { ext: ".3gp", platform: "All", desc: "Mobile video" },
      { ext: ".m4v", platform: "All", desc: "iTunes video" },
      { ext: ".vob", platform: "All", desc: "DVD video" },
      { ext: ".ts", platform: "All", desc: "MPEG transport stream" },
      { ext: ".f4v", platform: "All", desc: "Adobe Flash MP4 variant" },
    ],
  },
  {
    title: "6. COMPRESSED & ARCHIVE FILES",
    items: [
      { ext: ".zip", platform: "All", desc: "Compressed archive" },
      { ext: ".rar", platform: "All", desc: "RAR archive" },
      { ext: ".7z", platform: "All", desc: "High-compression format" },
      { ext: ".tar", platform: "Linux", desc: "Archive container" },
      { ext: ".gz", platform: "Linux", desc: "Gzip compression" },
      { ext: ".tar.gz", platform: "Linux", desc: "Tar + gzip" },
      { ext: ".bz2", platform: "Linux", desc: "Bzip2-compressed" },
      { ext: ".xz", platform: "Linux", desc: "XZ-compressed" },
      { ext: ".iso", platform: "All", desc: "Disk image" },
      { ext: ".img", platform: "All", desc: "Raw disk image" },
      { ext: ".dmg", platform: "macOS", desc: "Disk image installer" },
      { ext: ".cab", platform: "Windows", desc: "Cabinet archive" },
      { ext: ".arj", platform: "All", desc: "Legacy archive" },
      { ext: ".zst", platform: "Linux", desc: "Zstandard archive" },
    ],
  },
  {
    title: "7. SYSTEM & CONFIGURATION FILES",
    items: [
      { ext: ".dll", platform: "Windows", desc: "Dynamic Link Library" },
      { ext: ".sys", platform: "Windows", desc: "System driver" },
      { ext: ".drv", platform: "Windows", desc: "Legacy driver" },
      { ext: ".ocx", platform: "Windows", desc: "Object linking component" },
      { ext: ".ini", platform: "Windows", desc: "Initialization file" },
      { ext: ".cfg", platform: "All", desc: "App configuration" },
      { ext: ".conf", platform: "Linux", desc: "System configuration" },
      { ext: ".reg", platform: "Windows", desc: "Registry entries backup" },
      { ext: ".hosts", platform: "All", desc: "Hosts file" },
      { ext: ".tmp", platform: "All", desc: "Temporary file" },
      { ext: ".lock", platform: "Linux", desc: "Process lock" },
      { ext: ".swap", platform: "Linux", desc: "Swap memory file" },
      { ext: ".ko", platform: "Linux", desc: "Kernel object module" },
      { ext: ".dmp", platform: "Windows", desc: "Memory dump" },
    ],
  },
  {
    title: "8. PROGRAMMING & DEVELOPMENT FILES",
    items: [
      { ext: ".py", platform: "All", desc: "Python script" },
      { ext: ".pyc", platform: "All", desc: "Compiled Python bytecode" },
      { ext: ".java", platform: "All", desc: "Java source" },
      { ext: ".class", platform: "All", desc: "Compiled Java class" },
      { ext: ".jar", platform: "All", desc: "Java archive" },
      { ext: ".c", platform: "All", desc: "C source" },
      { ext: ".cpp", platform: "All", desc: "C++ source" },
      { ext: ".h", platform: "All", desc: "C/C++ header" },
      { ext: ".cs", platform: "Windows", desc: "C# source" },
      { ext: ".vb", platform: "Windows", desc: "Visual Basic source" },
      { ext: ".js", platform: "All", desc: "JavaScript file" },
      { ext: ".ts", platform: "All", desc: "TypeScript source" },
      { ext: ".jsx", platform: "All", desc: "React JavaScript" },
      { ext: ".tsx", platform: "All", desc: "React TypeScript" },
      { ext: ".html", platform: "All", desc: "HyperText Markup" },
      { ext: ".css", platform: "All", desc: "Stylesheet" },
      { ext: ".php", platform: "All", desc: "PHP script" },
      { ext: ".rb", platform: "All", desc: "Ruby source" },
      { ext: ".go", platform: "All", desc: "Golang source" },
      { ext: ".rs", platform: "All", desc: "Rust source" },
      { ext: ".kt", platform: "All", desc: "Kotlin source" },
      { ext: ".dart", platform: "All", desc: "Flutter/Dart source" },
      { ext: ".json", platform: "All", desc: "Data exchange" },
      { ext: ".sql", platform: "All", desc: "Structured Query Language" },
      { ext: ".db", platform: "All", desc: "Database file" },
      { ext: ".env", platform: "All", desc: "Environment variables" },
    ],
  },
  {
    title: "9. DATABASE & BACKEND FILES",
    items: [
      { ext: ".sqlite", platform: "All", desc: "SQLite database" },
      { ext: ".dbf", platform: "Windows", desc: "dBase database" },
      { ext: ".accdb", platform: "Windows", desc: "MS Access database" },
      { ext: ".mdb", platform: "Windows", desc: "Legacy Access DB" },
      { ext: ".ndf", platform: "Windows", desc: "SQL Server secondary DB" },
      { ext: ".ldf", platform: "Windows", desc: "SQL Server log DB" },
      { ext: ".frm", platform: "Linux", desc: "MySQL/MariaDB schema" },
      { ext: ".ibd", platform: "Linux", desc: "InnoDB table file" },
      { ext: ".mdf", platform: "Windows", desc: "SQL Server primary DB" },
      { ext: ".parquet", platform: "All", desc: "Columnar big data storage" },
      { ext: ".avro", platform: "All", desc: "Big Data Avro" },
    ],
  },
  {
    title: "10. VIRTUAL MACHINES & FIRMWARE FILES",
    items: [
      { ext: ".vmdk", platform: "All", desc: "VMware virtual disk" },
      { ext: ".vdi", platform: "All", desc: "VirtualBox virtual disk" },
      { ext: ".vhd", platform: "Windows", desc: "Hyper-V virtual disk" },
      { ext: ".vhdx", platform: "Windows", desc: "Hyper-V next-gen" },
      { ext: ".ovf", platform: "All", desc: "Open Virtualization Format" },
      { ext: ".ova", platform: "All", desc: "Open Virtual Appliance" },
      { ext: ".qcow2", platform: "Linux", desc: "QEMU/KVM disk image" },
      { ext: ".rom", platform: "All", desc: "Firmware ROM image" },
      { ext: ".bin", platform: "All", desc: "BIOS/firmware dump" },
      { ext: ".efi", platform: "All", desc: "UEFI bootloader" },
    ],
  },
  {
    title: "11. SPECIALIZED & MISCELLANEOUS FILES",
    items: [
      { ext: ".ics", platform: "All", desc: "Calendar event" },
      { ext: ".vcf", platform: "All", desc: "Virtual Contact File" },
      { ext: ".ttf", platform: "All", desc: "TrueType font" },
      { ext: ".otf", platform: "All", desc: "OpenType font" },
      { ext: ".fon", platform: "Windows", desc: "Legacy font" },
      { ext: ".srt", platform: "All", desc: "Subtitle file" },
      { ext: ".ass", platform: "All", desc: "Advanced subtitle" },
      { ext: ".cue", platform: "All", desc: "Disk image cue sheet" },
      { ext: ".nfo", platform: "Windows", desc: "Info file" },
      { ext: ".sha1", platform: "All", desc: "Checksum file" },
      { ext: ".pem", platform: "All", desc: "SSL cert/private key" },
      { ext: ".pfx", platform: "All", desc: "Encrypted cert container" },
      { ext: ".key", platform: "All", desc: "Software license key" },
      { ext: ".lic", platform: "All", desc: "License file" },
      { ext: ".sig", platform: "All", desc: "Digital signature" },
    ],
  },
];

// Build a unique set of extensions for validation & <input accept>
const ALL_EXTS = Array.from(
  new Set(
    EXT_GROUPS.flatMap((g) => g.items.map((i) => i.ext.toLowerCase()))
  )
).sort();

// ------------------------------------------------------------
// Helper: pretty file size
// ------------------------------------------------------------
const prettyBytes = (num) => {
  if (!Number.isFinite(num)) return "-";
  const units = ["B", "KB", "MB", "GB", "TB"];
  let i = 0;
  while (num >= 1024 && i < units.length - 1) {
    num /= 1024;
    i++;
  }
  return `${num.toFixed(num < 10 && i > 0 ? 1 : 0)} ${units[i]}`;
};

// ------------------------------------------------------------
// Component: Filebin.pro Homepage
// ------------------------------------------------------------
export default function FilebinProHome() {
  const [files, setFiles] = useState([]);
  const [dragActive, setDragActive] = useState(false);
  const [showList, setShowList] = useState(false);
  const [query, setQuery] = useState("");
  const inputRef = useRef(null);

  const acceptAttr = useMemo(() => ALL_EXTS.join(","), []);

  const onFiles = useCallback((fileList) => {
    const toArray = Array.from(fileList || []);
    if (!toArray.length) return;

    const prepared = toArray.map((f) => {
      const ext = (f.name.match(/\.[^.]+$/)?.[0] || "").toLowerCase();
      const allowed = ext && ALL_EXTS.includes(ext);
      return {
        id: `${f.name}-${f.size}-${Math.random().toString(36).slice(2, 7)}`,
        file: f,
        name: f.name,
        size: f.size,
        type: f.type,
        ext,
        allowed,
        progress: 0,
        status: allowed ? "uploading" : "blocked",
      };
    });

    setFiles((prev) => [...prepared, ...prev]);

    // Simulate upload progress for allowed files
    prepared.forEach((item) => {
      if (!item.allowed) return;
      const tick = () => {
        setFiles((curr) =>
          curr.map((c) =>
            c.id === item.id
              ? { ...c, progress: Math.min(100, c.progress + Math.random() * 18 + 7), status: c.progress >= 99 ? "done" : "uploading" }
              : c
          )
        );
      };
      const interval = setInterval(() => {
        tick();
      }, 250);
      setTimeout(() => clearInterval(interval), 2600 + Math.random() * 1200);
    });
  }, []);

  const onDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
    onFiles(e.dataTransfer.files);
  };

  const onDragOver = (e) => {
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = "copy";
    if (!dragActive) setDragActive(true);
  };

  const onDragLeave = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
  };

  const filteredGroups = useMemo(() => {
    if (!query.trim()) return EXT_GROUPS;
    const q = query.toLowerCase();
    return EXT_GROUPS.map((g) => ({
      ...g,
      items: g.items.filter(
        (i) => i.ext.toLowerCase().includes(q) || i.platform.toLowerCase().includes(q) || i.desc.toLowerCase().includes(q)
      ),
    })).filter((g) => g.items.length > 0);
  }, [query]);

  return (
    <div className="relative min-h-screen w-full overflow-x-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-zinc-900 text-white">
      {/* Decorative gradients */}
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -top-24 -left-24 h-72 w-72 rounded-full bg-fuchsia-500/25 blur-3xl" />
        <div className="absolute -bottom-32 -right-20 h-80 w-80 rounded-full bg-cyan-400/20 blur-3xl" />
        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 h-96 w-[42rem] rounded-[50%] bg-indigo-500/10 blur-3xl" />
      </div>

      {/* Header */}
      <header className="relative mx-auto flex max-w-7xl items-center justify-between px-6 py-8">
        <div className="flex items-center gap-3">
          <div className="grid h-10 w-10 place-items-center rounded-2xl bg-white/10 ring-1 ring-white/15">
            <UploadCloud className="h-5 w-5" />
          </div>
          <div>
            <h1 className="text-2xl font-bold tracking-tight">
              <span className="bg-gradient-to-r from-white via-fuchsia-100 to-cyan-100 bg-clip-text text-transparent">Filebin</span>
              <span className="text-fuchsia-300">.pro</span>
            </h1>
            <p className="text-xs text-white/60">Fast • Private • Effortless uploads</p>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <Button onClick={() => setShowList(true)} className="bg-white/90 text-slate-900 hover:bg-white">
            <Info className="h-4 w-4" />
            What extensions do we accept?
          </Button>
          <Button className="hidden md:inline-flex">Sign in</Button>
        </div>
      </header>

      {/* Hero / Uploader */}
      <main className="relative mx-auto grid max-w-7xl grid-cols-1 gap-8 px-6 pb-24">
        <section className="grid grid-cols-1 items-start gap-6 lg:grid-cols-3">
          {/* Dropzone */}
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="col-span-2"
          >
            <Card>
              <CardHeader className="items-start gap-4">
                <div>
                  <h2 className="text-2xl font-semibold">Upload your files here</h2>
                  <p className="mt-1 text-sm text-white/70">Drag & drop anywhere inside the panel, or click to browse.</p>
                </div>
                <div className="flex items-center gap-2">
                  <Badge>.zip</Badge>
                  <Badge>.rar</Badge>
                  <Badge>.txt</Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div
                  onDrop={onDrop}
                  onDragOver={onDragOver}
                  onDragLeave={onDragLeave}
                  onClick={() => inputRef.current?.click()}
                  className={`group relative grid cursor-pointer place-items-center rounded-2xl border-2 border-dashed p-10 transition-all ${dragActive ? "border-fuchsia-400/70 bg-fuchsia-400/5" : "border-white/20 hover:border-white/30"}`}
                >
                  <div className="flex flex-col items-center text-center">
                    <UploadCloud className="mb-3 h-10 w-10 text-white/80" />
                    <p className="text-base font-medium">Drop files to upload</p>
                    <p className="mt-1 text-xs text-white/60">or click to choose from your device</p>
                    <p className="mt-3 text-xs text-white/50">Accepted: {ALL_EXTS.length}+ extensions</p>
                  </div>
                  <input
                    ref={inputRef}
                    type="file"
                    multiple
                    accept={acceptAttr}
                    className="hidden"
                    onChange={(e) => onFiles(e.target.files)}
                  />
                </div>

                {/* Upload queue */}
                {files.length > 0 && (
                  <div className="mt-6 space-y-3">
                    {files.map((f) => (
                      <div
                        key={f.id}
                        className="flex items-center gap-4 rounded-xl border border-white/10 bg-white/5 p-3"
                      >
                        <div className="grid h-10 w-10 place-items-center rounded-xl bg-white/10">
                          {f.allowed ? <File className="h-5 w-5" /> : <XCircle className="h-5 w-5 text-rose-300" />}
                        </div>
                        <div className="min-w-0 flex-1">
                          <div className="flex items-center justify-between gap-3">
                            <p className="truncate text-sm font-medium">{f.name}</p>
                            <span className="text-xs text-white/60">{prettyBytes(f.size)}</span>
                          </div>
                          <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-white/10">
                            <div
                              className={`h-full transition-all ${f.allowed ? "bg-gradient-to-r from-fuchsia-400 to-cyan-400" : "bg-rose-400"}`}
                              style={{ width: `${f.allowed ? Math.min(100, f.progress) : 100}%` }}
                            />
                          </div>
                          <p className={`mt-1 text-xs ${f.allowed ? "text-white/60" : "text-rose-200"}`}>
                            {f.allowed
                              ? f.progress >= 100
                                ? "Uploaded"
                                : "Uploading..."
                              : `Blocked: .${f.name.split('.').pop()?.toLowerCase()} is not in the allowed list`}
                          </p>
                        </div>
                        {f.allowed && f.progress >= 100 && (
                          <CheckCircle2 className="h-5 w-5 text-emerald-300" />
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </motion.div>

          {/* Right rail: Feature highlights */}
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.05 }}
          >
            <Card className="sticky top-6">
              <CardHeader>
                <CardTitle>Why Filebin.pro?</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <FeatureRow title="One‑click uploads" desc="Drag & drop or browse — we handle the rest automatically." />
                <FeatureRow title="Privacy‑first" desc="No tracking pixels. Your files, your links." />
                <FeatureRow title="Blazing fast" desc="Optimized edge uploads with smart retries." />
                <FeatureRow title="300+ formats" desc={`From .zip to .qcow2 — ${ALL_EXTS.length}+ extensions accepted.`} />
                <div className="pt-2">
                  <Button onClick={() => setShowList(true)} className="w-full bg-white/90 text-slate-900 hover:bg-white">
                    <Info className="h-4 w-4" />
                    What extensions do we accept?
                  </Button>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </section>

        {/* Footer */}
        <footer className="mt-8 flex flex-col items-center justify-between gap-4 border-t border-white/10 py-8 text-xs text-white/50 md:flex-row">
          <p>© {new Date().getFullYear()} Filebin.pro — All rights reserved.</p>
          <div className="flex items-center gap-3">
            <a className="hover:text-white/80" href="#">Terms</a>
            <span>•</span>
            <a className="hover:text-white/80" href="#">Privacy</a>
            <span>•</span>
            <a className="hover:text-white/80" href="#">Contact</a>
          </div>
        </footer>
      </main>

      {/* Extensions Modal */}
      {showList && (
        <div className="fixed inset-0 z-50 grid place-items-center bg-black/60 p-6" onClick={() => setShowList(false)}>
          <div
            className="max-h-[85vh] w-full max-w-5xl overflow-hidden rounded-3xl border border-white/15 bg-gradient-to-b from-slate-900/95 to-slate-900/80 backdrop-blur-xl shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center justify-between gap-4 border-b border-white/10 p-6">
              <div>
                <h3 className="text-xl font-semibold">MASTER LIST — 300+ Common Windows & Linux File Extensions</h3>
                <p className="mt-1 text-xs text-white/60">Showing {ALL_EXTS.length} extensions accepted by Filebin.pro</p>
              </div>
              <div className="flex items-center gap-2">
                <div className="relative">
                  <Search className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-white/50" />
                  <input
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="Search by .ext, platform, or description..."
                    className="w-72 rounded-xl border border-white/10 bg-white/5 pl-9 pr-3 py-2 text-sm outline-none placeholder:text-white/40 focus:border-white/30"
                  />
                </div>
                <Button onClick={() => setShowList(false)}>Close</Button>
              </div>
            </div>

            <div className="max-h-[65vh] overflow-y-auto p-6">
              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                {filteredGroups.map((group) => (
                  <Card key={group.title} className="bg-white/[0.04]">
                    <CardHeader>
                      <CardTitle className="text-base">{group.title}</CardTitle>
                    </CardHeader>
                    <CardContent className="pt-2">
                      <ul className="space-y-2">
                        {group.items.map((item) => (
                          <li key={`${group.title}-${item.ext}`} className="flex items-start justify-between gap-3 rounded-xl bg-white/5 p-3">
                            <div>
                              <div className="flex items-center gap-2">
                                <code className="rounded-md bg-black/40 px-2 py-0.5 text-sm">{item.ext}</code>
                                <span className="text-xs text-white/60">{item.platform}</span>
                              </div>
                              <p className="mt-1 text-xs text-white/70">{item.desc}</p>
                            </div>
                            <Badge className="mt-1">Accepted</Badge>
                          </li>
                        ))}
                      </ul>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

            <div className="border-t border-white/10 p-6 text-right text-xs text-white/60">
              Tip: You can filter (e.g., ".iso", "Linux", "video").
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function FeatureRow({ title, desc }) {
  return (
    <div className="flex items-start gap-3">
      <div className="mt-0.5 h-2 w-2 shrink-0 rounded-full bg-gradient-to-r from-fuchsia-400 to-cyan-400" />
      <div>
        <p className="text-sm font-medium">{title}</p>
        <p className="text-xs text-white/70">{desc}</p>
      </div>
    </div>
  );
}