"use client";

import { Phone, Mail, MapPin } from "lucide-react";
import { motion } from "framer-motion";

export default function ContactCards() {
    const cards = [
        {
            icon: <Phone size={24} className="text-white" />,
            title: "Quick Contact",
            details: ["+91-95388-34444"],
            type: "phone"
        },
        {
            icon: <Mail size={24} className="text-white" />,
            title: "Email Address",
            details: ["support@skyandsoil.com"],
            type: "email"
        },
        {
            icon: <MapPin size={24} className="text-white" />,
            title: "Mailing Address",
            details: [
                "HSR Layout, Bengaluru, Karnataka 560102"
            ],
            type: "address"
        }
    ];

    return (
        <section className="relative z-20 px-6 max-w-6xl mx-auto pb-24">
            <div className="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-3 gap-6">
                {cards.map((card, index) => (
                    <motion.div
                        key={index}
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.5, delay: index * 0.1 }}
                        className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-5 flex flex-col items-start hover:-translate-y-1 transition-transform duration-300"
                    >
                        <div className="w-14 h-14 rounded-full bg-primary flex items-center justify-center mb-6 shadow-lg shadow-primary/30">
                            {card.icon}
                        </div>

                        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
                            {card.title}
                        </h3>

                        <div className="space-y-1">
                            {card.details.map((line, i) => (
                                <p key={i} className="text-gray-600 dark:text-gray-300 font-medium">
                                    {line}
                                </p>
                            ))}
                        </div>
                    </motion.div>
                ))}
            </div>
        </section>
    );
}
