@extends('site.layout.master')
@section('content')

@php
    $banner = $banner ?? null;
    $bugunuduzenleyenakil = $bugunuduzenleyenakil ?? null;
    $kurucumesaji = $kurucumesaji ?? null;
    $markalarimiz = $markalarimiz ?? null;
    $ekibimiz = $ekibimiz ?? null;
    $ekol = $ekol ?? null;
    $katilin = $katilin ?? null;
    $kurumsalgundem = $kurumsalgundem ?? null;
    $iletisim = $iletisim ?? null;

    $heroMedia = !empty($banner?->image) ? asset($banner->image) : '';
    $heroMediaPath = parse_url($banner?->image ?? '', PHP_URL_PATH) ?: '';
    $heroIsVideo = $heroMedia !== '' && in_array(strtolower(pathinfo($heroMediaPath, PATHINFO_EXTENSION)), ['mp4', 'webm', 'ogg'], true);

    $brandItems = site_children($markalarimiz);
    $teamItems = site_children($ekibimiz);
    $newsItems = site_children($kurumsalgundem);
    $contactItems = site_children($iletisim);
    $founderPortrait = site_image_url($kurucumesaji, '', 0, 'kurucu');
    $founderSignature = site_image_url($kurucumesaji, '', 1, 'imza');
    $manifestoImage = site_image_url($ekol);
@endphp


<main>
        <!-- HERO SECTION -->
        <section class="relative min-h-screen flex items-end bg-surface overflow-hidden" id="hero">
            @if($heroIsVideo)
                <video autobuffer="" autoplay="" muted="" defaultmuted="" loop="" playsinline="" webkit-playsinline="" class="banner-video absolute inset-0 h-full w-full object-cover object-center" src="{{ $heroMedia }}"></video>
            @elseif($heroMedia !== '')
                <img class="banner-video absolute inset-0 h-full w-full object-cover object-center" src="{{ $heroMedia }}" alt="{{ site_plain_text($banner?->title ?? '') }}">
            @endif
            <div class="absolute inset-0 bg-gradient-to-b h-[32%] from-[#000000] via-[#000000]/50 to-transparent"></div>
            <div class="absolute inset-x-0 bottom-0 h-[52%] bg-gradient-to-b from-transparent via-[#000000]/45 to-[#000000]"></div>
            <div class="relative z-10 w-full px-6 md:px-12 pb-20 md:pb-24 pt-32 md:pt-40">
                <div class="max-w-3xl">
                    <h1 class="page-title max-w-3xl mb-8">
                        {!! $banner?->title ?? '' !!}
                    </h1>
                    <p class="body-copy max-w-md mb-12">
                        {!! $banner?->description ?? '' !!}
                    </p>
                    
                </div>
            </div>
        </section>
        <div class="h-20 md:h-28 bg-black" aria-hidden="true"></div>
        <!-- SECTION 1 - ABOUT -->
        <section class="px-6 md:px-12 py-32 bg-black" id="about">
            <div class="section-shell">
                <div class="section-body">
                    <div class="grid ">
                        <div>
                            <h2 class="page-title mb-8">{!! $bugunuduzenleyenakil?->title ?? '' !!}</h2>
                            <p class="body-copy">
                               {!! $bugunuduzenleyenakil?->description ?? '' !!}
                            </p>
                        </div>
                       
                    </div>
                </div>
            </div>
        </section>
        <!-- SECTION 2 - FOUNDER MESSAGE -->
        <section class="founder-section py-32 pt-0 px-6 md:px-12 bg-black" id="founder">
            <div class="founder-portrait-layer" aria-hidden="true">
                @if($founderPortrait !== '')
                    <img class="founder-portrait"
                        src="{{ $founderPortrait }}"
                        alt="{{ site_plain_text($kurucumesaji?->title ?? '') }}" />
                @endif
            </div>
            <div class="founder-backdrop" aria-hidden="true"></div>
            <div class="founder-content">
                <div class="absolute inset-x-0 bottom-0 h-[40%] bg-gradient-to-b from-transparent via-[#000000]/55 to-[#000000]"></div>
                @if($founderSignature !== '')
                    <span class="material-symbols-outlined founder-icon text-7xl mb-10"
                        style="font-variation-settings: 'FILL' 1;"><img src="{{ $founderSignature }}" alt=""></span>
                @endif
                <blockquote class="page-title founder-quote mb-12 max-w-5xl">
                    {!! $kurucumesaji?->description ?? '' !!}
                </blockquote>
                @if(!empty($kurucumesaji?->title) || !empty($kurucumesaji?->content) || !empty($kurucumesaji?->alternative_content))
                    <div class="founder-credit">
                        <div>
                            @if(!empty($kurucumesaji?->meta_title))
                                <div class="founder-credit-title font-headline font-bold uppercase tracking-widest">{!! $kurucumesaji?->meta_title ?? '' !!}</div>
                            @endif
                            @if(!empty($kurucumesaji?->meta_keywords))
                                <div class="founder-credit-title font-headline font-bold uppercase tracking-widest">{!! $kurucumesaji?->meta_keywords ?? '' !!}</div>
                            @endif
                            @if(!empty($kurucumesaji?->meta_description))
                                <div class="founder-credit-subtitle text-[0.7rem] font-bold uppercase tracking-widest">
                                    {!! $kurucumesaji?->meta_description ?? '' !!}</div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </section>


        <section class="organization-section py-32 md:py-38 pt-0 px-6 md:px-12 bg-black" id="organization">
            <div class="">
                <div class="organization-layout">
                    <div class="organization-brand-panel">
                        <div class="organization-header">
                            <h2 class="page-title organization-title mb-6">{!! $markalarimiz?->title ?? '' !!}</h2>
                            <p class="body-copy organization-copy">
                               {!! $markalarimiz?->description ?? '' !!}
                            </p>
                        </div>
                    </div>

                
                </div>

                <div class="organization-list">
                    @forelse($brandItems as $brandItem)
                        @php
                            $brandImage = site_image_url($brandItem);
                            $brandHref = site_href($brandItem->description);
                        @endphp
                        <a class="organization-item" href="{{ $brandHref }}" aria-label="{{ $brandItem->title ?? '' }} web sitesine git" @if($brandHref !== '#') target="_blank" rel="noopener noreferrer" @endif>
                            <span class="organization-item__brand">
                                @if($brandImage !== '')
                                    <img class="organization-item__logo" src="{{ $brandImage }}" alt="{{ $brandItem->title ?? '' }}" />
                                @endif
                            </span>
                            <span class="organization-item__cta" aria-hidden="true">
                                <span class="organization-item__cta-icon material-symbols-outlined">arrow_outward</span>
                                <span>Web Sitesine Git</span>
                            </span>
                        </a>
                    @empty
                    @endforelse
                </div>
            </div>
        </section>

        <section class="leadership-section py-32 px-6 md:px-12 bg-black" id="leadership">
            <div class="">
                <div class="leadership-header">
                    <h2 class="page-title leadership-title">{!! $ekibimiz?->title ?? '' !!}</h2>
                    <p class="body-copy leadership-copy">
                        {!! $ekibimiz?->description ?? '' !!}
                    </p>
                </div>
                <div class="leadership-grid">
                    @forelse($teamItems as $teamItem)
                        @php
                            $teamHref = site_href($teamItem->meta_title);
                            $teamImage = site_image_url($teamItem);
                            $visualClass = match ($loop->iteration) {
                                3 => ' leadership-card__visual--offset',
                                4 => ' leadership-card__visual--right',
                                default => '',
                            };
                        @endphp
                        <a class="leadership-card" href="{{ $teamHref }}" @if($teamHref !== '#') target="_blank" rel="noopener noreferrer" @endif aria-label="{{ $teamItem->title ?? '' }} LinkedIn profilini yeni sekmede aç">
                            <div class="leadership-card__body">
                                <h3 class="leadership-card__name">{{ $teamItem->title ?? '' }}</h3>
                                <p class="leadership-card__role">{{ $teamItem->description ?? '' }}</p>
                            </div>
                            <div class="leadership-card__visual{{ $visualClass }}">
                                @if($teamImage !== '')
                                    <img src="{{ $teamImage }}"
                                        alt="{{ $teamItem->title ?? '' }}" />
                                @endif
                            </div>
                        </a>
                    @empty
                    @endforelse
                </div>
            </div>
        </section>

        <section class="relative mt-20 min-h-screen flex items-start bg-black overflow-hidden" id="manifesto" @if($manifestoImage !== '') style="background-image: url('{{ $manifestoImage }}'); background-size: cover; background-position: center; background-attachment: fixed;" @endif>
            <div class="absolute inset-0 bg-gradient-to-b h-[32%] from-[#000000] via-[#000000]/70 to-transparent"></div>
            <div class="absolute inset-x-0 bottom-0 h-[52%] bg-gradient-to-b from-transparent via-[#000000]/55 to-[#000000]"></div>
            <div class="relative z-10 w-full px-6 md:px-12 pb-20 md:pb-24 pt-32 md:pt-40">
                <div class="max-w-3xl">
                    <h1 class="page-title max-w-3xl mb-8">
                        {!! $ekol?->description ?: ($ekol?->title ?? '') !!}
                    </h1>
                    <div class="body-copy max-w-md mb-12">
                       {!! $ekol?->content ?? '' !!}
                    </div>
                    
                </div>
            </div>
        </section>

        <section class="py-32 pt-0 md:pt-0 md:py-38 px-6 md:px-12 bg-surface-container-lowest" id="career">
            <div class="section-shell-2">
                
                <div class="section-body">
                    <div class="career-layout">
                        <div class="career-copy-panel">
                            <h2 class="page-title mb-8">{!! $katilin?->title ?? '' !!}</h2>
                            <p class="body-copy career-copy-text">
                               {!! $katilin?->description ?? '' !!}
                            </p>
                        </div>
                        <div class="career-form-panel">
                            <form class="career-form" id="careerForm" action="{{ route('career_form_send') }}" method="post" enctype="multipart/form-data" data-success-message="Başvurunuz başarıyla gönderildi.">
                                @csrf
                                <div class="career-form-grid">
                                    <label class="career-field">
                                        <span class="career-field__label">İsim Soyisim</span>
                                        <input class="career-field__input" name="full_name" type="text"
                                            placeholder="Adınız ve soyadınız" />
                                    </label>
                                    <label class="career-field">
                                        <span class="career-field__label">E-posta</span>
                                        <input class="career-field__input" name="email" type="email"
                                            placeholder="ornek@mail.com" />
                                    </label>
                                    <label class="career-field">
                                        <span class="career-field__label">Telefon</span>
                                        <input class="career-field__input" name="phone" type="tel"
                                            placeholder="+90 5xx xxx xx xx" />
                                    </label>
                                    <div class="career-field career-company-selector" data-company-select>
                                        <span class="career-field__label">Firma</span>
                                        <input type="hidden" name="company" value="İmpo Holding" data-company-input />
                                        <button class="career-company-trigger" type="button" aria-expanded="false"
                                            data-company-trigger>
                                            <span class="career-company-trigger__selected">
                                                <img src="{{asset('site/assets/images/faviconkirmizi.svg')}}" alt=""
                                                    data-company-selected-logo />
                                                <span data-company-selected-label>İmpo Holding</span>
                                            </span>
                                            <span class="material-symbols-outlined">expand_more</span>
                                        </button>
                                        <div class="career-company-menu" hidden data-company-menu>
                                            <button class="career-company-option is-selected" type="button"
                                                data-company-option data-company-value="İmpo Holding"
                                                data-company-logo="{{asset('site/assets/images/faviconkirmizi.svg')}}">
                                                <img src="{{asset('site/assets/images/faviconkirmizi.svg')}}" alt="" />
                                                <span>İmpo Holding</span>
                                            </button>
                                            @foreach($brandItems as $brandItem)
                                                @php $brandLogo = site_image_url($brandItem); @endphp
                                                <button class="career-company-option" type="button" data-company-option
                                                    data-company-value="{{ $brandItem->title ?? '' }}"
                                                    data-company-logo="{{ $brandLogo }}">
                                                    @if($brandLogo !== '')
                                                        <img src="{{ $brandLogo }}" alt="" />
                                                    @endif
                                                    <span>{{ $brandItem->title ?? '' }}</span>
                                                </button>
                                            @endforeach
                                           
                                        </div>
                                    </div>
                                </div>
                                <label class="career-field">
                                    <span class="career-field__label">Mesaj</span>
                                    <textarea class="career-field__input career-field__input--textarea" name="message"
                                        rows="5" placeholder="Kendinizi ve ilgilendiğiniz alanı kısaca anlatın"></textarea>
                                </label>
                                <label class="career-upload">
                                    <span class="career-field__label">CV Yükle</span>
                                    <input class="career-upload__input" name="cv" type="file"
                                        accept=".pdf,.doc,.docx" />
                                    <span class="career-upload__surface">
                                        <span class="material-symbols-outlined">upload_file</span>
                                        <span>PDF veya DOC formatında CV ekleyin</span>
                                    </span>
                                </label>
                                <button class="career-submit" type="submit">Başvuruyu Gönder</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- SECTION 9 - NEWS -->
        <section class="py-32 pt-0 md:pt-0 md:py-38 px-6 md:px-12 bg-black" id="news">
            <div class="">
                <div class="news-layout">
                    <aside class="news-aside">
                        <div class="news-aside__inner">
                            <h2 class="page-title">{!! $kurumsalgundem?->title ?? '' !!}</h2>
                            <p class="body-copy news-intro">
                                {!! $kurumsalgundem?->description ?? '' !!}
                            </p>
                            
                        </div>
                    </aside>

                    <div class="news-panel">
                        <div class="news-filters" data-news-filters>
                            <button class="news-filter is-active" type="button" data-news-filter="all">Tümü</button>
                            @foreach($brandItems as $brandItem)
                                <button class="news-filter" type="button" data-news-filter="brand-{{ $brandItem->id }}">{{ $brandItem->title ?? '' }}</button>
                            @endforeach
                            
                        </div>
                        <div class="news-list" data-news-list>
                            @forelse($newsItems as $newsItem)
                                @php
                                    $newsBrand = $brandItems->count() ? $brandItems->values()->get($loop->index % $brandItems->count()) : null;
                                    $newsCategory = $newsBrand ? 'brand-' . $newsBrand->id : 'all';
                                    $newsCompany = $newsBrand?->title ?? '';
                                    $newsTitle = site_plain_text($newsItem->title ?? '');
                                    $newsDate = site_plain_text($newsItem->description ?? '');
                                    $newsDescription = site_plain_text($newsItem->content ?: $newsItem->alternative_content ?: $newsItem->description);
                                    $newsImage = site_image_url($newsItem);
                                @endphp
                                <button class="news-item group" type="button" data-news-category="{{ $newsCategory }}"
                                    data-news-date="{{ $newsDate }}" data-news-company="{{ $newsCompany }}"
                                    data-news-title="{{ $newsTitle }}"
                                    data-news-image="{{ $newsImage }}"
                                    data-news-description="{{ $newsDescription }}">
                                    <div class="news-item__content">
                                        <div class="news-item__meta">
                                            <span class="news-item__date">{{ $newsDate }}</span>
                                            <span class="news-item__company">{{ $newsCompany }}</span>
                                        </div>
                                        <h3 class="item-title news-item__title">
                                            {{ $newsItem->title ?? '' }}
                                        </h3>
                                        <p class="news-item__summary">
                                            {{ $newsDescription }}
                                        </p>
                                    </div>
                                    @if($newsImage !== '')
                                        <div class="news-item__preview" aria-hidden="true">
                                            <img src="{{ $newsImage }}" alt="{{ $newsTitle }}" />
                                        </div>
                                    @endif
                                    <span class="material-symbols-outlined news-item__icon">north_east</span>
                                </button>
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="news-modal" hidden data-news-modal>
            <div class="news-modal__backdrop" data-news-modal-close></div>
            <div class="news-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="news-modal-title">
                <button class="news-modal__close" type="button" aria-label="Haberi kapat" data-news-modal-close>
                    <span class="material-symbols-outlined">close</span>
                </button>
                <div class="news-modal__media">
                    <img alt="" data-news-modal-image />
                </div>
                <div class="news-modal__body">
                    <div class="news-modal__meta">
                        <span data-news-modal-date></span>
                        <span data-news-modal-company></span>
                    </div>
                    <h3 class="page-title news-modal__title" id="news-modal-title" data-news-modal-title></h3>
                    <p class="body-copy news-modal__description" data-news-modal-description></p>
                </div>
            </div>
        </div>
        <!-- SECTION 10 - CONTACT -->
        <section class="py-32 pt-0 md:pt-0 md:py-10 px-6 md:px-12 bg-black" id="contact">
            <div class="">
                <div class="section-body">
                    <div class="contact-layout">
                        <div class="contact-copy-panel">
                            <h2 class="page-title mb-4">{!! $iletisim?->title ?? '' !!}</h2>
                            <p class="contact-copy-note">
                                {!! $iletisim?->description ?? '' !!}
                            </p>
                            <div class="contact-cards">
                                @forelse($contactItems as $contactItem)
                                    @php
                                        $contactIcon = site_plain_text($contactItem->title ?? '');
                                        $contactValue = site_plain_text($contactItem->description ?? '');
                                        $contactIcon = $contactIcon !== '' ? $contactIcon : 'info';
                                        $contactType = str_replace('-', '_', \Illuminate\Support\Str::slug($contactIcon));
                                        $contactHref = $contactType === 'mail'
                                            ? 'mailto:' . $contactValue
                                            : ($contactType === 'call' ? 'tel:' . preg_replace('/[^\d+]/', '', $contactValue) : null);
                                    @endphp
                                    <div class="contact-card">
                                        <div class="contact-card__icon" aria-hidden="true">
                                            <span class="material-symbols-outlined">{{ $contactIcon }}</span>
                                        </div>
                                        <div class="contact-card__content">
                                            @if($contactHref)
                                                <a class="contact-card__value" href="{{ $contactHref }}">{{ $contactValue }}</a>
                                            @else
                                                <p class="contact-card__value">{{ $contactValue }}</p>
                                            @endif
                                        </div>
                                    </div>
                                @empty
                                @endforelse
                            </div>
                        </div>
                        <div class="contact-map-panel">
                            <div class="contact-map-frame">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d140553.9569007522!2d28.828784864740943!3d41.02293507991095!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa483cf18cd33%3A0x1bb50025fddf41d!2s%C4%B0stanbul%20Vizyon%20Park%20Ofis%20Bloklar%C4%B1!5e1!3m2!1str!2str!4v1775051414044!5m2!1str!2str"
                                    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <button class="contact-fab" type="button" data-contact-open>
            İletişime Geç
        </button>

        <div class="contact-modal" hidden data-contact-modal>
            <div class="contact-modal__backdrop" data-contact-close></div>
            <div class="contact-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="contact-modal-title">
                <button class="contact-modal__close" type="button" aria-label="Formu kapat" data-contact-close>
                    <span class="material-symbols-outlined">close</span>
                </button>
                <div class="contact-modal__body">
                    <h3 class="page-title contact-modal__title" id="contact-modal-title">{!! $iletisim?->title ?? '' !!}</h3>
                    <form class="contact-form" id="contactForm" action="{{ route('contact_form_send') }}" method="post" data-success-message="Mesajınız başarıyla gönderildi.">
                        @csrf
                        <label class="contact-form__field">
                            <span class="contact-form__label">Ad Soyad</span>
                            <input class="contact-form__input" name="name" type="text" placeholder="Adınızı girin" />
                        </label>
                        <label class="contact-form__field">
                            <span class="contact-form__label">E-posta Adresi</span>
                            <input class="contact-form__input" name="email" type="email" placeholder="E-posta adresinizi girin" />
                        </label>
                        <label class="contact-form__field">
                            <span class="contact-form__label">Telefon</span>
                            <input class="contact-form__input" name="phone" type="tel" placeholder="+90 5xx xxx xx xx" />
                        </label>
                        <label class="contact-form__field">
                            <span class="contact-form__label">Konu</span>
                            <input class="contact-form__input" name="subject" type="text" placeholder="Mesajınızın konusu nedir?" />
                        </label>
                        <label class="contact-form__field">
                            <span class="contact-form__label">Mesaj</span>
                            <textarea class="contact-form__input contact-form__input--textarea" name="message"
                                placeholder="Sürecinizi kısaca anlatın" rows="3"></textarea>
                        </label>
                        <button class="contact-form__submit" type="submit">Mesaj Gönder</button>
                    </form>
                </div>
            </div>
        </div>
    </main>


@stop

@section('css')
   
@stop

@section('js')
    
@stop