<template>
    <div class="schoolPage">
        <HeroBox
            image="/uploads/watercolor_da8a37ce48.webp"
            :aria-label="$t('pages.sectors.schools.hero.ariaLabel')"
            >
            <h1>{{ $t('pages.sectors.schools.hero.headline1') }}</h1>
            <h2>{{ $t('pages.sectors.schools.hero.headline2') }}</h2>
            <h3>{{ $t('pages.sectors.schools.hero.headline3') }}</h3>
        </HeroBox>


        <section class="weKnow"> 
            <div class="container-10"> 
                <NuxtImg
                    src="/uploads/water_dot_c2b934736e.webp"
                    provider="strapi"
                    alt=""
                />
                <div class="textBox">
                    <h2>Sie benötigen eine neue Webseite für Ihre Schule oder Ihren Kindergarten?</h2> 
                
                    <p> <b>Dann sind Sie hier goldrichtig!</b> Denn wir erstellen moderne, barrierefreie Webseiten, die Eltern, Schüler und Mitarbeitende klar informieren und sich ganz einfach pflegen lassen. </p>                 
            
                </div>
                
            </div> 
        </section>

        <section class="forWhom">
            <NuxtImg
                provider="strapi"
                src="/uploads/watercolor_da8a37ce48.webp"
                alt=""
                class="accessibility-bg"
                sizes="100vw"
                priority
            />
            <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
                <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
            </svg> 
            <div class="container-20">
                <h2>Unsere Weblösungen richten sich unter anderem an folgende Bildungseinrichtungen:</h2>
                <ul class="check">
                    <li>Grundschulen</li>
                    <li>weiterführende Schulen (z. B. Gymnasien, Realschulen, Mittelschulen, Gesamtschule)</li>
                    <li>Förderschulen</li>
                    <li>Berufsschulen und Berufsfachschulen</li>
                    <li>Kindergärten und Kitas</li>
                    <li>Horte und Ganztagseinrichtungen</li>
                    <li>Volkshochschulen</li>
                    <li>Musikschulen</li>
                    <li>Familienzentren</li>
                    <li>Bildungsträger und Akademien</li>
                </ul>
            </div>
            <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
                <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
            </svg> 
        </section>

        <section class="articleBox container-5">
            <h3>Wissenswertes rund um die Webseite für Bildungseinrichtungen</h3>
            <ArticleCarousel :articles="recommendedArticles" />
        </section>


        <section class="accessibility">
            <NuxtImg
                provider="strapi"
                src="/uploads/watercolor_da8a37ce48.webp"
                alt=""
                class="accessibility-bg"
                sizes="100vw"
                priority
            />
            <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
                <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
            </svg> 
            <div class="paper">
                <h2>Schon gewusst? - Barrierefreiheit ist für Bildungseinrichtungen in Deutschland Pflicht!</h2>
                <p>
                Wir erstellen Ihre Schulhomepage von Beginn an nach den <b>Anforderungen der Barrierefreiheit (BITV 2.0)</b> und sorgen dafür, dass Ihre Seite auch dann barrierefrei bleibt, wenn Inhalte später von Ihnen oder dem Kollegium selbst eingepflegt werden.
                </p>
                <p>
                Wir nehmen Barrierefreiheit nicht nur ernst, wir machen sie praktisch und umsetzbar. Für Sie bedeutet das konkret: 
                    <ul class="check">
                        <li><b>weniger Risiko</b></li>
                        <li><b>mehr Inklusion</b></li>
                        <li><b>bessere Kommunikation</b></li>
                    </ul>
                </p>
                <p class="pt-2"><NuxtLinkLocale class="btn" to="services-accessibility">Erfahren Sie mehr zum Thema barrierefreies Webdesign</NuxtLinkLocale></p>
            </div>
            <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
                <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
            </svg> 
            </section>

            <section class="cmsAdmin"> 
                <div class="container-10"> 
                    <NuxtImg
                        src="/uploads/schulverwaltung_4405a91768.png"
                        provider="strapi"
                        width="80%"
                    />
                    <div class="textBox">
                        <h2>Inhalte pflegen ganz ohne Webdesign-Kenntnisse?</h2>                 
                        <p>
                            Na klar! Wir setzen auf eine <b>intuitive Verwaltungsoberfläche</b>, mit der Sie Inhalte ganz einfach selbst pflegen können:
                        </p>
                        <ul class="check">
                            <li>Termine eintragen</li>
                            <li>Artikel veröffentlichen</li>
                            <li>Formulare, Downloads und Infos bereitstellen</li>
                            <li>Speisepläne hochladen</li>
                            <li>Bilder austauschen</li>
                        </ul>
                        <p class="noArea">
                            Kein WordPress! &mdash; Keine ständigen Updates! &mdash; Keine Plugins! &mdash; Kein Design-Chaos!
                        </p>
                    </div>                  
                </div> 
            </section>



            <section class="reference">
                <NuxtImg
                    provider="strapi"
                    src="/uploads/watercolor_da8a37ce48.webp"
                    alt=""
                    class="reference-bg"
                    sizes="100vw"
                    priority
                />
                <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
                    <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
                </svg>
                <div class="container-10">
                    
                    <div class="reference-content">
                        <div class="reference-image">
                            <NuxtImg
                            provider="strapi"
                            src="/uploads/Image_Comp_BSK_After_b4358b0e19.png"
                            alt="Berchenschule Konstanz Webseite"
                            width="600"
                            height="400"
                            />
                        </div>
                        <div class="reference-text">
                            <h2>Die Stadt Konstanz setzt bereits auf unsere Expertise</h2>
                            <p>
                            Die Berchenschule in Konstanz hat uns 2024 mit der
                            <a href="https://www.digimedialoop.de/projekt/neugestaltung-schulhomepage-und-corporate-design-berchenschule" target="_blank" rel="noopener noreferrer">
                                Neugestaltung ihrer Schulhomepage
                            </a>
                            beauftragt.</p> 
                            <p>
                            <b>Das Ergebnis:</b> Eine moderne, barrierefreie und benutzerfreundliche Webseite. Sie erleichtert die Kommunikation, spart Zeit und funktioniert!
                            </p>
                            <h3>Dürfen wir auch Sie unterstützen?</h3>
                            <button
                                class="my-4 btn pinkBtn"
                                role="button"
                                aria-label="Kontaktformular öffnen"
                                @click.prevent="toggleContactBubble"
                            >
                            Kontaktieren Sie uns!
                            </button>
                        </div>
                    </div>                
                </div>
                <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
                    <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
                </svg>
            </section>

        <FAQArea
          page-link="/branchen/schulhomepage"
          headline="Fragen und Antworten zur Schulhomepage"
        />

    </div>
</template>

<script setup>
import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'
const mainStore = useMainStore()
const { getArticlesByCategoryIds } = storeToRefs(mainStore)

const recommendedArticles = computed(() => {
  return getArticlesByCategoryIds.value([5])
})
</script>

<style lang="sass">
.schoolPage
    overflow-X: hidden
    hyphens: auto
    .weKnow
        position: relative
        padding-top: 2rem
        padding-bottom: 2rem
        img
            position: absolute
            top: -5%
            left: -25%
            width: 40%
            margin: 1rem 0 2rem 2rem
            z-index: 4
        .textBox
            z-index: 5
            margin-left: 20%
            max-width: 700px
            width: 55%
            h2
                font-size: 1.8rem
            p
                font-size: 1.2rem
            @media(max-width: $breakPointMD)
                width: 80%
            
        h4
            font-family: 'Mainfont'
            line-height: 140%
            font-size: 1.3rem
    
    .forWhom
        margin: 3rem auto 
        padding-top: 4rem
        padding-bottom: 4rem

    .articleBox
        margin-top: 5rem
        margin-bottom: 6rem
        h3
            text-align: center
            

    .accessibility
        position: relative
        padding: 4rem 0
        overflow: hidden     
        
        .paper
            padding: 1rem 5%
            background-color: rgba(white, .8)
            margin: 1rem 10%
            transform: rotate(-1deg)
            border: 1px solid $lightgrey
            box-shadow: 2px 2px 10px 2px #EEE
            h2
                font-size: 1.8rem
    .accessibility-bg
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        object-fit: cover
        object-position: center
        opacity: 0.15        // sehr sanft, nicht störend
        z-index: -1
        pointer-events: none
    .cmsAdmin
        text-align: center
        .textBox
            margin: 2rem auto
            max-width: 800px
            h2
                margin: 1rem auto 1rem auto
            ul
                display: inline-block
                text-align: left
                padding: 0
                margin: 1rem auto
                li
                    
            .noArea
                font-style: italic   
                background-image: radial-gradient(ellipse at center, $lightgrey 0%, rgba($lightgrey, 0.8) 30%, rgba($lightgrey, 0.3) 60%, transparent 100%)
                padding: 1rem 1rem
                font-size: 1rem
                border-radius: .5rem
                text-align: center     
            
    .reference
        margin: 5rem 0
        position: relative
        padding: 5rem 0
        overflow: hidden

        .reference-bg
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            object-fit: cover
            object-position: center
            opacity: 0.15
            z-index: -1
            pointer-events: none
        
        .reference-content
            display: grid
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
            gap: 2rem
            align-items: center
        
            @media (min-width: 1200px)
                grid-template-columns: 2fr 3fr
        
            .reference-image
                img
                    width: 100%
                    height: auto
        
            .reference-text
                max-width: 500px
                margin: 2rem 15%
                @media(max-width: $breakPointMD)
                    margin: 2rem 0
          
        
          
</style>