"use client";

import Link from "next/link";
import { useSiteProfile } from "@/components/layout/useSiteProfile";
import { brands as brandData } from "@/lib/mock-data";

const quickLinks = [
  { label: "Home", href: "/" },
  { label: "Scooters", href: "/scooters" },
  { label: "Brands", href: "/brands" },
  { label: "Offers", href: "/offers" },
  { label: "About Us", href: "/about" },
  { label: "Parts", href: "/parts" },
  { label: "Gallery", href: "/gallery" },
  { label: "Contact Us", href: "/contact" },
];

export function Footer() {
  const profile = useSiteProfile();
  const nameParts = profile.siteName.split(" ");
  const first = nameParts[0] ?? "Bashista";
  const rest = nameParts.slice(1).join(" ") || "Auto";

  const socials = [
    { label: "f", href: profile.facebookUrl },
    { label: "ig", href: profile.instagramUrl },
    { label: "yt", href: profile.youtubeUrl },
    { label: "tt", href: profile.tiktokUrl },
    { label: "wa", href: profile.whatsappUrl },
  ];

  return (
    <footer className="bg-white px-2 pb-2 pt-3 text-white">
      <div className="container-custom overflow-hidden rounded-t-[1.5rem] bg-[#05335f]">
        <div className="grid gap-8 px-6 py-8 md:grid-cols-2 lg:grid-cols-[1.2fr_0.75fr_0.75fr_1fr_0.9fr]">
          <div>
            <div className="flex items-center gap-3">
              <img
                src="/images/brand/bashista-auto-logo.png"
                alt={`${profile.siteName} logo`}
                className="h-16 w-16 rounded-full bg-white object-cover object-top p-1"
              />
              <span className="flex flex-col leading-none">
                <span
                  className="text-3xl font-black italic tracking-tight text-white drop-shadow-sm"
                  style={{ fontFamily: "'Arial Black', 'Trebuchet MS', Arial, sans-serif" }}
                >
                  {first} <span className="text-ev">{rest}</span>
                </span>
                <span className="mt-2 text-xs font-black uppercase tracking-[0.26em] text-ev">
                  {profile.tagline}
                </span>
              </span>
            </div>
            <p className="mt-5 max-w-md text-sm leading-6 text-blue-100">
              Your trusted partner for electric mobility, premium scooters,
              genuine parts and reliable after-sales support.
            </p>
            <div className="mt-5 flex gap-3">
              {socials.map((item) => (
                <a
                  className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/20 text-xs font-bold text-blue-100"
                  key={item.label}
                  href={item.href || "#"}
                >
                  {item.label}
                </a>
              ))}
            </div>
          </div>

          <div className="border-l border-white/20 pl-6">
            <h3 className="text-sm font-bold text-white">Quick Links</h3>
            <div className="mt-4 flex flex-col gap-1.5">
              {quickLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="text-sm text-blue-100 transition hover:text-white"
                >
                  {link.label}
                </Link>
              ))}
            </div>
          </div>

          <div className="border-l border-white/20 pl-6">
            <h3 className="text-sm font-bold text-white">Our Brands</h3>
            <div className="mt-4 flex flex-col gap-1.5">
              {brandData.slice(0, 6).map((brand) => (
                <span key={brand.id} className="text-sm text-blue-100">
                  {brand.name}
                </span>
              ))}
            </div>
          </div>

          <div className="border-l border-white/20 pl-6">
            <h3 className="text-sm font-bold text-white">Our Branches</h3>
            <div className="mt-4 space-y-3 text-sm leading-6 text-blue-100">
              <p>
                <span className="block font-semibold text-white">{profile.mainBranch}</span>
                Main Branch
                <br />
                {profile.primaryPhone}
              </p>
              <p>
                <span className="block font-semibold text-white">{profile.secondBranch}</span>
                Branch
                <br />
                {profile.secondaryPhone}
              </p>
            </div>
          </div>

          <div>
            <h3 className="text-sm font-bold text-white">Opening Hours</h3>
            <div className="mt-4 space-y-3 text-sm leading-6 text-blue-100">
              <p>
                <span className="block font-semibold text-white">Sunday - Friday</span>
                {profile.openingHoursWeek}
              </p>
              <p>
                <span className="block font-semibold text-white">Saturday</span>
                {profile.openingHoursSat}
              </p>
              <p>{profile.holidayNote}</p>
            </div>
          </div>
        </div>

        <div className="flex flex-col gap-3 border-t border-white/15 px-6 py-4 text-xs text-blue-100 md:flex-row md:items-center md:justify-between">
          <p>© 2025 {profile.siteName}. All rights reserved.</p>
          <p>
            Drive Electric. <span className="font-bold text-ev">{profile.tagline}.</span>
          </p>
        </div>
      </div>
    </footer>
  );
}