Footer

import { Button, Input, Label, Separator } from "@cooud-ui/ui";
import { Github, Hexagon, Linkedin, Send, Twitter } from "lucide-react";

const FOOTER_COLUMNS = [
  {
    heading: "Product",
    links: [
      { label: "Features", href: "#features" },
      { label: "Pricing", href: "#pricing" },
      { label: "Blocks", href: "#blocks" },
      { label: "Changelog", href: "#changelog" },
      { label: "Roadmap", href: "#roadmap" },
    ],
  },
  {
    heading: "Company",
    links: [
      { label: "About", href: "#about" },
      { label: "Careers", href: "#careers" },
      { label: "Customers", href: "#customers" },
      { label: "Brand", href: "#brand" },
      { label: "Contact", href: "#contact" },
    ],
  },
  {
    heading: "Resources",
    links: [
      { label: "Documentation", href: "#docs" },
      { label: "Guides", href: "#guides" },
      { label: "API reference", href: "#api" },
      { label: "Community", href: "#community" },
      { label: "Support", href: "#support" },
    ],
  },
];

export function FooterBlock() {
  return (
    <footer className="border-t border-border bg-surface-base px-6 py-16">
      <div className="mx-auto max-w-6xl">
        <div className="grid gap-12 lg:grid-cols-[1.5fr_repeat(3,1fr)]">
          <div className="max-w-xs">
            <div className="flex items-center gap-2.5">
              <span className="grid size-9 place-items-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow">
                <Hexagon aria-hidden="true" className="size-5" />
              </span>
              <span className="font-display text-lg font-semibold text-fg">Cooud</span>
            </div>
            <p className="mt-4 text-sm leading-6 text-fg-secondary">
              The themeable component library and block registry for teams who ship polished
              products fast.
            </p>
            <div className="mt-5 flex items-center gap-1">
              <Button variant="ghost" size="icon-sm" aria-label="GitHub">
                <Github aria-hidden="true" />
              </Button>
              <Button variant="ghost" size="icon-sm" aria-label="Twitter">
                <Twitter aria-hidden="true" />
              </Button>
              <Button variant="ghost" size="icon-sm" aria-label="LinkedIn">
                <Linkedin aria-hidden="true" />
              </Button>
            </div>
          </div>

          {FOOTER_COLUMNS.map((column) => (
            <div key={column.heading}>
              <h3 className="text-sm font-medium text-fg">{column.heading}</h3>
              <ul className="mt-4 flex flex-col gap-3">
                {column.links.map((link) => (
                  <li key={link.label}>
                    <a
                      href={link.href}
                      className="text-sm text-fg-secondary transition-colors hover:text-fg"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 rounded-2xl border border-border bg-surface-raised p-6 sm:flex sm:items-center sm:justify-between sm:gap-8">
          <div>
            <p className="font-display text-lg font-semibold text-fg">Stay in the loop</p>
            <p className="mt-1 text-sm text-fg-secondary">
              Product updates and new blocks, a few times a month.
            </p>
          </div>
          <form
            className="mt-4 flex max-w-sm flex-col gap-3 sm:mt-0 sm:flex-row"
            onSubmit={(event) => event.preventDefault()}
          >
            <div className="flex-1">
              <Label htmlFor="footer-email" className="sr-only">
                Email address
              </Label>
              <Input
                id="footer-email"
                type="email"
                required
                placeholder="you@company.com"
                autoComplete="email"
              />
            </div>
            <Button type="submit" variant="gradient">
              Subscribe
              <Send aria-hidden="true" />
            </Button>
          </form>
        </div>

        <Separator className="my-8" />

        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
          <p className="text-sm text-fg-tertiary">© 2026 Cooud. All rights reserved.</p>
          <div className="flex items-center gap-6">
            <a
              href="#privacy"
              className="text-sm text-fg-secondary transition-colors hover:text-fg"
            >
              Privacy
            </a>
            <a href="#terms" className="text-sm text-fg-secondary transition-colors hover:text-fg">
              Terms
            </a>
            <a href="#status" className="text-sm text-fg-secondary transition-colors hover:text-fg">
              Status
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}