@extends('layouts.app')

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

@section('title', ($isAr ? ($product['tagline_ar']??'') : ($product['tagline_en']??'')) . ' — ' . $product['name'])
@section('description', $isAr ? ($product['desc_ar']??'') : ($product['desc_en']??''))

@section('schema')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "{{ $product['name'] }}",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "WordPress",
  "description": "{{ $isAr ? ($product['desc_ar']??'') : ($product['desc_en']??'') }}",
  "url": "{{ route('products.show', $product['slug']) }}",
  "offers": [{"@type":"Offer","price":"{{ $product['starting']??0 }}","priceCurrency":"USD"}]
}
</script>
@endsection

@section('content')

{{-- Hero --}}
<section class="product-hero" style="background: linear-gradient(135deg, {{ $product['color'] }}22, {{ $product['color'] }}11); border-bottom:1px solid {{ $product['color'] }}33">
  <div class="container">
    <div class="breadcrumb">
      <a href="{{ route('home') }}">{{ $isAr?'الرئيسية':'Home' }}</a> ›
      <a href="{{ route('products.index') }}">{{ $isAr?'المنتجات':'Products' }}</a> ›
      <span>{{ $product['name'] }}</span>
    </div>
    <div class="product-hero-inner">
      <div class="product-hero-text">
        <div class="product-category-tag" style="color:{{ $product['color'] }};background:{{ $product['color'] }}22">
          {{ $product['category'] }}
          @if(isset($product['version'])) v{{ $product['version'] }} @endif
        </div>
        <h1>{{ $product['name'] }}</h1>
        <p class="product-tagline">{{ $isAr?($product['tagline_ar']??''):($product['tagline_en']??'') }}</p>
        <p>{{ $isAr?($product['desc_ar']??''):($product['desc_en']??'') }}</p>
        <div class="product-hero-btns">
          @if(isset($product['starting']) && $product['starting'] > 0)
          <a href="{{ route('checkout', $product['slug']) }}" class="btn btn-primary btn-lg">
            {{ $isAr?'اشترك الآن — من $'.$product['starting']:'Subscribe — from $'.$product['starting'] }} →
          </a>
          @endif
          @if($product['free'])
          <a href="{{ route('register') }}" class="btn btn-outline btn-lg">
            {{ $isAr?'⬇️ تحميل مجاني':'⬇️ Free Download' }}
          </a>
          @endif
        </div>
        <div class="product-meta">
          @if(isset($product['wp_requires']))
          <span>WordPress {{ $product['wp_requires'] }}+</span>
          @endif
          @if(isset($product['php_requires']))
          <span>PHP {{ $product['php_requires'] }}+</span>
          @endif
          @if(isset($product['version']))
          <span>v{{ $product['version'] }}</span>
          @endif
        </div>
      </div>
      <div class="product-hero-icon">
        <div style="font-size:120px;line-height:1">{{ $product['icon'] }}</div>
      </div>
    </div>
  </div>
</section>

{{-- Features --}}
<section class="features-section">
  <div class="container">
    <div class="section-title">
      <h2>{{ $isAr?'المميزات':'Features' }}</h2>
    </div>
    <div class="features-grid">
      @foreach($isAr?($product['features_ar']??[]):($product['features_en']??[]) as $f)
      <div class="feature-card">
        <div class="feature-icon">{{ $f['icon'] }}</div>
        <h3>{{ $f['title'] }}</h3>
        <p>{{ $f['desc'] }}</p>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- Pricing (for ms-seo-pro) --}}
@if(!empty($plans))
<section class="pricing-section" id="pricing" style="background:#f8fafc">
  <div class="container">
    <div class="section-title">
      <h2>{{ $isAr?'الأسعار':'Pricing' }}</h2>
      <p>{{ $isAr?'ابدأ مجاناً وترقّ متى تريد':'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">⭐ {{ $isAr?'الأكثر طلباً':'Most Popular' }}</div>
        @endif
        <div class="price-name">{{ $plan['name'] }}</div>
        <div class="price-amount">
          ${{ number_format($plan['price'],0) }}
          <span>/{{ $plan['days']==0?($isAr?'للأبد':'forever'):($plan['days']<=30?($isAr?'شهر':'mo'):($plan['days']<=90?($isAr?'3 أشهر':'3mo'):($isAr?'سنة':'yr'))) }}</span>
        </div>
        <ul class="price-features">
          <li>✅ {{ $isAr?'كل ميزات '.($plan['id']==='free'?'الأساسية':'Premium'):'All '.($plan['id']==='free'?'Basic':'Premium').' features' }}</li>
          <li>✅ {{ $plan['sites'] }} {{ $isAr?'موقع':'site(s)' }}</li>
          @if($plan['id']!=='free')<li>✅ {{ $isAr?'دعم أولوية':'Priority Support' }}</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?($isAr?'اشترك الآن':'Subscribe Now'):($isAr?'تحميل مجاني':'Download Free') }}
        </a>
      </div>
      @endforeach
    </div>
  </div>
</section>
@else
{{-- Single product CTA --}}
<section class="cta-section">
  <div class="container text-center">
    <h2>{{ $isAr?'جاهز للبدء؟':'Ready to Get Started?' }}</h2>
    @if(isset($product['starting']) && $product['starting'] > 0)
    <p>{{ $isAr?'السعر يبدأ من $'.$product['starting'].' فقط':'Starting from just $'.$product['starting'] }}</p>
    <a href="{{ route('checkout', $product['slug']) }}" class="btn btn-white btn-lg" style="margin-top:16px">
      {{ $isAr?'اشترك الآن ←':'Subscribe Now →' }}
    </a>
    @else
    <a href="{{ route('register') }}" class="btn btn-white btn-lg" style="margin-top:16px">
      {{ $isAr?'⬇️ تحميل مجاني':'⬇️ Free Download' }}
    </a>
    @endif
  </div>
</section>
@endif

{{-- FAQ --}}
@php $faqs = $isAr?($product['faqs_ar']??[]):($product['faqs_en']??[]); @endphp
@if(!empty($faqs))
<section class="faq-section">
  <div class="container" style="max-width:780px">
    <div class="section-title">
      <h2>{{ $isAr?'أسئلة شائعة':'FAQ' }}</h2>
    </div>
    <div class="faq-list">
      @foreach($faqs as $i=>$faq)
      <div class="faq-item" id="faq-{{ $i }}">
        <div class="faq-q" onclick="toggleFaq({{ $i }})">
          {{ $faq['q'] }} <span id="arr-{{ $i }}">▼</span>
        </div>
        <div class="faq-a" id="faq-a-{{ $i }}">{{ $faq['a'] }}</div>
      </div>
      @endforeach
    </div>
  </div>
</section>
<script>
function toggleFaq(i) {
  var el  = document.getElementById('faq-item-'+i) || document.getElementById('faq-'+i);
  var arr = document.getElementById('arr-'+i);
  el.classList.toggle('open');
  arr.textContent = el.classList.contains('open') ? '▲' : '▼';
}
</script>

{{-- FAQ Schema --}}
<script type="application/ld+json">
{
  "@context":"https://schema.org","@type":"FAQPage",
  "mainEntity":[
    @foreach($faqs as $faq)
    {"@type":"Question","name":"{{ $faq['q'] }}","acceptedAnswer":{"@type":"Answer","text":"{{ $faq['a'] }}"}}{{ !$loop->last?',':'' }}
    @endforeach
  ]
}
</script>
@endif

@endsection