<template>
  <main class="min-h-screen">
    <ThemeToggle />
    <!-- Hero Section -->
    <section class="relative overflow-hidden border-b border-border">
      <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent/10 via-background to-background" />
      
      <div class="container relative mx-auto px-4 py-16 sm:py-20 lg:py-24">
        <div class="mx-auto max-w-4xl text-center">
          <div class="mb-6 inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm text-muted-foreground">
            <span class="relative flex h-2 w-2">
              <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent opacity-75"></span>
              <span class="relative inline-flex h-2 w-2 rounded-full bg-accent"></span>
            </span>
            {{ project_name }} is ready
          </div>

          <h1 class="mb-6 text-balance font-mono text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
            Welcome to Django + Inertia.js!
          </h1>

          <p class="mb-8 text-pretty text-lg leading-relaxed text-muted-foreground sm:text-xl">
            Your Django + Inertia.js project is ready to go! Build modern single-page applications with the power of
            Django backend and {% if frontend == 'react' %}React{% else %}Vue 3{% endif %} frontend.
          </p>

          <div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
            <a href="https://inertiajs.com" target="_blank" rel="noopener noreferrer" class="btn-primary w-full sm:w-auto">
              View Docs
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </a>
            <a href="https://github.com/TITANHACKY/create-django-inertia" target="_blank" rel="noopener noreferrer" class="btn-secondary w-full sm:w-auto">
              <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
              </svg>
              GitHub
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Tech Stack Section -->
    <section class="border-b border-border py-16">
      <div class="container mx-auto px-4">
        <div class="mb-12 text-center">
          <h2 class="mb-4 text-balance text-3xl font-bold sm:text-4xl">Tech Stack</h2>
          <p class="text-pretty text-lg text-muted-foreground">
            Everything you need to build modern web applications
          </p>
        </div>

        <div class="mx-auto grid max-w-5xl gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <div class="group rounded-lg border border-border bg-card p-6 transition-colors hover:border-accent/50">
            <div class="mb-3 flex items-center gap-3">
              <span class="text-3xl">🎯</span>
              <h3 class="font-mono font-semibold">Django Backend</h3>
            </div>
            <p class="text-sm text-muted-foreground">Powerful Python web framework</p>
          </div>
          <div class="group rounded-lg border border-border bg-card p-6 transition-colors hover:border-accent/50">
            <div class="mb-3 flex items-center gap-3">
              <span class="text-3xl">{% if frontend == 'react' %}⚛️{% else %}🟢{% endif %}</span>
              <h3 class="font-mono font-semibold">{% if frontend == 'react' %}React{% else %}Vue 3{% endif %}</h3>
            </div>
            <p class="text-sm text-muted-foreground">Modern UI library</p>
          </div>
          <div class="group rounded-lg border border-border bg-card p-6 transition-colors hover:border-accent/50">
            <div class="mb-3 flex items-center gap-3">
              <span class="text-3xl">⚡</span>
              <h3 class="font-mono font-semibold">Inertia.js</h3>
            </div>
            <p class="text-sm text-muted-foreground">SPA without API</p>
          </div>
          <div class="group rounded-lg border border-border bg-card p-6 transition-colors hover:border-accent/50">
            <div class="mb-3 flex items-center gap-3">
              <span class="text-3xl">🎨</span>
              <h3 class="font-mono font-semibold">Tailwind CSS</h3>
            </div>
            <p class="text-sm text-muted-foreground">Utility-first CSS</p>
          </div>
          <div class="group rounded-lg border border-border bg-card p-6 transition-colors hover:border-accent/50">
            <div class="mb-3 flex items-center gap-3">
              <span class="text-3xl">💻</span>
              <h3 class="font-mono font-semibold">{% if use_typescript %}TypeScript{% else %}JavaScript{% endif %}</h3>
            </div>
            <p class="text-sm text-muted-foreground">{% if use_typescript %}Type-safe development{% else %}Dynamic scripting{% endif %}</p>
          </div>
          <div class="group rounded-lg border border-border bg-card p-6 transition-colors hover:border-accent/50">
            <div class="mb-3 flex items-center gap-3">
              <span class="text-3xl">🚀</span>
              <h3 class="font-mono font-semibold">Vite</h3>
            </div>
            <p class="text-sm text-muted-foreground">Lightning fast builds</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="border-b border-border py-16">
      <div class="container mx-auto px-4">
        <div class="mb-12 text-center">
          <h2 class="mb-4 text-balance text-3xl font-bold sm:text-4xl">Powerful Features Out of the Box</h2>
          <p class="text-pretty text-lg text-muted-foreground">
            Everything you need to build modern web applications with Django and {% if frontend == 'react' %}React{% else %}Vue 3{% endif %}
          </p>
        </div>

        <div class="mx-auto grid max-w-6xl gap-8 lg:grid-cols-3">
          <div class="rounded-lg border border-border bg-card p-8">
            <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-accent/10">
              <div class="h-6 w-6 rounded border-2 border-accent"></div>
            </div>
            <h3 class="mb-3 text-xl font-bold">Django Backend</h3>
            <p class="mb-4 leading-relaxed text-muted-foreground">
              Powerful Python web framework with robust ORM, admin interface, and enterprise-grade security features.
            </p>
            <div class="flex flex-wrap gap-2">
              <span class="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">ORM</span>
              <span class="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">Admin</span>
              <span class="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">Auth</span>
            </div>
          </div>

          <div class="rounded-lg border border-border bg-card p-8">
            <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-accent/10">
              <div class="h-6 w-6 rounded border-2 border-accent"></div>
            </div>
            <h3 class="mb-3 text-xl font-bold">Inertia.js</h3>
            <p class="mb-4 leading-relaxed text-muted-foreground">
              Build single-page apps without the complexity. No API required between your frontend and backend.
            </p>
            <div class="flex flex-wrap gap-2">
              <span class="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">SPA</span>
              <span class="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">No API</span>
              <span class="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">SSR Ready</span>
            </div>
          </div>

          <div class="rounded-lg border border-border bg-card p-8">
            <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-accent/10">
              <div class="h-6 w-6 rounded border-2 border-accent"></div>
            </div>
            <h3 class="mb-3 text-xl font-bold">{% if frontend == 'react' %}React + Vite{% else %}Vue 3 + Vite{% endif %}</h3>
            <p class="mb-4 leading-relaxed text-muted-foreground">
              Modern {% if frontend == 'react' %}React{% else %}Vue 3{% endif %} with {% if use_typescript %}TypeScript{% else %}JavaScript{% endif %}, Vite bundling, and Tailwind CSS for rapid development.
            </p>
            <div class="flex flex-wrap gap-2">
              <span class="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">{% if use_typescript %}TypeScript{% else %}JavaScript{% endif %}</span>
              <span class="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">Vite</span>
              <span class="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">Tailwind</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16">
      <div class="container mx-auto px-4">
        <div class="mx-auto max-w-3xl text-center">
          <h2 class="mb-6 text-balance text-3xl font-bold sm:text-4xl lg:text-5xl">Start building:</h2>

          <div class="mb-6 rounded-lg border border-accent/20 bg-accent/5 p-4">
            <pre class="text-left text-sm">
              <code class="font-mono">
                <span class="text-accent">$</span> python manage.py runserver & npm run dev
              </code>
            </pre>
          </div>

          <button class="btn-primary">
            Get Started
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </button>

          <p class="mt-8 text-sm text-muted-foreground">Hello world! 👋</p>
        </div>
      </div>
    </section>
  </main>
</template>

{% if use_typescript %}
<script setup lang="ts">
import ThemeToggle from '@/components/ThemeToggle.vue'

interface Props {
  message: string
  project_name: string
  frontend: string
  typescript: boolean
}

defineProps<Props>()
</script>
{% else %}
<script setup>
import ThemeToggle from '@/components/ThemeToggle.vue'

defineProps({
  message: String,
  project_name: String,
  frontend: String,
  typescript: Boolean
})
</script>
{% endif %}