<template>
	<section class="simplestats-aboutus-welcome">
		<div class="simplestats-aboutus-content">
			<h3>{{ paragraph1 }}</h3>
			<p v-text="paragraph2"></p>
			<p v-text="paragraph3"></p>
			<p v-text="paragraph4"></p>
			<p v-text="paragraph5"></p>
		</div>
		<div class="simplestats-aboutus-image">
			<img :src="getImageUrl('about-us-team.jpg')" alt="" />
		</div>
	</section>
	<section class="simplestats-addons-section">
		<div class="simplestats-addons-row">
			<AddonItem v-for="(addon, key) in store.getAddons" :key="key" :addon="addon" />
		</div>
	</section>
</template>

<script setup>
	import { useStore } from '@/dashboard/store.js';
	import AddonItem from './AddonItem.vue';

	const store = useStore();

	const paragraph1 = wp.i18n.__('Welcome to SimpleStats, the simplest privacy-first analytics plugin for WordPress. We show you exactly where your visitors come from, what they do on your site, and why they leave - up and running in minutes.', 'simplestats-friendly-website-analytics');
	const paragraph2 = wp.i18n.__("Over the years, we found that most analytics tools had become too complicated and too invasive. Getting useful data required a developer, and you'd still end up with cookie notices annoying your visitors.", 'simplestats-friendly-website-analytics');
	const paragraph3 = wp.i18n.__("Our goal is simple: powerful analytics that any site owner can actually use. Heatmaps, session replays, and eCommerce tracking at a price any site owner can afford. No database bloat, no consent banners, no data selling.", 'simplestats-friendly-website-analytics');
	const paragraph4 = wp.i18n.__("SimpleStats is brought to you by the same team that's behind the largest WordPress resource site, WPBeginner, the most popular lead-generation software, OptinMonster, and the best WordPress forms plugin, WPForms.", 'simplestats-friendly-website-analytics');
	const paragraph5 = wp.i18n.__("Yup, we know a thing or two about building awesome products that customers love.", 'simplestats-friendly-website-analytics');
</script>
