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

export const About: React.FC = () => {
  return (
    <div className="pt-24 pb-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Intro */}
        <div className="text-center mb-20">
          <h1 className="text-4xl md:text-5xl font-serif font-bold text-primary-900 mb-6">About Alfalah Consultant Ltd</h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            Founded with a vision to bring transparency and efficiency to the financial sector, we have grown into a trusted partner for businesses across the region.
          </p>
        </div>

        {/* Content Split */}
        <div className="flex flex-col md:flex-row gap-16 items-center mb-24">
          <div className="md:w-1/2 relative">
            <div className="absolute -top-4 -left-4 w-24 h-24 bg-accent-100 rounded-full z-0"></div>
            <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-primary-100 rounded-full z-0"></div>
            <img 
              src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80" 
              alt="Our Team" 
              className="relative z-10 rounded-2xl shadow-2xl w-full"
            />
          </div>
          <div className="md:w-1/2">
            <h2 className="text-3xl font-serif font-bold text-primary-900 mb-6">Our Story</h2>
            <p className="text-gray-600 mb-6 leading-relaxed">
              Alfalah Consultant Ltd began as a boutique firm specializing in tax advisory. Over the years, fueled by our client's success and trust, we expanded our portfolio to include business setup, and strategic financial planning.
            </p>
            <p className="text-gray-600 mb-6 leading-relaxed">
              We believe that financial consultancy is not just about numbers; it's about understanding the people behind the business. Our tailored approach ensures that we address the root causes of financial challenges, paving the way for sustainable growth.
            </p>
            <div className="flex gap-4">
              <div className="px-6 py-4 bg-gray-50 rounded-lg border border-gray-100 text-center">
                 <span className="block text-3xl font-bold text-accent-500 mb-1">15+</span>
                 <span className="text-sm text-gray-500 font-medium">Years Active</span>
              </div>
              <div className="px-6 py-4 bg-gray-50 rounded-lg border border-gray-100 text-center">
                 <span className="block text-3xl font-bold text-accent-500 mb-1">24/7</span>
                 <span className="text-sm text-gray-500 font-medium">Support</span>
              </div>
            </div>
          </div>
        </div>

        {/* Values */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
          <div className="text-center p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
            <div className="w-16 h-16 bg-primary-900 text-white rounded-full flex items-center justify-center mx-auto mb-6">
              <Target size={32} />
            </div>
            <h3 className="text-xl font-bold text-primary-900 mb-4">Our Mission</h3>
            <p className="text-gray-600">
              To provide impeccable financial services that empower businesses to thrive in a complex economic landscape.
            </p>
          </div>
          <div className="text-center p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
            <div className="w-16 h-16 bg-primary-900 text-white rounded-full flex items-center justify-center mx-auto mb-6">
              <Heart size={32} />
            </div>
            <h3 className="text-xl font-bold text-primary-900 mb-4">Our Values</h3>
            <p className="text-gray-600">
              Integrity, Transparency, and Client-Centricity are the pillars upon which Alfalah is built.
            </p>
          </div>
          <div className="text-center p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
            <div className="w-16 h-16 bg-primary-900 text-white rounded-full flex items-center justify-center mx-auto mb-6">
              <Award size={32} />
            </div>
            <h3 className="text-xl font-bold text-primary-900 mb-4">Our Vision</h3>
            <p className="text-gray-600">
              To be the leading financial consultancy firm recognized globally for excellence and innovation.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

(window as any).About = About;