import { Link } from "wouter";

const CITIES = ["Indore", "Hyderabad", "Mumbai", "Bangalore", "Pune", "Delhi"];

export default function Footer() {
  return (
    <footer className="border-t border-border bg-card mt-0">
      <div className="max-w-7xl mx-auto px-6 lg:px-12 py-16 grid grid-cols-1 md:grid-cols-4 gap-12">
        <div className="md:col-span-2">
          <div className="flex items-center gap-3 mb-5">
            <span className="text-2xl tracking-[0.25em] font-serif text-primary">ÉLITE</span>
            <span className="w-px h-5 bg-primary/40" />
            <span className="text-xs tracking-[0.35em] text-muted-foreground uppercase">Companions</span>
          </div>
          <p className="text-muted-foreground text-sm leading-relaxed max-w-xs">
            India's most distinguished social concierge agency. Curating meaningful companionship experiences for discerning individuals across major cities.
          </p>
          <p className="mt-6 text-xs text-muted-foreground/50 leading-relaxed max-w-xs">
            All services are strictly social and professional in nature. This platform is for adults 18+ only and complies fully with applicable laws.
          </p>
        </div>
        <div>
          <p className="text-xs tracking-[0.25em] uppercase text-primary mb-4">Navigation</p>
          <ul className="flex flex-col gap-3">
            {[["Companions", "/companions"], ["Services", "/services"], ["Reviews", "/reviews"], ["Safety", "/safety"], ["About", "/about"], ["Contact", "/contact"]].map(([label, href]) => (
              <li key={href}>
                <Link href={href}>
                  <span className="text-sm text-muted-foreground hover:text-primary transition-colors cursor-pointer">{label}</span>
                </Link>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <p className="text-xs tracking-[0.25em] uppercase text-primary mb-4">Cities</p>
          <ul className="flex flex-col gap-3">
            {CITIES.map(city => (
              <li key={city}>
                <span className="text-sm text-muted-foreground">{city}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div className="border-t border-border max-w-7xl mx-auto px-6 lg:px-12 py-6 flex flex-col sm:flex-row justify-between items-center gap-4">
        <p className="text-xs text-muted-foreground/50">
          &copy; {new Date().getFullYear()} Elite Companions. All rights reserved.
        </p>
        <div className="flex gap-6">
          {["Privacy Policy", "Terms of Service", "Confidentiality"].map(item => (
            <span key={item} className="text-xs text-muted-foreground/50 hover:text-primary transition-colors cursor-pointer">{item}</span>
          ))}
        </div>
      </div>
    </footer>
  );
}
