<?php include 'koneksi.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head><link rel="icon" href="upload/bn2.png" type="image/png">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hubungi Kami | Smk Budiniah 2</title>
    <style>
        body{
            margin: 0;
            font-family: 'Times New Roman', Times, serif;
        }
        .hero-caption{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-top: 10%;
            padding-left: 5%;
            padding-right: 5%;
        }
        .hero-caption h1{
            font-size: 60px;
            font-weight: 700;
        }
        .info-alamat{
            margin-top:10%;
            padding-left: 5%;
            padding-right: 5%;
        }
        .info-alamat.card {
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .grid-container {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 30px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-caption h1 {
                font-size: 40px;
            }
            .hero-caption {
                margin-top: 20%;
                padding-left: 10%;
                padding-right: 10%;
            }
            .info-alamat {
                margin-top: 20%;
                padding-left: 10%;
                padding-right: 10%;
            }
            .grid-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .map-section.card, .other-info-section.card {
                padding: 10px;
            }
            .map-section iframe {
                height: 250px;
            }
            .other-info p {
                font-size: 14px;
                gap: 15px;
            }
        }

        @media (max-width: 480px) {
            .hero-caption h1 {
                font-size: 30px;
            }
            .hero-caption {
                margin-top: 30%;
                padding-left: 5%;
                padding-right: 5%;
            }
            .info-alamat {
                margin-top: 30%;
                padding-left: 5%;
                padding-right: 5%;
            }
            .info-alamat.card {
                padding: 15px;
            }
            .map-section iframe {
                height: 200px;
            }
            .other-info p {
                font-size: 12px;
                gap: 10px;
            }
        }
        .map-section.card, .other-info-section.card {
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            padding: 15px;
        }
        .map-section iframe {
            width: 100%;
            border: none;
            border-radius: 10px;
        }
        .other-info p {
            display: flex;
            align-items: center;
            font-size: 16px;
            gap: 25px;
            margin-bottom: 10px;
        }
        .other-info a{
            text-decoration: underline;
            color: #333;
        }
        .other-info a:hover{
            color: #0f62fe;
        }
        .other-info p strong {
            font-weight: bold;
        }
        .other-info p .detail {
            color: #333;
            font-weight: 500;
        }
        .info-item {
            display: flex;
            flex-direction: column;
            margin-bottom: 15px;
        }
        .info-item i {
            margin-bottom: 5px;
        }
        .info-item h1 {
            margin-bottom: 5px;
            font-size: 18px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <?php require "navbar.php" ?>
    <div class="hero-caption">
        <h1>Hubungi Kami</h1>
    </div>
    <div class="info-alamat card">
    <div class="grid-container">
        <?php
        $query = "SELECT * FROM tb_alamat";
        $result = mysqli_query($host,$query);
        $row = mysqli_fetch_assoc($result);
        $map = $row['iframe'];
        $nomor = $row['nomor_sekolahh'];
        $alamat = $row['alamat'];
        $whatsapp = $row['nomor_whatsapp'];
        $email = $row['email'];
        $instagram = $row['link_instagram'];
        $youtube = $row['link_youtube'];
        ?>
        <div class="map-section card">
            <?php echo $map; ?>
        </div>
        <div class="other-info-section card">
            <div class='other-info'>
                <?php
                if (!empty($alamat)) {
                    echo "<div class='info-item'><i class='bi bi-geo-alt-fill'></i><h1>Alamat:</h1><span class='detail'>$alamat</span></div>";
                }
                if (!empty($nomor)) {
                    echo "<div class='info-item'><i class='bi bi-telephone-fill'></i><h1>Telepon:</h1><span class='detail'>$nomor</span></div>";
                }
                if (!empty($whatsapp)) {
                    echo "<div class='info-item'><i class='bi bi-whatsapp'></i><h1>WhatsApp:</h1><span class='detail'>$whatsapp</span></div>";
                }
                if (!empty($email)) {
                    echo "<div class='info-item'><i class='bi bi-envelope-fill'></i><h1>Email:</h1><span class='detail'>$email</span></div>";
                }
                if (!empty($instagram)) {
                    echo "<div class='info-item'><i class='bi bi-instagram'></i><h1>Instagram:</h1><span class='detail'><a href='$instagram'>officialsmkbudiniah2</a></span></div>";
                }
                if (!empty($youtube)) {
                    echo "<div class='info-item'><i class='bi bi-youtube'></i><h1>YouTube:</h1><span class='detail'><a href='$youtube'>smk budiniah 2</a></span></div>";
                } else {
                    echo "<div class='info-item'>data tidak ditemukan</div>";
                }
                ?>
            </div>
        </div>
    </div>
</div>

    <?php require "footer.php" ?>
</body>
</html>
