import Link from "next/link";
import { Instagram, Mail } from "lucide-react";
import { Logo } from "./logo";

export function SiteFooter() {
  return (
    <footer className="border-t border-border bg-white/50">
      <div className="mx-auto grid max-w-7xl gap-10 px-5 py-12 sm:px-8 md:grid-cols-[1.5fr_1fr_1fr]">
        <div>
          <Logo />
          <p className="mt-4 max-w-sm text-sm leading-6 text-muted-foreground">
            Thoughtfully selected stays and memorable local experiences, wherever your curiosity takes you.
          </p>
        </div>
        <div className="grid gap-3 text-sm">
          <p className="font-bold">Explore</p>
          <Link href="/listings" className="text-muted-foreground hover:text-ember">Browse stays</Link>
          <Link href="/dashboard" className="text-muted-foreground hover:text-ember">Your trips</Link>
          <Link href="/signup" className="text-muted-foreground hover:text-ember">Become a member</Link>
        </div>
        <div>
          <p className="font-bold">Stay in touch</p>
          <div className="mt-4 flex gap-3">
            <a href="mailto:hello@encostay.com" aria-label="Email Encostay" className="grid size-10 place-items-center rounded-full bg-sand/70"><Mail size={17} /></a>
            <a href="#" aria-label="Encostay on Instagram" className="grid size-10 place-items-center rounded-full bg-sand/70"><Instagram size={17} /></a>
          </div>
        </div>
      </div>
      <div className="border-t border-border/70 py-5 text-center text-xs text-muted-foreground">© {new Date().getFullYear()} Encostay. Travel beautifully.</div>
    </footer>
  );
}