'use client'

import { useTranslations } from 'next-intl'
import Image from 'next/image'
import { Link } from '@/i18n/navigation'
import CalButton from '@/components/ui/CalButton'

// ── Static link data ─────────────────────────────────────────────────────────

const SERVICE_LINKS = [
  { labelKey: 'serviceLinks.designDev', href: '/#services' },
  { labelKey: 'serviceLinks.customSystems', href: '/#services' },
  { labelKey: 'serviceLinks.infrastructure', href: '/#services' },
  { labelKey: 'serviceLinks.aiAutomation', href: '/#services' },
] as const

// Studio links use nav translation keys where they exist
const STUDIO_NAV_LINKS = [
  { navKey: 'process' as const, href: '/#process' },
  { navKey: 'work' as const, href: '/#work' },
  { navKey: 'about' as const, href: '/#about' },
] as const

function LinkedInIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
    </svg>
  )
}

function GitHubIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
    </svg>
  )
}

function XIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
    </svg>
  )
}

const SOCIAL_LINKS = [
  {
    label: 'LinkedIn',
    href: 'https://www.linkedin.com/company/letsbe-digital',
    Icon: LinkedInIcon,
  },
  {
    label: 'X',
    href: 'https://x.com/letsbe_digital',
    Icon: XIcon,
  },
] as const

const CAL_LINK = 'https://cal.com/letsbe/discovery'

// ── Sub-components ───────────────────────────────────────────────────────────

function FooterHeading({ children }: { children: React.ReactNode }) {
  return (
    <p className="label-md text-on-surface/40 mb-5 tracking-widest">{children}</p>
  )
}

function InternalLink({
  href,
  className,
  children,
}: {
  href: string
  className?: string
  children: React.ReactNode
}) {
  return (
    <Link href={href as any} className={className}>
      {children}
    </Link>
  )
}

const linkClass =
  'text-sm text-on-surface/60 hover:text-on-surface transition-colors duration-200 leading-relaxed'

// ── Main Footer component ─────────────────────────────────────────────────────

export default function Footer() {
  const t = useTranslations('footer')
  const tNav = useTranslations('nav')

  const currentYear = new Date().getFullYear()

  return (
    <footer
      className="bg-surface-low"
      role="contentinfo"
      aria-label="Site footer"
    >
      {/* ── Top grid ── */}
      <div className="mx-auto max-w-7xl px-6 lg:px-8 pt-16 pb-12">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">

          {/* Col 1 — Brand */}
          <div className="sm:col-span-2 lg:col-span-1 flex flex-col items-center lg:items-start gap-4">
            <Image
              src="/images/LogoLetsBe_Biz_celesBlue.png"
              alt="LetsBe."
              width={180}
              height={60}
              className="h-12 w-auto object-contain"
            />
            <p className="text-sm text-on-surface/55 leading-relaxed max-w-[260px] text-center lg:text-left">
              {t('tagline')}
            </p>
            <p className="label-md text-on-surface/35 tracking-widest">
              {t('location')}
            </p>
          </div>

          {/* Col 2 — Services */}
          <div>
            <FooterHeading>{t('services')}</FooterHeading>
            <ul className="flex flex-col gap-3" role="list">
              {SERVICE_LINKS.map(({ labelKey, href }) => (
                <li key={labelKey}>
                  <InternalLink href={href} className={linkClass}>
                    {t(labelKey)}
                  </InternalLink>
                </li>
              ))}
            </ul>
          </div>

          {/* Col 3 — Studio */}
          <div>
            <FooterHeading>{t('studio')}</FooterHeading>
            <ul className="flex flex-col gap-3" role="list">
              {STUDIO_NAV_LINKS.map(({ navKey, href }) => (
                <li key={navKey}>
                  <InternalLink href={href} className={linkClass}>
                    {tNav(navKey)}
                  </InternalLink>
                </li>
              ))}
              {/* Contact — separate entry pointing to configure section */}
              <li>
                <InternalLink href="/#configure" className={linkClass}>
                  {tNav('configure')}
                </InternalLink>
              </li>
            </ul>
          </div>

          {/* Col 4 — Connect */}
          <div>
            <FooterHeading>{t('connect')}</FooterHeading>

            {/* Social icons */}
            <ul className="flex items-center gap-4 mb-6" role="list">
              {SOCIAL_LINKS.map(({ label, href, Icon }) => (
                <li key={label}>
                  <a
                    href={href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={label}
                    className="inline-flex items-center justify-center w-9 h-9 rounded-full text-on-surface/40 hover:text-primary transition-all duration-200 hover:-translate-y-0.5"
                    style={{ willChange: 'transform' }}
                  >
                    <Icon className="w-5 h-5" />
                  </a>
                </li>
              ))}
            </ul>

            {/* Book a Call CTA */}
            <CalButton
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full label-md text-white transition-all duration-300 hover:scale-[1.03] hover:shadow-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
              style={{ background: 'linear-gradient(135deg, #006494, #5BA4D9)' }}
            >
              {tNav('bookCall')}
            </CalButton>
          </div>
        </div>
      </div>

      {/* Gradient separator line */}
      <div
        className="mx-6 lg:mx-8 h-px"
        style={{
          background:
            'linear-gradient(90deg, transparent 0%, rgba(25,28,29,0.12) 25%, rgba(25,28,29,0.16) 50%, rgba(25,28,29,0.12) 75%, transparent 100%)',
        }}
        aria-hidden="true"
      />

      {/* ── Bottom bar ── */}
      <div className="mx-auto max-w-7xl px-6 lg:px-8 py-6">
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
          <p className="text-xs text-on-surface/35">
            © {currentYear} LetsBe Solutions LLC
          </p>
          <ul className="flex items-center gap-5" role="list">
            <li>
              <InternalLink
                href="/privacy"
                className="text-xs text-on-surface/40 hover:text-on-surface transition-colors duration-200"
              >
                {t('privacy')}
              </InternalLink>
            </li>
            <li>
              <InternalLink
                href="/terms"
                className="text-xs text-on-surface/40 hover:text-on-surface transition-colors duration-200"
              >
                {t('terms')}
              </InternalLink>
            </li>
          </ul>
        </div>
      </div>
    </footer>
  )
}
