class CustomHero extends HTMLElement {
    constructor() {
        super();
        this.currentIndex = 0;
        this.facts = [
            "La photosynthèse produit environ 130 térawatts d'énergie par an",
            "Les forêts tropicales produisent 40% de l'oxygène terrestre",
            "Le phytoplancton produit 50% de l'oxygène de l'atmosphère",
            "Une feuille peut convertir jusqu'à 6% de l'énergie lumineuse en énergie chimique"
        ];
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        this.initAnimations();
        this.startFactRotation();
        this.initScrollIndicator();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: relative;
                    overflow: hidden;
                }
                
                .hero-container {
                    min-height: 90vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    padding: 4rem 2rem;
                    background: linear-gradient(135deg, 
                        rgba(10, 25, 41, 0.95) 0%, 
                        rgba(19, 47, 76, 0.9) 50%, 
                        rgba(30, 58, 95, 0.85) 100%),
                    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(46, 125, 50, 0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(#grid)"/></svg>');
                    background-size: cover;
                    background-position: center;
                }
                
                .hero-content {
                    max-width: 1200px;
                    text-align: center;
                    z-index: 2;
                    position: relative;
                }
                
                .hero-title {
                    font-family: 'Space Grotesk', sans-serif;
                    font-size: 4rem;
                    font-weight: 800;
                    margin-bottom: 1.5rem;
                    background: linear-gradient(135deg, #4CAF50, #00BFA5, #2196F3);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    line-height: 1.2;
                }
                
                .hero-subtitle {
                    font-size: 1.5rem;
                    color: #90CAF9;
                    margin-bottom: 2.5rem;
                    max-width: 800px;
                    margin-left: auto;
                    margin-right: auto;
                    line-height: 1.6;
                }
                
                .hero-stats {
                    display: flex;
                    justify-content: center;
                    gap: 3rem;
                    margin-bottom: 3rem;
                    flex-wrap: wrap;
                }
                
                .stat-item {
                    background: rgba(255, 255, 255, 0.05);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(46, 125, 50, 0.3);
                    border-radius: 16px;
                    padding: 1.5rem 2rem;
                    min-width: 200px;
                    transition: all 0.3s ease;
                }
                
                .stat-item:hover {
                    transform: translateY(-5px);
                    border-color: rgba(46, 125, 50, 0.6);
                    box-shadow: 0 10px 30px rgba(46, 125, 50, 0.2);
                }
                
                .stat-value {
                    font-family: 'Space Grotesk', sans-serif;
                    font-size: 2.5rem;
                    font-weight: 700;
                    background: linear-gradient(135deg, #4CAF50, #2196F3);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    margin-bottom: 0.5rem;
                }
                
                .stat-label {
                    font-size: 0.9rem;
                    color: #64B5F6;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }
                
                .hero-fact {
                    background: rgba(33, 150, 243, 0.1);
                    border-left: 4px solid #2196F3;
                    padding: 1.5rem;
                    margin: 2rem auto;
                    max-width: 600px;
                    border-radius: 0 8px 8px 0;
                    opacity: 0;
                    transform: translateY(20px);
                    transition: all 0.5s ease;
                }
                
                .hero-fact.show {
                    opacity: 1;
                    transform: translateY(0);
                }
                
                .fact-text {
                    font-size: 1.1rem;
                    color: #E3F2FD;
                    font-style: italic;
                    margin: 0;
                }
                
                .fact-icon {
                    color: #4CAF50;
                    margin-right: 10px;
                }
                
                .scroll-indicator {
                    position: absolute;
                    bottom: 2rem;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 0.5rem;
                    opacity: 0.7;
                    transition: opacity 0.3s ease;
                    cursor: pointer;
                }
                
                .scroll-indicator:hover {
                    opacity: 1;
                }
                
                .scroll-text {
                    font-size: 0.9rem;
                    color: #90CAF9;
                    text-transform: uppercase;
                    letter-spacing: 2px;
                }
                
                .scroll-arrow {
                    animation: bounce 2s infinite;
                }
                
                @keyframes bounce {
                    0%, 20%, 50%, 80%, 100% {
                        transform: translateY(0);
                    }
                    40% {
                        transform: translateY(-10px);
                    }
                    60% {
                        transform: translateY(-5px);
                    }
                }
                
                .hero-decoration {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    pointer-events: none;
                    overflow: hidden;
                }
                
                .floating-element {
                    position: absolute;
                    background: radial-gradient(circle, rgba(76, 175, 80, 0.1) 0%, transparent 70%);
                    border-radius: 50%;
                    animation: float 20s infinite linear;
                }
                
                .floating-element:nth-child(1) {
                    width: 300px;
                    height: 300px;
                    top: 10%;
                    left: 5%;
                    animation-delay: 0s;
                }
                
                .floating-element:nth-child(2) {
                    width: 200px;
                    height: 200px;
                    top: 20%;
                    right: 10%;
                    animation-delay: -5s;
                    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
                }
                
                .floating-element:nth-child(3) {
                    width: 150px;
                    height: 150px;
                    bottom: 20%;
                    left: 15%;
                    animation-delay: -10s;
                    background: radial-gradient(circle, rgba(0, 191, 165, 0.1) 0%, transparent 70%);
                }
                
                @keyframes float {
                    0% {
                        transform: translate(0, 0) rotate(0deg);
                    }
                    25% {
                        transform: translate(20px, -20px) rotate(90deg);
                    }
                    50% {
                        transform: translate(0, 0) rotate(180deg);
                    }
                    75% {
                        transform: translate(-20px, 20px) rotate(270deg);
                    }
                    100% {
                        transform: translate(0, 0) rotate(360deg);
                    }
                }
                
                @media (max-width: 768px) {
                    .hero-container {
                        min-height: 80vh;
                        padding: 2rem 1rem;
                    }
                    
                    .hero-title {
                        font-size: 2.5rem;
                    }
                    
                    .hero-subtitle {
                        font-size: 1.2rem;
                        padding: 0 1rem;
                    }
                    
                    .hero-stats {
                        gap: 1rem;
                    }
                    
                    .stat-item {
                        min-width: 150px;
                        padding: 1rem;
                    }
                    
                    .stat-value {
                        font-size: 2rem;
                    }
                }
                
                @media (max-width: 480px) {
                    .hero-title {
                        font-size: 2rem;
                    }
                    
                    .hero-subtitle {
                        font-size: 1rem;
                    }
                    
                    .hero-stats {
                        flex-direction: column;
                        align-items: center;
                    }
                    
                    .stat-item {
                        width: 100%;
                        max-width: 250px;
                    }
                }
            </style>
            
            <div class="hero-container">
                <div class="hero-decoration">
                    <div class="floating-element"></div>
                    <div class="floating-element"></div>
                    <div class="floating-element"></div>
                </div>
                
                <div class="hero-content">
                    <h1 class="hero-title">La Photosynthèse Décryptée</h1>
                    <p class="hero-subtitle">
                        Explorez le processus biologique fondamental qui transforme la lumière en vie, 
                        alimentant les écosystèmes terrestres et produisant l'oxygène que nous respirons.
                    </p>
                    
                    <div class="hero-stats">
                        <div class="stat-item">
                            <div class="stat-value">3.5B</div>
                            <div class="stat-label">Années d'évolution</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">99%</div>
                            <div class="stat-label">Énergie biologique</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">104-130</div>
                            <div class="stat-label">PgC/an fixés</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">↑70%</div>
                            <div class="stat-label">Oxygène atmosphérique</div>
                        </div>
                    </div>
                    
                    <div class="hero-fact" id="factDisplay">
                        <p class="fact-text">
                            <i data-feather="info" class="fact-icon"></i>
                            <span id="factText">${this.facts[0]}</span>
                        </p>
                    </div>
                </div>
                
                <div class="scroll-indicator" id="scrollIndicator">
                    <span class="scroll-text">Explorer</span>
                    <div class="scroll-arrow">
                        <i data-feather="chevron-down"></i>
                    </div>
                </div>
            </div>
        `;
    }

    initAnimations() {
        // Animation d'entrée
        const heroContent = this.shadowRoot.querySelector('.hero-content');
        const statItems = this.shadowRoot.querySelectorAll('.stat-item');
        
        // Animation séquentielle des éléments
        setTimeout(() => {
            heroContent.style.opacity = '0';
            heroContent.style.transform = 'translateY(20px)';
            heroContent.style.transition = 'all 0.8s ease';
            
            setTimeout(() => {
                heroContent.style.opacity = '1';
                heroContent.style.transform = 'translateY(0)';
            }, 100);
        }, 100);

        // Animation des statistiques
        statItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(30px)';
            item.style.transition = 'all 0.5s ease';
            
            setTimeout(() => {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 300 + (index * 200));
        });
    }

    startFactRotation() {
        const factDisplay = this.shadowRoot.querySelector('#factDisplay');
        const factText = this.shadowRoot.querySelector('#factText');
        
        if (!factDisplay || !factText) return;
        
        // Afficher le premier fait
        factDisplay.classList.add('show');
        
        // Changer de fait toutes les 10 secondes
        setInterval(() => {
            this.currentIndex = (this.currentIndex + 1) % this.facts.length;
            
            // Animation de transition
            factDisplay.style.opacity = '0';
            factDisplay.style.transform = 'translateY(10px)';
            
            setTimeout(() => {
                factText.textContent = this.facts[this.currentIndex];
                factDisplay.style.opacity = '1';
                factDisplay.style.transform = 'translateY(0)';
            }, 500);
            
        }, 10000);
    }

    initScrollIndicator() {
        const scrollIndicator = this.shadowRoot.querySelector('#scrollIndicator');
        
        if (scrollIndicator) {
            scrollIndicator.addEventListener('click', () => {
                // Faire défiler vers la section suivante
                const nextSection = document.querySelector('section');
                if (nextSection) {
                    nextSection.scrollIntoView({ 
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        }

        // Cacher l'indicateur lors du défilement
        window.addEventListener('scroll', () => {
            if (scrollIndicator) {
                if (window.scrollY > 100) {
                    scrollIndicator.style.opacity = '0';
                    scrollIndicator.style.pointerEvents = 'none';
                } else {
                    scrollIndicator.style.opacity = '0.7';
                    scrollIndicator.style.pointerEvents = 'auto';
                }
            }
        });
    }
}

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