<?php
date_default_timezone_set('America/Guayaquil');

// URL de API oficial de TheSportsDB para la Liga Pro Serie A (ID 4686)
$url = "https://www.thesportsdb.com/api/v1/json/3/eventsnextleague.php?id=4686";
$json = @file_get_contents($url);
if (!$json) {
    die("<p style='color:red;text-align:center;'>Error al conectar con TheSportsDB</p>");
}
$data = json_decode($json, true);

$matches = $data['events'] ?? [];
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>⚽ Liga PRO Serie A - Ecuador</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
    margin: 0;
    background: url('https://as2.ftcdn.net/v2/jpg/04/17/36/11/1000_F_417361125_RnrhT3Np0zB0UpeD7QlwuOoyghEGGjBX.jpg') center/cover fixed;
    font-family: 'Poppins', sans-serif;
    color: #fff;
}
.container {
    width: 90%;
    margin: 40px auto;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 16px;
    box-shadow: 0 0 15px rgba(255,255,255,0.1);
    padding: 25px;
    backdrop-filter: blur(6px);
}
h1 {
    text-align: center;
    color: #ffcc00;
    font-size: 26px;
    text-shadow: 0 0 8px #000;
}
.match {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 10px 5px;
    font-size: 17px;
    animation: fadeIn 0.6s ease;
}
.teams {
    flex: 1;
    text-align: left;
}
.time {
    color: #ffcc00;
    font-weight: 600;
    text-align: right;
    min-width: 120px;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
footer {
    text-align: center;
    margin-top: 25px;
    font-size: 13px;
    opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
    <h1>⚽ Liga PRO Serie A - Ecuador</h1>
    <?php
    if (empty($matches)) {
        echo "<p style='text-align:center;'>No hay partidos próximos.</p>";
    } else {
        foreach ($matches as $m) {
            $home = $m['strHomeTeam'];
            $away = $m['strAwayTeam'];
            $dateUTC = $m['dateEvent'] . ' ' . ($m['strTime'] ?? '00:00:00');
            $timestamp = strtotime($dateUTC . ' UTC');
            $localTime = date('d/m H:i', $timestamp); // hora Ecuador
            echo "
            <div class='match'>
                <div class='teams'>{$home} 🆚 {$away}</div>
                <div class='time'>⏰ {$localTime}</div>
            </div>";
        }
    }
    ?>
</div>
<footer>
    🅿🆁🅾🅼🅰🆇 • Fuente oficial: TheSportsDB • Horario: Ecuador (UTC-5)
</footer>
</body>
</html>

