<script setup lang="ts">
import { ref, watch, onBeforeUnmount } from 'vue'
import { useIsSlideActive } from '@slidev/client'

const candidates = [
  'Apple',
  'Google',
  'Meta',
  'Microsoft',
  'The U.S.',
  'China',
  'The U.N.',
  'WEF',
  'Visa',
  'Cloudflare',
  'Parity',
  'Karim',
]

const slotIdx = ref(-1)
const settled = ref(false)
let timer: ReturnType<typeof setTimeout> | undefined

function teardown() {
  if (timer) { clearTimeout(timer); timer = undefined }
}

function kickoff() {
  slotIdx.value = -1
  settled.value = false
  let i = 0
  const cycle = () => {
    if (i >= candidates.length) {
      settled.value = true
      return
    }
    slotIdx.value = i
    const delay = 180 + i * 40
    i += 1
    timer = setTimeout(cycle, delay)
  }
  cycle()
}

const isActive = useIsSlideActive()
watch(isActive, (active) => {
  teardown()
  if (active) kickoff()
}, { immediate: true })

onBeforeUnmount(teardown)
</script>

<div class="reg-slide">

  <div class="owner-row">
    <span class="owner-label">OWNED BY</span>
    <span class="owner-arrow">&rarr;</span>
    <span class="owner-slot" :class="{ settled }">
      <span v-if="!settled" :key="slotIdx" class="candidate">{{ slotIdx >= 0 ? candidates[slotIdx] : '' }}</span>
      <span v-else class="none">no one</span>
    </span>
  </div>

  <div class="rule"></div>

  <div class="explain">
    A registry of <em>who counts as human</em><br>
    is too dangerous for any company to own.
  </div>
</div>

<style scoped>
.reg-slide {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 4rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.reg-slide .eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.25rem;
}
.reg-slide .headline {
  font-family: 'DM Serif Display', serif;
  font-size: 3.4rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.reg-slide .headline em { font-style: italic; }
.reg-slide .rule {
  width: 2.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 1.75rem 0;
}

/* Owner cycling slot — the centerpiece */
.reg-slide .owner-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}
.reg-slide .owner-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.reg-slide .owner-arrow {
  font-family: 'Inter', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.4rem;
  line-height: 1;
}
.reg-slide .owner-slot {
  min-width: 18rem;
  padding: 0.75rem 1.6rem;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.8rem;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  transition:
    border-color 0.7s ease,
    background 0.7s ease,
    box-shadow 0.7s ease,
    color 0.7s ease;
}
.reg-slide .owner-slot.settled {
  border-color: rgba(90, 224, 138, 0.7);
  background: rgba(90, 224, 138, 0.08);
  box-shadow: 0 0 26px rgba(90, 224, 138, 0.35);
}
.reg-slide .owner-slot .candidate {
  display: inline-block;
  animation: candidate-in 0.16s ease both;
}
.reg-slide .owner-slot .none {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.95rem;
  color: #5ae08a;
  text-shadow: 0 0 14px rgba(90, 224, 138, 0.4);
  letter-spacing: 0.04em;
  animation: settle-in 0.55s ease both;
}
.reg-slide .explain {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 40rem;
}
.reg-slide .explain em { font-style: italic; color: #ffffff; }

@keyframes candidate-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes settle-in {
  from { opacity: 0; transform: translateY(3px); letter-spacing: 0.2em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: 0.04em; }
}
</style>

<!--
A central database of verified humans, is too dangerous for a single company to own. 

So here is where decentralization actually earns its place, not as a synonym of freedom, but as a strict security requirement. 

Humanity only means something, when no central authority can quitely print more humans. 

So how can we guarantee those properties? 
-->
