<script setup>
import { ref } from 'vue';
import { Link, usePage } from '@inertiajs/vue3';

const mobileMenuOpen = ref(false);
const auth = usePage().props.auth;
</script>

<template>
  <div class="min-h-screen flex flex-col bg-gray-50 text-gray-900 antialiased">
    <!-- Nav -->
    <header class="bg-white border-b border-gray-200 sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <Link :href="$url('/')" class="flex items-center space-x-2">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary via-secondary to-accent flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
            </div>
            <span class="text-xl font-bold text-gray-900">StoreSight AI</span>
          </Link>

          <nav class="hidden md:flex items-center space-x-8">
            <Link :href="$url('/')" class="text-gray-600 hover:text-primary transition font-medium">Home</Link>
            <Link :href="$url('/pricing')" class="text-gray-600 hover:text-primary transition">Pricing</Link>
            <template v-if="auth.user">
              <Link :href="$url(auth.user.is_admin ? '/admin' : '/dashboard')" class="text-gray-600 hover:text-primary transition">Dashboard</Link>
            </template>
            <template v-else>
              <Link :href="$url('/login')" class="text-gray-600 hover:text-primary transition">Login</Link>
              <Link :href="$url('/register')" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition">Get Started</Link>
            </template>
          </nav>

          <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 rounded-lg hover:bg-gray-100">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
          </button>
        </div>

        <div v-if="mobileMenuOpen" class="md:hidden pb-4 border-t border-gray-100 mt-2 pt-4">
          <div class="flex flex-col space-y-3">
            <Link :href="$url('/')" class="text-primary font-medium px-2 py-1">Home</Link>
            <Link :href="$url('/pricing')" class="text-gray-600 hover:text-primary px-2 py-1">Pricing</Link>
            <template v-if="auth.user">
              <Link :href="$url(auth.user.is_admin ? '/admin' : '/dashboard')" class="text-gray-600 hover:text-primary px-2 py-1">Dashboard</Link>
            </template>
            <template v-else>
              <Link :href="$url('/login')" class="text-gray-600 hover:text-primary px-2 py-1">Login</Link>
              <Link :href="$url('/register')" class="text-gray-600 hover:text-primary px-2 py-1">Register</Link>
            </template>
          </div>
        </div>
      </div>
    </header>

    <main class="flex-1">
      <slot />
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid md:grid-cols-4 gap-8">
          <div class="md:col-span-1">
            <div class="flex items-center space-x-2 mb-4">
              <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary via-secondary to-accent flex items-center justify-center">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
              </div>
              <span class="text-lg font-bold text-white">StoreSight AI</span>
            </div>
            <p class="text-sm">AI-powered analytics dashboard for WooCommerce stores.</p>
          </div>
          <div>
            <h4 class="text-white font-semibold mb-4">Product</h4>
            <ul class="space-y-2 text-sm">
              <li><Link :href="$url('/')" class="hover:text-white transition">Home</Link></li>
              <li><Link :href="$url('/pricing')" class="hover:text-white transition">Pricing</Link></li>
            </ul>
          </div>
          <div>
            <h4 class="text-white font-semibold mb-4">Account</h4>
            <ul class="space-y-2 text-sm">
              <li><Link :href="$url('/login')" class="hover:text-white transition">Login</Link></li>
              <li><Link :href="$url('/register')" class="hover:text-white transition">Register</Link></li>
              <li><Link :href="$url('/dashboard')" class="hover:text-white transition">Dashboard</Link></li>
            </ul>
          </div>
          <div>
            <h4 class="text-white font-semibold mb-4">Legal</h4>
            <ul class="space-y-2 text-sm">
              <li><a href="#" class="hover:text-white transition">Privacy Policy</a></li>
              <li><a href="#" class="hover:text-white transition">Terms of Service</a></li>
              <li><a href="#" class="hover:text-white transition">Refund Policy</a></li>
            </ul>
          </div>
        </div>
        <div class="border-t border-gray-800 mt-10 pt-8 text-center text-sm">
          <p>&copy; 2026 StoreSight AI. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>
