@extends('layouts.frontend.master')

@section('content')
    @php
        $p = 'setting.home';
        $heroKey = "$p.hero";
        $poesakaKey = "$p.poesaka";
        $visiKey = "$p.visi_misi";
        $heroImage = settings()->get("$heroKey.image");
        $heroLink = str_parse(settings()->get("$poesakaKey.button_link"));
        $poesakaButtonText = (string) settings()->get("$poesakaKey.button_text");
        $poesakaButtonAction = strtolower($poesakaButtonText . ' ' . $heroLink);
        $poesakaButtonInstallsPwa = str_contains($poesakaButtonAction, 'install') || str_contains($poesakaButtonAction, 'pwa');
        $heroVideoLink = settings()->get("$heroKey.video_link");
        $anim = 1;
    @endphp

    @if (settings()->get("$heroKey.visible"))
        <section data-anim-wrap class="masthead -type-4 bg-light-6 animated pt-30" style="margin-top: 0">
            <div class="container pt-60">
                <div class="row justify-center items-center y-gap-30">
                    <div class="col-xl-5 col-lg-6">
                        <div class="masthead__content pb-50">
                            <div class="text-15 fw-500 text-purple-1 mb-10" data-anim-child="slide-up delay-{{ $anim++ }}">
                                TOMCHAT WEB MESSAGING
                            </div>
                            <h1 data-anim-child="slide-up delay-{{ $anim++ }}" class="masthead__title">
                                {{ settings()->get("$heroKey.title") }}
                            </h1>
                            <p data-anim-child="slide-right delay-{{ $anim++ }}" class="masthead__text pt-15">
                                {!! settings()->get("$heroKey.sub_title") !!}
                            </p>

                            @if ($heroVideoLink)
                                <div class="col-auto mt-20" data-anim-child="slide-right delay-{{ $anim++ }}">
                                    <a href="{{ $heroVideoLink }}" class="d-flex items-center js-gallery"
                                        data-gallery="gallery1">
                                        <div class="d-flex justify-center items-center size-60 rounded-full border-dark-1-lg">
                                            <div class="icon-play text-20 text-dark-1 pl-5"></div>
                                        </div>
                                        <div class="ml-10">{{ settings()->get("$heroKey.video_title") }}</div>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-6">
                        <div data-anim-child="slide-left delay-{{ $anim++ }}" class="masthead__image">
                            @if ($heroImage)
                                <img class="lazy" data-src="{{ asset($heroImage) }}" alt="tomCHAT hero"
                                    style="position: relative; max-width: 600px;">
                            @else
                                <div class="rounded-16 bg-white shadow-4 p-40">
                                    <div class="text-17 fw-500 text-dark-1">tomCHAT siap dipakai lewat browser.</div>
                                    <p class="text-15 text-light-1 mt-10 mb-0">
                                        Daftar anggota, ruang obrolan, panel admin, dan pengelolaan grup sekarang jadi fokus utama aplikasi ini.
                                    </p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if (settings()->get("$poesakaKey.visible"))
        <section class="layout-pt-md layout-pb-md" style="background-color: #bfcae6;" data-anim-wrap>
            <div class="container">
                <div class="row y-gap-20 justify-between items-center">
                    <div class="col-xl-7 col-lg-8">
                        <h2 class="text-30 lh-15 text-white" data-anim-child="slide-right delay-{{ $anim++ }}">
                            {!! settings()->get("$poesakaKey.title") !!}
                        </h2>
                    </div>

                    <div class="col-auto" data-anim-child="slide-left delay-{{ $anim++ }}">
                        @if ($poesakaButtonInstallsPwa)
                            <button type="button"
                                class="button -md -outline-dark-1 -rounded text-dark-1 tomchat-install-manual"
                                data-tomchat-install
                                data-install-register-url="{{ route('register') }}"
                                data-install-login-url="{{ route('login') }}"
                                data-install-app-url="{{ route('tomchat.app') }}">
                                {{ $poesakaButtonText }}
                            </button>
                        @else
                            <a href="{{ $heroLink ?: route('register') }}"
                                class="button -md -outline-dark-1 -rounded text-dark-1">
                                {{ $poesakaButtonText }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if (settings()->get("$visiKey.visible"))
        <section id="tentang-tomchat" class="layout-pt-lg layout-pb-lg" data-anim-wrap>
            <div class="container">
                <div class="row y-gap-30 justify-between items-center">
                    <div class="col-lg-6" data-anim-child="slide-right delay-{{ $anim++ }}">
                        @if ($heroImage)
                            <img class="w-1/1 lazy" data-src="{{ asset($heroImage) }}" alt="Tentang tomCHAT"
                                style="max-width: 500px; border-radius: 24px;">
                        @else
                            <div class="rounded-16 bg-light-4 shadow-4 p-40">
                                <div class="text-24 fw-700 text-dark-1">tomCHAT untuk obrolan yang lebih dekat.</div>
                                <p class="sectionTitle__text mt-20 mb-0">
                                    Fokus tomCHAT sekarang adalah percakapan cepat, pengelolaan grup anggota, dan moderasi admin yang rapi langsung dari browser.
                                </p>
                            </div>
                        @endif
                    </div>

                    <div class="col-xl-5 col-lg-6 col-md-9" data-anim-child="slide-left delay-{{ $anim++ }}">
                        <h3 class="text-24 lh-15">{{ settings()->get("$visiKey.title") }}</h3>
                        <p class="sectionTitle__text">{!! settings()->get("$visiKey.sub_title") !!}</p>

                        <div class="rounded-16 bg-light-4 p-25 mt-25">
                            <h3 class="text-18 lh-15">{{ settings()->get("$visiKey.visi") }}</h3>
                            <p class="sectionTitle__text mb-0">
                                tomCHAT dirancang sebagai ruang komunikasi yang cepat, ringan, dan mudah dipakai semua anggota langsung dari browser.
                            </p>
                        </div>

                        <div class="rounded-16 bg-light-4 p-25 mt-20">
                            <h3 class="text-18 lh-15">{{ settings()->get("$visiKey.misi") }}</h3>
                            <ul class="list-disc ml-20 mt-15 mb-0 text-dark-1">
                                <li>Memudahkan anggota saling menemukan dan memulai obrolan.</li>
                                <li>Menyediakan panel admin untuk monitoring, moderasi, dan pengelolaan grup.</li>
                                <li>Menjaga pengalaman chat tetap nyaman di desktop, tablet, dan perangkat mobile.</li>
                            </ul>
                        </div>

                        <p class="sectionTitle__text mt-25 mb-0">{{ settings()->get("$visiKey.semboyan") }}</p>
                    </div>
                </div>
            </div>
        </section>
    @endif

@endsection