"use client";
import Image from 'next/image';
import Link from 'next/link';
import { BsLinkedin } from "react-icons/bs";
import { Schibsted_Grotesk, Fraunces } from 'next/font/google'
import classnames from 'classnames';

const font = Schibsted_Grotesk({ subsets: ['latin'] })
const headerFont = Fraunces({ subsets: ['latin'] })

const Footer = () => {
  return (
    <>
        <footer className="m-h-[135vh] bg-deepcove flex justify-center py-30">
            <div className={classnames("w-11/12 md:flex md:items-center md:justify-evenly text-platinum", font.className)}>
                <div className='w-1/2 h-full flex flex-col justify-between'>
                    <div className='w-full flex justify-start'>
                        <Image
                            src="/images/bbstpa-forsite.png"
                            alt="Britton Logo"
                            width={410}
                            height={120}
                        />
                    </div>
                    <div className='w-full flex flex-col justify-start ml-[22px]'>
                        <div className='flex'>
                            <Link href="https://www.linkedin.com/company/discovery-insurance">
                                <BsLinkedin size={32} className='hover:text-atmosphere' />
                            </Link>
                        </div>
                        <ul className="flex flex-col pt-2 text-md font-semibold">
                            <li className='pt-1'>
                                <a href="#" className="hover:text-atmosphere">Terms of Service</a>
                            </li>
                            <li className='pt-1'>
                                <a href="#" className="hover:text-atmosphere">Website Privacy Statement</a>
                            </li>
                            <li className='pt-3 font-normal text-xs'>
                                © Copyright 2025 Britton Benefit Services, LLC All Rights Reserved
                                <br />
                                604 North Queen St., Kinston, NC 28502
                            </li>
                        </ul>
                    </div>
                </div>
                <div className='w-1/4 h-full flex flex-col justify-start pt-5'>
                    <div className={classnames("text-xl text-bluemana pb-12", headerFont.className)}>
                        <div className="pb-6">
                            <a href="#" className="hover:text-bronze">Log In?</a>
                        </div>
                        <div className="text-xl border-b border-bronze mt-4 pb-2 mr-20">Resources</div>
                    </div>
                    <ul className="pt-3 text-md font-medium">
                        <li className="text-bronze pb-4">
                            Members
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Members Landing</a>
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Find a Medical Provider</a>
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Obtain Rx Information</a>
                        </li>
                    </ul>
                    <ul className="pt-7 text-md font-medium">
                        <li className="text-bronze pb-4">
                            Employers
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Employers Landing</a>
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Self-Funded Plans</a>
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Employer Services</a>
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Control Health Care Costs</a>
                        </li>
                    </ul>
                    <ul className="pt-7 text-md font-medium">
                        <li className="text-bronze mb-4">
                            Providers
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Providers Landing</a>
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Eligibility Lookup</a>
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Contact BBS</a>
                        </li>
                    </ul>
                    <ul className="pt-7 text-md font-medium">
                        <li className="text-bronze mb-4">
                            Brokers
                        </li>
                        <li className='pt-2'>
                            <a href="#" className='hover:text-bluemana'>Brokers Landing</a>
                        </li>
                    </ul>
                </div>
                <div className='w-1/4 h-full flex flex-col justify-start pt-5'>
                    <div className={classnames("text-xl text-bluemana pb-12", headerFont.className)}>
                        <div className="pb-6">
                            <a href="#" className="hover:text-bronze">Get a Quote</a>
                        </div>
                        <div className="text-xl border-b border-bronze mt-4 pb-2 mr-20">Company</div>
                    </div>
                    <ul className="pt-3 text-md font-medium">
                        <li className='pt-3'>
                            <a href="#" className='hover:text-bluemana' >About</a>
                        </li>
                        <li className='pt-6'>
                            <a href="#" className='hover:text-bluemana' >Careers</a>
                        </li>
                        <li className='pt-6'>
                            <a href="#" className='hover:text-bluemana' >Contact Us</a>
                        </li>
                    </ul>
                </div>
            </div>
        </footer>
    </>
  );
};

export default Footer;