{% extends "base.html" %}
{% block content %}
<div class="container-fluid py-4" style="max-width: 1400px; background: linear-gradient(135deg, #0a2e1a 0%, #1a4d2e 100%); min-height: 100vh;">
    
    <!-- Floating Header Card -->
    <div class="card border-0 shadow-lg mb-3" style="background: rgba(255,255,255,0.95); border-radius: 20px; backdrop-filter: blur(10px);">
        <div class="card-body p-4">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <div class="d-flex align-items-center mb-2">
                        <div class="badge bg-success px-3 py-2 me-2">VERIFIED RECIPE</div>
                        <div class="badge bg-secondary px-3 py-2">AI-ENHANCED</div>
                    </div>
                    <h1 class="display-4 fw-bold mb-2" style="background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                        Spicy Parmesan Chicken Pasta
                    </h1>
                    <p class="text-muted mb-0">Precision-crafted Italian fusion • Optimized for 4 servings</p>
                </div>
                <div class="col-lg-4 text-end">
                    <div class="position-relative d-inline-block">
                        <img src="https://via.placeholder.com/250x250/4a7c59/ffffff?text=SCAN" 
                             class="rounded-circle shadow-lg" style="width: 250px; border: 5px solid #4a7c59;">
                        <div class="position-absolute bottom-0 end-0 bg-success text-white rounded-circle shadow" 
                             style="width: 60px; height: 60px; line-height: 60px; text-align: center;">
                            <strong>4.5★</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Stats Grid -->
    <div class="row g-3 mb-3">
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow text-center" style="background: linear-gradient(135deg, #4a7c59 0%, #5a8c69 100%); color: white; border-radius: 15px;">
                <div class="card-body py-4">
                    <div class="mb-2" style="font-size: 2.5rem;">⏱️</div>
                    <div class="display-6 fw-bold">30</div>
                    <div class="text-uppercase small opacity-75">PREP MINUTES</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow text-center" style="background: linear-gradient(135deg, #4a7c59 0%, #5a8c69 100%); color: white; border-radius: 15px;">
                <div class="card-body py-4">
                    <div class="mb-2" style="font-size: 2.5rem;">🔥</div>
                    <div class="display-6 fw-bold">15</div>
                    <div class="text-uppercase small opacity-75">COOK MINUTES</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow text-center" style="background: linear-gradient(135deg, #4a7c59 0%, #5a8c69 100%); color: white; border-radius: 15px;">
                <div class="card-body py-4">
                    <div class="mb-2" style="font-size: 2.5rem;">👥</div>
                    <div class="display-6 fw-bold">4</div>
                    <div class="text-uppercase small opacity-75">SERVINGS</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow text-center" style="background: linear-gradient(135deg, #4a7c59 0%, #5a8c69 100%); color: white; border-radius: 15px;">
                <div class="card-body py-4">
                    <div class="mb-2" style="font-size: 2.5rem;">🌍</div>
                    <div class="h5 fw-bold mb-0">ITALIAN</div>
                    <div class="text-uppercase small opacity-75">CUISINE TYPE</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Content Panels -->
    <div class="row g-3">
        <div class="col-lg-5">
            <div class="card border-0 shadow-lg" style="border-radius: 20px; background: rgba(255,255,255,0.98);">
                <div class="card-header border-0 pt-4 pb-3" style="background: linear-gradient(135deg, #4a7c59 0%, #5a8c69 100%); border-radius: 20px 20px 0 0;">
                    <h5 class="text-white mb-0 fw-bold">
                        <i class="fas fa-flask me-2"></i>INGREDIENTS MATRIX
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3 p-3 bg-light rounded-3">
                        <div class="badge bg-success me-3" style="width: 35px; height: 35px; line-height: 35px; border-radius: 50%;">01</div>
                        <div class="flex-grow-1">
                            <div class="fw-bold">1 can • Tomato</div>
                            <small class="text-success">8 oz • chopped, canned</small>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 p-3 bg-light rounded-3">
                        <div class="badge bg-success me-3" style="width: 35px; height: 35px; line-height: 35px; border-radius: 50%;">02</div>
                        <div class="flex-grow-1">
                            <div class="fw-bold">12 c • Bone Broth</div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center p-3 bg-light rounded-3">
                        <div class="badge bg-success me-3" style="width: 35px; height: 35px; line-height: 35px; border-radius: 50%;">03</div>
                        <div class="flex-grow-1">
                            <div class="fw-bold">5 tbsp • Black Beans</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card border-0 shadow-lg" style="border-radius: 20px; background: rgba(255,255,255,0.98);">
                <div class="card-header border-0 pt-4 pb-3" style="background: linear-gradient(135deg, #4a7c59 0%, #5a8c69 100%); border-radius: 20px 20px 0 0;">
                    <h5 class="text-white mb-0 fw-bold">
                        <i class="fas fa-robot me-2"></i>EXECUTION PROTOCOL
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="timeline-item mb-4">
                        <div class="d-flex">
                            <div class="me-3">
                                <div class="bg-success text-white rounded-circle shadow" style="width: 45px; height: 45px; line-height: 45px; text-align: center; font-weight: bold;">1</div>
                            </div>
                            <div class="flex-grow-1 bg-light p-3 rounded-3">
                                <p class="mb-0">Combine olive oil, Parmesan cheese, garlic, and seasonings in mixing vessel.</p>
                            </div>
                        </div>
                    </div>
                    <div class="timeline-item mb-4">
                        <div class="d-flex">
                            <div class="me-3">
                                <div class="bg-success text-white rounded-circle shadow" style="width: 45px; height: 45px; line-height: 45px; text-align: center; font-weight: bold;">2</div>
                            </div>
                            <div class="flex-grow-1 bg-light p-3 rounded-3">
                                <p class="mb-0">Process pasta per package specifications. Retain 1 cup hydration liquid.</p>
                            </div>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="d-flex">
                            <div class="me-3">
                                <div class="bg-success text-white rounded-circle shadow" style="width: 45px; height: 45px; line-height: 45px; text-align: center; font-weight: bold;">3</div>
                            </div>
                            <div class="flex-grow-1 bg-light p-3 rounded-3">
                                <p class="mb-0">Apply high thermal energy. Sear protein until golden caramelization achieved.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}