"use client";

import React, { useState } from "react";
import Link from "next/link";
import { Building2, Mail, Phone, MapPin, ArrowRight, ShieldCheck, CheckCircle2 } from "lucide-react";

export default function Footer() {
  const [email, setEmail] = useState("");
  const [subscribed, setSubscribed] = useState(false);

  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    if (email) {
      setSubscribed(true);
      setEmail("");
    }
  };

  return (
    <footer className="bg-[#0A0A0A] text-slate-300 pt-16 pb-12 border-t border-slate-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Top Newsletter & Brand Banner */}
        <div className="bg-gradient-to-r from-[#18181b] to-[#18181b] rounded-3xl p-8 md:p-12 mb-16 border border-white/10 shadow-2xl flex flex-col lg:flex-row items-center justify-between gap-8">
          <div className="max-w-xl">
            <span className="inline-flex items-center gap-1.5 px-3.5 py-1 rounded-full text-xs font-bold bg-[#059669]/30 text-[#a7f3d0] border border-[#059669]/40 mb-3">
              <ShieldCheck className="w-3.5 h-3.5" /> Colombo District &amp; High-Growth Suburbs
            </span>
            <h3 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
              Receive New Listings &amp; Property Alerts
            </h3>
            <p className="text-slate-400 text-sm mt-2">
              Browse verified listings for houses, land, and apartments across Thalawathugoda, Malabe, Battaramulla, Nugegoda, and Greater Colombo.
            </p>
          </div>

          <div className="w-full lg:w-auto min-w-[320px] sm:min-w-[400px]">
            {subscribed ? (
              <div className="bg-emerald-500/20 border border-emerald-500/40 rounded-full px-6 py-3.5 flex items-center gap-3 text-emerald-300 text-sm font-semibold">
                <CheckCircle2 className="w-5 h-5 text-emerald-400" />
                <span>You are subscribed to Dream Homes Property Alerts!</span>
              </div>
            ) : (
              <form onSubmit={handleSubscribe} className="flex gap-2 bg-white/10 p-1.5 rounded-full border border-white/15 backdrop-blur-md">
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Enter your email address..."
                  required
                  className="bg-transparent text-white placeholder:text-slate-400 px-4 py-2 text-sm focus:outline-none flex-grow"
                />
                <button
                  type="submit"
                  className="bg-[#059669] hover:bg-[#10b981] text-white font-bold text-sm px-6 py-2.5 rounded-full transition-all flex items-center gap-1.5 shadow-md shadow-[#059669]/30"
                >
                  <span>Subscribe</span>
                  <ArrowRight className="w-4 h-4" />
                </button>
              </form>
            )}
          </div>
        </div>

        {/* 4-Column Links Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 pb-12 border-b border-slate-800">

          {/* Brand & Mission */}
          <div className="lg:col-span-2 space-y-4">
            <Link href="/" className="inline-block">
              <img
                src="/logo.png"
                alt="Dream Homes Real Estate Pvt Ltd"
                className="h-14 sm:h-16 w-auto object-contain brightness-110 drop-shadow-md"
              />
            </Link>
            <p className="text-slate-400 text-sm leading-relaxed max-w-sm">
              Dream Homes Real Estate (PVT) Ltd is Sri Lanka&apos;s trusted partner for property for sale and property investment. We specialise in connecting buyers and sellers across the Colombo district and beyond, with deep expertise in Thalawathugoda, Malabe, Battaramulla, Nugegoda, and emerging growth areas.
            </p>
            <div className="pt-2 text-xs text-slate-500 space-y-1">
              <p>Hotline: <strong className="text-slate-300">+94 774446063</strong></p>
              <p>Head Office: <strong className="text-slate-300">No. 342, Pannipitiya Road, Thalawathugoda</strong></p>
              <p>Inquiries: <strong className="text-slate-300">info@dreamhomes.lk</strong></p>
            </div>
          </div>

          {/* Real Estate Categories */}
          <div>
            <h4 className="text-white font-bold text-sm uppercase tracking-wider mb-4 font-label-md">
              Prime Portfolios
            </h4>
            <ul className="space-y-2.5 text-sm">
              <li><Link href="/properties?category=Villa" className="hover:text-white transition-colors">Southern Beachfront Villas</Link></li>
              <li><Link href="/properties?category=Penthouse" className="hover:text-white transition-colors">Colombo 07 Penthouses</Link></li>
              <li><Link href="/sell" className="hover:text-white transition-colors font-bold text-[#a7f3d0]">List for Sale / Rent</Link></li>
              <li><Link href="/developments" className="hover:text-white transition-colors">Off-Plan Developments</Link></li>
              <li><Link href="/virtual-tours" className="hover:text-white transition-colors">360° Interactive VR Tours</Link></li>
            </ul>
          </div>

          {/* Company & Services */}
          <div>
            <h4 className="text-white font-bold text-sm uppercase tracking-wider mb-4 font-label-md">
              Company &amp; Advisory
            </h4>
            <ul className="space-y-2.5 text-sm">
              <li><Link href="/about" className="hover:text-white transition-colors font-bold text-[#a7f3d0]">About DreamHomes</Link></li>
              {/* <li><Link href="/house-plans" className="hover:text-white transition-colors">House Plans Catalog</Link></li> */}
              {/* <li><Link href="/construction" className="hover:text-white transition-colors">Custom Turnkey Construction</Link></li> */}
              <li><Link href="/calculator" className="hover:text-white transition-colors">ROI &amp; Mortgage Calculator</Link></li>
              <li><Link href="/agents" className="hover:text-white transition-colors">Our Professional Agents</Link></li>
              <li><Link href="/advisory" className="hover:text-white transition-colors">Legal Advisory Panel</Link></li>
            </ul>
          </div>

          {/* Central Office & Key Suburbs */}
          <div>
            <h4 className="text-white font-bold text-sm uppercase tracking-wider mb-4 font-label-md">
              Central Head Office
            </h4>
            <ul className="space-y-2.5 text-sm">
              <li className="flex items-start gap-2">
                <MapPin className="w-4 h-4 text-[#10b981] shrink-0 mt-0.5" />
                <span className="font-semibold text-white">Thalawathugoda, Colombo</span>
              </li>
              <li className="text-xs text-slate-400 pl-6">
                No. 342, Pannipitiya Road, Thalawathugoda
              </li>
              <li className="pt-2 text-xs font-bold text-slate-300 uppercase tracking-wider">
                Core Focus Suburbs:
              </li>
              <li className="text-xs text-slate-400">
                Thalawathugoda • Malabe • Battaramulla • Nugegoda • Maharagama • Kotte • Pelawatta • Athurugiriya
              </li>
              <li className="pt-2">
                <Link href="/contact" className="text-xs font-bold text-[#a7f3d0] hover:underline flex items-center gap-1">
                  <span>Contact Head Office</span> &rarr;
                </Link>
              </li>
            </ul>
          </div>

        </div>

        {/* Bottom Legal Bar */}
        <div className="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500 gap-4">
          <p>© 2026 DreamHomes Sri Lanka. All Rights Reserved.</p>
          <div className="flex items-center gap-6">
            <Link href="/insights/foreign-ownership-real-estate-regulations-sri-lanka" className="hover:text-slate-300 transition-colors">
              Foreign Ownership Law
            </Link>
            <Link href="/contact" className="hover:text-slate-300 transition-colors">
              Privacy & Legal
            </Link>
            <Link href="/auth" className="hover:text-slate-300 transition-colors">
              Investor Sign In
            </Link>
          </div>
        </div>

      </div>
    </footer>
  );
}