<?php
/**
 * Welcome-Screen – Boxyfy.
 *
 * @package Boxyfy
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Rendert die Willkommens-Seite (WPCS-konforme Einrückung & korrektes Escaping).
 */
function boxyfy_render_welcome_page() {
	?>
	<div class="wrap boxyfy-welcome-page">

		<h1>
			<?php echo esc_html__( 'Willkommen bei', 'boxyfy' ); ?>
			<span class="boxyfy-highlight">Boxyfy</span>
		</h1>

		<p class="about-description">
			<?php echo esc_html__( 'Dein Plugin für Produktboxen, Amazon-Produktboxen, Preisvergleiche, automatische Amazon-Preisaktualisierung, Preischarts, Preiswecker-Funktionen, Heatmap-Funktion, KI-Chatbox-Integration und mehr.', 'boxyfy' ); ?>
		</p>

		<h2>
			<?php echo esc_html__( 'Dein Start mit Boxyfy – erste Schritte:', 'boxyfy' ); ?>
		</h2>

		<!-- Live-Demo-Boxen -->
		<div class="boxyfy-welcome-links">

			<div class="boxyfy-welcome-link-box">
				<span class="dashicons dashicons-admin-links boxyfy-icon"></span>
				<div class="boxyfy-link-content">
					<strong>
						<?php echo esc_html__( 'Live-Demo - Produktboxen & Produkt-Vergleich', 'boxyfy' ); ?>
					</strong>
					<a
						class="button button-secondary"
						href="https://boxyfy.de/live-demo-produkte-vergleiche/"
						target="_blank"
						rel="noopener noreferrer"
					>
						<?php echo esc_html__( 'Zur Live-Demo', 'boxyfy' ); ?>
					</a>
				</div>
			</div><!-- .boxyfy-welcome-link-box -->

			<div class="boxyfy-welcome-link-box">
				<span class="dashicons dashicons-admin-links boxyfy-icon"></span>
				<div class="boxyfy-link-content">
					<strong>
						<?php echo esc_html__( 'Live-Demo - Produktseite', 'boxyfy' ); ?>
					</strong>
					<a
						class="button button-secondary"
						href="https://boxyfy.de/produkt-item/tikom-l9000-saugroboter-mit-gutem-preis-leistungs-verhaeltnis/"
						target="_blank"
						rel="noopener noreferrer"
					>
						<?php echo esc_html__( 'Zur Live-Demo', 'boxyfy' ); ?>
					</a>
				</div>
			</div><!-- .boxyfy-welcome-link-box -->

		</div><!-- .boxyfy-welcome-links -->

		<ol class="boxyfy-welcome-steps">

			<li>
				<div class="boxyfy-step-box">
					<div class="boxyfy-step-number">1</div>
					<div class="boxyfy-step-content">
						<strong><?php echo esc_html__( 'Permalinks neu speichern:', 'boxyfy' ); ?></strong>
						<p class="boxyfy-step-desc">
							<?php
							echo esc_html__(
								'Bitte gehe in die linke Seitenleiste auf Einstellungen → Permanlinks, scrolle nach ganz unten und klicke auf den Button "Änderungen speichern". Das ist wichtig, damit später Deine Produktseiten korrekt angezeigt werden können.',
								'boxyfy'
							);
							?>
						</p>
					</div>
				</div>
			</li>

			<li>
				<div class="boxyfy-step-box">
					<div class="boxyfy-step-number">2</div>
					<div class="boxyfy-step-content">
						<strong><?php echo esc_html__( 'Boxyfy Overview Video (Deutsch):', 'boxyfy' ); ?></strong>
						<a
							class="button"
							href="https://youtu.be/hJnzg0uXIFI"
							target="_blank"
							rel="noopener noreferrer"
						>
							<?php echo esc_html__( 'Overview-Video ansehen', 'boxyfy' ); ?>
						</a>
						<p class="boxyfy-step-desc">
							<?php
							echo esc_html__(
								'Das Video ist auf Deutsch und zeigt Dir einen Überblick über alle wesentlichen Funktionen und Backend-Einstellungsmöglichkeiten von Boxyfy.',
								'boxyfy'
							);
							?>
						</p>
					</div>
				</div>
			</li>

			<li>
				<div class="boxyfy-step-box">
					<div class="boxyfy-step-number">3</div>
					<div class="boxyfy-step-content">
						<strong><?php echo esc_html__( 'Amazon-API einrichten:', 'boxyfy' ); ?></strong>
						<a
							class="button"
							href="<?php echo esc_url( menu_page_url( 'boxyfy_amazon_api_settings', false ) ); ?>"
						>
							<?php echo esc_html__( 'Amazon-Zugangsdaten eingeben', 'boxyfy' ); ?>
						</a>
						<p class="boxyfy-step-desc">
							<?php
							echo wp_kses(
								__(
									'Um z. B. Amazon-Produktboxen per Shortcode (Boxyfy → Einstellungen → Shortcodes) auf Deiner Seite zu platzieren oder für angelegte Produkte den Amazon-Preis, Bilder etc. beziehen zu können, musst Du vorher Deine <a href="https://partnernet.amazon.de/help/node/topic/GTPNVFFUV2GQ8AZV" target="_blank" rel="noopener noreferrer">Amazon-Credentials</a> eingeben (Access Key, Secret Key, etc.), die Du über das Amazon-Partnernet bekommst.',
									'boxyfy'
								),
								array(
									'a' => array(
										'href'   => true,
										'target' => true,
										'rel'    => true,
									),
								)
							);
							?>
						</p>
					</div>
				</div>
			</li>

			<li>
				<div class="boxyfy-step-box">
					<div class="boxyfy-step-number">4</div>
					<div class="boxyfy-step-content">
						<strong>
							<?php echo esc_html__( 'Amazon-Produktboxen einbinden', 'boxyfy' ); ?>
							<span class="boxyfy-label-licenserequired">
								<?php echo esc_html__( ' | Lizenzkauf notwendig', 'boxyfy' ); ?>
							</span>
						</strong>
						<a
							class="button"
							href="<?php echo esc_url( menu_page_url( 'boxyfy-settings', false ) ); ?>"
						>
							<?php echo esc_html__( 'Shortcode-Überblick', 'boxyfy' ); ?>
						</a>
						<p class="boxyfy-step-desc">
							<?php
							echo wp_kses(
								__(
									'Du hast unter Boxyfy → Amazon Partner Deine Zugangsdaten hinterlegt? Im Menüpunkt Boxyfy → Amazon-API-Test zu Testzwecken eine Amazon-ASIN eingegeben und es wurde ein Preis geliefert? Sehr gut. Du kannst jetzt beginnen, auf Deinen Seiten Shortcodes einzubinden.<br><br>'
									. 'Unter Boxyfy → Einstellungen → Shortcodes findest Du alle Shortcodes inkl. der Attribute, mit denen Du die Ausgabe zusätzlich individualisieren kannst.<br><br>'
									. 'Unter Boxyfy → Einstellungen findest Du Menütabs wie "Produktboxen", hier kannst Du ebenfalls z. B. Farb- oder Schrifteinstellungen für die Amazon-Produktausgaben vornehmen.',
									'boxyfy'
								),
								array(
									'br' => array(),
								)
							);
							?>
						</p>
					</div>
				</div>
			</li>

			<li>
				<div class="boxyfy-step-box">
					<div class="boxyfy-step-number">5</div>
					<div class="boxyfy-step-content">
						<strong><?php echo esc_html__( 'Erstes Produkt anlegen:', 'boxyfy' ); ?></strong>
						<a
							class="button button-primary"
							href="<?php echo esc_url( admin_url( 'post-new.php?post_type=boxyfy_tsprodukte' ) ); ?>"
						>
							<?php echo esc_html__( 'Jetzt erstes Produkt anlegen', 'boxyfy' ); ?>
						</a>
						<p class="boxyfy-step-desc">
							<?php
							echo esc_html__(
								'Beim Anlegen eines Produkts findest Du in der Sidebar und unterhalb des Editor-Fensters alle Boxyfy-Metaboxen, um z. B. Produktdetails anzulegen oder per Amazon-ASIN Preis, Bilder und Sales-Rank abzurufen, eine Sterne- und Produktbewertung oder Produktkategorie zu vergeben.',
								'boxyfy'
							);
							?>
						</p>
					</div>
				</div>
			</li>

			<li>
				<div class="boxyfy-step-box">
					<div class="boxyfy-step-number">6</div>
					<div class="boxyfy-step-content">
						<strong>
							<?php echo esc_html__( 'Produktranking und -vergleich', 'boxyfy' ); ?>
							<span class="boxyfy-label-licenserequired">
								<?php echo esc_html__( ' | Lizenzkauf teilweise notwendig', 'boxyfy' ); ?>
							</span>
						</strong>
						<p class="boxyfy-step-desc">
							<?php
							echo wp_kses(
								__(
									'Beim Anlegen oder Bearbeiten eines Produkts findest Du in der rechten Sidebar die Metabox "Produktkategorie". Hier solltest Du unbedingt eine passende Kategorie wie z. B. "Akkuschrauber" auswählen bzw. anlegen. In der Sidebar findest Du auch "Produktbewertung", hier kannst Du das Produkt zwischen 0 und 100 bewerten. Warum das wichtig ist?<br><br>'
									. 'Weil Du auf diese Weise Deine Produkte thematisch gruppierst – und damit die Grundlage für zwei zentrale Boxyfy-Funktionen schaffst:<br><br>'
									. 'In der Metabox "Produktranking" kannst Du später alle Produkte innerhalb einer Kategorie per Drag-and-Drop global sortieren und bewerten. So entsteht mit der Zeit ein echtes Ranking für z. B.'
									. ' alle Saugroboter, Rasierer oder E-Bikes.<br><br>'
									. 'In der Metabox "Shortcodes" wird automatisch ein Vergleichs-Shortcode für die jeweilige Kategorie generiert. Dieser zeigt eine Vergleichstabelle aller Produkte dieser Kategorie – inklusive Filter, Sortierung und Live-Suche (Lizenzkauf notwendig).<br><br>'
									. '<strong>Deshalb:</strong> Produkte der gleichen Art immer derselben Produktkategorie zuordnen – das macht den Vergleich für Deine Besucher nicht nur sinnvoll, sondern auch überzeugend.',
									'boxyfy'
								),
								array(
									'br'     => array(),
									'strong' => array(),
								)
							);
							?>
						</p>
					</div>
				</div>
			</li>
			
			<li>
				<div class="boxyfy-step-box">
					<div class="boxyfy-step-number">7</div>
					<div class="boxyfy-step-content">
						<strong>
							<?php echo esc_html__( 'Produktbox mit KI-Chatbox', 'boxyfy' ); ?>
							<span class="boxyfy-label-licenserequired">
								<?php echo esc_html__( ' | Lizenzkauf teilweise notwendig', 'boxyfy' ); ?>
							</span>
						</strong>
						<p class="boxyfy-step-desc">
							<?php
							echo wp_kses(
								__(
									'Nach dem Anlegen eines Produkts kannst Du dieses per Shortcode auf einer beliebigen Seite ausgeben lassen. Rechts in der Sidebar unter "Shortcodes" findest Du alles, was Du dafür brauchst.<br><br>Mit der Pro-Lizenz von Boxyfy kannst Du an dieser Stelle eine KI-Chatbox für Deine Besucher anbieten. Sie können sich von der KI Fragen zum Produkt generieren lassen oder selbst Fragen in der Chatbox stellen, wie z.B.: "Was kann das Produkt XY besser als alle anderen auf dem Markt?"<br><br>Boxyfy nutzt hier die API der Perplexity AI mit integrierter Live-Websuche, sodass auch aktuelle Themen etc. kein Problem sind.',
									'boxyfy'
								),
								array(
									'br'     => array(),
									'strong' => array(),
								)
							);
							?>
						</p>
					</div>
				</div>
			</li>

		</ol><!-- .boxyfy-welcome-steps -->

		<p class="boxyfy-welcome-footer">
			<?php echo esc_html__( 'Viel Erfolg mit Deinem Projekt – bei Fragen melde Dich gerne jederzeit unter:', 'boxyfy' ); ?>
			<strong>support@boxyfy.de</strong>
		</p>

	</div><!-- .wrap -->
	<?php
}