import { Phone, Mail, Earth, Link as LinkIcon } from "lucide-react";
import { Link } from "react-router-dom"; // ini untuk routing

export default function Footer({ footerRef }) {
  return (
    <footer 
      id="footer" 
      ref={footerRef}  
      className="bg-[#5C739B] text-white py-10 px-6">
        
      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">

        {/* Logo + Deskripsi */}
        <div>
          <img src="/WTell.png" alt="Walanja Logo" className="w-32 mb-4" />
          <p className="text-sm leading-relaxed">
            PT. Jaringan Citra Mandiri adalah Perusahaan Swasta yang bergerak di bidang Penyedia
            Layanan Teknologi Telekomunikasi Berbasis fiber optik.
          </p>
        </div>

        {/* Explore */}
        <div>
          <h3 className="font-bold text-lg mb-4 relative inline-block">
            Explore
          </h3>
          <ul className="space-y-3 text-sm">
            <li className="flex items-center gap-2">
              <LinkIcon className="w-4 h-4" /> 
              <Link to="/">Home</Link>
            </li>
            <li className="flex items-center gap-2">
              <LinkIcon className="w-4 h-4" /> 
              <Link to="/portfolio">Portofolio</Link>
            </li>
            <li className="flex items-center gap-2">
              <LinkIcon className="w-4 h-4" /> 
              <Link to="/about">About Us</Link>
            </li>
            <li className="flex items-center gap-2">
              <LinkIcon className="w-4 h-4" /> 
              <Link to="/#footer">Contact Us</Link>
            </li>
          </ul>
        </div>

        {/* Newsletter */}
        <div>
          <h3 className="font-bold text-lg mb-4 relative inline-block">
            Newsletter
          </h3>
          <p className="text-sm mb-3">
            Subscribe untuk mendapatkan berita terbaru
          </p>
          <div className="flex flex-col sm:flex-row gap-2">
            <input
              type="email"
              placeholder="Masukkan Email"
              className="px-3 py-2 rounded-md border border-gray-300 text-black text-sm focus:outline-none"
            />
            <button className="px-4 py-2 bg-gradient-to-r from-green-400 to-blue-400 text-white rounded-md text-sm hover:opacity-90">
              Subscribe
            </button>
          </div>
        </div>

        {/* Kontak Kami */}
        <div>
          <h3 className="font-bold text-lg mb-4 relative inline-block">
            Kontak Kami
          </h3>
          <ul className="space-y-2 text-sm">
            <li className="flex items-center gap-2">
              <Phone className="w-4 h-4"/> 0821 2062 3712
            </li>
            <li className="flex items-center gap-2">
              <Mail className="w-4 h-4"/> cs@wtell.id
            </li>
            <li className="flex items-center gap-2">
              <Earth className="w-4 h-4"/> https://www.wtell.id/
            </li>
          </ul>
        </div>
      </div>

      {/* Copyright */}
      <div className="border-t border-gray-400 mt-8 pt-4 text-center text-sm">
        © 2025 Walanja Telekomunikasi.
      </div>
    </footer>
  );
}
