import Link from 'next/link'
import type { Lang } from '@/lib/i18n'
import { englishSeoPageSlugs, germanSeoPageSlugs, getSeoPageBySlug } from '@/lib/seoPages'
import { spanishSeoPageProfiles } from '@/lib/spanishSeoPages'
import { seoTemplateCopy } from '@/lib/seoTemplateCopy'
import { siteConfig, hasIosStoreUrl, hasAndroidStoreUrl } from '@/lib/site'

interface SeoFooterProps {
  locale: Lang
}

function slugLinks(slugs: readonly string[]) {
  return slugs
    .map((slug) => getSeoPageBySlug(slug))
    .filter((profile): profile is NonNullable<typeof profile> => Boolean(profile))
    .map((profile) => ({ href: profile.canonical, label: profile.h1 }))
}

export default function SeoFooter({ locale }: SeoFooterProps) {
  const copy = seoTemplateCopy[locale].footer

  const useCaseLinks = [
    ...slugLinks(englishSeoPageSlugs),
    { href: '/vs/picturethis', label: 'vs PictureThis' },
    { href: '/vs/plantum', label: 'vs Plantum' },
    { href: '/vs/inaturalist', label: 'vs iNaturalist' },
    { href: '/vs/google-lens', label: 'vs Google Lens' },
  ]
  const germanLinks = slugLinks(germanSeoPageSlugs)
  const spanishLinks = Object.values(spanishSeoPageProfiles).map((profile) => ({
    href: profile.canonical,
    label: profile.h1,
  }))

  return (
    <footer className="bg-ink-deep text-white pt-24 pb-8 font-body overflow-hidden" id="download">
      <div className="max-w-[1200px] mx-auto px-6">
        {/* CTA + Bild */}
        <div className="flex flex-col lg:flex-row gap-12 mb-24 items-center">
          <div className="flex-1">
            <div className="text-primary-fixed font-bold tracking-widest text-xs mb-4 uppercase">{copy.downloadTag}</div>
            <h2 className="text-5xl md:text-6xl font-bold font-display leading-tight mb-6">
              {copy.ctaLine1}
              <br />
              {copy.ctaLine2}
              <br />
              <span className="italic text-primary-fixed">{copy.ctaEm}</span>
            </h2>
            <p className="text-white/80 max-w-md mb-10 text-sm leading-relaxed">{copy.ctaBody}</p>
            <div className="flex flex-col sm:flex-row gap-4 mb-6">
              {hasIosStoreUrl && (
                <a
                  href={siteConfig.iosAppStoreUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:opacity-80 transition-opacity"
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src="/app-store.png" alt="Download on the App Store" className="h-12 w-auto" />
                </a>
              )}
              {hasAndroidStoreUrl && (
                <a
                  href={siteConfig.androidPlayStoreUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:opacity-80 transition-opacity"
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src="/play-store.png" alt="Get it on Google Play" className="h-12 w-auto" />
                </a>
              )}
            </div>
            <p className="text-xs text-white/60">
              {copy.storeNote}{' '}
              <Link href="/support" className="underline hover:text-white">
                {copy.supportLabel}
              </Link>
            </p>
          </div>
          <div className="flex-1 w-full relative h-[300px] lg:h-[400px] rounded-3xl overflow-hidden shadow-2xl">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/hero.jpg" alt="GreenLens" className="w-full h-full object-cover" />
            <div className="absolute inset-0 bg-gradient-to-r from-ink-deep via-transparent to-transparent"></div>
          </div>
        </div>

        {/* Marken- und Legal-Spalten */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16 border-t border-white/10 pt-12">
          <div>
            <h3 className="font-display font-bold text-xl tracking-widest mb-4">GREENLENS</h3>
            <p className="text-xs text-white/70 leading-relaxed max-w-xs">{copy.brandBody}</p>
          </div>
          <div>
            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.productTitle}</h4>
            <ul className="space-y-4 text-xs text-white/80">
              <li><a href="#advantage" className="hover:text-white">{seoTemplateCopy[locale].nav.features}</a></li>
              <li><a href="#methodology" className="hover:text-white">{seoTemplateCopy[locale].nav.tech}</a></li>
              <li><a href="#download" className="hover:text-white">{seoTemplateCopy[locale].nav.download}</a></li>
              <li><Link href="/support" className="hover:text-white">{copy.supportLabel}</Link></li>
            </ul>
          </div>
          <div>
            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.companyTitle}</h4>
            <ul className="space-y-4 text-xs text-white/80">
              <li><a href="#methodology" className="hover:text-white">{seoTemplateCopy[locale].nav.how}</a></li>
              <li><a href="#faq" className="hover:text-white">FAQ</a></li>
              <li><Link href="/support" className="hover:text-white">{copy.supportLabel}</Link></li>
            </ul>
          </div>
          <div>
            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.legalTitle}</h4>
            <ul className="space-y-4 text-xs text-white/80">
              <li><Link href="/imprint" className="hover:text-white">{copy.imprint}</Link></li>
              <li><Link href="/privacy" className="hover:text-white">{copy.privacy}</Link></li>
              <li><Link href="/terms" className="hover:text-white">{copy.terms}</Link></li>
            </ul>
          </div>
        </div>

        {/* SEO-Link-Spalten (interne Verlinkung) */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-24">
          <div>
            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.useCasesTitle}</h4>
            <ul className="space-y-3 text-xs text-white/70">
              {useCaseLinks.map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className="hover:text-white">{link.label}</Link>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.germanTitle}</h4>
            <ul className="space-y-3 text-xs text-white/70">
              {germanLinks.map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className="hover:text-white">{link.label}</Link>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.spanishTitle}</h4>
            <ul className="space-y-3 text-xs text-white/70">
              {spanishLinks.map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className="hover:text-white">{link.label}</Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Riesiger Schriftzug */}
        <div className="w-full overflow-hidden flex justify-center mb-12 border-t border-white/10 pt-16">
          <div className="text-[10vw] leading-none font-display font-bold text-white/[0.03] tracking-tighter select-none whitespace-nowrap" aria-hidden="true">
            GREENLENS
          </div>
        </div>

        <div className="flex flex-col md:flex-row justify-between items-center text-[10px] text-white/50 border-t border-white/10 pt-8">
          <p>{copy.copy}</p>
          <div className="mt-4 md:mt-0 opacity-50">
            <span className="font-bold tracking-widest">GREENLENS</span>
          </div>
        </div>
      </div>
    </footer>
  )
}