import { Calendar, Clock, Phone, MapPin, CheckCircle } from "lucide-react";

export default function PhysioLanding() {
  return (
    <div className="min-h-screen font-inter">
      {/* Hero Section */}
      <header className="relative h-[600px] bg-cover bg-center" style={{
        backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-4.0.3')`
      }}>
        <nav className="absolute w-full p-6">
          <div className="max-w-7xl mx-auto flex justify-between items-center">
            <h1 className="text-white text-2xl font-semibold">PhysioHealth</h1>
            <div className="space-x-8">
              <a href="#services" className="text-white hover:text-blue-200">Services</a>
              <a href="#about" className="text-white hover:text-blue-200">About</a>
              <a href="#contact" className="text-white hover:text-blue-200">Contact</a>
            </div>
          </div>
        </nav>
        
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full px-4">
          <h2 className="text-white text-5xl font-bold mb-6">Your Path to Recovery Starts Here</h2>
          <p className="text-white text-xl mb-8">Professional physiotherapy care tailored to your needs</p>
          <button className="bg-blue-600 text-white px-8 py-3 rounded-full text-lg font-medium hover:bg-blue-700 transition-colors">
            Book Appointment
          </button>
        </div>
      </header>

      {/* Services Section */}
      <section id="services" className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-16 text-gray-800">Our Services</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <div key={index} className="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
                <div className="text-blue-600 mb-4">{service.icon}</div>
                <h3 className="text-xl font-semibold mb-4 text-gray-800">{service.title}</h3>
                <p className="text-gray-600">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-16 text-gray-800">Why Choose Us</h2>
          <div className="grid md:grid-cols-2 gap-12">
            {benefits.map((benefit, index) => (
              <div key={index} className="flex items-start space-x-4">
                <CheckCircle className="text-blue-600 w-6 h-6 mt-1 flex-shrink-0" />
                <div>
                  <h3 className="text-xl font-semibold mb-2 text-gray-800">{benefit.title}</h3>
                  <p className="text-gray-600">{benefit.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-blue-600 text-white">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-16">Get in Touch</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="flex items-center space-x-4">
              <Phone className="w-6 h-6" />
              <div>
                <h3 className="font-semibold mb-1">Call Us</h3>
                <p>(555) 123-4567</p>
              </div>
            </div>
            <div className="flex items-center space-x-4">
              <MapPin className="w-6 h-6" />
              <div>
                <h3 className="font-semibold mb-1">Location</h3>
                <p>123 Healing Street, City</p>
              </div>
            </div>
            <div className="flex items-center space-x-4">
              <Clock className="w-6 h-6" />
              <div>
                <h3 className="font-semibold mb-1">Hours</h3>
                <p>Mon-Fri: 8am - 7pm</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-8">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <p>© 2024 PhysioHealth. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}

const services = [
  {
    icon: <Calendar className="w-8 h-8" />,
    title: "Sports Rehabilitation",
    description: "Specialized treatment for sports-related injuries and performance enhancement."
  },
  {
    icon: <Calendar className="w-8 h-8" />,
    title: "Manual Therapy",
    description: "Hands-on techniques to reduce pain and improve mobility."
  },
  {
    icon: <Calendar className="w-8 h-8" />,
    title: "Exercise Therapy",
    description: "Customized exercise programs for strength and flexibility."
  }
];

const benefits = [
  {
    title: "Experienced Professionals",
    description: "Our team consists of certified physiotherapists with years of experience in various specializations."
  },
  {
    title: "Personalized Care",
    description: "We develop individualized treatment plans tailored to your specific needs and goals."
  },
  {
    title: "Modern Facilities",
    description: "State-of-the-art equipment and comfortable treatment rooms for optimal care."
  },
  {
    title: "Evidence-Based Approach",
    description: "We use proven therapeutic techniques backed by scientific research."
  }
];