<template>
    <div class="filmPage">
      <HeroBox
        image="/uploads/filmhintergrundcollage_a0c4b0e99d.webp"
        :aria-label="'Hero-Bild für Webseiten in der Filmbranche'"
        overlay-image="/uploads/scheinwerfe_b884e87a2f.webp"
        overlay-alt-text="ki roboter fliegt"
        :overlay-width="'15%'"
        :overlay-position="{ top: '25%', right: '10vw' }"
        :dark-background="true"
      >
        <h1>Webseiten für die Film- & Fernsehbranche</h1>
        <h2>Für Schauspieler, Regisseure, Produktionsfirmen und Filmtechnik-Profis</h2>
        <h3>Einfach zu bedienende Webseiten, die Ihre Arbeit ins richtige Licht rücken</h3>
        <button class="btn whiteBtn" role="button" @click.prevent="toggleContactBubble">Erstkontakt – ganz ohne Drehbuch</button>
      </HeroBox>
  
      <section class="visibility">
        <NuxtImg
            provider="strapi"
            src="/uploads/musician_704e5a3556.webp"
            alt="Fans"
            class="background-image"
        />
        <div class="container-10">
            <!-- <NuxtImg
            provider="strapi"
            src="/uploads/scheinwerfe_b884e87a2f.webp"
            alt="Licht"
            class="contentImage"
        /> -->
          <div class="textBox">
            <h2>Sichtbarkeit - nicht nur vor der Kamera</h2>
            <h3>Ihr Erfolg beginnt mit Ihrer Reichweite im Netz</h3>
            <p>
              Wer bei Google & Co. sichtbar ist, bekommt auch die Aufmerksamkeit, die er verdient. 
              <br>Wir sorgen dafür, dass Ihre Webseite technisch
              top optimiert und inhaltlich präzise auf Ihre Zielgruppe ausgerichtet ist. Damit Casting-Agenten, 
              Produzenten und andere Player der Medienbranche Sie auch online finden.
            </p>
            <p>
              Egal ob Schauspieler, Regisseur oder Tontechniker wir stellen Sie <b>online ins Rampenlicht</b>.
            </p>
            <p class="pt-3"><NuxtLinkLocale class="btn" to="services-seo">Erfahren Sie mehr über Suchmaschinen-Optimierung</NuxtLinkLocale></p>
          </div>
        </div>
      </section>
  
      <section class="references">
        <div class="spotlight"></div>
        <div class="spotlight strong"></div>
        
        <div class="container-10">
            <h2>Referenzen aus der Filmbranche</h2>
            <div class="reference-content">
                <div class="reference-text">    
                    <NuxtImg
                        src="/uploads/MBH_Home_3ef5ee1437.png"
                        alt="Webseite von herbX"
                        provider="strapi"
                        class="ref-img"
                    />                
                <h3>Michael Bully Herbig – Schauspieler & Regisseur</h3>
                <p>Ein kreativer Kopf mit großer Reichweite. Wir haben seine Künstlerseite technisch und optisch auf den Punkt gebracht. 
                    Modern, dynamisch und benutzerfreundlich.</p>
                    <a href="/projekt/relaunch-kuenstlerseite-von-michael-bully-herbig" class="btn whiteBtn">Zum Projekt</a>
                </div>
                <div class="reference-text">
                    <NuxtImg
                        src="/uploads/HBX_Home_692e6e9bc5.png"
                        alt="Webseite von herbX"
                        provider="strapi"
                        class="ref-img"
                    />
                <h3>Produktionsfirma herbX</h3>
                <p>Professionelle Produktionsfirma mit Anspruch auf Performance und Design. Für herbX haben wir eine Webseite gebaut, 
                    die Flexibilität und einfache Content-Pflege ermöglicht.</p>
                    <a href="/projekt/relaunch-herb-x-film-webauftritt" class="btn whiteBtn">Zum Projekt</a>    
                </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>
  
    <section class="headlessCMS">
        <div class="container">
            <NuxtImg
            src="/uploads/CMS_easy_d0674d59cc.webp"
            provider="strapi"
            alt="Headless CMS für Filmbranche"
            width="500"
            height="350"
            />
            <div class="textBox">
            <h2>Pflegeleicht und professionell</h2>
            <h3>Dank einer individuell anpassbaren und benutzerfreundlichen Verwaltungs-Oberfläche (CMS) für Ihre Texte, Fotos und Videos</h3> 
            
            <p>
                Ob neue Rollen, Auszeichnungen, Trailer, Pressefotos oder aktuelle Projekte, erfolgreiche Karrieren entwickeln sich weiter. Damit Ihre Webseite das widerspiegelt, richten wir eine benutzerfreundliche Verwaltungsoberfläche ein, mit der Sie Inhalte ganz einfach selbst pflegen können.
                Diese Oberfläche ist unabhängig vom Design – so bleibt Ihre Seite immer optisch stimmig, selbst wenn Sie Texte, Fotos oder Videos austauschen. Es kann nichts „kaputtgehen“.
            </p>
            <p>
                Auf Wunsch übernehmen wir auch die Pflege für Sie, so dass Ihre Seite immer aktuell bleibt, ohne dass Sie sich selbst darum kümmern müssen.
            </p>
            <p class="pt-3"><NuxtLinkLocale class="btn" to="services-cms">Mehr zu unserem Content-Management-System</NuxtLinkLocale></p>
            </div>
        </div>
        </section>

        <section class="cta">
            <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> 
            <NuxtImg
                provider="strapi"
                src="/uploads/rolle_7efa6a471f.webp"
                alt="Fans"
                class="background-image"
            />
            <CallToActionBox
            headline="Na? – Schon ganz von der Rolle?"
            text="Dann wird’s Zeit für eine Website mit professioneller Regie und einem Content-Management-System, das keine Szene macht."
            button-text="Licht, Kamera, Kontakt!"
        />
        <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/film-und-fernsehen"
        headline="Häufig gestellte Fragen zur Webseite für die Filmbranche"
      />
    </div>
  </template>
  
  <script setup>

import { useMainStore } from '@/stores/main'
  
  const mainStore = useMainStore()
  
  const toggleContactBubble = () => {
    mainStore.toggleContactBubble()
  }

  
  </script>
  
  <style lang="sass" scoped>
  @keyframes moveSpotlight
    0%
        transform: translate(-30%, -30%) rotate(0deg)
    15%
        transform: translate(50%, 60%) rotate(5deg)
    30%
        transform: translate(0%, 30%) rotate(-3deg)
    45%
        transform: translate(70%, -20%) rotate(4deg)
    60%
        transform: translate(-20%, 50%) rotate(-5deg)
    75%
        transform: translate(30%, 0%) rotate(2deg)
    90%
        transform: translate(-10%, -40%) rotate(-4deg)
    100%
        transform: translate(20%, 20%) rotate(0deg)


  .filmPage
    overflow-x: hidden 
  
    .visibility      
        align-items: center
        margin-bottom: 0
        padding-bottom: 30%
        .background-image
            width: 100%
            height: auto
            position: absolute
            bottom: 0
            left: 0
        .textBox
            p
            line-height: 1.6
            margin-bottom: 1rem
        .contentImage
            width: 20%
            float: right
  
    .references
        position: relative
        overflow: hidden
        color: white
        padding: 2rem 0 5rem 0
        text-align: center
        background: linear-gradient(to bottom, #000000, #022337)

        margin-top: -5px  
        .spotlight
            position: absolute
            top: -50%
            left: -50%
            width: 130%
            height: 130%
            background: radial-gradient(ellipse 30% 20% at center, rgba(255,245,200,0.4) 0%, rgba(255,245,200,0) 100%)
            filter: blur(100px) brightness(1.5)
            mix-blend-mode: screen
            animation: moveSpotlight 16s ease-in-out infinite alternate
            pointer-events: none
            z-index: 1
        .spotlight.strong
            background: radial-gradient(ellipse at center, rgba(255,245,200,0.25) 0%, rgba(255,245,200,0) 40%)
            filter: blur(20px)
            z-index: 2
          
        a
            color: white
            text-decoration: none
            font-family: 'Mainfont-Bold'
        .whiteBtn
            color: black !important
    
        h2
            margin: 3rem auto
            font-family: 'Comfortaa'
            text-transform: uppercase
            letter-spacing: .15rem

        h3, p
            margin-bottom: 1rem

        .ref-img
            width: 80%
            max-width: 300px
            z-index: 4
        
        .reference-content
            display: flex
            gap: 2rem
            justify-content: center
            flex-wrap: nowrap
        
            .reference-text
              flex: 1 1 45%
              text-align: center         

              h3
                font-family: 'Comfortaa-Bold'
        
        @media (max-width: $breakPointMD)
            .reference-content
                flex-direction: column
        
            .reference-text
                flex-basis: 100%
                margin-bottom: 1.5rem
  
    .headlessCMS
        padding: 2rem 0 0 0             
        img
            float: right
            width: 90%
            max-width: 300px
            height: auto
            margin: 0 0 1rem 1rem
        
    .cta
        position: relative
        overflow: hidden
        display: flex
        align-items: center
        justify-content: bottom
        padding: 0 auto 6rem auto
        text-align: center
        color: black
        
        .background-image
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            object-fit: cover
            object-position: bottom center
            z-index: 0      
        .ctaBox
            z-index: 1
            margin-bottom: 30%
            margin-top: 1rem

  
    @media (max-width: $breakPointMD)
      section.visibility,
      section.headlessCMS
        grid-template-columns: 1fr
        text-align: center
        .textBox
          margin-top: 1rem


  </style>
  