@extends('layout.user')

@section('title','Coming Soon')

@section('content')
@php
  /** @var \App\Models\GeneralSetting|null $gs */
  $gs = \App\Models\GeneralSetting::first();

  // Theme colors (fallback → BD-flag vibe)
  $bgColor    = $gs->background_color ?: '#ffffff';
  $textColor  = $gs->text_color       ?: '#0f172a';
  $iconColor  = $gs->icon_color       ?: '#0B5D1E';
  $hoverColor = $gs->hover_color      ?: '#0F7A2E';
@endphp

<div class="fixed inset-0 flex items-center justify-center px-4"
     style="background:{{ $bgColor }}; color:{{ $textColor }};">

  <div class="w-full max-w-lg rounded-2xl border shadow-xl p-6 sm:p-8"
       style="border-color:{{ $iconColor }}40; background:#fff;">
    
    {{-- Rocket Animation --}}
    <div class="relative h-28 max-w-md mx-auto mb-2 overflow-hidden">
      <div class="absolute left-0 top-16 text-2xl animate-[fly_4.2s_ease-in-out_infinite]"
           style="color:{{ $iconColor }}">
        <i class="fa-solid fa-rocket"></i>
      </div>
    </div>

    {{-- Title --}}
    <h1 class="text-center text-3xl sm:text-4xl font-black bg-clip-text text-transparent"
        style="background-image:linear-gradient(to right,{{ $iconColor }},{{ $hoverColor }});">
      Coming Soon
    </h1>
    <p class="text-center text-sm sm:text-base mt-2 mb-4" style="color:{{ $textColor }}cc;">
      এই ফিচার/প্রজেক্টে কাজ চলছে। <br> খুব শীঘ্রই চালু হবে — সাথেই থাকুন!
    </p>

    {{-- Bouncing Dots --}}
    <div class="flex justify-center gap-2 my-4">
      <span class="w-3 h-3 rounded-full animate-[bounce_1.1s_infinite]"
            style="background:{{ $iconColor }}"></span>
      <span class="w-3 h-3 rounded-full animate-[bounce_1.1s_infinite_.15s]"
            style="background:{{ $hoverColor }}"></span>
      <span class="w-3 h-3 rounded-full animate-[bounce_1.1s_infinite_.3s]"
            style="background:{{ $iconColor }}"></span>
    </div>

    {{-- Progress Bar --}}
    <div class="relative w-[92%] max-w-md h-2 mx-auto mb-6 rounded-full border bg-gray-100 overflow-hidden"
         style="border-color:#e5e7eb;">
      <span class="absolute inset-y-0 left-0 w-1/6 rounded-full animate-[loading_5.5s_ease-in-out_infinite]"
            style="background-image:linear-gradient(to right,{{ $iconColor }},{{ $hoverColor }});"></span>
    </div>

    {{-- Status pill --}}
    <p class="text-center mb-4">
      <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-bold text-white shadow"
            style="background-image:linear-gradient(to right,{{ $iconColor }},{{ $hoverColor }});">
        <i class="fa-regular fa-clock"></i> Maintenance in Progress
      </span>
    </p>

    {{-- CTA --}}
    <div class="flex justify-center gap-3 flex-wrap">
      <a href="{{ url()->previous() ?? '/' }}"
         class="px-4 py-2.5 rounded-lg font-extrabold text-sm sm:text-base text-white shadow hover:opacity-90 transition"
         style="background-image:linear-gradient(to right,{{ $iconColor }},{{ $hoverColor }});">
        <i class="fa-solid fa-arrow-left"></i> ফিরে যান
      </a>
      <a href="https://t.me/careerlink_official" target="_blank"
         class="px-4 py-2.5 rounded-lg font-extrabold text-sm sm:text-base transition"
         style="border:1px solid {{ $iconColor }}; color:{{ $iconColor }};">
        <i class="fa-brands fa-telegram"></i> আপডেট পেতে জয়েন করুন
      </a>
    </div>

    <p class="text-center text-xs mt-6" style="color:{{ $textColor }}99;">
      টিপস: ভেরিফাই সম্পন্ন হলেই বেশিরভাগ প্রজেক্ট অটো-এনেবল হবে।
    </p>
  </div>
</div>

{{-- Animations --}}
<style>
  body { overflow: hidden; }
  @keyframes fly {
    0%   { transform: translate(0,0) rotate(18deg); opacity:.85;}
    50%  { transform: translate(360px,-60px) rotate(22deg); opacity:1;}
    100% { transform: translate(0,0) rotate(18deg); opacity:.85;}
  }
  @keyframes bounce {
    0%,100%{transform:translateY(0);opacity:.9}
    50%{transform:translateY(-8px);opacity:1}
  }
  @keyframes loading {
    0%{width:12%}
    50%{width:82%}
    100%{width:12%}
  }
</style>
@endsection