<script setup lang="ts">
	import { RouterLink } from 'vue-router'
</script>

<template>
	<section class="project-cta">
		<div class="project-cta-inner">
			<h2 class="project-cta-title">{{ $t('Home.contactSlogan') }}</h2>
			<RouterLink class="project-cta-link" to="/contact-us">
				{{ $t('Home.contactUs') }}
			</RouterLink>
		</div>
	</section>
</template>

<style scoped lang="less">
	.project-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 435px;
		padding: 72px 20px;
		background: #473935;
	}

	.project-cta-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 38px;
		text-align: center;
	}

	.project-cta-title {
		margin: 0;
		color: #ffffff;
		font-family: Poppins, sans-serif;
		font-size: clamp(22px, 2vw, 27px);
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: 2px;
		text-transform: capitalize;
	}

	.project-cta-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 158px;
		min-height: 48px;
		padding: 0 28px;
		border-radius: 999px;
		color: #ffffff;
		background: #ad2228;
		font-family: Poppins, sans-serif;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 2px;
		text-decoration: none;
		text-transform: uppercase;
		transition:
			background-color 0.2s ease,
			transform 0.2s ease;
	}

	.project-cta-link:hover,
	.project-cta-link:focus-visible {
		background: #93191f;
		transform: translateY(-1px);
	}

	.project-cta-link:focus-visible {
		outline: 2px solid #ffffff;
		outline-offset: 4px;
	}

	@media (max-width: 640px) {
		.project-cta {
			min-height: 288px;
			padding: 64px 20px;
		}

		.project-cta-inner {
			gap: 28px;
		}

		.project-cta-title {
			font-size: 22px;
			line-height: 1.4;
			letter-spacing: 1.2px;
		}

		.project-cta-link {
			min-width: 100px;
			min-height: 40px;
			padding: 0 22px;
			font-size: 9px;
			letter-spacing: 1px;
		}
	}
</style>
