// app/info/page.tsx

import { AlertTriangle, Briefcase, CloudRain, HeartHandshake, ListChecks, Navigation, ShieldAlert, Sun } from 'lucide-react';
import React from 'react';
import { PageHeader } from '../components/ui/PageHeader';
import { SectionCard } from '../components/ui/SectionCard';

// --- Local Components ---
const TaskItem = ({ title, desc }: { title: string; desc: string }) => (
    <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">{title}:</strong> {desc}</span>
    </li>
);

const PackItem = ({ label, isWeekend = false }: { label: string; isWeekend?: boolean }) => (
    <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 ${isWeekend ? 'sm:col-span-2' : ''}`}>
        <span className={`w-2.5 h-2.5 rounded-full mr-3 shrink-0 ${isWeekend ? 'bg-goldenrod' : 'bg-seafoam'}`}></span>
        {label}
    </li>
);

const RuleItem = ({ number, title, content }: { number: number; title: string; content: React.ReactNode }) => (
    <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">
            {number}
        </div>
        <span><strong className="text-ebony">{title}:</strong> {content}</span>
    </div>
);

const RiskItem = ({ title, content, colSpanClass = "" }: { title: string; content: React.ReactNode; colSpanClass?: string }) => (
    <div className={`bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10 ${colSpanClass}`}>
        <AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
        <p><strong className="text-emergency">{title}:</strong> {content}</p>
    </div>
);

// --- Main Page Component ---
export default function JobInfo() {
    return (
        <div className="space-y-8 animate-fade-in w-full mx-auto">
            <PageHeader
                title="Jobbinfo & Regler"
                icon={Briefcase}
                description="Din överlevnadsguide till världens bästa sommarjobb på Kullaberg!"
            />

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* VAD GÖR VI? */}
                <SectionCard
                    title="Snabbguiden: Uppdrag"
                    icon={ListChecks}
                    description="Arbetsuppgifterna är varierande och vi löser ofta specialuppdrag som ett team. Exempel på vad du kommer göra:"
                >
                    <ul className="space-y-4 text-sm font-medium text-ebony/90">
                        <TaskItem title="Parkeringsvärd" desc="Hjälpa folk att parkera rätt." />
                        <TaskItem title="Naturvärd" desc="Berätta för besökare om Kullaberg och vad man kan göra." />
                        <TaskItem title="Naturvård" desc="Plocka skräp och bekämpa invasiva växter." />
                        <TaskItem title="Underhåll & Städ" desc="Städa faciliteter, olja skyltar/möbler, laga staket och röja stigar." />
                    </ul>
                </SectionCard>

                {/* PACKLISTA */}
                <SectionCard
                    title="Daglig packlista"
                    icon={Navigation}
                    description="Vi är ute i princip hela arbetspasset. Kommunen löser t-shirt och keps, resten står du för!"
                >
                    <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
                        <PackItem label="Sköna promenadskor" />
                        <PackItem label="Oömma kläder efter väder" />
                        <PackItem label="Bekväm ryggsäck" />
                        <PackItem label="Minst 1L vatten" />
                        <PackItem label="Matsäck (Endast helger)" isWeekend={true} />
                    </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>
                </SectionCard>
            </div>

            {/* VETT OCH ETIKETT */}
            <SectionCard
                title="Policy: Vett & Etikett"
                icon={HeartHandshake}
            >
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm font-medium text-ebony/80 leading-relaxed">
                    <RuleItem number={1} title="Var ett proffs" content="Uppträd professionellt, var schysst mot alla och tänk på att vi har absolut nolltolerans mot diskriminering." />
                    <RuleItem number={2} title="Ingen dötid" content="Stillastående väntan accepteras inte. Har du inget att göra? Fråga ledaren! Du ska inte stå still när andra jobbar." />
                    <RuleItem number={3} title="Se folk i ögonen" content={<>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.</>} />
                    <RuleItem number={4} title="Djur & Natur" content="Respektera djur och natur. Vi rör inte djuren och vi tar hand om våra verktyg." />
                </div>
            </SectionCard>

            {/* SÄKERHET */}
            <SectionCard
                variant="alert"
                title="Risker & Säkerhet"
                icon={ShieldAlert}
                description="Säkerhet går alltid först! Därför utförs ALLT arbete minst 2 och 2."
            >
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm text-ebony/90 font-medium">
                    <RiskItem title="Trafik" content="Vid parkeringar bär vi alltid gul reflexväst." />
                    <RiskItem title="Klippor" content="Vi håller oss alltid minst 2 meter ifrån klippkanter." />
                    <RiskItem title="Tunga lyft" content="Tunga föremål lyfter vi alltid med minst två personer." />
                    <RiskItem title="Ormbett" content="Blir du biten, ring Giftinformationscentralen (010-456 67 00 eller 112) och kontakta projektledaren direkt." colSpanClass="sm:col-span-2 lg:col-span-1" />
                    <RiskItem title="Djurhagar" content={<>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.</>} colSpanClass="sm:col-span-2" />
                </div>
            </SectionCard>
        </div>
    );
}