{% extends "base.html" %}

{% block title %}Home - Startup Pitch Evaluator{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="max-w-4xl mx-auto text-center py-12">
    <h1 class="text-4xl font-bold tracking-tight sm:text-6xl">
        Evaluate Your Startup Pitch
    </h1>
    <p class="mt-6 text-lg leading-8 text-muted-foreground">
        Get instant AI-powered feedback on your startup pitch. Improve your chances of success with detailed analysis and recommendations.
    </p>
    <!-- <div class="mt-10 flex items-center justify-center gap-x-6"> -->
    <!--     {% if current_user.is_authenticated %} -->
    <!--         <a href="{{ url_for('pitch.evaluate') }}" class="rounded-md bg-primary px-3.5 py-2.5 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/90"> -->
    <!--             Start Evaluation -->
    <!--         </a> -->
    <!--     {% else %} -->
    <!--         <a href="{{ url_for('auth.register') }}" class="rounded-md bg-primary px-3.5 py-2.5 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/90"> -->
    <!--             Get Started -->
    <!--         </a> -->
    <!--         <a href="{{ url_for('auth.login') }}" class="text-sm font-semibold leading-6 hover:text-primary"> -->
    <!--             Log in <span aria-hidden="true">→</span> -->
    <!--         </a> -->
    <!--     {% endif %} -->
    <!-- </div> -->

  <!-- Features Section -->
  <section class="py-16 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
              <!-- Feature cards -->
              <div class="feature-card transition-shadow hover:shadow-lg">
                  <div class="flex items-center gap-x-3">
                      <svg class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
                      </svg>
                      <h3 class="text-lg font-semibold text-gray-800">AI-Powered Analysis</h3>
                  </div>
                  <p class="mt-4 text-sm text-muted-foreground">
                      Get instant, comprehensive feedback powered by advanced AI technology.
                  </p>
              </div>
              <div class="feature-card transition-shadow hover:shadow-lg">
                  <div class="flex items-center gap-x-3">
                      <svg class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
                      </svg>
                      <h3 class="text-lg font-semibold text-gray-800">Diverse Responses</h3>
                  </div>
                  <p class="mt-4 text-sm text-muted-foreground">
                      Receive different answers each time you evaluate your pitch, ensuring fresh insights.
                  </p>
              </div>
              <div class="feature-card transition-shadow hover:shadow-lg">
                  <div class="flex items-center gap-x-3">
                      <svg class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
                      </svg>
                      <h3 class="text-lg font-semibold text-gray-800">No Login Required</h3>
                  </div>
                  <p class="mt-4 text-sm text-muted-foreground">
                      Start evaluating your pitch without the hassle of creating an account.
                  </p>
              </div>
          </div>
      </div>
  </section>

<!-- Outline Generator Section -->
<section class="py-16 bg-gradient-to-b from-white to-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="outline-generator-container">
            <h3 class="text-3xl font-bold text-center mb-3 text-gray-800">Generate a Sample Pitch Outline</h3>
            <p class="text-gray-600 text-center mb-8 text-lg">Transform your idea into a structured pitch outline in seconds</p>
            
            <div class="outline-form-container">
                <form id="outlineForm" class="space-y-6">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="space-y-4">
                        <label for="topic" class="block text-center text-lg font-medium text-gray-700">
                            What's your pitch about?
                        </label>
                        <textarea 
                            id="topic" 
                            name="topic" 
                            class="outline-input"
                            maxlength="300" 
                            minlength="6"
                            placeholder="Describe your startup idea or business concept..."
                            required
                        ></textarea>
                        <div class="flex justify-end items-center text-sm text-gray-500">
                            <span><span id="charCount">0</span>/300 characters</span>
                        </div>
                    </div>
                    
                    <div class="flex justify-center pt-2">
                        <button type="submit" class="generate-outline-btn group">
                            <span class="flex items-center">
                                <svg class="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" 
                                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                          d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                </svg>
                                Generate Outline
                            </span>
                        </button>
                    </div>
                </form>

                <!-- Updated Outline Results Section -->
                <div id="outlineResult" class="mt-8 hidden animate-in fade-in duration-500">
                    <div class="bg-white/80 rounded-lg p-6 shadow-md border border-gray-100">
                        <h4 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <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>
                            Your Pitch Outline
                        </h4>
                        <div id="outlineContent" class="prose prose-blue max-w-none text-left">
                            <!-- Outline will be inserted here -->
                        </div>
                    </div>
                </div>

                <div id="outlineError" class="mt-6 hidden">
                    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
                        <div class="flex">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span class="error-message"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Quick Start Section -->
<section id="quickStartHack" class="mt-12 hidden py-8 bg-gradient-to-b from-gray-50 to-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <p class="text-center text-gray-600 italic">
            Quick-Start Hack: Paste an outline like this into an AI presentation generator (e.g., 
            <a href="https://gamma.app/signup?r=yceqqnqobm5eeq4" class="text-primary hover:text-primary/90">Gamma)</a> 
            and receive a v1 presentation document in just a few minutes.
        </p>
    </div>
</section>

<!-- Tools Section -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h3 class="text-2xl font-semibold mb-8 text-gray-800">
            Unlock Your Presentation's Full Potential with AI-Powered Tools
        </h3>
        {% include 'random_tool.html' %}
    </div>
</section>

<!-- Books Section -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h3 class="text-2xl font-semibold mb-8">
            Elevate Your Pitch and Presentation Skills with These Must-Read Books
        </h3>
        {% include 'random_book.html' %}
    </div>
</section>

<section>

<div id="floatingCTA" class="fixed bottom-4 right-4 transform translate-y-full opacity-0 transition-all duration-300 ease-in-out z-40">
    <div class="max-w-lg bg-white rounded-lg shadow-xl border p-6 text-center">
        <button onclick="closeFloatingCTA()" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
        <h2 class="text-2xl font-bold mb-3 text-gray-900">Start Coding in Your Browser</h2>
        <p class="mb-6 text-gray-700">
            Join millions of developers and bring your ideas to life with our powerful, collaborative IDE. No setup required.
        </p>
        <a 
            href="https://replit.com/refer/Cartooli"
            target="_blank"
            rel="noopener noreferrer"
            class="inline-flex items-center px-6 py-3 text-lg font-semibold text-white bg-orange-500 hover:bg-orange-600 rounded-lg transition-colors duration-200"
        >
            Try Replit Free
            <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
        </a>
    </div>
</div>

<script>
    let floatingCTATimeout;
    const FLOATING_CTA_DELAY = 120000; // 120 seconds

    function showFloatingCTA() {
        const cta = document.getElementById('floatingCTA');
        if (cta) {
            cta.classList.remove('translate-y-full', 'opacity-0');
            cta.classList.add('translate-y-0', 'opacity-100');
        }
    }

    function closeFloatingCTA() {
        const cta = document.getElementById('floatingCTA');
        if (cta) {
            cta.classList.add('translate-y-full', 'opacity-0');
            cta.classList.remove('translate-y-0', 'opacity-100');
            // Prevent it from showing again in this session
            clearTimeout(floatingCTATimeout);
        }
    }

    // Start the floating CTA timer when the page loads
    document.addEventListener('DOMContentLoaded', function() {
        floatingCTATimeout = setTimeout(showFloatingCTA, FLOATING_CTA_DELAY);
    });

    // Reset the floating CTA timer on user activity
    const activityEvents = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
    activityEvents.forEach(event => {
        document.addEventListener(event, function() {
            clearTimeout(floatingCTATimeout);
            floatingCTATimeout = setTimeout(showFloatingCTA, FLOATING_CTA_DELAY);
        }, true);
    });
</script>
</section>

<script src="{{ url_for('static', filename='js/pitchTools.js') }}"></script>
<script src="{{ url_for('static', filename='js/pitchBooks.js') }}"></script>

<!-- Add to existing scripts section -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('outlineForm');
        const topic = document.getElementById('topic');
        const charCount = document.getElementById('charCount');
        const result = document.getElementById('outlineResult');
        const content = document.getElementById('outlineContent');
        const error = document.getElementById('outlineError');
        const errorMessage = error.querySelector('.error-message');

        topic.addEventListener('input', function() {
            charCount.textContent = this.value.length;
        });

        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.innerHTML;
            
            try {
                // Validate form
                if (!validateForm()) {
                    return;
                }
                
                // Show loading state
                submitBtn.disabled = true;
                submitBtn.innerHTML = `
                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Generating...
                `;

                const response = await fetch('/generate-outline', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': document.querySelector('input[name="csrf_token"]').value
                    },
                    body: JSON.stringify({
                        topic: topic.value
                    })
                });

                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || 'Failed to generate outline');
                }

                const data = await response.json();
                
                if (data.error) {
                    showError(data.error);
                    return;
                }

                // Update UI with success
                error.classList.add('hidden');
                content.innerHTML = data.outline;
                result.classList.remove('hidden');
                result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

            } catch (err) {
                console.error('Failed to generate outline:', err);
                showError(err.message || 'Failed to generate outline. Please try again.');
            } finally {
                // Restore button state
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalBtnText;
            }
        });

        function validateForm() {
            const topicValue = topic.value.trim();
            if (topicValue.length < 6) {
                showError('Please enter at least 6 characters');
                return false;
            }
            if (topicValue.length > 300) {
                showError('Topic must be less than 300 characters');
                return false;
            }
            return true;
        }

        function showError(message) {
            error.classList.remove('hidden');
            errorMessage.textContent = message;
            error.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
    });
</script>
{% endblock %}