Footer 4

"use client";

import { InstagramIcon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { Apple, X } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function FooterNodaSimple() {
  return (
    <footer className="border-stone-200 border-t bg-white dark:border-zinc-700 dark:bg-zinc-950">
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:py-24">
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4 md:gap-12">
          {/* Brand Section */}
          <div className="sm:col-span-2 md:col-span-1">
            <div className="mb-4 flex items-center gap-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 font-bold text-sm text-white">
                N
              </div>
              <span className="font-semibold text-lg text-stone-900 dark:text-stone-100">
                noda
              </span>
            </div>
            <p className="mb-4 text-sm text-stone-700 dark:text-stone-300">
              Noda is 10x faster than typing.
            </p>
            <Button
              className="flex items-center gap-2 rounded-full bg-transparent dark:border-zinc-700 dark:text-stone-300"
              variant="outline"
            >
              <Apple className="h-4 w-4" />
              Download for Mac
            </Button>
          </div>

          {/* Product Column */}
          <div>
            <h4 className="font-semibold text-stone-900 dark:text-stone-100">
              Product
            </h4>
            <ul className="mt-6 space-y-3 text-sm text-stone-700 dark:text-stone-300">
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  What's new
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Use cases
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Workflow
                </a>
              </li>
            </ul>
          </div>

          {/* Pricing Column */}
          <div>
            <h4 className="font-semibold text-stone-900 dark:text-stone-100">
              Pricing
            </h4>
            <ul className="mt-6 space-y-3 text-sm text-stone-700 dark:text-stone-300">
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  For Individual
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  For Team
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  For Enterprise
                </a>
              </li>
            </ul>
          </div>

          {/* Resources Column */}
          <div>
            <h4 className="font-semibold text-stone-900 dark:text-stone-100">
              Resources
            </h4>
            <ul className="mt-6 space-y-3 text-sm text-stone-700 dark:text-stone-300">
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Changelog
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Getting Started
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  License
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Divider */}
        <div className="my-12 border-stone-200 border-t dark:border-zinc-700" />

        {/* Bottom Section */}
        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
          <div className="text-sm text-stone-600 dark:text-stone-400">
            © 2030 Noda.ai
          </div>
          <div className="flex flex-wrap gap-4 text-sm text-stone-600 sm:gap-6 dark:text-stone-400">
            <a
              className="underline hover:text-stone-900 dark:hover:text-stone-100"
              href="#"
            >
              Privacy
            </a>
            <a
              className="underline hover:text-stone-900 dark:hover:text-stone-100"
              href="#"
            >
              Terms & Conditions
            </a>
            <a
              className="underline hover:text-stone-900 dark:hover:text-stone-100"
              href="#"
            >
              Terms & Conditions
            </a>
          </div>
          <div className="flex gap-4">
            <a
              className="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100"
              href="#"
            >
              <HugeiconsIcon
                className="size-5 text-code-foreground sm:size-4"
                icon={InstagramIcon}
                strokeWidth={2}
              />
            </a>
            <a
              className="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100"
              href="#"
            >
              <X className="h-5 w-5" />
            </a>
            <a
              className="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100"
              href="#"
            >
              <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}