// app/page.tsx

import { AlertTriangle, PhoneCall } from 'lucide-react';
import { SafePhoneLink } from './components/PhoneLinks';
import { SectionCard } from './components/ui/SectionCard';
import { ActionLinkCard } from './components/ui/ActionLinkCard'; // <-- Import the new card

export default function Home() {
    return (
        <div className="space-y-6 animate-fade-in w-full mx-auto">
            {/* Welcome Banner */}
            <div className="bg-slate-teal rounded-3xl p-6 shadow-sm text-eggshell">
                <h1 className="text-3xl font-black tracking-tight mb-1">Välkommen!</h1>
                <p className="text-eggshell/90 font-bold">Naturvärdarna på Kullaberg — Sommar {new Date().getFullYear()}</p>
            </div>

            {/* Daily Notice Card */}
            <SectionCard
                title="Dagens Påminnelse"
                icon={AlertTriangle}
                variant="highlight"
            >
                Glöm inte minst 1 liter vatten, solkräm och myggmedel. Det förväntas bli mycket varmt idag!
            </SectionCard>

            {/* Quick Action Cards now use the glass style */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <ActionLinkCard
                    href="/schedule"
                    title="Ditt Schema"
                    description="Kolla dina arbetspass och dagliga rundor snabbt."
                />

                <ActionLinkCard
                    href="/faq"
                    title="Vanliga Frågor"
                    description="Snabba svar på turisternas vanligaste funderingar."
                />
            </div>

            {/* Contact Card updated to 'glass' variant */}
            <SectionCard
                title="Snabbkontakt"
                icon={PhoneCall}
            >
                <div className="space-y-4 pt-2">
                    <div className="flex flex-col md:flex-row md:justify-between md:items-center pb-4 border-b border-white 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>
    );
}