<?php
include('includes/config.php'); 
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontak Kami - Alfateeh Sepatuku</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
body{font-family: Arial, sans-serif; background:#f5f5f5; margin:0; padding:0;}
.header-container{
    background:#1e88e5; color:#fff; padding:20px 0; text-align:center;
}
.header-container h1{margin:0; font-size:2.5rem;}
.nav ul{list-style:none; display:flex; justify-content:center; gap:20px; padding:0; margin:10px 0;}
.nav ul li a{color:#fff; text-decoration:none; font-weight:600; transition:0.3s;}
.nav ul li a:hover{color:#ffeb3b;}
.contact-container{
    max-width:900px; margin:50px auto; padding:30px; background:#fff; border-radius:12px; box-shadow:0 5px 20px rgba(0,0,0,0.1); text-align:center;
}
.contact-container h2{color:#1e88e5; margin-bottom:30px;}
.contact-grid{
    display:flex; flex-wrap:wrap; justify-content:center; gap:25px;
}
.contact-card{
    background:#f1f1f1; border-radius:12px; width:130px; height:130px; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:0.3s; cursor:pointer;
}
.contact-card i{font-size:2.5rem; margin-bottom:10px;}
.contact-card span{font-size:0.9rem; font-weight:600; color:#333; text-align:center;}
.contact-card:hover{transform:translateY(-5px); box-shadow:0 5px 15px rgba(0,0,0,0.2);}
.contact-instagram i{color:#E1306C;}
.contact-tiktok i{color:#000000;}
.contact-youtube i{color:#FF0000;}
.contact-line i{color:#00C300;}
.contact-x i{color:#1DA1F2;}
.contact-telegram i{color:#0088CC;}
.contact-whatsapp i{color:#25D366;}
.contact-facebook i{color:#1877F2;}
.contact-email i{color:#D44638;}
.contact-card span{color:#000;}
.contact-card:hover span{color:#fff;}
.contact-card:hover i{filter: brightness(100%);}
</style>
</head>
<body>

<header class="header-container">
    <h1>Kontak Kami</h1>
    <nav class="nav">
        <ul>
            <li><a href="index.php">Beranda</a></li>
            <li><a href="tentang.php">Tentang Kami</a></li>
            <li><a href="kontak.php">Kontak</a></li>
        </ul>
    </nav>
</header>

<div class="contact-container">
    <h2>Hubungi Kami di Platform Favoritmu</h2>
    <div class="contact-grid">
        <a href="https://www.instagram.com/" target="_blank" class="contact-card contact-instagram">
            <i class="fab fa-instagram"></i>
            <span>Instagram</span>
        </a>
        <a href="https://www.tiktok.com/" target="_blank" class="contact-card contact-tiktok">
            <i class="fab fa-tiktok"></i>
            <span>TikTok</span>
        </a>
        <a href="https://www.youtube.com/" target="_blank" class="contact-card contact-youtube">
            <i class="fab fa-youtube"></i>
            <span>YouTube</span>
        </a>
        <a href="https://line.me/" target="_blank" class="contact-card contact-line">
            <i class="fab fa-line"></i>
            <span>Line</span>
        </a>
        <a href="https://twitter.com/" target="_blank" class="contact-card contact-x">
            <i class="fab fa-x-twitter"></i>
            <span>X / Twitter</span>
        </a>
        <a href="https://t.me/" target="_blank" class="contact-card contact-telegram">
            <i class="fab fa-telegram"></i>
            <span>Telegram</span>
        </a>
        <a href="https://wa.me/" target="_blank" class="contact-card contact-whatsapp">
            <i class="fab fa-whatsapp"></i>
            <span>WhatsApp</span>
        </a>
        <a href="https://www.facebook.com/" target="_blank" class="contact-card contact-facebook">
            <i class="fab fa-facebook"></i>
            <span>Facebook</span>
        </a>
        <a href="mailto:email@alfateeh.com" class="contact-card contact-email">
            <i class="fas fa-envelope"></i>
            <span>Email</span>
        </a>
    </div>
</div>

<footer style="text-align:center; padding:20px; background:#1e88e5; color:#fff;">
    <p>© 2025 AlfateehSepatuku.com - Semua Hak Dilindungi</p>
</footer>

</body>
</html>
