<script lang="ts">
    import header_image from "../assets/images/header_image.jpg";
    import Carousel from "../lib/components/carousel/Carousel.svelte";
    import ContactForm from "../lib/components/ContactForm.svelte";
    import threeBusses from "../assets/images/three_busses.jpg";
    import taxis from "../assets/images/taxis.jpg";
    import wheelchairRamps from "../assets/images/three_ramps_open.jpg";
    import twoTourBusses from "../assets/images/two_tour_busses.jpg";
    import van from "../assets/images/van.webp";
    import Link from "../lib/components/link/Link.svelte";
    import { Routes } from "../lib/routes";

    type CardCarouselItem = {
        header: string;
        text: string;
        url: string;
        image: string | null;
    };

    let carouselItems: CardCarouselItem[] = [
        {
            image: threeBusses,
            header: "Minibusstransport",
            text: "Vi har 4 minibusser i ulike størrelser",
            url: `${Routes.bus.url}#minibus`
        },
        {
            image: taxis,
            header: "Taxikjøring",
            text: "Vi kjører taxi med kapasitet opptil 8 personer",
            url: `${Routes.taxi.url}#person`
        },
        {
            image: wheelchairRamps,
            header: "Rullestoltransport",
            text: "Fire av våre biler er rullestoltilpasset med plass til inntil 3 rullestoler",
            url: `${Routes.accessibility.url}`
        },
        {
            image: twoTourBusses,
            header: "Turbuss",
            text: "Vi er medeier i Storfjord Turbuss AS, som har tre moderne turbusser for inntil 50 personer",
            url: `${Routes.bus.url}#tour`
        },
        {
            image: van,
            header: "Pakketaxi",
            text: "Vi har tilbud om pakketaxi. Både småpakker og volumkrevende gods kan transporteres",
            url: `${Routes.taxi.url}#package`
        }
    ];
</script>

<div class="flex gap-8">
    <div class="overflow-hidden">
        <div>
            <img src={header_image} class="rounded-md border-2 border-contrast-100" alt="Minibusses lined up in a row" />

            <h1 class="mt-4 text-xl font-semibold md:text-2xl">
                Med komfort og sikkerhet i førersetet<br />Bli med på en trygg og behagelig tur
            </h1>
            <p class="mt-2 font-medium opacity-70 md:text-lg">
                Minibusservice Stene AS driver personbefordring med taxi, minibuss og busser.
                <br />Vi har lang erfaring og finner gode løsninger for kundene våre.
                <br />Kontraktskjøring for helseforetak, busselskap og kommune utgjør størsteparten av oppdragene våre, men vi tilbyr også turer for privatpersoner, bedrifter og
                turister.
                <br />Vi er godkjent lærebedrift og setter kunden og miljøet i fokus. Vi har både elektriske, hybride og dieselkjøretøy i flåten
            </p>
        </div>

        <div class="mt-12">
            <h1 class="text-xl font-semibold md:text-2xl">Våre tjenester</h1>

            <Carousel class="mt-2 rounded-md border-2 border-contrast-100 bg-primary-300 p-4 shadow-inner" items={carouselItems} let:item>
                <div class="card flex h-full w-64 flex-col overflow-hidden border-contrast-100 shadow-sm transition-transform">
                    {#if item.image}
                        <img class="h-44 w-full border-b-2 border-contrast-100 object-cover" src={item.image} alt="" />
                    {/if}
                    <div class="flex grow flex-col p-4">
                        <h3 class="font-semibold">
                            {item.header}
                        </h3>
                        <p class="grow whitespace-normal">
                            {item.text}
                        </p>
                        <Link class="hi mt-2 w-fit font-semibold" href={item.url}>Les mer...</Link>
                    </div>
                </div>
            </Carousel>
        </div>

        <div class="mt-12">
            <h1 class="text-xl font-semibold md:text-2xl">Kontakt oss</h1>
            <ContactForm />
        </div>
    </div>
</div>
