<?= $this->include('layout/header') ?>

<div class="home-modern-wrapper">
    <!-- BACKGROUND GLOW -->
    <div class="glow-home-1"></div>
    <div class="glow-home-2"></div>

    <!-- ================= HERO MODERN ================= -->
    <section class="hero-modern-section">
        <div class="hero-text-modern">
            <div class="hero-badge">Welcome to my Portfolio</div>
            <h1 class="hero-title">
                Abelia <span class="outline-text">Putri</span><br>
                <span class="gradient-text-home">Creative Developer</span>
            </h1>
            <p class="hero-desc">
                Mahasiswa Ilmu Komputer yang gemar mengubah kode menjadi karya, 
                dan mengubah ide menjadi cerita.
            </p>

            <div class="hero-actions">
                <span class="btn-primary-glow">
                    Contact Me <i class="fas fa-arrow-right"></i>
                </span>
                <div class="social-mini">
                    <a href="https://wa.me/6281234567890" target="_blank"><i class="fab fa-whatsapp"></i></a>
                    <a href="https://www.instagram.com/ablaptri.15" target="_blank"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.facebook.com/abelia.putri.3954" target="_blank"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://www.wattpad.com/user/Biebellove" target="_blank"><img src="https://simpleicons.org/icons/wattpad.svg" style="width:16px; filter: invert(1);"></a>
                </div>
            </div>
        </div>

        <div class="hero-visual-modern">
            <div class="profile-card-floating">
                <img src="<?= base_url('img/hero/profile.png') ?>" class="profile-main-img" alt="Abelia Profile">
                <div class="floating-badge badge-1">
                    <i class="fas fa-code"></i> Developer 
                </div>
                <div class="floating-badge badge-2">
                    <i class="fas fa-pen-nib"></i> Writer
                </div>
            </div>
        </div>
    </section>

    <!-- ================= BENTO GRID CONTENT ================= -->
    <section class="bento-grid-section">
        
        <!-- CARD 1: ABOUT (Large) -->
        <div class="bento-card span-2 highlight-card">
            <div class="card-icon"><i class="fas fa-user-astronaut"></i></div>
            <h3>Tentang Saya</h3>
            <p>
                Saya mahasiswa Universitas Yatsi Madani, prodi Ilmu Komputer, fakultas Teknologi dan Bisnis. 
                Dunia saya berputar antara logika kode dan imajinasi cerita. 
                Saat tidak ada bug yang harus diperbaiki, saya menulis novel romansa.
            </p>
            <div class="action-row">
                <a href="<?= base_url('/biodata') ?>" class="link-arrow">Lihat Biodata <i class="fas fa-long-arrow-alt-right"></i></a>
            </div>
        </div>

        <!-- CARD 2: SKILLS (Small - Keahlian Style) -->
        <div class="bento-card span-1">
            <div class="card-icon"><i class="fas fa-code"></i></div>
            <h3>Keahlian</h3>
            <div class="skills-container">
                <span class="skill-pill"><i class="fab fa-html5"></i> HTML</span>
                <span class="skill-pill"><i class="fab fa-css3-alt"></i> CSS</span>
                <span class="skill-pill"><i class="fab fa-php"></i> PHP</span>
                <span class="skill-pill"><i class="fab fa-js"></i> JavaScript</span>
                <span class="skill-pill"><i class="fab fa-python"></i> Python</span>
                <span class="skill-pill"><i class="fas fa-pen-nib"></i> UI/UX</span>
            </div>
        </div>

        <!-- CARD 3: SUMMARY -->
        <div class="bento-card span-1">
            <div class="card-icon"><i class="fas fa-bolt"></i></div>
            <h3>Ringkasan</h3>
            <p>
                Website ini adalah portfolio digital saya, sebagai tugas akhir yang menjadi awal perjalanan profesional saya di dunia web development.
            </p>
        </div>

        <!-- CARD 4: HOBBIES -->
        <div class="bento-card span-1 hobby-card">
            <h3>Hobi & Minat</h3>
            <ul class="hobby-list">
                <li><i class="fas fa-book-open"></i> Membaca Novel</li>
                <li><i class="fas fa-pen-fancy"></i> Menulis Cerita</li>
                <li><i class="fas fa-swimmer"></i> Berenang</li>
            </ul>
        </div>

        <!-- CARD 5: CTA ACTIVITY -->
        <div class="bento-card span-3 cta-card">
            <div class="cta-content">
                <h3>Jurnal Aktivitas</h3>
                <p>Lihat dokumentasi perjalanan dan momen berharga saya.</p>
            </div>
            <a href="<?= base_url('/aktivitas') ?>" class="btn-circle-arrow"><i class="fas fa-arrow-right"></i></a>
        </div>

    </section>
</div>

<?= $this->include('layout/footer') ?>
