// app/emergency/page.tsx

import React from 'react';
import { Phone, AlertTriangle, MapPin, HeartPulse } from 'lucide-react';
import { SafePhoneLink } from '../components/PhoneLinks';

export default function Emergency() {
    return (
        <div className="space-y-6 animate-fade-in w-full mx-auto">
            <div>
                <h1 className="text-3xl font-black text-emergency tracking-tight uppercase flex items-center">
                    <AlertTriangle className="mr-3 text-emergency" size={32} />
                    Vid Nödsituation
                </h1>
                <p className="text-ebony font-medium mt-2 ml-11">Agera lugnt, stanna kvar på platsen och tillkalla hjälp.</p>
            </div>

            {/* 112 Card */}
            <div className="bg-emergency/20 border-l-4 border-emergency p-6 rounded-r-xl shadow-sm">
                <h2 className="text-2xl font-black text-ebony flex items-center mb-2">
                    <Phone className="mr-3 text-emergency" size={24} />
                    Ring 112
                </h2>
                <p className="text-ebony/80 font-medium mb-4">
                    Vid olycka, brand eller livshotande tillstånd. Berätta vem du är och vad som har hänt.
                </p>
                <div className="bg-eggshell/50 p-4 rounded-lg border border-emergency/30">
                    <h3 className="font-bold text-ebony flex items-center mb-1 text-sm uppercase tracking-wider">
                        <MapPin className="mr-2 text-emergency" size={16} />
                        Uppge din position
                    </h3>
                    <p className="text-ebony font-medium text-sm">
                        Använd appen <strong>112</strong> eller GPS i telefonen. Säg att du befinner dig i Kullabergs Naturreservat. Var specifik (t.ex. "Nära fyren" eller "Vid Josefinelust").
                    </p>
                </div>
            </div>

            {/* First Aid / HLR Card */}
            <div className="bg-eggshell border-2 border-slate-teal/20 p-6 rounded-xl shadow-sm">
                <h2 className="text-xl font-black text-slate-teal flex items-center mb-4 uppercase tracking-wide">
                    <HeartPulse className="mr-3 text-seafoam" size={24} />
                    Första Hjälpen & Hjärtstartare
                </h2>
                <ul className="space-y-3 text-ebony font-medium">
                    <li className="flex items-start">
                        <span className="bg-seafoam text-eggshell font-bold px-2 py-0.5 rounded mr-3 text-sm">1</span>
                        Säkra platsen – se till att varken du eller personen utsätts för mer fara.
                    </li>
                    <li className="flex items-start">
                        <span className="bg-seafoam text-eggshell font-bold px-2 py-0.5 rounded mr-3 text-sm shrink-0">2</span>

                        {/* Mobile View: Standard wrapping text (hides on medium screens and up) */}
                        <p className="text-ebony font-medium">
                            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.
                        </p>

                    </li>
                </ul>
            </div>

            {/* Internal Contact */}
            <div className="bg-eggshell border-2 border-slate-teal/20 p-6 rounded-xl shadow-sm">
                <h2 className="text-xl font-black text-slate-teal mb-2 uppercase tracking-wide">
                    Intern Rapportering
                </h2>
                <p className="text-ebony/80 font-medium mb-4 text-sm">
                    När situationen är under kontroll, meddela alltid arbetsledaren om vad som inträffat.
                </p>
                <div className="space-y-4">
                    <div className="flex flex-col md:flex-row md:justify-between md:items-center pb-4 border-b border-moss/20 gap-3">
                        <span className="text-base font-bold text-ebony">William Söderberg</span>
                        <div className='flex gap-2 flex-wrap md:justify-end'>
                            <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-3">
                        <span className="text-base font-bold text-ebony">Oliver Nilsson</span>
                        <div className='flex gap-2 flex-wrap md:justify-end'>
                            <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>
            </div>
        </div>
    );
};