{{--
SEO & Performance Optimized Image Component

Usage:
@include('components.seo.image', [
    'src' => '/images/example.jpg',
    'alt' => 'Image description',
    'title' => 'Image title on hover',
    'class' => 'w-full h-auto',
    'width' => 800,
    'height' => 600,
    'loading' => 'lazy', // or 'eager' for above-the-fold images
    'priority' => false, // true for LCP images
    'sizes' => '(max-width: 768px) 100vw, 50vw', // responsive sizes
])
--}}

@php
    use App\Helpers\SeoHelper;
    
    $src = $src ?? '';
    $alt = $alt ?? SeoHelper::generateImageAlt('Image', '', __('messages.meta.author'));
    $title = $title ?? $alt;
    $class = $class ?? 'w-full h-auto';
    $width = $width ?? null;
    $height = $height ?? null;
    $loading = $loading ?? 'lazy';
    $priority = $priority ?? false;
    $decoding = $decoding ?? 'async';
    $sizes = $sizes ?? '(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw';
    $srcset = $srcset ?? null;
    
    // For priority images, use eager loading
    if ($priority) {
        $loading = 'eager';
        $decoding = 'sync';
    }
    
    // Generate WebP source if original is jpg/png
    $webpSrc = null;
    if (preg_match('/\.(jpg|jpeg|png)$/i', $src)) {
        $webpSrc = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $src);
    }
    
    // Generate responsive srcset if width is provided
    if ($width && !$srcset) {
        $baseSrc = preg_replace('/\.(jpg|jpeg|png|webp)$/i', '', $src);
        $ext = pathinfo($src, PATHINFO_EXTENSION);
        // Common responsive widths
        $widths = [320, 640, 768, 1024, 1280, 1536];
        $srcsetParts = [];
        foreach ($widths as $w) {
            if ($w <= $width * 2) { // Don't upscale beyond 2x
                $srcsetParts[] = "{$src} {$w}w";
            }
        }
        if (!empty($srcsetParts)) {
            $srcset = implode(', ', $srcsetParts);
        }
    }
@endphp

@if($webpSrc)
{{-- Picture element for WebP with fallback --}}
<picture>
    <source 
        type="image/webp" 
        srcset="{{ $webpSrc }}"
        @if($sizes) sizes="{{ $sizes }}" @endif
    >
    <img 
        src="{{ $src }}"
        alt="{{ $alt }}"
        title="{{ $title }}"
        class="{{ $class }}"
        @if($width) width="{{ $width }}" @endif
        @if($height) height="{{ $height }}" @endif
        loading="{{ $loading }}"
        decoding="{{ $decoding }}"
        @if($sizes) sizes="{{ $sizes }}" @endif
        @if($srcset) srcset="{{ $srcset }}" @endif
        @if($priority) fetchpriority="high" @endif
        style="content-visibility: auto;"
    >
</picture>
@else
{{-- Standard img with optimizations --}}
<img 
    src="{{ $src }}"
    alt="{{ $alt }}"
    title="{{ $title }}"
    class="{{ $class }}"
    @if($width) width="{{ $width }}" @endif
    @if($height) height="{{ $height }}" @endif
    loading="{{ $loading }}"
    decoding="{{ $decoding }}"
    @if($sizes) sizes="{{ $sizes }}" @endif
    @if($srcset) srcset="{{ $srcset }}" @endif
    @if($priority) fetchpriority="high" @endif
    style="content-visibility: auto;"
>
@endif