import { Phone, Mail, MapPin, Clock } from 'lucide-react';

const ContactGrid = () => {
    const contacts = [
        {
            icon: Phone,
            title: "Ring oss",
            description: "Behöver du hjälp?",
            action: "070 - 034 23 24",
            href: "tel:0700342324",
            color: "bg-blue-600"
        },
        {
            icon: Mail,
            title: "Mejla oss",
            description: "Vi svarar omgående",
            action: "info@nordicstorium.se",
            href: "mailto:info@nordicstorium.se",
            color: "bg-blue-600"
        },
        {
            icon: Clock,
            title: "Öppettider",
            description: "Varje Dag",
            action: "09:00 – 22:00",
            color: "bg-blue-600"
        },
        {
            icon: MapPin,
            title: "Besök oss",
            description: "Upphämtning i Järfälla",
            action: "Skarprättarvägen 30, 176 77",
            color: "bg-blue-600"
        }
    ];

    return (
        <section className="bg-[var(--content-bg)] py-12 md:py-20 border-y border-[var(--border-color)]">
            <div className="container mx-auto px-4">
                <h2 className="text-2xl md:text-4xl font-black text-center mb-8 md:mb-16 uppercase tracking-tight text-[var(--text-color)]">Kontakta Oss</h2>

                <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-8 items-stretch">
                    {contacts.map((item, index) => (
                        <div
                            key={index}
                            className="flex flex-col items-center p-2 md:p-8 bg-[var(--card-bg)] rounded-2xl border border-[var(--border-color)] hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group h-full"
                        >
                            <div className={`w-8 h-8 md:w-16 md:h-16 ${item.color} text-white rounded-xl md:rounded-2xl flex items-center justify-center mt-2 md:mt-0 mb-2 md:mb-6 shadow-lg shadow-blue-500/20 group-hover:scale-110 transition-transform flex-shrink-0`}>
                                <item.icon size={16} className="md:w-8 md:h-8" />
                            </div>
                            <div className="flex-grow flex flex-col justify-start text-center">
                                <h3 className="font-bold text-[11px] md:text-xl mb-1 md:mb-2 text-[var(--text-color)] leading-tight">{item.title}</h3>
                                <p className="text-[9px] md:text-sm text-[var(--text-secondary)] mb-1.5 md:mb-4 leading-tight">{item.description}</p>
                                {item.href ? (
                                    <a
                                        href={item.href}
                                        className="text-[10px] md:text-lg font-bold text-blue-600 dark:text-blue-400 hover:underline break-all mt-auto leading-tight"
                                    >
                                        {item.action}
                                    </a>
                                ) : (
                                    <span className="text-[10px] md:text-lg font-bold text-blue-600 dark:text-blue-400 mt-auto leading-tight">
                                        {item.action}
                                    </span>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default ContactGrid;
