<script lang="ts">
    import Navigation from '$lib/components/Navigation.svelte';
    import Hero from '$lib/components/Hero.svelte';
    import ScheduleSection from '$lib/components/ScheduleSection.svelte';
    import ServicesCardGrid from '$lib/components/ServicesCardGrid.svelte';
    import EngagementsDl from '$lib/components/EngagementsDl.svelte';
    import { pageContent } from '$lib/data/services/landing/content';
</script>

<Navigation items={pageContent.navItems} page="services" />

<Hero {...pageContent.hero} />

<main id="main">
    <section class="section services-intro" aria-labelledby="intro-heading">
        <div class="container narrow">
            <h2 id="intro-heading" class="sr-only">How we work together</h2>
            {#each pageContent.introParagraphs as p}
                <p>{p}</p>
            {/each}
        </div>
    </section>

    <ServicesCardGrid services={pageContent.services} />

    <EngagementsDl
        items={pageContent.engagements}
        intro={pageContent.engagementsIntro}
        outro={pageContent.engagementsOutro}
    />

    <section class="section services-ideal" aria-labelledby="ideal-heading">
        <div class="container narrow">
            <h2 id="ideal-heading">Ideal clients</h2>
            <ul class="content-list">
                {#each pageContent.idealClients as item}
                    <li>{item}</li>
                {/each}
            </ul>
        </div>
    </section>

    <ScheduleSection {...pageContent.scheduleCta} />
</main>
