@extends('layouts.app')
@section('title', 'Resources — MUVR Labs')
@section('content')

<section class="page-hero-light py-5 px-4 px-lg-5">
    <div class="container-fluid">
        <div class="ph-eyebrow text-brand mb-1" style="font-size:.7rem;letter-spacing:2px;text-transform:uppercase;font-weight:700">Downloads & Media</div>
        <h1 class="fw-800 mb-2" style="font-size:1.6rem;color:var(--brand-dark)">Resources</h1>
        <p class="sec-intro">Brochures, technical literature, standards references, videos, and useful engineering material.</p>
    </div>
</section>

<section class="py-5 px-4 px-lg-5">
    <div class="container-fluid">

        {{-- Product Brochures --}}
        <div class="sec-label mb-3">Product Brochures</div>
        <div class="row g-3 mb-5">
            @foreach($brochures as $res)
            <div class="col-lg-6 col-md-6">
                <div class="d-flex gap-3 p-3 rounded-3 align-items-start" style="background:#fff;border:1px solid var(--border-light)">
                    <div class="flex-shrink-0 d-flex align-items-center justify-content-center" style="width:46px;height:58px;background:#dbeafe;border-radius:6px;border:1px solid #93c5fd">
                        <i class="bi bi-file-earmark-pdf text-brand" style="font-size:1.4rem"></i>
                    </div>
                    <div>
                        <div class="fw-700 mb-1" style="font-size:.88rem;color:var(--brand-dark)">{{ $res->title }}</div>
                        <p class="mb-2" style="font-size:.78rem;color:#64748b;line-height:1.4">{{ $res->description }}</p>
                        @if($res->file_path)
                        <a href="{{ asset('uploads/brochures/'.$res->file_path) }}" class="btn btn-brand btn-sm" download>Download</a>
                        @elseif($res->external_url)
                        <a href="{{ $res->external_url }}" class="btn btn-brand btn-sm" target="_blank">Download</a>
                        @else
                        <span class="btn btn-sm" style="border:1px solid #cbd5e1;color:#94a3b8;cursor:not-allowed">Coming Soon</span>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Videos --}}
        @if($videos->count())
        <div class="sec-label mb-3">Videos & Media</div>
        <div class="row g-3 mb-5">
            @foreach($videos as $vid)
            <div class="col-lg-4 col-md-6">
                @if($vid->youtube_embed_id)
                <div class="ratio ratio-16x9 rounded-3 overflow-hidden mb-2">
                    <iframe src="https://www.youtube.com/embed/{{ $vid->youtube_embed_id }}" allowfullscreen class="rounded-3"></iframe>
                </div>
                @else
                <div class="d-flex align-items-center justify-content-center rounded-3 mb-2" style="height:110px;background:linear-gradient(135deg,#0d1b3e,#1e3a5f)">
                    <div class="text-center">
                        <i class="bi bi-play-circle text-white" style="font-size:2rem"></i>
                        <div class="text-white mt-1" style="font-size:.78rem;opacity:.7">{{ $vid->title }}</div>
                    </div>
                </div>
                @endif
                <div class="fw-700" style="font-size:.82rem;color:var(--brand-dark)">{{ $vid->title }}</div>
            </div>
            @endforeach
        </div>
        @endif

        {{-- Standards --}}
        @if($standards->count())
        <div class="sec-label mb-3">Standards & References</div>
        <div class="d-flex flex-column gap-2 mb-5">
            @foreach($standards as $std)
            <div class="d-flex align-items-center justify-content-between p-3 rounded-3" style="background:#fff;border:1px solid var(--border-light)">
                <div>
                    <div class="fw-700" style="font-size:.88rem;color:var(--brand-dark)">{{ $std->name }}</div>
                    <div style="font-size:.78rem;color:#64748b">{{ $std->description }}</div>
                </div>
                @if($std->external_url)
                <a href="{{ $std->external_url }}" target="_blank" class="btn btn-sm" style="border:1px solid #cbd5e1;color:#374151;flex-shrink:0">View Reference</a>
                @endif
            </div>
            @endforeach
        </div>
        @endif

        {{-- Articles --}}
        @if($articles->count())
        <div class="sec-label mb-3">Insights & Articles</div>
        <div class="row g-3 mb-4">
            @foreach($articles as $art)
            <div class="col-lg-4 col-md-6">
                <div class="p-3 h-100 rounded-3" style="background:#fff;border:1px solid var(--border-light)">
                    <div class="text-brand fw-700 mb-1" style="font-size:.7rem;letter-spacing:1px;text-transform:uppercase">
                        @if($art->category) {{ $art->category->name }} @else Article @endif
                    </div>
                    <div class="fw-700 mb-2" style="font-size:.88rem;color:var(--brand-dark);line-height:1.35">{{ $art->title }}</div>
                    @if($art->description)
                    <p class="mb-2" style="font-size:.78rem;color:#64748b">{{ Str::limit($art->description, 100) }}</p>
                    @endif
                    @if($art->external_url)
                    <a href="{{ $art->external_url }}" target="_blank" class="text-brand fw-600 text-decoration-none" style="font-size:.78rem">Read Article →</a>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
        @endif

    </div>
</section>

<section class="final-cta py-5 text-center">
    <div class="container">
        <h3 class="text-white fw-800 mb-2" style="font-size:1.1rem">Need Technical Support or More Information?</h3>
        <p class="text-secondary mb-4" style="font-size:.82rem">Our team can help you understand specifications, standards, and the right solution for your application.</p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            <a href="{{ route('contact') }}" class="btn btn-brand px-4">Contact Us</a>
            <a href="{{ route('contact') }}" class="btn btn-outline-light-custom px-4">Discuss Requirement</a>
        </div>
    </div>
</section>
@endsection