<!DOCTYPE html>
<html>
<head>
    <title>Wisata Raja Ampat</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

    <style>

        /* ===== KURSOR IKAN ===== */
        * {
            cursor: none !important;
        }

        #fish-cursor {
            position: fixed;
            pointer-events: none;
            font-size: 28px;
            z-index: 999999;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            user-select: none;
            filter: drop-shadow(0 2px 6px rgba(0, 100, 200, 0.4));
        }

        .fish-bubble {
            position: fixed;
            pointer-events: none;
            border-radius: 50%;
            border: 1.5px solid rgba(100, 200, 255, 0.5);
            z-index: 999998;
            animation: fishBubbleUp 0.8s ease-out forwards;
        }

        @keyframes fishBubbleUp {
            0%   { opacity: 0.7; transform: scale(1) translateY(0); }
            100% { opacity: 0;   transform: scale(1.8) translateY(-35px); }
        }

        /* ===== GLOBAL FONT ===== */
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
        }

        /* ===== SPLASH SCREEN ===== */
        #splash {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: linear-gradient(135deg, #031d2e 0%, #0a3d55 50%, #031d2e 100%);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        #splash.hide {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .splash-content {
            text-align: center;
            animation: splashFadeIn 1s ease forwards;
        }

        .splash-logo {
            font-size: 60px;
            color: #d4a843;
            animation: spinSlow 3s linear infinite;
            display: inline-block;
            margin-bottom: 10px;
            filter: drop-shadow(0 0 20px rgba(212,168,67,0.5));
        }

        .splash-title {
            font-family: 'Poppins', sans-serif;
            font-size: 52px;
            font-weight: 700;
            color: white;
            letter-spacing: 4px;
            margin: 0;
        }

        .splash-sub {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            letter-spacing: 8px;
            text-transform: uppercase;
            color: #00b4d8;
            margin-top: 5px;
            margin-bottom: 30px;
        }

        .splash-bar {
            width: 200px;
            height: 2px;
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            margin: 0 auto 15px;
            overflow: hidden;
        }

        .splash-progress {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #00b4d8, #d4a843);
            border-radius: 10px;
            animation: loadBar 2.5s ease forwards;
        }

        .splash-loading {
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.5);
        }

        @keyframes splashFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes spinSlow {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }

        @keyframes loadBar {
            0%   { width: 0%; }
            100% { width: 100%; }
        }

        /* ===== HERO 3D ===== */
        .hero {
            perspective: 1200px;
            overflow: hidden;
            position: relative;
        }

        .hero-inner {
            transform-style: preserve-3d;
            transition: transform 0.15s ease;
            will-change: transform;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0; left: 0;
        }

        .hero-glare {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 2;
        }

        .hero:hover .hero-glare {
            opacity: 1;
        }

        .hero-content {
            position: relative;
            z-index: 3;
            transform: translateZ(60px);
            opacity: 0;
            animation: heroFadeIn 1.2s ease 3.2s forwards;
        }

        @keyframes heroFadeIn {
            from { opacity: 0; transform: translateY(30px) translateZ(60px); }
            to   { opacity: 1; transform: translateY(0)   translateZ(60px); }
        }

        .hero h1 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            letter-spacing: -0.5px;
            text-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }

        .hero p {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            text-shadow: 0 2px 10px rgba(0,0,0,0.4);
        }

        .hero .btn {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            letter-spacing: 1px;
        }

        /* ===== CARD ANIMASI ===== */
        .card-animate {
            opacity: 0;
            transform: translateY(40px);
            animation: slideUp 0.7s ease forwards;
        }

        .card-animate:nth-child(1) { animation-delay: 3.5s; }
        .card-animate:nth-child(2) { animation-delay: 3.7s; }
        .card-animate:nth-child(3) { animation-delay: 3.9s; }

        @keyframes slideUp {
            to { opacity: 1; transform: translateY(0); }
        }

        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
        }

        .card h3 {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 18px;
        }

        .card p {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            line-height: 1.7;
        }

        /* ===== SECTION LOKASI ===== */
        .lokasi-section {
            background: white;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 60px 0;
        }

        .lokasi-section h2 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            font-size: 38px;
            color: #0a3d55;
        }

        .lokasi-sub {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #aaa;
        }

        .lokasi-item {
            display: flex;
            flex-direction: column;
            margin-bottom: 14px;
        }

        .lokasi-label {
            font-family: 'Inter', sans-serif;
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #00b4d8;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .lokasi-value {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #333;
            line-height: 1.6;
        }

        .peta-wrapper {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
            height: 100%;
            min-height: 450px;
        }

        .peta-wrapper iframe {
            width: 100%;
            height: 100%;
            min-height: 450px;
            border: 0;
            display: block;
        }

        .destinasi-title {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            color: #0a3d55;
            font-size: 24px;
        }

        .destinasi-card {
            border-radius: 10px !important;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .destinasi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
        }

        .destinasi-card strong {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 15px;
            color: #0a3d55;
        }

        .destinasi-card p {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            color: #666;
            line-height: 1.7;
        }

        footer {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
        }

    </style>
</head>

<body>

<!-- KURSOR IKAN -->
<div id="fish-cursor">🐟</div>

<!-- SPLASH SCREEN -->
<div id="splash">
    <div class="splash-content">
        <div class="splash-logo">✦</div>
        <h1 class="splash-title">Raja Ampat</h1>
        <p class="splash-sub">Paradise</p>
        <div class="splash-bar">
            <div class="splash-progress"></div>
        </div>
        <p class="splash-loading">Memuat keindahan...</p>
    </div>
</div>

<?php include 'navbar.php'; ?>

<!-- HERO -->
<div class="hero" id="heroSection">
    <div class="hero-inner" id="heroInner"></div>
    <div class="hero-glare" id="heroGlare"></div>
    <div class="hero-content text-center text-white">
        <h1>Explore Raja Ampat</h1>
        <p>Surga wisata bahari dengan keindahan laut dan pulau eksotis</p>
        <a href="gallery.php" class="btn btn-light btn-lg mt-2">Explore Now</a>
    </div>
</div>

<!-- CONTENT CARD -->
<div class="container mt-5 mb-5">
    <div class="row g-4">

        <div class="col-md-4 card-animate">
            <div class="card p-4 h-100">
                <div style="font-size:36px; margin-bottom:10px;">🏖️</div>
                <h3>Pantai Eksotis</h3>
                <p>Pantai berpasir putih dengan air laut jernih dan pemandangan matahari terbenam yang memukau.</p>
            </div>
        </div>

        <div class="col-md-4 card-animate">
            <div class="card p-4 h-100">
                <div style="font-size:36px; margin-bottom:10px;">🤿</div>
                <h3>Bawah Laut</h3>
                <p>Raja Ampat memiliki terumbu karang indah dan kehidupan laut yang menjadi surga para penyelam.</p>
            </div>
        </div>

        <div class="col-md-4 card-animate">
            <div class="card p-4 h-100">
                <div style="font-size:36px; margin-bottom:10px;">🏝️</div>
                <h3>Pulau Indah</h3>
                <p>Gugusan pulau hijau menciptakan panorama alam yang luar biasa dan tak terlupakan.</p>
            </div>
        </div>

    </div>
</div>

<!-- SECTION LOKASI & PETA -->
<section class="lokasi-section">
<div class="container">

    <h2 class="text-center mb-2">Lokasi Raja Ampat</h2>
    <p class="text-center mb-5 lokasi-sub">Temukan Surga di Ujung Timur Indonesia</p>

    <div class="row g-4 align-items-stretch">

        <!-- INFO LOKASI -->
        <div class="col-md-4">
            <div class="card p-4 h-100">
                <h5 class="mb-3">📍 Informasi Lokasi</h5>
                <hr>
                <div class="lokasi-item">
                    <span class="lokasi-label">Provinsi</span>
                    <span class="lokasi-value">Papua Barat Daya, Indonesia</span>
                </div>
                <div class="lokasi-item">
                    <span class="lokasi-label">Ibu Kota</span>
                    <span class="lokasi-value">Waisai</span>
                </div>
                <div class="lokasi-item">
                    <span class="lokasi-label">Koordinat</span>
                    <span class="lokasi-value">0°14′S, 130°31′E</span>
                </div>
                <div class="lokasi-item">
                    <span class="lokasi-label">Luas Wilayah</span>
                    <span class="lokasi-value">± 46.108 km²</span>
                </div>
                <div class="lokasi-item">
                    <span class="lokasi-label">Jumlah Pulau</span>
                    <span class="lokasi-value">± 1.500 pulau</span>
                </div>
                <div class="lokasi-item">
                    <span class="lokasi-label">Akses Tercepat</span>
                    <span class="lokasi-value">Bandara DEO Sorong → Speedboat ke Waisai (2 jam)</span>
                </div>
                <div class="lokasi-item">
                    <span class="lokasi-label">Waktu Terbaik</span>
                    <span class="lokasi-value">Oktober – April (musim kemarau)</span>
                </div>
            </div>
        </div>

        <!-- PETA GOOGLE MAPS -->
        <div class="col-md-8">
            <div class="peta-wrapper">
                <iframe
                    src="https://maps.google.com/maps?q=Raja+Ampat,+Papua+Barat+Daya,+Indonesia&t=&z=9&ie=UTF8&iwloc=&output=embed"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>

    </div>

    <!-- DESTINASI POPULER -->
    <h5 class="mt-5 mb-4 destinasi-title">🗺️ Destinasi Populer di Raja Ampat</h5>

    <div class="row g-3">

        <div class="col-md-4">
            <div class="card destinasi-card p-3" style="border-left:4px solid #00b4d8;">
                <strong>📍 Wayag Island</strong>
                <p class="mb-0 mt-2">Kepulauan ikonik dengan formasi karst dan air toska — spot foto terbaik Raja Ampat.</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card destinasi-card p-3" style="border-left:4px solid #00b4d8;">
                <strong>📍 Pianemo</strong>
                <p class="mb-0 mt-2">Bukit batu karang dengan panorama 360° kepulauan hijau di lautan biru.</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card destinasi-card p-3" style="border-left:4px solid #00b4d8;">
                <strong>📍 Misool Island</strong>
                <p class="mb-0 mt-2">Pulau terpencil dengan laguna biru zamrud dan gua tersembunyi yang memukau.</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card destinasi-card p-3" style="border-left:4px solid #d4a843;">
                <strong>📍 Teluk Kabui</strong>
                <p class="mb-0 mt-2">Teluk magis dikelilingi hutan mangrove dan tebing karst yang menjulang tinggi.</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card destinasi-card p-3" style="border-left:4px solid #d4a843;">
                <strong>📍 Cape Kri</strong>
                <p class="mb-0 mt-2">Lokasi diving legendaris — rekor dunia 374 spesies ikan dalam satu penyelaman!</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card destinasi-card p-3" style="border-left:4px solid #d4a843;">
                <strong>📍 Pulau Fam</strong>
                <p class="mb-0 mt-2">Surga snorkeling dengan perairan dangkal dan terumbu karang warna-warni.</p>
            </div>
        </div>

    </div>
</div>
</section>

<footer>
    Copyright © 2026 Raja Ampat Tourism
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // ===== SPLASH SCREEN =====
    window.addEventListener('load', () => {
        setTimeout(() => {
            document.getElementById('splash').classList.add('hide');
        }, 3000);
    });

    // ===== HERO 3D TILT =====
    const hero  = document.getElementById('heroSection');
    const glare = document.getElementById('heroGlare');

    hero.addEventListener('mousemove', (e) => {
        const rect    = hero.getBoundingClientRect();
        const centerX = rect.width  / 2;
        const centerY = rect.height / 2;
        const mouseX  = e.clientX - rect.left - centerX;
        const mouseY  = e.clientY - rect.top  - centerY;
        const rotateX = (mouseY / centerY) * -10;
        const rotateY = (mouseX / centerX) *  10;

        hero.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

        const glareX = ((e.clientX - rect.left) / rect.width)  * 100;
        const glareY = ((e.clientY - rect.top)  / rect.height) * 100;
        glare.style.background = `radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.2), transparent 60%)`;
    });

    hero.addEventListener('mouseleave', () => {
        hero.style.transition = 'transform 0.6s ease';
        hero.style.transform  = 'rotateX(0deg) rotateY(0deg)';
        setTimeout(() => { hero.style.transition = ''; }, 600);
    });

    hero.addEventListener('mouseenter', () => {
        hero.style.transition = 'transform 0.1s ease';
    });

    // ===== KURSOR IKAN =====
    const fish = document.getElementById('fish-cursor');
    let prevX = window.innerWidth / 2;

    document.addEventListener('mousemove', (e) => {
        const goLeft = e.clientX < prevX;
        fish.style.left = e.clientX + 'px';
        fish.style.top  = e.clientY + 'px';
        fish.style.transform = `translate(-50%, -50%) scaleX(${goLeft ? -1 : 1})`;
        prevX = e.clientX;

        if (Math.random() < 0.08) {
            const b = document.createElement('div');
            b.className = 'fish-bubble';
            const s = 6 + Math.random() * 10;
            b.style.cssText = `width:${s}px;height:${s}px;left:${e.clientX - s/2}px;top:${e.clientY - s/2}px;`;
            document.body.appendChild(b);
            setTimeout(() => b.remove(), 800);
        }
    });
</script>

</body>
</html>