@extends('layouts.app')

@php $isAr = app()->getLocale()==='ar'; @endphp

@section('title', $isAr?'منتجاتنا — Media Serve':'Our Products — Media Serve')
@section('description', $isAr?'تصفح كل منتجات Media Serve — إضافات WordPress احترافية':'Browse all Media Serve products — professional WordPress plugins')

@section('content')
<section class="page-hero">
  <div class="container">
    <h1>{{ $isAr?'منتجاتنا':'Our Products' }}</h1>
    <p>{{ $isAr?'إضافات WordPress احترافية مصممة لتنمية موقعك':'Professional WordPress plugins built to grow your website' }}</p>
  </div>
</section>

<section class="products-section">
  <div class="container">
    <div class="products-grid">
      @foreach($products as $product)
      <div class="product-card">
        <div class="product-card-header" style="background: linear-gradient(135deg, {{ $product['color'] }}, {{ $product['color'] }}dd)">
          <div class="product-icon">{{ $product['icon'] }}</div>
          @if(isset($product['badge']))
          <span class="product-badge">{{ $product['badge'] }}</span>
          @endif
        </div>
        <div class="product-card-body">
          <div class="product-category">{{ $product['category'] }}</div>
          <h3>{{ $product['name_ar'] ?? $product['name'] }}</h3>
          <p>{{ $isAr ? ($product['desc_ar']??'') : ($product['desc_en']??'') }}</p>
          <ul class="product-features-list">
            @foreach(array_slice($isAr?$product['features_ar']:$product['features_en'], 0, 4) as $f)
            <li>✅ {{ $f }}</li>
            @endforeach
          </ul>
          <div class="product-card-footer">
            <div class="product-price">
              @if($product['free'])
                <span class="price-free">{{ $isAr?'مجاني':'Free' }}</span>
                @if(($product['starting']??0) > 0)
                <span class="price-premium">+ Premium {{ $isAr?'من':'from' }} ${{ $product['starting'] }}</span>
                @endif
              @else
                <span>{{ $isAr?'من':'from' }} <strong>${{ $product['starting'] }}</strong></span>
              @endif
            </div>
            <a href="{{ route('products.show', $product['slug']) }}" class="btn btn-primary btn-sm">
              {{ $isAr?'التفاصيل':'Details' }} →
            </a>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

<section class="cta-section">
  <div class="container text-center">
    <h2>{{ $isAr?'محتاج منتج مخصص؟':'Need a Custom Product?' }}</h2>
    <p>{{ $isAr?'فريقنا جاهز لبناء حل مخصص لمشروعك':'Our team is ready to build a custom solution for your project' }}</p>
    <a href="{{ route('contact') }}" class="btn btn-white btn-lg" style="margin-top:16px">
      {{ $isAr?'تواصل معنا ←':'Contact Us →' }}
    </a>
  </div>
</section>
@endsection