<script setup>
const props = defineProps({
  // 'inline' renders as a panel (used inside Profile → Security Keys)
  // 'modal'  renders inside a card body (used by signin modal)
  variant: {
    type: String,
    default: 'inline',
    validator: (v) => ['inline', 'modal'].includes(v)
  }
})

const { t } = useTranslation()

const sections = computed(() => ([
  {
    key: 'no-password',
    title: t.value.passkey_explainer_section1_title,
    body: t.value.passkey_explainer_section1_body,
    icon: '/assets/passkey/passkeyIconFrame.svg',
    color: '#2563eb', // blue
    icons: null
  },
  {
    key: 'biometrics',
    title: t.value.passkey_explainer_section2_title,
    body: t.value.passkey_explainer_section2_body,
    icon: null,
    color: '#7c3aed', // violet
    icons: [
      { src: '/assets/passkey/passkeyContentFace.svg',   color: '#7c3aed' },
      { src: '/assets/passkey/passkeyContentFinger.svg', color: '#0ea5e9' },
      { src: '/assets/passkey/passkeyNumberPad.svg',     color: '#10b981' }
    ]
  },
  {
    key: 'cross-device',
    title: t.value.passkey_explainer_section3_title,
    body: t.value.passkey_explainer_section3_body,
    icon: '/assets/passkey/passkeyIconFrame.svg',
    color: '#0ea5e9', // sky
    icons: null
  }
]))
</script>

<template>
  <section class="pk-explainer" :class="`pk-explainer--${variant}`">
    <header v-if="variant === 'inline'" class="pk-head">
      <h3 class="pk-head__title">
        <span class="pk-head__icon" :style="{ '--pk-color': '#2563eb' }">
          <img src="/assets/passkey/passkeyIconFrame.svg" alt="" />
        </span>
        {{ t.passkey_explainer_title }}
      </h3>
    </header>

    <ul class="pk-list">
      <li v-for="s in sections" :key="s.key" class="pk-row">
        <span v-if="s.icon" class="pk-bubble" :style="{ '--pk-color': s.color }">
          <img :src="s.icon" alt="" />
        </span>
        <span v-else class="pk-bubble-group">
          <span
            v-for="(ic, i) in s.icons"
            :key="i"
            class="pk-bubble pk-bubble--mini"
            :style="{ '--pk-color': ic.color }"
          >
            <img :src="ic.src" alt="" />
          </span>
        </span>
        <div class="pk-text">
          <h4 class="pk-text__title">{{ s.title }}</h4>
          <p class="pk-text__body">{{ s.body }}</p>
        </div>
      </li>
    </ul>
  </section>
</template>

<style scoped>
.pk-explainer {
  --pk-radius: 14px;
}
.pk-explainer--inline {
  padding: 1.25rem;
  background: var(--theme-bg-primary, #fff);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: var(--pk-radius);
}

.pk-head { margin-bottom: 1rem; }
.pk-head__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--theme-text-primary, #111827);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.pk-head__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pk-color) 15%, transparent);
}
.pk-head__icon img { width: 18px; height: 18px; display: block; }

.pk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pk-row {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
}

.pk-bubble {
  --pk-color: #2563eb;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pk-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pk-color) 28%, transparent);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--pk-color) 60%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pk-bubble:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--pk-color) 70%, transparent);
}
.pk-bubble img {
  width: 24px;
  height: 24px;
  display: block;
}

.pk-bubble-group {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 56px;
  height: 48px;
  position: relative;
}
.pk-bubble--mini {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bg-primary, #fff);
  background: color-mix(in srgb, var(--pk-color) 18%, transparent);
}
.pk-bubble--mini img { width: 18px; height: 18px; }
.pk-bubble--mini:nth-child(1) { left: 0; z-index: 3; }
.pk-bubble--mini:nth-child(2) { left: 16px; z-index: 2; }
.pk-bubble--mini:nth-child(3) { left: 32px; z-index: 1; }
.pk-bubble--mini:hover { transform: translateY(calc(-50% - 2px)); z-index: 4; }

.pk-text { min-width: 0; }
.pk-text__title {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--theme-text-primary, #111827);
  line-height: 1.3;
}
.pk-text__body {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--theme-text-secondary, #4b5563);
}

/* Modal variant: tighter spacing, no surrounding card (modal already provides one) */
.pk-explainer--modal .pk-list { gap: 1.1rem; }
.pk-explainer--modal .pk-row { align-items: center; }

@media (max-width: 480px) {
  .pk-bubble { width: 42px; height: 42px; }
  .pk-bubble img { width: 22px; height: 22px; }
  .pk-text__title { font-size: 0.9rem; }
  .pk-text__body { font-size: 0.82rem; }
}
</style>
