@extends('layout.user')

@section('title', ($project['title'] ?? 'Project') . ' Update')

@section('content')
@php
  $title = (string) ($project['title'] ?? 'Project');
  $kicker = (string) ($project['kicker'] ?? 'Project Update');
  $summary = (string) ($project['summary'] ?? 'এই প্রজেক্টে কাজ চলছে।');
  $notice = (string) ($project['notice'] ?? 'খুব শীঘ্রই চালু হবে।');
  $icon = (string) ($project['icon'] ?? 'fa-solid fa-bell');
  $accentFrom = (string) ($project['accent_from'] ?? '#2563eb');
  $accentTo = (string) ($project['accent_to'] ?? '#1d4ed8');
@endphp

<style>
  :root{
    --pn-from: {{ $accentFrom }};
    --pn-to: {{ $accentTo }};
    --pn-soft: color-mix(in srgb, {{ $accentFrom }} 10%, white);
    --pn-ring: color-mix(in srgb, {{ $accentFrom }} 30%, white);
  }

  .pn-shell{max-width:560px;margin:0 auto;padding:14px 10px 96px}
  .pn-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    border:2px solid var(--pn-ring);
    box-shadow:0 20px 48px rgba(15,23,42,.08);
  }
  .pn-hero{
    padding:26px 20px 18px;
    text-align:center;
    background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--pn-from) 18%, transparent), transparent 34%),
      radial-gradient(circle at top right, color-mix(in srgb, var(--pn-to) 18%, transparent), transparent 34%),
      linear-gradient(135deg, #f8fbff 0%, var(--pn-soft) 100%);
  }
  .pn-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--pn-ring);
    color:var(--pn-from);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .pn-icon{
    width:76px;
    height:76px;
    border-radius:24px;
    display:grid;
    place-items:center;
    margin:16px auto 14px;
    color:#fff;
    font-size:30px;
    background:linear-gradient(135deg,var(--pn-from),var(--pn-to));
    box-shadow:0 16px 30px color-mix(in srgb, var(--pn-from) 28%, transparent);
  }
  .pn-title{
    margin:0;
    font-size:28px;
    line-height:1.2;
    font-weight:900;
    color:#0f172a;
  }
  .pn-summary{
    margin:10px auto 0;
    max-width:420px;
    color:#475569;
    font-size:14px;
    line-height:1.7;
    font-weight:700;
  }
  .pn-body{padding:18px 18px 22px}
  .pn-notice{
    border-radius:22px;
    padding:16px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--pn-from) 9%, white), #fff);
    border:1px solid var(--pn-ring);
  }
  .pn-notice-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .pn-notice-badge{
    width:40px;
    height:40px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--pn-from),var(--pn-to));
  }
  .pn-notice-title{
    margin:0;
    font-size:15px;
    font-weight:900;
    color:#0f172a;
  }
  .pn-notice-copy{
    margin:0;
    color:#475569;
    font-size:14px;
    line-height:1.7;
    font-weight:700;
  }
  .pn-points{
    display:grid;
    gap:10px;
    margin-top:14px;
  }
  .pn-point{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 13px;
    border-radius:18px;
    border:1px solid #e2e8f0;
    background:#fff;
  }
  .pn-point i{
    color:var(--pn-from);
    margin-top:2px;
  }
  .pn-point span{
    color:#334155;
    font-size:13px;
    line-height:1.6;
    font-weight:700;
  }
  .pn-actions{
    display:grid;
    gap:10px;
    margin-top:16px;
  }
  .pn-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:14px 16px;
    border-radius:18px;
    font-size:14px;
    font-weight:900;
    text-decoration:none !important;
    transition:transform .18s ease, opacity .18s ease;
  }
  .pn-btn:hover{transform:translateY(-1px)}
  .pn-btn-primary{
    background:linear-gradient(135deg,var(--pn-from),var(--pn-to));
    color:#fff !important;
    box-shadow:0 14px 28px color-mix(in srgb, var(--pn-from) 22%, transparent);
  }
  .pn-btn-secondary{
    background:#f8fafc;
    color:#334155 !important;
    border:1px solid #cbd5e1;
  }
  .pn-foot{
    margin-top:14px;
    text-align:center;
    color:#64748b;
    font-size:12px;
    font-weight:700;
  }

  @media (max-width:420px){
    .pn-shell{padding:10px 8px 92px}
    .pn-hero{padding:22px 16px 16px}
    .pn-icon{width:68px;height:68px;border-radius:22px;font-size:26px}
    .pn-title{font-size:24px}
    .pn-summary{font-size:13px}
    .pn-body{padding:14px 14px 18px}
  }
</style>

<div class="pn-shell">
  <div class="pn-card">
    <div class="pn-hero">
      <div class="pn-kicker">
        <i class="fa-solid fa-bell"></i>
        <span>{{ $kicker }}</span>
      </div>
      <div class="pn-icon"><i class="{{ $icon }}"></i></div>
      <h1 class="pn-title">{{ $title }}</h1>
      <p class="pn-summary">{{ $summary }}</p>
    </div>

    <div class="pn-body">
      <div class="pn-notice">
        <div class="pn-notice-head">
          <div class="pn-notice-badge"><i class="fa-solid fa-screwdriver-wrench"></i></div>
          <h2 class="pn-notice-title">আপডেট নোটিশ</h2>
        </div>
        <p class="pn-notice-copy">{{ $notice }}</p>

        <div class="pn-points">
          <div class="pn-point">
            <i class="fa-solid fa-circle-check"></i>
            <span>এই project card dashboard-এ add করা হয়েছে, launch complete হলে এখান থেকেই direct কাজ করতে পারবেন।</span>
          </div>
          <div class="pn-point">
            <i class="fa-solid fa-clock-rotate-left"></i>
            <span>বর্তমানে configuration, rules, submission flow এবং earning details final update-এ আছে।</span>
          </div>
          <div class="pn-point">
            <i class="fa-brands fa-telegram"></i>
            <span>চাইলে Telegram update link দিয়ে পরবর্তী announce দেখুন।</span>
          </div>
        </div>
      </div>

      <div class="pn-actions">
        <a href="{{ $telegramLink }}" target="_blank" rel="noopener" class="pn-btn pn-btn-primary">
          <i class="fa-brands fa-telegram"></i>
          <span>আপডেট দেখুন</span>
        </a>
        <a href="{{ route('dashboard') }}" class="pn-btn pn-btn-secondary">
          <i class="fa-solid fa-arrow-left"></i>
          <span>ড্যাশবোর্ডে ফিরে যান</span>
        </a>
      </div>

      <div class="pn-foot">Project live হলে এই notice-এর জায়গায় actual working page দেখানো যাবে।</div>
    </div>
  </div>
</div>
@endsection
