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-[#2c415e] text-white py-10 px-6">
        
      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-8">

        {/* Logo + Deskripsi */}
        <div className="md:col-span-4">
          <img src="/Finals_Profile.png" alt="FortivaNet 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>

        {/* Alamat */}
        <div className="md:col-span-4">
          <h3 className="font-bold text-lg mb-4 relative inline-block">
            Alamat
          </h3>
          <p className="text-sm leading-relaxed">
            Kantor Administrasi:
            <br />
           Jl. Paledang No. 236, Kec. Campaka, Kel. Andir Bandung 40184

          </p>
          <br />
           <p className="text-sm leading-relaxed">
            Kantor Teknis:
            <br />
            Parahyangan Business Park, The Suites Blok E5-E7
            Jl. Soekarno Hatta No. 693, Bandung,
            Jawa Barat 40286, Indonesia
          </p>
        </div>

        {/* Explore */}
        <div className="md:col-span-2">
          <h3 className="font-bold text-lg mb-2 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="/portofolio">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>

        
        {/* Kontak Kami */}
        <div className="md:col-span-2">
          <h3 className="font-bold text-lg mb-2 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@fortiva.net.id
            </li>
            <li className="flex items-center gap-2">
              <Earth className="w-4 h-4"/> https://www.fortiva.net.id/
            </li>
          </ul>
        </div>
      </div>

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