// src/pages/Home.tsx

import { useTranslation } from 'react-i18next';
import { BrushCleaning, Map, Leaf, AlertTriangle, Info, Tent, SquareParking, FlameKindling } from 'lucide-react';

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

    return (
        <div className="animate-fade-in pb-12">
            {/* Hero Section */}
            <div
                className="h-[60vh] min-h-100 bg-cover bg-center flex items-center justify-center relative"
                style={{ backgroundImage: "url('/kullaberg.webp')" }}
            >
                <div className="absolute inset-0 bg-linear-to-b from-ebony/50 via-black/40 to-white/30"></div>
                <div className="relative z-10 text-center text-white px-4 max-w-4xl mx-auto flex flex-col items-center">

                    {/* Desktop Logo (Full version) */}
                    <img
                        src="/favicon.svg"
                        alt="Naturvärdarna Logo"
                        className="block w-48 md:w-64 h-auto mb-8 drop-shadow-[0_4px_8px_rgba(0,0,0,0.6)]"
                    />

                    <h1 className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] leading-tight">{t('hero.title')}</h1>
                    <p className="text-lg md:text-2xl drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] text-white font-medium">
                        {t('hero.subtitle')}
                    </p>
                </div>
            </div>

            {/* What We Do Section */}
            <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
                <h2 className="text-3xl font-bold text-ebony mb-12 text-center flex flex-col md:flex-row items-center justify-center gap-3">
                    <Info className="text-seafoam" size={32} />
                    <span>{t('whatWeDo.title')}</span>
                </h2>
                <div className="grid md:grid-cols-3 gap-8">
                    <div className="bg-white p-8 rounded-2xl shadow-sm border-t-4 border-seafoam hover:shadow-md transition-shadow">
                        <Leaf className="text-seafoam mb-4" size={40} />
                        <h3 className="text-2xl font-bold text-slate-teal mb-3">{t('whatWeDo.natureTitle')}</h3>
                        <p className="text-gray-700 leading-relaxed">{t('whatWeDo.natureDesc')}</p>
                    </div>
                    <div className="bg-white p-8 rounded-2xl shadow-sm border-t-4 border-seafoam hover:shadow-md transition-shadow">
                        <Map className="text-seafoam mb-4" size={40} />
                        <h3 className="text-2xl font-bold text-slate-teal mb-3">{t('whatWeDo.guidingTitle')}</h3>
                        <p className="text-gray-700 leading-relaxed">{t('whatWeDo.guidingDesc')}</p>
                    </div>
                    <div className="bg-white p-8 rounded-2xl shadow-sm border-t-4 border-seafoam hover:shadow-md transition-shadow">
                        <BrushCleaning className="text-seafoam mb-4" size={40} />
                        <h3 className="text-2xl font-bold text-slate-teal mb-3">{t('whatWeDo.cleaningTitle')}</h3>
                        <p className="text-gray-700 leading-relaxed">{t('whatWeDo.cleaningDesc')}</p>
                    </div>


                </div>
            </div>

            {/* Important Info Section */}
            <div className="bg-moss/10 py-16 border-y border-moss/20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <h2 className="text-3xl font-bold text-ebony mb-12 text-center flex flex-col md:flex-row items-center justify-center gap-3">
                        <AlertTriangle className="text-goldenrod" size={32} />
                        <span>{t('importantInfo.title')}</span>
                    </h2>
                    <div className="grid md:grid-cols-3 gap-6">
                        <div className="bg-eggshell p-6 rounded-xl border border-moss/30 flex items-start gap-4 shadow-sm">
                            <Tent className="text-goldenrod shrink-0 mt-1" size={28} />
                            <div>
                                <h4 className="font-bold text-ebony text-lg mb-1">{t('importantInfo.campingTitle')}</h4>
                                <p className="text-gray-800 text-sm leading-relaxed">{t('importantInfo.campingDesc')}</p>
                            </div>
                        </div>
                        <div className="bg-eggshell p-6 rounded-xl border border-moss/30 flex items-start gap-4 shadow-sm">
                            <SquareParking className="text-goldenrod shrink-0 mt-1" size={28} />
                            <div>
                                <h4 className="font-bold text-ebony text-lg mb-1">{t('importantInfo.parkingTitle')}</h4>
                                <p className="text-gray-800 text-sm leading-relaxed">{t('importantInfo.parkingDesc')}</p>
                            </div>
                        </div>
                        <div className="bg-eggshell p-6 rounded-xl border border-moss/30 flex items-start gap-4 shadow-sm">
                            <FlameKindling className="text-goldenrod shrink-0 mt-1" size={28} />
                            <div>
                                <h4 className="font-bold text-ebony text-lg mb-1">{t('importantInfo.fireTitle')}</h4>
                                <p className="text-gray-800 text-sm leading-relaxed">{t('importantInfo.fireDesc')}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}