components/hero.js

class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .hero {
                    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
                    position: relative;
                    overflow: hidden;
                }
                
                .hero::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: url('http://static.photos/industrial/1920x600/hero') center/cover;
                    opacity: 0.2;
                    z-index: 1;
                }
                
                .hero-content {
                    position: relative;
                    z-index: 2;
                }
                
                .hero-title {
                    animation: fadeInUp 1s ease-out;
                }
                
                .hero-subtitle {
                    animation: fadeInUp 1s ease-out 0.2s backwards;
                }
                
                .hero-buttons {
                    animation: fadeInUp 1s ease-out 0.4s backwards;
                }
                
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                
                .stat-card {
                    background: rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                }
            </style>
            <section id="home" class="hero py-24 lg:py-32">
                <div class="hero-content max-w-7xl mx-auto px-4">
                    <div class="text-center mb-16">
                        <h1 class="hero-title text-4xl md:text-6xl font-bold text-white mb-6">
                            Roladoras de Lámina KR181
                        </h1>
                        <p class="hero-subtitle text-xl md:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto">
                            Precisión alemana, potencia industrial. La solución definitiva para laminado de metales en su planta de producción.
                        </p>
                        <div class="hero-buttons flex flex-col sm:flex-row gap-4 justify-center">
                            <button class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-all transform hover:scale-105 shadow-lg">
                                <i data-feather="play-circle" class="inline w-5 h-5 mr-2"></i>
                                Ver Demostración
                            </button>
                            <button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-all transform hover:scale-105">
                                <i data-feather="download" class="inline w-5 h-5 mr-2"></i>
                                Descargar Catálogo
                            </button>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
                        <div class="stat-card rounded-xl p-6 text-center">
                            <div class="text-3xl font-bold text-white mb-2">500+</div>
                            <div class="text-blue-100">Unidades Instaladas</div>
                        </div>
                        <div class="stat-card rounded-xl p-6 text-center">
                            <div class="text-3xl font-bold text-white mb-2">98%</div>
                            <div class="text-blue-100">Satisfacción Clientes</div>
                        </div>
                        <div class="stat-card rounded-xl p-6 text-center">
                            <div class="text-3xl font-bold text-white mb-2">24/7</div>
                            <div class="text-blue-100">Soporte Técnico</div>
                        </div>
                    </div>
                </div>
            </section>
        `;
        
        // Initialize feather icons
        setTimeout(() => {
            feather.replace();
        }, 0);
    }
}

customElements.define('custom-hero', CustomHero);