<!DOCTYPE html>
<html lang="bn">
<head>
  @php
    /** @var \App\Models\GeneralSetting $settings */
    $settings = $settings ?? new \App\Models\GeneralSetting();
    $siteLabel = app_site_label();
    $siteHost = app_base_host();
    $supportEmail = app_support_email();
    $siteName = $settings->site_name ?? 'TASK EARNING';
    $siteDesc = $settings->site_description ?? 'Professional business platform in Bangladesh';
    $shortSiteName = $siteLabel !== '' ? $siteLabel : $siteName;
    $alternateSiteName = trim((string) ($siteLabel !== '' ? $siteLabel : $siteHost));
    $pageTitle = trim($__env->yieldContent('title'));
    $fullTitle = $pageTitle !== '' ? $pageTitle : ($siteName . ' | Professional Business Platform');
    $metaDesc = trim($__env->yieldContent('meta_description')) ?: $siteDesc;
    $metaKeywords = trim($__env->yieldContent('meta_keywords')) ?: implode(', ', array_values(array_filter(array_unique([
      $siteName,
      $siteLabel,
      $siteHost,
      'Bangladesh',
      'digital business',
      'ecommerce',
      'reseller',
    ]))));
    $robotsContent = trim($__env->yieldContent('meta_robots')) ?: 'index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1';
    $canonicalUrl = trim($__env->yieldContent('canonical_url'));
    if ($canonicalUrl === '') {
      $canonicalQuery = request()->except([
        'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid'
      ]);
      $canonicalUrl = request()->url();
      if (!empty($canonicalQuery)) {
        $canonicalUrl .= '?' . \Illuminate\Support\Arr::query($canonicalQuery);
      }
    }
    $siteImageRaw = trim((string) (($settings->banner ?? null) ?: ($settings->logo ?? null) ?: ($settings->favicon ?? null) ?: ''));
    $defaultImage = $siteImageRaw !== ''
      ? (preg_match('/^https?:\/\//i', $siteImageRaw) ? $siteImageRaw : asset(ltrim($siteImageRaw, '/')))
      : asset('favicon.png');
    $metaImage = trim($__env->yieldContent('meta_image')) ?: $defaultImage;
    $ogTitle = trim($__env->yieldContent('og_title')) ?: $fullTitle;
    $ogDesc = trim($__env->yieldContent('og_description')) ?: $metaDesc;
    $sameAsLinks = \App\Models\GeneralSetting::socialProfileLinks($settings);
    $organizationSchema = [
      '@context' => 'https://schema.org',
      '@type' => 'Organization',
      '@id' => url('/') . '#organization',
      'name' => $siteName,
      'url' => url('/'),
      'description' => $siteDesc,
      'email' => $supportEmail,
    ];
    if ($alternateSiteName !== '' && strcasecmp($alternateSiteName, $siteName) !== 0) {
      $organizationSchema['alternateName'] = $alternateSiteName;
    }
    if ($defaultImage !== '') {
      $organizationSchema['logo'] = [
        '@type' => 'ImageObject',
        'url' => $defaultImage,
      ];
      $organizationSchema['image'] = $defaultImage;
    }
    if (count($sameAsLinks) > 0) {
      $organizationSchema['sameAs'] = $sameAsLinks;
    }
    $websiteSchema = [
      '@context' => 'https://schema.org',
      '@type' => 'WebSite',
      '@id' => url('/') . '#website',
      'name' => $siteName,
      'url' => url('/'),
      'description' => $siteDesc,
      'inLanguage' => 'bn-BD',
      'publisher' => ['@id' => url('/') . '#organization'],
      'potentialAction' => [
        '@type' => 'SearchAction',
        'target' => route('shop.search') . '?q={search_term_string}',
        'query-input' => 'required name=search_term_string',
      ],
    ];
    if ($alternateSiteName !== '' && strcasecmp($alternateSiteName, $siteName) !== 0) {
      $websiteSchema['alternateName'] = $alternateSiteName;
    }
    $googleAnalyticsId = $settings->google_analytics_id;
    $googleTagManagerId = $settings->google_tag_manager_id;
    $facebookPixelId = $settings->facebook_pixel_id;
    $customHeadTrackingCode = $settings->custom_head_tracking_code;
    $customBodyTrackingCode = $settings->custom_body_tracking_code;
  @endphp
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>{{ $fullTitle }}</title>
  <meta name="application-name" content="{{ $siteName }}">
  <meta name="apple-mobile-web-app-title" content="{{ $shortSiteName }}">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="description" content="{{ $metaDesc }}">
  <meta name="keywords" content="{{ $metaKeywords }}">
  <meta name="robots" content="{{ $robotsContent }}">
  <link rel="canonical" href="{{ $canonicalUrl }}">
  <link rel="manifest" href="{{ route('seo.manifest') }}">
  <meta property="og:title" content="{{ $ogTitle }}">
  <meta property="og:description" content="{{ $ogDesc }}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ $canonicalUrl }}">
  <meta property="og:image" content="{{ $metaImage }}">
  <meta property="og:image:alt" content="{{ $siteName }}">
  <meta property="og:site_name" content="{{ $siteName }}">
  <meta property="og:locale" content="bn_BD">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{ $ogTitle }}">
  <meta name="twitter:description" content="{{ $ogDesc }}">
  <meta name="twitter:image" content="{{ $metaImage }}">
  <meta name="theme-color" content="{{ $settings->icon_color ?? '#2563eb' }}">
  @foreach(\App\Models\GeneralSetting::verificationTokens($settings->google_site_verification) as $googleVerificationToken)
    <meta name="google-site-verification" content="{{ $googleVerificationToken }}">
  @endforeach
  @foreach(\App\Models\GeneralSetting::verificationTokens($settings->bing_site_verification) as $bingVerificationToken)
    <meta name="msvalidate.01" content="{{ $bingVerificationToken }}">
  @endforeach
  @includeIf('partials.favicon')
  <script type="application/ld+json">{!! json_encode($organizationSchema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
  <script type="application/ld+json">{!! json_encode($websiteSchema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
  @yield('structured_data')
  @if($googleTagManagerId)
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
      var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
      j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
      f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','{{ $googleTagManagerId }}');
    </script>
  @endif
  @if($googleAnalyticsId && !$googleTagManagerId)
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ $googleAnalyticsId }}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{{ $googleAnalyticsId }}');
    </script>
  @endif
  @if($facebookPixelId)
    <script>
      !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
      n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '{{ $facebookPixelId }}');
      fbq('track', 'PageView');
    </script>
  @endif
  @if($customHeadTrackingCode)
    {!! $customHeadTrackingCode !!}
  @endif

  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&family=Inter:wght@400;600;800&display=swap');

    :root{
      --base-font: 14px;
      --header-h: 72px;
      --safe-b: env(safe-area-inset-bottom);
      --safe-t: env(safe-area-inset-top);
      --shield-h: 8px;
      --gap-after-header: 8px;
      --sidebar-w: min(68vw, 270px);
    }

    html{
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      font-size: var(--base-font);
    }

    body{
      font-family: 'Inter','Hind Siliguri',sans-serif;
      background:#f0f4f8;
      color:#0f172a;
      margin:0;
      min-height:100%;
      overflow-x:hidden;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    ::-webkit-scrollbar{display:none}

    .header-top-shield{
      position:fixed;
      top:0; left:0;
      width:100%;
      height:var(--shield-h);
      background:#f0f4f8;
      z-index:1005;
    }

    #sidebar{
      background:rgba(255,255,255,.98);
      backdrop-filter: blur(25px);
      border-right:1px solid rgba(59, 130, 246, 0.1);
      transition: transform .38s cubic-bezier(.175,.885,.32,1.15);
      width: var(--sidebar-w);
      max-width: 270px;
      min-width: 220px;
    }

    .sidebar-header-box{
      background: linear-gradient(135deg,#2563eb 0%,#1e40af 100%);
      border-radius: 0 0 52px 0;
      box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
    }

    .nav-item{
      position:relative;
      margin:8px 14px;
      padding:12px 12px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      gap:10px;
      color:#334155;
      font-weight:800;
      font-size:14px;
      line-height:1.2;
      transition: all .2s ease;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }

    .nav-item i{
      font-size:15px;
      color:#2563eb;
      background:#f1f5f9;
      width:36px;
      height:36px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius: 13px;
      box-shadow: 0 4px 10px rgba(0,0,0,.03);
      transition: all .2s ease;
      flex:0 0 auto;
    }

    .nav-item:hover{
      background: linear-gradient(90deg,#1e40af 0%,#3b82f6 100%);
      color:#fff;
      transform: translateX(6px);
      box-shadow: 0 12px 22px rgba(30, 64, 175, 0.18);
    }

    .nav-item:hover i{
      transform: rotate(360deg) scale(.96);
      background: rgba(255,255,255,.2);
      color:#fff;
    }

    @keyframes fadeInScale{
      from{opacity:0; transform: translateY(-10px) scale(.98)}
      to{opacity:1; transform: translateY(0) scale(1)}
    }
    .animate-dropdown{ animation: fadeInScale .2s ease-out forwards; }

    .header-shell{
      position:fixed;
      top:0; left:0; width:100%; z-index:1001;
      padding-top: calc(var(--shield-h) + var(--safe-t));
      padding-left: 16px; padding-right: 16px;
    }

    .header-card{
      max-width: 560px;
      margin: 0 auto;
      height: var(--header-h);
      border-radius: 18px;
    }

    #appMain{
      padding-top: calc(var(--shield-h) + var(--safe-t) + var(--header-h) + var(--gap-after-header));
    }

    @media (min-width: 768px){
      .header-card{ max-width: 760px; }
    }

    .tutorial-modal{
      position:fixed;
      inset:0;
      z-index:1200;
      display:none;
      align-items:center;
      justify-content:center;
      padding:14px;
      background:rgba(2,6,23,.72);
    }
    .tutorial-card{
      width:min(920px, 100%);
      max-height:90vh;
      background:#fff;
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 18px 50px rgba(0,0,0,.35);
      display:flex;
      flex-direction:column;
    }
    .tutorial-head{
      padding:12px 14px;
      border-bottom:1px solid #e2e8f0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .tutorial-title{
      margin:0;
      font-size:15px;
      font-weight:900;
      color:#0f172a;
      line-height:1.3;
    }
    .tutorial-close{
      width:34px;
      height:34px;
      border:0;
      border-radius:10px;
      background:#e2e8f0;
      color:#0f172a;
      font-size:18px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .tutorial-body{
      padding:10px;
      overflow:auto;
      background:#0b1220;
    }
    .tutorial-frame-wrap{
      width:100%;
      aspect-ratio:16/9;
      background:#000;
      border-radius:10px;
      overflow:hidden;
    }
    .tutorial-frame-wrap iframe,
    .tutorial-frame-wrap video{
      width:100%;
      height:100%;
      border:0;
      display:block;
    }
  </style>

  @stack('head')
</head>

<body class="min-h-screen">
  @if($googleTagManagerId)
    <noscript>
      <iframe src="https://www.googletagmanager.com/ns.html?id={{ $googleTagManagerId }}"
              height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>
  @endif
  @if($facebookPixelId)
    <noscript>
      <img height="1" width="1" style="display:none"
           src="https://www.facebook.com/tr?id={{ $facebookPixelId }}&ev=PageView&noscript=1"
           alt="">
    </noscript>
  @endif
  @if($customBodyTrackingCode)
    {!! $customBodyTrackingCode !!}
  @endif
  <div class="header-top-shield"></div>

  <div id="sidebarOverlay" onclick="toggleSidebar()"
       class="fixed inset-0 bg-blue-900/20 z-[1009] hidden backdrop-blur-sm transition-opacity duration-300"></div>

  <aside id="sidebar" class="fixed top-0 left-0 h-full -translate-x-full z-[1010] shadow-2xl rounded-r-[38px] flex flex-col">
    <div class="sidebar-header-box p-6 text-white relative">
      <div class="flex items-center gap-4">
        <div class="w-12 h-12 rounded-full overflow-hidden border border-white/30 shadow-lg bg-white/20 flex items-center justify-center">
          <img
            src="{{ !empty($settings->logo) ? asset(ltrim($settings->logo,'/')) : 'https://via.placeholder.com/80x80?text=Logo' }}"
            class="w-full h-full object-cover"
            alt="Logo"
          >
        </div>
        <div class="min-w-0">
          <h2 class="font-black text-[15px] leading-tight truncate">
            {{ $settings->site_name ?? 'TASK EARNING' }}
          </h2>
          <p class="text-[10px] tracking-[0.2em] uppercase opacity-80 font-bold">Career Portal</p>
        </div>
      </div>

      <button onclick="toggleSidebar()" class="absolute top-4 right-4 text-white/60 hover:text-white transition-all scale-125">
        <i class="fas fa-times-circle"></i>
      </button>
    </div>

    <nav class="mt-5 flex-1 overflow-y-auto pb-6">
      <a href="{{ url('/') }}" class="nav-item"><i class="fas fa-th-large"></i> <span>হোম</span></a>
      <a href="{{ url('/tutorial') }}" class="nav-item"><i class="fas fa-graduation-cap"></i> <span>টিউটোরিয়াল গাইড</span></a>
      <a href="{{ url('/helpline') }}" class="nav-item"><i class="fas fa-headset"></i> <span>হেল্প সেন্টার</span></a>

      <div class="mt-3">
        <a href="{{ url('/login') }}" class="nav-item"><i class="fas fa-sign-in-alt"></i> <span>লগইন করুন</span></a>
        <a href="{{ url('/register') }}" class="nav-item"><i class="fas fa-user-plus"></i> <span>রেজিস্ট্রেশন</span></a>
      </div>
    </nav>

    <div class="p-6" style="padding-bottom: calc(18px + env(safe-area-inset-bottom));">
      <div class="p-5 bg-gradient-to-br from-blue-50 to-white rounded-[22px] border border-blue-100 shadow-sm text-center">
        <p class="text-[10px] font-black text-blue-600 uppercase tracking-widest mb-3">আমাদের সাথে যুক্ত হন</p>
        <div class="flex justify-center gap-5 text-xl">
          @if(!empty($settings->facebook_link))<a href="{{ $settings->facebook_link }}" target="_blank" class="text-blue-700 hover:scale-125 transition"><i class="fab fa-facebook"></i></a>@endif
          @if(!empty($settings->telegram_link))<a href="{{ $settings->telegram_link }}" target="_blank" class="text-sky-500 hover:scale-125 transition"><i class="fab fa-telegram"></i></a>@endif
          @if(!empty($settings->youtube_link))<a href="{{ $settings->youtube_link }}" target="_blank" class="text-red-600 hover:scale-125 transition"><i class="fab fa-youtube"></i></a>@endif
          @if(!empty($settings->whatsapp_link))<a href="{{ $settings->whatsapp_link }}" target="_blank" class="text-green-600 hover:scale-125 transition"><i class="fab fa-whatsapp"></i></a>@endif
        </div>
      </div>
    </div>
  </aside>

  <header class="header-shell">
    <div class="header-card bg-gradient-to-r from-blue-700 to-indigo-600 backdrop-blur-xl shadow-[0_8px_30px_rgba(30,64,175,0.30)]
                flex items-center justify-between px-5 border-2 border-white/30 relative z-10">

      <div class="flex items-center gap-3 min-w-0">
        <button onclick="toggleSidebar()"
                class="w-10 h-10 flex flex-col items-center justify-center gap-[3.5px] rounded-xl bg-white/20 hover:bg-white/30 transition-all text-white border-2 border-white/20 shadow-md active:scale-90 group">
          <span class="w-4 h-[2.5px] bg-white rounded-full group-hover:w-3 transition-all"></span>
          <span class="w-4 h-[2.5px] bg-white rounded-full"></span>
          <span class="w-4 h-[2.5px] bg-white rounded-full group-hover:w-4 transition-all"></span>
        </button>

        <div class="flex flex-col min-w-0">
          <span class="text-white font-black tracking-tight uppercase leading-[0.95] truncate" style="font-size:16px;">
            {{ $settings->site_name ?? 'TASK EARNING' }}
          </span>
          <span class="text-white/80 font-bold uppercase tracking-[2px]" style="font-size:10px; margin-top:4px;">
            {{ $siteLabel }}
          </span>
        </div>
      </div>

      <div class="flex items-center gap-3">
        <div class="relative" onclick="toggleProfileMenu(event)">
          <div class="w-10 h-10 rounded-full border-2 border-white/70 shadow-lg bg-white/10 overflow-hidden cursor-pointer transition hover:scale-105 active:scale-95">
            <img
              src="{{ !empty($settings->logo) ? asset(ltrim($settings->logo,'/')) : 'https://via.placeholder.com/80x80?text=Logo' }}"
              class="w-full h-full object-cover"
              alt="Logo"
            >
          </div>

          <div id="profileMenu" class="absolute right-0 top-[55px] w-52 hidden bg-white rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.15)]
              py-3 border border-gray-100 z-[1002] animate-dropdown overflow-hidden">
            <div class="px-5 py-2 bg-blue-50/80 border-b border-blue-100 mb-1">
              <p class="text-[10px] text-blue-600 font-black uppercase tracking-widest">Account</p>
              <p class="text-[12px] font-bold text-gray-800">অপশনসমূহ</p>
            </div>
            <a href="{{ url('/login') }}" class="flex items-center gap-3 px-5 py-2.5 hover:bg-blue-50 text-gray-700 font-bold transition-all group/item">
              <div class="w-7 h-7 rounded-lg bg-blue-100 flex items-center justify-center group-hover/item:bg-blue-600 transition-colors">
                <i class="fas fa-sign-in-alt text-blue-600 group-hover/item:text-white text-[12px]"></i>
              </div>
              <span style="font-size:12px;">লগইন করুন</span>
            </a>
            <a href="{{ url('/register') }}" class="flex items-center gap-3 px-5 py-2.5 hover:bg-blue-50 text-gray-700 font-bold transition-all group/item">
              <div class="w-7 h-7 rounded-lg bg-blue-100 flex items-center justify-content-center group-hover/item:bg-blue-600 transition-colors">
                <i class="fas fa-user-plus text-blue-600 group-hover/item:text-white text-[12px]"></i>
              </div>
              <span style="font-size:12px;">রেজিস্ট্রেশন</span>
            </a>
          </div>
        </div>
      </div>

    </div>
  </header>

  <main id="appMain">
    @yield('content')
  </main>

  <footer class="bg-white border-t border-gray-100 py-12" style="padding-bottom: calc(48px + env(safe-area-inset-bottom));">
    <div class="max-w-7xl mx-auto px-4 text-center space-y-4">
      <p class="text-sm font-extrabold text-gray-900">
        © {{ date('Y') }} <span class="text-blue-600">{{ $settings->site_name ?? 'TASK EARNING' }}</span> DIGITAL PLATFORM
      </p>
      <p class="text-sm font-bold text-gray-600 leading-relaxed">
        {{ $settings->site_description ?? 'TASK EARNING - Build your career smartly.' }}
      </p>
      <p class="text-sm font-bold text-gray-700">
        Official Website : <span class="text-blue-600 font-extrabold">{{ $siteLabel }}</span>
      </p>
      <p class="text-sm font-bold text-gray-800">
        E-mail Support :
        <a href="mailto:{{ $supportEmail }}" class="text-blue-600 hover:underline">{{ $supportEmail }}</a>
      </p>
      <div class="flex justify-center gap-6 pt-5 text-gray-400">
        @if(!empty($settings->facebook_link))<a href="{{ $settings->facebook_link }}" target="_blank" class="hover:text-blue-600 transition" title="Facebook"><i class="fab fa-facebook-f text-xl"></i></a>@endif
        @if(!empty($settings->telegram_link))<a href="{{ $settings->telegram_link }}" target="_blank" class="hover:text-sky-500 transition" title="Telegram"><i class="fab fa-telegram text-xl"></i></a>@endif
        @if(!empty($settings->youtube_link))<a href="{{ $settings->youtube_link }}" target="_blank" class="hover:text-red-600 transition" title="YouTube"><i class="fab fa-youtube text-xl"></i></a>@endif
        @if(!empty($settings->whatsapp_link))<a href="{{ $settings->whatsapp_link }}" target="_blank" class="hover:text-green-600 transition" title="WhatsApp"><i class="fab fa-whatsapp text-xl"></i></a>@endif
      </div>
    </div>
  </footer>

  <div id="projectTutorialModal" class="tutorial-modal" aria-hidden="true">
    <div class="tutorial-card" role="dialog" aria-modal="true" aria-labelledby="projectTutorialTitle">
      <div class="tutorial-head">
        <h3 id="projectTutorialTitle" class="tutorial-title">প্রজেক্ট ভিডিও</h3>
        <button type="button" class="tutorial-close" id="projectTutorialClose" aria-label="Close">×</button>
      </div>
      <div class="tutorial-body">
        <div class="tutorial-frame-wrap" id="projectTutorialFrameWrap"></div>
      </div>
    </div>
  </div>

  <script>
    function toggleProfileMenu(e){
      e.stopPropagation();
      var pm = document.getElementById('profileMenu');
      if(pm) pm.classList.toggle('hidden');
    }

    window.addEventListener('click', function(){
      var pm = document.getElementById('profileMenu');
      if(pm) pm.classList.add('hidden');
    });

    var sidebar = document.getElementById('sidebar');
    var overlay = document.getElementById('sidebarOverlay');

    function setTawkVisibility(hidden){
      try{
        if (typeof Tawk_API !== 'undefined' && Tawk_API && typeof Tawk_API.hideWidget === 'function'){
          if(hidden) Tawk_API.hideWidget();
          else Tawk_API.showWidget();
        } else {
          var tw = document.getElementById('tawkchat-container');
          if(tw) tw.style.display = hidden ? 'none' : '';
        }
      }catch(e){}
    }

    function toggleSidebar(){
      if(sidebar) sidebar.classList.toggle('-translate-x-full');
      if(overlay) overlay.classList.toggle('hidden');
      var isOpen = overlay && !overlay.classList.contains('hidden');
      document.body.style.overflow = isOpen ? 'hidden' : '';
      setTawkVisibility(isOpen);
    }
  </script>

  <script>
    (() => {
      const modal = document.getElementById('projectTutorialModal');
      const closeBtn = document.getElementById('projectTutorialClose');
      const titleEl = document.getElementById('projectTutorialTitle');
      const frameWrap = document.getElementById('projectTutorialFrameWrap');

      if (!modal || !closeBtn || !titleEl || !frameWrap) return;

      const closeModal = () => {
        frameWrap.innerHTML = '';
        modal.style.display = 'none';
        modal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
      };

      const openModal = (title, type, src) => {
        if (!type || !src) return;

        titleEl.textContent = (title || '').trim() || 'প্রজেক্ট ভিডিও';
        frameWrap.innerHTML = '';

        if (type === 'video') {
          const video = document.createElement('video');
          video.src = src;
          video.controls = true;
          video.playsInline = true;
          frameWrap.appendChild(video);
        } else {
          const iframe = document.createElement('iframe');
          iframe.src = src;
          iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
          iframe.allowFullscreen = true;
          iframe.referrerPolicy = 'strict-origin-when-cross-origin';
          frameWrap.appendChild(iframe);
        }

        modal.style.display = 'flex';
        modal.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
      };

      document.addEventListener('click', (e) => {
        const trigger = e.target.closest('.project-tutorial-trigger');
        if (!trigger) return;

        const src = (trigger.dataset.tutorialSrc || '').trim();
        const type = (trigger.dataset.tutorialType || '').trim();
        const title = (trigger.dataset.tutorialTitle || '').trim();

        if (!src || !type) {
          e.preventDefault();
          return;
        }

        e.preventDefault();
        openModal(title, type, src);
      });

      closeBtn.addEventListener('click', closeModal);
      modal.addEventListener('click', (e) => {
        if (e.target === modal) closeModal();
      });
      window.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && modal.style.display === 'flex') {
          closeModal();
        }
      });
    })();
  </script>

  @unless(request()->routeIs('welcome', 'login', 'login.form', 'register'))
    <script type="text/javascript">
      var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
      (function(){
        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
        s1.async=true;
        s1.src='https://embed.tawk.to/6976fdb6678dd919824c89d9/default';
        s1.charset='UTF-8';
        s1.setAttribute('crossorigin','*');
        s0.parentNode.insertBefore(s1,s0);

        s1.onload = function(){
          try{
            var overlay = document.getElementById('sidebarOverlay');
            var isOpen = overlay && !overlay.classList.contains('hidden');
            if (typeof Tawk_API !== 'undefined' && Tawk_API && typeof Tawk_API.hideWidget === 'function'){
              if(isOpen) Tawk_API.hideWidget();
            }
          }catch(e){}
        };
      })();
    </script>
  @endunless

  @stack('scripts')
</body>
</html>
