{% extends "base.html" %}

{% block content %}
<div class="container-main py-5">
    <div class="hero-section bg-gradient-primary text-white rounded-3 p-5 shadow-lg">
        <div class="text-center">
            <h1 class="display-4 fw-bold mb-4">
                <i class="bi bi-gear-connected"></i>
                MoldCost Pro
            </h1>
            <p class="lead mb-4">Precision Mold Cost Calculations</p>
            
            <div class="d-grid gap-3 d-md-flex justify-content-md-center">
                {% if current_user.is_authenticated %}
                <a href="{{ url_for('calculator') }}" class="btn btn-light btn-lg px-4">
                    <i class="bi bi-calculator me-2"></i>
                    Go to Calculator
                </a>
                {% else %}
                <a href="{{ url_for('login') }}" class="btn btn-light btn-lg px-4">
                    <i class="bi bi-box-arrow-in-right me-2"></i>
                    Get Started
                </a>
                <a href="{{ url_for('register') }}" class="btn btn-outline-light btn-lg px-4">
                    <i class="bi bi-person-plus me-2"></i>
                    Register
                </a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div class="row g-4 mt-5">
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="bi bi-speedometer2 display-4 text-primary"></i>
                    <h3 class="mt-3">Fast Calculation</h3>
                    <p class="text-muted">Instant mold cost estimates with industry-standard algorithms</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="bi bi-clock-history display-4 text-primary"></i>
                    <h3 class="mt-3">History Tracking</h3>
                    <p class="text-muted">Review your previous quotes and calculations</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="bi bi-shield-lock display-4 text-primary"></i>
                    <h3 class="mt-3">Secure Data</h3>
                    <p class="text-muted">Enterprise-grade security for your sensitive data</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
.hero-section {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    position: relative;
    overflow: hidden;
}

.hero-section:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: linear-gradient(45deg, 
        rgba(255,255,255,0.1) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.1) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px;
    animation: animateStripes 4s linear infinite;
    opacity: 0.15;
}

@keyframes animateStripes {
    0% { transform: translateY(0); }
    100% { transform: translateY(-40px); }
}
</style>
{% endblock %}