"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Facebook, Twitter, Youtube } from "lucide-react";
import Link from "next/link";

export default function Footer() {
  const freeTools = [
    // { label: "Planpost Canvas", url: "https://canvas.planpostai.com/" },
    {
      label: "Color Pallet Generator",
      url: "https://colors.planpostai.com/color-palate-generator",
    },
    {
      label: "Background Remover",
      url: "https://colors.planpostai.com/bg-remove",
    },
    {
      label: "Image to Color",
      url: "https://colors.planpostai.com/image-to-color",
    },
    {
      label: "Color Combinator",
      url: "https://colors.planpostai.com/two-colors",
    },
    { label: "Color Wheel", url: "https://colors.planpostai.com/color-wheel" },
  ];

  const resources = [
    { label: "Home", url: "/" },
    { label: "Blog", url: "https://blog.planpostai.com" },
    { label: "Pricing", url: "/#pricingSection" },
  ];

  const planpostAi = [
    { label: "About Us", url: "/about/" },
    { label: "Contact", url: "/contact" },
    { label: "FAQ", url: "/#faqSection" },
    { label: "Privacy Policy", url: "/privacy-policy" },
    { label: "Terms & Condition", url: "/terms-and-conditions" },
  ];
  return (
    <footer
      id="footerSection"
      className="bg-gradient-to-r from-[#7c3aed] to-[#6d31d9] text-white"
    >
      <div className="max-w-7xl mx-auto px-4 py-12 md:py-16">
        {/* Top Section */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
          {/* Brand Section */}
          <div className="space-y-6 lg:col-span-1">
            <h2 className="text-3xl font-bold tracking-tight">PLANPOST AI</h2>
            <p className="text-xl font-semibold max-w-sm">
              With a single prompt, create all your social media content.
            </p>
            <p className="text-sm text-white/80 max-w-sm">
              With a single prompt, create all your social media content.
            </p>
            <div className="flex items-center gap-2 max-w-sm">
              <Input
                type="email"
                placeholder="Enter your email"
                className="bg-white/10 border-white/20 text-white placeholder:text-white/60"
              />
              <Button variant="secondary" size="icon">
                →
              </Button>
            </div>
          </div>

          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Free Tools</h3>
            <ul className="space-y-3">
              {freeTools.map(({ label, url }) => (
                <li key={label}>
                  <Link href={url} className="text-sm hover:text-white/80">
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Resources */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Resources</h3>
            <ul className="space-y-3">
              {resources.map(({ label, url }) => (
                <li key={label}>
                  <Link href={url} className="text-sm hover:text-white/80">
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Planpost AI */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Planpost AI</h3>
            <ul className="space-y-3">
              {planpostAi.map(({ label, url }) => (
                <li key={label}>
                  <Link href={url} className="text-sm hover:text-white/80">
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom Section */}
        <div className="mt-16 pt-8 border-t border-white/20">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            <div className="space-y-2">
              <h3 className="text-xl font-semibold">Need help?</h3>
              <p className="text-sm">Reach us at: shahin@planpostai.com</p>
            </div>
            <div className="flex gap-4 md:justify-end">
              <Link
                href="https://www.facebook.com/PlanPostAI/"
                className="hover:text-white/80"
              >
                <Facebook className="w-6 h-6" />
                <span className="sr-only">Facebook</span>
              </Link>
              <Link
                href="https://x.com/planpost_ai"
                className="hover:text-white/80"
              >
                <Twitter className="w-6 h-6" />
                <span className="sr-only">Twitter</span>
              </Link>
              <Link
                href="https://www.youtube.com/@PlanPostAI"
                className="hover:text-white/80"
              >
                <Youtube className="w-6 h-6" />
                <span className="sr-only">YouTube</span>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
