@extends('layouts.site', ['headerTemplate' => 'Demo27 Header'])

@php
use Illuminate\Support\Facades\Storage;
@endphp

@section('title', $product->translate('title') ?? 'Ürün Detayı')
@section('meta_description', Str::limit(strip_tags($product->translate('content')), 160))
@php
    $landingData = $product->landing_page_data ?? [];
    $hero = $landingData['hero'] ?? [];
    
    // Fallback if hero data is empty
    if (empty($hero['slogan']) && empty($hero['sub_slogan']) && empty($hero['featured_image'])) {
        $hero['slogan'] = $product->translate('title');
        $hero['sub_slogan'] = Str::limit(strip_tags($product->translate('content')), 160);
        $hero['featured_image'] = $product->hero_image;
    }

    $currentLang = app()->getLocale();
    
    // Helper function to get translated value with fallback
    $getTranslated = function($item, $key, $default = '') use ($currentLang) {
        if (isset($item["{$key}_{$currentLang}"])) {
            return $item["{$key}_{$currentLang}"];
        }
        return $item[$key] ?? $default;
    };
@endphp

@section('content')
    {{-- Hero Section --}}
    @if(!empty($hero))
    <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}">
        <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-9">
            <div class="flex flex-wrap mx-0 !mt-[-50px] items-center text-center lg:text-left xl:text-left">
                <div class="xl:w-5/12 lg:w-5/12 xxl:w-4/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]" data-cues="slideInDown" data-group="page-title" data-delay="700">
                    @if($slogan = $getTranslated($hero, 'slogan'))
                    <h1 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] font-semibold !leading-[1.15] !mb-4">
                        {!! nl2br(e($slogan)) !!}
                    </h1>
                    @endif
                    @if($subSlogan = $getTranslated($hero, 'sub_slogan'))
                    <p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">{{ $subSlogan }}</p>
                    @endif
                    <div class="flex justify-center lg:!justify-start xl:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="1800">
                        @if(!empty($hero['app_store_link']))
                        <span class="inline-flex"><a href="{{ $hero['app_store_link'] }}" target="_blank" class="!mr-2 field">
                            <img src="{{ asset('assets/img/photos/button-appstore.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="App Store" loading="lazy">
                        </a></span>
                        @endif
                        @if(!empty($hero['google_play_link']))
                        <span class="inline-flex"><a href="{{ $hero['google_play_link'] }}" target="_blank" class="inline-block">
                            <img src="{{ asset('assets/img/photos/button-google-play.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="Google Play" loading="lazy">
                        </a></span>
                        @endif
                    </div>
                </div>
                <!-- /column -->
                @if(!empty($hero['featured_image']))
                <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mb-[-10rem] xxl:!mb-[-15rem] !mt-[50px] flex justify-center items-center" data-cues="slideInDown" data-delay="600" style="z-index:2;">
                    <figure class="m-0 p-0 w-full flex justify-center items-center">
                        <img class="w-[95%] max-w-[850px] !h-auto xl:!max-h-[540px] lg:!max-h-[440px] object-contain drop-shadow-2xl rounded-xl"
                            src="{{ Storage::url($hero['featured_image']) }}" 
                            alt="{{ $product->translate('title') }}" loading="lazy"
                            
                        >
                    </figure>
                </div>
                <!-- /column -->
                @endif
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
        <div class="overflow-hidden" style="z-index:1;">
            <div class="divider !text-[#fefefe] mx-[-0.5rem]">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
                    <g fill="currentColor">
                        <polygon points="1440 100 0 100 0 85 1440 0 1440 100" />
                    </g>
                </svg>
            </div>
        </div>
        <!-- /.overflow-hidden -->
    </section>
    <!-- /section -->
    @endif
  
@endsection