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

const groups = [
  { title: "Create", links: [["Script to video", "/tools/script-to-video/"], ["Text to video", "/tools/text-to-video/"], ["Image to video", "/tools/image-to-video/"], ["Story maker", "/tools/story-to-video/"]] },
  { title: "Explore", links: [["All tools", "/tools/"], ["Models", "/models/"], ["Pricing", "/pricing/"], ["Blog", "/blog/"]] },
  { title: "Company", links: [["About", "/about-us/"], ["Support", "/support/"], ["FAQs", "/faqs/"], ["Dashboard", "/app/dashboard/"]] },
  { title: "Legal", links: [["Privacy", "/privacy-policy/"], ["Terms", "/terms-conditions/"], ["Cookies", "/cookie-policy/"], ["DMCA", "/dmca-policy/"]] }
];

export function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="footer-lead">
        <p className="eyebrow">A new way to frame your ideas</p>
        <h2>Make the story<br />you can already see.</h2>
        <Link className="circle-link" href="/app/create/" aria-label="Create a video"><ArrowUpRight /></Link>
      </div>
      <div className="footer-grid">
        <div className="footer-brand"><strong>moved<i>.live</i></strong><p>AI-assisted visual storytelling,<br />designed to keep ideas moving.</p></div>
        {groups.map((group) => (
          <div key={group.title}><p className="footer-title">{group.title}</p>{group.links.map(([label, href]) => <Link key={href} href={href}>{label}</Link>)}</div>
        ))}
      </div>
      <div className="footer-bottom"><span>© 2026 moved.live</span><span>Made for stories in motion.</span></div>
    </footer>
  );
}
