"use client";

import { Play, Instagram, Twitter, Youtube, Send, Mail } from "lucide-react";
import { useAppStore, type ViewName } from "@/lib/store";

const COLUMNS: { title: string; links: { label: string; view?: ViewName }[] }[] = [
  {
    title: "کاوش",
    links: [
      { label: "خانه", view: "home" },
      { label: "فیلم‌ها", view: "movies" },
      { label: "سریال‌ها", view: "series" },
      { label: "تلویزیون زنده", view: "live" },
      { label: "موزیک", view: "music" },
    ],
  },
  {
    title: "حساب کاربری",
    links: [
      { label: "پروفایل من", view: "profile" },
      { label: "اشتراک‌ها", view: "subscription" },
      { label: "علاقه‌مندی‌ها", view: "favorites" },
      { label: "تاریخچه تماشا", view: "history" },
      { label: "پشتیبانی", view: "support" },
    ],
  },
  {
    title: "شرکت",
    links: [
      { label: "درباره PeepBox" },
      { label: "تماس با ما" },
      { label: "فرصت‌های شغلی" },
      { label: "وبلاگ" },
      { label: "همکاری با ما" },
    ],
  },
  {
    title: "قوانین",
    links: [
      { label: "شرایط استفاده" },
      { label: "حریم خصوصی" },
      { label: "خط‌مشی محتوا" },
      { label: "حق نشر" },
      { label: "گزارش تخلف" },
    ],
  },
];

export function Footer() {
  const navigate = useAppStore((s) => s.navigate);

  return (
    <footer className="mt-auto border-t border-border bg-bg2/60 backdrop-blur">
      <div className="px-4 md:px-8 py-10">
        <div className="grid grid-cols-2 md:grid-cols-6 gap-8 mb-8">
          <div className="col-span-2">
            <button onClick={() => navigate("home")} className="flex items-center gap-2 mb-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-brand shadow-glow">
                <Play className="h-5 w-5 text-white fill-white" />
              </div>
              <span className="text-xl font-black">
                <span className="text-gradient">PEEP</span>
                <span>BOX</span>
              </span>
            </button>
            <p className="text-sm text-muted-foreground leading-relaxed max-w-xs mb-4">
              پلتفرم پخش آنلاین فیلم، سریال، تلویزیون زنده و موسیقی با کیفیت 4K. سرگرمی، بدون مرز.
            </p>
            <div className="flex gap-2">
              {[Instagram, Twitter, Youtube, Send].map((Icon, i) => (
                <a
                  key={i}
                  href="#"
                  onClick={(e) => e.preventDefault()}
                  className="flex h-9 w-9 items-center justify-center rounded-full glass hover:bg-primary/20 transition"
                  aria-label="شبکه اجتماعی"
                >
                  <Icon className="h-4 w-4" />
                </a>
              ))}
            </div>
          </div>

          {COLUMNS.map((col) => (
            <div key={col.title}>
              <h3 className="text-sm font-bold mb-3 text-foreground">{col.title}</h3>
              <ul className="space-y-2">
                {col.links.map((link) => (
                  <li key={link.label}>
                    <button
                      onClick={() => link.view && navigate(link.view)}
                      className="text-sm text-muted-foreground hover:text-accent transition text-right"
                    >
                      {link.label}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="flex flex-col md:flex-row items-center justify-between gap-4 pt-6 border-t border-border">
          <p className="text-xs text-muted-foreground">
            © {new Date().getFullYear()} PeepBox — تمام حقوق محفوظ است. تمام محتوا با مجوز قانونی پخش می‌شود.
          </p>
          <div className="flex items-center gap-1 text-xs text-muted-foreground">
            <Mail className="h-3.5 w-3.5 ml-1" /> support@peepboxtv.me
          </div>
        </div>
      </div>
    </footer>
  );
}