@extends('layouts.app')
@section('title', $settings['meta_title'] ?? 'MUVR Labs — Custom Test Rigs & Engineering Solutions')
@section('meta_description', $settings['meta_description'] ?? '')

@section('content')
<style>
    .floating-box {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 350px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,.2);
        padding: 20px;
        display: none;
        z-index: 9999;
    }
    
    .close-btn {
        position: absolute;
        top: -8px;
        right: -2px;
        border: none;
        background: transparent;
        font-size: 24px;
        cursor: pointer;
        color: #555;
    }
    
    .close-btn:hover {
        color: red;
    }
</style>
{{-- ── HERO ── --}}
@if($hero)
<section class="hero-section py-5">
    <div class="container-fluid px-4 px-lg-5">
        <div class="row align-items-center g-4" style="min-height:280px">
            <div class="col-lg-6 position-relative" style="z-index:1">
                @if($hero->eyebrow)
                <div class="hero-eyebrow mb-2">{{ $hero->eyebrow }}</div>
                @endif
                <h1 class="hero-h1 mb-3">{{ $hero->heading }}</h1>
                @if($hero->subheading)
                <p class="hero-sub mb-4">{{ $hero->subheading }}</p>
                @endif
                <div class="d-flex flex-wrap gap-2 mb-3">
                    @if($hero->primary_btn_text)
                    <a href="{{ $hero->primary_btn_url }}" class="btn btn-brand px-4 py-2" style="font-size:.82rem">{{ $hero->primary_btn_text }}</a>
                    @endif
                    @if($hero->secondary_btn_text)
                    <a href="{{ $hero->secondary_btn_url }}" class="btn btn-outline-light-custom px-4 py-2" style="font-size:.82rem">{{ $hero->secondary_btn_text }}</a>
                    @endif
                </div>
                @if($hero->support_line)
                <p class="hero-support">{{ $hero->support_line }}</p>
                @endif
            </div>
            <div class="col-lg-6 position-relative" style="z-index:1">
                <div class="row g-3">
                    @foreach($products->take(2) as $product)
                    <div class="col-6">
                        <div class="p-3 text-center" style="background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px">
                            <div class="mb-2" style="height:70px;display:flex;align-items:center;justify-content:center">
                                @if($product->thumbnail)
                                <img src="{{ asset('uploads/images/'.$product->thumbnail) }}" alt="{{ $product->name }}" style="max-height:70px;object-fit:contain">
                                @else
                                <div style="width:50px;height:60px;background:rgba(59,130,246,.15);border-radius:6px;border:1px solid rgba(96,165,250,.3)"></div>
                                @endif
                            </div>
                            <div class="fw-700 text-white" style="font-size:.78rem">{{ $product->name }}</div>
                            <div style="font-size:.7rem;color:#60a5fa">{{ $product->standard_badge }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ── FLAGSHIP PRODUCTS ── --}}
<section class="py-5 px-4 px-lg-5 mx-lg-5 mx-md-5">
    <div class="container-fluid">
        <div class="sec-label mb-1">Our Portfolio</div>
        <div class="sec-title mb-2">Flagship Products</div>
        <p class="sec-intro mb-5" style="max-width:580px">Our current product portfolio is led by specialized automated test systems designed for standards-oriented performance evaluation and industrial testing applications.</p>

        @foreach($products as $index => $product)
        <div class="row align-items-center g-4 mb-5 {{ $index % 2 == 1 ? 'flex-row-reverse' : '' }}">
            <div class="col-lg-6">
                <div class="d-flex align-items-center justify-content-center position-relative" style="background:#f1f5f9;border-radius:12px;height:200px;border:1px solid var(--border-light)">
                    @if($product->hero_image)
                    <img src="{{ asset('uploads/images/'.$product->hero_image) }}" alt="{{ $product->name }}" style="max-height:180px;max-width:90%;object-fit:contain">
                    @else
                    <div style="width:90px;height:110px;background:#dbeafe;border-radius:8px;border:1px solid #93c5fd"></div>
                    @endif
                    @if($product->standard_badge)
                    <span class="product-badge position-absolute top-0 end-0 m-2">{{ $product->standard_badge }}</span>
                    @endif
                </div>
            </div>
            <div class="col-lg-6">
                <h3 class="fw-800 mb-1" style="font-size:1.25rem;color:var(--brand-dark)">{{ $product->name }}</h3>
                @if($product->subtitle)
                <div class="text-brand fw-600 mb-3" style="font-size:.75rem;text-transform:uppercase;letter-spacing:.5px">{{ $product->subtitle }}</div>
                @endif
                <p class="mb-4" style="font-size:.82rem;color:#475569;line-height:1.65">{{ $product->short_description }}</p>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ route('product.show', $product->slug) }}" class="btn btn-brand btn-sm px-3">View Product Details</a>
                    @if($product->brochure_file)
                    <a href="{{ asset('uploads/brochures/'.$product->brochure_file) }}" class="btn btn-sm" style="border:1px solid #cbd5e1;color:#374151" download>Download Brochure</a>
                    @endif
                </div>
            </div>
        </div>
        @if(!$loop->last)<hr class="divider-light my-4">@endif
        @endforeach
    </div>
</section>

{{-- ── SOLUTIONS ── --}}
<section class="py-5 px-4 px-lg-5 bg-alt">
    <div class="container-fluid">
        <div class="sec-label mb-1">Capabilities</div>
        <div class="sec-title mb-2">Solutions</div>
        <p class="sec-intro mb-4" style="max-width:580px">Beyond our flagship products, we undertake custom engineering and development work tailored to specific performance, testing, and product realization requirements.</p>
        <div class="row g-3">
            @foreach($solutions as $solution)
            <div class="col-lg-3 col-md-6">
                <div class="sol-card h-100">
                    <div class="sol-icon-wrap mb-3">{!! $solution->icon_svg !!}</div>
                    <h5 class="fw-700 mb-2" style="font-size:.88rem;color:var(--brand-dark)">{{ $solution->title }}</h5>
                    <p class="mb-3" style="font-size:.78rem;color:#64748b;line-height:1.55">{{ $solution->short_description }}</p>
                    <a href="{{ route('solution.show', $solution->slug) }}" class="text-brand fw-600 text-decoration-none" style="font-size:.78rem">Learn More →</a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ── WHY MUVR LABS ── --}}
<section class="py-5 px-4 px-lg-5 mx-lg-5 mx-md-5">
    <div class="container-fluid">
        <div class="sec-label mb-1">Why Choose Us</div>
        <div class="sec-title mb-4">Why MUVR Labs</div>
        <div class="row g-3 mb-4">
            @foreach($whyUs as $item)
            <div class="col-lg-6">
                <div class="d-flex gap-3 align-items-start">
                    <div class="why-dot mt-1 flex-shrink-0"></div>
                    <div>
                        <strong class="d-block mb-1" style="font-size:.85rem;color:var(--brand-dark)">{{ $item->heading }}</strong>
                        <span style="font-size:.78rem;color:#64748b">{{ $item->description }}</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <a href="{{ route('contact') }}" class="btn btn-brand btn-sm px-4">Talk to Our Team</a>
    </div>
</section>

{{-- ── CASE STUDIES ── --}}
<section class="py-5 px-4 px-lg-5 bg-alt">
    <div class="container-fluid">
        <div class="sec-label mb-1">Track Record</div>
        <div class="sec-title mb-2">Case Study Highlights</div>
        <p class="sec-intro mb-4" style="max-width:580px">A look at selected engineering projects, delivered systems, installation work, and development programs that reflect our practical capabilities.</p>
        <div class="row g-3">
            @foreach($caseStudies as $cs)
            <div class="col-lg-4 col-md-6">
                <div class="case-card h-100">
                    <div class="case-card-img">
                        @if($cs->hero_image)
                        <img src="{{ asset('uploads/images/'.$cs->hero_image) }}" alt="{{ $cs->title }}" style="width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;opacity:.3">
                        @endif
                        <span class="case-card-img-label">{{ $cs->tab_label }}</span>
                    </div>
                    <div class="p-3">
                        <h6 class="fw-700 mb-2" style="font-size:.83rem;color:var(--brand-dark);line-height:1.4">{{ $cs->title }}</h6>
                        <a href="{{ route('case-study.show', $cs->slug) }}" class="text-brand fw-600 text-decoration-none" style="font-size:.78rem">Read Case Study →</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ── HOW WE WORK ── --}}
<section class="py-5 px-4 px-lg-5 mx-lg-5 mx-md-5">
    <div class="container-fluid">
        <div class="sec-label mb-1">Our Process</div>
        <div class="sec-title mb-4">How We Work</div>
        <div class="row g-0 text-center">
            @foreach($steps as $step)
            <div class="col position-relative">
                @if(!$loop->last)<div class="step-connector"></div>@endif
                <div class="step-num">{{ $step->step_number }}</div>
                <div class="fw-700 mb-1" style="font-size:.82rem;color:var(--brand-dark)">{{ $step->title }}</div>
                <div style="font-size:.74rem;color:#64748b">{{ $step->description }}</div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ── RESOURCES ── --}}
<section class="py-5 px-4 px-lg-5 bg-alt">
    <div class="container-fluid">
        <div class="sec-label mb-1">Downloads & Media</div>
        <div class="sec-title mb-4">Resources & Insights</div>
        <div class="row g-3 mb-4">
            @foreach($resources as $res)
            <div class="col-lg col-md-4 col-sm-6">
                <!--<pre>-->
                <!--    {{$res}}-->
                <!--</pre>-->
                <div class="res-card">
                    <div class="flex-shrink-0" style="width:34px;height:40px;background:#eff6ff;border-radius:6px;display:flex;align-items:center;justify-content:center">
                        @if($res->resource_type == 'pdf')
                        <i class="bi bi-file-earmark-pdf text-brand" style="font-size:1.1rem"></i>
                        @elseif($res->resource_type == 'video')
                        <i class="bi bi-play-circle text-brand" style="font-size:1.1rem"></i>
                        @else
                        <i class="bi bi-link-45deg text-brand" style="font-size:1.1rem"></i>
                        @endif
                    </div>
                    <div>
                        <div class="fw-700" style="font-size:.8rem;color:var(--brand-dark)">
                            @if($res->file_path!=null)
                                <a href="{{$res->file_path}}" target="_blank">{{ $res->title }}</a>
                            @elseif($res->external_url!=null)
                                <a href="{{$res->external_url}}" target="_blank">{{ $res->title }}</a>
                            @elseif($res->youtube_embed_id!=null && $res->youtube_embed_id!="")
                                <a class="openPopup" data-youtube_embed_id="{{ $res->youtube_embed_id }}">{{ $res->title }}</a>
                            @else
                                {{ $res->title }}
                            @endif 
                        </div>
                        <div style="font-size:.72rem;color:#64748b">{{ ucfirst($res->resource_type) }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <a href="{{ route('resources') }}" class="btn btn-brand btn-sm px-4">Explore Resources</a>
    </div>
</section>

{{-- ── CAREERS STRIP ── --}}
<!--<section class="py-5 px-4 px-lg-5 mx-lg-5 mx-md-5">-->
<!--    <div class="container-fluid">-->
<!--        <div class="d-flex align-items-center justify-content-between gap-4 p-4 rounded-3 flex-wrap" style="background:#f8fafc;border:1px solid var(--border-light)">-->
<!--            <div>-->
<!--                <h3 class="fw-800 mb-1" style="font-size:1rem;color:var(--brand-dark)">Careers at MUVR Labs</h3>-->
<!--                <p class="mb-0 text-muted" style="font-size:.82rem;max-width:520px;line-height:1.55">We are building a team across engineering, development, and technical support. Explore current openings or submit your CV for future opportunities.</p>-->
<!--            </div>-->
<!--            <div class="d-flex gap-2 flex-shrink-0 flex-wrap">-->
<!--                <a href="{{ route('careers') }}" class="btn btn-brand btn-sm px-3">View Openings</a>-->
<!--                <a href="{{ route('careers') }}#submit-cv" class="btn btn-sm" style="border:1px solid #cbd5e1;color:#374151">Submit CV</a>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->

{{-- ── FINAL CTA ── --}}
<section class="final-cta py-5 text-center">
    <div class="container">
        <h2 class="text-white fw-800 mb-3" style="font-size:1.4rem">Looking for a Specialized Test Rig or Engineering Development Partner?</h2>
        <p class="text-secondary mx-auto mb-4" style="font-size:.82rem;max-width:560px;line-height:1.65">Whether you need a standards-based testing platform, a custom validation system, or engineering support for a new product or specialized application, MUVR Labs is ready to help.</p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            <a href="{{ route('contact') }}" class="btn btn-brand px-4 py-2" style="font-size:.82rem">Request a Consultation</a>
            <!--<a href="{{ route('contact') }}" class="btn btn-outline-light-custom px-4 py-2" style="font-size:.82rem">Send an Enquiry</a>-->
        </div>
    </div>
</section>

<div id="floatingBox" class="floating-box">
    <button class="close-btn" id="closePopup">&times;</button>

    <p id="youtubeUrl"></p>

</div>

<script>
    const popup = document.getElementById('floatingBox');
    const youtubeContainer = document.getElementById('youtubeUrl');
    
    document.querySelectorAll('.openPopup').forEach(link => {
    
        link.addEventListener('click', function(e) {
            e.preventDefault();
    
            const videoId = this.dataset.youtube_embed_id;
    
            youtubeContainer.innerHTML = `
                <iframe
                    width="100%"
                    height="400"
                    src="https://www.youtube.com/embed/${videoId}?autoplay=1"
                    title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen>
                </iframe>
            `;
    
            popup.style.display = 'block';
        });
    
    });
    
    document.getElementById('closePopup').addEventListener('click', function() {
        popup.style.display = 'none';
    
        // Remove iframe to stop the video/audio
        youtubeContainer.innerHTML = '';
    });
</script>
@endsection