<template>
	<section v-if="! isDismissed" class="simplestats-hero-card">
		<div class="simplestats-hero-card__left">
			<img :src="logoUrl" alt="SimpleStats" class="simplestats-hero-card__logo" />

			<div class="simplestats-hero-card__text">
				<h2 class="simplestats-hero-card__headline">{{ text_headline }}</h2>
				<p class="simplestats-hero-card__sub">{{ text_sub }}</p>
			</div>

			<a v-if="isFree" :href="SimpleStats.allStatsUrl" target="_blank" rel="noopener" class="simplestats-hero-card__cta">
				<span>{{ text_button }}</span>
				<span class="simplestats-hero-card__cta-arrow">
					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M9.66699 4.33337L9.00033 5.00004L11.467 7.46671H2.66699V8.53337H11.467L9.00033 11L9.66699 11.6667L13.4003 8.00004L9.66699 4.33337Z" fill="currentColor"/></svg>
				</span>
			</a>
		</div>

		<div class="simplestats-hero-card__right">
			<p class="simplestats-hero-card__usps-label">{{ text_whats_included }}</p>
			<ul class="simplestats-hero-card__usps">
				<li v-for="( usp, i ) in usps" :key="i" class="simplestats-hero-card__usp">
					<span class="simplestats-hero-card__usp-icon" v-html="usp.icon" />
					<span class="simplestats-hero-card__usp-label">{{ usp.label }}</span>
				</li>
			</ul>
		</div>

		<button
			v-if="! isFree"
			type="button"
			class="simplestats-hero-card__close"
			:aria-label="text_close"
			@click="dismiss"
			v-html="closeSvg"
		/>
	</section>
</template>

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

	import logoUrl     from '@/images/simplestats-logo.svg?url';
	import sparklesSvg from '@/images/icons/hero-sparkles.svg?raw';
	import shieldSvg   from '@/images/icons/hero-shield-check.svg?raw';
	import zapSvg      from '@/images/icons/hero-zap.svg?raw';
	import closeSvg    from '@/images/icons/hero-close.svg?raw';

	const DISMISS_STORAGE_KEY = 'simplestats:hero-card:dismissed';

	const store  = useStore();
	const isFree = computed( () => ( store.connection.plan || 'free' ) === 'free' );

	const isDismissed = ref(
		! isFree.value && typeof window !== 'undefined'
			&& window.localStorage?.getItem( DISMISS_STORAGE_KEY ) === '1'
	);

	const dismiss = () => {
		isDismissed.value = true;
		try {
			window.localStorage?.setItem( DISMISS_STORAGE_KEY, '1' );
		} catch {
			// localStorage unavailable (private mode / quota) — in-session dismissal still works.
		}
	};

	const text_headline       = wp.i18n.__( 'Hey! This is just a small preview of your website analytics.', 'simplestats-friendly-website-analytics' );
	const text_sub            = wp.i18n.__( 'Log in to SimpleStats now to view all your stats.', 'simplestats-friendly-website-analytics' );
	const text_button         = wp.i18n.__( 'Login Now', 'simplestats-friendly-website-analytics' );
	const text_whats_included = wp.i18n.__( "What's included", 'simplestats-friendly-website-analytics' );
	const text_close          = wp.i18n.__( 'Dismiss', 'simplestats-friendly-website-analytics' );

	const usps = [
		{ label: wp.i18n.__( 'Simple setup',          'simplestats-friendly-website-analytics' ), icon: sparklesSvg },
		{ label: wp.i18n.__( 'Privacy-first',         'simplestats-friendly-website-analytics' ), icon: shieldSvg   },
		{ label: wp.i18n.__( 'Real-time tracking',    'simplestats-friendly-website-analytics' ), icon: zapSvg      },
		{ label: wp.i18n.__( 'Cloud synchronization', 'simplestats-friendly-website-analytics' ), icon: zapSvg      },
	];
</script>
