import React from 'react';
import Image from 'next/image';
import { useTranslations } from 'next-intl';

const About: React.FC = () => {
  const t = useTranslations('About');

  return (
    <section id="about" className="py-24 bg-feie-cream relative">
      <div className="container mx-auto px-6">
        <div className="flex flex-col md:flex-row items-center gap-16">
          
          {/* Image/Visual Area */}
          <div className="w-full md:w-1/2 relative">
             <div className="aspect-4/5 bg-feie-dark rounded-sm overflow-hidden relative shadow-xl">
                 <Image 
                    src="/assets/186-800x1000-grayscale.jpg" 
                    alt="Office architecture" 
                    fill
                    className="object-cover opacity-80 hover:scale-105 transition-transform duration-700"
                 />
                 <div className="absolute inset-0 border border-feie-gold/30 m-4 pointer-events-none"></div>
             </div>
             <div className="absolute -bottom-10 -right-10 w-48 h-48 bg-feie-gold/10 -z-10 rounded-full blur-3xl"></div>
          </div>

          {/* Text Content */}
          <div className="w-full md:w-1/2 space-y-8">
            <h2 className="text-sm font-bold tracking-widest text-feie-gold uppercase mb-2">{t('title')} • {t('subtitle')}</h2>
            <h3 className="text-4xl md:text-5xl font-serif text-feie-dark leading-tight">
              {t('heading')} <br />
              <span className="italic text-gray-500">{t('subheading')}</span>
            </h3>
            
            <div className="space-y-6 text-gray-600 font-light leading-relaxed">
              <p>
                {t('p1')}
              </p>
              <p>
                {t('p2')}
              </p>
              <p>
                {t('p3')}
              </p>
            </div>

            <div className="pt-4 grid grid-cols-2 gap-8">
              <div>
                <h4 className="text-3xl font-serif text-feie-gold">100+</h4>
                <p className="text-sm text-gray-500 uppercase tracking-wider mt-1">{t('stats.cases')}</p>
              </div>
              <div>
                <h4 className="text-3xl font-serif text-feie-gold">24/7</h4>
                <p className="text-sm text-gray-500 uppercase tracking-wider mt-1">{t('stats.support')}</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
};

export default About;