import { Phone, Mail, MapPin } from "lucide-react";
import { BrandStamp } from "@/components/Navbar";

interface FooterProps {
  onOpenOfferModal: () => void;
  onNavigateSection: (id: string) => void;
}

export default function Footer({ onOpenOfferModal, onNavigateSection }: FooterProps) {
  return (
    <footer className="bg-foreground text-background pt-20 pb-12 border-t border-border">
      <div className="container space-y-16">
        <div className="rounded-2xl bg-stone-900 p-8 sm:p-12 border border-white/10 flex flex-col md:flex-row items-center justify-between gap-8">
          <div className="space-y-3 max-w-xl">
            <div className="flex items-center gap-3"><span className="w-8 h-px bg-primary" /><span className="text-xs font-semibold tracking-widest uppercase text-primary">Ready when you are</span></div>
            <h3 className="font-serif text-2xl sm:text-4xl font-normal text-background tracking-tight">Get a fair, no-obligation cash offer for your property.</h3>
            <p className="text-sm text-stone-300">No repairs, no commissions, and no appraisal contingencies.</p>
          </div>
          <button onClick={onOpenOfferModal} className="bg-primary hover:bg-primary/90 text-primary-foreground font-medium px-8 py-4 rounded-md shadow-lg transition-all active:scale-98 text-sm whitespace-nowrap cursor-pointer">Request Cash Offer</button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 pt-4">
          <div className="lg:col-span-2 space-y-4">
            <div className="flex items-center gap-3">
              <BrandStamp inverse />
              <span className="brand-wordmark brand-wordmark-inverse"><span>Home Buyers</span><span>Nationwide</span></span>
            </div>
            <p className="text-sm text-stone-300 leading-relaxed max-w-sm">A family-owned, nationwide home-buying partner for homeowners who want a direct, practical sale without repairs or agent commissions.</p>
            <p className="text-xs uppercase tracking-[0.16em] text-primary pt-2">Direct sale · clear terms · 2020–2026</p>
          </div>

          <div className="space-y-4">
            <h4 className="text-xs font-semibold uppercase tracking-wider text-primary">Navigation</h4>
            <ul className="space-y-2.5 text-sm text-stone-300">
              <li><button onClick={() => onNavigateSection("how-it-works")} className="hover:text-background transition-colors">How It Works</button></li>
              <li><button onClick={() => onNavigateSection("situations")} className="hover:text-background transition-colors">Property Situations</button></li>
              <li><button onClick={() => onNavigateSection("advantages")} className="hover:text-background transition-colors">Why Choose Us</button></li>
              <li><button onClick={() => onNavigateSection("faq")} className="hover:text-background transition-colors">FAQ</button></li>
            </ul>
          </div>

          <div className="space-y-4">
            <h4 className="text-xs font-semibold uppercase tracking-wider text-primary">Situations</h4>
            <ul className="space-y-2.5 text-sm text-stone-300">
              <li><button onClick={onOpenOfferModal} className="hover:text-background transition-colors">Inherited Property</button></li>
              <li><button onClick={onOpenOfferModal} className="hover:text-background transition-colors">Major Repairs Needed</button></li>
              <li><button onClick={onOpenOfferModal} className="hover:text-background transition-colors">Foreclosure Help</button></li>
              <li><button onClick={onOpenOfferModal} className="hover:text-background transition-colors">Problem Tenants</button></li>
            </ul>
          </div>

          <div className="space-y-4">
            <h4 className="text-xs font-semibold uppercase tracking-wider text-primary">Get in touch</h4>
            <ul className="space-y-3 text-sm text-stone-300">
              <li className="flex items-center gap-2.5"><Phone className="w-4 h-4 text-primary shrink-0" /><a href="tel:2404105636" className="hover:text-background">(240) 410-5636</a></li>
              <li className="flex items-center gap-2.5"><Mail className="w-4 h-4 text-primary shrink-0" /><a href="mailto:Info@Originalhomebuyers.com" className="hover:text-background">Info@Originalhomebuyers.com</a></li>
              <li className="flex items-start gap-2.5"><MapPin className="w-4 h-4 text-primary shrink-0 mt-0.5" /><span>3500 W Rogers Ave<br />Baltimore, MD 21215</span></li>
            </ul>
          </div>
        </div>

        <div className="pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-stone-400">
          <p>© 2026 Home Buyers Nationwide. All rights reserved.</p>
          <div className="flex items-center gap-6"><span className="hover:text-background cursor-pointer">Privacy Policy</span><span className="hover:text-background cursor-pointer">Terms of Use</span><span className="hover:text-background cursor-pointer">Sitemap</span></div>
        </div>
      </div>
    </footer>
  );
}
