import type { Metadata } from 'next'
import Link from 'next/link'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import { siteConfig } from '@/lib/site'
import { spanishSeoPageProfiles } from '@/lib/spanishSeoPages'

export const metadata: Metadata = {
  title: 'GreenLens en español - Identificar y cuidar plantas',
  description:
    'GreenLens en español: identifica plantas por foto, organiza cuidados, recibe recordatorios y diagnostica sintomas comunes.',
  alternates: {
    canonical: '/es',
    languages: {
      es: '/es',
      'x-default': '/',
    },
  },
  openGraph: {
    title: 'GreenLens en español - Identificar y cuidar plantas',
    description:
      'Identifica plantas por foto, organiza cuidados, recibe recordatorios y diagnostica sintomas comunes con GreenLens.',
    url: `${siteConfig.domain}/es`,
    type: 'website',
    locale: 'es_ES',
  },
}

const pages = [
  spanishSeoPageProfiles['identificador-de-plantas'],
  spanishSeoPageProfiles['escaner-de-plantas'],
  spanishSeoPageProfiles['app-para-cuidar-plantas'],
  spanishSeoPageProfiles['diagnosticar-enfermedades-plantas'],
  spanishSeoPageProfiles['comparar-google-lens'],
]

export default function SpanishHomePage() {
  return (
    <>
      <Navbar />
      <main className="comparison-page">
        <section className="comparison-hero">
          <div className="container comparison-hero-grid">
            <div className="comparison-hero-copy">
              <p className="tag">GreenLens en español</p>
              <h1>Identifica, cuida y rescata tus plantas con mas claridad.</h1>
              <p className="comparison-lead">
                Escanea una planta, entiende que necesita y organiza cuidados, recordatorios y diagnostico desde una sola app.
              </p>
              <div className="comparison-actions">
                <a href="#cta" className="btn-primary">Probar GreenLens</a>
                <a href="#guias" className="btn-outline">Ver guias</a>
              </div>
            </div>

            <aside className="comparison-hero-card">
              <p className="comparison-card-label">Arquitectura en español</p>
              <p>
                Esta seccion agrupa las paginas principales para busquedas en español:
                identificacion, escaneo, cuidado, diagnostico y comparacion con Google Lens.
              </p>
            </aside>
          </div>
        </section>

        <section className="comparison-links" id="guias">
          <div className="container comparison-links-grid">
            {pages.map((page) => (
              <Link key={page.slug} href={page.canonical} className="comparison-link-card">
                <p className="comparison-mini-label">Guia</p>
                <h2>{page.h1}</h2>
                <p>{page.metaDescription}</p>
              </Link>
            ))}
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}