// src/components/Footer.tsx
"use client";
import { useEffect, useState } from "react";

export default function Footer() {

const [year, setYear] = useState<number | null>(null);

  useEffect(() => {
    setYear(new Date().getFullYear());
  }, []);


  return (
    <footer className="p-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg transition-transform">
      <div className="max-w-7xl mx-auto px-6 py-10 grid grid-cols-1 md:grid-cols-4 gap-8">
        {/* Logo + Description */}
        <div>
          <div className="flex items-center space-x-2">
            {/* <img
              src="/vite.svg" // Replace with your logo
              alt="Prasowlabs Logo"
              className="w-10 h-10"
            /> */}
            <span className="text-xl font-bold">Prasowlabs</span>
          </div>
          <p className="mt-4 text-sm leading-6">
            Building smart SaaS products like <strong>Thinkchive</strong> and{" "}
            <strong>Image Optimizer</strong> to simplify your workflow.
          </p>
        </div>

        {/* Products */}
        <div>
          <h3 className="font-semibold mb-4">Products</h3>
          <ul className="space-y-2 text-sm">
            <li>
              <a href="https://idea.prasowlabs.in/" className="hover:underline">
                Thinkchive
              </a>
            </li>
            <li>
              <a href="/optimize" className="hover:underline">
                Image Optimizer
              </a>
            </li>
          </ul>
        </div>

        {/* Quick Links */}
        <div>
          <h3 className="font-semibold mb-4">Quick Links</h3>
          <ul className="space-y-2 text-sm">
            <li><a href="/contact" className="hover:underline">Contact Us</a></li>
            <li><a href="/pricing" className="hover:underline">Pricing</a></li>
            <li><a href="/refund" className="hover:underline">Refund Policy</a></li>
            <li><a href="/disclaimer" className="hover:underline">Disclaimer</a></li>
            <li><a href="/terms" className="hover:underline">Terms & Conditions</a></li>
            <li><a href="/privacy" className="hover:underline">Privacy Policy</a></li>
          </ul>
        </div>

        {/* Contact */}
        <div>
          <h3 className="font-semibold mb-4">Contact</h3>
          <ul className="space-y-2 text-sm">
            <li>Email: support@prasowlabs.in</li>
            <li>Website: prasowlabs.in</li>
          </ul>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t border-white/20 mt-8 pt-4 text-center text-sm">
        <p>
          &copy; {year} Prasowlabs.in — All Rights Reserved.
        </p>
      </div>
    </footer>
  )
}