import React from 'react';
import { Phone, Mail, MapPin, Clock, ChevronRight, Scale, Shield, Gavel } from 'lucide-react';

export default function LawFirmWebsite() {
  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="bg-slate-900 text-white py-4">
        <div className="container mx-auto px-4 flex justify-between items-center">
          <div>
            <h1 className="text-xl font-semibold">Kwame A. Boafo & Associates</h1>
            <p className="text-sm text-slate-300">Nyame Adom Chambers</p>
          </div>
          <div className="hidden md:flex space-x-6">
            <a href="#home" className="hover:text-gold-400">Home</a>
            <a href="#about" className="hover:text-gold-400">About</a>
            <a href="#practice-areas" className="hover:text-gold-400">Practice Areas</a>
            <a href="#contact" className="hover:text-gold-400">Contact</a>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <div className="relative h-[600px]">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f')] bg-cover bg-center">
          <div className="absolute inset-0 bg-black/60"></div>
        </div>
        <div className="relative container mx-auto px-4 h-full flex items-center">
          <div className="text-white max-w-2xl">
            <h2 className="text-5xl font-bold mb-6">Excellence in Legal Services</h2>
            <p className="text-xl mb-8">Dedicated to providing exceptional legal representation with integrity and professionalism in Kumasi and beyond.</p>
            <button className="bg-yellow-700 hover:bg-yellow-800 text-white px-8 py-3 rounded-md font-semibold transition">
              Schedule Consultation
            </button>
          </div>
        </div>
      </div>

      {/* Quick Contact Bar */}
      <div className="bg-slate-100 py-4">
        <div className="container mx-auto px-4 flex flex-wrap justify-between items-center gap-4">
          <div className="flex items-center gap-2">
            <Phone className="text-yellow-700" size={20} />
            <span>+233 XX XXX XXXX</span>
          </div>
          <div className="flex items-center gap-2">
            <Mail className="text-yellow-700" size={20} />
            <span>info@boafolaw.com</span>
          </div>
          <div className="flex items-center gap-2">
            <MapPin className="text-yellow-700" size={20} />
            <span>Adum, Kumasi, Ghana</span>
          </div>
          <div className="flex items-center gap-2">
            <Clock className="text-yellow-700" size={20} />
            <span>Mon - Fri: 8:00 AM - 5:00 PM</span>
          </div>
        </div>
      </div>

      {/* Practice Areas */}
      <section className="py-20 bg-white" id="practice-areas">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Our Practice Areas</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                icon: <Scale className="w-12 h-12 text-yellow-700" />,
                title: "Corporate Law",
                description: "Expert guidance in business formation, contracts, and corporate governance."
              },
              {
                icon: <Shield className="w-12 h-12 text-yellow-700" />,
                title: "Civil Litigation",
                description: "Skilled representation in civil disputes and litigation matters."
              },
              {
                icon: <Gavel className="w-12 h-12 text-yellow-700" />,
                title: "Real Estate Law",
                description: "Comprehensive legal services for property transactions and disputes."
              }
            ].map((area, index) => (
              <div key={index} className="bg-slate-50 p-6 rounded-lg hover:shadow-lg transition">
                <div className="mb-4">{area.icon}</div>
                <h3 className="text-xl font-semibold mb-2">{area.title}</h3>
                <p className="text-slate-600 mb-4">{area.description}</p>
                <a href="#" className="text-yellow-700 flex items-center gap-1 hover:gap-2 transition-all">
                  Learn More <ChevronRight size={16} />
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-20 bg-slate-50" id="about">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl font-bold mb-6">About Our Firm</h2>
              <p className="text-slate-600 mb-4">
                Kwame A. Boafo & Associates (Nyame Adom Chambers) is a distinguished law firm based in Adum, Kumasi. 
                With years of experience, we have built a reputation for excellence in providing comprehensive legal services 
                to individuals and businesses throughout Ghana.
              </p>
              <p className="text-slate-600 mb-6">
                Our team of dedicated lawyers combines deep legal knowledge with a commitment to client service, 
                ensuring that we deliver the best possible outcomes for our clients.
              </p>
              <button className="bg-yellow-700 hover:bg-yellow-800 text-white px-6 py-3 rounded-md font-semibold transition">
                Meet Our Team
              </button>
            </div>
            <div className="relative h-[400px]">
              <img 
                src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a"
                alt="Law Office"
                className="rounded-lg object-cover w-full h-full"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section className="py-20 bg-white" id="contact">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Contact Us</h2>
          <div className="grid md:grid-cols-2 gap-12">
            <div className="space-y-6">
              <form className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Name</label>
                  <input type="text" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-700" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
                  <input type="email" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-700" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Message</label>
                  <textarea className="w-full px-4 py-2 border border-gray-300 rounded-md h-32 focus:outline-none focus:ring-2 focus:ring-yellow-700"></textarea>
                </div>
                <button className="w-full bg-yellow-700 hover:bg-yellow-800 text-white px-6 py-3 rounded-md font-semibold transition">
                  Send Message
                </button>
              </form>
            </div>
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-semibold mb-4">Office Location</h3>
                <p className="text-slate-600 mb-4">Adum, Kumasi, Ghana</p>
                {/* Google Maps iframe */}
                <div className="w-full h-[300px] rounded-lg overflow-hidden shadow-lg">
                  <iframe 
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3962.6752774750984!2d-1.6266277!3d6.6976432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdb96f0fde1e0cd%3A0xb87e2475d863f186!2sAdum%2C%20Kumasi!5e0!3m2!1sen!2sgh!4v1708701234567!5m2!1sen!2sgh"
                    width="100%"
                    height="100%"
                    style={{ border: 0 }}
                    allowFullScreen=""
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                    className="rounded-lg"
                  ></iframe>
                </div>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-4">Contact Information</h3>
                <div className="space-y-2 text-slate-600">
                  <p>Phone: +233 XX XXX XXXX</p>
                  <p>Email: info@boafolaw.com</p>
                  <p>Hours: Monday - Friday, 8:00 AM - 5:00 PM</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-3 gap-8">
            <div>
              <h3 className="text-xl font-semibold mb-4">Kwame A. Boafo & Associates</h3>
              <p className="text-slate-300">Nyame Adom Chambers</p>
              <p className="text-slate-300 mt-2">Excellence in Legal Services</p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4">Quick Links</h3>
              <ul className="space-y-2 text-slate-300">
                <li><a href="#home" className="hover:text-yellow-700">Home</a></li>
                <li><a href="#about" className="hover:text-yellow-700">About</a></li>
                <li><a href="#practice-areas" className="hover:text-yellow-700">Practice Areas</a></li>
                <li><a href="#contact" className="hover:text-yellow-700">Contact</a></li>
              </ul>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4">Legal Notice</h3>
              <p className="text-slate-300">© 2024 Kwame A. Boafo & Associates. All rights reserved.</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}