import React from "react";
import Image from "next/image";
import Link from "next/link";
import { footerData } from "@/data/siteData";

export const Footer: React.FC = () => {
  return (
    <footer 
      style={{ fontFamily: 'var(--font-poppins), "Poppins", sans-serif' }}
      className="w-full bg-[#f4f8fc] border-t border-slate-200/80 text-slate-600"
    >
      {/* Main Footer Container with exact same max-w-[1800px] and px-6 sm:px-10 lg:px-12 */}
      <div className="w-full max-w-[1800px] mx-auto px-6 sm:px-10 lg:px-12 pt-10 sm:pt-14 lg:pt-16 pb-10 sm:pb-14">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-12 gap-8 lg:gap-8">
          {/* Col 1: Brand Info (3 cols) */}
          <div className="sm:col-span-2 md:col-span-3 lg:col-span-3">
            <Link href="/" className="inline-block" aria-label="bioWORLD Home">
              <div className="relative h-[48px] sm:h-[64px] lg:h-[80px] w-[210px] sm:w-[260px] lg:w-[310px]">
                <Image
                  src="/images/logo/bioworld-logo.png"
                  alt="bioWORLD molecular tools and laboratory essentials"
                  fill
                  priority
                  className="object-contain object-left"
                />
              </div>
            </Link>
            <p className="text-[14px] sm:text-[15px] md:text-[16px] text-slate-500 leading-relaxed max-w-sm mt-3 sm:mt-5">
              {footerData.about}
            </p>
          </div>

          {/* Col 2: Links (2 cols) */}
          <div className="lg:col-span-2">
            <h3 className="text-[20px] sm:text-[22px] lg:text-[24px] font-semibold text-slate-900 mb-3 sm:mb-4 tracking-tight">
              Links
            </h3>
            <ul className="space-y-1.5 sm:space-y-2 text-[14px] sm:text-[15px] lg:text-[16px]">
              {footerData.links.map((link) => (
                <li key={link.label}>
                  <Link href={link.href} className="text-slate-600 hover:text-[#0077b6] transition-colors">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Col 3: Products (3 cols) */}
          <div className="lg:col-span-3">
            <h3 className="text-[20px] sm:text-[22px] lg:text-[24px] font-semibold text-slate-900 mb-3 sm:mb-4 tracking-tight">
              Products
            </h3>
            <ul className="space-y-1.5 sm:space-y-2 text-[14px] sm:text-[15px] lg:text-[16px]">
              {footerData.products.map((product) => (
                <li key={product.label}>
                  <Link href={product.href} className="text-slate-600 hover:text-[#0077b6] transition-colors whitespace-pre-line leading-snug">
                    {product.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Col 4: Company (2 cols) */}
          <div className="lg:col-span-2">
            <h3 className="text-[20px] sm:text-[22px] lg:text-[24px] font-semibold text-slate-900 mb-3 sm:mb-4 tracking-tight">
              Company
            </h3>
            <ul className="space-y-1.5 sm:space-y-2 text-[14px] sm:text-[15px] lg:text-[16px]">
              {footerData.company.map((item) => (
                <li key={item.label}>
                  <Link href={item.href} className="text-slate-600 hover:text-[#0077b6] transition-colors">
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Col 5: Contact Information (2 cols) */}
          <div className="lg:col-span-2">
            <h3 className="text-[20px] sm:text-[22px] lg:text-[24px] font-semibold text-slate-900 mb-3 sm:mb-4 tracking-tight">
              Contact Information
            </h3>
            <div className="space-y-1.5 text-[14px] sm:text-[15px] lg:text-[16px] text-slate-600">
              <p>
                <a href={`tel:${footerData.contact.phone}`} className="hover:text-[#0077b6] transition-colors">
                  {footerData.contact.phone}
                </a>
              </p>
              <p className="text-slate-500">
                {footerData.contact.hours}
              </p>
              <p className="pt-1.5">
                <a href={`mailto:${footerData.contact.email}`} className="hover:text-[#0077b6] transition-colors">
                  {footerData.contact.email}
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Copyright Bottom Bar */}
      <div className="w-full bg-[#0077b6] text-white py-3 sm:py-3.5 text-center text-[13px]">
        <div className="w-full max-w-[1800px] mx-auto px-6 sm:px-10 lg:px-12">
          <p className="text-white/95">{footerData.copyright}</p>
        </div>
      </div>
    </footer>
  );
};