@extends('layouts.app')

@section('title', app()->getLocale()==='ar' ? 'Media Serve — برمجيات WordPress احترافية' : 'Media Serve — Professional WordPress Software')
@section('description', app()->getLocale()==='ar' ? 'إضافات WordPress احترافية — SEO، Live Chat، AI News وأكثر من Media Serve' : 'Professional WordPress plugins — SEO, Live Chat, AI News and more from Media Serve')

@section('schema')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Media Serve",
  "url": "{{ url('/') }}",
  "description": "Professional WordPress software company",
  "email": "support@mediaserves.com",
  "sameAs": ["https://mediaserves.com"]
}
</script>
@endsection

@section('content')

{{-- HERO --}}
<section class="hero">
  <div class="hero-inner">
    <div class="hero-badge">🚀 {{ app()->getLocale()==='ar'?'برمجيات WordPress الأكثر احترافية':'Most Professional WordPress Software' }}</div>
    <h1>
      @if(app()->getLocale()==='ar')
        اجعل موقعك يتصدر<br><span>نتائج البحث</span>
      @else
        Make Your Website<br><span>Rank Higher</span>
      @endif
    </h1>
    <p>
      {{ app()->getLocale()==='ar'
        ? 'إضافات WordPress احترافية لـ SEO، الدردشة الذكية، نشر الأخبار تلقائياً وأكثر — كل ما تحتاجه في مكان واحد'
        : 'Professional WordPress plugins for SEO, AI Chat, Auto News Publishing and more — everything you need in one place' }}
    </p>
    <div class="hero-btns">
      <a href="{{ route('products.index') }}" class="btn btn-white btn-lg">
        {{ app()->getLocale()==='ar'?'عرض المنتجات ←':'View Products →' }}
      </a>
      <a href="{{ route('register') }}" class="btn btn-ghost btn-lg">
        {{ app()->getLocale()==='ar'?'ابدأ مجاناً':'Start Free' }}
      </a>
    </div>
    <div class="hero-stats">
      <div class="hero-stat"><strong>4+</strong><span>{{ app()->getLocale()==='ar'?'منتجات':'Products' }}</span></div>
      <div class="hero-stat-sep"></div>
      <div class="hero-stat"><strong>+500</strong><span>{{ app()->getLocale()==='ar'?'عميل':'Clients' }}</span></div>
      <div class="hero-stat-sep"></div>
      <div class="hero-stat"><strong>4.9★</strong><span>{{ app()->getLocale()==='ar'?'تقييم':'Rating' }}</span></div>
      <div class="hero-stat-sep"></div>
      <div class="hero-stat"><strong>24/7</strong><span>{{ app()->getLocale()==='ar'?'دعم':'Support' }}</span></div>
    </div>
  </div>
</section>

{{-- PRODUCTS --}}
<section class="products-section" id="products">
  <div class="container">
    <div class="section-title">
      <h2>{{ app()->getLocale()==='ar'?'منتجاتنا':'Our Products' }}</h2>
      <p>{{ app()->getLocale()==='ar'?'كل ما تحتاجه لموقع WordPress ناجح':'Everything you need for a successful WordPress site' }}</p>
    </div>
    <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>{{ app()->getLocale()==='ar' ? ($product['desc_ar']??'') : ($product['desc_en']??'') }}</p>
          <ul class="product-features-list">
            @foreach(array_slice(app()->getLocale()==='ar'?$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">{{ app()->getLocale()==='ar'?'مجاني':'Free' }}</span>
                @if(isset($product['starting']) && $product['starting'] > 0)
                <span class="price-premium">+ Premium {{ app()->getLocale()==='ar'?'من':'from' }} ${{ $product['starting'] }}</span>
                @endif
              @else
                <span>{{ app()->getLocale()==='ar'?'من':'from' }} <strong>${{ $product['starting'] }}</strong></span>
              @endif
            </div>
            <a href="{{ route('products.show', $product['slug']) }}" class="btn btn-primary btn-sm">
              {{ app()->getLocale()==='ar'?'التفاصيل':'Details' }} →
            </a>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- PRICING for MS SEO Pro --}}
<section class="pricing-section" id="pricing">
  <div class="container">
    <div class="section-title">
      <h2>{{ app()->getLocale()==='ar'?'أسعار MS SEO Pro':'MS SEO Pro Pricing' }}</h2>
      <p>{{ app()->getLocale()==='ar'?'ابدأ مجاناً وترقّ متى تريد':'Start free, upgrade anytime' }}</p>
    </div>
    <div class="pricing-grid">
      @foreach($plans as $plan)
      <div class="price-card {{ $plan['id']==='yearly'?'featured':'' }}">
        @if($plan['id']==='yearly')
        <div class="popular-tag">⭐ {{ app()->getLocale()==='ar'?'الأكثر طلباً':'Most Popular' }}</div>
        @endif
        <div class="price-name">{{ $plan['name'] }}</div>
        <div class="price-amount">
          ${{ number_format($plan['price'], 0) }}
          <span>/
            @if($plan['days']==0) {{ app()->getLocale()==='ar'?'للأبد':'forever' }}
            @elseif($plan['days']<=30) {{ app()->getLocale()==='ar'?'شهر':'mo' }}
            @elseif($plan['days']<=90) {{ app()->getLocale()==='ar'?'3 أشهر':'3mo' }}
            @else {{ app()->getLocale()==='ar'?'سنة':'yr' }}
            @endif
          </span>
        </div>
        <ul class="price-features">
          <li>✅ {{ app()->getLocale()==='ar'?'كل ميزات '.($plan['id']==='free'?'الأساسية':'Premium'):'All '.($plan['id']==='free'?'Basic':'Premium').' Features' }}</li>
          <li>✅ {{ $plan['sites'] }} {{ app()->getLocale()==='ar'?'موقع':'site(s)' }}</li>
          @if($plan['id']!=='free')
          <li>✅ {{ app()->getLocale()==='ar'?'دعم أولوية':'Priority Support' }}</li>
          @endif
          @if(in_array($plan['id'],['yearly','lifetime']))
          <li>✅ {{ app()->getLocale()==='ar'?'تحديثات مجانية':'Free Updates' }}</li>
          @endif
        </ul>
        <a href="{{ $plan['price']>0 ? route('checkout',$plan['id']) : route('register') }}" class="btn {{ $plan['id']==='yearly'?'btn-primary':'btn-outline' }} w-full">
          {{ $plan['price']>0 ? (app()->getLocale()==='ar'?'اشترك الآن':'Subscribe Now') : (app()->getLocale()==='ar'?'تحميل مجاني':'Download Free') }}
        </a>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- WHY US --}}
<section class="why-us">
  <div class="container">
    <div class="section-title">
      <h2>{{ app()->getLocale()==='ar'?'لماذا Media Serve؟':'Why Media Serve?' }}</h2>
    </div>
    <div class="why-grid">
      @php
      $reasons = app()->getLocale()==='ar' ? [
        ['🏆','جودة لا تُضاهى','كل منتج مبني بأعلى معايير البرمجة وبعد دراسة عميقة للسوق'],
        ['🛡️','أمان وموثوقية','كودنا نظيف وآمن مع تحديثات مستمرة'],
        ['💬','دعم فني مميز','فريق دعم متاح للرد على كل استفساراتك'],
        ['🔄','تحديثات مجانية','نحن نطور باستمرار ونضيف ميزات جديدة مجاناً'],
      ] : [
        ['🏆','Unmatched Quality','Every product is built to the highest standards after deep market research'],
        ['🛡️','Security & Reliability','Clean, secure code with continuous updates'],
        ['💬','Premium Support','Our team is always available to answer your questions'],
        ['🔄','Free Updates','We continuously develop and add new features for free'],
      ];
      @endphp
      @foreach($reasons as [$icon,$title,$desc])
      <div class="why-card">
        <div class="why-icon">{{ $icon }}</div>
        <h3>{{ $title }}</h3>
        <p>{{ $desc }}</p>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- CTA --}}
<section class="cta-section">
  <div class="container text-center">
    <h2>{{ app()->getLocale()==='ar'?'جاهز للبدء؟':'Ready to Get Started?' }}</h2>
    <p>{{ app()->getLocale()==='ar'?'انضم لأكثر من 500 موقع يستخدم منتجاتنا':'Join 500+ websites using our products' }}</p>
    <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px">
      <a href="{{ route('register') }}" class="btn btn-white btn-lg">{{ app()->getLocale()==='ar'?'ابدأ مجاناً ←':'Start Free →' }}</a>
      <a href="{{ route('contact') }}"  class="btn btn-ghost btn-lg">{{ app()->getLocale()==='ar'?'تواصل معنا':'Contact Us' }}</a>
    </div>
  </div>
</section>

@endsection