Greenlens/greenlns-landing/components/GuideLinks.tsx

'use client'

import Link from 'next/link'
import { useLang } from '@/context/LangContext'
import type { Lang } from '@/lib/i18n'

interface GuideCard {
  href: string
  tag: string
  title: string
  description: string
}

const heading: Record<Lang, { tag: string; title: string }> = {
  de: { tag: 'Guides', title: 'Pflanzen schneller erkennen und richtig handeln.' },
  en: { tag: 'Guides', title: 'Identify plants faster and act with confidence.' },
  es: { tag: 'Guías', title: 'Identifica plantas más rápido y actúa con claridad.' },
}

const cards: Record<Lang, GuideCard[]> = {
  de: [
    {
      href: '/blumen-scanner',
      tag: 'Blumen',
      title: 'Blumen Scanner',
      description: 'Blumen per Foto erkennen, Namen erhalten und direkt Pflegehinweise nutzen.',
    },
    {
      href: '/pflanzen-bestimmen',
      tag: 'Pflanzen',
      title: 'Pflanzen bestimmen',
      description: 'Pflanze scannen, Artname sehen und den passenden Pflegeplan erhalten.',
    },
    {
      href: '/giess-erinnerung-app',
      tag: 'Gießerinnerung',
      title: 'Gieß-Erinnerung App',
      description: 'Nie wieder Gießen vergessen — Push-Erinnerungen pro Pflanze.',
    },
    {
      href: '/pflanzen-pflege-app',
      tag: 'Pflege',
      title: 'Pflanzen Pflege App',
      description: 'Pflegeplan, Push-Erinnerung und Gießrhythmus pro Pflanze verwalten.',
    },
    {
      href: '/vs/google-lens',
      tag: 'Google Lens',
      title: 'Google Pflanzen erkennen',
      description: 'Vergleiche Google Lens mit GreenLens für Pflanzenerkennung, Pflege und Diagnose.',
    },
    {
      href: '/zimmerpflanzen-bestimmen',
      tag: 'Zimmerpflanzen',
      title: 'Zimmerpflanzen bestimmen',
      description: 'Monstera, Efeutute oder Ficus? Zimmerpflanzen per Foto erkennen.',
    },
    {
      href: '/pflanzen-krankheiten-erkennen',
      tag: 'Diagnose',
      title: 'Pflanzenkrankheiten erkennen',
      description: 'Gelbe Blätter, braune Spitzen oder weiche Stiele einordnen und den nächsten Schritt finden.',
    },
  ],
  en: [
    {
      href: '/plant-identifier-app',
      tag: 'Identify',
      title: 'Plant Identifier App',
      description: 'Scan a plant, review the suggested species, and move straight to care guidance.',
    },
    {
      href: '/identify-plant-photo',
      tag: 'By photo',
      title: 'Identify plant by photo',
      description: 'Use a plant photo or picture to get the name, care plan, and reminders.',
    },
    {
      href: '/plant-scanner',
      tag: 'Scanner',
      title: 'Plant Scanner',
      description: 'Point your camera at a plant, review the suggested match, and continue with care guidance.',
    },
    {
      href: '/plant-disease-identifier',
      tag: 'Diagnosis',
      title: 'Plant Disease Identifier',
      description: 'Yellow leaves, brown tips, or soft stems? Analyze symptoms from a photo.',
    },
    {
      href: '/plant-care-app',
      tag: 'Care',
      title: 'Plant Care App',
      description: 'Care plans, watering reminders, and a collection for every plant you own.',
    },
    {
      href: '/best-plant-identification-app',
      tag: 'Compare',
      title: 'Best Plant Identification App',
      description: 'How GreenLens compares to other plant ID apps — and when to pick which.',
    },
  ],
  es: [
    {
      href: '/es/identificador-de-plantas',
      tag: 'Identificar',
      title: 'Identificador de plantas',
      description: 'Escanea una planta y entiende qué necesita en segundos.',
    },
    {
      href: '/es/escaner-de-plantas',
      tag: 'Escáner',
      title: 'Escáner de plantas',
      description: 'Apunta la cámara a cualquier planta y recibe nombre, cuidados y diagnóstico.',
    },
    {
      href: '/es/app-para-cuidar-plantas',
      tag: 'Cuidado',
      title: 'App para cuidar plantas',
      description: 'Planes de cuidado, recordatorios de riego y tu colección en una sola app.',
    },
    {
      href: '/es/diagnosticar-enfermedades-plantas',
      tag: 'Diagnóstico',
      title: 'Diagnosticar enfermedades',
      description: '¿Hojas amarillas o puntas marrones? Analiza los síntomas con una foto.',
    },
    {
      href: '/es/comparar/google-lens',
      tag: 'Google Lens',
      title: 'GreenLens vs Google Lens',
      description: 'Compara Google Lens con GreenLens para identificación, cuidado y diagnóstico.',
    },
  ],
}

export default function GuideLinks() {
  const { lang } = useLang()
  const head = heading[lang]
  const items = cards[lang]

  return (
    <section className="comparison-links" aria-labelledby="homepage-guides-heading">
      <div className="container">
        <div className="comparison-section-head">
          <p className="tag">{head.tag}</p>
          <h2 id="homepage-guides-heading">{head.title}</h2>
        </div>
        <div className="comparison-links-grid">
          {items.map((card) => (
            <Link key={card.href + card.title} href={card.href} className="comparison-link-card">
              <p className="comparison-mini-label">{card.tag}</p>
              <h3>{card.title}</h3>
              <p>{card.description}</p>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}