@extends('frontend.layouts.app')

@section('content')
    <div class="home-page-wrapper py-3 py-md-4">

        @if(isset($heroSection) && $heroSection)
            <section class="home-hero-static mb-3 mb-md-4">
                <div class="container">
                    <div class="home-hero-box">
                        <div class="row align-items-center g-4 g-xl-5 flex-column-reverse flex-lg-row">
                            <div class="col-12 col-lg-6">
                                <div class="home-hero-content text-center text-lg-start">
                                    <span class="home-hero-badge">SEF Digital</span>
                                    <h1 class="home-hero-title">{{ $heroSection->title }}</h1>
                                    <div class="home-hero-text">{!! nl2br(e($heroSection->description)) !!}</div>
                                </div>
                            </div>

                            <div class="col-12 col-lg-6">
                                <div class="home-hero-video-wrap">
                                    @if($heroSection->youtube_embed_url)
                                        <iframe
                                            src="{{ $heroSection->youtube_embed_url }}"
                                            title="{{ $heroSection->alt ?? $heroSection->title }}"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                            allowfullscreen>
                                        </iframe>
                                    @elseif($heroSection->image)
                                        <img src="{{ asset('storage/' . $heroSection->image) }}" class="img-fluid w-100 h-100 object-fit-cover" alt="{{ $heroSection->alt ?? $heroSection->title }}">
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @isset($homeSections)
            @foreach($homeSections as $section)
                @include('frontend.partials.home-section-block', ['section' => $section])
            @endforeach
        @endisset

    </div>
@endsection

@push('style')
    <style>
        .home-page-wrapper {
            background-color: #f5f5f5;
        }

        .home-hero-static .container {
            max-width: 1200px;
        }

        .home-hero-box {
            background: linear-gradient(135deg, rgba(6, 148, 220, 0.08), rgba(6, 148, 220, 0.03));
            border: 1px solid rgba(6, 148, 220, 0.14);
            border-radius: 28px;
            padding: 48px;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
            min-height: 500px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .home-hero-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            border-radius: 999px;
            color: #0ea5e9;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 18px;
        }

        .home-hero-title {
            font-size: 35px;
            line-height: 1.5;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 20px;
        }

        .home-hero-text {
            font-size: clamp(1rem, 1.7vw, 1.3rem);
            line-height: 1.9;
            color: #334155;
            max-width: 560px;
        }

        .home-hero-video-wrap {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 26px;
            overflow: hidden;
            background: #000;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
        }

        .home-hero-video-wrap iframe,
        .home-hero-video-wrap img {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        .home-block {
            padding: 1.5rem 0;
        }

        .home-block + .home-block {
            border-top: 1px solid #e5e7eb;
        }

        .home-block-header {
            margin-bottom: 0.75rem;
        }

        .home-block-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.15rem;
        }

        .home-block-subtitle {
            font-size: 0.82rem;
            color: #6b7280;
            margin-bottom: 0.2rem;
        }

        .home-block-submenus {
            font-size: 0.82rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
        }

        .home-submenu-link {
            text-decoration: none;
            color: #2563eb;
        }

        .home-submenu-link:hover {
            text-decoration: underline;
        }

        .home-block-more {
            font-size: 0.82rem;
            padding: 4px 10px;
        }

        .home-product-card-link {
            text-decoration: none;
            color: inherit;
        }

        .home-product-card {
            background-color: #ffffff;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            padding: 0.45rem 0.45rem 0.6rem;
            transition: box-shadow 0.15s ease-out, transform 0.15s ease-out;
        }

        .home-product-card:hover {
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
            transform: translateY(-2px);
        }

        .home-product-img-wrap {
            position: relative;
            background-color: #ffffff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 140px;
        }

        .home-product-img-wrap img {
            max-height: 130px;
            object-fit: contain;
        }

        .home-discount-badge {
            position: absolute;
            left: 6px;
            top: 6px;
            background-color: #e11d48;
            color: #ffffff;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 999px;
        }

        .home-product-body {
            margin-top: 0.35rem;
        }

        .home-product-name {
            font-size: 0.8rem;
            color: #111827;
            min-height: 32px;
        }

        .home-product-price-wrap {
            display: flex;
            align-items: baseline;
            gap: 0.35rem;
        }

        .home-price-main {
            font-size: 0.9rem;
            font-weight: 700;
            color: #111827;
        }

        .home-price-old {
            font-size: 0.8rem;
            color: #9ca3af;
            text-decoration: line-through;
        }

        .home-price-tag {
            display: inline-block;
            margin-top: 0.25rem;
            font-size: 0.75rem;
            background-color: #22c55e;
            color: #ffffff;
            padding: 1px 8px;
            border-radius: 999px;
        }

        @media (max-width: 1199.98px) {
            .home-hero-box {
                min-height: auto;
                padding: 36px 28px;
            }
        }

        @media (max-width: 767.98px) {
            .home-hero-box {
                padding: 22px 16px;
                border-radius: 18px;
            }

            .home-hero-video-wrap {
                border-radius: 18px;
            }

            .home-block {
                padding: 1.1rem 0;
            }

            .home-product-img-wrap {
                min-height: 120px;
            }

            .home-product-img-wrap img {
                max-height: 110px;
            }
        }
    </style>
@endpush