{% if use_typescript %}import React from 'react'
import ThemeToggle from '@/components/ThemeToggle'

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

export default function Home({ message, project_name, frontend, typescript }: HomeProps) {
{% else %}import React from 'react'
import ThemeToggle from '@/components/ThemeToggle'

export default function Home({ message, project_name, frontend, typescript }) {
{% endif %}
  return (
    <main className="min-h-screen">
      <ThemeToggle />
      {/* Hero Section */}
      <section className="relative overflow-hidden border-b border-border">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent/10 via-background to-background" />
        
        <div className="container relative mx-auto px-4 py-16 sm:py-20 lg:py-24">
          <div className="mx-auto max-w-4xl text-center">
            <div className="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 className="relative flex h-2 w-2">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent opacity-75"></span>
                <span className="relative inline-flex h-2 w-2 rounded-full bg-accent"></span>
              </span>
              {{ project_name }} is ready
            </div>

            <h1 className="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 className="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 className="flex flex-col items-center justify-center gap-4 sm:flex-row">
              <a href="https://inertiajs.com" target="_blank" rel="noopener noreferrer" className="btn-primary w-full sm:w-auto">
                View Docs
                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </a>
              <a href="https://github.com/TITANHACKY/create-django-inertia" target="_blank" rel="noopener noreferrer" className="btn-secondary w-full sm:w-auto">
                <svg className="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 className="border-b border-border py-16">
        <div className="container mx-auto px-4">
          <div className="mb-12 text-center">
            <h2 className="mb-4 text-balance text-3xl font-bold sm:text-4xl">Tech Stack</h2>
            <p className="text-pretty text-lg text-muted-foreground">
              Everything you need to build modern web applications
            </p>
          </div>

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

      {/* Features Section */}
      <section className="border-b border-border py-16">
        <div className="container mx-auto px-4">
          <div className="mb-12 text-center">
            <h2 className="mb-4 text-balance text-3xl font-bold sm:text-4xl">Powerful Features Out of the Box</h2>
            <p className="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 className="mx-auto grid max-w-6xl gap-8 lg:grid-cols-3">
            <div className="rounded-lg border border-border bg-card p-8">
              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-accent/10">
                <div className="h-6 w-6 rounded border-2 border-accent"></div>
              </div>
              <h3 className="mb-3 text-xl font-bold">Django Backend</h3>
              <p className="mb-4 leading-relaxed text-muted-foreground">
                Powerful Python web framework with robust ORM, admin interface, and enterprise-grade security features.
              </p>
              <div className="flex flex-wrap gap-2">
                <span className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">ORM</span>
                <span className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">Admin</span>
                <span className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">Auth</span>
              </div>
            </div>

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

            <div className="rounded-lg border border-border bg-card p-8">
              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-accent/10">
                <div className="h-6 w-6 rounded border-2 border-accent"></div>
              </div>
              <h3 className="mb-3 text-xl font-bold">{% if frontend == 'react' %}React + Vite{% else %}Vue 3 + Vite{% endif %}</h3>
              <p className="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 className="flex flex-wrap gap-2">
                <span className="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 className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground">Vite</span>
                <span className="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 className="py-16">
        <div className="container mx-auto px-4">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="mb-6 text-balance text-3xl font-bold sm:text-4xl lg:text-5xl">Start building:</h2>

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

            <button className="btn-primary">
              Get Started
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </button>

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