"use client";

import { useState, FormEvent } from "react";
import { Button } from "@/components/ui/button";
import { Sparkles, Twitter, Github, Linkedin, Youtube } from "lucide-react";

const columns = [
  { heading: "Product", links: ["Features", "Pricing", "Integrations", "Changelog", "Roadmap"] },
  { heading: "Solutions", links: ["Startups", "Enterprise", "Agencies", "Education", "Nonprofits"] },
  { heading: "Resources", links: ["Docs", "Guides", "API", "Community", "Status"] },
  { heading: "Company", links: ["About", "Blog", "Careers", "Press", "Contact"] },
];

export default function FooterMega() {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // eslint-disable-next-line no-console
    console.log("Mega footer signup:", email);
    setSubmitted(true);
    setEmail("");
  };

  return (
    <footer className="w-full border-t border-border bg-background">
      <div className="container mx-auto px-6 py-16">
        <div className="grid grid-cols-2 md:grid-cols-6 gap-8">
          <div className="col-span-2">
            <a href="#" className="flex items-center gap-2 text-foreground font-bold">
              <Sparkles className="w-6 h-6 text-primary" />
              <span className="text-base">Acme</span>
            </a>
            <p className="mt-4 text-sm text-muted-foreground max-w-xs leading-relaxed">
              The modern platform for building, launching, and scaling products that people love.
            </p>
            <div className="mt-5 flex items-center gap-3 text-muted-foreground">
              <a href="#" aria-label="Twitter" className="hover:text-foreground transition-colors">
                <Twitter className="w-4 h-4" />
              </a>
              <a href="#" aria-label="GitHub" className="hover:text-foreground transition-colors">
                <Github className="w-4 h-4" />
              </a>
              <a href="#" aria-label="LinkedIn" className="hover:text-foreground transition-colors">
                <Linkedin className="w-4 h-4" />
              </a>
              <a href="#" aria-label="YouTube" className="hover:text-foreground transition-colors">
                <Youtube className="w-4 h-4" />
              </a>
            </div>
          </div>
          {columns.map((col) => (
            <div key={col.heading}>
              <h3 className="text-sm font-semibold text-foreground mb-4">{col.heading}</h3>
              <ul className="space-y-2">
                {col.links.map((l) => (
                  <li key={l}>
                    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                      {l}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 rounded-2xl border border-border bg-muted/30 p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-5">
          <div>
            <h3 className="text-lg font-semibold text-foreground">Stay in the loop</h3>
            <p className="text-sm text-muted-foreground mt-1">
              Monthly product updates and essays. Unsubscribe anytime.
            </p>
          </div>
          <form onSubmit={onSubmit} className="flex gap-2 md:min-w-[360px]">
            <input
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@company.com"
              className="flex-1 min-w-0 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
            />
            <Button type="submit">Subscribe</Button>
          </form>
        </div>
        {submitted && (
          <p className="text-xs text-primary mt-3">Thanks — check your inbox.</p>
        )}

        <div className="mt-10 pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-muted-foreground">
            © {new Date().getFullYear()} Acme, Inc. All rights reserved.
          </p>
          <div className="flex items-center gap-5 text-xs text-muted-foreground">
            <a href="#" className="hover:text-foreground">Privacy</a>
            <a href="#" className="hover:text-foreground">Terms</a>
            <a href="#" className="hover:text-foreground">Security</a>
            <a href="#" className="hover:text-foreground">Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}