<template>
	<div class="simplestats-dashboard-empty__hero">
		<div class="simplestats-dashboard-empty__hero-inner">
			<span class="simplestats-dashboard-empty__pill-success">
				<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
					<path d="M10 3L4.5 8.5L2 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
				<span>{{ text_connected }}</span>
			</span>

			<div class="simplestats-dashboard-empty__text">
				<h1 class="simplestats-dashboard-empty__heading">{{ text_heading }}</h1>
				<p class="simplestats-dashboard-empty__subtitle">{{ text_subtitle }}</p>
			</div>

			<!--
				TODO: decide whether to remove or re-add the "Estimated wait time" pill.
				The 30–60 min copy is misleading (data usually appears faster), so hiding
				it until we settle on the right messaging or drop it entirely.
			-->
			<!-- <span class="simplestats-dashboard-empty__pill-wait">
				<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
					<path d="M8 14.6667C11.6819 14.6667 14.6667 11.6819 14.6667 8C14.6667 4.3181 11.6819 1.33333 8 1.33333C4.3181 1.33333 1.33333 4.3181 1.33333 8C1.33333 11.6819 4.3181 14.6667 8 14.6667Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
					<path d="M8 4V8L10.6667 9.33333" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
				<span class="simplestats-dashboard-empty__pill-wait-label">{{ text_wait_label }}</span>
				<span class="simplestats-dashboard-empty__pill-wait-value">{{ text_wait_value }}</span>
			</span> -->

			<div class="simplestats-dashboard-empty__actions">
				<router-link to="/settings" class="simplestats-dashboard-empty__button">
					<span>{{ text_button }}</span>
					<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
						<path d="M2.4996 6H9.5004" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
						<path d="M6 2.4996L9.5004 6L6 9.5004" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
					</svg>
				</router-link>

				<a
					:href="SimpleStats.allStatsUrl"
					target="_blank"
					rel="noopener"
					class="simplestats-dashboard-empty__app-link"
				>{{ text_app_link }}</a>
			</div>
		</div>
	</div>
</template>

<script setup>
	const text_connected   = wp.i18n.__('Connected successfully', 'simplestats-friendly-website-analytics');
	const text_heading     = wp.i18n.__("We're waiting for your first visitor!", 'simplestats-friendly-website-analytics');
	const text_subtitle    = wp.i18n.__('SimpleStats is now tracking visits. Data should start appearing within the next few minutes.', 'simplestats-friendly-website-analytics');
	// TODO: paired with the commented `__pill-wait` block above — restore or delete
	// these strings once we decide whether the wait-time pill stays.
	// const text_wait_label  = wp.i18n.__('Estimated wait time:', 'simplestats-friendly-website-analytics');
	// const text_wait_value  = wp.i18n.__('30-60 minutes', 'simplestats-friendly-website-analytics');
	const text_button      = wp.i18n.__('Go To Settings', 'simplestats-friendly-website-analytics');
	const text_app_link    = wp.i18n.__('Access your Dashboard', 'simplestats-friendly-website-analytics');
</script>
