import React from 'react';
import { Heart, Shield, Target, Award } from 'lucide-react';

const FeatureGrid: React.FC = () => {
  return (
    <section className="bg-gradient-to-br from-white to-teal-50 py-24">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-20">
          <div className="inline-flex items-center bg-teal-100 rounded-full px-8 py-3 mb-8">
            <Award className="h-6 w-6 text-teal-600 mr-3" />
            <span className="text-teal-800 font-bold">Advanced Health Solutions</span>
          </div>
          <h2 className="text-6xl font-bold text-gray-900 mb-8 leading-tight">
            Experience Advanced
            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-teal-600 to-cyan-600">
              Glucose Management
            </span>
          </h2>
          <p className="text-2xl text-gray-600 max-w-5xl mx-auto leading-relaxed">
            Discover the perfect fusion of advanced monitoring and personalized wellness with our 
            comprehensive glucose management platform, designed to transform your health tracking into intelligent, data-driven care.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-20">
          <div className="bg-white rounded-3xl p-10 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3 border-t-4 border-teal-500">
            <div className="bg-gradient-to-br from-teal-100 to-cyan-100 rounded-full w-20 h-20 flex items-center justify-center mb-8">
              <Heart className="h-10 w-10 text-teal-600" />
            </div>
            <h3 className="text-2xl font-bold text-gray-900 mb-6">Comprehensive Health Tracking</h3>
            <p className="text-gray-600 leading-relaxed text-lg">
              Advanced monitoring technology that continuously tracks vital health metrics while providing real-time glucose insights for enhanced wellness and proactive diabetes management.
            </p>
          </div>

          <div className="bg-white rounded-3xl p-10 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3 border-t-4 border-cyan-500">
            <div className="bg-gradient-to-br from-cyan-100 to-blue-100 rounded-full w-20 h-20 flex items-center justify-center mb-8">
              <Shield className="h-10 w-10 text-cyan-600" />
            </div>
            <h3 className="text-2xl font-bold text-gray-900 mb-6">Advanced Health Analytics</h3>
            <p className="text-gray-600 leading-relaxed text-lg">
              Powerful analytics that identify health trends and provide early warning systems for optimal diabetes management and preventive care strategies.
            </p>
          </div>

          <div className="bg-white rounded-3xl p-10 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3 border-t-4 border-blue-500">
            <div className="bg-gradient-to-br from-blue-100 to-cyan-100 rounded-full w-20 h-20 flex items-center justify-center mb-8">
              <Target className="h-10 w-10 text-blue-600" />
            </div>
            <h3 className="text-2xl font-bold text-gray-900 mb-6">Personalized Wellness Plans</h3>
            <p className="text-gray-600 leading-relaxed text-lg">
              Customized wellness protocols that adapt to your unique health profile for superior glucose management and personalized health optimization.
            </p>
          </div>

          <div className="bg-white rounded-3xl p-10 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3 border-t-4 border-emerald-500">
            <div className="bg-gradient-to-br from-emerald-100 to-teal-100 rounded-full w-20 h-20 flex items-center justify-center mb-8">
              <Award className="h-10 w-10 text-emerald-600" />
            </div>
            <h3 className="text-2xl font-bold text-gray-900 mb-6">Professional Health Support</h3>
            <p className="text-gray-600 leading-relaxed text-lg">
              24/7 access to certified health specialists and wellness professionals who provide expert guidance and support for comprehensive diabetes management.
            </p>
          </div>
        </div>

        <div className="text-center">
          <div className="bg-gradient-to-r from-teal-600 to-cyan-600 rounded-3xl p-12 text-white">
            <h3 className="text-4xl font-bold mb-6">Join the Glucose Management Revolution</h3>
            <p className="text-2xl mb-8 text-purple-100">
              Over 25,000 users have revolutionized their diabetes management with our comprehensive monitoring platform and professional health support
            </p>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
              <div>
                <div className="text-5xl font-bold">95%</div>
                <div className="text-teal-200 text-lg">Better Control</div>
              </div>
              <div>
                <div className="text-5xl font-bold">50K+</div>
                <div className="text-teal-200 text-lg">Active Users</div>
              </div>
              <div>
                <div className="text-5xl font-bold">4.9★</div>
                <div className="text-cyan-200 text-lg">User Rating</div>
              </div>
              <div>
                <div className="text-5xl font-bold">24/7</div>
                <div className="text-cyan-200 text-lg">Medical Support</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FeatureGrid;