<template>
	<section class="simplestats-upgrade">
		<header class="simplestats-upgrade__header">
			<img :src="starUrl" alt="" aria-hidden="true" class="simplestats-upgrade__star" />
			<h3 class="simplestats-upgrade__title">{{ text_title }}</h3>
			<span class="simplestats-upgrade__pro">{{ text_pro }}</span>
		</header>
		<div class="simplestats-upgrade__divider" />

		<ul class="simplestats-upgrade__features">
			<li v-for="( f, i ) in features" :key="i" class="simplestats-upgrade__feat">
				<span class="simplestats-upgrade__feat-icon">
					<img :src="f.icon" width="16" height="16" alt="" aria-hidden="true" />
				</span>
				<div class="simplestats-upgrade__feat-text">
					<p class="simplestats-upgrade__feat-title">{{ f.title }}</p>
					<p class="simplestats-upgrade__feat-sub">{{ f.sub }}</p>
				</div>
				<img :src="lockUrl" alt="" aria-hidden="true" class="simplestats-upgrade__lock" />
			</li>
		</ul>

		<div class="simplestats-upgrade__divider" />
		<footer class="simplestats-upgrade__footer">
			<a :href="SimpleStats.upgradeUrl" target="_blank" rel="noopener" class="simplestats-upgrade__cta">
				<span>{{ text_cta }}</span>
				<span class="simplestats-upgrade__cta-icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M11.3333 6.66663H10.5333V4.66663C10.5333 3.26663 9.4 2.1333 8 2.1333C6.6 2.1333 5.46667 3.26663 5.46667 4.66663V6.66663H4.66667C4.26667 6.66663 4 6.9333 4 7.3333V12.6666C4 13.0666 4.26667 13.3333 4.66667 13.3333H11.3333C11.7333 13.3333 12 13.0666 12 12.6666V7.3333C12 6.9333 11.7333 6.66663 11.3333 6.66663ZM9.46667 6.66663H6.53333V4.66663C6.53333 3.86663 7.2 3.19997 8 3.19997C8.8 3.19997 9.46667 3.86663 9.46667 4.66663V6.66663Z" fill="white"/></svg>
				</span>
			</a>
			<span class="simplestats-upgrade__price">{{ text_price }}</span>
		</footer>
	</section>
</template>

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

	import starUrl      from '@/images/icons/pro-star.svg?url';
	import cartUrl      from '@/images/icons/pro-cart.svg?url';
	import formUrl      from '@/images/icons/pro-form.svg?url';
	import heatmapUrl   from '@/images/icons/pro-heatmap.svg?url';
	import sessionsUrl  from '@/images/icons/pro-sessions.svg?url';
	import campaignUrl  from '@/images/icons/pro-campaign.svg?url';
	import lockUrl      from '@/images/icons/lock.svg?url';

	const store              = useStore();
	const { formatNumber }   = useReportHelper();

	const campaignPageviews  = computed( () => Number( store.report.data?.campaigns?.pageviews ) || 0 );
	const campaignSub        = computed( () => wp.i18n.sprintf(
		wp.i18n._n( '%s Visit', '%s Visits', campaignPageviews.value, 'simplestats-friendly-website-analytics' ),
		formatNumber( campaignPageviews.value, 0 )
	) );

	const ecommerceRevenue   = computed( () => Number( store.report.data?.ecommerce?.revenue ) || 0 );
	const ecommerceSub       = computed( () => wp.i18n.sprintf(
		wp.i18n.__( '$%s tracked this period', 'simplestats-friendly-website-analytics' ),
		formatNumber( ecommerceRevenue.value, 0 )
	) );

	const formSubmissions    = computed( () => Number( store.report.data?.forms?.submissions ) || 0 );
	const formSub            = computed( () => wp.i18n.sprintf(
		wp.i18n._n( '%s submission tracked', '%s submissions tracked', formSubmissions.value, 'simplestats-friendly-website-analytics' ),
		formatNumber( formSubmissions.value, 0 )
	) );

	const text_title = wp.i18n.__( 'Unlock Premium Features',                  'simplestats-friendly-website-analytics' );
	const text_pro   = wp.i18n.__( 'Pro',                                      'simplestats-friendly-website-analytics' );
	const text_cta   = wp.i18n.__( 'Upgrade to Pro',                           'simplestats-friendly-website-analytics' );
	const text_price = wp.i18n.__( 'From $199.50/year  ·  14-day guarantee',   'simplestats-friendly-website-analytics' );

	// All five icons are 16×16 paths rendered inside the CSS-driven 40×40 neutral/100 tile.
	const features = computed( () => [
		{ title: wp.i18n.__( 'E-commerce Revenue',  'simplestats-friendly-website-analytics' ), sub: ecommerceSub.value,                                           icon: cartUrl     },
		{ title: wp.i18n.__( 'Form Conversions',    'simplestats-friendly-website-analytics' ), sub: formSub.value,                                                icon: formUrl     },
		{ title: wp.i18n.__( 'Heatmaps',            'simplestats-friendly-website-analytics' ), sub: wp.i18n.__( 'Available for 8 pages',        'simplestats-friendly-website-analytics' ), icon: heatmapUrl  },
		{ title: wp.i18n.__( 'Sessions Recordings', 'simplestats-friendly-website-analytics' ), sub: wp.i18n.__( '2,847 sessions ready to play', 'simplestats-friendly-website-analytics' ), icon: sessionsUrl },
		{ title: wp.i18n.__( 'Campaign Insights',   'simplestats-friendly-website-analytics' ), sub: campaignSub.value,                                            icon: campaignUrl },
	] );
</script>
