import React from 'react';
import type { LegalPageType, Page } from '../types';

interface FooterProps {
    navigateToLegal: (type: LegalPageType) => void;
    navigateTo: (page: Page) => void;
}

const Footer: React.FC<FooterProps> = ({ navigateToLegal, navigateTo }) => {
  return (
    <footer className="bg-gray-800 text-white">
      <div className="container mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
          <div className="space-y-8 xl:col-span-1">
             <a className="flex items-center space-x-2 cursor-pointer">
              <span className="text-2xl font-bold text-green-400">সব সেবা</span>
              <span className="text-2xl font-light text-gray-300">.শপ</span>
            </a>
            <p className="text-gray-400 text-base">
              আপনার সকল অনলাইন সেবার একটি নির্ভরযোগ্য সমাধান কেন্দ্র। আমরা কোনো সরকারি প্রতিষ্ঠান নই, বরং সরকারি ও বেসরকারি সেবা গ্রহণে আপনাকে সহায়তা প্রদান করি।
            </p>
          </div>
          <div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
            <div className="md:grid md:grid-cols-2 md:gap-8">
              <div>
                <h3 className="text-sm font-semibold text-gray-200 tracking-wider uppercase">প্রয়োজনীয় লিঙ্ক</h3>
                <ul className="mt-4 space-y-4">
                  <li>
                    <a onClick={() => navigateToLegal('privacy')} className="text-base text-gray-400 hover:text-white cursor-pointer">গোপনীয়তা নীতি</a>
                  </li>
                  <li>
                    <a onClick={() => navigateToLegal('terms')} className="text-base text-gray-400 hover:text-white cursor-pointer">শর্তাবলি</a>
                  </li>
                   <li>
                    <a onClick={() => navigateToLegal('disclaimer')} className="text-base text-gray-400 hover:text-white cursor-pointer">দাবিত্যাগ</a>
                  </li>
                  <li>
                    <a onClick={() => navigateTo('adminLogin')} className="text-base text-gray-400 hover:text-white cursor-pointer">অ্যাডমিন লগইন</a>
                  </li>
                </ul>
              </div>
              <div className="mt-12 md:mt-0">
                <h3 className="text-sm font-semibold text-gray-200 tracking-wider uppercase">যোগাযোগ</h3>
                <ul className="mt-4 space-y-4">
                  <li className="text-base text-gray-400">ইমেইল: sobsheba24@gmail.com</li>
                  <li className="text-base text-gray-400">মোবাইল: 01311465050</li>
                  <li className="text-base text-gray-400">পূর্ব রূপসা বাজার, রূপসা, খুলনা</li>
                </ul>
              </div>
            </div>
            <div className="md:grid md:grid-cols-1 md:gap-8">
               <div>
                <h3 className="text-sm font-semibold text-gray-200 tracking-wider uppercase">আমাদের অনুসরণ করুন</h3>
                <div className="mt-4 flex space-x-6">
                    {/* Placeholder for social icons */}
                    <a href="#" className="text-gray-400 hover:text-white">
                        <span className="sr-only">Facebook</span>
                        <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
                        </svg>
                    </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="mt-12 border-t border-gray-700 pt-8">
          <p className="text-base text-gray-400 xl:text-center">&copy; {new Date().getFullYear()} sobsheba.shop. সর্বস্বত্ব সংরক্ষিত।</p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;