import Link from "next/link";
import { Mic } from "lucide-react";

export function SiteFooter() {
  return (
    <footer className="border-t border-border bg-secondary">
      <div className="container flex flex-col gap-10 py-16 md:flex-row md:justify-between">
        <div className="max-w-xs space-y-4">
          <Link href="/" className="flex items-center gap-2.5 font-display text-lg font-bold tracking-tight">
            <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
              <Mic className="h-5 w-5" />
            </span>
            PodcastYes
          </Link>
          <p className="text-sm leading-relaxed text-muted-foreground">
            From topic idea to a finished, published podcast episode in minutes — script, voice, and
            cover art generated by AI.
          </p>
        </div>

        <div className="grid grid-cols-2 gap-10 text-sm sm:grid-cols-3">
          <FooterCol
            title="Product"
            links={[
              ["How it works", "/#how-it-works"],
              ["Features", "/#features"],
              ["Pricing", "/pricing"],
              ["FAQ", "/faq"],
            ]}
          />
          <FooterCol
            title="Account"
            links={[
              ["Log in", "/sign-in"],
              ["Create account", "/sign-up"],
              ["Dashboard", "/dashboard"],
            ]}
          />
          <FooterCol
            title="Legal"
            links={[
              ["Terms of Service", "/terms"],
              ["Privacy Policy", "/privacy"],
              ["Cookie Policy", "/cookies"],
              ["Acceptable Use", "/acceptable-use"],
              ["Refund Policy", "/refunds"],
              ["Subprocessors", "/subprocessors"],
            ]}
          />
        </div>
      </div>
      <div className="border-t border-border">
        <div className="container py-6 text-center text-xs text-muted-foreground">
          © {new Date().getFullYear()} PodcastYes. All rights reserved.
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }: { title: string; links: [string, string][] }) {
  return (
    <div className="space-y-3.5">
      <p className="font-semibold text-foreground">{title}</p>
      <ul className="space-y-2.5 text-muted-foreground">
        {links.map(([label, href]) => (
          <li key={href}>
            <Link href={href} className="transition-colors hover:text-brand">
              {label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}