<template>
  <div class="min-h-screen bg-[#1A103C] text-white flex">
    <!-- Sidebar -->
    <nav class="w-64 bg-[#231849] p-4 space-y-4">
      <div class="flex items-center gap-2 mb-8">
        <div class="w-8 h-8 bg-purple-600 rounded-lg"></div>
        <h1 class="text-xl font-semibold">GEN <span class="text-purple-500">LTEX</span></h1>
      </div>

      <!-- Navigation Items -->
      <div class="space-y-2">
        <a href="#" class="flex items-center gap-3 p-3 rounded-lg bg-[#2A1F53] text-white/90 hover:bg-[#2A1F53]/80">
          <HomeIcon class="w-5 h-5" />
          <span>Home</span>
        </a>

        <div class="mt-8 mb-4 text-xs text-white/50 px-3">MANAGER YOUR CONTEXT</div>

        <template v-for="item in navItems" :key="item.name">
          <a href="#" class="flex items-center gap-3 p-3 rounded-lg text-white/70 hover:bg-[#2A1F53]/80">
            <component :is="item.icon" class="w-5 h-5" />
            <span>{{ item.name }}</span>
            <span v-if="item.badge" class="ml-auto bg-purple-500 text-white text-xs px-2 py-0.5 rounded-full">
              {{ item.badge }}
            </span>
          </a>
        </template>
      </div>

      <!-- User Profile -->
      <div class="absolute bottom-4 flex items-center gap-3 p-3 text-white/70">
        <div class="w-8 h-8 bg-gray-600 rounded-full"></div>
        <div>
          <div class="text-sm">zbytest003</div>
          <div class="text-xs text-white/50">platform admin</div>
        </div>
      </div>
    </nav>

    <!-- Main Content -->
    <main class="flex-1 p-6 space-y-6">
      <!-- Hero Section -->
      <section class="p-8 rounded-2xl bg-[#231849]">
        <h1 class="text-4xl font-bold mb-4">
          <span class="text-purple-500">Empowering</span><br />
          Your Future with<br />
          GenAI Solutions<br />
          for <span class="text-purple-500">TDLC</span>
        </h1>
        <p class="text-white/70 max-w-md">
          Explore Our Innovative Features and Unlock the Full Potential of GenAI for Your Project's Success
        </p>
      </section>

      <!-- Cards Grid -->
      <div class="grid md:grid-cols-2 gap-6">
        <!-- TDLC Card -->
        <div class="p-6 rounded-2xl bg-[#231849]">
          <div class="w-12 h-12 mb-4 bg-purple-500/20 rounded-lg flex items-center justify-center">
            <LayoutIcon class="w-6 h-6 text-purple-500" />
          </div>
          <h2 class="text-2xl font-semibold mb-2">
            TDLC for <span class="text-purple-500">System Integration</span> project
          </h2>
          <p class="text-white/70 mb-6">
            Get comprehensive guidance for your new projects, from the initial concept all the way through detailed design and implementation.
          </p>
          <button class="px-4 py-2 bg-purple-500 rounded-lg hover:bg-purple-600 transition-colors">
            Begin Your Journey
          </button>
        </div>

        <!-- Analysis Card -->
        <div class="p-6 rounded-2xl bg-[#231849]">
          <div class="w-12 h-12 mb-4 bg-purple-500/20 rounded-lg flex items-center justify-center">
            <ActivityIcon class="w-6 h-6 text-purple-500" />
          </div>
          <h2 class="text-2xl font-semibold mb-2">
            Intelligent <span class="text-purple-500">Project Analysis</span>
          </h2>
          <p class="text-white/70 mb-6">
            Upload a ZIP file containing your existing project files and let GenAI analyze it for you.
          </p>
          <button class="px-4 py-2 bg-purple-500 rounded-lg hover:bg-purple-600 transition-colors">
            Gain New Insights
          </button>
        </div>

        <!-- Workspace Card -->
        <div class="md:col-span-2 p-6 rounded-2xl bg-[#231849]">
          <div class="w-12 h-12 mb-4 bg-purple-500/20 rounded-lg flex items-center justify-center">
            <MessageSquareIcon class="w-6 h-6 text-purple-500" />
          </div>
          <h2 class="text-2xl font-semibold mb-2">
            Let's <span class="text-purple-500">Talk</span> To Your Workspace Knowledge
          </h2>
          <p class="text-white/70">
            A smart chatbot designed to interact with and retrieve information from your workspace.
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import {
  Home as HomeIcon,
  Layout as LayoutIcon,
  Activity as ActivityIcon,
  MessageSquare as MessageSquareIcon,
  FileText as FileTextIcon,
  Link as LinkIcon,
  User as UserIcon,
  Bell as BellIcon,
  Briefcase as BriefcaseIcon
} from 'lucide-vue-next'

const navItems = [
  { name: 'Workspace', icon: BriefcaseIcon },
  { name: 'Knowledge', icon: FileTextIcon },
  { name: 'Prompt', icon: MessageSquareIcon },
  { name: 'Link', icon: LinkIcon },
  { name: 'User', icon: UserIcon },
  { name: 'Notifications', icon: BellIcon, badge: '0' },
]
</script>

<style>

</style>