<template>
	<div class="contact__page">
		<breadcrumb-base />
		<div class="contact__map-wrapper">
			<iframe class="contact__map"
					:src="map"
					width="100%"
					height="100%"
					title="parsmega location on map" />
		</div>
		<section class="contact__section">
			<i class="icon-support contact__section__icon" />
			<div class="contact__section__title">
				{{ $t("contact us tel") }}
			</div>
			<a :href="`tel:${telephoneLink}`"
			   class="contact__section__content contact__section__content--ltr">
				{{ telephone }}
			</a>
			<a :href="`tel:${telephone2Link}`"
			   class="contact__section__content contact__section__content--ltr">
				{{ telephone2 }}
			</a>
			<div class="contact__section__content">
				{{ $t("contactWorkTimes") }}
			</div>
		</section>
		<section class="contact__section">
			<i class="icon-mail_outline contact__section__icon" />
			<div class="contact__section__title">
				{{ $t("contact us social") }}
			</div>
			<div class="
					contact__section__content
					ccontact__section__content--ltr
				">
				{{ $t("contactEmailValue") }}
			</div>
			<div class="contact__section__content">
				<a :href="$t('contactLinkdin')"
					title="linkedin account"
				   class="contact__social-link">
					<i class="icon-linkedin" />
				</a>
				<a :href="$t('contactYoutubeLink')"
				title="youtube account"
				   class="contact__social-link">
					<i class="icon-youtube" />
				</a>
				<a :href="$t('contactTelegramLink')"
				title="telegram account"
				   class="contact__social-link">
					<i class="icon-telegram" />
				</a>
				<a :href="$t('contactInstagramLink')"
				title="instagram account"
				   class="contact__social-link">
					<i class="icon-instagram" />
				</a>
			</div>
		</section>
		<section class="contact__section">
			<i class="icon-map contact__section__icon" />
			<div class="contact__section__title">
				{{ $t("contact us address") }}
			</div>
			<div class="contact__section__content">
				{{ $t("contactAddressValue") }}
			</div>
		</section>
	</div>
</template>
<script>
import breadcrumbBase from "@/components/shared/breadcrumb/breadcrumb_base";

export default {
	name: "ContactUsIndex",
	components: {
		breadcrumbBase,
	},
	computed: {
		address() {
			return this.$t("contactAddressValue");
		},
		email() {
			return this.$t("contactEmailValue");
		},
		instagramLink() {
			return this.$t("contactInstagramLink");
		},
		map() {
			return "https://www.google.com/maps/d/u/0/embed?mid=zJGPNW41fQcI.k2bljognXxaI";
		},
		supportPhone() {
			return this.$t("contactSupportPhoneValue");
		},
		telegramLink() {
			return this.$t("contactTelegramLink");
		},
		telephone() {
			return this.$t("contactSupportPhoneValue");
		},
		telephone2() {
			return this.$t("contactSupportPhone2Value");
		},
		telephoneLink() {
			return this.$t("contactSupportPhonePureValue");
		},
		telephone2Link() {
			return this.$t("contactSupportPhone2PureValue");
		},
		twitterLink() {
			return this.$t("contactTwitterLink");
		},
		workTime() {
			return this.$t("contactWorkTimes");
		},
	},
	head() {
		return {
			title: `${this.$t("contact-us")} | ${this.$t("parsmega")}`,
			meta: [],
		};
	},
};
</script>
<style lang="scss" scoped>
.contact {
	&__page {
		margin: 0 auto;
		max-width: $app-max-width;
		position: relative;
	}

	&__map-wrapper {
		overflow: hidden;
		position: relative;
		height: 60vh;

		@media (min-width: $tablet) {
			height: 400px;
			margin: 0 $padding-default;
		}
	}

	&__map {
		border: none;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

	&__section {
		background: $color-white;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
		margin-bottom: $padding-default;
		padding: $padding-default;
		text-align: center;

		&__icon {
			color: $color-primary;
			display: block;
			font-size: 24px;
		}

		&__title {
			font-size: 13px;
			font-weight: bold;
			margin: $padding-default auto $padding-default/2 auto;
		}

		&__content {
			color: $color-text--light;
			display: block;
			font-size: 12px;
			line-height: 2;
			text-decoration: none;

			&--ltr {
				direction: ltr;
			}
		}

		@media (min-width: $tablet) {
			background: transparent;
			box-shadow: none;
			display: inline-block;
			margin: $padding-default;
			margin-top: $padding-default * 2;
			vertical-align: top;
			width: calc(33% - #{$padding-default * 2});
		}
	}

	&__social-link {
		color: $color-text--light;
		display: inline-block;
		font-size: 17px;
		margin: $padding-default/2;
		text-decoration: none;
	}
}
</style>