@extends('layouts.landinglayout')

@section('css')

@endsection

@section('content')
{{-- Hero Section --}}
<section id="hero" class="relative w-full flex flex-col md:flex-row">
    <div class="md:w-6/12 mb-8 lg:mb-0">
        <div class="relative mt-12 lg:mt-8 px-6 lg:px-20 text-wrap-title">
            <h1 class="pt-6 md:pt-11 2xl:pt-28  font-display3 leading-normal font-black lg:leading-[5rem] text-black">
                <div class="inline-block py-1.5 px-4 text-sm font-normal font-sans bg-yellowCustom text-white rounded-full"
                    data-aos="fade-up" data-aos-duration="1000">
                    {{ $konten->sub_kategori }} <br>
                </div>
                <div data-aos="fade-up" data-aos-duration="1500" class="category-text lg:-mt-3 break-normal">
                    {{ $konten->judul }}
                </div>
            </h1>
            {{-- <div class="mt-4 inline-flex items-end gap-2 rounded-full bg-white shadow-custom py-2 px-5">
                <span class="text-lg">Rp.</span>
                <h3
                    class="font-display font-black bg-gradient-to-b from-primary to-orange-500 bg-clip-text text-transparent text-4xl text-price">
                    {{ $konten->harga }}</h3>
                <span class="text-lg">,-</span>
            </div> --}}
            <p class="pt-4 text-black text-sm md:text-base">Ayo dapatkan
                buku ini sekarang juga!</p>
            <a href="#" class="btn btn-primary-cust  text-lg mt-8 py-4 px-12" data-twe-ripple-init
                data-twe-ripple-color="light">Beli Rp{{ number_format($konten->harga, 0, ',', '.') }}</a>
            <img src="{{asset('images/arrow2.svg')}}" alt="arrow"
                class="absolute right-14 lg:right-[45%] bottom-[10px] animate-bounce">
        </div>
    </div>
    <div class="md:w-6/12">
        <div
            class="relative flex justify-center bg-no-repeat bg-cover rounded-bl-[50px] bg-left-top bg-primary lg:bg-transparent bg-[url('../images/bg-hero-landingpage.png')] h-[400px] md:h-[550px] lg:h-[670px] 2xl:h-[796px]">
            <img src="{{ $konten->cover ? 'https://kubuku.id/api/generic/showCover/' . $konten->kode_konten : asset('images/noimage.jpeg') }}"
                alt="{{ $konten->judul }}"
                class="mt-12 lg:mt-32 h-[300px] lg:h-[400px] rotate-[10deg] rounded-xl shadow-2xl" />
        </div>
    </div>

    <div class="hidden lg:block">
        <a href="#synopsis"
            class="cursor-pointer absolute flex items-center justify-center -bottom-12 lg:bottom-4 left-[22%] md:left-[38%] lg:left-[40%] py-4 px-6 bg-white rounded-full shadow-lg">
            <h3 class="text-black font-semibold">Selengkapnya</h3>
            <i class="ml-3 fa fa-arrow-down text-black"></i>
        </a>
    </div>
</section>
{{-- End Hero Section --}}
{{-- Synopsis Section --}}
<section id="synopsis" class="mt-16 mb-10 relative">
    <img src="{{asset('images/books.png')}}" alt="buku"
        class="absolute left-0 top-10 w-44 md:w-72 lg:w-auto hidden md:block book-synopsis" data-aos="fade-right"
        data-aos-duration="1000" />
    <div class="md:container mx-4 md:mx-auto">
        <div class="flex justify-end">
            <div class="md:mt-10 md:w-6/12 lg:pl-10 md:pr-0">
                <div class="flex justify-center">
                    <div class="relative w-8/12 md:w-full">
                        <h3 class="font-display3 text-center md:text-left text-black font-black text-3xl md:text-4xl z-10"
                            data-aos="fade-up" data-aos-duration="1000">
                            Sinopsis</h3>
                    </div>
                </div>
                <div class="mt-8 space-y-2.5 text-black text-center md:text-left" data-aos="fade-up"
                    data-aos-duration="2000">
                    <p class="text-synopsis">{{$description}}</p>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- End Synopsis Section --}}

<section id="quotes" class="lg:mt-56 lg:container mx-4">
    <div class="h-[300px] lg:h-80 p-4 md:p-10 bg-[#F2F2F2] text-center rounded-3xl">
        <h1 class="mt-4 lg:mt-0 text-3xl md:text-4xl font-display3 font-black text-black" data-aos="fade-up"
            data-aos-duration="1000">
            Kutipan Buku</h1>
        <div class="relative flex justify-center" data-aos="fade-up" data-aos-duration="2000">
            <div class="mt-16 single-item w-full lg:w-1/2">
                <p>🔥 Capek peduli sama hal yang gak penting? Saatnya belajar bersikap bodo amat dengan cara yang
                    waras!
                </p>
                <p>💡 Buku ini bukan tentang jadi lebih baik. Ini tentang jadi jujur terhadap hidup.</p>
                <p>💥 Kalau kamu lelah selalu mencoba menyenangkan semua orang, buku ini adalah tamparan yang kamu
                    butuhkan.</p>
                <p>🧠 Mark Manson menyajikan filosofi hidup dalam bahasa yang blak-blakan, jujur, dan menyegarkan.
                </p>
            </div>
            <img src="{{asset('images/quotes-1.svg')}}" alt="quotes" class="absolute left-0 lg:left-[20%] top-6">
            <img src="{{asset('images/quotes-2.svg')}}" alt="quotes" class="absolute right-0 lg:right-[20%] bottom-6">
        </div>
    </div>
    <div class="mt-8 mb-24 flex justify-center relative" data-aos="fade-up" data-aos-duration="1000">
        <img src="{{asset('images/arrow1.svg')}}" alt="arrow"
            class="absolute -left-1 md:left-44 lg:left-[35%] top-[45px] animate-bounce duration-200">
        <img src="{{asset('images/arrow2.svg')}}" alt="arrow"
            class="absolute -right-1 md:right-44 lg:right-[35%] top-[15px] animate-bounce duration-2000">
        <a href="#" class="btn btn-primary-cust  text-lg mt-8 py-4 px-12" data-twe-ripple-init
            data-twe-ripple-color="light">Beli Rp{{ number_format($konten->harga, 0, ',', '.') }}</a>
    </div>
</section>

<section id="version" class="mt-12 mb-10 relative lg:container">
    <h3 class="font-display3 text-center text-black font-black text-3xl md:text-4xl z-10" data-aos="fade-up"
        data-aos-duration="1000">
        Preview Buku</h3>
    <div class="mt-10 flex flex-col lg:flex-row gap-4">
        <!-- Desktop (Laptop) View -->
        <div class="lg:w-9/12 w-full relative hidden lg:block text-center" data-aos="fade-left"
            data-aos-duration="1000">
            <img src="{{ asset('images/macbook.png') }}" alt="macbook" class="w-full h-auto">
            <div class="absolute top-[6.5%] left-[12.6%] w-[75.6%] aspect-[698/436]">
                @if($url_preview_desktop && $url_preview_desktop != "500")
                <iframe src="{{ $url_preview_desktop }}" frameborder="0" class="w-full h-full"
                    onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"></iframe>
                @else
                <div class="w-full h-full bg-gray-100 rounded-md flex items-center justify-center">
                    <p class="text-gray-500">{{ $message }}</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Mobile (iPhone) View -->
        <div class="lg:w-3/12 w-full relative text-center mx-auto block" data-aos="fade-right" data-aos-duration="1500">
            <img src="{{ asset('images/iphone.png') }}" alt="iphone" class="w-full h-auto">
            <div class="absolute top-[7.5%] left-[16%] w-[68%] aspect-[212/464]">
                @if($url_preview_mobile && $url_preview_mobile != "500")
                <iframe src="{{ $url_preview_mobile }}" frameborder="0" class="w-full h-full rounded-2xl"
                    onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"></iframe>
                @else
                <div class="w-full h-full bg-gray-100 rounded-2xl flex items-center justify-center">
                    <p class="text-gray-500 text-sm">{{ $message }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <div class="mt-10 mb-24 flex justify-center relative" data-aos="fade-up" data-aos-duration="1000">
        <img src="{{asset('images/arrow1.svg')}}" alt="arrow"
            class="absolute -left-1 md:left-48 lg:left-[35%] top-[45px] animate-bounce duration-200">
        <img src="{{asset('images/arrow2.svg')}}" alt="arrow"
            class="absolute -right-1 md:right-48 lg:right-[35%] top-[15px] animate-bounce duration-2000">
        <a href="#" class="btn btn-primary-cust text-lg mt-8 py-4 px-12" data-twe-ripple-init
            data-twe-ripple-color="light">Beli Rp{{ number_format($konten->harga, 0, ',', '.') }}</a>
    </div>
</section>
@endsection

@section('scripts')
<script src="{{ asset('plugins/slick/slick.min.js') }}"></script>
<script>
    $(document).ready(function () {
        AOS.init();

        $('.single-item').slick({
            infinite: true,
            dots: true,
            arrows: false,
            autoplay: true,
            autoplaySpeed: 2000,
        });

        const text = $('.category-text').text();
        const countText = text.length;
        // console.log(countText);

        const textSynopsis = $('.text-synopsis').text();
        const countTextSynopsis = textSynopsis.length;
        console.log(countTextSynopsis);

        if (countTextSynopsis < 555) {
            $('.book-synopsis').addClass('book-synopsis-short');
        }

        
        if (countText < 75){
            $('.category-text').addClass('font-short-text');
        } else if (countText >= 75 && countText <= 109) {
            $('.text-wrap-title').addClass('text-wrap-title-middle');
            $('.category-text').addClass('font-middle-text');
        } else {
            $('.text-wrap-title').addClass('text-wrap-title-long');
            $('.category-text').addClass('font-long-text');
        }
    });
</script>
@endsection