<script lang="ts">
    import Navigation from '$lib/components/Navigation.svelte';
    import Hero from '$lib/components/Hero.svelte';
    import TOC from '$lib/components/TOC.svelte';
    import ServiceSection from '$lib/components/ServiceSection.svelte';
    import WhoGrid from '$lib/components/WhoGrid.svelte';
    import FAQ from '$lib/components/FAQ.svelte';
    import ScheduleSection from '$lib/components/ScheduleSection.svelte';
    import { pageContent } from '$lib/data/services/hands-on-saas-architecture-consultant/content';
    import { faqItems } from '$lib/data/services/hands-on-saas-architecture-consultant/faq';
    import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
</script>

<Navigation items={pageContent.navItems} page="hands-on-saas-architecture-consultant" />

<Breadcrumbs
    items={[
        { label: 'Services', href: '/services' },
        { label: 'Hands-On SaaS Architecture Consultant' },
    ]}
/>

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

<main id="main">
    <TOC items={pageContent.tocItems} />

    {#each pageContent.sections as section (section.id)}
        <ServiceSection {section} />
    {/each}

    <WhoGrid {...pageContent.who} />

    <FAQ faqList={faqItems} />

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