<template>
  <PageShell :title="policy.title" subtitle="Ghost Guild Policy">
    <div class="policy-prose">
      <p class="policy-status">This policy is being finalized.</p>
      <p>
        {{ policy.description }}
      </p>
      <p>
        The full text will be published here ahead of launch. In the meantime,
        the expectations that apply are summarized in our
        <NuxtLink to="/community-guidelines">Community Guidelines</NuxtLink>.
      </p>
      <p>
        Questions? Contact the Membership Committee at
        <a href="mailto:hello@ghostguild.org">hello@ghostguild.org</a>.
      </p>
    </div>
  </PageShell>
</template>

<script setup>
// Note: /policies/code-of-conduct and /policies/conflict-resolution are
// handled by routeRules in nuxt.config.ts and redirect to external Obsidian
// pages. /policies/privacy and /policies/terms have dedicated pages
// (privacy.vue, terms.vue) that take precedence over this dynamic route.
const POLICIES = {
  'by-laws': {
    title: 'By-Laws',
    description:
      "Ghost Guild's governing by-laws, including membership classes, voting rights, and the structure of the Membership Committee.",
  },
}

const route = useRoute()
const slug = String(route.params.slug || '')
const policy = POLICIES[slug]

if (!policy) {
  throw createError({ statusCode: 404, statusMessage: 'Policy not found', fatal: true })
}

useHead({
  title: `${policy.title} · Ghost Guild`,
})
</script>

<style scoped>
.policy-prose {
  max-width: 640px;
  padding: 32px;
}

.policy-status {
  font-family: "Commit Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--candle);
  margin-bottom: 16px;
}

.policy-prose p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 14px;
}

.policy-prose a {
  color: var(--candle);
}

@media (max-width: 640px) {
  .policy-prose {
    padding: 20px 16px;
  }
}
</style>
