import React from 'react';
import { Icons } from './landing/constants';

const services = [
    {
        title: "Commercial and Residential Repair and Diagnostics",
        desc: "Leak detection & shingle replacement in record time. We identify micro-fractures invisible to the naked eye.",
        icon: Icons.Home,
        color: "from-blue-400 to-blue-600",
        glow: "shadow-blue-500/20"
    },
    // Commercial Development Removed as per request
    {
        title: "Lead & Data Solutions",
        desc: "Advanced lead scoring and real time storm tracking alerts. Know where the damage is before the phone rings. Powered by intelligent data models and predictive algorithms, we direct your reps and marketing into high-impact zones; where probability, urgency and opportunity align.",
        icon: Icons.Chart,
        color: "from-purple-400 to-indigo-600",
        glow: "shadow-purple-500/20"
    }
];

const Services = () => {
    // Simple Tilt Logic
    const handleMouseMove = (e) => {
        const card = e.currentTarget;
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;

        // Rotation calc (Max 5deg)
        const rotateX = ((y - centerY) / centerY) * -5;
        const rotateY = ((x - centerX) / centerX) * 5;

        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
    };

    const handleMouseLeave = (e) => {
        e.currentTarget.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
    };

    return (
        <section className="py-24 bg-white relative overflow-hidden dark:bg-black/40">
            <div className="absolute inset-0 opacity-5 bg-grid-pattern bg-[length:40px_40px]"></div>

            <div className="container mx-auto px-4 relative z-10">
                <div className="text-center mb-16">
                    <h2 className="text-slate-900 dark:text-white font-heading text-4xl font-bold">Our Core Services</h2>
                    <p className="text-gray-500 mt-4 max-w-2xl mx-auto font-light">Leveraging military-grade technology for civilian roofing applications.</p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                    {services.map((service, idx) => (
                        <div
                            key={idx}
                            onMouseMove={handleMouseMove}
                            onMouseLeave={handleMouseLeave}
                            className="group p-8 rounded-2xl border border-gray-100 dark:border-white/10 bg-white/80 dark:bg-white/5 backdrop-blur-sm shadow-xl transition-all duration-200 ease-out cursor-pointer relative overflow-hidden"
                            style={{ transformStyle: 'preserve-3d', transition: 'transform 0.1s ease-out' }}
                        >
                            {/* Gradient Glow on Hover */}
                            <div className={`absolute -inset-0.5 bg-gradient-to-br ${service.color} opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-300 pointer-events-none`}></div>

                            <div className="relative z-10 flex flex-col h-full">
                                <div className={`w-16 h-16 mb-6 rounded-xl flex items-center justify-center text-white bg-gradient-to-br ${service.color} shadow-lg ${service.glow} transform group-hover:scale-110 transition-transform duration-300`}>
                                    <div className="w-8 h-8 flex items-center justify-center">
                                        <service.icon />
                                    </div>
                                </div>

                                <h3 className="text-2xl font-heading font-bold text-slate-900 dark:text-white mb-3 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-cyan-500 dark:group-hover:from-blue-400 dark:group-hover:to-cyan-400 transition-all duration-300">
                                    {service.title}
                                </h3>

                                <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-8 flex-grow">
                                    {service.desc}
                                </p>

                                <div className="pt-6 border-t border-gray-100 dark:border-white/10 flex items-center justify-between mt-auto group-hover:border-cyan/20 transition-colors">
                                    <span className="text-xs font-bold text-gray-400 uppercase tracking-wider group-hover:text-cyan transition-colors">Explore Solution</span>
                                    <div className="w-8 h-8 rounded-full border border-gray-200 dark:border-white/20 text-gray-400 flex items-center justify-center transform group-hover:rotate-45 group-hover:border-cyan group-hover:text-cyan transition-all duration-300">
                                        ↗
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Services;