import React, { useState, useEffect } from 'react';
import { MapPin, Phone, Mail, Clock, ArrowRight, Menu, X, Hammer, Home, Droplet, Shield } from 'lucide-react';

// Main App Component
export default function CrestlineRoofingWebsite() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 100) {
        setIsSticky(true);
      } else {
        setIsSticky(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <div className="font-sans text-gray-800">
      {/* Top Header */}
      <div className="bg-gray-800 text-white py-2 hidden md:block">
        <div className="container mx-auto px-4 flex justify-between items-center">
          <div className="flex items-center space-x-4">
            <div className="flex items-center">
              <Phone size={16} className="mr-2" />
              <a href="tel:+12143339393" className="text-sm hover:text-orange-400">(214) 333-9393</a>
            </div>
            <div className="flex items-center">
              <Mail size={16} className="mr-2" />
              <a href="mailto:admin@crestlineroofing.store" className="text-sm hover:text-orange-400">admin@crestlineroofing.store</a>
            </div>
            <div className="flex items-center">
              <MapPin size={16} className="mr-2" />
              <span className="text-sm">1898 Louisiana Ave, League City, TX</span>
            </div>
          </div>
          <div className="flex items-center">
            <Clock size={16} className="mr-2" />
            <span className="text-sm">Mon-Fri: 7AM-7PM | Sat: 8AM-5PM</span>
          </div>
        </div>
      </div>

      {/* Main Header */}
      <header className={`bg-white py-4 ${isSticky ? 'sticky top-0 shadow-md z-50' : ''}`}>
        <div className="container mx-auto px-4">
          <div className="flex justify-between items-center">
            <div className="flex items-center">
              <div className="text-2xl font-bold text-gray-800">
                <span className="text-blue-800">Crestline</span> <span className="text-orange-500">Roofing</span>
              </div>
            </div>
            <div className="hidden md:flex items-center space-x-6">
              <nav>
                <ul className="flex space-x-6">
                  <li><a href="#home" className="hover:text-orange-500 font-medium">Home</a></li>
                  <li><a href="#services" className="hover:text-orange-500 font-medium">Services</a></li>
                  <li><a href="#about" className="hover:text-orange-500 font-medium">About</a></li>
                  <li><a href="#gallery" className="hover:text-orange-500 font-medium">Gallery</a></li>
                  <li><a href="#testimonials" className="hover:text-orange-500 font-medium">Testimonials</a></li>
                  <li><a href="#contact" className="hover:text-orange-500 font-medium">Contact</a></li>
                </ul>
              </nav>
              <a href="#contact" className="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md font-medium transition-colors">Free Quote</a>
            </div>
            <div className="md:hidden">
              <button onClick={toggleMenu} className="text-gray-800">
                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>
        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-white py-4 px-4 shadow-lg absolute w-full z-50">
            <nav>
              <ul className="space-y-4">
                <li><a href="#home" className="block hover:text-orange-500 font-medium" onClick={toggleMenu}>Home</a></li>
                <li><a href="#services" className="block hover:text-orange-500 font-medium" onClick={toggleMenu}>Services</a></li>
                <li><a href="#about" className="block hover:text-orange-500 font-medium" onClick={toggleMenu}>About</a></li>
                <li><a href="#gallery" className="block hover:text-orange-500 font-medium" onClick={toggleMenu}>Gallery</a></li>
                <li><a href="#testimonials" className="block hover:text-orange-500 font-medium" onClick={toggleMenu}>Testimonials</a></li>
                <li><a href="#contact" className="block hover:text-orange-500 font-medium" onClick={toggleMenu}>Contact</a></li>
                <li><a href="#contact" className="block bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md font-medium transition-colors text-center" onClick={toggleMenu}>Free Quote</a></li>
              </ul>
            </nav>
            <div className="mt-4 space-y-2 text-sm">
              <div className="flex items-center">
                <Phone size={16} className="mr-2 text-blue-800" />
                <a href="tel:+12143339393" className="hover:text-orange-400">(214) 333-9393</a>
              </div>
              <div className="flex items-center">
                <Mail size={16} className="mr-2 text-blue-800" />
                <a href="mailto:admin@crestlineroofing.store" className="hover:text-orange-400">admin@crestlineroofing.store</a>
              </div>
              <div className="flex items-center">
                <MapPin size={16} className="mr-2 text-blue-800" />
                <span>1898 Louisiana Ave, League City, TX</span>
              </div>
              <div className="flex items-center">
                <Clock size={16} className="mr-2 text-blue-800" />
                <span>Mon-Fri: 7AM-7PM | Sat: 8AM-5PM</span>
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Hero Section */}
      <section id="home" className="relative h-96 md:h-screen max-h-screen-75 bg-gray-900 flex items-center">
        <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
        <div 
          className="absolute inset-0 bg-cover bg-center"
          style={{ 
            backgroundImage: "url('/api/placeholder/1920/1080')", 
            filter: "brightness(0.7)"
          }}
        ></div>
        <div className="container mx-auto px-4 relative z-20 text-white">
          <h1 className="text-4xl md:text-6xl font-bold mb-4">Crestline Roofing</h1>
          <p className="text-xl md:text-2xl mb-8 max-w-2xl">Professional installation, repair and maintenance services for residential and commercial roofing in League City</p>
          <a href="#contact" className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-md font-medium text-lg transition-colors inline-block">Schedule Service</a>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-16 bg-gray-100">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Our Services</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">We offer comprehensive roofing solutions for residential and commercial properties in League City and surrounding areas.</p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* Service Card 1 */}
            <div className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300 flex flex-col items-center text-center">
              <div className="bg-blue-100 p-4 rounded-full mb-4">
                <Hammer className="text-blue-800 w-8 h-8" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Roof Repair</h3>
              <p className="text-gray-600">Quick, reliable repairs for all types of roofing. We fix damage from storms, aging, and wear-and-tear.</p>
            </div>
            
            {/* Service Card 2 */}
            <div className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300 flex flex-col items-center text-center">
              <div className="bg-blue-100 p-4 rounded-full mb-4">
                <Home className="text-blue-800 w-8 h-8" />
              </div>
              <h3 className="text-xl font-semibold mb-3">New Installation</h3>
              <p className="text-gray-600">Expert installation of high-quality roofing systems. We work with a variety of materials for lasting results.</p>
            </div>
            
            {/* Service Card 3 */}
            <div className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300 flex flex-col items-center text-center">
              <div className="bg-blue-100 p-4 rounded-full mb-4">
                <Droplet className="text-blue-800 w-8 h-8" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Leak Detection</h3>
              <p className="text-gray-600">Safe and efficient leak detection and prevention. We identify and fix issues before they cause damage.</p>
            </div>
            
            {/* Service Card 4 */}
            <div className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300 flex flex-col items-center text-center">
              <div className="bg-blue-100 p-4 rounded-full mb-4">
                <Shield className="text-blue-800 w-8 h-8" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Maintenance</h3>
              <p className="text-gray-600">Preventative maintenance plans to extend the life of your roof and prevent costly repairs.</p>
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-16 relative">
        <div 
          className="absolute inset-0 bg-cover bg-center opacity-20"
          style={{ 
            backgroundImage: "url('/api/placeholder/1920/1080')"
          }}
        ></div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">About Crestline Roofing</h2>
              <p className="text-gray-600">Serving League City and surrounding areas with excellence since 2010.</p>
            </div>
            
            <div className="bg-white bg-opacity-90 p-8 rounded-lg shadow-lg">
              <h3 className="text-2xl font-semibold mb-4 text-blue-800">Our Story</h3>
              <p className="mb-6">Crestline Roofing was founded with a simple mission: to provide honest, quality roofing services at fair prices. Over the years, we've built a reputation for reliability, craftsmanship, and excellent customer service.</p>
              
              <h3 className="text-2xl font-semibold mb-4 text-blue-800">Why Choose Us</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="flex items-start">
                  <div className="bg-orange-100 p-2 rounded-full mr-3">
                    <ArrowRight className="text-orange-500 w-4 h-4" />
                  </div>
                  <div>
                    <p className="font-medium">Licensed & Insured</p>
                    <p className="text-gray-600 text-sm">Fully certified professionals</p>
                  </div>
                </div>
                <div className="flex items-start">
                  <div className="bg-orange-100 p-2 rounded-full mr-3">
                    <ArrowRight className="text-orange-500 w-4 h-4" />
                  </div>
                  <div>
                    <p className="font-medium">Quality Materials</p>
                    <p className="text-gray-600 text-sm">We never compromise on quality</p>
                  </div>
                </div>
                <div className="flex items-start">
                  <div className="bg-orange-100 p-2 rounded-full mr-3">
                    <ArrowRight className="text-orange-500 w-4 h-4" />
                  </div>
                  <div>
                    <p className="font-medium">5-Year Warranty</p>
                    <p className="text-gray-600 text-sm">On all our installations</p>
                  </div>
                </div>
                <div className="flex items-start">
                  <div className="bg-orange-100 p-2 rounded-full mr-3">
                    <ArrowRight className="text-orange-500 w-4 h-4" />
                  </div>
                  <div>
                    <p className="font-medium">Emergency Services</p>
                    <p className="text-gray-600 text-sm">Available 24/7 for urgent needs</p>
                  </div>
                </div>
              </div>
              
              <h3 className="text-2xl font-semibold mb-4 text-blue-800">Our Team</h3>
              <p>Our professional team consists of experienced roofers, project managers, and customer service specialists. Each member is committed to delivering the highest quality work and ensuring your complete satisfaction.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery Section */}
      <section id="gallery" className="py-16 bg-gray-100">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Our Recent Work</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">Browse through our gallery to see examples of our quality craftsmanship.</p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {/* Gallery Item 1 */}
            <div className="rounded-lg shadow-lg overflow-hidden group relative">
              <img src="/api/placeholder/600/400" alt="Modern design installation" className="w-full h-64 object-cover" />
              <div className="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                <div className="text-center text-white p-4">
                  <h3 className="font-semibold text-lg mb-2">Modern Design Installation</h3>
                  <p className="text-sm">Architectural shingles with enhanced weather protection</p>
                </div>
              </div>
            </div>
            
            {/* Gallery Item 2 */}
            <div className="rounded-lg shadow-lg overflow-hidden group relative">
              <img src="/api/placeholder/600/400" alt="Shingle style roof" className="w-full h-64 object-cover" />
              <div className="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                <div className="text-center text-white p-4">
                  <h3 className="font-semibold text-lg mb-2">Shingle Style Roof</h3>
                  <p className="text-sm">Classic design with 30-year warranty materials</p>
                </div>
              </div>
            </div>
            
            {/* Gallery Item 3 */}
            <div className="rounded-lg shadow-lg overflow-hidden group relative">
              <img src="/api/placeholder/600/400" alt="Commercial installation" className="w-full h-64 object-cover" />
              <div className="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                <div className="text-center text-white p-4">
                  <h3 className="font-semibold text-lg mb-2">Commercial Installation</h3>
                  <p className="text-sm">Flat roof system for retail complex</p>
                </div>
              </div>
            </div>
            
            {/* Gallery Item 4 */}
            <div className="rounded-lg shadow-lg overflow-hidden group relative">
              <img src="/api/placeholder/600/400" alt="Emergency repair" className="w-full h-64 object-cover" />
              <div className="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                <div className="text-center text-white p-4">
                  <h3 className="font-semibold text-lg mb-2">Emergency Repair</h3>
                  <p className="text-sm">Storm damage restoration completed in 48 hours</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <TestimonialsSection />

      {/* Business Hours Section */}
      <section className="py-16 bg-gray-800 text-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">Business Hours & Service Area</h2>
              <p className="text-gray-300">Serving League City and surrounding communities</p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-gray-700 p-6 rounded-lg">
                <h3 className="text-2xl font-semibold mb-4 text-orange-400">Business Hours</h3>
                <ul className="space-y-2">
                  <li className="flex justify-between">
                    <span>Monday</span>
                    <span>7:00 AM - 7:00 PM</span>
                  </li>
                  <li className="flex justify-between">
                    <span>Tuesday</span>
                    <span>7:00 AM - 7:00 PM</span>
                  </li>
                  <li className="flex justify-between">
                    <span>Wednesday</span>
                    <span>7:00 AM - 7:00 PM</span>
                  </li>
                  <li className="flex justify-between">
                    <span>Thursday</span>
                    <span>7:00 AM - 7:00 PM</span>
                  </li>
                  <li className="flex justify-between">
                    <span>Friday</span>
                    <span>7:00 AM - 7:00 PM</span>
                  </li>
                  <li className="flex justify-between">
                    <span>Saturday</span>
                    <span>8:00 AM - 5:00 PM</span>
                  </li>
                  <li className="flex justify-between">
                    <span>Sunday</span>
                    <span>Closed</span>
                  </li>
                </ul>
                
                <div className="mt-6 p-4 bg-orange-500 rounded-lg text-center">
                  <p className="font-semibold mb-2">24/7 Emergency Service Available</p>
                  <a href="tel:+12143339393" className="text-xl font-bold">(214) 333-9393</a>
                </div>
              </div>
              
              <div className="bg-gray-700 p-6 rounded-lg">
                <h3 className="text-2xl font-semibold mb-4 text-orange-400">Service Areas</h3>
                <p className="mb-4">We proudly serve the following communities in and around League City:</p>
                <div className="grid grid-cols-2 gap-2">
                  <div className="flex items-center">
                    <ArrowRight className="text-orange-400 w-4 h-4 mr-2" />
                    <span>League City</span>
                  </div>
                  <div className="flex items-center">
                    <ArrowRight className="text-orange-400 w-4 h-4 mr-2" />
                    <span>Friendswood</span>
                  </div>
                  <div className="flex items-center">
                    <ArrowRight className="text-orange-400 w-4 h-4 mr-2" />
                    <span>Kemah</span>
                  </div>
                  <div className="flex items-center">
                    <ArrowRight className="text-orange-400 w-4 h-4 mr-2" />
                    <span>Clear Lake</span>
                  </div>
                  <div className="flex items-center">
                    <ArrowRight className="text-orange-400 w-4 h-4 mr-2" />
                    <span>Seabrook</span>
                  </div>
                  <div className="flex items-center">
                    <ArrowRight className="text-orange-400 w-4 h-4 mr-2" />
                    <span>Webster</span>
                  </div>
                  <div className="flex items-center">
                    <ArrowRight className="text-orange-400 w-4 h-4 mr-2" />
                    <span>Dickinson</span>
                  </div>
                  <div className="flex items-center">
                    <ArrowRight className="text-orange-400 w-4 h-4 mr-2" />
                    <span>Texas City</span>
                  </div>
                </div>
                
                <p className="mt-6">Not sure if we service your area? Contact us to find out!</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Contact Us</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">Reach out to schedule a free consultation or get a quote for your roofing project.</p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
            <div>
              <div className="bg-gray-100 p-6 rounded-lg h-full">
                <h3 className="text-2xl font-semibold mb-6 text-blue-800">Get In Touch</h3>
                
                <div className="space-y-4 mb-8">
                  <div className="flex items-start">
                    <div className="bg-blue-100 p-3 rounded-full mr-4">
                      <MapPin className="text-blue-800 w-5 h-5" />
                    </div>
                    <div>
                      <p className="font-medium">Address</p>
                      <p className="text-gray-600">1898 Louisiana Ave, League City, TX 77573</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start">
                    <div className="bg-blue-100 p-3 rounded-full mr-4">
                      <Phone className="text-blue-800 w-5 h-5" />
                    </div>
                    <div>
                      <p className="font-medium">Phone</p>
                      <a href="tel:+12143339393" className="text-gray-600 hover:text-orange-500">(214) 333-9393</a>
                    </div>
                  </div>
                  
                  <div className="flex items-start">
                    <div className="bg-blue-100 p-3 rounded-full mr-4">
                      <Mail className="text-blue-800 w-5 h-5" />
                    </div>
                    <div>
                      <p className="font-medium">Email</p>
                      <a href="mailto:admin@crestlineroofing.store" className="text-gray-600 hover:text-orange-500">admin@crestlineroofing.store</a>
                    </div>
                  </div>
                  
                  <div className="flex items-start">
                    <div className="bg-blue-100 p-3 rounded-full mr-4">
                      <Clock className="text-blue-800 w-5 h-5" />
                    </div>
                    <div>
                      <p className="font-medium">Business Hours</p>
                      <p className="text-gray-600">Mon-Fri: 7AM-7PM</p>
                      <p className="text-gray-600">Sat: 8AM-5PM | Sun: Closed</p>
                    </div>
                  </div>
                </div>
                
                {/* Google Maps placeholder */}
                <div className="h-64 bg-gray-300 rounded-lg relative overflow-hidden">
                  <div className="absolute inset-0 flex items-center justify-center">
                    <p className="text-gray-600">Google Maps would be embedded here</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div>
              <div className="bg-white shadow-lg p-6 rounded-lg">
                <h3 className="text-2xl font-semibold mb-6 text-blue-800">Send us a Message</h3>
                
                <form className="space-y-4">
                  <div>
                    <label className="block text-gray-700 mb-2" htmlFor="name">Full Name</label>
                    <input
                      type="text"
                      id="name"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Your Name"
                      required
                    />
                  </div>
                  
                  <div>
                    <label className="block text-gray-700 mb-2" htmlFor="email">Email Address</label>
                    <input
                      type="email"
                      id="email"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Your Email"
                      required
                    />
                  </div>
                  
                  <div>
                    <label className="block text-gray-700 mb-2" htmlFor="phone">Phone Number</label>
                    <input
                      type="tel"
                      id="phone"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Your Phone"
                      required
                    />
                  </div>
                  
                  <div>
                    <label className="block text-gray-700 mb-2" htmlFor="service">Service Needed</label>
                    <select
                      id="service"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      required
                    >
                      <option value="">Select a Service</option>
                      <option value="repair">Roof Repair</option>
                      <option value="installation">New Installation</option>
                      <option value="leak">Leak Detection</option>
                      <option value="maintenance">Maintenance</option>
                      <option value="inspection">Roof Inspection</option>
                      <option value="emergency">Emergency Service</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                  
                  <div>
                    <label className="block text-gray-700 mb-2" htmlFor="message">Message</label>
                    <textarea
                      id="message"
                      rows="4"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Tell us about your project or issue"
                      required
                    ></textarea>
                  </div>
                  
                  <button
                    type="submit"
                    className="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-2 px-4 rounded-md transition-colors"
                  >
                    Submit Request
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div>
              <h3 className="text-xl font-semibold mb-4">Crestline Roofing</h3>
              <p className="text-gray-400 mb-4">Professional roofing services for residential and commercial properties. Serving League City and surrounding areas with quality and integrity.</p>
            </div>
            
            <div>
              <h3 className="text-xl font-semibold mb-4">Quick Links</h3>
              <ul className="space-y-2">
                <li><a href="#home" className="text-gray-400 hover:text-orange-400 transition-colors">Home</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-orange-400 transition-colors">Services</a></li>
                <li><a href="#about" className="text-gray-400 hover:text-orange-400 transition-colors">About Us</a></li>
                <li><a href="#gallery" className="text-gray-400 hover:text-orange-400 transition-colors">Gallery</a></li>
                <li><a href="#testimonials" className="text-gray-400 hover:text-orange-400 transition-colors">Testimonials</a></li>
                <li><a href="#contact" className="text-gray-400 hover:text-orange-400 transition-colors">Contact</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="text-xl font-semibold mb-4">Services</h3>
              <ul className="space-y-2">
                <li><a href="#services" className="text-gray-400 hover:text-orange-400 transition-colors">Roof Repair</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-orange-400 transition-colors">New Installation</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-orange-400 transition-colors">Leak Detection</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-orange-400 transition-colors">Maintenance</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-orange-400 transition-colors">Roof Inspection</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-orange-400 transition-colors">Emergency Service</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="text-xl font-semibold mb-4">Contact Information</h3>
              <ul className="space-y-3">
                <li className="flex items-start">
                  <MapPin className="text-orange-400 w-5 h-5 mr-3 mt-1" />
                  <span>1898 Louisiana Ave, League City, TX 77573</span>
                </li>
                <li className="flex items-start">
                  <Phone className="text-orange-400 w-5 h-5 mr-3 mt-1" />
                  <a href="tel:+12143339393" className="hover:text-orange-400 transition-colors">(214) 333-9393</a>
                </li>
                <li className="flex items-start">
                  <Mail className="text-orange-400 w-5 h-5 mr-3 mt-1" />
                  <a href="mailto:admin@crestlineroofing.store" className="hover:text-orange-400 transition-colors">admin@crestlineroofing.store</a>
                </li>
                <li className="flex items-start">
                  <Clock className="text-orange-400 w-5 h-5 mr-3 mt-1" />
                  <div>
                    <p>Mon-Fri: 7AM-7PM</p>
                    <p>Sat: 8AM-5PM | Sun: Closed</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-12 pt-8 text-center">
            <p className="text-gray-500">&copy; {new Date().getFullYear()} Crestline Roofing. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}

// Testimonials Section Component
function TestimonialsSection() {
  const [activeIndex, setActiveIndex] = useState(0);
  const testimonials = [
    {
      text: "Crestline Roofing did an outstanding job replacing our roof after a storm. The team was professional, efficient, and completed the work ahead of schedule. Highly recommend their services!",
      name: "Michael Johnson",
      location: "League City"
    },
    {
      text: "We had a leak that two other companies couldn't fix. The team at Crestline identified the problem quickly and provided a permanent solution. Their attention to detail is impressive.",
      name: "Sarah Williams",
      location: "Friendswood"
    },
    {
      text: "From the initial consultation to the final inspection, Crestline Roofing provided exceptional service. Fair pricing, quality materials, and expert installation. Our new roof looks fantastic!",
      name: "David Rodriguez",
      location: "Clear Lake"
    }
  ];

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
    }, 5000);
    
    return () => clearInterval(interval);
  }, [testimonials.length]);

  return (
    <section id="testimonials" className="py-16 bg-blue-800 text-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">What Our Customers Say</h2>
          <p className="text-blue-200 max-w-2xl mx-auto">Don't just take our word for it. Hear from our satisfied customers.</p>
        </div>
        
        <div className="max-w-4xl mx-auto">
          <div className="bg-white text-gray-800 p-8 rounded-lg shadow-lg relative">
            <div className="absolute -top-5 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white p-4 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
            </div>
            
            <div className="py-8">
              {testimonials.map((testimonial, index) => (
                <div 
                  key={index} 
                  className={`transition-opacity duration-500 ${index === activeIndex ? 'block opacity-100' : 'hidden opacity-0'}`}
                >
                  <p className="text-xl italic mb-6">"{testimonial.text}"</p>
                  <div className="flex flex-col items-center">
                    <p className="font-semibold text-lg">{testimonial.name}</p>
                    <p className="text-gray-600">{testimonial.location}</p>
                  </div>
                </div>
              ))}
            </div>
            
            <div className="flex justify-center space-x-2">
              {testimonials.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setActiveIndex(index)}
                  className={`w-3 h-3 rounded-full transition-colors ${index === activeIndex ? 'bg-orange-500' : 'bg-gray-300'}`}
                  aria-label={`Go to testimonial ${index + 1}`}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}