export function AboutSection() {
  return (
    <section 
      className="py-16 section-margin-x"
      style={{ backgroundColor: 'var(--color-brand-bg-white)' }}
    >
      <div className="max-w-7xl mx-auto">
        {/* Section Header with Branded Tag */}
        <div className="text-center mb-16">
          <div className="flex items-center justify-center gap-2 mb-6">
            <div 
              className="w-2 h-2 rounded-full"
              style={{ backgroundColor: 'var(--color-brand-accent)' }}
            ></div>
            <span 
              className="text-sm font-semibold tracking-wider uppercase"
              style={{ 
                color: 'var(--color-brand-black)',
                fontFamily: 'var(--font-family-brand)' 
              }}
            >
              WHO WE ARE
            </span>
          </div>
          <h2 
            className="text-5xl font-semibold mb-6"
            style={{ 
              color: 'var(--color-brand-black)',
              fontFamily: 'var(--font-family-brand)',
              lineHeight: '1.1'
            }}
          >
            About KLC
          </h2>
          <p 
            className="text-xl max-w-3xl mx-auto leading-relaxed"
            style={{ 
              color: 'var(--color-brand-gray-muted)',
              fontFamily: 'var(--font-family-brand)'
            }}
          >
            Transforming businesses through strategic expertise, innovative solutions, and lasting partnerships that drive sustainable growth.
          </p>
        </div>

        {/* Three Column Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-8">
          {/* Our Vision */}
          <div className="text-center lg:text-left">
            <div 
              className="w-16 h-16 mx-auto lg:mx-0 mb-6 rounded-lg flex items-center justify-center"
              style={{ backgroundColor: 'var(--color-brand-primary)' }}
            >
              <svg 
                width="32" 
                height="32" 
                viewBox="0 0 24 24" 
                fill="none" 
                stroke="currentColor" 
                strokeWidth="1.5"
                className="text-white"
              >
                <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
            </div>
            <h3 
              className="text-2xl font-bold mb-4"
              style={{ 
                color: 'var(--color-brand-black)',
                fontFamily: 'var(--font-family-brand)'
              }}
            >
              Our Vision
            </h3>
            <p 
              className="text-base leading-relaxed mb-4"
              style={{ 
                color: 'var(--color-brand-gray-muted)',
                fontFamily: 'var(--font-family-brand)'
              }}
            >
              To be the leading catalyst for business transformation, empowering organizations to unlock their full potential through innovative strategies and cutting-edge solutions.
            </p>
            <p 
              className="text-base leading-relaxed"
              style={{ 
                color: 'var(--color-brand-gray-muted)',
                fontFamily: 'var(--font-family-brand)'
              }}
            >
              We envision a future where every business can thrive in an ever-evolving marketplace through strategic foresight and adaptive excellence.
            </p>
          </div>

          {/* Our Impact */}
          <div className="text-center lg:text-left">
            <div 
              className="w-16 h-16 mx-auto lg:mx-0 mb-6 rounded-lg flex items-center justify-center"
              style={{ backgroundColor: 'var(--color-brand-primary)' }}
            >
              <svg 
                width="32" 
                height="32" 
                viewBox="0 0 24 24" 
                fill="none" 
                stroke="currentColor" 
                strokeWidth="1.5"
                className="text-white"
              >
                <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
                <path d="M3 3v5h5"/>
                <path d="M12 7v5l4 2"/>
              </svg>
            </div>
            <h3 
              className="text-2xl font-bold mb-4"
              style={{ 
                color: 'var(--color-brand-black)',
                fontFamily: 'var(--font-family-brand)'
              }}
            >
              Our Impact
            </h3>
            <p 
              className="text-base leading-relaxed mb-4"
              style={{ 
                color: 'var(--color-brand-gray-muted)',
                fontFamily: 'var(--font-family-brand)'
              }}
            >
              Over two decades of delivering measurable results for Fortune 500 companies and emerging businesses alike, driving over $2.5 billion in combined client value creation.
            </p>
            <p 
              className="text-base leading-relaxed"
              style={{ 
                color: 'var(--color-brand-gray-muted)',
                fontFamily: 'var(--font-family-brand)'
              }}
            >
              Our strategic interventions have transformed operational efficiency by an average of 40% and accelerated growth trajectories across diverse industries.
            </p>
          </div>

          {/* Our Expertise */}
          <div className="text-center lg:text-left">
            <div 
              className="w-16 h-16 mx-auto lg:mx-0 mb-6 rounded-lg flex items-center justify-center"
              style={{ backgroundColor: 'var(--color-brand-primary)' }}
            >
              <svg 
                width="32" 
                height="32" 
                viewBox="0 0 24 24" 
                fill="none" 
                stroke="currentColor" 
                strokeWidth="1.5"
                className="text-white"
              >
                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                <path d="M2 17l10 5 10-5"/>
                <path d="M2 12l10 5 10-5"/>
              </svg>
            </div>
            <h3 
              className="text-2xl font-bold mb-4"
              style={{ 
                color: 'var(--color-brand-black)',
                fontFamily: 'var(--font-family-brand)'
              }}
            >
              Our Expertise
            </h3>
            <p 
              className="text-base leading-relaxed mb-4"
              style={{ 
                color: 'var(--color-brand-gray-muted)',
                fontFamily: 'var(--font-family-brand)'
              }}
            >
              Deep domain knowledge spanning strategic consulting, digital transformation, operational excellence, and change management across multiple industry verticals.
            </p>
            <p 
              className="text-base leading-relaxed"
              style={{ 
                color: 'var(--color-brand-gray-muted)',
                fontFamily: 'var(--font-family-brand)'
              }}
            >
              Our multidisciplinary team combines analytical rigor with creative problem-solving to deliver solutions that are both innovative and pragmatic.
            </p>
          </div>
        </div>

        {/* CTA Section */}
        <div className="text-center mt-16">
          <button 
            className="brand-button"
            style={{
              backgroundColor: 'var(--color-brand-accent)',
              color: 'var(--color-brand-black)',
              border: 'none',
              borderRadius: '10px',
              padding: '1rem 2rem',
              fontSize: '1.125rem',
              fontWeight: '600',
              fontFamily: 'var(--font-family-brand)',
              cursor: 'pointer',
              transition: 'all 0.3s ease',
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.5rem'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = 'var(--color-brand-primary)';
              e.currentTarget.style.color = 'white';
              e.currentTarget.style.transform = 'translateY(-2px)';
              e.currentTarget.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = 'var(--color-brand-accent)';
              e.currentTarget.style.color = 'var(--color-brand-black)';
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)';
            }}
          >
            Learn More About Our Story
            <svg 
              width="16" 
              height="16" 
              viewBox="0 0 24 24" 
              fill="none" 
              stroke="currentColor" 
              strokeWidth="2"
            >
              <path d="M5 12h14"/>
              <path d="M12 5l7 7-7 7"/>
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}