@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . config('site.tagline', __('Portfolio')))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

{{-- Open Graph --}}
@section('og_title', config('site.og.title', config('site.name')))
@section('og_description', config('site.og.description', config('site.seo.description')))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter --}}
@section('twitter_title', config('site.name'))
@section('twitter_description', config('site.twitter.description', config('site.seo.description')))
@section('twitter_image', brand_twitter_image())

@section('content')

@php
    // ── Helper de welcome ──────────────────────────────────────
    $welcomeDefaults = [
        'hero_eyebrow'        => __('Video Editor & Motion Designer'),
        'hero_title'          => config('site.name', __('Portfolio')),
        'hero_subtitle'       => config('site.tagline', __('Creando arte en movimiento.')),
        'hero_cta_primary'    => __('Ver mi trabajo'),
        'hero_cta_secondary'  => __('Hablemos'),

        'about_eyebrow'       => __('Sobre mí'),
        'about_text'          => config('site.description', ''),
        'about_skills_label'  => __('Software'),
        'skill_1' => 'After Effects', 'skill_2' => 'Premiere Pro',
        'skill_3' => 'Cinema 4D',     'skill_4' => 'Photoshop',
        'skill_5' => 'DaVinci Resolve','skill_6' => 'Illustrator',

        'stat_1_value' => '100+', 'stat_1_label' => __('proyectos'),
        'stat_2_value' => '10M+', 'stat_2_label' => __('vistas generadas'),
        'stat_3_value' => '100%', 'stat_3_label' => __('entregas a tiempo'),

        'services_eyebrow'    => __('Qué hago'),
        'services_heading'    => __('Servicios'),
        'services_subheading' => __('Tres líneas de trabajo, todas con el mismo nivel de obsesión por el detalle.'),
        'service_1_title' => __('Motion Graphics'),
        'service_1_description' => __('Animación 2D/3D, lower thirds, intros y outros con identidad visual propia.'),
        'service_2_title' => __('Edits & Reels'),
        'service_2_description' => __('Cortos verticales con ritmo cinemático y sound design para Instagram, TikTok y YouTube Shorts.'),
        'service_3_title' => __('Long Form'),
        'service_3_description' => __('Videos largos para YouTube, podcasts y documentales. Storytelling y pacing que retienen.'),

        'gallery_eyebrow'     => __('Portfolio'),
        'gallery_heading'     => __('Trabajos seleccionados'),
        'gallery_subheading'  => __('Filtrá por categoría o explorá todo.'),

        'projects_eyebrow'    => __('Proyectos destacados'),
        'projects_heading'    => __('Casos en profundidad'),
        'projects_subheading' => __('Algunos proyectos donde el alcance fue más que un edit puntual.'),

        'blog_eyebrow'        => __('Behind the scenes'),
        'blog_heading'        => __('Notas y procesos'),
        'blog_subheading'     => __('Tutoriales, breakdowns y reflexiones sobre el oficio.'),

        'cta_section_heading' => __('¿Listo para tu próximo proyecto?'),
        'cta_section_text'    => __('Contame qué tenés en mente. Respondo en menos de 24 horas.'),
        'cta_button_label'    => __('Empecemos'),
    ];
    $welcome = function($key, $default = null) use ($welcomeDefaults) {
        return config('site.welcome.' . $key, $welcomeDefaults[$key] ?? $default);
    };

    // Datos directos de DB. Gallery via Model para usar accessors (youtube_id, embed_url).
    $galleryCategories = \DB::table('gallery_categories')->orderBy('id')->get();
    $galleryItems      = \App\Modules\Gallery\Models\Gallery::orderBy('is_featured', 'desc')->orderBy('id', 'desc')->limit(12)->get();
    $featuredProjects  = \DB::table('projects')->where('is_active', 1)->orderBy('id', 'desc')->limit(3)->get();
    $latestPosts       = \DB::table('posts')->where('status', 'Published')->orderBy('created_at', 'desc')->limit(3)->get();
@endphp

<div role="main" class="main">

    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    {{-- HERO                                                  --}}
    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    <section class="section section-no-border bg-transparent m-0 cp-hero">
        <div class="container">
            <div class="row align-items-center min-vh-90">
                <div class="col-lg-10 col-xl-9">
                    <p class="cp-eyebrow mb-3">{{ $welcome('hero_eyebrow') }}</p>
                    <h1 class="cp-hero__title">{{ $welcome('hero_title') }}</h1>
                    <p class="cp-hero__subtitle">{{ $welcome('hero_subtitle') }}</p>

                    <div class="d-flex flex-wrap gap-3 mt-5">
                        <a href="/gallery" class="btn btn-cta btn-rounded font-weight-bold text-2 text-uppercase px-4 btn-py-3">
                            {{ $welcome('hero_cta_primary') }}
                        </a>
                        <a href="/contact" class="btn btn-cta-ghost btn-rounded font-weight-bold text-2 text-uppercase px-4 btn-py-3">
                            {{ $welcome('hero_cta_secondary') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    {{-- ABOUT + STATS                                         --}}
    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    <section class="section section-no-border bg-transparent border-0 cp-section py-6">
        <div class="container">
            <div class="row align-items-start g-5">

                <div class="col-lg-7">
                    <p class="cp-eyebrow mb-3">{{ $welcome('about_eyebrow') }}</p>
                    <p class="cp-about__text">{{ $welcome('about_text') }}</p>

                    <div class="cp-skills mt-5">
                        <p class="cp-skills__label mb-3">{{ $welcome('about_skills_label') }}</p>
                        <ul class="cp-skills__list">
                            @foreach([1,2,3,4,5,6] as $i)
                                @if($welcome("skill_{$i}"))
                                    <li class="cp-skills__tag">{{ $welcome("skill_{$i}") }}</li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="cp-stats">
                        @foreach([1,2,3] as $i)
                            <div class="cp-stat">
                                <div class="cp-stat__value">{{ $welcome("stat_{$i}_value") }}</div>
                                <div class="cp-stat__label">{{ $welcome("stat_{$i}_label") }}</div>
                            </div>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    {{-- SERVICES                                              --}}
    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    <section class="section section-no-border bg-transparent border-0 cp-section py-6">
        <div class="container">
            <div class="cp-section__head mb-5">
                <p class="cp-eyebrow mb-3">{{ $welcome('services_eyebrow') }}</p>
                <h2 class="cp-section__title">{{ $welcome('services_heading') }}</h2>
                @if($welcome('services_subheading'))
                    <p class="cp-section__lead">{{ $welcome('services_subheading') }}</p>
                @endif
            </div>

            <div class="row g-4">
                @foreach([1,2,3] as $i)
                    <div class="col-lg-4">
                        <article class="cp-service-card h-100">
                            <div class="cp-service-card__num">0{{ $i }}</div>
                            <h3 class="cp-service-card__title">{{ $welcome("service_{$i}_title") }}</h3>
                            <p class="cp-service-card__description">{{ $welcome("service_{$i}_description") }}</p>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    {{-- GALLERY con tabs por categoría — feature core         --}}
    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    @if(is_module_active('gallery') && $galleryItems->count() > 0)
    <section class="section section-no-border bg-transparent border-0 cp-section py-6 cp-gallery-section">
        <div class="container">
            <div class="cp-section__head mb-5">
                <p class="cp-eyebrow mb-3">{{ $welcome('gallery_eyebrow') }}</p>
                <h2 class="cp-section__title">{{ $welcome('gallery_heading') }}</h2>
                @if($welcome('gallery_subheading'))
                    <p class="cp-section__lead">{{ $welcome('gallery_subheading') }}</p>
                @endif
            </div>

            <div class="cp-gallery__tabs" role="tablist">
                <button type="button" class="cp-gallery__tab cp-gallery__tab--active" data-filter="*" role="tab" aria-selected="true">
                    {{ __('Todo') }}
                </button>
                @foreach($galleryCategories as $cat)
                    <button type="button" class="cp-gallery__tab" data-filter=".cp-gallery-category-{{ $cat->slug }}" role="tab" aria-selected="false">
                        {{ $cat->name }}
                    </button>
                @endforeach
            </div>

            <div class="cp-gallery__grid" id="cpGalleryGrid">
                @foreach($galleryItems as $item)
                    @php
                        $itemCat = $galleryCategories->firstWhere('id', $item->category_id);
                        $catSlug = $itemCat->slug ?? '';
                        $catName = $itemCat->name ?? '';
                        $imgUrl  = !empty($item->img)
                            ? (filter_var($item->img, FILTER_VALIDATE_URL) ? $item->img : asset($item->img))
                            : ($item->youtube_thumbnail ?? asset('cd-project/img/defaults/gallery/gallery-' . (($loop->index % 6) + 1) . '.jpg'));
                        $isVideo = !empty($item->video_url) && $item->youtube_id;
                        $aspect  = $item->aspect_ratio ?: '16:9';
                        $aspectCls = 'cp-gallery__item--ar-' . str_replace(':', '-', $aspect);
                        $lightboxHref = $isVideo
                            ? 'https://www.youtube.com/embed/' . $item->youtube_id . '?rel=0&modestbranding=1'
                            : $imgUrl;
                    @endphp
                    <a href="{{ $lightboxHref }}"
                       class="cp-gallery__item {{ $aspectCls }} cp-gallery-category-{{ $catSlug }} {{ $isVideo ? 'cp-gallery__item--video cp-mfp-iframe-home' : 'cp-mfp-image-home' }}"
                       title="{{ $item->title }}">
                        <img src="{{ $imgUrl }}" alt="{{ $item->title }}" loading="lazy">
                        @if($isVideo)
                            <span class="cp-gallery__play-icon" aria-hidden="true">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                            </span>
                        @endif
                        <div class="cp-gallery__item-meta">
                            @if($catName)<span class="cp-gallery__item-cat">{{ $catName }}</span>@endif
                            <h4 class="cp-gallery__item-title">{{ $item->title }}</h4>
                        </div>
                    </a>
                @endforeach
            </div>

            {{-- Magnific-popup: imágenes con gallery navigation, videos con iframe YouTube --}}
            <script>
                (function initMagnificHome() {
                    if (typeof window.jQuery === 'undefined' || typeof window.jQuery.fn.magnificPopup === 'undefined') {
                        return setTimeout(initMagnificHome, 100);
                    }
                    var $ = window.jQuery;
                    $('#cpGalleryGrid').magnificPopup({
                        delegate: '.cp-mfp-image-home',
                        type: 'image',
                        mainClass: 'mfp-cp-fade',
                        removalDelay: 300,
                        gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] },
                        image: { titleSrc: 'title' }
                    });
                    $('#cpGalleryGrid .cp-mfp-iframe-home').magnificPopup({
                        type: 'iframe',
                        mainClass: 'mfp-cp-fade',
                        removalDelay: 300,
                        iframe: {
                            patterns: {
                                youtube: {
                                    index: 'youtube.com',
                                    id: function(url) {
                                        var m = url.match(/(?:embed\/|watch\?v=|shorts\/|v\/)([\w-]{11})/);
                                        return m ? m[1] : null;
                                    },
                                    src: 'https://www.youtube.com/embed/%id%?rel=0&modestbranding=1'
                                },
                                youtubeShort: {
                                    index: 'youtu.be/',
                                    id: function(url) {
                                        var m = url.match(/youtu\.be\/([\w-]{11})/);
                                        return m ? m[1] : null;
                                    },
                                    src: 'https://www.youtube.com/embed/%id%?rel=0&modestbranding=1'
                                },
                                vimeo: {
                                    index: 'vimeo.com/',
                                    id: function(url) {
                                        var m = url.match(/vimeo\.com\/(\d+)/);
                                        return m ? m[1] : null;
                                    },
                                    src: 'https://player.vimeo.com/video/%id%'
                                }
                            },
                            markup: '<div class="mfp-iframe-scaler">' +
                                        '<div class="mfp-close"></div>' +
                                        '<iframe class="mfp-iframe" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen></iframe>' +
                                    '</div>'
                        }
                    });
                })();
            </script>

            <div class="text-center mt-5">
                <a href="/gallery" class="btn btn-cta-ghost btn-rounded font-weight-bold text-2 text-uppercase px-5 btn-py-2">
                    {{ __('Ver todo el portfolio') }}
                </a>
            </div>
        </div>
    </section>
    @endif

    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    {{-- PROJECTS                                              --}}
    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    @if(is_module_active('projects') && $featuredProjects->count() > 0)
    <section class="section section-no-border bg-transparent border-0 cp-section py-6">
        <div class="container">
            <div class="cp-section__head mb-5">
                <p class="cp-eyebrow mb-3">{{ $welcome('projects_eyebrow') }}</p>
                <h2 class="cp-section__title">{{ $welcome('projects_heading') }}</h2>
                @if($welcome('projects_subheading'))
                    <p class="cp-section__lead">{{ $welcome('projects_subheading') }}</p>
                @endif
            </div>

            <div class="row g-4">
                @foreach($featuredProjects as $project)
                    @php
                        $projectImg = !empty($project->image)
                            ? (filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image))
                            : asset('cd-project/img/defaults/projects/project-' . (($loop->index % 4) + 1) . '.jpg');
                    @endphp
                    <div class="col-lg-4">
                        <a href="/projects/{{ $project->slug }}" class="cp-project-card d-block h-100">
                            <div class="cp-project-card__media">
                                <img src="{{ $projectImg }}" alt="{{ $project->title }}" loading="lazy">
                            </div>
                            <div class="cp-project-card__body">
                                <h3 class="cp-project-card__title">{{ $project->title }}</h3>
                                <p class="cp-project-card__description">{{ \Illuminate\Support\Str::limit($project->description ?? '', 110) }}</p>
                                <span class="cp-project-card__more">{{ __('Ver caso') }} →</span>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    {{-- BLOG                                                  --}}
    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    @if(is_module_active('blog') && $latestPosts->count() > 0)
    <section class="section section-no-border bg-transparent border-0 cp-section py-6">
        <div class="container">
            <div class="cp-section__head mb-5">
                <p class="cp-eyebrow mb-3">{{ $welcome('blog_eyebrow') }}</p>
                <h2 class="cp-section__title">{{ $welcome('blog_heading') }}</h2>
                @if($welcome('blog_subheading'))
                    <p class="cp-section__lead">{{ $welcome('blog_subheading') }}</p>
                @endif
            </div>

            <div class="row g-4">
                @foreach($latestPosts as $post)
                    @php
                        $postImg = !empty($post->header)
                            ? (filter_var($post->header, FILTER_VALIDATE_URL) ? $post->header : asset($post->header))
                            : asset('cd-project/img/defaults/blog/blog-' . (($loop->index % 3) + 1) . '.jpg');
                    @endphp
                    <div class="col-lg-4">
                        <a href="/blog/{{ $post->slug }}" class="cp-post-card d-block h-100">
                            <div class="cp-post-card__media">
                                <img src="{{ $postImg }}" alt="{{ $post->title }}" loading="lazy">
                            </div>
                            <div class="cp-post-card__body">
                                <time class="cp-post-card__date">{{ \Carbon\Carbon::parse($post->created_at)->isoFormat('LL') }}</time>
                                <h3 class="cp-post-card__title">{{ $post->title }}</h3>
                                <p class="cp-post-card__excerpt">{{ \Illuminate\Support\Str::limit(strip_tags($post->description ?? ''), 110) }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    {{-- CTA                                                   --}}
    {{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
    <section class="section section-no-border border-0 m-0 py-6 cp-cta-section">
        <div class="container text-center">
            <h2 class="cp-cta-section__title mb-3">{{ $welcome('cta_section_heading') }}</h2>
            <p class="cp-cta-section__text mb-5">{{ $welcome('cta_section_text') }}</p>
            <a href="/contact" class="btn btn-cta btn-rounded font-weight-bold text-2 text-uppercase px-5 btn-py-3">
                {{ $welcome('cta_button_label') }}
            </a>
        </div>
    </section>

</div>

{{-- Filtrado client-side de la gallery --}}
<script>
    (function() {
        var tabs = document.querySelectorAll('.cp-gallery__tab');
        var grid = document.getElementById('cpGalleryGrid');
        if (!tabs.length || !grid) return;

        tabs.forEach(function(tab) {
            tab.addEventListener('click', function() {
                tabs.forEach(function(t) {
                    t.classList.remove('cp-gallery__tab--active');
                    t.setAttribute('aria-selected', 'false');
                });
                this.classList.add('cp-gallery__tab--active');
                this.setAttribute('aria-selected', 'true');

                var filter = this.getAttribute('data-filter');
                grid.querySelectorAll('.cp-gallery__item').forEach(function(item) {
                    if (filter === '*' || item.classList.contains(filter.substring(1))) {
                        item.classList.remove('cp-gallery__item--hidden');
                    } else {
                        item.classList.add('cp-gallery__item--hidden');
                    }
                });
            });
        });
    })();
</script>

@endsection