// app/emergency/page.tsx

import { AlertTriangle, FileText, HeartPulse, MapPin, Phone } from 'lucide-react';
import { SafePhoneLink } from '../components/PhoneLinks';
import { PageHeader } from '../components/ui/PageHeader';
import { SectionCard } from '../components/ui/SectionCard';

export default function Emergency() {
    return (
        <div className="space-y-6 animate-fade-in w-full mx-auto">
            <PageHeader
                title="Vid Nödsituation"
                icon={AlertTriangle}
                description="Agera lugnt, stanna kvar på platsen och tillkalla hjälp."
                variant="emergency" // <-- Sets the red colors and uppercase
            />

            {/* 112 Card */}
            <SectionCard
                variant="alert"
                title="Ring 112"
                icon={Phone}
                description="Vid olycka, brand eller livshotande tillstånd. Berätta vem du är och vad som har hänt."
            >
                <div className="bg-white/60 p-4 rounded-xl border border-emergency/20">
                    <h3 className="font-bold text-emergency flex items-center mb-1 text-xs uppercase tracking-wider">
                        <MapPin className="mr-2" size={14} /> Uppge din position
                    </h3>
                    <p className="text-ebony font-medium text-sm">
                        Använd appen <strong>112</strong> eller GPS. Säg att du befinner dig i Kullabergs Naturreservat. Var specifik (t.ex. "Nära fyren" eller "Vid Josefinelust").
                    </p>
                </div>
            </SectionCard>

            {/* First Aid / HLR Card */}
            <SectionCard
                variant="default"
                title="Första Hjälpen & Hjärtstartare"
                icon={HeartPulse}
            >
                <ul className="space-y-3 text-ebony font-medium text-sm">
                    <li className="flex items-start">
                        <span className="bg-seafoam text-eggshell font-bold px-2 py-0.5 rounded mr-3 text-xs shrink-0">1</span>
                        <span>Säkra platsen – se till att varken du eller personen utsätts för mer fara.</span>
                    </li>
                    <li className="flex items-start">
                        <span className="bg-seafoam text-eggshell font-bold px-2 py-0.5 rounded mr-3 text-xs shrink-0">2</span>
                        <span>Finns hjärtstartare? Ja, närmaste hjärtstartare finns inne på <strong className="text-ebony font-black">Naturum Kullaberg</strong> (vid fyren) under deras öppettider.</span>
                    </li>
                </ul>
            </SectionCard>

            {/* Internal Contact */}
            <SectionCard
                variant="default"
                title="Intern Rapportering"
                icon={FileText}
                description="När situationen är under kontroll, meddela alltid arbetsledaren om vad som inträffat."
            >
                <div className="space-y-3">
                    <div className="flex flex-col md:flex-row md:justify-between md:items-center pb-3 border-b border-slate-teal/10 gap-2">
                        <span className="text-sm font-bold text-ebony">William Söderberg</span>
                        <div className='flex gap-2 flex-wrap md:justify-end text-sm'>
                            <SafePhoneLink parts={['072', '247', '02', '91']} display="072-247 02 91" />
                            <SafePhoneLink parts={['078', '389', '355', '81', '0604']} display="078-389 35 58 10 604" />
                        </div>
                    </div>
                    <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2">
                        <span className="text-sm font-bold text-ebony">Oliver Nilsson</span>
                        <div className='flex gap-2 flex-wrap md:justify-end text-sm'>
                            <SafePhoneLink parts={['072', '717', '74', '40']} display="072-717 74 40" />
                            <SafePhoneLink parts={['078', '389', '355', '81', '0605']} display="078-389 35 58 10 605" />
                        </div>
                    </div>
                </div>
            </SectionCard>
        </div>
    );
}