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

interface ContactSectionProps {
  onOpenModal: () => void;
}

export const ContactSection: React.FC<ContactSectionProps> = ({ onOpenModal }) => {
  return (
    <footer id="contact" className="bg-[#333333] text-white text-center py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto">
        {/* Footer Headline */}
        <h2 className="text-2xl sm:text-3xl md:text-4xl font-montserrat font-black uppercase text-white tracking-wide mb-3">
          Expert help delivered straight to your door.
        </h2>
        <p className="font-inter font-light text-stone-300 text-sm sm:text-base">
          Reach out today to schedule your mobile tech support visit anywhere in Southwest Cornwall.
        </p>

        {/* Generous Space before button as specifically requested */}
        <div className="mt-16 sm:mt-20 mb-14 flex flex-col sm:flex-row items-center justify-center gap-4">
          <button
            onClick={onOpenModal}
            className="btn-ss inline-block px-8 sm:px-12 py-5 font-montserrat font-black text-sm sm:text-base uppercase tracking-widest shadow-lg cursor-pointer"
          >
            Get In Touch Today
          </button>
          
          <a
            href="https://wa.me/447424244145"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center gap-2 px-6 py-5 bg-[#25d366] hover:bg-[#20bd5a] text-white rounded-full font-montserrat font-black text-sm uppercase tracking-wider shadow-lg transition-all"
          >
            <i className="fa-brands fa-whatsapp text-xl" />
            <span>WhatsApp Message</span>
          </a>
        </div>

        {/* Contact Info Block */}
        <div className="contact-info max-w-xl mx-auto border-t border-white/10 pt-10">
          {/* Location Item */}
          <div className="contact-item flex items-center justify-center gap-3 mb-4 font-inter font-light text-stone-300 text-base">
            <MapPin className="w-5 h-5 text-[#56a0ab] shrink-0" />
            <span>Available all over Southwest Cornwall</span>
          </div>

          {/* Telephone Item */}
          <div className="contact-item flex items-center justify-center gap-3 mb-8 font-inter font-light text-base">
            <Phone className="w-5 h-5 text-[#56a0ab] shrink-0" />
            <a 
              href="tel:+447424244145" 
              className="text-white hover:text-[#56a0ab] underline decoration-stone-500 underline-offset-4 transition-colors"
            >
              07424 244145
            </a>
          </div>

          {/* Social Row */}
          <div className="social-row flex justify-center items-center gap-6 sm:gap-10 flex-wrap">
            <a
              href="https://www.facebook.com/simplysortedtech"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 text-[#56a0ab] hover:text-white font-inter font-normal text-sm tracking-wider uppercase transition-colors"
            >
              <i className="fa-brands fa-facebook-f text-lg" />
              <span>FACEBOOK</span>
            </a>
          </div>
        </div>

        {/* Copyright */}
        <p className="mt-16 font-inter font-light text-xs text-stone-500 tracking-widest uppercase">
          © {new Date().getFullYear()} SIMPLY SORTED TECH. ALL RIGHTS RESERVED.
        </p>
      </div>
    </footer>
  );
};