// src/pages/About.tsx

import { useTranslation } from 'react-i18next';

export default function About() {
    const { t } = useTranslation();

    return (
        <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8 animate-fade-in">

            {/* Top Section: Text and Hero Image */}
            <div className="grid lg:grid-cols-2 gap-12 items-center mb-20">
                <div>
                    <h1 className="text-4xl md:text-5xl font-bold text-ebony mb-6 border-b-4 border-gold pb-4 inline-block">
                        {t('about.title')}
                    </h1>
                    <p className="text-xl text-slate-teal font-medium mb-6 leading-relaxed">
                        {t('about.intro')}
                    </p>
                    <div className="bg-eggshell p-6 rounded-2xl border-l-4 border-moss shadow-sm">
                        <h3 className="text-2xl font-bold text-ebony mb-3">{t('about.missionTitle')}</h3>
                        <p className="text-gray-800 leading-relaxed mb-4">
                            {t('about.missionText')}
                        </p>
                        <p className="text-gray-800 font-bold italic">
                            {t('about.pride')}
                        </p>
                    </div>
                </div>

                {/* Main Feature Image (Group Photo Placeholder) */}
                <div className="relative">
                    <div className="absolute inset-0 bg-gold rounded-3xl translate-x-4 translate-y-4 opacity-50"></div>
                    <img
                        src="/about_us_1.webp"
                        alt="Naturvärdarna Team"
                        className="relative z-10 w-full h-125 object-cover rounded-3xl shadow-xl border-4 border-white"
                    />
                </div>
            </div>

            {/* Bottom Section: Image Grid Gallery */}
            <h2 className="text-3xl font-bold text-ebony mb-8 text-center">{t('about.galleryTitle')}</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* Gallery Image 1 (Rope work placeholder) */}
                <div className="group overflow-hidden rounded-2xl shadow-md h-64">
                    <img
                        src="/about_us_2.webp"
                        alt="Working in nature"
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    />
                </div>

                {/* Gallery Image 2 (Fence building placeholder) */}
                <div className="group overflow-hidden rounded-2xl shadow-md h-64 md:translate-y-8">
                    <img
                        src="/about_us_3.webp"
                        alt="Building and maintenance"
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    />
                </div>

                {/* Gallery Image 3 (Kayak/Coast placeholder) */}
                <div className="group overflow-hidden rounded-2xl shadow-md h-64">
                    <img
                        src="/about_us_4.webp"
                        alt="Coastal cleaning"
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    />
                </div>
            </div>

        </div>
    );
}