<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- DaisyUI CDN -->
  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />

  <!-- Vue 3 CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <style>
    [v-cloak] { display: none; }
  </style>

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            secondary: '#8b5cf6',
          }
        }
      }
    }
  </script>
</head>
<body class="min-h-screen bg-base-100">
  <%- include('partials/navbar') %>

  <div id="app" v-cloak>
    <!-- Hero Section -->
    <section class="hero min-h-[80vh] bg-gradient-to-br from-primary/10 to-secondary/10">
      <div class="hero-content text-center">
        <div class="max-w-4xl">
          <div class="badge badge-primary badge-lg mb-4">Now with AI-Powered Summaries</div>
          <h1 class="text-5xl md:text-7xl font-bold mb-6">
            Automated Changelogs
            <span class="block text-primary">for Your GitHub Repos</span>
          </h1>
          <p class="text-xl md:text-2xl mb-8 text-gray-600 max-w-2xl mx-auto">
            Generate beautiful, consistent changelogs from your commits and pull requests.
            Save hours of manual work every release.
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/auth/register" class="btn btn-primary btn-lg">
              Start Free Trial
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
            <a href="/features" class="btn btn-outline btn-lg">Learn More</a>
          </div>
          <p class="mt-4 text-sm text-gray-500">No credit card required. 14-day free trial.</p>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 px-4">
      <div class="max-w-6xl mx-auto">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold mb-4">How It Works</h2>
          <p class="text-xl text-gray-600">Generate changelogs in three simple steps</p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
          <!-- Step 1 -->
          <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
            <div class="card-body items-center text-center">
              <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
              </div>
              <h3 class="card-title text-2xl">1. Connect Repo</h3>
              <p class="text-gray-600">Link your GitHub repository with one click. We support public and private repos.</p>
            </div>
          </div>

          <!-- Step 2 -->
          <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
            <div class="card-body items-center text-center">
              <div class="w-16 h-16 rounded-full bg-secondary/10 flex items-center justify-center mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                </svg>
              </div>
              <h3 class="card-title text-2xl">2. Select Period</h3>
              <p class="text-gray-600">Choose the time period for your changelog. Monthly, weekly, or custom ranges.</p>
            </div>
          </div>

          <!-- Step 3 -->
          <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
            <div class="card-body items-center text-center">
              <div class="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 class="card-title text-2xl">3. Generate</h3>
              <p class="text-gray-600">Get a beautifully formatted changelog in Markdown, HTML, or JSON format.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Grid -->
    <section class="py-20 bg-base-200 px-4">
      <div class="max-w-6xl mx-auto">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold mb-4">Powerful Features</h2>
          <p class="text-xl text-gray-600">Everything you need for professional changelogs</p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div class="card bg-base-100">
            <div class="card-body">
              <h3 class="card-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                AI-Powered Summaries
              </h3>
              <p class="text-gray-600">Smart grouping and summarization of commits using AI.</p>
            </div>
          </div>

          <div class="card bg-base-100">
            <div class="card-body">
              <h3 class="card-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                </svg>
                Multiple Formats
              </h3>
              <p class="text-gray-600">Export as Markdown, HTML, or JSON. GitHub releases integration.</p>
            </div>
          </div>

          <div class="card bg-base-100">
            <div class="card-body">
              <h3 class="card-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Automated Scheduling
              </h3>
              <p class="text-gray-600">Set up automatic changelog generation on your schedule.</p>
            </div>
          </div>

          <div class="card bg-base-100">
            <div class="card-body">
              <h3 class="card-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
                Team Collaboration
              </h3>
              <p class="text-gray-600">Share changelogs with your team. Organization support.</p>
            </div>
          </div>

          <div class="card bg-base-100">
            <div class="card-body">
              <h3 class="card-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
                Private & Secure
              </h3>
              <p class="text-gray-600">Your code never leaves your repos. Secure GitHub OAuth.</p>
            </div>
          </div>

          <div class="card bg-base-100">
            <div class="card-body">
              <h3 class="card-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                </svg>
                Webhook Integration
              </h3>
              <p class="text-gray-600">Trigger changelogs on every push, PR merge, or release.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4">
      <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-4xl font-bold mb-6">Ready to Automate Your Changelogs?</h2>
        <p class="text-xl text-gray-600 mb-8">
          Join thousands of developers who save hours every week with AutoChangelog.
        </p>
        <a href="/auth/register" class="btn btn-primary btn-lg">
          Get Started Free
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </a>
      </div>
    </section>
  </div>

  <%- include('partials/footer') %>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          // Landing page can have interactive elements here
        }
      }
    }).mount('#app');
  </script>
</body>
</html>
