<template>
  <div class="closed-page" :dir="lang === 'ar' ? 'rtl' : 'ltr'" :lang="lang">

    <!-- Top bar (same branded bar as SurveyPublic) -->
    <div class="closed-topbar">
      <div class="closed-topbar__inner">
        <div class="closed-topbar__brand">
          <div class="closed-topbar__logo">IP</div>
          <span class="closed-topbar__name">InPractice</span>
        </div>
        <button @click="toggleLang" class="closed-lang-btn">
          {{ lang === 'ar' ? 'EN' : 'عربي' }}
        </button>
      </div>
    </div>

    <!-- Body -->
    <div class="closed-body">
      <div class="closed-card">

        <!-- Icon -->
        <div class="closed-icon">
          <svg viewBox="0 0 52 52" class="closed-icon__svg">
            <circle class="closed-icon__circle" cx="26" cy="26" r="25" fill="none"/>
            <path
              class="closed-icon__lock"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M18 24v-4a8 8 0 0 1 16 0v4"
            />
            <rect
              class="closed-icon__box"
              x="15" y="24" width="22" height="14" rx="3"
              fill="none"
            />
            <circle cx="26" cy="31" r="2" fill="currentColor"/>
          </svg>
        </div>

        <!-- Message -->
        <h1 class="closed-title">
          {{ lang === 'ar' ? 'الاستبيان مغلق' : 'Survey Closed' }}
        </h1>

        <p class="closed-sub">
          {{ lang === 'ar'
            ? 'هذا الاستبيان لم يعد يقبل إجابات جديدة. شكراً لاهتمامك.'
            : 'This survey is no longer accepting responses. Thank you for your interest.' }}
        </p>

        <!-- Survey name chip -->
        <div v-if="survey?.title_en" class="closed-chip">
          <i class="ti ti-clipboard"></i>
          {{ lang === 'ar' && survey.title_ar ? survey.title_ar : survey.title_en }}
        </div>

        <!-- Divider -->
        <div class="closed-divider"></div>

        <!-- InPractice CTA -->
        <p class="closed-cta-text">
          {{ lang === 'ar'
            ? 'هل أنت محترف في مجال المالية أو التسويق أو المبيعات؟'
            : 'Are you a Finance, Marketing, or Sales professional?' }}
        </p>

        <a href="/register" class="closed-cta-btn">
          {{ lang === 'ar' ? 'انضم إلى InPractice مجاناً' : 'Join InPractice for Free' }}
        </a>

        <p class="closed-cta-note">
          {{ lang === 'ar'
            ? 'المنصة المهنية لمصر والخليج — تعلّم، تواصل، اكسب'
            : 'The Professional Club for Egypt & GCC — Learn, Connect, Earn' }}
        </p>

      </div>

      <!-- Footer -->
      <div class="closed-footer">
        <span>Powered by <strong>InPractice</strong></span>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  survey: { type: Object, default: null },
})

const lang = ref(props.survey?.language ?? 'en')
const toggleLang = () => { lang.value = lang.value === 'en' ? 'ar' : 'en' }
</script>

<style scoped>
/* ══════════════════════════════════════════════════════════════
   SurveyClosed — standalone public page, no AppLayout
   ══════════════════════════════════════════════════════════════ */

.closed-page {
  min-height: 100vh;
  background: #F4F6F9;
  font-family: 'Inter', sans-serif;
  color: #0F2044;
  font-size: 14px;
}

.closed-page[lang="ar"] {
  font-family: 'Cairo', 'Inter', sans-serif;
}

/* ── Top bar ── */
.closed-topbar {
  background: #0F2044;
  box-shadow: 0 2px 12px rgba(15,32,68,0.2);
}

.closed-topbar__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.closed-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.closed-topbar__logo {
  width: 32px;
  height: 32px;
  background: #1D9E75;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.closed-topbar__name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.closed-lang-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.closed-lang-btn:hover { background: rgba(255,255,255,0.15); }

/* ── Body ── */
.closed-body {
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* ── Card ── */
.closed-card {
  background: #fff;
  border: 1px solid #DDE2EB;
  border-radius: 18px;
  padding: 48px 40px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 30px rgba(15,32,68,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: cl-fade-up 0.4s ease both;
}

@keyframes cl-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Lock icon ── */
.closed-icon {
  width: 72px;
  height: 72px;
  color: #D85A30;
}

.closed-icon__svg {
  width: 100%;
  height: 100%;
}

.closed-icon__circle {
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: stroke-anim 0.6s cubic-bezier(0.65,0,0.45,1) 0.2s forwards;
}

.closed-icon__lock,
.closed-icon__box {
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: stroke-anim 0.5s ease 0.7s forwards;
}

@keyframes stroke-anim {
  to { stroke-dashoffset: 0; }
}

/* ── Text ── */
.closed-title {
  font-size: 24px;
  font-weight: 700;
  color: #0F2044;
  line-height: 1.2;
}

.closed-sub {
  font-size: 14px;
  color: #4A5568;
  line-height: 1.7;
  max-width: 340px;
}

/* ── Survey chip ── */
.closed-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FAECE7;
  color: #D85A30;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.closed-chip i { font-size: 13px; flex-shrink: 0; }

/* ── Divider ── */
.closed-divider {
  width: 100%;
  height: 1px;
  background: #EEF1F6;
  margin: 4px 0;
}

/* ── CTA ── */
.closed-cta-text {
  font-size: 14px;
  font-weight: 500;
  color: #0F2044;
}

.closed-cta-btn {
  display: inline-block;
  background: #1D9E75;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(29,158,117,0.30);
  font-family: inherit;
}

.closed-cta-btn:hover {
  opacity: 0.9;
  box-shadow: 0 6px 20px rgba(29,158,117,0.4);
}

.closed-cta-note {
  font-size: 12px;
  color: #8A96A8;
  line-height: 1.5;
}

/* ── Footer ── */
.closed-footer {
  font-size: 12px;
  color: #8A96A8;
  text-align: center;
}

.closed-footer strong { color: #1D9E75; }

/* ── Mobile ── */
@media (max-width: 480px) {
  .closed-card { padding: 36px 24px; }
}
</style>
