import React from 'react';
import { Phone, Mail, MapPin, ChevronRight, Building2, Users, Timer, Hammer, CheckCircle } from 'lucide-react';

export default function ConstructionWebsite() {
  return (
    <div className="min-h-screen font-inter">
      {/* Navigation */}
      <nav className="bg-white shadow-lg fixed w-full z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20">
            <div className="flex items-center">
              <h1 className="text-2xl font-bold text-gray-800">BOYKO GROUP</h1>
            </div>
            <div className="flex items-center space-x-8">
              <a href="#home" className="text-gray-700 hover:text-orange-600">Home</a>
              <a href="#services" className="text-gray-700 hover:text-orange-600">Services</a>
              <a href="#projects" className="text-gray-700 hover:text-orange-600">Projects</a>
              <a href="#about" className="text-gray-700 hover:text-orange-600">About</a>
              <a href="#contact" className="text-gray-700 hover:text-orange-600">Contact</a>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section id="home" className="pt-20">
        <div className="relative h-[600px]">
          <div className="absolute inset-0">
            <img 
              src="https://images.unsplash.com/photo-1541976590-713941681591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
              alt="Construction site" 
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-black opacity-50"></div>
          </div>
          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
            <div className="flex flex-col justify-center h-full">
              <h2 className="text-5xl font-bold text-white mb-6">Building Your Vision,<br />Delivering Excellence</h2>
              <p className="text-xl text-gray-200 mb-8 max-w-2xl">Leading construction company specializing in commercial, residential, and industrial projects.</p>
              <a href="#contact" className="bg-orange-600 text-white px-8 py-4 rounded-md w-fit hover:bg-orange-700 transition-colors flex items-center gap-2">
                Get Started <ChevronRight size={20} />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold text-center mb-16">Our Services</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { icon: <Building2 size={40} />, title: 'Commercial Construction', description: 'State-of-the-art commercial buildings and office spaces.' },
              { icon: <Hammer size={40} />, title: 'Residential Projects', description: 'Custom homes and residential developments.' },
              { icon: <Timer size={40} />, title: 'Renovations', description: 'Modern renovations and building upgrades.' }
            ].map((service, index) => (
              <div key={index} className="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
                <div className="text-orange-600 mb-4">{service.icon}</div>
                <h3 className="text-xl font-bold mb-4">{service.title}</h3>
                <p className="text-gray-600">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Projects Section */}
      <section id="projects" className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold text-center mb-16">Featured Projects</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              { image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', title: 'Modern Office Complex', location: 'Downtown Business District' },
              { image: 'https://images.unsplash.com/photo-1613490493576-7fde63acd811?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80', title: 'Luxury Apartments', location: 'Riverside Development' },
              { image: 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80', title: 'Shopping Mall', location: 'City Center' },
            ].map((project, index) => (
              <div key={index} className="group relative overflow-hidden rounded-lg shadow-lg">
                <img src={project.image} alt={project.title} className="w-full h-64 object-cover transition-transform group-hover:scale-110" />
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6">
                  <h3 className="text-xl font-bold text-white">{project.title}</h3>
                  <p className="text-gray-300">{project.location}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-4xl font-bold mb-6">About Boyko Group</h2>
              <p className="text-gray-600 mb-6">With over 20 years of experience in the construction industry, Boyko Group has established itself as a leader in delivering high-quality construction projects. Our commitment to excellence and innovation has earned us the trust of countless clients.</p>
              <div className="grid grid-cols-2 gap-6">
                {[
                  { number: '20+', label: 'Years Experience' },
                  { number: '500+', label: 'Projects Completed' },
                  { number: '100%', label: 'Client Satisfaction' },
                  { number: '250+', label: 'Team Members' },
                ].map((stat, index) => (
                  <div key={index} className="bg-white p-6 rounded-lg shadow-md">
                    <div className="text-2xl font-bold text-orange-600">{stat.number}</div>
                    <div className="text-gray-600">{stat.label}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative h-[500px]">
              <img 
                src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
                alt="Construction team"
                className="w-full h-full object-cover rounded-lg shadow-xl"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold text-center mb-16">Contact Us</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div>
              <h3 className="text-2xl font-bold mb-6">Get in Touch</h3>
              <div className="space-y-6">
                <div className="flex items-center gap-4">
                  <Phone className="text-orange-600" />
                  <span>+1 (555) 123-4567</span>
                </div>
                <div className="flex items-center gap-4">
                  <Mail className="text-orange-600" />
                  <span>info@boykogroup.com</span>
                </div>
                <div className="flex items-center gap-4">
                  <MapPin className="text-orange-600" />
                  <span>123 Construction Ave, City, State 12345</span>
                </div>
              </div>
            </div>
            <form className="space-y-6">
              <div>
                <input type="text" placeholder="Your Name" className="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-600" />
              </div>
              <div>
                <input type="email" placeholder="Your Email" className="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-600" />
              </div>
              <div>
                <textarea placeholder="Your Message" rows={4} className="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-600"></textarea>
              </div>
              <button className="bg-orange-600 text-white px-8 py-4 rounded-md w-full hover:bg-orange-700 transition-colors">Send Message</button>
            </form>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-2xl font-bold mb-4">BOYKO GROUP</h3>
              <p className="text-gray-400">Building tomorrow's landmarks today.</p>
            </div>
            <div>
              <h4 className="text-lg font-bold mb-4">Quick Links</h4>
              <ul className="space-y-2">
                <li><a href="#home" className="text-gray-400 hover:text-white">Home</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-white">Services</a></li>
                <li><a href="#projects" className="text-gray-400 hover:text-white">Projects</a></li>
                <li><a href="#about" className="text-gray-400 hover:text-white">About</a></li>
              </ul>
            </div>
            <div>
              <h4 className="text-lg font-bold mb-4">Services</h4>
              <ul className="space-y-2">
                <li className="text-gray-400">Commercial Construction</li>
                <li className="text-gray-400">Residential Projects</li>
                <li className="text-gray-400">Renovations</li>
                <li className="text-gray-400">Project Management</li>
              </ul>
            </div>
            <div>
              <h4 className="text-lg font-bold mb-4">Contact Info</h4>
              <ul className="space-y-2">
                <li className="text-gray-400">123 Construction Ave</li>
                <li className="text-gray-400">City, State 12345</li>
                <li className="text-gray-400">+1 (555) 123-4567</li>
                <li className="text-gray-400">info@boykogroup.com</li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
            <p>&copy; 2023 Boyko Group. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}