import Link from 'next/link'
import { Logo } from './terrano/Logo'

const COLS: { title: string; items: { label: string; href: string }[] }[] = [
  {
    title: 'Marketplace',
    items: [
      { label: 'Activos', href: '/marketplace' },
      { label: 'Productos', href: '/marketplace/productos' },
      { label: 'Servicios', href: '/marketplace/servicios' },
      { label: 'Inversionistas', href: '/inversionistas' },
    ],
  },
  {
    title: 'Plataforma',
    items: [
      { label: 'Mapa', href: '/mapa' },
      { label: 'Mercado', href: '/mercado' },
      { label: 'Cómo funciona', href: '/como-funciona' },
      { label: 'Publicar activo', href: '/dashboard/publicar-activo' },
    ],
  },
  {
    title: 'Cuenta',
    items: [
      { label: 'Ingresar', href: '/login' },
      { label: 'Registrarse', href: '/registro' },
      { label: 'Mi panel', href: '/dashboard' },
    ],
  },
]

export function Footer() {
  return (
    <footer style={{ padding: '72px 28px 40px', marginTop: 64, borderTop: '1px solid var(--line-soft)' }}>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 40,
          paddingBottom: 32,
          borderBottom: '1px solid var(--line-soft)',
        }}
        className="footer-grid"
      >
        <div>
          <Logo size={17} />
          <p style={{ marginTop: 14, fontSize: 13, color: 'var(--muted)', maxWidth: 340, lineHeight: 1.5 }}>
            Plataforma para la transacción de activos mineros en Latinoamérica. Verificación de
            empresas y documentación técnica estandarizada.
          </p>
        </div>
        {COLS.map((col) => (
          <div key={col.title}>
            <div
              className="mono uppercase-wide"
              style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em', marginBottom: 12 }}
            >
              {col.title}
            </div>
            {col.items.map((i) => (
              <Link
                key={i.label}
                href={i.href}
                style={{ display: 'block', fontSize: 13, padding: '4px 0', color: 'var(--ink-2)' }}
              >
                {i.label}
              </Link>
            ))}
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 8,
          marginTop: 20,
          fontSize: 11,
        }}
        className="mono uppercase-wide"
      >
        <span style={{ color: 'var(--muted)' }}>© 2026 Portal Minería · Chile</span>
        <span style={{ color: 'var(--muted)' }}>Datos · BD local</span>
      </div>
    </footer>
  )
}