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

const pageMetaInfo = {
    title: "Services | " + siteConfig.name,
    description:
        "Comprehensive software development and IT services in Edmonton, Alberta",
};
---

<Layout title={pageMetaInfo.title} description={pageMetaInfo.description}>
    <div class="max-w-5xl mx-auto flex flex-col gap-4">
        <!-- Increased from 4xl to 5xl -->
        <section class="card bg-neutral text-neutral-content shadow-xl">
            <div class="card-body">
                <h1 class="card-title text-3xl">Our Services</h1>
                <p class="text-lg">
                    Comprehensive software development and IT solutions tailored
                    to your needs.
                </p>
            </div>
        </section>

        <div class="flex flex-wrap gap-4">
            {
                siteConfig.featureCards.cards.map((service, index) => (
                    <section class="card bg-neutral text-neutral-content shadow-xl basis-[calc(50%-0.5rem)]">
                        <div class="card-body">
                            <div class="flex items-center gap-4">
                                <div
                                    class={`badge badge-${service.variant} badge-lg`}
                                >
                                    {index + 1}
                                </div>
                                <h2 class="card-title text-2xl">
                                    {service.title}
                                </h2>
                            </div>
                            <p class="text-lg mt-4">{service.content}</p>
                        </div>
                    </section>
                ))
            }
        </div>

        <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>