{% extends 'public/base.html' %}

{% block title %}Welcome | ChatLab AI Platform{% endblock %}

{% block content %}
<main class="landing-hero" style="padding-top: 8rem; padding-bottom: 8rem; display: flex; align-items: center; justify-content: flex-start; text-align: left;">
    <div class="hero-content" style="max-width: 700px;">
        <div style="margin-bottom: 2rem;">
            <span class="badge" style="background: rgba(99, 102, 241, 0.1); color: var(--primary); border: 1px solid var(--border-glow); padding: 0.5rem 1rem;">
                {{ settings.hero_badge_text|default:"ChatLab AI Sales Agent" }}
            </span>
        </div>
        
        <h1 class="hero-title" style="font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.5rem; text-align: left;">
            <span class="gradient-text glow-text">{{ settings.hero_title|default:"আপনার কাস্টমারের সাথে এঙ্গেজমেন্ট আরো বাড়ান"|linebreaksbr }}</span>
        </h1>
        
        <p class="hero-subtitle" style="font-size: 1.25rem; max-width: 600px; margin-bottom: 2.5rem; text-align: left;">
            {{ settings.hero_subtitle|default:"Help businesses scale their operations and boost sales via intelligent WhatsApp, Messenger, and web chatbots." }}
        </p>
        
        <div class="form-actions" style="justify-content: flex-start; gap: 1.5rem;">
            <a href="javascript:void(0)" onclick="openTryModal()" class="btn btn-primary" style="background: var(--accent-gradient); border: none; padding: 0.8rem 2rem; font-size: 1.05rem; box-shadow: 0 10px 20px rgba(244, 63, 94, 0.2);">
                Try Now
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-left: 0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </a>
            
            {% if user.is_authenticated %}
                {% if user.role == 'SUPERUSER' %}
                    <a href="{% url 'superuser_dashboard' %}" class="btn btn-secondary" style="padding: 0.8rem 2rem; font-size: 1.05rem;">
                        Go to Console
                    </a>
                {% else %}
                    <a href="{% url 'admin_dashboard' %}" class="btn btn-secondary" style="padding: 0.8rem 2rem; font-size: 1.05rem;">Go to Console</a>
                {% endif %}
            {% else %}
                <a href="{% url 'login' %}" class="btn btn-secondary" style="padding: 0.8rem 2rem; font-size: 1.05rem;">
                    Sign In
                </a>
            {% endif %}
        </div>
    </div>
</main>

<section class="features-section">
    <h2 class="hero-title animate-enter">System <span class="gradient-text glow-text">Features</span></h2>
    <p class="hero-subtitle animate-enter stagger-1" style="margin: 0 auto;">Discover the power behind our platform.</p>
    
    <div class="features-grid">
        <div class="feature-card animate-enter stagger-1">
            <h3 style="color: var(--primary); margin-bottom: 1rem;">{{ settings.home_feature_1_title|default:"Feature 1" }}</h3>
            <p style="color: var(--text-secondary);">{{ settings.home_feature_1_desc|default:"Description for Feature 1" }}</p>
        </div>
        <div class="feature-card animate-enter stagger-2">
            <h3 style="color: var(--accent); margin-bottom: 1rem;">{{ settings.home_feature_2_title|default:"Feature 2" }}</h3>
            <p style="color: var(--text-secondary);">{{ settings.home_feature_2_desc|default:"Description for Feature 2" }}</p>
        </div>
        <div class="feature-card animate-enter stagger-3">
            <h3 style="color: var(--success); margin-bottom: 1rem;">{{ settings.home_feature_3_title|default:"Feature 3" }}</h3>
            <p style="color: var(--text-secondary);">{{ settings.home_feature_3_desc|default:"Description for Feature 3" }}</p>
        </div>
    </div>
</section>

<!-- Modal Overlay for Lead Capture -->
<div id="try-modal-overlay" class="modal-overlay" onclick="closeTryModalOnOutsideClick(event)">
    <div class="modal-container">
        <div class="modal-header">
            <h3 class="modal-title">Get Started with ChatLab</h3>
            <button class="modal-close" onclick="closeTryModal()">&times;</button>
        </div>
        
        <form id="try-lead-form" onsubmit="submitLeadForm(event)">
            {% csrf_token %}
            <div id="lead-form-error" class="alert alert-danger" style="display: none; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--danger); padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; font-size: 0.9rem;"></div>
            
            <div class="form-group" style="margin-bottom: 1.25rem;">
                <label class="form-label" style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500;">Full Name <span style="color: var(--danger);">*</span></label>
                <input type="text" id="lead-name" name="name" class="form-input" required placeholder="Enter your full name" style="width: 100%; padding: 0.75rem 1rem; background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--text-primary);">
            </div>
            
            <div class="form-group" style="margin-bottom: 1.25rem;">
                <label class="form-label" style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500;">Phone Number <span style="color: var(--danger);">*</span></label>
                <input type="tel" id="lead-phone" name="phone" required placeholder="Enter your phone number" style="width: 100%; padding: 0.75rem 1rem; background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--text-primary);">
            </div>
            
            <div class="form-group" style="margin-bottom: 1.75rem;">
                <label class="form-label" style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500;">Page URL <span style="color: var(--text-muted); font-size: 0.8rem;">(Optional)</span></label>
                <input type="url" id="lead-url" name="page_url" placeholder="https://example.com" style="width: 100%; padding: 0.75rem 1rem; background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--text-primary);">
            </div>
            
            <button type="submit" id="lead-submit-btn" class="btn btn-primary" style="width: 100%; padding: 0.8rem; border-radius: 12px; justify-content: center; font-size: 1rem; background: var(--primary-gradient); border: none; font-weight: 600;">
                <span id="btn-text">Submit Details</span>
                <span id="btn-spinner" style="display: none; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top: 2px solid #fff; width: 16px; height: 16px; animation: spin 1s linear infinite; margin-left: 0.5rem;"></span>
            </button>
        </form>
        
        <div id="lead-form-success" style="display: none; text-align: center; padding: 1.5rem 0;">
            <div style="margin-bottom: 1.5rem; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(16, 185, 129, 0.1); border: 2px solid var(--success); color: var(--success);">
                <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
            </div>
            <h4 style="font-size: 1.25rem; font-weight: 700; color: var(--success); margin-bottom: 0.5rem;">Thank You!</h4>
            <p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.5rem;">Your details have been successfully saved. We will contact you shortly.</p>
            <button class="btn btn-secondary" onclick="closeTryModal()" style="width: 100%; justify-content: center;">Close</button>
        </div>
    </div>
</div>

<style>
/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Modal Overlay Styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 15, 25, 0.8);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-container {
    background: rgba(31, 41, 55, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.modal-overlay.active .modal-container {
    transform: scale(1);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}
.modal-close:hover {
    color: var(--text-primary);
}
</style>

<script>
function openTryModal() {
    document.getElementById('try-modal-overlay').classList.add('active');
    document.getElementById('try-lead-form').style.display = 'block';
    document.getElementById('lead-form-success').style.display = 'none';
    document.getElementById('lead-form-error').style.display = 'none';
}

function closeTryModal() {
    document.getElementById('try-modal-overlay').classList.remove('active');
}

function closeTryModalOnOutsideClick(event) {
    if (event.target === document.getElementById('try-modal-overlay')) {
        closeTryModal();
    }
}

async function submitLeadForm(event) {
    event.preventDefault();
    
    const form = document.getElementById('try-lead-form');
    const nameInput = document.getElementById('lead-name');
    const phoneInput = document.getElementById('lead-phone');
    const urlInput = document.getElementById('lead-url');
    const errorDiv = document.getElementById('lead-form-error');
    
    const btnText = document.getElementById('btn-text');
    const btnSpinner = document.getElementById('btn-spinner');
    const submitBtn = document.getElementById('lead-submit-btn');
    
    errorDiv.style.display = 'none';
    
    // Show spinner
    btnText.textContent = 'Submitting...';
    btnSpinner.style.display = 'inline-block';
    submitBtn.disabled = true;
    
    try {
        const response = await fetch('{% url "submit_lead" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify({
                name: nameInput.value,
                phone: phoneInput.value,
                page_url: urlInput.value
            })
        });
        
        const result = await response.json();
        
        if (response.ok && result.status === 'success') {
            form.style.display = 'none';
            form.reset();
            document.getElementById('lead-form-success').style.display = 'block';
        } else {
            errorDiv.textContent = result.error || 'Something went wrong. Please try again.';
            errorDiv.style.display = 'block';
        }
    } catch (error) {
        errorDiv.textContent = 'Network error. Please try again.';
        errorDiv.style.display = 'block';
    } finally {
        btnText.textContent = 'Submit Details';
        btnSpinner.style.display = 'none';
        submitBtn.disabled = false;
    }
}
</script>
{% endblock %}