<script>
	export let className = "";
</script>

<div class="cloud-section-container {className}">
	<svg
		class="cloud-wave top-wave"
		viewBox="0 0 1440 120"
		preserveAspectRatio="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<path
			fill="rgba(255,255,255,0.3)"
			d="M0,60 Q360,120 720,60 Q1080,0 1440,60 L1440,120 L0,120 Z"
		/>
		<path
			fill="rgba(255,255,255,0.6)"
			d="M0,80 Q360,20 720,80 Q1080,140 1440,80 L1440,120 L0,120 Z"
		/>
		<path
			fill="#ffffff"
			d="M0,100 Q360,60 720,100 Q1080,140 1440,100 L1440,120 L0,120 Z"
		/>
	</svg>

	<div class="cloud-content-wrapper">
		<slot />
	</div>

	<svg
		class="cloud-wave bottom-wave"
		viewBox="0 0 1440 120"
		preserveAspectRatio="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<path
			fill="#ffffff"
			d="M0,0 L1440,0 L1440,20 Q1080,60 720,20 Q360,-20 0,20 Z"
		/>
		<path
			fill="rgba(255,255,255,0.6)"
			d="M0,0 L1440,0 L1440,40 Q1080,0 720,40 Q360,80 0,40 Z"
		/>
		<path
			fill="rgba(255,255,255,0.3)"
			d="M0,0 L1440,0 L1440,60 Q1080,20 720,60 Q360,100 0,60 Z"
		/>
	</svg>
</div>

<style>
	.cloud-section-container {
		position: relative;
		margin: 40px auto;
		max-width: 1200px;
		z-index: 10;
		filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
	}

	.cloud-content-wrapper {
		background: #ffffff;
		padding: 20px 60px;
		position: relative;
		z-index: 2;
		min-height: 100px;
		margin-top: -2px;
		margin-bottom: -2px;
	}

	.cloud-wave {
		display: block;
		width: 100%;
		height: 80px;
		pointer-events: none;
	}

	.top-wave {
		z-index: 3;
		position: relative;
	}

	.bottom-wave {
		z-index: 1;
		position: relative;
	}

	@media (max-width: 768px) {
		.cloud-content-wrapper {
			padding: 20px 20px;
		}
		.cloud-wave {
			height: 50px;
		}
	}
</style>
