import { Link } from 'react-router-dom'
import { useContent, getSettings, getTreatments } from '../lib/api'
import { Facebook, Instagram, WhatsApp } from './icons'

export default function Footer() {
  const settings = useContent(getSettings)
  const treatments = useContent(getTreatments)
  if (!settings) return null

  const socials = [
    { href: settings.social.facebook, label: 'Facebook', Icon: Facebook },
    { href: settings.social.instagram, label: 'Instagram', Icon: Instagram },
    { href: settings.social.whatsapp, label: 'WhatsApp', Icon: WhatsApp },
  ].filter((s) => s.href)

  return (
    <footer className="bg-ocean-700 pt-16 text-white/80">
      <div className="wrap">
        <div className="grid gap-11 pb-12 sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1.2fr]">
          <div>
            <Link to="/" className="font-display text-[1.35rem] font-bold text-white">
              Touch <em className="text-turquoise-200">Therapies</em>
            </Link>
            <p className="mt-4 mb-5 max-w-[300px] text-[0.9rem]">{settings.tagline}.</p>
            <div className="flex gap-3">
              {socials.map(({ href, label, Icon }) => (
                <a
                  key={label}
                  href={href}
                  aria-label={label}
                  className="grid h-9 w-9 place-items-center rounded-full border border-white/30 text-white transition-all hover:-translate-y-0.5 hover:bg-turquoise-500"
                >
                  <Icon />
                </a>
              ))}
            </div>
          </div>

          <nav aria-label="Explore">
            <h4 className="mb-4 font-display text-[1.05rem] text-white">Explore</h4>
            <ul className="grid gap-2.5 text-[0.9rem]">
              {[
                ['/about', 'About Us'],
                ['/treatments', 'Treatments'],
                ['/packages', 'Packages'],
                ['/gallery', 'Gallery'],
                ['/team', 'Our Team'],
                ['/testimonials', 'Testimonials'],
                ['/blog', 'Blog'],
              ].map(([to, label]) => (
                <li key={to}>
                  <Link to={to} className="transition-colors hover:text-turquoise-200">
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <nav aria-label="Treatments">
            <h4 className="mb-4 font-display text-[1.05rem] text-white">Treatments</h4>
            <ul className="grid gap-2.5 text-[0.9rem]">
              {(treatments ?? []).slice(0, 5).map((t) => (
                <li key={t.id}>
                  <Link to="/treatments" className="transition-colors hover:text-turquoise-200">
                    {t.name}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <div>
            <h4 className="mb-4 font-display text-[1.05rem] text-white">Contact</h4>
            <ul className="grid gap-2.5 text-[0.9rem]">
              <li>{settings.address}</li>
              <li>
                <a href={`tel:${settings.phone.replace(/[^+\d]/g, '')}`} className="hover:text-turquoise-200">
                  {settings.phone}
                </a>
              </li>
              <li>
                <a href={`mailto:${settings.email}`} className="hover:text-turquoise-200">
                  {settings.email}
                </a>
              </li>
              <li>Sun–Fri: 10 AM – 6 PM</li>
            </ul>
          </div>
        </div>

        <div className="flex flex-wrap justify-between gap-3 border-t border-white/15 py-5 text-[0.82rem]">
          <span>
            © {new Date().getFullYear()} {settings.company_name}. All rights reserved.
          </span>
          <span>
            <Link to="/privacy" className="hover:text-turquoise-200">
              Privacy Policy
            </Link>{' '}
            ·{' '}
            <Link to="/terms" className="hover:text-turquoise-200">
              Terms of Service
            </Link>
          </span>
        </div>
      </div>
    </footer>
  )
}
