'use client'

import * as React from 'react'
import Image from 'next/image'
import { ArrowUpRight } from 'lucide-react'
import { useRouter, type RouteKey } from '@/lib/router'
import { Button } from '@/components/ui/button'

/* ------------------------------------------------------------------ */
/*  Data                                                               */
/* ------------------------------------------------------------------ */

interface FooterLink {
  label: string
  key: RouteKey
}

interface FooterGroup {
  title: string
  links: FooterLink[]
}

const FOOTER_GROUPS: FooterGroup[] = [
  {
    title: 'Company',
    links: [
      { label: 'About', key: 'about' },
      { label: 'Investors', key: 'investors' },
      { label: 'Careers', key: 'careers' },
      { label: 'News', key: 'news' },
      { label: 'Contact', key: 'contact' },
    ],
  },
  {
    title: 'Science & Therapies',
    links: [
      { label: 'Research & Development', key: 'research' },
      { label: 'Specialty Medicines', key: 'specialty' },
      { label: 'Advanced Vitamins', key: 'vitamins' },
      { label: 'Biotechnology', key: 'biotechnology' },
      { label: 'Innovation', key: 'innovation' },
    ],
  },
  {
    title: 'Operations',
    links: [
      { label: 'Pharmaceutical Raw Materials', key: 'api' },
      { label: 'Manufacturing', key: 'manufacturing' },
      { label: 'Quality Assurance', key: 'quality' },
      { label: 'CDMO Services', key: 'cdmo' },
    ],
  },
  {
    title: 'Responsibility',
    links: [
      { label: 'Sustainability', key: 'sustainability' },
      { label: 'Knowledge Center', key: 'knowledge' },
    ],
  },
]

const REGULATORY_LINKS = [
  {
    label: 'WHO GMP',
    href: 'https://www.who.int/teams/health-product-policy-and-standards/standards-and-specifications/norms-and-standards-for-pharmaceuticals/good-manufacturing-practices',
  },
  {
    label: 'FDA',
    href: 'https://www.fda.gov/drugs',
  },
  {
    label: 'EMA',
    href: 'https://www.ema.europa.eu/en/medicines',
  },
  {
    label: 'ICH',
    href: 'https://www.ich.org/page/ich-guidelines',
  },
  {
    label: 'USP-NF',
    href: 'https://www.usp.org/who-we-are',
  },
  {
    label: 'Ph.Eur.',
    href: 'https://www.edqm.eu/en/european-pharmacopoeia-ph-eur-10th-edition',
  },
]

const REGULATORY_REFERENCES = [
  'WHO', 'FDA', 'EMA', 'ICH', 'USP-NF', 'Ph.Eur.', 'ISO 14001', 'ISO 9001', 'WCAG 2.2 AA',
]

/* ------------------------------------------------------------------ */
/*  Footer component                                                   */
/* ------------------------------------------------------------------ */

export function Footer() {
  const { navigate } = useRouter()
  const [year, setYear] = React.useState(2025)

  React.useEffect(() => {
    setYear(new Date().getFullYear())
  }, [])

  const goTo = React.useCallback(
    (key: RouteKey) => {
      navigate(key)
      window.scrollTo({ top: 0, behavior: 'auto' })
    },
    [navigate],
  )

  return (
    <footer className="mt-auto bg-[#0b1f1b] text-white">
      {/* ---- CTA band ---- */}
      <section className="border-b border-white/10 px-4 py-16 lg:px-8">
        <div className="mx-auto max-w-5xl text-center">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
            Partner with Espandiar
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-white/70">
            Let&rsquo;s build the next chapter of precision medicine together.
          </p>
          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <Button
              size="lg"
              className="bg-emerald-600 text-white hover:bg-emerald-700"
              onClick={() => goTo('contact')}
            >
              Contact our team
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white/30 text-white hover:bg-white/10 hover:text-white"
              onClick={() => goTo('cdmo')}
            >
              Explore CDMO services
            </Button>
          </div>
        </div>
      </section>

      {/* ---- Main footer ---- */}
      <section className="px-4 py-14 lg:px-8">
        <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-5">
          {/* Brand column */}
          <div className="lg:col-span-1">
            <Image
              src="/logo.png"
              alt="Espandiar Pharmaceuticals"
              width={560}
              height={186}
              className="mb-4 h-36 w-auto object-contain brightness-0 invert"
              priority
            />
            <p className="mb-6 text-sm leading-relaxed text-white/60">
              A research-led pharmaceutical company advancing precision health
              across specialty medicines, biotechnology, APIs and CDMO services.
            </p>
            <div className="flex flex-wrap gap-2">
              {REGULATORY_LINKS.map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1 rounded-full border border-white/15 px-2.5 py-1 text-[11px] font-medium text-white/50 transition-colors hover:border-white/30 hover:text-white/80"
                >
                  {link.label}
                  <ArrowUpRight className="h-3 w-3" />
                </a>
              ))}
            </div>
          </div>

          {/* Link grid */}
          <div className="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:col-span-4">
            {FOOTER_GROUPS.map((group) => (
              <div key={group.title}>
                <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/80">
                  {group.title}
                </h3>
                <ul className="space-y-2.5">
                  {group.links.map((link) => (
                    <li key={link.key}>
                      <button
                        onClick={() => goTo(link.key)}
                        className="text-sm text-white/50 transition-colors hover:text-white"
                      >
                        {link.label}
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---- Regulatory reference band ---- */}
      <section className="border-t border-white/10 px-4 py-5 lg:px-8">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-3 gap-y-1.5">
          <span className="text-[11px] font-medium uppercase tracking-wider text-white/30">
            Compliant with
          </span>
          {REGULATORY_REFERENCES.map((ref, i) => (
            <React.Fragment key={ref}>
              {i > 0 && <span className="text-white/15">·</span>}
              <span className="text-xs text-white/40">{ref}</span>
            </React.Fragment>
          ))}
        </div>
      </section>

      {/* ---- Bottom bar ---- */}
      <section className="border-t border-white/10 px-4 py-5 lg:px-8">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 sm:flex-row">
          <p className="text-xs text-white/40">
            &copy; {year} Espandiar Pharmaceuticals. All rights reserved.
          </p>
          <div className="flex flex-wrap items-center gap-4">
            <button
              onClick={() => goTo('privacy')}
              className="text-xs text-white/40 transition-colors hover:text-white/70"
            >
              Privacy policy
            </button>
            <button
              onClick={() => goTo('terms')}
              className="text-xs text-white/40 transition-colors hover:text-white/70"
            >
              Terms of use
            </button>
            <button
              onClick={() => goTo('cookies')}
              className="text-xs text-white/40 transition-colors hover:text-white/70"
            >
              Cookie settings
            </button>
            <button
              onClick={() => goTo('pharmacovigilance')}
              className="text-xs text-white/40 transition-colors hover:text-white/70"
            >
              Pharmacovigilance
            </button>
          </div>
        </div>
      </section>
    </footer>
  )
}