@extends('layouts.public')
@section('title', setting('site_name').' - کوتاه‌کننده لینک')
@section('content')
<section class="relative overflow-hidden bg-gradient-to-br from-indigo-700 via-indigo-600 to-violet-700 text-white">
  <div class="absolute inset-0 opacity-20" style="background-image:radial-gradient(circle at 20% 20%,#fff 0,transparent 40%),radial-gradient(circle at 80% 70%,#a78bfa 0,transparent 40%)"></div>
  <div class="relative max-w-3xl mx-auto px-4 py-20 text-center">
    <h1 class="text-3xl sm:text-5xl font-extrabold leading-tight">لینک‌هایت را کوتاه کن،<br>کلیک‌ها را بشمار</h1>
    <p class="mt-4 text-indigo-100 text-sm sm:text-base">{{ setting('site_tagline') }}</p>

    @if(setting('guest_shorten') == '1')
      <form method="POST" action="{{ route('guest.shorten') }}" class="mt-8 bg-white rounded-2xl p-2 flex flex-col sm:flex-row gap-2 shadow-2xl">
        @csrf
        <input name="long_url" value="{{ old('long_url') }}" dir="ltr" placeholder="https://example.com/very/long/link" required class="flex-1 rounded-xl px-4 py-3 text-slate-800 text-sm focus:outline-none text-left">
        <button class="btn-p py-3 px-6">کوتاه کن <i data-lucide="scissors" class="w-4 h-4"></i></button>
      </form>
      @if($errors->any())<div class="mt-3 text-rose-200 text-sm">{{ $errors->first() }}</div>@endif
      @if(session('short_url'))
        <div x-data="{c:false}" class="mt-4 bg-white/10 backdrop-blur rounded-2xl p-4 flex items-center justify-between gap-3">
          <span dir="ltr" class="font-mono text-sm sm:text-base break-all">{{ session('short_url') }}</span>
          <button @click="navigator.clipboard.writeText('{{ session('short_url') }}'); c=true; setTimeout(()=>c=false,1500)" class="btn-g !bg-white !text-indigo-700 shrink-0"><span x-text="c?'کپی شد ✓':'کپی'"></span></button>
        </div>
      @endif
    @else
      <a href="{{ route('register') }}" class="inline-block mt-8 btn-p !bg-white !text-indigo-700 py-3 px-8">همین حالا شروع کنید</a>
    @endif
  </div>
</section>

<section class="max-w-6xl mx-auto px-4 py-16">
  <h2 class="text-2xl font-bold text-center mb-10">چرا {{ setting('site_name') }}؟</h2>
  <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
    @foreach([
      ['bar-chart-3','آمار دقیق کلیک','کشور، دستگاه، مرورگر و ارجاع‌دهنده هر کلیک را ببینید.'],
      ['globe','چند دامنه و دامنه اختصاصی','لینک‌ها را با دامنه‌ی خودتان منتشر کنید.'],
      ['lock','رمز، انقضا و محدودیت کلیک','دسترسی به لینک‌ها را کاملاً کنترل کنید.'],
      ['wallet','کسب درآمد','از هر کلیک یکتای بازدیدکننده درآمد کسب کنید.'],
      ['send','ربات تلگرام','لینک بسازید و آمار بگیرید، مستقیم از تلگرام.'],
      ['code-2','API کامل','با کلید API در برنامه‌های خود یکپارچه شوید.'],
    ] as [$i,$t,$d])
      <div class="card hover:shadow-md transition">
        <div class="w-11 h-11 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center mb-3"><i data-lucide="{{ $i }}" class="w-5 h-5"></i></div>
        <div class="font-bold mb-1">{{ $t }}</div>
        <p class="text-sm text-slate-500 dark:text-slate-400">{{ $d }}</p>
      </div>
    @endforeach
  </div>
</section>

@if($packages->count())
<section class="bg-white dark:bg-slate-800/50 border-y border-slate-100 dark:border-slate-700">
  <div class="max-w-6xl mx-auto px-4 py-16">
    <h2 class="text-2xl font-bold text-center mb-10">پکیج‌ها و قیمت‌ها</h2>
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
      @foreach($packages as $p)
        <div class="card flex flex-col {{ $p->is_featured ? 'ring-2 ring-indigo-500' : '' }}">
          @if($p->is_featured)<span class="badge bg-indigo-600 text-white self-start mb-2">محبوب‌ترین</span>@endif
          <div class="font-bold text-lg">{{ $p->name }}</div>
          <div class="text-2xl font-extrabold text-indigo-600 my-2">{{ $p->price > 0 ? number_format($p->price) : 'رایگان' }} @if($p->price > 0)<span class="text-xs font-normal text-slate-400">تومان / {{ $p->duration_days ? $p->duration_days.' روز' : 'همیشه' }}</span>@endif</div>
          <p class="text-xs text-slate-500 mb-3">{{ $p->description }}</p>
          <ul class="space-y-1.5 text-sm flex-1">
            @foreach($p->featuresList() as $f)<li class="flex gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5"></i>{{ $f }}</li>@endforeach
          </ul>
          <a href="{{ route('register') }}" class="btn-p mt-5">{{ $p->is_free ? 'شروع رایگان' : 'انتخاب پکیج' }}</a>
        </div>
      @endforeach
    </div>
  </div>
</section>
@endif
@endsection