const boliviaData = {
    general: {
        nombre: "EL GRAN COLISEO DE BENJAZ",
        imagen: "https://media.esports.gg/uploads/2026/05/IMG_8323-768x960.avif",
        video: "https://kick.com/benjaz",
        mapa: "https://www.eluniversal.com.mx/resizer/v2/CSRETVWI4JBQVJGIBLAIMF56YQ.png?auth=a9700239e2ab4593ff3e2c68f9cbd7a39f7c37b69f5a43e08e4bc40e69f8a8a3&smart=true&height=666",
        video2: "//www.youtube.com/embed/9RTGFWFt5hA?si=GLCYBEEjgsh3ySrw",
        mapa2: "https://www.gstatic.com/marketing-cms/assets/images/08/25/fffdc76145f28be3a1ca63859c4a/external-logo-core-1.png=n-w1860-h1047-fcrop64=1,00000000ffffffff-rw"


    },
    departamentos: {
        thebots: {
            id: 1,
            nombre: "The Bot$",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/XjyawCcHhQc",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp"           
        },
        thefatbears: {
            id: 2,
            nombre: "The Fat Bears",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/xyzeiUqUdqk",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp"            
        },
        gottohouse: {
            id: 3,
            nombre: "Gotto House",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/V871IYGsa-s?si=5IZbZicl8hXQH4fY",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp"           
        },
        teamcucharita: {
            id: 4,
            nombre: "Team Cucharita",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/V871IYGsa-s?si=5IZbZicl8hXQH4fY",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
           
        },
        fuerzasgayniu: {
            id: 5,
            nombre: "Fuerzas GAYniu",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/AyOtlWnb0As?si=UNrThAPMdLsvKMhj",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
           
        },
            teamfactosarmy: {  
            id: 6,
            nombre: "Team Factos Army",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/0A3Aq-5hp8A?si=xAKrCj8LZpnHMjXG",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        },
        capibarbas: {
            id: 7,
            nombre: "Capibarbas",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/VbRV4WNBzKI?si=ucExX-8kDjsTwULr",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        },
        mitraarmy: {
            id: 9,
            nombre: "Mitra Army",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/CyP8TRkOPZQ?si=q4NARG1st4ZikCc9",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
           
        },
        teamsmash: {
            id: 10,
            nombre: "Team Smash",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/vu9Xz9HSboo?si=0UyVZD6lJHFPZJpO",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        },
        risingrage: {
            id: 11,
            nombre: "Rising Rage",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/PP-mRDeQCrs?si=JF76ZkvOZsFmZreF",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        },
        losnumberone: {
            id: 12,
            nombre: "Los Number One",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/PP-mRDeQCrs?si=JF76ZkvOZsFmZreF",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        },
        teamscofield: {
            id: 13,
            nombre: "Team Scofield",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/PP-mRDeQCrs?si=JF76ZkvOZsFmZreF",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        },
        themosters: {
            id: 14,
            nombre: "The Mosters",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/PP-mRDeQCrs?si=JF76ZkvOZsFmZreF",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        },
        teampakazs: {
            id: 15,
            nombre: "Team Pakazs",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/PP-mRDeQCrs?si=JF76ZkvOZsFmZreF",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        },
        teambrasil: {
            id: 16,
            nombre: "Team Brasil",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/PP-mRDeQCrs?si=JF76ZkvOZsFmZreF",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        },
        bemboys: {
            id: 17,
            nombre: "Bemboys",
            imagen: "https://i.pinimg.com/736x/1c/e5/58/1ce558bc1e8318d817235b87be579dfb.jpg",
            video: "https://www.youtube.com/embed/PP-mRDeQCrs?si=JF76ZkvOZsFmZreF",
            mapa: "https://media.cyberscore.live/static/teams/2025/6/cb8f3788-8005-411b-b5a4-360e5cbaf3a7.webp",
            
        }

    }
};

function App() {
    const [currentView, setCurrentView] = React.useState('bolivia');
    
    const renderMainPage = () => (
        <div>
            
           <div className="video-hero-wrapper">

  <video 
    className="video-hero-bg"
    autoPlay 
    loop 
    muted 
    playsInline
    poster="/img/poster.jpg" 
  >
    <source src="https://cdn.steamstatic.com/apps/dota2/videos/dota_react/homepage/dota_montage_webm.webm" type="video/webm" />
    
  </video>

  <div className="video-hero-overlay"></div>

  <div className="video-hero-content">
    <h1 className="video-hero-title">
      EL GRAN COLISEO DE BENJAZ <br/>II
    </h1>
    
  </div>

</div>
        {/*     
            <dl class="film-contest-page__prize-list">
                        <div class="film-contest-page__prize-card  film-contest-page__prize-card--primary ">
                            <dt>$10000</dt>
                            <dd>1.er lugar</dd>
                        </div>
                        <div class="film-contest-page__prize-card ">
                            <dt>$5000</dt>
                            <dd>2.º lugar</dd>
                        </div>
                        <div class="film-contest-page__prize-card ">
                            <dt>$3000</dt>
                            <dd>3.er lugar</dd>
                        </div>
             </dl>
        */} 
 <br/>
  <br/>
<div className="video-hero-title2"> <h2>100.000 Soles en premios </h2> </div>
<br/>
 <br/>
  <br/>
            <div className="split-media-layout">
  
  <div className="split-media-main">
   
    <video className="split-media-gif" autoPlay loop muted playsInline>
      <source src="https://cdn.steamstatic.com/apps/dota2/videos/dota_react/heroes/renders/alchemist.webm?undefined" type="video/webm" />
    </video> 
    
  </div>

  

  
  <nav className="split-media-nav">
    <ul className="split-media-nav-list">
      <li>
        <button className="split-media-nav-card" onClick={() => setCurrentView('teams')}>
          <img className="split-media-nav-icon" src="https://cdn-icons-png.flaticon.com/512/2674/2674996.png" alt="" />
          <span className="split-media-nav-label">EQUIPOS</span>
        </button>
      </li>
      <li>
        <button className="split-media-nav-card" onClick={() => setCurrentView('grupos')}>
          <img className="split-media-nav-icon" src="https://png.pngtree.com/png-clipart/20250415/original/pngtree-vs-battle-png-image_20770212.png" alt="" />
          <span className="split-media-nav-label">FASE DE GRUPOS</span>
        </button>
      </li>
      <li>
        <button className="split-media-nav-card" onClick={() => setCurrentView('playoffs')}>
          <img className="split-media-nav-icon" src="https://png.pngtree.com/png-clipart/20250421/original/pngtree-cross-icon-wrong-sign-vector-with-transparent-background-png-image_20826131.png" alt="" />
          <span className="split-media-nav-label">PLAY OFFS</span>
        </button>
      </li>
      <li>
        <button className="split-media-nav-card" onClick={() => setCurrentView('coliseopasado')}>
          <img className="split-media-nav-icon" src="https://cdn-icons-png.flaticon.com/512/61/61469.png" alt="" />
          <span className="split-media-nav-label">COLISEO PASADO</span>
        </button>
      </li>
      <li>
        <button className="split-media-nav-card" onClick={() => setCurrentView('organizadores')}>
          <img className="split-media-nav-icon" src="https://cdn-icons-png.flaticon.com/512/2674/2674996.png" alt="" />
          <span className="split-media-nav-label">ORGANIZADORES</span>
        </button>
      </li>
    </ul>
  </nav>
  <br/>
  <br/>
</div>
                    
          
            <br/>  
             <br/>  
            
            <div className="media-container">
                <div className="video-container">
                    <iframe 
                        src={boliviaData.general.video2}
                        title="Video de Bolivia"
                        allowFullScreen
                    ></iframe>
                </div>
                <div className="video-container">
                    <iframe 
                        src={boliviaData.general.video}
                        title="Video de Bolivia"
                        allowFullScreen
                    ></iframe>
                </div>
              
                

            </div>
            <br/>
            <div className="letras" >
                Cada día, millones de jugadores en el mundo batallan como uno de los más de cien héroes de Dota en un enfrentamiento por equipos de 5 contra 5. Dota es el juego de estrategia en tiempo real de acción multijugador más profundo jamás creado, con nuevas estrategias para descubrir. Jugar a Dota es y será siempre gratis. Empieza ya a defender tu Ancestro.
                
                </div>


        </div>
    );
    
    const renderDepartmentPage = (deptoKey) => {
        const depto = boliviaData.departamentos[deptoKey];
        
        return (
            <div>
                <button 
                    className="btn back-btn"
                    onClick={() => setCurrentView('bolivia')}
                >
                    ← Volver al menu principal
                </button>
                <br />
                <button 
                    className="btn back-btn"
                    onClick={() => setCurrentView('teams')}
                >
                    ← Volver a equipos
                </button>
                
                <h2>{depto.nombre}</h2>

                

                <img 
                    src={depto.imagen} 
                    alt={`Mapa de ${depto.nombre}`} 
                    className="sub-image"
                />
                
                

                <div className="info-section">
                    <div className="info-grid">
                        <div className="info-item">
                            <h3>pagina en desarrollo</h3>
                        </div>
                        
                        
                    </div>
                </div>
                
                
                
            </div>
        );
    };

    const renderTeams = () => (
        
            <div>      
                 <button  
                 className="btn"
                 onClick={() => setCurrentView('bolivia')}>
                 ← Volver al menu principal
                 </button>

                

                <div className="botones-grid">
                  {Object.keys(boliviaData.departamentos).map(depto => (
                     <button 
                       key={depto} 
                       className="boton-imagen"
                       onClick={() => setCurrentView(depto)}
                     >
                     <img src={boliviaData.departamentos[depto].imagen} />
                     <h4 className="boton-imagennombre">{boliviaData.departamentos[depto].nombre}</h4>
                     </button>

      ))}
    </div>

            </div>
    );

    const renderGrupos = () => (
        
            <div>      
                 <h2>Fase de Grupos</h2>
                 <button  
                 className="btn"
                 onClick={() => setCurrentView('bolivia')}>
                 ← Volver al menu principal
                 </button>
                 <p>pagina en desarrollo mis kongs</p>
            </div>
    );

    const renderPlayOffs = () => (
        
            <div>      
                 <h2>Play Offs</h2>
                 <button  
                 className="btn"
                 onClick={() => setCurrentView('bolivia')}>
                 ← Volver al menu principal
                 </button>
                 <p>pagina en desarrollo mis kongs</p>
            </div>
    );

    const renderColiseoPasado = () => (
        
            <div>      
                 <h2>Coliseo Pasado</h2>
                 <button  
                 className="btn"
                 onClick={() => setCurrentView('bolivia')}>
                 ← Volver al menu principal
                 </button>
                 <p>pagina en desarrollo mis kongs</p>
            </div>
    );

    const organizadores = () => (
        
            <div>      
                 <h2>Organizadores</h2>
                 <button  
                 className="btn"
                 onClick={() => setCurrentView('bolivia')}>
                 ← Volver al menu principal
                 </button>
                 <p>pagina en desarrollo mis kongs</p>
            </div>
    );

    
    
    return (
        <div className="container">
            
            
            <main>
                {
                currentView === 'bolivia'? renderMainPage() :
                currentView === 'teams'? renderTeams() :
                currentView === 'grupos'? renderGrupos() :
                currentView === 'playoffs'? renderPlayOffs() :
                currentView === 'coliseopasado'? renderColiseoPasado() :
                currentView === 'organizadores'? organizadores() :
                renderDepartmentPage(currentView)
                }
            </main>
            
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));