<template>
	<div id="footer-container">
		<IntegratedLayout>
			<div class="container">
				<div class="left-container">
					<img src="/logo/logo-rect.png" />
					<span>AIProdLaunch</span>
				</div>
				<div class="right-container">
					<div>
						<img src="/logo/bottom-logo.png" />
					</div>
					<div class="navigation-bottom">
						<span v-for="item in first">
							{{item.name}}
						</span>
					</div>
					<div class="navigation-bottom">
						<span v-for="item in two" @click="goto(item.path)">
							{{item.name}}
						</span>
					</div>
					<div class="bottom-span">
						All rights reserved ©2025 AIToolsFinder.
					</div>
				</div>
			</div>

		</IntegratedLayout>
	</div>
</template>

<script>
	export default {
		name: "Footer",
		data() {
			return {
				first: [{
						name: 'Home'
					},
					{
						name: 'AI Daily News'
					},
					{
						name: 'AI Hub'
					},
					{
						name: 'Learn'
					},
					{
						name: 'About Us'
					}
				],
				two: [{
						name: 'Privacy Policy',
						path: '/privacy'
					},
					{
						name: 'Terms Of Service',
						path: '/service'
					},
				]
			}
		},
		methods: {
			goto(path) {
				this.$router.push(path)
			}
		}
	}
</script>

<style lang="scss" scoped>
	#footer-container {
		width: 100%;
		height: $footerBarHeight;

		.container {
			height: $footerBarHeight;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

		}
	}

	.left-container {
		@include flex-center;
		flex-direction: column;

		span {
			font-size: $larg-font-size;
			color: $main-color;
			font-weight: bold;
		}
	}

	.right-container {
		text-align: right;
	}

	.bottom-span {
		color: $grey-color;
	}

	.navigation-bottom {
		span {
			display: inline-block;
			padding: 14px;
		}

		span:last-child {
			padding-right: 0;
		}
	}
</style>
