Mega

"use client";

import { Button, Input, Label, Separator } from "@cronus-ui/ui";
import { Hexagon, Send } from "lucide-react";
import type { SVGProps } from "react";

function GithubGlyph(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
      <path d="M9 18c-4.51 2-5-2-7-2" />
    </svg>
  );
}

function LinkedinGlyph(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
      <rect width="4" height="12" x="2" y="9" />
      <circle cx="4" cy="4" r="2" />
    </svg>
  );
}

function TwitterGlyph(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
    </svg>
  );
}

const FOOTER_MEGA_COLUMNS = [
  {
    heading: "Product",
    links: [
      { label: "Features", href: "#features" },
      { label: "Pricing", href: "#pricing" },
      { label: "Blocks", href: "#blocks" },
      { label: "Themes", href: "#themes" },
      { label: "Changelog", href: "#changelog" },
    ],
  },
  {
    heading: "Developers",
    links: [
      { label: "Documentation", href: "#docs" },
      { label: "API reference", href: "#api" },
      { label: "CLI", href: "#cli" },
      { label: "Open source", href: "#open-source" },
    ],
  },
  {
    heading: "Company",
    links: [
      { label: "About", href: "#about" },
      { label: "Careers", href: "#careers" },
      { label: "Customers", href: "#customers" },
      { label: "Press kit", href: "#press" },
    ],
  },
  {
    heading: "Resources",
    links: [
      { label: "Guides", href: "#guides" },
      { label: "Templates", href: "#templates" },
      { label: "Community", href: "#community" },
      { label: "Support", href: "#support" },
    ],
  },
  {
    heading: "Legal",
    links: [
      { label: "Privacy", href: "#privacy" },
      { label: "Terms", href: "#terms" },
      { label: "Security", href: "#security" },
      { label: "DPA", href: "#dpa" },
    ],
  },
];

export function FooterMegaBlock() {
  return (
    <footer className="border-t border-border bg-surface-base px-6 py-16">
      <div className="mx-auto max-w-6xl">
        <div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
          <div className="max-w-sm">
            <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">Cronus</span>
            </div>
            <p className="mt-4 text-sm leading-6 text-fg-secondary">
              Product updates, new blocks, and launch guides — a few times a month.
            </p>
          </div>
          <form
            className="flex w-full max-w-md flex-col gap-3 sm:flex-row"
            onSubmit={(event) => event.preventDefault()}
          >
            <div className="flex-1">
              <Label htmlFor="footer-mega-email" className="sr-only">
                Email address
              </Label>
              <Input
                id="footer-mega-email"
                type="email"
                required
                placeholder="you@company.com"
                autoComplete="email"
              />
            </div>
            <Button type="submit" variant="primary">
              Subscribe
              <Send aria-hidden="true" />
            </Button>
          </form>
        </div>

        <div className="mt-14 grid gap-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
          {FOOTER_MEGA_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>

        <Separator className="my-10" />

        <div className="flex flex-col-reverse items-center justify-between gap-6 lg:flex-row">
          <p className="text-sm text-fg-tertiary">© 2026 Cronus Labs, Inc. All rights reserved.</p>
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6">
            <a
              href="#status"
              className="inline-flex items-center gap-2 text-sm font-medium text-success-strong transition-colors hover:text-fg"
            >
              <span aria-hidden="true" className="size-2 rounded-full bg-success" />
              All systems operational
            </a>
            <div className="flex items-center gap-1">
              <Button variant="ghost" size="icon-sm" aria-label="GitHub">
                <GithubGlyph aria-hidden="true" />
              </Button>
              <Button variant="ghost" size="icon-sm" aria-label="Twitter">
                <TwitterGlyph aria-hidden="true" />
              </Button>
              <Button variant="ghost" size="icon-sm" aria-label="LinkedIn">
                <LinkedinGlyph aria-hidden="true" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}