@extends('layouts.app')

@section('title', __('Terms & Conditions | SavEX'))

@section('description', __('Read SavEX terms and conditions to understand the rules, responsibilities, policies, and guidelines for using the app and its services.'))

@section('canonical', route('terms', ['locale' => app()->getLocale()]))

@section('content')
<section class="terms-page-hero section-padding">
    <div class="container">
        <div class="terms-page-head text-center">
            <div class="section-badge d-inline-flex align-items-center gap-2 mb-3">
                <span class="eyebrow-dot"></span>
                {{ __('Terms & Conditions') }}
            </div>

            <h1 class="section-title mb-3">
                {!! __('SavEX <span>Terms & Conditions</span>') !!}
            </h1>

            <p class="section-description mx-auto mb-0">
                {{ __('Please read these terms carefully before using SavEX services, draws, auctions, rewards, and offers.') }}
            </p>
        </div>
    </div>
</section>

<section class="terms-page-section section-padding">
    <div class="container">
        <div class="terms-wrapper">
            @forelse ($terms as $term)
                <article class="terms-item" id="term-{{ $term->id }}">
                    <div class="terms-item-number">
                        {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}
                    </div>

                    <div class="terms-item-content">
                        <h2>
                            {{ $term->translated_title }}
                        </h2>

                        <div class="terms-content">
                            {!! $term->translated_content !!}
                        </div>
                    </div>
                </article>
            @empty
                <div class="empty-state">
                    {{ __('No terms and conditions available now.') }}
                </div>
            @endforelse
        </div>
    </div>
</section>
@endsection