<script lang="ts">
    import type { ServiceCard } from '$lib/types/service-page';

    const {
        services,
        sectionId = 'services-grid',
        headingId = 'services-heading',
        heading = 'Services',
        overview = '',
        surface = 'bg',
    }: {
        services: ServiceCard[];
        sectionId?: string;
        headingId?: string;
        heading?: string;
        overview?: string;
        surface?: 'bg' | 'bg-alt';
    } = $props();
</script>

<section
    id={sectionId}
    class={['section services-grid-section', { 'bg-alt': surface === 'bg-alt' }]}
    aria-labelledby={headingId}
>
    <div class="container">
        <h2 id={headingId} class="section-title">{heading}</h2>
        {#if overview}
            <p class="overview">{overview}</p>
        {/if}
        <ul class="services-card-list">
            {#each services as service (service.href)}
                <li class={['services-card', { bg: surface === 'bg-alt' }]}>
                    <h3 class="title">{service.title}</h3>
                    <p class="desc">{service.description}</p>
                    <a
                        href={service.href}
                        class="link"
                        data-umami-event="service link"
                        data-umami-event-label={service.href}
                    >
                        Learn more
                        <span aria-hidden="true">→</span>
                    </a>
                </li>
            {/each}
        </ul>
    </div>
</section>

<style>
    .services-grid-section {
        background-color: var(--color-bg);

        &.bg-alt {
            background-color: var(--color-bg-alt);
        }
    }

    .overview {
        max-width: var(--max-text-width);
        margin: 0 auto var(--space-xxl) auto;
        font-size: var(--font-size-base);
        color: var(--color-text-secondary);
        line-height: var(--line-height-relaxed);
        text-align: center;
    }

    .services-card-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: var(--space-xl);
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .services-card {
        padding: var(--space-xl);
        background-color: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-medium);
        display: flex;
        flex-direction: column;

        &.bg {
            background-color: var(--color-bg);
        }
    }

    .title {
        margin-bottom: var(--space-md);
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-semibold);
    }

    .desc {
        flex: 1;
        margin-bottom: var(--space-lg);
        font-size: var(--font-size-base);
        color: var(--color-text-secondary);
        line-height: var(--line-height-relaxed);
    }

    .link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        font-weight: var(--font-weight-semibold);

        & span {
            margin-left: var(--space-xs);
        }
    }
</style>
