import { SITE } from "@/lib/constants";
import type { SiteHoursRow } from "@/lib/site-content-defaults";

export function Footer({ hours }: { hours: SiteHoursRow[] }) {
  return (
    <footer id="infos" className="scroll-mt-24 border-t border-chocolat/10 bg-chocolat text-cream">
      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
        <div className="grid gap-12 lg:grid-cols-2">
          <div>
            <h2 className="text-2xl font-bold text-white">{SITE.name}</h2>
            <p className="mt-4 text-sm leading-relaxed text-white/80">
              {SITE.address}
            </p>
            <p className="mt-2 text-sm text-white/80">
              <a href={`tel:${SITE.phone.replace(/\s/g, "")}`} className="hover:text-gaufre">
                {SITE.phone}
              </a>
              {" · "}
              <a href={`mailto:${SITE.email}`} className="hover:text-gaufre">
                {SITE.email}
              </a>
            </p>
            {hours.length > 0 ? (
              <>
                <h3 className="mt-8 text-sm font-bold uppercase tracking-wider text-gaufre">
                  Horaires
                </h3>
                <ul className="mt-3 space-y-2 text-sm text-white/85">
                  {hours.map((h, i) => (
                    <li
                      key={`hour-${i}-${h.days}`}
                      className="flex justify-between gap-4 max-w-xs"
                    >
                      <span>{h.days}</span>
                      <span className="font-medium text-white">{h.hours}</span>
                    </li>
                  ))}
                </ul>
              </>
            ) : null}
          </div>
          <div className="overflow-hidden rounded-3xl shadow-[0_16px_50px_-12px_rgba(0,0,0,0.45)]">
            <iframe
              title="Plan — Gaufrement Bon"
              src={SITE.mapsEmbedUrl}
              className="aspect-[4/3] h-[min(320px,50vh)] w-full border-0 lg:aspect-auto lg:h-full lg:min-h-[280px]"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
          </div>
        </div>
        <p className="mt-12 border-t border-white/10 pt-8 text-center text-xs text-white/50">
          © {new Date().getFullYear()} {SITE.name}. Tous droits réservés.
        </p>
      </div>
    </footer>
  );
}