import React from 'react';
import { Building, Phone, Mail, MapPin, ArrowUp } from 'lucide-react';

const Footer: React.FC = () => {
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  return (
    <footer className="bg-java-dark text-white">
      <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
          <div>
            <div className="flex items-center space-x-2 mb-6">
              <Building className="h-8 w-8 text-java-blue" />
              <div>
                <h3 className="font-heading font-bold text-xl">Java Tekno Plus</h3>
                <p className="text-xs text-gray-400 -mt-1">IT Solutions</p>
              </div>
            </div>
            <p className="text-gray-400 mb-6">
              Menyediakan solusi teknologi informasi terbaik untuk kebutuhan 
              bisnis dan keamanan dengan layanan profesional dan handal.
            </p>
          </div>
          
          <div>
            <h4 className="text-xl font-bold mb-6">Layanan</h4>
            <ul className="space-y-3">
              <li>
                <a href="#" className="text-gray-400 hover:text-java-blue transition-colors">Instalasi CCTV</a>
              </li>
              <li>
                <a href="#" className="text-gray-400 hover:text-java-blue transition-colors">Instalasi Jaringan Internet</a>
              </li>
              <li>
                <a href="#" className="text-gray-400 hover:text-java-blue transition-colors">Instalasi Penangkal Petir</a>
              </li>
              <li>
                <a href="#" className="text-gray-400 hover:text-java-blue transition-colors">Instalasi Pemancar HT</a>
              </li>
              <li>
                <a href="#" className="text-gray-400 hover:text-java-blue transition-colors">Development Software</a>
              </li>
              <li>
                <a href="#" className="text-gray-400 hover:text-java-blue transition-colors">Security System</a>
              </li>
            </ul>
          </div>
          
          <div>
            <h4 className="text-xl font-bold mb-6">Link Cepat</h4>
            <ul className="space-y-3">
              <li>
                <a href="#beranda" className="text-gray-400 hover:text-java-blue transition-colors">Beranda</a>
              </li>
              <li>
                <a href="#layanan" className="text-gray-400 hover:text-java-blue transition-colors">Layanan</a>
              </li>
              <li>
                <a href="#tentang" className="text-gray-400 hover:text-java-blue transition-colors">Tentang Kami</a>
              </li>
              <li>
                <a href="#kontak" className="text-gray-400 hover:text-java-blue transition-colors">Kontak</a>
              </li>
            </ul>
          </div>
          
          <div>
            <h4 className="text-xl font-bold mb-6">Kontak</h4>
            <ul className="space-y-4">
              <li className="flex items-start">
                <MapPin className="h-5 w-5 text-java-blue mr-3 mt-1" />
                <span className="text-gray-400">
                  Jl. Lamtoro Tidar Baru RT002 RW012, Kelurahan Magersari, 
                  Kecamatan Magelang Selatan, Kota Magelang, 56126
                </span>
              </li>
              <li className="flex items-center">
                <Phone className="h-5 w-5 text-java-blue mr-3" />
                <span className="text-gray-400">085713553776</span>
              </li>
              <li className="flex items-center">
                <Mail className="h-5 w-5 text-java-blue mr-3" />
                <span className="text-gray-400">info@javatekno.id</span>
              </li>
            </ul>
          </div>
        </div>
        
        <hr className="border-gray-800 my-10" />
        
        <div className="flex flex-col md:flex-row justify-between items-center">
          <p className="text-gray-400 text-sm">
            &copy; {new Date().getFullYear()} PT. Java Tekno Plus. All rights reserved.
          </p>
          
          <button 
            onClick={scrollToTop}
            className="mt-4 md:mt-0 rounded-full bg-java-dark border border-gray-800 p-3 
                     hover:bg-gray-800 transition-colors duration-300"
            aria-label="Scroll to top"
          >
            <ArrowUp className="h-5 w-5 text-white" />
          </button>
        </div>
      </div>
    </footer>
  );
};

export default Footer;