"use client";
import { useRouter } from "next/navigation";
import { Store, Shield, Headphones, FileText, Heart } from "lucide-react";

const FOOTER_LINKS = [
  {
    title: "Buy",
    links: [
      { label: "Browse All", href: "/marketplace/search" },
      { label: "Categories", href: "/marketplace/categories" },
      { label: "Wishlist", href: "/marketplace/wishlist" },
      { label: "My Orders", href: "/marketplace/orders" },
    ],
  },
  {
    title: "Sell",
    links: [
      { label: "Start Selling", href: "/marketplace/create" },
      { label: "Seller Dashboard", href: "/marketplace/seller" },
      { label: "My Listings", href: "/marketplace/seller/listings" },
      { label: "Earnings", href: "/marketplace/seller/earnings" },
    ],
  },
  {
    title: "Support",
    links: [
      { label: "Help Center", href: "#" },
      { label: "Buyer Protection", href: "#" },
      { label: "Report a Problem", href: "#" },
      { label: "Contact Us", href: "#" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Terms of Use", href: "#" },
      { label: "Privacy Policy", href: "#" },
      { label: "Cookie Policy", href: "#" },
      { label: "Marketplace Rules", href: "#" },
    ],
  },
];

const TRUST_BADGES = [
  { icon: Shield, label: "Buyer Protection", desc: "Money-back guarantee" },
  { icon: Headphones, label: "24/7 Support", desc: "Always here to help" },
  { icon: FileText, label: "Verified Sellers", desc: "Trust & safety checks" },
];

export function MarketplaceFooter() {
  const router = useRouter();

  return (
    <footer
      style={{
        borderTop: "1px solid var(--border)",
        background: "var(--card)",
        marginTop: 48,
      }}
    >
      {/* Trust badges row */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 1,
          borderBottom: "1px solid var(--border)",
        }}
      >
        {TRUST_BADGES.map((badge) => (
          <div
            key={badge.label}
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
              padding: "14px 20px",
              background: "var(--deep)",
            }}
          >
            <badge.icon
              size={18}
              style={{ color: "var(--accent)", flexShrink: 0 }}
            />
            <div>
              <p
                style={{
                  fontSize: 12,
                  fontWeight: 700,
                  color: "var(--text-primary)",
                  lineHeight: 1,
                }}
              >
                {badge.label}
              </p>
              <p
                style={{
                  fontSize: 10,
                  color: "var(--text-muted)",
                  marginTop: 3,
                }}
              >
                {badge.desc}
              </p>
            </div>
          </div>
        ))}
      </div>

      {/* Links grid */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 32,
          padding: "32px 24px",
          maxWidth: 960,
          margin: "0 auto",
        }}
        className="sm:grid-cols-4"
      >
        {FOOTER_LINKS.map((section) => (
          <div key={section.title}>
            <p
              style={{
                fontSize: 10,
                fontWeight: 800,
                letterSpacing: "0.1em",
                textTransform: "uppercase",
                color: "var(--text-muted)",
                opacity: 0.7,
                marginBottom: 12,
              }}
            >
              {section.title}
            </p>
            <ul
              style={{
                listStyle: "none",
                padding: 0,
                margin: 0,
                display: "flex",
                flexDirection: "column",
                gap: 8,
              }}
            >
              {section.links.map((link) => (
                <li key={link.label}>
                  <button
                    onClick={() => link.href !== "#" && router.push(link.href)}
                    style={{
                      background: "none",
                      border: "none",
                      padding: 0,
                      cursor: link.href !== "#" ? "pointer" : "default",
                      fontSize: 12,
                      color: "var(--text-muted)",
                      textAlign: "left",
                      transition: "color 0.15s",
                    }}
                    onMouseEnter={(e) => {
                      if (link.href !== "#")
                        (e.currentTarget as HTMLElement).style.color =
                          "var(--accent)";
                    }}
                    onMouseLeave={(e) => {
                      (e.currentTarget as HTMLElement).style.color =
                        "var(--text-muted)";
                    }}
                  >
                    {link.label}
                  </button>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Bottom bar */}
      <div
        style={{
          borderTop: "1px solid var(--border)",
          padding: "16px 24px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: 8,
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div
            style={{
              width: 24,
              height: 24,
              borderRadius: 6,
              background:
                "linear-gradient(135deg, var(--accent) 0%, #ff4040 100%)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Store size={12} color="#fff" />
          </div>
          <span
            style={{
              fontSize: 11,
              fontWeight: 700,
              color: "var(--text-muted)",
            }}
          >
            Doliplay Marketplace
          </span>
        </div>

        <p style={{ fontSize: 11, color: "var(--text-muted)", opacity: 0.5 }}>
          © {new Date().getFullYear()} Doliplay. Made with{" "}
          <Heart
            size={9}
            style={{
              display: "inline",
              verticalAlign: "middle",
              color: "var(--accent)",
            }}
          />{" "}
          in India.
        </p>
      </div>
    </footer>
  );
}
