@extends('layouts/frontend')


@section('content')
    @include('components.frontend.section-slideshow-mobile')
    @include('components.frontend.section-slideshow-desktop')

    <div id="first-section" class="scroll-mt-20"></div>

    <section class="py-16 js-section lg:py-24 xl:py-32">
        <div class="container">
            <div class="relative z-10 flex flex-col gap-2 text-center lg:gap-3 xl:gap-4">
                <div
                    class="js-fade-in-up absolute left-1/2 top-6 z-10 -translate-x-1/2 align-top text-[120px] text-primary/20 lg:top-10 lg:text-[170px] xl:top-14 xl:text-[220px]">
                    ”</div>
                <div class="js-fade-in-up text-base uppercase tracking-[5px] lg:text-lg xl:text-xl">Do it with</div>
                <div
                    class="js-fade-in-up font-heading text-6xl uppercase tracking-[20px] text-primary lg:text-7xl xl:text-8xl">
                    Passion
                </div>
                <div class="js-fade-in-up text-base uppercase tracking-[5px] lg:text-lg xl:text-xl">or not at all</div>
            </div>
        </div>
    </section>


    <section class="py-8 js-section bg-muted lg:py-12 xl:py-16">
        <div class="container">
            <div class="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
                <div class="md:w-6/12">
                    <div class="relative">
                        <img src="{{ asset('images/home/01-1.png') }}" alt="" width="646" height="768"
                            class="absolute inset-0 z-10 js-fade-in-up" />
                        <img src="{{ asset('images/home/01.png') }}" alt="" width="646" height="768"
                            class="js-fade-in-up" />
                    </div>
                </div>
                <div class="md:w-5/12">
                    <p
                        class="js-fade-in-up mb-2 text-[10px] font-bold uppercase tracking-[2px] text-primary lg:mb-3 lg:text-[11px] lg:tracking-[4px] xl:mb-5 xl:text-xs xl:tracking-[5px]">
                        Hertelendy Klára</p>
                    <h2 class="mb-5 text-4xl uppercase js-fade-in-up font-heading lg:text-5xl xl:text-6xl">
                        Rólam
                    </h2>
                    <p class="mb-5 js-fade-in-up">A lakberendezés a szenvedélyem.</p>
                    <p class="js-fade-in-up">2015 óta foglalkozom egyedi, személyre szabott otthonok, irodák tervezésével,
                        azoknak átalakításával, felújításával és stílusos lakberendezésével. Munkám célja: a funkcionalitást
                        harmóniába hozni az esztétikummal 100%-ban a megrendelő igényeire hangolva.</p>
                </div>
            </div>
        </div>
    </section>


    <section class="py-8 js-section lg:py-12 xl:py-16">
        <div class="container">
            <h2 class="mb-10 text-4xl text-center uppercase js-fade-in-up font-heading lg:text-5xl xl:text-6xl">
                Együttműködés
            </h2>

            @php
                $items = [
                    [
                        'image' => asset('images/home/lakberendezesi-tanacsadas.svg'),
                        'title' => 'Lakberendezési tanácsadás',
                        'text' => 'Ha csak praktikus ötletekre egy kis kreativitásra, inspirációra van szükséged.',
                        'link' => '/egyuttmukodes#lakberendezesi-tanacsadas',
                    ],
                    [
                        'image' => asset('images/home/teljeskoru-lakberendezes.svg'),
                        'title' => 'Teljeskörű lakberendezés',
                        'text' => 'Ötleteléstől, tervezéstől kezdve a kulcsrakész átadásig.',
                        'link' => '/egyuttmukodes#teljeskoru-lakberendezes',
                    ],
                    [
                        'image' => asset('images/home/felujitas.svg'),
                        'title' => 'Felújítás, átalakítás',
                        'text' => 'Ha nagyobb változtatásokra van szükség.',
                        'link' => '/egyuttmukodes#felujitas-atalakitas',
                    ],
                    [
                        'image' => asset('images/home/home-staging.svg'),
                        'title' => 'Home Staging',
                        'text' => 'Az első benyomás számít.',
                        'link' => '/egyuttmukodes#home-staging',
                    ],
                ];
            @endphp

            <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($items as $item)
                    <a href="{{ $item['link'] }}" class="js-fade-in-up">
                        <div
                            class="h-full px-4 py-8 text-center transition-all duration-300 ease-out rounded-3xl bg-muted hover:shadow-xl lg:p-8">
                            <div class="mb-4"><img src="{{ $item['image'] }}" alt="{{ $item['title'] }}" width="60"
                                    height="60" class="mx-auto"></div>
                            <p class="mb-4 text-lg font-semibold">{{ $item['title'] }}</p>
                            <p>{{ $item['text'] }}</p>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>




    <section class="relative js-section">
        <div class="container">
            <div class="relative z-10 js-scale-up">
                <a href="{{ asset('video/video.mp4') }}"
                    class="absolute inset-0 z-10 flex items-center justify-center glightbox">
                    <img src="{{ asset('images/play.svg') }}" alt="Play" width="100" height="100" />
                </a>
                <img src="{{ asset('images/home/video.jpg') }}" alt="Videó" width="1280" height="600"
                    class="rounded-3xl" />
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0 z-0 h-1/2 bg-secondary"></div>
    </section>




    <section class="py-8 text-white js-section bg-secondary lg:py-12 xl:py-16">
        <div class="container">

            <h2 class="mb-10 text-4xl uppercase js-fade-in-up font-heading lg:text-5xl xl:text-6xl">
                Munkáimból
            </h2>

            @php
                $works = [
                    [
                        'thumb' => asset('images/works/ujepitesu-projektek/index.jpg'),
                        'title' => 'Újépítésű projektek',
                        'link' => '/munkaim#ujepitesu-projektek',
                    ],
                    [
                        'thumb' => asset('images/works/marina-part/index.jpg'),
                        'title' => 'Marina Part',
                        'link' => '/munkaim#marina-part',
                    ],
                    [
                        'thumb' => asset('images/works/marina-bay/index.jpg'),
                        'title' => 'Marina Bay',
                        'link' => '/munkaim#marina-bay',
                    ],
                    [
                        'thumb' => asset('images/works/budapart/index.jpg'),
                        'title' => 'BudaPart',
                        'link' => '/munkaim#budapart',
                    ],
                    [
                        'thumb' => asset('images/works/belvarosi-felujitasok/index.jpg'),
                        'title' => 'Belvárosi felújítások',
                        'link' => '/munkaim#belvarosi-felujitasok',
                    ],
                ];
            @endphp

            <div class="js-fade-in-up">
                @include('components.frontend.works', ['works' => $works])
            </div>

        </div>
    </section>


    @include('components.frontend.section-contact')
@endsection