// app/page.tsx

import { AlertTriangle, ArrowRight, PhoneCall } from 'lucide-react';
import Link from 'next/link';
import { SafePhoneLink } from './components/PhoneLinks';

export default function Home() {
    return (
        <div className="space-y-6 animate-fade-in">

            {/* Welcome Banner */}
            <div className="bg-slate-teal rounded-2xl p-6 md:p-8 shadow-lg shadow-slate-teal/10 text-eggshell">
                <h1 className="text-3xl md:text-4xl font-black tracking-tight mb-2 drop-shadow-sm">Välkommen!</h1>
                <p className="text-eggshell/90 font-bold text-lg">Naturvärdarna på Kullaberg — Sommar {new Date().getFullYear()}</p>
            </div>

            {/* Daily Notice Card */}
            <div className="bg-gold rounded-2xl p-5 flex items-start shadow-md shadow-goldenrod/20 text-ebony">
                <div className="bg-eggshell/40 p-2 rounded-xl mr-4 shrink-0">
                    <AlertTriangle className="text-ebony" size={24} />
                </div>
                <div>
                    <h3 className="font-black uppercase tracking-widest text-sm mb-1">Dagens Påminnelse</h3>
                    <p className="text-sm font-medium leading-relaxed">
                        Glöm inte minst 1 liter vatten, solkräm och myggmedel. Det förväntas bli mycket varmt idag!
                    </p>
                </div>
            </div>

            {/* Quick Action Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Link href="/schedule" className="group bg-eggshell/50 border-2 border-moss/30 rounded-2xl p-6 hover:-translate-y-1 hover:bg-moss/10 hover:border-moss/60 hover:shadow-lg transition-all duration-300 flex flex-col items-start">
                    <div className="bg-seafoam/20 w-12 h-12 rounded-xl flex items-center justify-center mb-4 text-slate-teal group-hover:bg-seafoam group-hover:text-eggshell transition-colors">
                        <ArrowRight size={24} className="group-hover:rotate-45 transition-transform" />
                    </div>
                    <h3 className="font-black text-ebony text-xl mb-2 uppercase tracking-wide">Ditt Schema</h3>
                    <p className="text-sm text-ebony/70 font-medium">Kolla dina arbetspass och dagliga rundor snabbt.</p>
                </Link>

                <Link href="/faq" className="group bg-eggshell/50 border-2 border-moss/30 rounded-2xl p-6 hover:-translate-y-1 hover:bg-moss/10 hover:border-moss/60 hover:shadow-lg transition-all duration-300 flex flex-col items-start">
                    <div className="bg-seafoam/20 w-12 h-12 rounded-xl flex items-center justify-center mb-4 text-slate-teal group-hover:bg-seafoam group-hover:text-eggshell transition-colors">
                        <ArrowRight size={24} className="group-hover:rotate-45 transition-transform" />
                    </div>
                    <h3 className="font-black text-ebony text-xl mb-2 uppercase tracking-wide">Vanliga Frågor</h3>
                    <p className="text-sm text-ebony/70 font-medium">Snabba svar på turisternas vanligaste funderingar.</p>
                </Link>
            </div>

            {/* Contact Card */}
            <div className="bg-eggshell/50 border-2 border-moss/30 rounded-2xl overflow-hidden shadow-sm">
                <div className="bg-moss/20 px-6 py-4 flex items-center border-b-2 border-moss/30">
                    <PhoneCall size={20} className="text-ebony mr-3" />
                    <h3 className="font-black text-ebony uppercase tracking-widest text-sm">Snabbkontakt</h3>
                </div>
                <div className="p-6 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>
    );
}