Restaurant Footer

// Restaurant footer on deep green: name and contact details, page links,
// social links, an opening-hours panel and a bottom bar.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Link = { label: string; href: string };

type Props = {
  name?: string;
  tagline?: string;
  phone?: string;
  email?: string;
  address?: string;
  links?: Link[];
  social?: Link[];
  hours?: { label: string; days?: string; time: string }[];
};

const DEFAULT_LINKS: Link[] = [
  { label: "Menu", href: "#" },
  { label: "Our story", href: "#" },
  { label: "Gallery", href: "#" },
  { label: "Reservations", href: "#" },
  { label: "Contact", href: "#" },
];

const DEFAULT_SOCIAL: Link[] = [
  { label: "Instagram", href: "#" },
  { label: "Facebook", href: "#" },
  { label: "TikTok", href: "#" },
  { label: "Pinterest", href: "#" },
];

const DEFAULT_HOURS = [
  { label: "Lunch", days: "Tue – Sat", time: "12:00 – 14:30" },
  { label: "Dinner", days: "Tue – Sat", time: "18:30 – 22:30" },
  { label: "Closed", time: "Sunday & Monday" },
];

const Icon = ({ d }: { d: string }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" aria-hidden className="h-[18px] w-[18px] shrink-0">
    <path d={d} />
  </svg>
);

export default function FooterGreen({
  name = "Maison Élara",
  tagline = "Contemporary French cuisine",
  phone = "+1 (212) 555-0147",
  email = "hello@maisonelara.com",
  address = "12 Rue de la Paix, 75001 Paris",
  links = DEFAULT_LINKS,
  social = DEFAULT_SOCIAL,
  hours = DEFAULT_HOURS,
}: Props) {
  const year = new Date().getFullYear();

  return (
    <footer className="bg-[#0F4729] font-['Inter',ui-sans-serif,system-ui,sans-serif] text-[#FFF7EA] antialiased">
      <div aria-hidden className="h-px w-full bg-gradient-to-r from-transparent via-[#FCFF96]/60 to-transparent" />

      <div className="mx-auto max-w-7xl px-5 py-16 md:px-10 md:py-20 lg:py-28">
        <div className="grid grid-cols-1 gap-10 pb-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-16">
          <div className="sm:col-span-2">
            <a href="#" className="mb-3 block font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] text-3xl font-light tracking-tight transition-colors hover:text-[#FCFF96] sm:text-4xl lg:text-5xl">
              {name}
            </a>
            <p className="mb-8 text-xs font-bold uppercase tracking-widest text-[#FFF7EA]/60">{tagline}</p>
            <div className="flex flex-col gap-3 text-sm sm:text-lg">
              <a href={`tel:${phone.replace(/[^+\d]/g, "")}`} className="flex items-center gap-3 hover:text-[#FCFF96]">
                <Icon d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z" />
                {phone}
              </a>
              <a href={`mailto:${email}`} className="flex items-center gap-3 hover:text-[#FCFF96]">
                <Icon d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 6l-10 7L2 6" />
                {email}
              </a>
              <p className="flex items-center gap-3">
                <Icon d="M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21zM12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
                {address}
              </p>
            </div>
          </div>

          <div>
            <p className="mb-5 text-xs uppercase tracking-widest text-[#FCFF96]">Explore</p>
            <nav className="flex flex-col gap-2">
              {links.map((l) => (
                <a key={l.label} href={l.href} className="text-lg transition-colors hover:text-[#FCFF96] sm:text-2xl">
                  {l.label}
                </a>
              ))}
            </nav>
          </div>

          <div>
            <p className="mb-5 text-xs uppercase tracking-widest text-[#FCFF96]">Socials</p>
            <div className="flex flex-col gap-3">
              {social.map((l) => (
                <a key={l.label} href={l.href} className="text-lg uppercase tracking-wide transition-colors hover:text-[#FCFF96]">
                  {l.label}
                </a>
              ))}
            </div>
          </div>
        </div>

        <div className="flex flex-col flex-wrap gap-6 rounded-md bg-[#FCFF96] p-6 text-[#0F4729] sm:flex-row sm:gap-12 sm:p-8 lg:p-10">
          {hours.map((h) => (
            <div key={h.label} className="min-w-[140px]">
              <p className="font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] text-lg font-bold">{h.label}</p>
              {h.days && <p className="font-semibold">{h.days}</p>}
              <p>{h.time}</p>
            </div>
          ))}
        </div>

        <div className="flex flex-col items-start justify-between gap-4 pt-8 text-sm sm:flex-row sm:items-center">
          <p className="text-[#FCFF96]">
            © {year} {name}. All rights reserved.
          </p>
          <div className="flex gap-6 text-[#FFF7EA]/70">
            <a href="#" className="hover:text-[#FFF7EA]">
              Privacy
            </a>
            <a href="#" className="hover:text-[#FFF7EA]">
              Terms
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}