import * as React from 'react';
import Link from 'next/link';

import { cn } from '@workspace/ui/lib/utils';

const FOOTER_SECTIONS = [
  {
    title: "Product",
    links: [
      { name: "Solutions", href: "/solutions" },
      { name: "Case Studies", href: "/case-studies" },
      { name: "Stack", href: "/stack" },
      { name: "Pricing", href: "/pricing" },
    ],
  },
  {
    title: "Resources",
    links: [
      { name: "Process", href: "/process" },
      { name: "FAQ", href: "/faq" },
      // { name: "Blog", href: "/blog" }, // Add if/when blog exists
      { name: "Status", href: "https://status.fortura.ai" }, // Example external link
    ],
  },
  {
    title: "Company",
    links: [
      { name: "About", href: "/about" },
      { name: "Contact", href: "/contact" },
      // { name: "Careers", href: "/careers" }, // Add if/when careers page exists
    ],
  },
  {
    title: "Legal",
    links: [
      { name: "Privacy", href: "/privacy" },
      { name: "Terms", href: "/terms" },
      { name: "Security", href: "/security" },
      // { name: "Compliance", href: "/compliance" }, // HIPAA/SOC2 details if separate page
    ],
  },
];

const SOCIAL_LINKS = [
  // Add social media links if needed
  // { name: 'GitHub', href: 'https://github.com/yourcompany' },
  // { name: 'Twitter', href: 'https://twitter.com/yourcompany' },
];

export function Footer() {
  return (
    <footer className="border-t bg-background/80 backdrop-blur-sm">
      <div className="w-full py-14 md:py-20 px-4 md:px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
          {/* Branding and Description */}
          <div className="lg:col-span-1">
            <Link href="/" className="flex items-center space-x-2 mb-4">
              {/* Replace with your actual logo component or image */}
              <span className="font-bold text-xl">Fortura</span>
            </Link>
            <p className="text-muted-foreground text-sm max-w-xs">
              {/* Direct/Clean tone toggle could be used here if context is available */}
              Your hosting provider is fucking you. {/* Or: Your cloud bill is robbing you. */}
              Own your infrastructure. Slash your bill.
            </p>
            <div className="flex space-x-4 mt-4">
              {SOCIAL_LINKS.map((social) => (
                <Link
                  key={social.name}
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-primary transition-colors"
                  aria-label={social.name}
                >
                  {/* Placeholder for social icon, e.g., <TwitterIcon className="size-5" /> */}
                  <span className="sr-only">{social.name}</span>
                  {/* Icon Component Placeholder */}
                </Link>
              ))}
            </div>
          </div>

          {/* Navigation Sections */}
          {FOOTER_SECTIONS.map((section) => (
            <div key={section.title} className="lg:col-span-1">
              <h3 className="text-sm font-semibold mb-4">{section.title}</h3>
              <ul className="space-y-3">
                {section.links.map((link) => (
                  <li key={link.name}>
                    <Link
                      href={link.href}
                      className={cn(
                        "text-muted-foreground text-sm hover:text-primary transition-colors",
                        link.href.startsWith('http') ? "flex items-center" : "" // Add external link icon styling if needed
                      )}
                      {...(link.href.startsWith('http') ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                    >
                      {link.name}
                      {link.href.startsWith('http') && (
                        <span className="ml-1" aria-hidden="true">↗</span> // Simple external link indicator
                      )}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Copyright and Legal */}
        <div className="border-t mt-12 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-muted-foreground">
          <p>© {new Date().getFullYear()} Fortura Data Solutions. All rights reserved.</p>
          <div className="flex space-x-6 mt-4 md:mt-0">
            <Link href="/privacy" className="hover:text-primary transition-colors">Privacy Policy</Link>
            <Link href="/terms" className="hover:text-primary transition-colors">Terms of Service</Link>
            {/* Add Compliance link here if it's a dedicated page */}
          </div>
        </div>
      </div>
    </footer>
  );
}
