<template>
  <div class="docs-container p-6 bg-slate-900/50 rounded-xl border border-slate-700/50 backdrop-blur-md overflow-y-auto max-h-[80vh]">
    <h1 class="text-3xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
      Welcome to Plexus
    </h1>

    <section class="mb-8">
      <h2 class="text-xl font-semibold mb-4 text-indigo-300">👋 Introduction</h2>
      <p class="text-slate-300 leading-relaxed mb-4">
        Plexus is a next-generation crypto-native social layer. Connect your wallet, chat in real-time, and earn $PLEXUS for your contributions.
      </p>
    </section>

    <section class="mb-8">
      <h2 class="text-xl font-semibold mb-4 text-indigo-300">⚖️ The Rules of the Room</h2>
      <ul class="list-disc list-inside text-slate-300 space-y-2">
        <li>Be respectful to other degens.</li>
        <li>No spam or repetitive shills in main channels.</li>
        <li>Alpha is rewarded; noise is filtered.</li>
        <li>Your wallet is your identity. Guard it well.</li>
      </ul>
    </section>

    <section class="mb-8">
      <h2 class="text-xl font-semibold mb-4 text-indigo-300">💰 Token Economy</h2>
      <p class="text-slate-300 mb-4">
        Every user starts with <span class="text-indigo-400 font-mono">100 $PLEXUS</span>.
      </p>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="p-4 bg-slate-800/50 rounded-lg border border-slate-700">
          <h3 class="font-bold text-slate-100 mb-2">Earning</h3>
          <p class="text-sm text-slate-400">Receive reactions (Coming soon), participate in discussions, and contribute alpha to boost your balance.</p>
        </div>
        <div class="p-4 bg-slate-800/50 rounded-lg border border-slate-700">
          <h3 class="font-bold text-slate-100 mb-2">Spending</h3>
          <p class="text-sm text-slate-400">Updating your username costs <span class="text-indigo-400 font-mono">30 $PLEXUS</span>. Quality costs, alpha pays.</p>
        </div>
      </div>
    </section>

    <section class="mb-8">
      <h2 class="text-xl font-semibold mb-4 text-indigo-300">🤖 AI Summaries</h2>
      <p class="text-slate-300 leading-relaxed">
        Feeling overwhelmed? Use the <span class="font-bold text-indigo-400">AI Summary</span> button in any channel to get a high-signal brief of everything you missed.
      </p>
    </section>

    <section>
      <h2 class="text-xl font-semibold mb-4 text-indigo-300">❓ FAQ</h2>
      <div class="space-y-4">
        <div>
          <h3 class="text-slate-100 font-medium">How do I change my profile?</h3>
          <p class="text-slate-400 text-sm">Head to "My Profile" in the sidebar to update your bio and banner color.</p>
        </div>
        <div>
          <h3 class="text-slate-100 font-medium">Why did my message turn red?</h3>
          <p class="text-slate-400 text-sm">A red status indicates a transaction failure or connection issue. Try refreshing!</p>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.docs-container::-webkit-scrollbar {
  width: 6px;
}
.docs-container::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.2);
  border-radius: 10px;
}
</style>
