<template>
	<div class="contact-us">
		<img class="bg" src="@/assets/images/contact-us/bg.jpg" alt="" />
		<section class="header">
			<h1 v-custom-animation.once duration="1s" translate-y-s="-100" opacity-s="0">
				{{ $t('MainHeader.ContactUs') }}
			</h1>
		</section>
		<section class="contact">
			<span class="iconfont icon-dingwei"></span>
			<h3 class="title">{{ $t('Contact') }}</h3>
			<a class="email" href="mailto:info@code-create.com.hk">info@code-create.com.hk</a>
		</section>
		<section class="contact-input">
			<div class="box">
				<h3 class="title">{{ $t('GetInTouch') }}</h3>
				<div class="tip">{{ $t('StayUpToDate') }}</div>
				<input
					v-model="email"
					@keydown.enter.prevent="submit"
					type="email"
					:placeholder="$t('EmailAddress')"
				/>
				<div v-show="error" class="error">{{ error }}</div>
				<button custom @click="submit">{{ $t('Submit') }}</button>
			</div>
		</section>
	</div>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	const email = ref('')
	const error = ref('')
	const submit = () => {
		if (!validateEmail(email.value)) return
		console.log(email.value)
	}
	// 验证邮箱
	const validateEmail = (email: string) => {
		if (email === '') {
			error.value = 'Please fill out this field.'
			return false
		} else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
			error.value = 'Please enter a valid email address.'
			return false
		}
		error.value = ''
		return true
	}
</script>

<style scoped lang="less">
	.contact-us {
		> * {
			position: relative;
			z-index: 1;
		}
		> .bg {
			height: 514px;
			width: 100%;
			object-fit: cover;
			position: fixed;
			top: 0;
			z-index: 0;
		}
		> .header {
			height: 514px;
			display: flex;
			align-items: center;
			justify-content: center;
			> h1 {
				font-size: 64px;
				font-weight: 600;
				letter-spacing: 2px;
				color: #fff;
				margin-bottom: 50px;
				text-transform: uppercase;
			}
		}
		> .contact {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40px;
			> .iconfont {
				font-size: 50px;
				color: #4f4f4f;
				margin-bottom: 20px;
			}
			> .title {
				font-weight: 600;
				line-height: 36px;
				color: #464f3b;
				font-size: 24px;
				margin-bottom: 15px;
			}
			> .email {
				font-size: 14px;
				color: #222;
				text-decoration: none;
			}
		}
		> .contact-input {
			padding: 100px;
			background-color: #faf8f8;
			> .box {
				max-width: 860px;
				width: 100%;
				padding: 80px;
				margin: 0 auto;
				background-color: #fff;
				box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
				border-radius: 40px;
				> .title {
					font-size: 40px;
					color: #222;
					margin-bottom: 10px;
				}
				> .tip {
					color: #4d4d4d;
					margin-bottom: 20px;
				}
				> input {
					width: 100%;
					border-radius: 40px;
					height: 40px;
					padding: 0 20px;
					border: 1px solid #e1e1e1;
					outline: none;
					color: #222;
				}
				> .error {
					font-size: 14px;
					color: #dc3232;
				}
				> button {
					margin-top: 10px;
					width: 100%;
					border-radius: 50px;
					height: 50px;
					font-weight: bold;
					--hover-backcolor: #000;
				}
			}
		}
	}
</style>
