import React, { useState, useMemo } from 'react';
import { createRoot } from 'react-dom/client';

const SVGIcon = ({ d, size = 48 }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className="icon">
        <path d={d} />
    </svg>
);

const handleNavClick = (e) => {
    e.preventDefault();
    const targetId = e.currentTarget.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
    }
};

const Header = () => (
    <header className="app-header">
        <div className="header-content">
            <a href="#home" className="logo" onClick={handleNavClick}>TRANSPORTES <span>HM</span> EXPRESS</a>
            <nav className="nav-links">
                <a href="#services" onClick={handleNavClick}>Servicios</a>
                <a href="#quote" onClick={handleNavClick}>Presupuesto</a>
                <a href="#contact" onClick={handleNavClick}>Contacto</a>
            </nav>
        </div>
    </header>
);

const Hero = () => (
    <section className="hero" id="home">
        <div className="container">
            <h1>Tus Mudanzas, Nuestra Misión</h1>
            <p>Servicio de transporte y mudanzas a nivel nacional. Rápido, económico y con la máxima seguridad para tus pertenencias.</p>
            <a href="#quote" className="btn" onClick={handleNavClick}>¡Pide tu presupuesto ahora!</a>
        </div>
    </section>
);

const servicesData = [
    {
        icon: "M19.5,9.5c-1.03,0-1.9,0.62-2.29,1.5H3.5v-3h12.29c0.39,0.88,1.26,1.5,2.29,1.5c1.38,0,2.5-1.12,2.5-2.5S20.88,4.5,19.5,4.5s-2.5,1.12-2.5,2.5c0,0.15,0.02,0.3,0.04,0.45L13,9H3.5C3.22,9,3,9.22,3,9.5v4C3,13.78,3.22,14,3.5,14h13.79c-0.4,0.88-1.27,1.5-2.29,1.5c-1.38,0-2.5-1.12-2.5-2.5c0-0.69,0.28-1.32,0.73-1.77L11.9,10H5.5v2H11v1H5.5v1H11v1H5.5v1H11v1H5.5v2h12.29c0.39,0.88,1.26,1.5,2.29,1.5c1.38,0,2.5-1.12,2.5-2.5S20.88,17.5,19.5,17.5zM19.5,6.5c0.28,0,0.5,0.22,0.5,0.5s-0.22,0.5-0.5,0.5s-0.5-0.22-0.5-0.5S19.22,6.5,19.5,6.5zM19.5,15.5c0.28,0,0.5,0.22,0.5,0.5s-0.22,0.5-0.5,0.5s-0.5-0.22-0.5-0.5S19.22,15.5,19.5,15.5zM19.5,12.5c0.28,0,0.5,0.22,0.5,0.5s-0.22,0.5-0.5,0.5s-0.5-0.22-0.5-0.5S19.22,12.5,19.5,12.5z",
        title: "Transporte Nacional",
        description: "Llevamos tus pertenencias a cualquier punto del país con la máxima eficiencia y puntualidad."
    },
    {
        icon: "M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 18H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8-4H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8-4H7V8h2v2zm4 0h-2V8h2v2z",
        title: "Embalaje Profesional",
        description: "Protegemos tus objetos más preciados con materiales de alta calidad y técnicas de embalaje expertas."
    },
    {
        icon: "M13.25 7.43c.41-.41.41-1.09 0-1.5l-1.5-1.5c-.41-.41-1.09-.41-1.5 0L6 8.67V11h2.33l4.92-4.57zM17.5 2c-.97 0-1.85.39-2.48 1.02l-8.5 8.5C6.23 11.82 6 12.19 6 12.59V15c0 .55.45 1 1 1h2.41c.4 0 .77-.23 1.07-.52l8.5-8.5c1.27-1.27 1.27-3.33 0-4.59C19.35 2.39 18.47 2 17.5 2zM20 18H4V6h4.08l2-2H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-8.08l-2 2V18z",
        title: "Montaje y Desmontaje",
        description: "Nuestro equipo se encarga del montaje y desmontaje de tus muebles para una mudanza sin estrés."
    }
];

const Services = () => (
    <section id="services" className="section section-light">
        <div className="container">
            <h2>Nuestros Servicios</h2>
            <div className="grid-3">
                {servicesData.map(service => (
                    <div className="card" key={service.title}>
                        <SVGIcon d={service.icon} />
                        <h3>{service.title}</h3>
                        <p>{service.description}</p>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

const QuoteCalculator = () => {
    const [formData, setFormData] = useState({
        distance: 100,
        boxes: 10,
        weight: 200,
        assembly: false,
        floor: 1,
        elevator: true,
    });

    const handleChange = (e) => {
        const { name, value, type, checked } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: type === 'checkbox' ? checked : Number(value)
        }));
    };
    
    const handleReset = () => {
         setFormData({
            distance: 100,
            boxes: 10,
            weight: 200,
            assembly: false,
            floor: 1,
            elevator: true,
        });
    }

    const price = useMemo(() => {
        const { distance, boxes, weight, assembly, floor, elevator } = formData;
        let total = 0;

        // Coste por distancia
        total += distance * 0.80;
        // Coste por cajas
        total += boxes * 2;
        // Coste por peso (extra si supera los 100kg)
        if (weight > 100) {
            total += (weight - 100) * 0.10;
        }
        // Coste por montaje/desmontaje
        if (assembly) {
            total += 75;
        }
        // Coste por piso sin ascensor
        if (!elevator && floor > 0) {
            total += floor * 10;
        }

        return total;
    }, [formData]);

    return (
        <section id="quote" className="section">
            <div className="container">
                <h2>Calcula tu Presupuesto al Instante</h2>
                <div className="quote-calculator">
                    <div className="quote-form-container">
                        <form className="form-grid" onSubmit={(e) => e.preventDefault()}>
                            <div className="form-group">
                                <label htmlFor="distance">Distancia (km)</label>
                                <input type="number" id="distance" name="distance" value={formData.distance} onChange={handleChange} min="10" />
                            </div>
                            <div className="form-group">
                                <label htmlFor="boxes">Nº de Cajas</label>
                                <input type="number" id="boxes" name="boxes" value={formData.boxes} onChange={handleChange} min="0" />
                            </div>
                            <div className="form-group">
                                <label htmlFor="weight">Peso Estimado (kg)</label>
                                <input type="number" id="weight" name="weight" value={formData.weight} onChange={handleChange} min="0" />
                            </div>
                             <div className="form-group">
                                <label htmlFor="floor">Piso de Destino</label>
                                <input type="number" id="floor" name="floor" value={formData.floor} onChange={handleChange} min="0" />
                            </div>
                            <div className="form-group checkbox-group full-width">
                                <input type="checkbox" id="assembly" name="assembly" checked={formData.assembly} onChange={handleChange} />
                                <label htmlFor="assembly">Montaje/Desmontaje de muebles</label>
                            </div>
                            <div className="form-group checkbox-group full-width">
                                <input type="checkbox" id="elevator" name="elevator" checked={formData.elevator} onChange={handleChange} />
                                <label htmlFor="elevator">Hay ascensor en destino</label>
                            </div>
                            <div className="quote-actions">
                                <button type="button" onClick={handleReset} className="btn btn-secondary">Reiniciar</button>
                            </div>
                        </form>
                        <div className="quote-result">
                            <h3>Presupuesto Estimado</h3>
                            <div className="quote-price">
                                {price.toFixed(2)}€
                            </div>
                            <p>Precio con IVA incluido. Esta es una estimación, el precio final puede variar.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

const WhyUs = () => (
    <section id="why-us" className="section section-light">
        <div className="container">
            <h2>¿Por Qué Elegirnos?</h2>
            <div className="grid-3">
                <div className="card">
                     <SVGIcon d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
                    <h3>Seguro de Mercancías</h3>
                    <p>Tu tranquilidad es nuestra prioridad. Ofrecemos un seguro de mercancías de hasta 10.000€.</p>
                </div>
                 <div className="card">
                    <SVGIcon d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M10,17l-5-5l1.41-1.41L10,14.17l7.59-7.59L19,8L10,17z"/>
                    <h3>Profesionalidad y Confianza</h3>
                    <p>Un equipo de expertos a tu servicio para garantizar una mudanza eficiente y sin contratiempos.</p>
                </div>
                <div className="card">
                    <SVGIcon d="M11.83,2H3.98C2.88,2,2,2.89,2,3.99V22l7-3l7,3V3.99C16,2.89,15.12,2,14.02,2H13V1c0-0.55-0.45-1-1-1S11,0.45,11,1v1H11.83z M11,16.5l-4,1.82V4h8v14.32L11,16.5z M10,14H8v-2h2V14z M10,11H8V9h2V11z M10,8H8V6h2V8z M12,14h2v-2h-2V14z M12,11h2V9h-2V11z M12,8h2V6h-2V8z"/>
                    <h3>Precios Competitivos</h3>
                    <p>Ofrecemos tarifas económicas y transparentes, sin sorpresas. Calidad y buen precio garantizados.</p>
                </div>
            </div>
        </div>
    </section>
);

const Contact = () => (
    <section id="contact" className="section">
        <div className="container contact-info">
            <h2>Contacta con Nosotros</h2>
            <p>Estamos en Alfaro (La Rioja), listos para ayudarte con tu próxima mudanza.</p>
            <h3>Teléfono: 620 036 651</h3>
            <h3>Email: hmtransporteexpress@gmail.com</h3>
        </div>
    </section>
);


const Footer = () => (
    <footer className="app-footer">
        <div className="footer-content">
             <div className="footer-contact">
                <a href="tel:620036651">620 036 651</a> | 
                <a href="mailto:hmtransporteexpress@gmail.com">hmtransporteexpress@gmail.com</a>
            </div>
            <p>&copy; {new Date().getFullYear()} TRANSPORTES HM EXPRESS. Todos los derechos reservados.</p>
        </div>
    </footer>
);


const App = () => (
    <>
        <Header />
        <main>
            <Hero />
            <Services />
            <QuoteCalculator />
            <WhyUs />
            <Contact />
        </main>
        <Footer />
    </>
);

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);