{% extends "base.html" %}

{% block title %}Wakelai - Voice AI Platform{% endblock %}

{% block head %}
<style>
    .hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
        position: relative;
        overflow: hidden;
    }

    .hero::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 800px;
        height: 800px;
        background: radial-gradient(circle, rgba(0,240,255,0.1) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        animation: pulse 4s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
        50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
    }

    .hero-content {
        text-align: center;
        z-index: 1;
        padding: 2rem;
    }

    .hero h1 {
        font-size: 4rem;
        font-weight: 800;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, #00f0ff 0%, #0080ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero p {
        font-size: 1.5rem;
        color: #a0a0a0;
        margin-bottom: 2rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    .btn-primary {
        padding: 1rem 2rem;
        background: linear-gradient(135deg, #00f0ff 0%, #0080ff 100%);
        border: none;
        border-radius: 8px;
        color: #000;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        text-decoration: none;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0,240,255,0.3);
    }

    .btn-secondary {
        padding: 1rem 2rem;
        background: transparent;
        border: 2px solid #00f0ff;
        border-radius: 8px;
        color: #00f0ff;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
    }

    .btn-secondary:hover {
        background: rgba(0,240,255,0.1);
        transform: translateY(-2px);
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        padding: 4rem 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .feature-card {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 2rem;
        backdrop-filter: blur(10px);
        transition: transform 0.2s, border-color 0.2s;
    }

    .feature-card:hover {
        transform: translateY(-5px);
        border-color: rgba(0,240,255,0.5);
    }

    .feature-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
        fill: #00f0ff;
    }

    .feature-card h3 {
        margin-bottom: 0.5rem;
        color: #fff;
    }

    .feature-card p {
        color: #a0a0a0;
        line-height: 1.6;
    }
</style>
{% endblock %}

{% block content %}
<section class="hero">
    <div class="hero-content">
        <h1>Voice AI Platform</h1>
        <p>Talk to your AI assistant and watch it build live dashboards, manage your calendar, compose emails, and more—all hands-free.</p>
        <div class="cta-buttons">
            <a href="{{ url_for('auth.login') }}" class="btn-primary">Get Started Free</a>
            <a href="{{ url_for('main.features') }}" class="btn-secondary">Learn More</a>
        </div>
    </div>
</section>

<section class="features-grid">
    <div class="feature-card">
        <svg class="feature-icon" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
        </svg>
        <h3>Voice Control</h3>
        <p>Natural voice interaction with live transcription. Just click and speak—no typing prompts needed.</p>
    </div>

    <div class="feature-card">
        <svg class="feature-icon" viewBox="0 0 24 24">
            <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9 8h6v2H9zm0 3h6v2H9z"/>
        </svg>
        <h3>Live Canvas</h3>
        <p>Watch your AI build real web pages in real-time. Dashboards, reports, and tools rendered live.</p>
    </div>

    <div class="feature-card">
        <svg class="feature-icon" viewBox="0 0 24 24">
            <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
        </svg>
        <h3>Google Integration</h3>
        <p>Manage your calendar and Gmail by voice. Create events, read emails, compose responses.</p>
    </div>

    <div class="feature-card">
        <svg class="feature-icon" viewBox="0 0 24 24">
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
        </svg>
        <h3>3D Holographic UI</h3>
        <p>Iron Man-inspired interface with animated HUD, holographic panels, and immersive visuals.</p>
    </div>

    <div class="feature-card">
        <svg class="feature-icon" viewBox="0 0 24 24">
            <path d="M12 3v18M3 12h18"/>
        </svg>
        <h3>Multi-Instance</h3>
        <p>Create separate AI assistants for different tasks—work, personal, projects, or clients.</p>
    </div>

    <div class="feature-card">
        <svg class="feature-icon" viewBox="0 0 24 24">
            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
        </svg>
        <h3>Self-Hosted</h3>
        <p>Your data stays on your hardware. No vendor lock-in, no monthly per-minute fees.</p>
    </div>
</section>
{% endblock %}