// app/info/page.tsx

import { AlertTriangle, Briefcase, CloudRain, HeartHandshake, ListChecks, Navigation, ShieldAlert, Sun } from 'lucide-react';

export default function JobInfo() {
    return (
        <div className="space-y-8 animate-fade-in w-full mx-auto">
            <div>
                <h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
                    <Briefcase className="mr-3 text-seafoam" size={32} />
                    Jobbinfo & Regler
                </h1>
                <p className="text-moss font-medium mt-2 ml-11">Din överlevnadsguide till världens bästa sommarjobb på Kullaberg!</p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* VAD GÖR VI? */}
                <section className="group bg-white/40 backdrop-blur-md border border-white p-6 md:p-8 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300">
                    <h2 className="text-xl font-black text-ebony uppercase tracking-widest mb-6 flex items-center">
                        <ListChecks className="mr-3 text-slate-teal" size={24} /> Snabbguiden: Uppdrag
                    </h2>
                    <p className="text-sm text-ebony/80 font-bold mb-6 leading-relaxed bg-white/60 p-4 rounded-xl border border-white">
                        Arbetsuppgifterna är varierande och vi löser ofta specialuppdrag som ett team. Exempel på vad du kommer göra:
                    </p>
                    <ul className="space-y-4 text-sm font-medium text-ebony/90">
                        <li className="flex items-start bg-white/40 p-3 rounded-xl">
                            <span className="text-seafoam mr-3 mt-0.5 font-black">✦</span>
                            <span><strong className="text-slate-teal">Parkeringsvärd:</strong> Hjälpa folk att parkera rätt.</span>
                        </li>
                        <li className="flex items-start bg-white/40 p-3 rounded-xl">
                            <span className="text-seafoam mr-3 mt-0.5 font-black">✦</span>
                            <span><strong className="text-slate-teal">Naturvärd:</strong> Berätta för besökare om Kullaberg och vad man kan göra.</span>
                        </li>
                        <li className="flex items-start bg-white/40 p-3 rounded-xl">
                            <span className="text-seafoam mr-3 mt-0.5 font-black">✦</span>
                            <span><strong className="text-slate-teal">Naturvård:</strong> Plocka skräp och bekämpa invasiva växter.</span>
                        </li>
                        <li className="flex items-start bg-white/40 p-3 rounded-xl">
                            <span className="text-seafoam mr-3 mt-0.5 font-black">✦</span>
                            <span><strong className="text-slate-teal">Underhåll & Städ:</strong> Städa faciliteter, olja skyltar/möbler, laga staket och röja stigar.</span>
                        </li>
                    </ul>
                </section>

                {/* PACKLISTA */}
                <section className="group bg-white/40 backdrop-blur-md border border-white p-6 md:p-8 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300">
                    <h2 className="text-xl font-black text-ebony uppercase tracking-widest mb-6 flex items-center">
                        <Navigation className="mr-3 text-slate-teal" size={24} /> Daglig packlista
                    </h2>
                    <p className="text-sm text-ebony/80 font-bold mb-6 leading-relaxed bg-white/60 p-4 rounded-xl border border-white">
                        Vi är ute i princip hela arbetspasset. Kommunen löser t-shirt och keps, resten står du för!
                    </p>
                    <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
                        <li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm">
                            <span className="w-2.5 h-2.5 rounded-full bg-seafoam mr-3 shrink-0"></span> Sköna promenadskor
                        </li>
                        <li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm">
                            <span className="w-2.5 h-2.5 rounded-full bg-seafoam mr-3 shrink-0"></span> Oömma kläder efter väder
                        </li>
                        <li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm">
                            <span className="w-2.5 h-2.5 rounded-full bg-seafoam mr-3 shrink-0"></span> Bekväm ryggsäck
                        </li>
                        <li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm">
                            <span className="w-2.5 h-2.5 rounded-full bg-seafoam mr-3 shrink-0"></span> Minst 1L vatten
                        </li>
                        <li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm sm:col-span-2">
                            <span className="w-2.5 h-2.5 rounded-full bg-goldenrod mr-3 shrink-0"></span> Matsäck (Endast helger)
                        </li>
                    </ul>

                    {/* Fixed Weather Blocks */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 pt-6 border-t-2 border-slate-teal/10">
                        <div className="bg-slate-teal/10 p-4 rounded-2xl flex items-start">
                            <CloudRain className="text-slate-teal mr-3 shrink-0" size={24} />
                            <div>
                                <h4 className="font-black text-slate-teal text-sm uppercase tracking-wider mb-1">Vid regn</h4>
                                <p className="text-xs text-ebony/80 font-bold">Regnkläder och torrt ombyte.</p>
                            </div>
                        </div>
                        <div className="bg-gold/20 p-4 rounded-2xl flex items-start">
                            <Sun className="text-goldenrod mr-3 shrink-0" size={24} />
                            <div>
                                <h4 className="font-black text-goldenrod text-sm uppercase tracking-wider mb-1">Vid sol</h4>
                                <p className="text-xs text-ebony/80 font-bold">Extra vatten, solkräm & "Sunstopper" (tunn långärmad tröja).</p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            {/* VETT OCH ETIKETT */}
            <section className="group bg-white/40 backdrop-blur-md border border-white p-6 md:p-8 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300">
                <h2 className="text-xl font-black text-ebony uppercase tracking-widest mb-6 flex items-center">
                    <HeartHandshake className="mr-3 text-slate-teal" size={24} /> Policy: Vett & Etikett
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm font-medium text-ebony/80 leading-relaxed">
                    <div className="flex items-start bg-white/60 p-4 rounded-2xl">
                        <div className="bg-goldenrod text-white font-black w-6 h-6 rounded-full flex items-center justify-center shrink-0 mr-3 mt-0.5 shadow-sm text-xs">1</div>
                        <span><strong className="text-ebony">Var ett proffs:</strong> Uppträd professionellt, var schysst mot alla och tänk på att vi har absolut nolltolerans mot diskriminering.</span>
                    </div>
                    <div className="flex items-start bg-white/60 p-4 rounded-2xl">
                        <div className="bg-goldenrod text-white font-black w-6 h-6 rounded-full flex items-center justify-center shrink-0 mr-3 mt-0.5 shadow-sm text-xs">2</div>
                        <span><strong className="text-ebony">Ingen dötid:</strong> Stillastående väntan accepteras inte. Har du inget att göra? Fråga ledaren! Du ska inte stå still när andra jobbar.</span>
                    </div>
                    <div className="flex items-start bg-white/60 p-4 rounded-2xl">
                        <div className="bg-goldenrod text-white font-black w-6 h-6 rounded-full flex items-center justify-center shrink-0 mr-3 mt-0.5 shadow-sm text-xs">3</div>
                        <span><strong className="text-ebony">Se folk i ögonen:</strong> Inga hörlurar under arbetstid, mobilen är bara ett arbetsverktyg, och <em className="text-slate-teal font-bold">ta av solglasögonen</em> när du pratar med besökare.</span>
                    </div>
                    <div className="flex items-start bg-white/60 p-4 rounded-2xl">
                        <div className="bg-goldenrod text-white font-black w-6 h-6 rounded-full flex items-center justify-center shrink-0 mr-3 mt-0.5 shadow-sm text-xs">4</div>
                        <span><strong className="text-ebony">Djur & Natur:</strong> Respektera djur och natur. Vi rör inte djuren och vi tar hand om våra verktyg.</span>
                    </div>
                </div>
            </section>

            {/* SÄKERHET */}
            <section className="group bg-emergency/10 border-2 border-emergency/30 p-6 md:p-8 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300">
                <h2 className="text-xl font-black text-emergency uppercase tracking-widest mb-6 flex items-center">
                    <ShieldAlert className="mr-3 text-emergency" size={24} /> Risker & Säkerhet
                </h2>
                <p className="text-sm text-emergency/80 font-black mb-6 leading-relaxed bg-white/50 p-4 rounded-xl border border-emergency/20">
                    Säkerhet går alltid först! Därför utförs ALLT arbete minst 2 och 2.
                </p>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm text-ebony/90 font-medium">
                    <div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10">
                        <AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
                        <p><strong className="text-emergency">Trafik:</strong> Vid parkeringar bär vi alltid gul reflexväst.</p>
                    </div>
                    <div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10">
                        <AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
                        <p><strong className="text-emergency">Klippor:</strong> Vi håller oss alltid minst 2 meter ifrån klippkanter.</p>
                    </div>
                    <div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10">
                        <AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
                        <p><strong className="text-emergency">Tunga lyft:</strong> Tunga föremål lyfter vi alltid med minst två personer.</p>
                    </div>
                    <div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10 sm:col-span-2 lg:col-span-1">
                        <AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
                        <p><strong className="text-emergency">Ormbett:</strong> Blir du biten, ring Giftinformationscentralen (010-456 67 00 eller 112) och kontakta projektledaren direkt.</p>
                    </div>
                    <div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10 sm:col-span-2">
                        <AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
                        <p><strong className="text-emergency">Djurhagar:</strong> Håll 50 meters avstånd, klappa dem inte. Ropa <em className="font-black text-ebony">"HEJ KOSSORNA/LAMMEN"</em> eller <em className="font-black text-ebony">"MOOOOOOO!"</em> tills de uppmärksammat dig.</p>
                    </div>
                </div>
            </section>
        </div>
    );
}