@extends('layouts.app')
@section('title', t('المنتجات','Products').' — '.site_name())
@section('content')
<section class="page-hero"><div class="container"><h1>{{ t('منتجاتنا','Our Products') }}</h1><p>{{ t('إضافات WordPress احترافية','Professional WordPress Plugins') }}</p></div></section>
<section class="section"><div class="container">
<div class="products-grid">
@foreach($products as $product)
<div class="product-card">
  <div class="product-card-top" style="background:linear-gradient(135deg,{{ $product->color }},{{ $product->color }}bb)">
    <div class="product-icon">{{ $product->icon }}</div>
    @if($product->badge)<span class="product-badge-tag">{{ $product->badge }}</span>@endif
  </div>
  <div class="product-card-body">
    <div class="product-cat">{{ $product->category }}</div>
    <h3>{{ $product->name }}</h3>
    <p>{{ is_ar() ? $product->tagline_ar : $product->tagline_en }}</p>
    <ul class="product-features">
      @foreach(array_slice(is_ar() ? $product->featuresArArray() : $product->featuresEnArray(), 0, 4) as $f)
      <li><span class="check">✓</span> {{ $f }}</li>
      @endforeach
    </ul>
    <div class="product-card-footer">
      <div class="product-price">
        @if($product->is_free)<span class="price-free">{{ t('مجاني','Free') }}</span>@if($product->starting_price>0)<span class="price-premium">+ ${{ number_format($product->starting_price,0) }}</span>@endif
        @else<span>{{ t('من','from') }} <strong>${{ number_format($product->starting_price,0) }}</strong></span>@endif
      </div>
      <a href="{{ route('product.show',$product->slug) }}" class="btn btn-primary btn-sm">{{ t('التفاصيل','Details') }} →</a>
    </div>
  </div>
</div>
@endforeach
</div>
</div></section>
@endsection