Présentation

import { Button } from "@/components/ui/button";
import { CheckCircle, GraduationCap, Award, Heart } from "lucide-react";

const AboutSection = () => {
  const credentials = [
    "Master's in Nutrition Science",
    "Registered Dietitian (RD)",
    "Certified Diabetes Educator",
    "10+ Years Clinical Experience"
  ];

  const achievements = [
    { number: "500+", label: "Clients Successfully Helped" },
    { number: "95%", label: "A1C Improvement Rate" },
    { number: "15lbs", label: "Average Weight Loss" },
    { number: "98%", label: "Client Satisfaction" }
  ];

  return (
    <section id="about" className="py-20 bg-gradient-to-r from-health-50 to-blue-50">
      <div className="container-width section-padding">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Image */}
          <div className="order-2 lg:order-1">
            <div className="relative">
              <div className="aspect-[4/5] rounded-2xl bg-gradient-to-br from-health-200 to-blue-200 p-6">
                <img
                  src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=500&h=600&fit=crop&crop=face"
                  alt="Dr. Sarah Johnson - Registered Dietitian"
                  className="w-full h-full object-cover rounded-xl shadow-lg"
                />
              </div>
              {/* Floating credentials card */}
              <div className="absolute -bottom-6 -right-6 bg-white rounded-xl shadow-lg p-4 border max-w-[200px]">
                <div className="flex items-center space-x-2 mb-2">
                  <GraduationCap className="w-5 h-5 text-health-600" />
                  <span className="font-semibold text-sm">Credentials</span>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-gray-600">M.S. Nutrition Science</p>
                  <p className="text-xs text-gray-600">Registered Dietitian</p>
                  <p className="text-xs text-gray-600">Diabetes Educator</p>
                </div>
              </div>
            </div>
          </div>

          {/* Content */}
          <div className="order-1 lg:order-2">
            <div className="mb-6">
              <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-health-100 text-health-800 mb-4">
                👋 Meet Your Dietitian
              </span>
              <h2 className="font-playfair text-3xl md:text-4xl font-bold text-gray-900 mb-6">
                Hi, I'm Dr. Sarah Johnson
              </h2>
              <p className="text-lg text-gray-700 mb-6 leading-relaxed">
                As someone who has personally navigated the challenges of diabetes management, I understand the overwhelming feeling of trying to figure out what to eat and how to maintain stable blood sugar levels.
              </p>
              <p className="text-lg text-gray-700 mb-8 leading-relaxed">
                For over 10 years, I've dedicated my career to helping people with diabetes and weight management create sustainable, enjoyable eating habits that improve their health and quality of life.
              </p>
            </div>

            {/* Credentials */}
            <div className="mb-8">
              <h3 className="font-semibold text-lg text-gray-900 mb-4">Professional Credentials</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {credentials.map((credential, index) => (
                  <div key={index} className="flex items-center space-x-2">
                    <CheckCircle className="w-5 h-5 text-health-600 flex-shrink-0" />
                    <span className="text-gray-700">{credential}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-2 gap-6 mb-8">
              {achievements.map((achievement, index) => (
                <div key={index} className="text-center">
                  <div className="text-2xl font-bold text-health-600">{achievement.number}</div>
                  <div className="text-sm text-gray-600">{achievement.label}</div>
                </div>
              ))}
            </div>

            <Button size="lg" className="bg-health-600 hover:bg-health-700 text-white">
              Learn About My Approach
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutSection;