"use client";

import React from "react";
import Link from "next/link";
import { STORE_INFO } from "@/data/storeInfo";
import {
  InstagramIcon,
  FacebookIcon,
  TwitterIcon,
  YoutubeIcon,
} from "@/components/SocialIcons";
import {
  Phone,
  Mail,
  MapPin,
  ShieldCheck,
  Truck,
  Clock,
} from "lucide-react";

export function Footer() {
  return (
    <footer className="bg-stone-950 text-stone-300 pt-16 pb-8 border-t border-stone-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Top Feature Bar */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pb-12 border-b border-stone-800 text-xs text-stone-400">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-400 shrink-0">
              <Truck className="w-5 h-5" />
            </div>
            <div>
              <h4 className="font-bold text-stone-200 text-sm">Envío Gratis con Panettone</h4>
              <p>Directo a cualquier punto de la península en 24-48 horas.</p>
            </div>
          </div>
          
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-400 shrink-0">
              <Clock className="w-5 h-5" />
            </div>
            <div>
              <h4 className="font-bold text-stone-200 text-sm">Masa Madre 100% Natural</h4>
              <p>4 días de elaboración artesanal y fermentación lenta sin prisas.</p>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-400 shrink-0">
              <ShieldCheck className="w-5 h-5" />
            </div>
            <div>
              <h4 className="font-bold text-stone-200 text-sm">Pago 100% Seguro</h4>
              <p>Redsys oficial, Bizum, Tarjetas bancarias y PayPal.</p>
            </div>
          </div>
        </div>

        {/* Main Footer Links */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 py-12 border-b border-stone-800 text-xs">
          
          {/* Brand Info */}
          <div className="lg:col-span-2 space-y-4">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="images/logo-white.png"
              alt="Raúl Asencio Pastelerías"
              className="h-10 w-auto object-contain opacity-95"
            />
            <p className="text-stone-400 leading-relaxed font-light pr-4">
              Pertenecemos a una saga de maestros pasteleros y confiteros que se remonta a 1758. Elaboramos panettones y dulces tradicionales de manera 100% artesanal en nuestro obrador de Aspe (Alicante).
            </p>
            <div className="flex items-center gap-3 pt-2">
              <a
                href={STORE_INFO.social.instagram}
                target="_blank"
                rel="noopener noreferrer"
                className="w-8 h-8 rounded-full bg-stone-900 hover:bg-pink-600 hover:text-white text-stone-400 flex items-center justify-center transition"
                aria-label="Instagram"
              >
                <InstagramIcon className="w-4 h-4" />
              </a>
              <a
                href={STORE_INFO.social.facebook}
                target="_blank"
                rel="noopener noreferrer"
                className="w-8 h-8 rounded-full bg-stone-900 hover:bg-blue-600 hover:text-white text-stone-400 flex items-center justify-center transition"
                aria-label="Facebook"
              >
                <FacebookIcon className="w-4 h-4" />
              </a>
              <a
                href={STORE_INFO.social.twitter}
                target="_blank"
                rel="noopener noreferrer"
                className="w-8 h-8 rounded-full bg-stone-900 hover:bg-sky-500 hover:text-white text-stone-400 flex items-center justify-center transition"
                aria-label="Twitter"
              >
                <TwitterIcon className="w-4 h-4" />
              </a>
              <a
                href={STORE_INFO.social.youtube}
                target="_blank"
                rel="noopener noreferrer"
                className="w-8 h-8 rounded-full bg-stone-900 hover:bg-red-600 hover:text-white text-stone-400 flex items-center justify-center transition"
                aria-label="YouTube"
              >
                <YoutubeIcon className="w-4 h-4" />
              </a>
            </div>
          </div>

          {/* Specialities Links */}
          <div className="space-y-3">
            <h4 className="font-serif font-bold text-stone-200 text-sm">
              Especialidades
            </h4>
            <ul className="space-y-2 text-stone-400">
              <li>
                <Link href="#catalogo" className="hover:text-amber-300 transition">
                  Panettone Milanés Tradicional
                </Link>
              </li>
              <li>
                <Link href="#catalogo" className="hover:text-amber-300 transition">
                  Panettone de Chocolate y Naranja
                </Link>
              </li>
              <li>
                <Link href="#catalogo" className="hover:text-amber-300 transition">
                  Panettone Rocher & Bombón
                </Link>
              </li>
              <li>
                <Link href="#catalogo" className="hover:text-amber-300 transition">
                  Panettone de Turrón de Jijona
                </Link>
              </li>
              <li>
                <Link href="#catalogo" className="hover:text-amber-300 transition">
                  Toñas y Magdalenas Artesanales
                </Link>
              </li>
              <li>
                <Link href="#catalogo" className="hover:text-amber-300 transition">
                  Colomba Tradicional de Pascua
                </Link>
              </li>
            </ul>
          </div>

          {/* Stores & Contact */}
          <div className="space-y-3">
            <h4 className="font-serif font-bold text-stone-200 text-sm">
              Nuestras Tiendas
            </h4>
            <ul className="space-y-3 text-stone-400">
              <li>
                <strong className="text-stone-300 block">Pastelería Aspe (Obrador)</strong>
                <span>Parque Dr. Calatayud, 18</span>
                <span className="block text-amber-300/80">Tel: 965 49 33 73</span>
              </li>
              <li>
                <strong className="text-stone-300 block">Pastelería Novelda</strong>
                <span>Av. de la Constitución, 43</span>
                <span className="block text-amber-300/80">Tel: 965 60 12 02</span>
              </li>
            </ul>
          </div>

          {/* Legal & Info */}
          <div className="space-y-3">
            <h4 className="font-serif font-bold text-stone-200 text-sm">
              Información & Legal
            </h4>
            <ul className="space-y-2 text-stone-400">
              <li>
                <Link href="#historia" className="hover:text-amber-300 transition">
                  Sobre Nosotros (Desde 1758)
                </Link>
              </li>
              <li>
                <Link href="#artesania" className="hover:text-amber-300 transition">
                  Elaboración y Masa Madre
                </Link>
              </li>
              <li>
                <Link href="#blog" className="hover:text-amber-300 transition">
                  Blog y Apariciones en TV
                </Link>
              </li>
              <li>
                <span className="hover:text-amber-300 transition cursor-pointer">
                  Condiciones Generales de Venta
                </span>
              </li>
              <li>
                <span className="hover:text-amber-300 transition cursor-pointer">
                  Política de Privacidad y Cookies
                </span>
              </li>
              <li>
                <Link href="/admin" className="text-amber-400 font-semibold hover:underline">
                  Acceso Panel de Gestión
                </Link>
              </li>
            </ul>
          </div>

        </div>

        {/* Bottom Bar: Copyright & Payment Badges */}
        <div className="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-stone-500">
          <div>
            Copyright © {new Date().getFullYear()} <strong>Raúl Asencio Pastelerías</strong> · Todos los derechos reservados.
          </div>
          <div className="flex items-center gap-3">
            <span className="text-[10px] text-stone-400 font-bold uppercase tracking-wider bg-stone-900 px-2.5 py-1 rounded border border-stone-800">
              Redsys TPV
            </span>
            <span className="text-[10px] text-stone-400 font-bold uppercase tracking-wider bg-stone-900 px-2.5 py-1 rounded border border-stone-800">
              Bizum
            </span>
            <span className="text-[10px] text-stone-400 font-bold uppercase tracking-wider bg-stone-900 px-2.5 py-1 rounded border border-stone-800">
              Visa
            </span>
            <span className="text-[10px] text-stone-400 font-bold uppercase tracking-wider bg-stone-900 px-2.5 py-1 rounded border border-stone-800">
              MasterCard
            </span>
            <span className="text-[10px] text-stone-400 font-bold uppercase tracking-wider bg-stone-900 px-2.5 py-1 rounded border border-stone-800">
              PayPal
            </span>
          </div>
        </div>

      </div>
    </footer>
  );
}