import { motion } from "framer-motion";
import styles from "./footer.module.css";
import { FaPhone, FaEnvelope, FaInstagram, FaMapMarkerAlt, FaUser } from "react-icons/fa";
import { useTranslation } from "react-i18next";


export default function Footer() {
  const { t } = useTranslation();
  return (
    <motion.footer
      initial={{ y: 80, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.4, delay: 0.2 }}
      className={`${styles.footer} bg-gradient-to-t from-zinc-950 to-black border-t border-gray-800 pt-10 px-6 mt-8 text-white/80`}
    >
      <div className="mx-auto max-w-7xl">
        {/* Top content: contacts + address + map */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
          {/* Left column: Kontakt + Adresa stacked */}
          <div className="space-y-8">
            {/* Contacts */}
            <section aria-labelledby="footer-contacts">
              <h3 id="footer-contacts" className="text-white text-lg font-semibold flex items-center gap-2">
                <span className="inline-block h-1.5 w-1.5 rounded-full bg-red-600" />
                {t('footer.contacts')}
              </h3>
              <ul className="mt-4 space-y-5 md:space-y-6 text-sm w-fit">
                {/* Contact block: Rostislav (stacked) */}
                <li className="rounded-lg bg-white/5 ring-1 ring-white/10 p-3 md:p-4">
                  <div className="flex flex-col gap-2">
                    <div className="flex items-center gap-2">
                      <FaUser className="text-white/70" />
                      <span>Rostislav Pecha</span>
                    </div>
                    <a href="tel:+420777309595" className="flex items-center gap-2 hover:text-white w-fit">
                      <FaPhone className="text-white/70" />
                      <span className="whitespace-nowrap">+420 777 309 595</span>
                    </a>
                  </div>
                </li>
                {/* Contact block: Lukáš (stacked) */}
                <li className="rounded-lg bg-white/5 ring-1 ring-white/10 p-3 md:p-4">
                  <div className="flex flex-col gap-2">
                    <div className="flex items-center gap-2">
                      <FaUser className="text-white/70" />
                      <span>Lukáš Pecha</span>
                    </div>
                    <a href="tel:+420775309595" className="flex items-center gap-2 hover:text-white w-fit">
                      <FaPhone className="text-white/70" />
                      <span className="whitespace-nowrap">+420 775 309 595</span>
                    </a>
                  </div>
                </li>
                <li className="flex items-center gap-2">
                  <FaEnvelope className="text-white/70" />
                  <a href="mailto:prevodovky@centrum.cz" className="hover:text-white">prevodovky@centrum.cz</a>
                </li>
                <li className="flex items-center gap-2">
                  <FaInstagram className="text-white/70" />
                  <a
                    href="https://instagram.com/at_automatic_transmision_cz"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="hover:text-white"
                  >
                    @at_automatic_transmision_cz
                  </a>
                </li>
              </ul>
            </section>

            {/* Address */}
            <section aria-labelledby="footer-address">
              <h3 id="footer-address" className="text-white text-lg font-semibold flex items-center gap-2">
                <span className="inline-block h-1.5 w-1.5 rounded-full bg-red-600" />
                {t('footer.address')}
              </h3>
              <div className="mt-3 flex items-start gap-3 text-sm">
                <FaMapMarkerAlt className="mt-1 text-white/70" />
                <address className="not-italic">
                  U haldy 60/32
                  <br />
                  700 30 Ostrava-Hrabůvka
                  <br />
                  Czech Republic
                </address>
              </div>
            </section>
          </div>

          {/* Right column: Map */}
          <section aria-labelledby="footer-map">
            <h3 id="footer-map" className="sr-only">{t('footer.map')}</h3>
            <div className="w-full overflow-hidden rounded-lg ring-1 ring-gray-800 shadow-sm">
              <iframe
                title={t('footer.mapTitle')}
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d453.46808205152774!2d18.270652943594587!3d49.79286407473225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4713e4b479250855%3A0x5ac735eecc1a7dd4!2sAutomatic%20Transmission%20CZ%20s.r.o.%20-%20Automatick%C3%A9%20p%C5%99evodovky%20Ostrava%20Hrab%C5%AFvka!5e1!3m2!1scs!2scz!4v1761069490812!5m2!1scs!2scz"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
                className="block w-full h-[280px] sm:h-[340px] lg:h-[420px]"
                style={{ border: 0 }}
              />
            </div>
          </section>
        </div>

        {/* Bottom bar */}
        <div className="mt-8 border-t border-gray-800/80 py-4 text-center text-s text-white/60">
          {new Date().getFullYear()} © <a style={{textDecoration: "underline"}} href="https://vontor.cz">vontor.cz</a>. {t('footer.rights')}
        </div>
      </div>
    </motion.footer>
  );
}