import React from 'react';
import { Helmet } from 'react-helmet';
import { motion } from 'framer-motion';
import { Award, Heart, Target, Users } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useToast } from '@/components/ui/use-toast';
import { useNavigate } from 'react-router-dom';

const About = () => {
  const navigate = useNavigate();
  const { toast } = useToast();
  const handleBookOnline = () => {
    navigate('/booking');
  };

  const values = [
    {
      icon: <Heart className="w-10 h-10 text-physio-green" />,
      title: 'Patient-Centered Care',
      description: 'We put your health and wellbeing at the heart of everything we do'
    },
    {
      icon: <Award className="w-10 h-10 text-physio-blue" />,
      title: 'Excellence',
      description: 'Committed to maintaining the highest standards in physiotherapy practice'
    },
    {
      icon: <Target className="w-10 h-10 text-physio-teal" />,
      title: 'Results-Driven',
      description: 'Focused on achieving measurable outcomes and lasting improvements'
    },
    {
      icon: <Users className="w-10 h-10 text-physio-blue-dark" />,
      title: 'Community Focus',
      description: 'Dedicated to improving the health and wellness of our community'
    }
  ];

  return (
    <>
      <Helmet>
        <title>About Us - Alphacare Physiotherapy | Meet Michael Ghattas</title>
        <meta name="description" content="Learn about Alphacare Physiotherapy and our lead physiotherapist Michael Ghattas. Committed to excellence in patient care and rehabilitation." />
      </Helmet>

      {/* Hero Section */}
      <section className="bg-physio-gradient text-white py-20">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center max-w-4xl mx-auto"
          >
            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-white">About Alphacare Physiotherapy</h1>
            <p className="text-xl text-physio-blue-light leading-relaxed font-medium">
              Your trusted partner in health, recovery, and optimal physical performance
            </p>
          </motion.div>
        </div>
      </section>

      {/* Our Story Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <img
                className="rounded-xl shadow-xl shadow-physio-neutral-200 w-full h-auto object-cover border border-physio-neutral-100"
                alt="A young tree growing in fertile soil, symbolizing growth and health"
                src="https://horizons-cdn.hostinger.com/7582bfac-3acf-4347-93c9-6084476e4580/our-story-LG6lV.jpg"
              />
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="text-3xl md:text-4xl font-bold text-physio-blue-dark mb-6">Our Story</h2>
              <p className="text-lg text-physio-neutral-600 mb-4 leading-relaxed">
                Alphacare Physiotherapy was founded with a simple yet powerful mission: to provide exceptional, evidence-based physiotherapy care that empowers individuals to live active, pain-free lives.
              </p>
              <p className="text-lg text-physio-neutral-600 mb-4 leading-relaxed">
                Over the years, we've built a reputation for excellence, combining advanced treatment techniques with compassionate, personalized care. Our modern facility is equipped with state-of-the-art equipment and designed to create a comfortable, healing environment.
              </p>
              <p className="text-lg text-physio-neutral-600 leading-relaxed">
                We believe in treating the whole person, not just the injury. Our holistic approach addresses the root causes of pain and dysfunction, helping you achieve lasting results and prevent future problems.
              </p>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Meet Michael Ghattas Section */}
      <section className="py-20 bg-physio-neutral-50 border-t border-physio-neutral-200">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-physio-blue-dark mb-4">Meet Our Lead Physiotherapist</h2>
          </motion.div>

          <div className="max-w-5xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center bg-white rounded-xl shadow-lg border border-physio-neutral-200 p-8 md:p-12">
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
                <img
                  className="rounded-lg shadow-lg shadow-physio-blue/20 w-full h-auto object-cover border-4 border-physio-neutral-50"
                  alt="Professional headshot of Michael Ghattas, Lead Physiotherapist"
                  src="https://horizons-cdn.hostinger.com/7582bfac-3acf-4347-93c9-6084476e4580/97411bab11492ce4ee6bc33fc22ca1d2.jpg"
                />
              </motion.div>

              <motion.div
                initial={{ opacity: 0, x: 50 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
                <h3 className="text-2xl md:text-3xl font-bold text-physio-blue-dark mb-2">Michael Ghattas</h3>
                <p className="text-lg text-physio-teal font-semibold mb-6">Principal Physiotherapist</p>

                <p className="text-physio-neutral-600 mb-4 leading-relaxed">
                  Michael Ghattas is a highly experienced and passionate physiotherapist with over 15 years of clinical experience. He holds Doctorate degree in sports injuries from Cairo university and has completed advanced certifications in sports rehabilitation, manual therapy, and chronic pain management.
                </p>

                <p className="text-physio-neutral-600 mb-4 leading-relaxed">
                  Throughout his career, Michael has worked with elite athletes, post-surgical patients, and individuals managing chronic conditions. His expertise spans orthopedic rehabilitation, sports injuries, neurological conditions, and geriatric care.
                </p>

                <p className="text-physio-neutral-600 mb-4 leading-relaxed">
                  What sets Michael apart is his dedication to staying at the forefront of physiotherapy research and his commitment to continuous professional development. He believes in empowering patients through education and personalized treatment plans that address both immediate concerns and long-term health goals.
                </p>

                <div className="bg-physio-blue-bg rounded-lg p-6 mt-6 border border-physio-blue-light">
                  <p className="text-physio-blue-dark font-bold mb-2">Specializations:</p>
                  <ul className="list-disc list-inside text-physio-neutral-700 space-y-1">
                    <li>Sports Injury Rehabilitation</li>
                    <li>Manual Therapy & Manipulation</li>
                    <li>Chronic Pain Management</li>
                    <li>Post-Surgical Recovery</li>
                    <li>Biomechanical Assessment</li>
                  </ul>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* Our Values Section */}
      <section className="py-20 bg-white border-t border-physio-neutral-200">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-physio-blue-dark mb-4">Our Core Values</h2>
            <p className="text-lg text-physio-neutral-600 max-w-2xl mx-auto">
              These principles guide everything we do at Alphacare Physiotherapy
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {values.map((value, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="bg-white rounded-xl p-8 text-center hover:shadow-xl hover:shadow-physio-blue/10 transition-all duration-300 hover:-translate-y-2 border border-physio-neutral-200 hover:border-physio-blue/30"
              >
                <div className="flex justify-center mb-4">{value.icon}</div>
                <h3 className="text-xl font-semibold text-physio-blue-dark mb-3">{value.title}</h3>
                <p className="text-physio-neutral-600">{value.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section className="py-20 bg-physio-gradient text-white">
        <div className="container mx-auto px-4 text-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Experience the Alphacare Difference</h2>
            <p className="text-xl mb-8 max-w-2xl mx-auto text-physio-blue-light">
              Schedule your appointment with Michael Ghattas and start your journey to better health today.
            </p>
            <Button
              onClick={handleBookOnline}
              className="bg-white text-physio-blue-dark hover:bg-physio-neutral-100 px-8 py-6 text-lg transition-all duration-300 hover:shadow-xl hover:scale-105 font-bold"
            >
              Book Your Appointment
            </Button>
          </motion.div>
        </div>
      </section>
    </>
  );
};

export default About;