import { Link } from 'react-router-dom';
import { Mail, Phone, MapPin, Linkedin, Twitter, Github, ArrowRight } from 'lucide-react';
import { services } from '@/data/content';

export default function Footer() {
  return (
    <footer className="relative mt-24 border-t border-primary-100 dark:border-white/10">
      <div className="container-wide section-padding py-16">
        <div className="grid gap-12 lg:grid-cols-12">
          {/* Brand */}
          <div className="lg:col-span-4">
            <Link to="/" className="flex items-center gap-2.5">
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-logo-gradient text-white">
                <span className="text-lg font-black">Q</span>
              </div>
              <span className="text-lg font-bold">Queneva</span>
            </Link>
            <p className="mt-4 max-w-sm text-sm leading-relaxed text-primary-400 dark:text-gray-400">
              Queneva IT Services Pvt. Ltd. We make tech easy — helping startups and enterprises
              build, automate, and scale with modern software, AI, and cloud.
            </p>
            <div className="mt-6 flex gap-3">
              {[
                { icon: Linkedin, href: '#', label: 'LinkedIn' },
                { icon: Twitter, href: '#', label: 'Twitter' },
                { icon: Github, href: '#', label: 'GitHub' },
              ].map((s) => (
                <a
                  key={s.label}
                  href={s.href}
                  aria-label={s.label}
                  className="flex h-10 w-10 items-center justify-center rounded-full glass text-primary-500 transition-all hover:scale-110 hover:text-secondary-500 dark:text-gray-300"
                >
                  <s.icon size={17} />
                </a>
              ))}
            </div>
          </div>

          {/* Services */}
          <div className="lg:col-span-3">
            <h4 className="text-sm font-semibold uppercase tracking-wider text-primary-500 dark:text-gray-200">
              Services
            </h4>
            <ul className="mt-4 space-y-2.5">
              {services.slice(0, 7).map((s) => (
                <li key={s.slug}>
                  <Link
                    to={`/services/${s.slug}`}
                    className="text-sm text-primary-400 transition-colors hover:text-secondary-500 dark:text-gray-400 dark:hover:text-accent-400"
                  >
                    {s.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Company */}
          <div className="lg:col-span-2">
            <h4 className="text-sm font-semibold uppercase tracking-wider text-primary-500 dark:text-gray-200">
              Company
            </h4>
            <ul className="mt-4 space-y-2.5">
              {[
                { label: 'About', to: '/about' },
                { label: 'Portfolio', to: '/portfolio' },
                { label: 'Blog', to: '/blog' },
                { label: 'Careers', to: '/careers' },
                { label: 'Pricing', to: '/pricing' },
                { label: 'Contact', to: '/contact' },
              ].map((l) => (
                <li key={l.to}>
                  <Link
                    to={l.to}
                    className="text-sm text-primary-400 transition-colors hover:text-secondary-500 dark:text-gray-400 dark:hover:text-accent-400"
                  >
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div className="lg:col-span-3">
            <h4 className="text-sm font-semibold uppercase tracking-wider text-primary-500 dark:text-gray-200">
              Get in touch
            </h4>
            <ul className="mt-4 space-y-3 text-sm text-primary-400 dark:text-gray-400">
              <li className="flex items-start gap-3">
                <MapPin size={16} className="mt-0.5 shrink-0 text-secondary-500" />
                <span>Queneva IT Services Pvt. Ltd.<br />Pune, Maharashtra, India</span>
              </li>
              <li className="flex items-center gap-3">
                <Mail size={16} className="shrink-0 text-secondary-500" />
                <a href="mailto:hello@queneva.com" className="hover:text-secondary-500">hello@queneva.com</a>
              </li>
              <li className="flex items-center gap-3">
                <Phone size={16} className="shrink-0 text-secondary-500" />
                <a href="tel:+919000000000" className="hover:text-secondary-500">+91 90000 00000</a>
              </li>
            </ul>
            <Link to="/contact" className="btn-primary mt-5 !px-5 !py-2.5 text-xs">
              Start a project <ArrowRight size={14} />
            </Link>
          </div>
        </div>

        <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-primary-100 pt-8 text-xs text-primary-400 dark:border-white/10 dark:text-gray-500 sm:flex-row">
          <p>© {new Date().getFullYear()} Queneva IT Services Pvt. Ltd. All rights reserved.</p>
          <div className="flex gap-6">
            <a href="#" className="hover:text-secondary-500">Privacy</a>
            <a href="#" className="hover:text-secondary-500">Terms</a>
            <Link to="/admin" className="hover:text-secondary-500">Admin</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}