@extends('layouts.app')

@php
    $isAr = app()->getLocale() === 'ar';
    $metaTitle = $isAr
        ? 'غطاء مسبح متحرك وبرجولا ذكية في السعودية | Smart Pool & Pergola'
        : 'Smart Pool & Pergola | Smart Pool Covers & Pergolas in Saudi Arabia';
    $altUrl = route($isAr ? 'home.en' : 'home.ar');
@endphp

@push('schema')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Smart Pool & Pergola",
  "url": "{{ url('/') }}",
  "telephone": "{{ \App\Models\Setting::get('phone_sa_1') }}"
}
</script>
@endpush

@section('content')

  <section class="hero">
    <div class="hero-slats"></div>
    <div class="container hero-inner">
      <h1>{{ $isAr ? 'حماية ذكية. فخامة لا تُضاهى.' : 'Intelligent Protection. Uncompromising Elegance.' }}</h1>
      <p class="lede">{{ $isAr
          ? 'أنظمة أغطية مسابح وبرجولا أمريكية المنشأ، مصممة لمنازل ومشاريع لا تقبل بأقل من الكمال.'
          : 'American-engineered pool cover and pergola systems, crafted for homes and projects that accept nothing less than perfection.' }}</p>
      <div class="btn-row">
        <a href="{{ route('quote.create.' . app()->getLocale()) }}" class="btn btn-primary">
          {{ $isAr ? 'اطلب استشارة مجانية' : 'Request a Free Consultation' }}
        </a>
      </div>
    </div>
  </section>

  <section class="section section--bg-light">
    <div class="container">
      <div class="section-head">
        <h2>{{ $isAr ? 'ثلاثة حلول. مستوى واحد من الجودة.' : 'Three Solutions. One Standard of Quality.' }}</h2>
      </div>
      <div class="grid grid-4">
        @foreach ($products as $product)
          <article class="card">
            <div class="card-media ph-visual"><span>{{ $product->name() }}</span></div>
            <div class="card-body">
              @if ($product->card_tag_ar)
                <span class="card-tag">{{ $isAr ? $product->card_tag_ar : $product->card_tag_en }}</span>
              @endif
              <h3>{{ $product->name() }}</h3>
              <p>{{ $isAr ? $product->hero_subheadline_ar : $product->hero_subheadline_en }}</p>
              <a href="{{ route('products.show.' . app()->getLocale(), $product->slug()) }}" class="btn-ghost mt-1">
                {{ $isAr ? 'اعرف أكتر ←' : 'Learn more →' }}
              </a>
            </div>
          </article>
        @endforeach
      </div>
    </div>
  </section>

  @if ($testimonials->isNotEmpty())
  <section class="section">
    <div class="container">
      <div class="section-head section-head--center">
        <h2>{{ $isAr ? 'ثقة موثقة، لا ادعاءات' : 'Documented Trust, Not Claims' }}</h2>
      </div>
      <div class="grid grid-3">
        @foreach ($testimonials as $t)
          <div class="testimonial-card">
            <div class="testimonial-quote">"{{ $t->quote() }}"</div>
            <div class="testimonial-person">
              <div class="testimonial-avatar">{{ $t->avatar_initials }}</div>
              <div>
                <div class="testimonial-name">{{ $t->name }}</div>
                <div class="testimonial-role">{{ $t->role() }}</div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif

@endsection