'use client';

import Link from 'next/link';
import { PawPrint, Heart } from 'lucide-react';

export default function Footer() {
  return (
    <footer
      style={{
        background: 'var(--color-soil)',
        color: 'var(--color-cream)',
        padding: '48px 0 24px',
        marginTop: 'auto',
      }}
    >
      <div className="container">
        {/* Top row */}
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '1fr',
            gap: '40px',
            marginBottom: '40px',
          }}
          className="md:grid-cols-3"
        >
          {/* Brand */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
              <PawPrint size={20} style={{ color: 'var(--color-terra)' }} />
              <span
                style={{
                  fontFamily: 'var(--font-playfair, Georgia, serif)',
                  fontStyle: 'italic',
                  fontWeight: 700,
                  fontSize: '20px',
                  color: 'var(--color-terra)',
                }}
              >
                PetLink
              </span>
            </div>
            <p
              style={{
                fontFamily: 'var(--font-body)',
                fontSize: '14px',
                lineHeight: 1.7,
                color: 'rgba(250,246,240,0.65)',
                maxWidth: '260px',
              }}
            >
              Conectamos adoptantes, doadores e canis em todo o território português. Cada adopção é uma vida transformada.
            </p>
          </div>

          {/* Links */}
          <div>
            <p
              style={{
                fontFamily: 'var(--font-mono, monospace)',
                fontSize: '10px',
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                color: 'rgba(250,246,240,0.4)',
                marginBottom: '16px',
              }}
            >
              Plataforma
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {[
                { href: '/main/animals', label: 'Explorar animais' },
                { href: '/main/donate', label: 'Fazer uma doação' },
                { href: '/main/shelters', label: 'Canis parceiros' },
                { href: '/auth/register', label: 'Criar conta' },
              ].map(({ href, label }) => (
                <Link
                  key={href}
                  href={href}
                  style={{
                    fontFamily: 'var(--font-body)',
                    fontSize: '14px',
                    color: 'rgba(250,246,240,0.7)',
                    textDecoration: 'none',
                    transition: 'color 180ms ease',
                  }}
                  onMouseEnter={e => ((e.target as HTMLElement).style.color = 'var(--color-terra)')}
                  onMouseLeave={e => ((e.target as HTMLElement).style.color = 'rgba(250,246,240,0.7)')}
                >
                  {label}
                </Link>
              ))}
            </div>
          </div>

          {/* Legal */}
          <div>
            <p
              style={{
                fontFamily: 'var(--font-mono, monospace)',
                fontSize: '10px',
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                color: 'rgba(250,246,240,0.4)',
                marginBottom: '16px',
              }}
            >
              Legal
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {[
                { href: '/privacy', label: 'Política de Privacidade' },
                { href: '/terms', label: 'Termos de Utilização' },
                { href: '/rgpd', label: 'RGPD' },
                { href: '/contact', label: 'Contacto' },
              ].map(({ href, label }) => (
                <Link
                  key={href}
                  href={href}
                  style={{
                    fontFamily: 'var(--font-body)',
                    fontSize: '14px',
                    color: 'rgba(250,246,240,0.7)',
                    textDecoration: 'none',
                    transition: 'color 180ms ease',
                  }}
                  onMouseEnter={e => ((e.target as HTMLElement).style.color = 'var(--color-terra)')}
                  onMouseLeave={e => ((e.target as HTMLElement).style.color = 'rgba(250,246,240,0.7)')}
                >
                  {label}
                </Link>
              ))}
            </div>
          </div>
        </div>

        {/* Divider */}
        <div
          style={{
            borderTop: '1px solid rgba(250,246,240,0.1)',
            paddingTop: '24px',
            display: 'flex',
            flexDirection: 'column',
            gap: '8px',
            alignItems: 'center',
            textAlign: 'center',
          }}
        >
          <p
            style={{
              fontFamily: 'var(--font-body)',
              fontSize: '13px',
              color: 'rgba(250,246,240,0.4)',
              display: 'flex',
              alignItems: 'center',
              gap: '6px',
            }}
          >
            Feito com
            <Heart size={12} style={{ color: 'var(--color-terra)', fill: 'var(--color-terra)' }} />
            em Portugal · PetLink © {new Date().getFullYear()}
          </p>
          <p
            style={{
              fontFamily: 'var(--font-mono, monospace)',
              fontSize: '11px',
              color: 'rgba(250,246,240,0.25)',
              letterSpacing: '0.06em',
            }}
          >
            PAP 2024/2025
          </p>
        </div>
      </div>
    </footer>
  );
}