---
import Layout from "../layouts/Layout.astro";
import { siteConfig } from "../config/site";

const pageMetaInfo = {
    title: siteConfig.name,
    description: `Welcome to ${siteConfig.name} - ${siteConfig.description}`,
};
---

<Layout title={pageMetaInfo.title} description={pageMetaInfo.description}>
    <div class="max-w-4xl mx-auto">
        <section
            class="card bg-neutral text-neutral-content shadow-xl"
            aria-labelledby="welcome-heading"
        >
            <div class="card-body">
                <h1 id="welcome-heading" class="card-title text-3xl">
                    {siteConfig.hero.title}
                </h1>
                <p>{siteConfig.hero.description}</p>
            </div>
        </section>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
            {
                siteConfig.featureCards.cards.map((card) => (
                    <article
                        class={
                            card.variant === "primary"
                                ? "card bg-primary text-primary-content"
                                : "card bg-secondary text-secondary-content"
                        }
                    >
                        <div class="card-body">
                            <h2 class="card-title">{card.title}</h2>
                        </div>
                    </article>
                ))
            }
        </div>

        {
            siteConfig.statistics.enabled &&
                siteConfig.statistics.stats.length > 0 && (
                    <section
                        class="stats shadow mt-8 w-full bg-neutral text-neutral-content"
                        aria-label={siteConfig.statistics.title}
                    >
                        {siteConfig.statistics.stats.map((stat) => (
                            <div class="stat">
                                <div
                                    class="stat-title"
                                    id={`${stat.title.toLowerCase()}-stat`}
                                >
                                    {stat.title}
                                </div>
                                <div
                                    class="stat-value"
                                    aria-labelledby={`${stat.title.toLowerCase()}-stat`}
                                >
                                    {stat.value}
                                </div>
                                {stat.change && (
                                    <div
                                        class="stat-desc"
                                        aria-label={`${
                                            stat.change.direction === "up"
                                                ? "Increase"
                                                : "Decrease"
                                        } of ${stat.change.value} (${stat.change.percentage}%)`}
                                    >
                                        {stat.change.direction === "up"
                                            ? "↗︎"
                                            : "↘︎"}{" "}
                                        {stat.change.value} (
                                        {stat.change.percentage}%)
                                    </div>
                                )}
                            </div>
                        ))}
                    </section>
                )
        }

        <section
            class="card bg-neutral text-neutral-content shadow-xl mt-8 hidden lg:block"
            aria-labelledby="contact-heading"
        >
            <div class="card-body">
                <h2 id="contact-heading" class="card-title">
                    {siteConfig.contact.title}
                </h2>
                <p>{siteConfig.contact.description}</p>
                <div class="card-actions justify-end">
                    <button
                        class="btn btn-primary"
                        onclick={`window.location.href='${siteConfig.contact.cta.href}'`}
                        aria-label={siteConfig.contact.cta.ariaLabel}
                    >
                        {siteConfig.contact.cta.text}
                    </button>
                </div>
            </div>
        </section>
    </div>
</Layout>