---
import arrowDown from '../../assets/arrow-down-indicator.svg';
import WelcomeTypewriter from '../bits/WelcomeTypewriter.astro';
import BackgroundGradient from "../bits/BackgroundGradient.astro";

import { images } from "../../content/design";

const Background = images.welcome.motion;
const BackgroundStatic = images.welcome.static;

export interface Props {
	nextSlideAnchor: string;
}

const { nextSlideAnchor } = Astro.props;
//const backgroundImage = `url(${background.src})`;
---

<header id="top" role="main">
    <Background class="motion" />
    <BackgroundStatic class="static" />
	<BackgroundGradient />
	<div class="welcome-text">
		<h1>Hallöchen!</h1>
		<p class="subtitle">Ich bin Daniel.</p>
		<p class="subtitle"></p>
		<WelcomeTypewriter />
	</div>
	<div class="contacts">
		
	</div>
	<a href={"#" + (nextSlideAnchor ? nextSlideAnchor : "")} class="arrow-down"><img src={arrowDown.src} alt="Runterscrollen" /></a>
</header>

<style>
	header {
		background: #000;
		background-image: var(--backgroundImage);
        content-visibility: auto;
        contain-intrinsic-size: 100dvw 100dvh;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: -10;
	}

	.welcome-text {
		background-image: linear-gradient(
			135deg,
			rgb(235, 190, 244) 0%,
			hsl(282deg 67% 74%) 20%,
			hsl(274deg 67% 64%) 40%,
			hsl(221deg 100% 64%) 60%,
			hsl(193deg 100% 50%) 80%,
			hsl(176deg 77% 83%) 100%
		);
		background-clip: text;
		color: transparent;
		text-shadow: 0 0 2em rgba(255, 255, 255, 0.4);
	}

	.welcome-text h1 {
		font-size: min(19dvw, 3em);
		font-weight: 600;
		text-align: center;
		margin-top: 0em;
	}

	.subtitle {
		font-size: min(5vw, 2rem);
		font-weight: 400;
		text-align: center;
		margin: 0em;
	}

	.welcome-bg {
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
		object-fit: cover; 
		pointer-events: none;
	}

	.arrow-down {
		color: #fff;
		opacity: 0.3;
		font-size: 5em;
		position: absolute;
		bottom: 1em;
		left: 50%;
		transform: translateX(-50%);
		width: 1em;
		height: 1em;
		cursor: pointer;
		animation: arrow-bounce 4s linear infinite;
		transition: bottom 0.5s ease-out, opacity 0.3s ease-out;
		padding: 0.3em 0.5em;
	}

	.arrow-down:hover {
		animation: arrow-bounce-hover 0.3s ease-out forwards;
	}

	@keyframes arrow-bounce {
		0%, 80% {
			bottom: 1em;
			opacity: 0.3;
		}
		85% {
			bottom: 0.8em;
			opacity: 0.5;
		}
		90% {
			bottom: 1em;
			opacity: 0.3;
		}
		95% {
			bottom: 0.8em;
			opacity: 0.5;
		}
		100% {
			bottom: 1em;
			opacity: 0.3;
		}
	}

	@keyframes arrow-bounce-hover {
		to {
			bottom: 0.8em;
			opacity: 0.5;
		}
	}

	.motion {
        display: block !important;
    }
    .static {
		display: none !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.motion {
			display: none !important;
		}
        .static {
            display: block !important;
        }
		.arrow-down {
			animation: none;
		}
	}
</style>