@extends('layouts.guest')

@section('content')
    <main class="homepage-main-content">
        <!-- First Row: Large Image -->
        <section class="hero-full-section" style="width:100%;height:100vh;flex-shrink:0;overflow:hidden;">
            <div class="homepage-image-container" style="width:100%;height:100vh;position:relative;overflow:hidden;">
                <img src="{{ asset('storage/cover_in.png') }}" alt="Cover Image" class="homepage-image"
                    style="width:100%;height:100vh;object-fit:cover;display:block;" />
                <h1 class="homepage-overlay-text">
                    @if (Session::get('lang', 'en') == 'en')
                        Our brand guidelines ensure every communication remains consistent, professional, and a true
                        reflection of
                        our company's identity
                    @else
                        Pedoman merek kami memastikan setiap komunikasi tetap konsisten, profesional, dan benar-benar
                        mencerminkan
                        identitas perusahaan kami
                    @endif
                </h1>
            </div>
        </section>

        <!-- Third Row: Vision and Mission -->
        <section class="vision-mission-section" data-aos="fade-up" data-aos-duration="1400">
            <div class="vision-mission-grid">
                <div class="vision-card" data-aos="fade-up" data-aos-delay="100">
                    <h2>{{ Session::get('lang', 'en') == 'en' ? 'Vision' : 'Visi' }}</h2>
                    <p>
                        @if (Session::get('lang', 'en') == 'en')
                            To be the people’s daily-life solution corporation.
                        @else
                            Menjadi perusahaan yang memberikan solusi dalam memenuhi kebutuhan hidup sehari-hari
                            masyarakat.
                        @endif
                    </p>
                </div>
                <div class="mission-card" data-aos="fade-up" data-aos-delay="200">
                    <h2>{{ Session::get('lang', 'en') == 'en' ? 'Mission' : 'Misi' }}</h2>
                    <ul>
                        @if (Session::get('lang', 'en') == 'en')
                            <li>Provide the right quality and environmentally friendly products, for an extraordinary
                                customer
                                experience.</li>
                            <li>Develop human competence and character under good corporate governance.</li>
                            <li>Build a harmonious community that symbolizes productivity, creativity and perseverance
                                for sustainable
                                legacy.</li>
                        @else
                            <li>Memberikan kualitas yang tepat dan produk ramah lingkungan, untuk pengalaman pelanggan
                                yang luar
                                biasa.</li>
                            <li>Mengembangkan kompetensi dan karakter manusia dibawah tata Kelola perusahaan yang baik.
                            </li>
                            <li>Membangun komunitas yang harmonis yang melambangkan tentang produktivitas, kreativitas
                                dan ketekunan
                                untuk warisan yang berkelanjutan.</li>
                        @endif
                    </ul>
                </div>
            </div>
        </section>

        <!-- Fourth Row: Cards -->
        <section class="navigation-cards" data-aos="fade-up" data-aos-duration="1600">
            <div class="card-grid">
                <a href="{{ url('/brand') }}" class="nav-card" data-aos="fade-up" data-aos-delay="100">
                    <div class="nav-card-image">
                        <img src="{{ asset('storage/Homepage_brand.png') }}" alt="Brand">
                    </div>
                    <div class="nav-card-content">
                        <h3>{{ Session::get('lang', 'en') == 'en' ? 'BRAND' : 'MEREK' }}</h3>
                        <p>
                            @if (Session::get('lang', 'en') == 'en')
                                Explore our brand logos and usage guidelines
                            @else
                                Jelajahi logo merek dan panduan penggunaan
                            @endif
                        </p>
                    </div>
                </a>

                <a href="{{ url('/typography') }}" class="nav-card" data-aos="fade-up" data-aos-delay="200">
                    <div class="nav-card-image">
                        <img src="{{ asset('storage/Homepage_typography.png') }}" alt="Typography">
                    </div>
                    <div class="nav-card-content">
                        <h3>{{ Session::get('lang', 'en') == 'en' ? 'TYPOGRAPHY' : 'TIPOGRAFI' }}</h3>
                        <p>
                            @if (Session::get('lang', 'en') == 'en')
                                Discover typography style and rules
                            @else
                                Temukan gaya dan aturan tipografi
                            @endif
                        </p>
                    </div>
                </a>
                <a href="{{ url('/document') }}" class="nav-card" data-aos="fade-up" data-aos-delay="300">
                    <div class="nav-card-image">
                        <img src="{{ asset('storage/Homepage_document.png') }}" alt="Document">
                    </div>
                    <div class="nav-card-content">
                        <h3>{{ Session::get('lang', 'en') == 'en' ? 'DOCUMENT' : 'DOKUMEN' }}</h3>
                        <p>
                            @if (Session::get('lang', 'en') == 'en')
                                Acces important brand document and templates
                            @else
                                Akses dokumen dan template merek yang penting
                            @endif
                        </p>
                    </div>
                </a>
                <a href="{{ url('/visual-component') }}" class="nav-card" data-aos="fade-up" data-aos-delay="400">
                    <div class="nav-card-image">
                        <img src="{{ asset('storage/Homepage_visual component.png') }}" alt="Visual Component">
                    </div>
                    <div class="nav-card-content">
                        <h3>{{ Session::get('lang', 'en') == 'en' ? 'VISUAL COMPONENT' : 'KOMPONEN VISUAL' }}</h3>
                        <p>
                            @if (Session::get('lang', 'en') == 'en')
                                View visual and design elements
                            @else
                                Lihat komponen visual dan elemen desain
                            @endif
                        </p>
                    </div>
                </a>
                <a href="{{ url('/mockup') }}" class="nav-card" data-aos="fade-up" data-aos-delay="500">
                    <div class="nav-card-image">
                        <img src="{{ asset('storage/MUG_HOMEPAGE.png') }}" alt="Mockup">
                    </div>
                    <div class="nav-card-content">
                        <h3>{{ Session::get('lang', 'en') == 'en' ? 'MOCKUP' : 'MOCKUP' }}</h3>
                        <p>
                            @if (Session::get('lang', 'en') == 'en')
                                See brand mockups and presentations
                            @else
                                Lihat mockup dan presentasi merek
                            @endif
                        </p>
                    </div>
                </a>
            </div>
        </section>
    </main>

    <script>
        // Initialize AOS
        document.addEventListener('DOMContentLoaded', function() {
            AOS.init({
                offset: 120,
                delay: 0,
                duration: 800,
                easing: 'ease',
                once: false,
                mirror: false,
                anchorPlacement: 'top-bottom',
            });
        });
    </script>

    <style>
        /* Main Content */
        .homepage-main-content {
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            background-color: var(--main-light-color);
            background-image: url('{{ asset('storage/BG website.png') }}');
            background-attachment: fixed;
            background-size: cover;
            background-repeat: repeat;
            background-position: center;
            display: flex;
            flex-direction: column;
            padding-bottom: 0;
            margin-bottom: 0;
        }

        @media (max-width: 768px) {
            .hero-full-section {
                flex: 0 0 100vh !important;
                height: 100vh !important;
            }
        }

        .vision-card p {
            font-size: 1.5rem;
            /* teks paragraf agak dibesarkan (kira2 17–18px) */
            line-height: 1.6;
        }
    </style>
@endsection