{% extends 'base.html' %}
{% block content %}
<!-- Hero section -->
<section class="hero-bg">
    <div class="hero-overlay flex flex-col justify-center items-center">
        <h1 class="text-5xl text-white font-bold mb-4 animate-on-scroll">Transform Your Data</h1>
        <p class="mb-6 text-xl text-white animate-on-scroll">Empower your sales & inventory decisions with advanced predictive analytics.</p>
        <a href="/forecast/sales" class="btn-custom bg-blue-500 text-white px-8 py-3 rounded-full shadow-lg hover:bg-blue-600 transition animate-on-scroll">
            Get Started
        </a>
    </div>
</section>

<!-- Features Section -->
<section id="features" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <!-- Sales Prediction -->
        <div class="flex flex-col md:flex-row items-center my-12 animate-on-scroll">
            <div class="md:w-1/2 md:pr-8">
                <h2 class="text-3xl font-bold mb-4">Sales Prediction Engine</h2>
                <p class="mb-4">Forecast daily sales with high accuracy using state-of-the-art machine learning and time-series models.</p>
                <a href="/forecast/sales" class="text-blue-500 hover:underline">Learn More</a>
            </div>
            <div class="md:w-1/2">
                <img src="static\images\sales prediction.png" alt="Sales Prediction" class="w-full rounded-lg shadow-lg">
            </div>
        </div>

        <!-- Campaign Analysis -->
        <div class="flex flex-col md:flex-row-reverse items-center my-12 animate-on-scroll">
            <div class="md:w-1/2 md:pl-8">
                <h2 class="text-3xl font-bold mb-4">Campaign Analysis</h2>
                <p class="mb-4">Analyze campaign performance to optimize ROI and boost customer engagement through comprehensive insights.</p>
                <a href="/campaign" class="text-blue-500 hover:underline">Learn More</a>
            </div>
            <div class="md:w-1/2">
                <img src="static\images\campaign.jpg" alt="Campaign Analysis" class="w-full rounded-lg shadow-lg">
            </div>
        </div>

        <!-- Inventory Optimization -->
        <div class="flex flex-col md:flex-row items-center my-12 animate-on-scroll">
            <div class="md:w-1/2 md:pr-8">
                <h2 class="text-3xl font-bold mb-4">Inventory Optimization</h2>
                <p class="mb-4">Utilize demand forecasting and sophisticated optimization algorithms to reduce surplus and prevent stockouts.</p>
                <a href="/inventory" class="text-blue-500 hover:underline">Learn More</a>
            </div>
            <div class="md:w-1/2">
                <img src="static\images\inventory.png" alt="Inventory Optimization" class="w-full rounded-lg shadow-lg">
            </div>
        </div>

        <!-- Pricing Intelligence -->
        <div class="flex flex-col md:flex-row-reverse items-center my-12 animate-on-scroll">
            <div class="md:w-1/2 md:pl-8">
                <h2 class="text-3xl font-bold mb-4">Pricing Intelligence</h2>
                <p class="mb-4">Optimize pricing strategies with advanced conversion analytics and price elasticity models for maximum revenue.</p>
                <a href="/pricing" class="text-blue-500 hover:underline">Learn More</a>
            </div>
            <div class="md:w-1/2">
                <img src="static\images\pricing.jpg" alt="Pricing Intelligence" class="w-full rounded-lg shadow-lg">
            </div>
        </div>

        <!-- Underperformance Detector -->
        <div class="flex flex-col md:flex-row items-center my-12 animate-on-scroll">
            <div class="md:w-1/2 md:pr-8">
                <h2 class="text-3xl font-bold mb-4">Underperformance Detector</h2>
                <p class="mb-4">Identify low-performing segments and uncover upsell opportunities through advanced analytics insights.</p>
                <a href="/underperformance" class="text-blue-500 hover:underline">Learn More</a>
            </div>
            <div class="md:w-1/2">
                <img src="static\images\underperforming.png" alt="Underperformance Detector" class="w-full rounded-lg shadow-lg">
            </div>
        </div>

        <!-- Machine Failure -->
        <div class="flex flex-col md:flex-row-reverse items-center my-12 animate-on-scroll">
            <div class="md:w-1/2 md:pl-8">
                <h2 class="text-3xl font-bold mb-4">Machine Failure Predictor</h2>
                <p class="mb-4">Predict machine failure before breakdown.</p>
                <a href="/predict/machine_failure" class="text-blue-500 hover:underline">Learn More</a>
            </div>
            <div class="md:w-1/2">
                <img src="static\images\machine.jpeg" alt="Underperformance Detector" class="w-full rounded-lg shadow-lg">
            </div>
        </div>

        <!-- Supply Failure -->
        <div class="flex flex-col md:flex-row items-center my-12 animate-on-scroll">
            <div class="md:w-1/2 md:pr-8">
                <h2 class="text-3xl font-bold mb-4">Supply Chain Failure Predictor</h2>
                <p class="mb-4">Predict supply chain failure before breakdown.</p>
                <a href="/predict/supply_failure" class="text-blue-500 hover:underline">Learn More</a>
            </div>
            <div class="md:w-1/2">
                <img src="static\images\supply.jpeg" alt="Underperformance Detector" class="w-full rounded-lg shadow-lg">
            </div>
        </div>


    </div>
</section>
{% endblock %}