import Link from 'next/link'
import { GradientText } from '@/components/shared/GradientText'
import { MapPin } from 'lucide-react'

const footerLinks = [
  {
    label: 'Services',
    links: [
      { label: 'Micro-Apps', href: '#services' },
      { label: 'Data Automation', href: '#services' },
      { label: 'Scheduling Systems', href: '#services' },
      { label: 'Artisan Web Systems', href: '#services' },
    ],
  },
  {
    label: 'Company',
    links: [
      { label: 'Process', href: '#process' },
      { label: 'ROI Calculator', href: '#roi' },
      { label: 'Book a Call', href: '/booking' },
    ],
  },
]

export function Footer() {
  return (
    <footer
      className="border-t mt-auto"
      style={{
        borderColor: 'var(--dt-border-subtle)',
        background: 'var(--dt-bg-surface)',
      }}
    >
      <div className="section-container py-16">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
          {/* Brand */}
          <div className="md:col-span-2">
            <div className="flex items-center gap-2 mb-4">
              <div
                className="w-8 h-8 rounded-lg flex items-center justify-center font-bold text-sm"
                style={{ background: 'var(--dt-gradient-accent)', color: '#fff' }}
              >
                D
              </div>
              <GradientText className="font-semibold text-lg tracking-tight">
                DaliTek
              </GradientText>
            </div>
            <p className="text-sm leading-relaxed max-w-xs mb-4" style={{ color: 'var(--dt-text-secondary)' }}>
              Artisan business systems for Central Florida and beyond. We build custom digital tools that fit the way your business actually works.
            </p>
            <div className="flex items-center gap-1.5 text-xs" style={{ color: 'var(--dt-text-muted)' }}>
              <MapPin className="w-3.5 h-3.5" style={{ color: 'var(--dt-accent-primary)' }} />
              Central Florida — serving clients worldwide
            </div>
          </div>

          {/* Links */}
          {footerLinks.map((group) => (
            <div key={group.label}>
              <h4 className="text-sm font-semibold mb-4" style={{ color: 'var(--dt-text-primary)' }}>
                {group.label}
              </h4>
              <ul className="space-y-3">
                {group.links.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.href}
                      className="text-sm transition-colors duration-200 hover:opacity-70"
                      style={{ color: 'var(--dt-text-muted)' }}
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div
          className="mt-12 pt-8 flex flex-col md:flex-row items-center justify-between gap-4 text-xs border-t"
          style={{ borderColor: 'var(--dt-border-subtle)', color: 'var(--dt-text-muted)' }}
        >
          <span>© {new Date().getFullYear()} DaliTek Consulting Services LLC. All rights reserved.</span>
          <span>Built in Central Florida. Deployed worldwide.</span>
        </div>
      </div>
    </footer>
  )
}