import React from 'react';
import { Calendar, Clock, MapPin, Phone, Mail, Star, CheckCircle, Instagram } from 'lucide-react';

export default function DentalWebsite() {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <header className="relative h-screen">
        <div className="absolute inset-0">
          <img 
            src="https://images.unsplash.com/photo-1629909613654-28e377c37b09?ixlib=rb-4.0.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2068&q=80"
            alt="Modern dental clinic"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gray-900/40"></div>
        </div>
        
        <nav className="relative z-10 flex justify-between items-center px-8 py-6">
          <div className="text-white text-2xl font-light">DR. SMITH</div>
          <div className="flex gap-8 text-white">
            <a href="#services" className="hover:text-gray-200 transition">Services</a>
            <a href="#about" className="hover:text-gray-200 transition">About</a>
            <a href="#testimonials" className="hover:text-gray-200 transition">Testimonials</a>
            <a href="#contact" className="hover:text-gray-200 transition">Contact</a>
          </div>
        </nav>

        <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-4">
          <h1 className="text-5xl md:text-6xl text-white font-light mb-6">
            Exceptional Dental Care in<br />Central London
          </h1>
          <p className="text-xl text-white/90 mb-8 max-w-2xl">
            Combining artistic vision with technical excellence to create your perfect smile
          </p>
          <button className="bg-white text-gray-900 px-8 py-3 rounded-full hover:bg-gray-100 transition">
            Book Consultation
          </button>
        </div>
      </header>

      {/* Services Section */}
      <section id="services" className="py-20 px-8 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-4xl font-light text-center mb-16">Our Services</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {[
              {
                title: "Cosmetic Dentistry",
                description: "Transform your smile with our advanced cosmetic procedures",
                image: "https://images.unsplash.com/photo-1606811841689-23dfddce3e95?ixlib=rb-4.0.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"
              },
              {
                title: "Invisalign Treatment",
                description: "Achieve the perfect alignment with invisible braces",
                image: "https://images.unsplash.com/photo-1600170311833-c2cf5280ce49?ixlib=rb-4.0.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"
              },
              {
                title: "Dental Implants",
                description: "Restore your natural smile with permanent solutions",
                image: "https://images.unsplash.com/photo-1609840114035-3c981b782dfe?ixlib=rb-4.0.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"
              }
            ].map((service, index) => (
              <div key={index} className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
                <img src={service.image} alt={service.title} className="w-full h-48 object-cover rounded-lg mb-6" />
                <h3 className="text-xl font-medium mb-2">{service.title}</h3>
                <p className="text-gray-600">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 px-8">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-12">
          <div className="md:w-1/2">
            <img 
              src="https://images.unsplash.com/photo-1537368910025-700350fe46c7?ixlib=rb-4.0.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1070&q=80"
              alt="Dr. Smith"
              className="rounded-lg shadow-lg"
            />
          </div>
          <div className="md:w-1/2">
            <h2 className="text-4xl font-light mb-6">Dr. Sarah Smith</h2>
            <p className="text-gray-600 mb-6">
              With over 15 years of experience in aesthetic dentistry, Dr. Smith combines technical expertise with an artistic eye to create beautiful, natural-looking smiles. Trained at the prestigious Royal College of Dental Surgeons, she specializes in minimally invasive cosmetic procedures.
            </p>
            <div className="grid grid-cols-2 gap-4">
              {[
                "Royal College certified",
                "15+ years experience",
                "Advanced cosmetic training",
                "Invisalign specialist"
              ].map((item, index) => (
                <div key={index} className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-blue-600" />
                  <span className="text-gray-700">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section id="testimonials" className="py-20 px-8 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-4xl font-light text-center mb-16">Patient Testimonials</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                name: "Emma Thompson",
                text: "Dr. Smith transformed my smile completely. Her attention to detail and gentle approach made the entire process comfortable and enjoyable."
              },
              {
                name: "James Wilson",
                text: "The best dental experience I've ever had. The clinic is beautiful, and the results exceeded my expectations."
              },
              {
                name: "Sophie Chen",
                text: "I couldn't be happier with my new smile. Dr. Smith is truly an artist when it comes to cosmetic dentistry."
              }
            ].map((testimonial, index) => (
              <div key={index} className="bg-white p-8 rounded-lg shadow-sm">
                <div className="flex items-center mb-4">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                  ))}
                </div>
                <p className="text-gray-600 mb-4">"{testimonial.text}"</p>
                <p className="font-medium">{testimonial.name}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 px-8">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-4xl font-light text-center mb-16">Visit Our Practice</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="space-y-6">
              <div className="flex items-center gap-4">
                <MapPin className="w-6 h-6 text-blue-600" />
                <div>
                  <h3 className="font-medium">Location</h3>
                  <p className="text-gray-600">123 Harley Street, London W1G 6AB</p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <Phone className="w-6 h-6 text-blue-600" />
                <div>
                  <h3 className="font-medium">Phone</h3>
                  <p className="text-gray-600">+44 20 7123 4567</p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <Mail className="w-6 h-6 text-blue-600" />
                <div>
                  <h3 className="font-medium">Email</h3>
                  <p className="text-gray-600">info@drsmith.co.uk</p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <Clock className="w-6 h-6 text-blue-600" />
                <div>
                  <h3 className="font-medium">Hours</h3>
                  <p className="text-gray-600">Mon-Fri: 9:00 - 17:00</p>
                </div>
              </div>
            </div>
            <div className="bg-gray-100 p-8 rounded-lg">
              <form className="space-y-4">
                <input
                  type="text"
                  placeholder="Your Name"
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
                <input
                  type="email"
                  placeholder="Your Email"
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
                <textarea
                  placeholder="Your Message"
                  rows={4}
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                ></textarea>
                <button className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
                  Send Message
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-8">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
          <div className="text-2xl font-light mb-4 md:mb-0">DR. SMITH</div>
          <div className="flex items-center gap-4">
            <a href="#" className="hover:text-gray-300 transition">
              <Instagram className="w-6 h-6" />
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
}