<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">Talk To Us About Your Next Project</h2>
			<RouterLink class="project-cta-link" to="/contact">
				Contact Us
			</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: 340px;
		}
	}
</style>
