<template>

    <!-- Features Section -->
    <section id="features" class=" py-20">
        <div class="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
            <h2 class="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Powerful Prediction Features
            </h2>
            <p class="max-w-[85%] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Our AI-powered platform offers a range of features to help you make accurate predictions.
            </p>
        </div>
        <div class="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3 mt-16">
            <div class="relative overflow-hidden rounded-lg border bg-background p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="text-primary">
                        <path d="M3 3v18h18"></path>
                        <path d="m19 9-5 5-4-4-3 3"></path>
                    </svg>
                </div>
                <div class="mt-4 space-y-2">
                    <h3 class="font-bold">Data Analysis</h3>
                    <p class="text-sm text-muted-foreground">
                        Analyze historical data to identify patterns and trends.
                    </p>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-lg border bg-background p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="text-primary">
                        <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
                        <path d="M21 3v5h-5"></path>
                    </svg>
                </div>
                <div class="mt-4 space-y-2">
                    <h3 class="font-bold">Real-time Predictions</h3>
                    <p class="text-sm text-muted-foreground">
                        Get instant predictions based on the latest data inputs.
                    </p>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-lg border bg-background p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="text-primary">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path>
                    </svg>
                </div>
                <div class="mt-4 space-y-2">
                    <h3 class="font-bold">Secure & Private</h3>
                    <p class="text-sm text-muted-foreground">
                        Your data is encrypted and protected at all times.
                    </p>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-lg border bg-background p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="text-primary">
                        <path d="M2 3h20"></path>
                        <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"></path>
                        <path d="m7 21 5-5 5 5"></path>
                    </svg>
                </div>
                <div class="mt-4 space-y-2">
                    <h3 class="font-bold">Custom Reports</h3>
                    <p class="text-sm text-muted-foreground">
                        Generate detailed reports with visualizations and insights.
                    </p>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-lg border bg-background p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="text-primary">
                        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
                    </svg>
                </div>
                <div class="mt-4 space-y-2">
                    <h3 class="font-bold">AI Models</h3>
                    <p class="text-sm text-muted-foreground">
                        Choose from various AI models optimized for different prediction tasks.
                    </p>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-lg border bg-background p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="text-primary">
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                        <path d="m2 12 5-5"></path>
                        <path d="M2 12h10"></path>
                        <path d="m12 12 5 5"></path>
                    </svg>
                </div>
                <div class="mt-4 space-y-2">
                    <h3 class="font-bold">API Integration</h3>
                    <p class="text-sm text-muted-foreground">
                        Easily integrate our prediction API into your existing systems.
                    </p>
                </div>
            </div>
        </div>
    </section>

</template>