Footer 6

"use client";

import { Flower } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function FooterSanaSimplified() {
  return (
    <footer className="bg-stone-100 dark:bg-zinc-900">
      {/* Hero Banner */}
      <div className="border-stone-200 border-b bg-white px-4 py-6 sm:px-6 dark:border-zinc-700 dark:bg-zinc-950">
        <div className="mx-auto max-w-7xl">
          <div className="flex flex-col items-center justify-between gap-6 rounded-xl bg-stone-50 p-4 sm:p-6 md:flex-row md:gap-12 dark:bg-zinc-900">
            <div className="flex items-center gap-3">
              <Flower className="h-6 w-6 text-stone-700 dark:text-stone-300" />
              <div>
                <h3 className="font-bold font-serif text-lg text-stone-900 dark:text-stone-100">
                  Your mindset shapes{" "}
                  <span className="text-amber-600">everything.</span>
                </h3>
                <p className="text-stone-600 text-xs dark:text-stone-400">
                  Inhale the future, exhale the past.
                </p>
              </div>
            </div>
            <Button className="whitespace-nowrap rounded-full bg-teal-700 hover:bg-teal-800">
              Join Sana—today
            </Button>
          </div>
        </div>
      </div>

      {/* Main Footer */}
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 sm:py-16">
        <div className="grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4">
          <div>
            <h4 className="font-semibold text-stone-900 dark:text-stone-100">
              Explore
            </h4>
            <ul className="mt-4 space-y-2 text-sm text-stone-700 dark:text-stone-300">
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Curated Classes
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Retreats Locations
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Training
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Wellness blog
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h4 className="font-semibold text-stone-900 dark:text-stone-100">
              Guidance
            </h4>
            <ul className="mt-4 space-y-2 text-sm text-stone-700 dark:text-stone-300">
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Book a free call
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  FAQs & Supports
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Workplace Policy
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h4 className="font-semibold text-stone-900 dark:text-stone-100">
              Support
            </h4>
            <ul className="mt-4 space-y-2 text-sm text-stone-700 dark:text-stone-300">
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Articles
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Documentation
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Tutorials
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Help Center
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h4 className="font-semibold text-stone-900 dark:text-stone-100">
              Connect
            </h4>
            <ul className="mt-4 space-y-2 text-sm text-stone-700 dark:text-stone-300">
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Community Forum
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  Instagram
                </a>
              </li>
              <li>
                <a
                  className="hover:text-stone-900 dark:hover:text-stone-100"
                  href="#"
                >
                  YouTube
                </a>
              </li>
            </ul>
          </div>
        </div>

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

        {/* Bottom Section */}
        <div className="flex flex-col gap-6 text-sm text-stone-600 md:flex-row md:items-center md:justify-between dark:text-stone-400">
          <div>
            We honor the land we practice on.{" "}
            <span className="font-medium text-amber-700 dark:text-amber-500">
              2%
            </span>{" "}
            of profits support Indigenous-led wellness initiatives.
          </div>
          <div className="flex flex-wrap gap-4 sm:gap-6">
            <a
              className="underline hover:text-stone-900 dark:hover:text-stone-100"
              href="#"
            >
              Terms
            </a>
            <a
              className="underline hover:text-stone-900 dark:hover:text-stone-100"
              href="#"
            >
              Code of Ethics
            </a>
            <a
              className="underline hover:text-stone-900 dark:hover:text-stone-100"
              href="#"
            >
              Privacy Policy
            </a>
          </div>
        </div>

        <div className="mt-4 text-stone-600 text-xs dark:text-stone-400">
          ©2025, Sana.co
        </div>
      </div>
    </footer>
  );
}