@extends('frontend.layout_2')
@section('title','Contact & Support')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
  :root{
    /* ভিন্ন কালার প্যালেট */
    --bg-1:#eef2ff;        /* indigo-50 */
    --bg-2:#f0fdfa;        /* teal-50 */
    --ink:#0f172a;         /* slate-900 */
    --muted:#6b7280;       /* slate-500 */
    --brand-1:#6366f1;     /* indigo-500 */
    --brand-2:#a855f7;     /* violet-500 */
    --card:#ffffff;
    --ring: rgba(2,8,23,.06);
  }
  .page-wrap{
    position:relative; isolation:isolate;
    min-height:calc(100dvh - 120px); /* header/footer বাদে */
    background:
      radial-gradient(800px 400px at 10% -10%, #c7d2fe55 10%, transparent 60%),
      radial-gradient(900px 480px at 110% 0%, #99f6e455 10%, transparent 60%),
      linear-gradient(180deg, var(--bg-1), var(--bg-2));
  }
  .float-bubbles{
    position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6; filter:blur(12px);
  }
  @keyframes drift {
    0%{ transform:translateY(0) translateX(0) scale(1); }
    50%{ transform:translateY(-10px) translateX(8px) scale(1.03); }
    100%{ transform:translateY(0) translateX(0) scale(1); }
  }
  .paper{
    background:var(--card);
    border:1px solid var(--ring);
    border-radius:16px;
    box-shadow:0 12px 30px rgba(2,8,23,.08);
  }
  .cta{
    display:inline-flex; align-items:center; gap:.6rem;
    border-radius:14px; padding:.9rem 1.1rem; font-weight:800; font-size:.95rem;
    color:#0f172a; background:#fff; border:1px solid #e5e7eb;
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  }
  .cta i{ font-size:1.05rem; }
  .cta:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(2,8,23,.08); filter:brightness(1.02); }
  .cta.tg{ background:#e0e7ff; border-color:#c7d2fe; }
  .cta.wa{ background:#dcfce7; border-color:#bbf7d0; }
  .divider{
    height:1px; background:linear-gradient(90deg, transparent, #e5e7eb, transparent);
  }
  @media (prefers-reduced-motion:no-preference){ .press:active{ transform:translateY(1px); } }

  /* ====== Header icons (দুইটা রাউন্ড আইকন) ====== */

  /* বাম দিকের লাইফ-রিং আইকন */
  .support-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#ef4444;                    /* red */
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    box-shadow:0 8px 20px rgba(239,68,68,.55);
    flex-shrink:0;
  }
  .support-avatar i{
    font-size:18px;
  }

  /* ডান দিকের close আইকন */
  .support-close{
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid #e5e7eb;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9ca3af;
    padding: 10px;
    transition:
      background .15s ease,
      color .15s ease,
      box-shadow .15s ease,
      transform .1s ease;
  }
  .support-close i{
    font-size:14px;
  }
  .support-close:hover{
    background:#f9fafb;
    color:#4b5563;
    box-shadow:0 4px 12px rgba(15,23,42,.12);
    transform:translateY(-1px);
  }
  .support-close:active{
    transform:translateY(0);
    box-shadow:0 2px 6px rgba(15,23,42,.08);
  }
</style>
@endpush

@section('sub_layout')
<div class="page-wrap">
  {{-- animated soft bubbles --}}
  <svg class="float-bubbles" viewBox="0 0 1200 800" preserveAspectRatio="none" aria-hidden="true">
    <defs>
      <linearGradient id="gInd" x1="0" x2="1" y1="0" y2="1">
        <stop offset="0%" stop-color="#a5b4fc"/>
        <stop offset="100%" stop-color="#99f6e4"/>
      </linearGradient>
    </defs>
    <g style="transform-origin:15% 15%; animation:drift 14s ease-in-out infinite;">
      <circle cx="170" cy="120" r="110" fill="url(#gInd)"/>
    </g>
    <g style="transform-origin:90% 10%; animation:drift 18s ease-in-out infinite reverse;">
      <circle cx="1030" cy="90" r="120" fill="#c4b5fd"/>
    </g>
    <g style="transform-origin:60% 95%; animation:drift 16s ease-in-out infinite;">
      <circle cx="640" cy="720" r="140" fill="#99f6e4"/>
    </g>
  </svg>

  <div class="relative z-[1] mx-auto max-w-lg px-4 py-8">
    <div class="paper p-5 md:p-6">
      {{-- Header --}}
      <div class="flex items-start gap-3">
        {{-- LEFT ROUND ICON --}}
        <div class="support-avatar">
          <i class="fa-solid fa-life-ring"></i>
        </div>

        <div class="min-w-0">
          <h1 class="text-xl md:text-2xl font-extrabold text-slate-900">সাহায্য দরকার?</h1>
          <p class="mt-1 text-[13.5px] md:text-sm leading-6 text-slate-600">
            আমাদের সাপোর্ট টিমের সাথে কথা বলতে নিচের যে কোনো অপশন বেছে নিন। প্রতারণা থেকে সতর্ক থাকুন—কখনই
            <span class="font-semibold text-rose-600">OTP/পাসওয়ার্ড/পিন</span> শেয়ার করবেন না।
          </p>
        </div>

        {{-- RIGHT ROUND CLOSE BUTTON --}}
        <a href="{{ url()->previous() }}"
           class="ml-auto hidden sm:flex support-close"
           aria-label="Close">
          <i class="fa-solid fa-xmark"></i>
        </a>
      </div>
   @php
      $companySetup = \App\Models\CompanySetup::first();
      $currentUser  = auth()->user(); // ✅ current logged-in user
  @endphp
 
      {{-- Buttons --}}
      <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
        <a class="cta tg press justify-center"
           href="https://t.me/{{ $companySetup->telegram_link }}" target="_blank" rel="noopener">
          <i class="fa-brands fa-telegram"></i> Telegram
        </a>
        <a class="cta wa press justify-center"
           href="https://wa.me/{{ $companySetup->whatsapp_number }}" target="_blank" rel="noopener">
          <i class="fa-brands fa-whatsapp"></i> WhatsApp
        </a>
      </div>

      <div class="my-4 divider"></div>

      {{-- Support time --}}
      <div class="flex items-start gap-2 text-[13px] md:text-sm text-slate-600">
        <i class="fa-solid fa-thumbtack mt-0.5 text-rose-500"></i>
        <div>
          <span class="font-semibold">সাপোর্ট সময়:</span>
          প্রতিদিন সকাল ৮টা – রাত ১০টা (BST)
        </div>
      </div>

      {{-- Extra contact (optional) --}}
      <div class="mt-3 flex flex-wrap items-center gap-3 text-[13px] md:text-sm text-slate-600">
        <div class="inline-flex items-center gap-2">
          <i class="fa-regular fa-envelope text-indigo-500"></i>
          <a href="mailto:support@yourdomain.com" class="font-semibold hover:underline">{{ $companySetup->email }}"</a>
        </div>
        <span class="hidden sm:inline-block text-slate-300">•</span>
        <div class="inline-flex items-center gap-2">
          <i class="fa-solid fa-shield-halved text-emerald-500"></i>
          <span>Verified support—we never ask for sensitive codes.</span>
        </div>
      </div>
    </div>

    {{-- fixed footer note on mobile --}}
    <div class="mt-3 text-center text-xs text-slate-500">
      জরুরি অবস্থায় নিকটস্থ কর্তৃপক্ষের সাথে যোগাযোগ করুন।
    </div>
  </div>
</div>
@endsection