'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useLang } from '@/context/LangContext'
import { siteConfig } from '@/lib/site'

export default function Footer() {
  const pathname = usePathname()
  const { t } = useLang()
  const homeHref = (hash: string) => (pathname === '/' ? hash : `/${hash}`)
  const linkHrefs = [
    [homeHref('#features'), homeHref('#intelligence'), homeHref('#cta'), '/support'],
    [homeHref('#how'), homeHref('#faq'), '/support'],
    ['/imprint', '/privacy', '/terms'],
  ]

  return (
    <footer className="footer" id="footer">
      <div className="container">
        <div className="footer-inner">
          <div>
            <Link href="/" className="nav-logo" style={{ fontSize: '1.5rem' }}>
              GREENLENS
            </Link>
            <p className="footer-brand-desc">{t.footer.brand}</p>
            <div style={{ display: 'flex', gap: '1rem', marginTop: '1.5rem', flexWrap: 'wrap' }}>
              <a href="https://apps.apple.com/de/app/plant-doctor-greenlens-pro/id6759843546?l=en-GB" target="_blank" rel="noopener noreferrer" style={{ transition: 'opacity 0.2s' }} onMouseOver={(e) => e.currentTarget.style.opacity = '0.8'} onMouseOut={(e) => e.currentTarget.style.opacity = '1'}>
                <img src="/app-store.png" alt="Download on the App Store" style={{ height: '40px', width: 'auto' }} />
              </a>
            </div>
          </div>

          {t.footer.cols.map((col, ci) => (
            <div className="footer-col" key={col.title}>
              <div className="footer-col-title">{col.title}</div>
              {col.links.map((label, li) => (
                <Link key={label} href={linkHrefs[ci]?.[li] ?? '/support'}>
                  {label}
                </Link>
              ))}
            </div>
          ))}

          <div className="footer-col">
            <div className="footer-col-title">Identify &amp; Care</div>
            <Link href="/best-plant-identification-app">Best Plant ID App</Link>
            <Link href="/plant-identifier-app">Plant Identifier App</Link>
            <Link href="/plant-scanner">Plant Scanner</Link>
            <Link href="/flower-scanner">Flower Scanner</Link>
            <Link href="/houseplant-identifier">Houseplant Identifier</Link>
            <Link href="/succulent-identifier">Succulent Identifier</Link>
            <Link href="/identify-plant-photo">Identify Plant by Photo</Link>
            <Link href="/plant-disease-identifier">Plant Disease Identifier</Link>
            <Link href="/plant-health-app">Plant Health App</Link>
            <Link href="/plant-care-app">Plant Care App</Link>
            <Link href="/vs/picturethis">vs PictureThis</Link>
            <Link href="/vs/plantum">vs Plantum</Link>
            <Link href="/vs/inaturalist">vs iNaturalist</Link>
            <Link href="/vs/google-lens">vs Google Lens</Link>
          </div>

          <div className="footer-col">
            <div className="footer-col-title">Pflanzen &amp; Erkennen</div>
            <Link href="/">GreenLens auf Deutsch</Link>
            <Link href="/pflanzen-erkennen-kostenlos">Pflanzen erkennen kostenlos</Link>
            <Link href="/pflanzen-erkennen-app">Pflanzen erkennen App</Link>
            <Link href="/pflanzen-bestimmen">Pflanzen bestimmen</Link>
            <Link href="/blumen-scanner">Blumen Scanner</Link>
            <Link href="/blumen-scanner">Blumen per Foto erkennen</Link>
            <Link href="/zimmerpflanzen-bestimmen">Zimmerpflanzen bestimmen</Link>
            <Link href="/pflanzen-pflege-app">Pflanzen Pflege App</Link>
            <Link href="/pflanzen-krankheiten-erkennen">Pflanzenkrankheiten erkennen</Link>
          </div>

          <div className="footer-col">
            <div className="footer-col-title">Español</div>
            <Link href="/es">GreenLens en español</Link>
            <Link href="/es/identificador-de-plantas">Identificador de plantas</Link>
            <Link href="/es/escaner-de-plantas">Escaner de plantas</Link>
            <Link href="/es/app-para-cuidar-plantas">App para cuidar plantas</Link>
            <Link href="/es/diagnosticar-enfermedades-plantas">Diagnosticar enfermedades</Link>
            <Link href="/es/comparar/google-lens">GreenLens vs Google Lens</Link>
          </div>
        </div>

        <div className="footer-brand-xl" aria-hidden="true">GREENLENS</div>

        <div className="footer-bottom">
          <p>{t.footer.copy}</p>
          <Link href="/support" className="footer-contact">
            Support
          </Link>
        </div>
      </div>
    </footer>
  )
}
