import Image from "next/image";
import { PageContainer } from "@/components/layout/page-container";
import { detonexFigmaAssets } from "@/lib/detonex-figma";
import { siteConfig } from "@/lib/site-config";

export function StorefrontFooter() {
  return (
    <footer className="bg-dark-green text-white">
      <PageContainer className="grid gap-10 py-20 lg:grid-cols-[400px_minmax(0,1fr)]">
        <div className="space-y-8">
          <Image
            src={detonexFigmaAssets.footerLogo}
            alt={siteConfig.name}
            width={176}
            height={42}
            className="h-[42px] w-auto"
          />
          <div className="space-y-[14px] text-[14px] font-medium tracking-[-0.02em] text-white/60">
            <p>{siteConfig.contact.phone}</p>
            <p>{siteConfig.contact.email}</p>
            <p className="max-w-[320px]">{siteConfig.contact.address}</p>
          </div>
        </div>

        <div className="grid gap-8 md:grid-cols-3">
          <div className="space-y-3">
            <p className="text-[14px] font-bold tracking-[-0.02em] text-white">
              Kategorije proizvoda
            </p>
            <div className="space-y-[14px] text-[14px] font-medium tracking-[-0.02em] text-white/60">
              {siteConfig.footer.productCategories.map((item) => (
                <p key={item}>{item}</p>
              ))}
            </div>
          </div>
          <div className="space-y-3">
            <p className="text-[14px] font-bold tracking-[-0.02em] text-white">
              Korisni linkovi
            </p>
            <div className="space-y-[14px] text-[14px] font-medium tracking-[-0.02em] text-white/60">
              {siteConfig.footer.usefulLinks.map((item) => (
                <p key={item}>{item}</p>
              ))}
            </div>
          </div>
          <div className="space-y-8">
            <div className="space-y-3">
              <p className="text-[14px] font-bold tracking-[-0.02em] text-white">
                Radno vrijeme
              </p>
              <div className="space-y-[14px] text-[14px] font-medium tracking-[-0.02em] text-white/60">
                {siteConfig.footer.workingHours.map((item) => (
                  <p key={item}>{item}</p>
                ))}
              </div>
            </div>
            <div className="space-y-5">
              <p className="text-[14px] font-bold tracking-[-0.02em] text-white">
                Pratite nas
              </p>
              <Image
                src={detonexFigmaAssets.icons.footerSocial}
                alt="Detonex društvene mreže"
                width={64}
                height={18}
                className="h-[18px] w-auto"
              />
            </div>
          </div>
        </div>
      </PageContainer>

      <div className="border-t border-[#424c42]">
        <PageContainer className="flex flex-col gap-6 py-6 md:flex-row md:items-center md:justify-between">
          <div className="flex items-center gap-3">
            {detonexFigmaAssets.payments.map((item, index) => (
              <Image
                key={item}
                src={item}
                alt={`Način plaćanja ${index + 1}`}
                width={0}
                height={28}
                sizes="112px"
                unoptimized
                className="h-7 w-auto"
              />
            ))}
          </div>
          <p className="text-[14px] font-medium tracking-[-0.02em] text-white/60">
            2025 @ {siteConfig.name}
          </p>
        </PageContainer>
      </div>
    </footer>
  );
}