'use client'

import { siteConfig } from '@/config/site'
import { content } from '@/content'
import Link from 'next/link'

export default function Footer() {
  return (
    <footer 
      className="border-t"
      style={{ 
        background: 'var(--color-background-secondary)',
        borderColor: 'var(--color-border)'
      }}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 lg:gap-12">
          {/* Company Info */}
          <div className="md:col-span-2">
            <Link 
              href="/" 
              className="inline-flex items-center gap-2 text-xl font-bold mb-4 transition-colors duration-200"
              style={{ color: 'var(--color-primary-600)' }}
            >
              {siteConfig.general.name}
              <span 
                className="inline-block w-2 h-2 rounded-full animate-pulse-slow"
                style={{ background: 'var(--color-success-500)' }}
              />
            </Link>
            <p 
              className="mb-6 max-w-md leading-relaxed"
              style={{ color: 'var(--color-foreground-muted)' }}
            >
              {siteConfig.general.description}
            </p>
            <div className="space-y-2 text-sm" style={{ color: 'var(--color-foreground-muted)' }}>
              <a 
                href={`mailto:${siteConfig.contact.email}`}
                className="flex items-center gap-2 group transition-colors duration-200 hover:text-blue-600"
                style={{ color: 'var(--color-foreground-secondary)' }}
              >
                <span 
                  className="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200 group-hover:scale-110"
                  style={{ background: 'var(--color-primary-100)' }}
                >
                  ✉️
                </span>
                <span>{siteConfig.contact.email}</span>
              </a>
              <div 
                className="flex items-center gap-2"
                style={{ color: 'var(--color-foreground-secondary)' }}
              >
                <span 
                  className="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center"
                  style={{ background: 'var(--color-primary-100)' }}
                >
                  🏢
                </span>
                <span>{content.common.footer.address}</span>
              </div>
            </div>
          </div>

          {/* Navigation Links */}
          <div>
            <h3 
              className="text-sm font-semibold uppercase tracking-wider mb-4"
              style={{ color: 'var(--color-foreground)' }}
            >
              Navigáció
            </h3>
            <ul className="space-y-3">
              {siteConfig.navigation.footer.map((item) => (
                <li key={item.href}>
                  <a 
                    href={item.href} 
                    className="group flex items-center gap-2 text-sm transition-all duration-200"
                    style={{ color: 'var(--color-foreground-muted)' }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.color = 'var(--color-primary-600)'
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.color = 'var(--color-foreground-muted)'
                    }}
                  >
                    <span 
                      className="w-1.5 h-1.5 rounded-full transition-all duration-200 group-hover:scale-150"
                      style={{ background: 'var(--color-primary-500)' }}
                    />
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Services */}
          <div>
            <h3 
              className="text-sm font-semibold uppercase tracking-wider mb-4"
              style={{ color: 'var(--color-foreground)' }}
            >
              Szolgáltatások
            </h3>
            <ul className="space-y-3">
              {content.pages.home.services.items.map((service) => (
                <li 
                  key={service.id} 
                  className="flex items-center gap-2 text-sm"
                  style={{ color: 'var(--color-foreground-muted)' }}
                >
                  <span className="text-base">{service.icon}</span>
                  {service.title}
                </li>
              ))}
              <li 
                className="flex items-center gap-2 text-sm"
                style={{ color: 'var(--color-foreground-muted)' }}
              >
                <span className="text-base">🛠️</span>
                Műszaki támogatás
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom section */}
        <div 
          className="border-t pt-8 mt-8"
          style={{ borderColor: 'var(--color-border)' }}
        >
          <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
            <p
              className="text-sm"
              style={{ color: 'var(--color-foreground-muted)' }}
            >
              {/* Copyright text is CMS-editable (common.json); {year} resolves to the current year */}
              {content.common.footer.copyright.replace('{year}', String(new Date().getFullYear()))}
            </p>
            <div className="flex items-center gap-6">
              {siteConfig.footer.links.map((link) => (
                <a
                  key={link.href}
                  href={link.href}
                  className="text-sm transition-all duration-200 link-underline relative"
                  style={{ color: 'var(--color-foreground-muted)' }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.color = 'var(--color-primary-600)'
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.color = 'var(--color-foreground-muted)'
                  }}
                >
                  {link.label}
                </a>
              ))}
            </div>
          </div>
        </div>

        {/* Tech badge */}
        <div className="mt-8 flex justify-center">
          <div 
            className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs"
            style={{ 
              background: 'var(--color-background-tertiary)',
              color: 'var(--color-foreground-muted)'
            }}
          >
            <span>Powered by</span>
            <span className="font-medium" style={{ color: 'var(--color-foreground)' }}>Next.js</span>
            <span>•</span>
            <span className="font-medium" style={{ color: 'var(--color-foreground)' }}>Tailwind CSS</span>
          </div>
        </div>
      </div>
    </footer>
  )
}