import { BUNDLES_ENABLED } from '@/lib/features';
import React from 'react';

const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-luxury-dark border-t-2 border-luxury-gold/30">
      <div className="w-full">
        {/* Main Footer Content */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 sm:gap-8 md:gap-12">
            {/* Column 1 - Brand */}
            <div className="flex flex-col items-center sm:items-start text-center sm:text-left">
              <h3 className="text-2xl sm:text-xl md:text-2xl font-aptos font-bold text-luxury-gold mb-4">
                VYSTŘÍKEJ TO
              </h3>
              <p className="text-luxury-light/70 text-base sm:text-sm md:text-base leading-relaxed mb-6">
                Exkluzivní kolekce celých parfémů od nejlepších světových značek.
              </p>
              <div className="flex gap-6 justify-center sm:justify-start">
                <a
                  href="https://www.instagram.com/vystrikejto/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-luxury-gold hover:text-yellow-300 transition-colors"
                  aria-label="Instagram"
                >
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" stroke="currentColor" strokeWidth="2"></rect>
                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" stroke="currentColor" strokeWidth="2"></path>
                  </svg>
                </a>
                <a
                  href="https://www.tiktok.com/@vystrikejto"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-luxury-gold hover:text-yellow-300 transition-colors"
                  aria-label="TikTok"
                >
                  <svg width="24" height="24" viewBox="0 0 512 512" fill="currentColor">
                    <path fill="currentColor" d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.10-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z"></path>
                  </svg>
                </a>
              </div>
            </div>

            {/* Column 2 - Shop */}
            <div className="flex flex-col items-center sm:items-start text-center sm:text-left">
              <h4 className="text-xl sm:text-lg md:text-xl font-aptos font-semibold text-luxury-light mb-4">
                Informace
              </h4>
              <ul className="space-y-3">
                <li>
                  <a
                    href="/privacy"
                    className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1"
                  >
                    Ochrana osobních údajů
                  </a>
                </li>
                <li>
                  <a
                    href="/terms"
                    className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1"
                  >
                    Obchodní podmínky
                  </a>
                </li>
                <li>
                  <a
                    href="/rights"
                    className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1"
                  >
                    Vyhrazená práva
                  </a>
                </li>
              </ul>
            </div>
            <div className="flex flex-col items-center sm:items-start text-center sm:text-left">
              <h4 className="text-xl sm:text-lg md:text-xl font-aptos font-semibold text-luxury-light mb-4">
                Rychlé odkazy
              </h4>
              <div className="grid grid-cols-2 gap-x-6">
                <ul className="space-y-3">
                  <li>
                    <a href="/brands" className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1">
                      Značky
                    </a>
                  </li>
                  {BUNDLES_ENABLED && (
                    <li>
                      <a href="/vyhodne-sady" className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1">
                        Výhodné sady
                      </a>
                    </li>
                  )}
                  <li>
                    <a href="/about" className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1">
                      O nás
                    </a>
                  </li>
                  <li>
                    <a href="/faq" className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1">
                      Dotazy
                    </a>
                  </li>
                </ul>
                <ul className="space-y-3">
                  <li>
                    <a href="/vyprodej" className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1">
                      Výprodej
                    </a>
                  </li>
                  <li>
                    <a href="/darkove-poukazy" className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1">
                      Dárkové poukazy
                    </a>
                  </li>
                  <li>
                    <a href="/reviews" className="text-luxury-light/70 hover:text-luxury-gold transition-colors text-base sm:text-sm md:text-base py-1">
                      Hodnocení obchodu
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            {/* Column 3 - Help */}
            <div className="flex flex-col items-center sm:items-start text-center sm:text-left">
              <h4 className="text-xl sm:text-lg md:text-xl font-aptos font-semibold text-luxury-light mb-4">
                Kontakt
              </h4>
              <ul className="space-y-3">
                <li className="text-luxury-light/70 text-base sm:text-sm md:text-base break-all">
                  <a href="mailto:info@vystrikejto.cz" className="hover:text-luxury-gold transition-colors">
                    info@vystrikejto.cz
                  </a>
                </li>
                <li className="text-luxury-light/70 text-base sm:text-sm md:text-base">
                  <a href="tel:+420605861472" className="hover:text-luxury-gold transition-colors">
                    +420 605 861 472
                  </a>
                </li>
                <li className="text-luxury-gold text-base sm:text-sm md:text-base">
                  Nejsme plátci DPH
                </li>
              </ul>
            </div>
          </div>

          {/* Divider */}
          <div className="border-t border-luxury-gold/20 my-8 md:my-12" />

          {/* Bottom Footer */}
          <div className="flex flex-col items-center justify-center gap-8 md:gap-6">
            {/* Delivery Carriers */}
            <div className="flex items-center justify-center gap-6 md:gap-4 flex-wrap">
              <div className="flex items-center justify-center h-5 sm:h-4 md:h-5">
                <img
                  src="/images/dopravci/balikovna.png"
                  alt="Balíkovna"
                  className="h-full object-contain hover:opacity-80 transition-opacity"
                />
              </div>
              <div className="flex h-7 w-48 items-center justify-center overflow-hidden sm:h-6 sm:w-40 md:h-7 md:w-48">
                <img
                  src="/images/dopravci/ppl2.png"
                  alt="PPL"
                  className="h-full w-full object-cover object-center hover:opacity-80 transition-opacity"
                />
              </div>
              <div className="flex items-center justify-center h-7 sm:h-6 md:h-7">
                <img
                  src="/images/dopravci/packeta.png"
                  alt="Zásilkovna"
                  className="h-full object-contain hover:opacity-80 transition-opacity"
                />
              </div>
              <div className="flex items-center justify-center h-7 sm:h-6 md:h-7">
                <img
                  src="/images/dopravci/gls.png"
                  alt="GLS"
                  className="h-full object-contain hover:opacity-80 transition-opacity"
                />
              </div>
              <div className="flex items-center justify-center h-7 sm:h-6 md:h-7">
                <img
                  src="/images/dopravci/dpd.png"
                  alt="DPD"
                  className="h-full object-contain hover:opacity-80 transition-opacity"
                />
              </div>
            </div>

            {/* Payment Methods */}
            <div className="flex items-center justify-center gap-6 md:gap-4 flex-wrap">
              <div className="flex items-center justify-center h-7 sm:h-6 md:h-7">
                <img
                  src="/images/platby/card.svg"
                  alt="Platební karta"
                  className="h-full object-contain hover:opacity-80 transition-opacity"
                />
              </div>
              <div className="flex items-center justify-center h-7 sm:h-6 md:h-7">
                <img
                  src="/images/platby/apple-pay.svg"
                  alt="Apple Pay"
                  className="h-full object-contain hover:opacity-80 transition-opacity"
                />
              </div>
              <div className="flex items-center justify-center h-7 sm:h-6 md:h-7">
                <img
                  src="/images/platby/google-pay.svg"
                  alt="Google Pay"
                  className="h-full object-contain hover:opacity-80 transition-opacity"
                />
              </div>
              <div className="flex items-center justify-center h-7 sm:h-6 md:h-7">
                <img
                  src="/images/platby/cg-hor.svg"
                  alt="Comgate"
                  className="h-full object-contain hover:opacity-80 transition-opacity"
                />
              </div>
            </div>

            <div className="flex flex-col items-center gap-3 text-center">
              <p className="text-luxury-light/60 text-sm md:text-base">
                &copy; {currentYear} VYSTŘÍKEJ TO.
              </p> <p className="text-luxury-light/60 text-sm md:text-base">Všechna práva vyhrazena.
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;