import React, { useState, useEffect } from 'react';
import { 
    Menu, X, Hammer, Ruler, Zap, Thermometer, 
    Factory, CheckCircle, Phone, Mail, MapPin, 
    ChevronRight, ArrowRight, Building2
} from 'lucide-react';

// --- COMPONENTE DE IMAGEN ROBUSTO ---
const ImageWithFallback = ({ src, fallback, alt, className }) => {
    const [imgSrc, setImgSrc] = useState(src);

    const handleError = () => {
        // Si la imagen principal falla, cambiar al fallback
        if (imgSrc !== fallback) {
            setImgSrc(fallback);
        }
    };

    return (
        <img 
            src={imgSrc} 
            alt={alt} 
            className={className} 
            onError={handleError}
        />
    );
};

// --- DATOS ACTUALIZADOS CON IMÁGENES DE STOCK FIABLES ---
// Nota: Las URLs de Unsplash garantizan que siempre se vea una imagen si el archivo local falla.

const services = [
    {
        id: 1,
        title: "Montaje de Muros Tilt-Up",
        description: "Especialistas en fabricación y montaje de muros de concreto Tilt-up para naves industriales. Infraestructura robusta y rápida ejecución.",
        icon: <Building2 className="w-8 h-8 text-blue-600" />,
        image: "20241212_141159.jpg", 
        fallback: "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=1000&auto=format&fit=crop" // Grúa construcción
    },
    {
        id: 2,
        title: "Obra Electromecánica",
        description: "Instalaciones de media y baja tensión, subestaciones, tableros de control y automatización industrial (VFDs, PLCs).",
        icon: <Zap className="w-8 h-8 text-yellow-500" />,
        image: "20250320_165641.jpg",
        fallback: "https://images.unsplash.com/photo-1555664424-778a69022365?q=80&w=1000&auto=format&fit=crop" // Tablero eléctrico
    },
    {
        id: 3,
        title: "Metrología y Calibración",
        description: "Servicios acreditados de metrología: Dimensional, Masa, Presión, Temperatura y Volumen. Laboratorio móvil y escaneo 3D.",
        icon: <Ruler className="w-8 h-8 text-indigo-600" />,
        image: "https://images.unsplash.com/photo-1581093588401-fbb07366f531?q=80&w=1000&auto=format&fit=crop", // Imagen directa para metrología (Lab)
        fallback: "https://images.unsplash.com/photo-1581093588401-fbb07366f531?q=80&w=1000&auto=format&fit=crop"
    },
    {
        id: 4,
        title: "HVAC y Refrigeración",
        description: "Sistemas críticos para inocuidad alimentaria. Paquetes de enfriamiento de alta eficiencia y control de temperatura/humedad.",
        icon: <Thermometer className="w-8 h-8 text-cyan-500" />,
        image: "IMG20240320122443.jpg",
        fallback: "https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?q=80&w=1000&auto=format&fit=crop" // HVAC Industrial
    },
    {
        id: 5,
        title: "Construcción Industrial",
        description: "Diseño y construcción de naves industriales, pisos epóxicos de alta resistencia, cimentaciones y estructuras metálicas.",
        icon: <Factory className="w-8 h-8 text-slate-600" />,
        image: "20250610_175300.jpg",
        fallback: "https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=1000&auto=format&fit=crop" // Nave Industrial Interior
    },
    {
        id: 6,
        title: "Ingeniería Mecánica",
        description: "Montaje de maquinaria, líneas de producción, sistemas de tuberías y mantenimiento preventivo a equipos críticos.",
        icon: <Hammer className="w-8 h-8 text-orange-600" />,
        image: "20250416_083720.jpg",
        fallback: "https://images.unsplash.com/photo-1535953372935-7164b3609825?q=80&w=1000&auto=format&fit=crop" // Tuberías industriales
    }
];

const clients = [
    "Kellogg's", "Conagra Brands", "BMW", "Cinépolis", "Ryobi", "SEDENA", "Demek", "ABC", "F&P de México"
];

const galleryImages = [
    { 
        src: "20241110_073558.jpg", 
        fallback: "https://images.unsplash.com/photo-1590644365607-1c5a38fc43e0?q=80&w=1000&auto=format&fit=crop", 
        alt: "Construcción Nave Industrial" 
    },
    { 
        src: "20250610_175300.jpg", 
        fallback: "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=1000&auto=format&fit=crop", 
        alt: "Estructura Metálica Interior" 
    },
    { 
        src: "20250320_165641.jpg", 
        fallback: "https://images.unsplash.com/photo-1563770095-39d468f9a51d?q=80&w=1000&auto=format&fit=crop", 
        alt: "Tableros de Control Industrial" 
    },
    { 
        src: "IMG20240320122443.jpg", 
        fallback: "https://images.unsplash.com/photo-1565008447742-97f6f38c985c?q=80&w=1000&auto=format&fit=crop", 
        alt: "Instalaciones HVAC en Azotea" 
    },
    { 
        src: "20241212_141159.jpg", 
        fallback: "https://images.unsplash.com/photo-1574689211272-bc14e28bbc73?q=80&w=1000&auto=format&fit=crop", 
        alt: "Maniobras de Izaje Tilt-Up" 
    },
    { 
        src: "20241010_165742.jpg", 
        fallback: "https://images.unsplash.com/photo-1486325212027-8081e485255e?q=80&w=1000&auto=format&fit=crop", 
        alt: "Proyectos Civiles" 
    }
];

// --- COMPONENTES ---

const Navbar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [scrolled, setScrolled] = useState(false);

    useEffect(() => {
        const handleScroll = () => setScrolled(window.scrollY > 50);
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white shadow-md py-2' : 'bg-transparent py-4'}`}>
            <div className="container mx-auto px-6 flex justify-between items-center">
                <div className="flex items-center">
                    <div className={`text-2xl font-bold tracking-tighter ${scrolled ? 'text-blue-900' : 'text-white'}`}>
                        IFRO <span className="font-light">Eco-Group</span>
                    </div>
                </div>

                <div className="hidden md:flex space-x-8">
                    {['Inicio', 'Nosotros', 'Servicios', 'Proyectos', 'Contacto'].map((item) => (
                        <a 
                            key={item} 
                            href={`#${item.toLowerCase()}`}
                            className={`text-sm font-medium hover:text-blue-500 transition-colors ${scrolled ? 'text-gray-700' : 'text-gray-200'}`}
                        >
                            {item}
                        </a>
                    ))}
                </div>

                <div className="md:hidden">
                    <button onClick={() => setIsOpen(!isOpen)} className={scrolled ? 'text-gray-800' : 'text-white'}>
                        {isOpen ? <X /> : <Menu />}
                    </button>
                </div>
            </div>

            {isOpen && (
                <div className="md:hidden bg-white shadow-xl absolute top-full left-0 w-full py-4 px-6 flex flex-col space-y-4">
                    {['Inicio', 'Nosotros', 'Servicios', 'Proyectos', 'Contacto'].map((item) => (
                        <a 
                            key={item} 
                            href={`#${item.toLowerCase()}`}
                            onClick={() => setIsOpen(false)}
                            className="text-gray-800 font-medium hover:text-blue-600"
                        >
                            {item}
                        </a>
                    ))}
                </div>
            )}
        </nav>
    );
};

const Hero = () => {
    return (
        <section id="inicio" className="relative h-screen flex items-center justify-center overflow-hidden">
            <div className="absolute inset-0 z-0">
                <ImageWithFallback 
                    src="20241110_073558.jpg"
                    fallback="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=1600&auto=format&fit=crop"
                    alt="IFRO Construction Site" 
                    className="w-full h-full object-cover"
                />
                <div 
                    className="absolute inset-0" 
                    style={{ background: 'linear-gradient(rgba(17, 24, 39, 0.75), rgba(17, 24, 39, 0.85))' }}
                ></div>
            </div>

            <div className="container mx-auto px-6 relative z-10 text-center text-white">
                <div className="inline-block bg-blue-600 bg-opacity-90 px-4 py-1 rounded-full text-sm font-semibold mb-6 animate-pulse">
                    Ingeniería, Construcción y Consultoría
                </div>
                <h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
                    Soluciones Integrales para la <br/>
                    <span className="text-blue-400">Industria y Construcción</span>
                </h1>
                <p className="text-xl md:text-2xl text-gray-200 mb-10 max-w-3xl mx-auto font-light">
                    Expertos en Muros Tilt-up, Instalaciones Electromecánicas, Metrología y Sistemas HVAC para plantas de alto rendimiento.
                </p>
                <div className="flex flex-col md:flex-row justify-center gap-4">
                    <a href="#servicios" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-semibold transition-all flex items-center justify-center gap-2">
                        Nuestros Servicios <ArrowRight className="w-4 h-4" />
                    </a>
                    <a href="#contacto" className="border-2 border-white hover:bg-white hover:text-blue-900 text-white px-8 py-3 rounded-md font-semibold transition-all">
                        Contáctanos
                    </a>
                </div>
            </div>
        </section>
    );
};

const About = () => {
    return (
        <section id="nosotros" className="py-20 bg-white">
            <div className="container mx-auto px-6">
                <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                        <h2 className="text-blue-600 font-bold uppercase tracking-wide text-sm mb-2">Sobre IFRO</h2>
                        <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
                            Más de 20 años impulsando la eficiencia industrial
                        </h3>
                        <p className="text-gray-600 mb-6 leading-relaxed">
                            Somos una empresa constituida por profesionales que ofrecen soluciones integrales para asegurar la calidad y mejorar la rentabilidad de las organizaciones.
                            Combinamos experiencia en <strong>construcción sanitaria</strong>, ingeniería de planta y <strong>metrología acreditada</strong>.
                        </p>
                        
                        <div className="space-y-4">
                            <div className="flex items-start gap-3">
                                <CheckCircle className="w-6 h-6 text-green-500 mt-1 flex-shrink-0" />
                                <div>
                                    <h4 className="font-bold text-gray-900">Misión</h4>
                                    <p className="text-sm text-gray-600">Crear valor sostenido reduciendo la huella de carbono y mejorando la eficiencia energética en cada proyecto.</p>
                                </div>
                            </div>
                            <div className="flex items-start gap-3">
                                <CheckCircle className="w-6 h-6 text-green-500 mt-1 flex-shrink-0" />
                                <div>
                                    <h4 className="font-bold text-gray-900">Visión</h4>
                                    <p className="text-sm text-gray-600">Ser la compañía de servicios industriales e institucionales más eficiente e innovadora.</p>
                                </div>
                            </div>
                        </div>

                        <div className="mt-8 border-l-4 border-blue-600 pl-4">
                            <p className="italic text-gray-700">"Confía en nosotros para crear espacios seguros, limpios y eficientes."</p>
                            <p className="font-bold text-gray-900 mt-2">- Ing. Luis Iván Chagolla, Gerente de Operaciones</p>
                        </div>
                    </div>
                    <div className="relative h-96 rounded-lg overflow-hidden shadow-2xl group">
                        <ImageWithFallback 
                            src="20250610_175300.jpg"
                            fallback="https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=1000&auto=format&fit=crop"
                            alt="Interior Nave Industrial" 
                            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                        />
                        <div className="absolute bottom-0 left-0 bg-blue-900 bg-opacity-90 text-white p-6 w-full">
                            <div className="flex justify-between items-center">
                                <div>
                                    <p className="text-3xl font-bold">14+</p>
                                    <p className="text-xs uppercase">Años de Experiencia en Industria Alimenticia</p>
                                </div>
                                <div>
                                    <p className="text-3xl font-bold">90%</p>
                                    <p className="text-xs uppercase">Eficiencia en Arranque de Plantas</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

const Services = () => {
    return (
        <section id="servicios" className="py-20 bg-gray-50">
            <div className="container mx-auto px-6">
                <div className="text-center mb-16">
                    <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nuestros Servicios</h2>
                    <p className="text-gray-600 max-w-2xl mx-auto">
                        Desde la cimentación hasta la calibración de sus equipos. Ofrecemos un portafolio completo para la industria.
                    </p>
                </div>

                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {services.map((service) => (
                        <div key={service.id} className="bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group border border-gray-100">
                            <div className="h-48 overflow-hidden relative">
                                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10"></div>
                                <ImageWithFallback 
                                    src={service.image} 
                                    fallback={service.fallback}
                                    alt={service.title} 
                                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                                />
                                <div className="absolute bottom-4 left-4 z-20 bg-white p-2 rounded-full">
                                    {service.icon}
                                </div>
                            </div>
                            <div className="p-6">
                                <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">
                                    {service.title}
                                </h3>
                                <p className="text-gray-600 text-sm leading-relaxed mb-4">
                                    {service.description}
                                </p>
                                <a href="#contacto" className="text-blue-600 font-semibold text-sm flex items-center gap-1 hover:gap-2 transition-all">
                                    Solicitar cotización <ChevronRight className="w-4 h-4" />
                                </a>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

const Projects = () => {
    return (
        <section id="proyectos" className="py-20 bg-white">
            <div className="container mx-auto px-6">
                <div className="mb-12">
                    <h2 className="text-3xl font-bold text-gray-900 mb-4">Proyectos y Clientes</h2>
                    <p className="text-gray-600">
                        Hemos colaborado con líderes de la industria en proyectos de alta complejidad, desde plantas de alimentos hasta automotrices.
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-16">
                    {galleryImages.map((img, idx) => (
                        <div key={idx} className="relative group overflow-hidden rounded-lg h-64 shadow-md">
                            <ImageWithFallback 
                                src={img.src} 
                                fallback={img.fallback}
                                alt={img.alt} 
                                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                            />
                            <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300 flex items-center justify-center">
                                <p className="text-white font-bold text-lg opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 px-4 text-center">
                                    {img.alt}
                                </p>
                            </div>
                        </div>
                    ))}
                </div>

                <div className="bg-gray-50 p-10 rounded-2xl">
                    <h3 className="text-center text-xl font-semibold text-gray-700 mb-8">Empresas que confían en nosotros</h3>
                    <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70 grayscale hover:grayscale-0 transition-all duration-500">
                        {clients.map((client, index) => (
                            <span key={index} className="text-2xl md:text-3xl font-bold text-gray-400 hover:text-blue-600 transition-colors cursor-default">
                                {client}
                            </span>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

const Contact = () => {
    return (
        <section id="contacto" className="py-20 bg-blue-900 text-white">
            <div className="container mx-auto px-6">
                <div className="grid md:grid-cols-2 gap-16">
                    <div>
                        <h2 className="text-3xl font-bold mb-6">¿Listo para optimizar su planta?</h2>
                        <p className="text-blue-200 mb-8 text-lg">
                            Analizaremos sus necesidades para ofrecerle una solución a medida, segura y eficiente. Ya sea una obra nueva Tilt-up o servicios de metrología especializada.
                        </p>
                        
                        <div className="space-y-6">
                            <div className="flex items-center gap-4">
                                <div className="bg-blue-800 p-3 rounded-full">
                                    <Phone className="w-6 h-6" />
                                </div>
                                <div>
                                    <p className="text-sm text-blue-300">Llámanos</p>
                                    <p className="font-semibold text-lg">56 2530 5142</p>
                                </div>
                            </div>
                            
                            <div className="flex items-center gap-4">
                                <div className="bg-blue-800 p-3 rounded-full">
                                    <Mail className="w-6 h-6" />
                                </div>
                                <div>
                                    <p className="text-sm text-blue-300">Escríbenos</p>
                                    <p className="font-semibold text-lg">direccion@ifro.com.mx</p>
                                </div>
                            </div>

                            <div className="flex items-center gap-4">
                                <div className="bg-blue-800 p-3 rounded-full">
                                    <MapPin className="w-6 h-6" />
                                </div>
                                <div>
                                    <p className="text-sm text-blue-300">Cobertura</p>
                                    <p className="font-semibold">Atención en todo México (Bajío, CDMX, Norte)</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="bg-white text-gray-800 p-8 rounded-2xl shadow-xl">
                        <h3 className="text-2xl font-bold mb-6 text-gray-900">Solicitar Información</h3>
                        <form className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Nombre Completo</label>
                                <input type="text" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none transition-all" placeholder="Su nombre" />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Empresa</label>
                                <input type="text" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none transition-all" placeholder="Nombre de la empresa" />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Correo Electrónico</label>
                                <input type="email" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none transition-all" placeholder="correo@empresa.com" />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Servicio de Interés</label>
                                <select className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none transition-all">
                                    <option>Construcción / Tilt-Up</option>
                                    <option>Obra Electromecánica</option>
                                    <option>Metrología</option>
                                    <option>HVAC / Refrigeración</option>
                                    <option>Otro</option>
                                </select>
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Mensaje</label>
                                <textarea className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none transition-all h-32" placeholder="Describa su proyecto..."></textarea>
                            </div>
                            <button type="button" className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-md transition-all shadow-lg transform hover:-translate-y-1">
                                Enviar Mensaje
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    );
};

const Footer = () => {
    return (
        <footer className="bg-gray-900 text-gray-400 py-12 border-t border-gray-800">
            <div className="container mx-auto px-6 text-center">
                <h2 className="text-2xl font-bold text-white mb-4">IFRO Consulting Group</h2>
                <div className="flex justify-center space-x-6 mb-8">
                    <a href="#" className="hover:text-white transition-colors">LinkedIn</a>
                    <a href="#" className="hover:text-white transition-colors">Facebook</a>
                    <a href="#" className="hover:text-white transition-colors">Instagram</a>
                </div>
                <p className="text-sm">
                    &copy; {new Date().getFullYear()} IFRO Eco-Group. Todos los derechos reservados.
                </p>
            </div>
        </footer>
    );
};

export default function App() {
    return (
        <div className="bg-gray-50 smooth-scroll text-gray-800 font-sans antialiased">
            <Navbar />
            <Hero />
            <About />
            <Services />
            <Projects />
            <Contact />
            <Footer />
        </div>
    );
}