<?php
/**
 * Template für finanzhack Hacks
 *
 * Neue Single-Hack-Struktur:
 * - Hero mit Schnellcheck rechts neben der Überschrift
 * - Darunter: KI-Assistent als breiter Arbeitsbereich
 * - Schwarzer Hack-Kit-Block aus den bestehenden Tool-/Checklisten-ACF-Feldern
 * - Detailbereich mit kompakten Schritten + aufklappbarer Anleitung
 * - PDF-/Print-Checkliste über eigenes Druckfenster
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

get_header();

/**
 * ACF-Feld mit sauberem Fallback.
 * Wichtig: "0" darf nicht automatisch durch den Default ersetzt werden.
 */
if ( ! function_exists( 'fh_field' ) ) {
	function fh_field( $name, $default = '' ) {
		if ( ! function_exists( 'get_field' ) ) {
			return $default;
		}

		$value = get_field( $name );

		if ( null === $value || false === $value || '' === $value ) {
			return $default;
		}

		return $value;
	}
}

if ( ! function_exists( 'fh_first_field' ) ) {
	function fh_first_field( $names, $default = '' ) {
		foreach ( (array) $names as $name ) {
			$value = fh_field( $name );

			if ( '' !== $value && null !== $value && false !== $value ) {
				return $value;
			}
		}

		return $default;
	}
}
/**
 * Kleine SVG-Icons.
 */
if ( ! function_exists( 'fh_icon_svg' ) ) {
	function fh_icon_svg( $icon ) {
		$icons = array(
			'bank'   => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10h18"/><path d="M5 10v9"/><path d="M9 10v9"/><path d="M15 10v9"/><path d="M19 10v9"/><path d="M3 19h18"/><path d="M12 3 3 8h18z"/></svg>',
			'list'   => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg>',
			'search' => '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>',
			'mail'   => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="m4 7 8 6 8-6"/></svg>',
			'check'  => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>',
			'clock'  => '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>',
			'bars'   => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 18h3"/><path d="M10 18h3"/><path d="M16 18h4"/><path d="M6 14v4"/><path d="M12 10v8"/><path d="M18 6v12"/></svg>',
			'euro'   => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 5.5a6.5 6.5 0 1 0 0 13"/><path d="M4 10h10"/><path d="M4 14h9"/></svg>',
			'arrow'  => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>',
			'bolt'   => '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M13.3 1.8 3.8 14.2c-.5.7 0 1.8.9 1.8h5.4l-.9 6.1c-.2 1.1 1.2 1.7 1.9.8l9.2-12.4c.5-.7 0-1.7-.9-1.7h-5.1l1-6.1c.1-1.1-1.3-1.7-2-.9z"/></svg>',
			'users'  => '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6.5.2a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8ZM2.8 20.5h12.4c.8 0 1.4-.7 1.2-1.5-.8-3.4-3.6-5.3-7.4-5.3S2.4 15.6 1.6 19c-.2.8.4 1.5 1.2 1.5Zm14.1 0h4.3c.8 0 1.4-.7 1.2-1.5-.6-2.7-2.5-4.4-5.1-4.8 1 1.1 1.7 2.4 2.1 4 .2.9-.1 1.7-.5 2.3Z"/></svg>',
			'file'   => '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M6 2.5h8l4 4V21a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 21V4a1.5 1.5 0 0 1 2-1.5Zm7.3 1.6V8h3.9L13.3 4.1ZM7.5 12a1 1 0 0 0 0 2h7a1 1 0 1 0 0-2h-7Zm0 4a1 1 0 0 0 0 2h5a1 1 0 1 0 0-2h-5Z"/></svg>',
			'file-list' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M6 2.5h8l4 4V21a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 21V4a1.5 1.5 0 0 1 2-1.5Zm7.3 1.6V8h3.9L13.3 4.1ZM8 12.2a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Zm3.5.3a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2h-3ZM8 16.2a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Zm3.5.3a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2h-3Z"/></svg>',
			'checklist' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm4.4 7.9 1.6 1.6 4-4a1.2 1.2 0 0 0-1.7-1.7L11 9.1l-.9-.9a1.2 1.2 0 0 0-1.7 1.7Zm-.8 6h7.8a1.1 1.1 0 1 0 0-2.2H8.6a1.1 1.1 0 1 0 0 2.2Z"/></svg>',
			'route'  => '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M5 5a3 3 0 1 1 2.8 4H7v6h10.2l-2.1-2.1a1.3 1.3 0 0 1 1.8-1.8l4.3 4.3c.5.5.5 1.3 0 1.8l-4.3 4.3a1.3 1.3 0 0 1-1.8-1.8l2.1-2.1H6a1.5 1.5 0 0 1-1.5-1.5V9A3 3 0 0 1 5 5Zm0 2.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Z"/></svg>',
			'external' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>',
			'shield' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-5"/></svg>',
			'bulb'   => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M8.5 14.5A6 6 0 1 1 15.5 14.5c-.7.5-1.1 1.2-1.3 2h-4.4c-.2-.8-.6-1.5-1.3-2z"/></svg>',
			'bot'    => '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M11 2h2v3h3.5A3.5 3.5 0 0 1 20 8.5v7A3.5 3.5 0 0 1 16.5 19h-9A3.5 3.5 0 0 1 4 15.5v-7A3.5 3.5 0 0 1 7.5 5H11V2Zm-3.5 5A1.5 1.5 0 0 0 6 8.5v7A1.5 1.5 0 0 0 7.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 16.5 7h-9ZM9 10.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 20h8v2H8v-2Z"/></svg>',
			'send'   => '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M21.6 2.4c.4.3.5.8.3 1.3l-7.3 17.5a1.2 1.2 0 0 1-2.2 0l-2.6-7-7-2.6a1.2 1.2 0 0 1 0-2.2L20.3 2c.5-.2 1-.1 1.3.4ZM6.4 10.5l5 1.9 1.9 5 4.5-10.7-6.2 6.2a1 1 0 0 1-1.4-1.4l6.2-6.2-10 5.2Z"/></svg>',
			'calculator' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M8 7h8"/><path d="M8 11h.01"/><path d="M12 11h.01"/><path d="M16 11h.01"/><path d="M8 15h.01"/><path d="M12 15h.01"/><path d="M16 15h.01"/></svg>',
			'download' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>',
			'info' => '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/></svg>',
			'template' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M4 9h16"/><path d="M9 9v11"/></svg>',
			'compare' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h11"/><path d="m15 4 3 3-3 3"/><path d="M17 17H6"/><path d="m9 14-3 3 3 3"/></svg>',
			'article' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5z"/><path d="M8 8h8"/><path d="M8 12h8"/><path d="M8 16h5"/></svg>',
		);

		return isset( $icons[ $icon ] ) ? $icons[ $icon ] : $icons['check'];
	}
}

/**
 * Erlaubte Farbklassen normalisieren.
 */
if ( ! function_exists( 'fh_color_class' ) ) {
	function fh_color_class( $color, $default = 'blue' ) {
		$allowed = array( 'blue', 'yellow', 'purple', 'green', 'sand' );
		return in_array( $color, $allowed, true ) ? $color : $default;
	}
}

if ( ! function_exists( 'fh_is_enabled' ) ) {
	function fh_is_enabled( $value ) {
		return in_array( strtolower( (string) $value ), array( '1', 'true', 'yes', 'ja', 'on', 'anzeigen', 'aktiv' ), true );
	}
}

if ( ! function_exists( 'fh_file_url' ) ) {
	function fh_file_url( $file ) {
		if ( empty( $file ) ) {
			return '';
		}

		if ( is_array( $file ) && ! empty( $file['url'] ) ) {
			return $file['url'];
		}

		if ( is_numeric( $file ) && function_exists( 'wp_get_attachment_url' ) ) {
			return wp_get_attachment_url( (int) $file );
		}

		return is_string( $file ) ? $file : '';
	}
}

if ( have_posts() ) :
	while ( have_posts() ) :
		the_post();

		$post_id    = get_the_ID();
		$label      = fh_field( 'hack_label', 'finanzhack' );
		$duration   = fh_field( 'hack_duration', '15 Minuten' );
		$difficulty = fh_field( 'hack_difficulty', 'Einfach' );
		$intro      = fh_field( 'hack_intro' );
		$result     = fh_field( 'hack_result' );
		$saving     = fh_field( 'hack_saving_potential' );
		$for_whom   = fh_field( 'hack_for_whom' );
		$needed     = fh_field( 'hack_needed' );

		$hack_terms     = get_the_terms( $post_id, 'hack_category' );
		$hack_term_name = '';
		$hack_term_link = '';

		if ( ! empty( $hack_terms ) && ! is_wp_error( $hack_terms ) ) {
			$hack_term_name = $hack_terms[0]->name;
			$hack_term_link = get_term_link( $hack_terms[0] );
		}

		$check_title = fh_field( 'hack_checklist_title', 'Deine Checkliste für diesen Hack' );
		$check_intro = fh_field( 'hack_checklist_intro', 'Drucke die Liste aus oder speichere sie als PDF. So hast du die wichtigsten Schritte griffbereit.' );

		$summary_highlight_title = fh_field( 'hack_summary_highlight_title', 'Nach dem Hack hast du:' );
		$summary_highlight_text  = fh_field( 'hack_summary_highlight_text', 'Eine klare nächste Handlung - und mehr Überblick über deine Entscheidung.' );

		$cta_badge       = fh_field( 'hack_cta_badge' );
		$cta_title       = fh_field( 'hack_cta_title' );
		$cta_text        = fh_field( 'hack_cta_text', fh_field( 'cta_text' ) );
		$cta_button_text = fh_field( 'hack_cta_button_text' );
		$cta_button_url  = fh_field( 'hack_cta_button_url' );
		$cta_note        = fh_field( 'hack_cta_note' );

		$bottom_badge       = fh_field( 'hack_claim_eyebrow', 'Ein kleiner Hack. Große Wirkung.' );
		$bottom_title       = fh_field( 'hack_cta_bottom_title', 'Ein klarer Schritt. Mehr Überblick. Weniger Finanzchaos.' );
		$bottom_subline     = fh_field( 'hack_claim_subline', 'Starte heute klein - und bring Bewegung in deine Finanzen.' );
		$bottom_button_text = fh_field( 'hack_cta_bottom_button_text', 'Weitere Hacks entdecken' );
		$bottom_button_url  = fh_field( 'hack_cta_bottom_button_url', home_url( '/hacks/' ) );

		$hack_kit_items = array();
		$check_pdf      = fh_field( 'hack_checklist_pdf' );
		$check_pdf_url  = fh_file_url( $check_pdf );
		$has_primary_kit = false;

		if ( fh_is_enabled( fh_field( 'hack_tool_rechner_active', '0' ) ) ) {
			$hack_kit_items[] = array(
				'label'       => fh_field( 'hack_tool_rechner_button_text', 'Rechner öffnen' ),
				'type'        => 'rechner',
				'description' => 'Prüfe schnell, ob sich dieser Hack für dich lohnt.',
				'icon'        => 'calculator',
				'url'         => fh_field( 'hack_tool_rechner_button_url', home_url( '/rechner/' ) ),
				'is_primary'  => true,
			);
			$has_primary_kit = true;
		}

		if ( fh_is_enabled( fh_field( 'hack_tool_vergleich_active', '0' ) ) ) {
			$hack_kit_items[] = array(
				'label'       => fh_field( 'hack_tool_vergleich_button_text', 'Vergleich öffnen' ),
				'type'        => 'vergleich',
				'description' => 'Vergleiche passende Optionen für deine Entscheidung.',
				'icon'        => 'compare',
				'url'         => fh_field( 'hack_tool_vergleich_button_url', home_url( '/vergleich/' ) ),
				'is_primary'  => ! $has_primary_kit,
			);
			$has_primary_kit = true;
		}

		if ( fh_is_enabled( fh_field( 'hack_tool_empfehlung_active', '0' ) ) ) {
			$hack_kit_items[] = array(
				'label'       => fh_field( 'hack_tool_empfehlung_button_text', 'Empfehlung ansehen' ),
				'type'        => 'artikel',
				'description' => 'Sieh dir die passende Empfehlung zu diesem Hack an.',
				'icon'        => 'article',
				'url'         => fh_field( 'hack_tool_empfehlung_button_url', home_url( '/empfehlungen/' ) ),
				'is_primary'  => ! $has_primary_kit,
			);
			$has_primary_kit = true;
		}

		if ( fh_is_enabled( fh_field( 'hack_tool_checkliste_active', '0' ) ) ) {
			$hack_kit_items[] = array(
				'label'       => $check_title,
				'type'        => 'checkliste',
				'description' => $check_intro,
				'icon'        => 'checklist',
				'url'         => $check_pdf_url,
				'action'      => $check_pdf_url ? 'link' : 'print',
				'is_primary'  => ! $has_primary_kit,
			);
			$has_primary_kit = true;
		}

		if ( fh_is_enabled( fh_field( 'hack_tool_antrag_active', '0' ) ) ) {
			$hack_kit_items[] = array(
				'label'       => fh_field( 'hack_tool_antrag_button_text', 'Antrag vorbereiten' ),
				'type'        => 'vorlage',
				'description' => 'Fülle die wichtigsten Angaben schon jetzt vorab aus.',
				'icon'        => 'template',
				'url'         => fh_field( 'hack_tool_antrag_button_url', '#fh-antrag' ),
				'is_primary'  => ! $has_primary_kit,
			);
		}

		if ( empty( $hack_kit_items ) ) {
			$hack_kit_items = array(
				array(
					'label'       => fh_field( 'hack_tool_rechner_button_text', 'Wohngeld-Rechner' ),
					'type'        => 'rechner',
					'description' => 'Prüfe kostenlos, ob dir Wohngeld zustehen könnte.',
					'icon'        => 'calculator',
					'url'         => fh_field( 'hack_tool_rechner_button_url', home_url( '/rechner/' ) ),
					'is_primary'  => true,
				),
				array(
					'label'       => $check_title,
					'type'        => 'checkliste',
					'description' => 'Diese Nachweise brauchst du für den Antrag.',
					'icon'        => 'checklist',
					'url'         => $check_pdf_url,
					'action'      => $check_pdf_url ? 'link' : 'print',
					'is_primary'  => false,
				),
				array(
					'label'       => fh_field( 'hack_tool_antrag_button_text', 'Antrag vorbereiten' ),
					'type'        => 'vorlage',
					'description' => 'Fülle die wichtigsten Angaben schon jetzt vorab aus.',
					'icon'        => 'template',
					'url'         => fh_field( 'hack_tool_antrag_button_url', '#fh-antrag' ),
					'is_primary'  => false,
				),
				array(
					'label'       => 'Offizielle Infos',
					'type'        => 'quelle',
					'description' => 'Links zu Behörden und weiterführenden Informationen.',
					'icon'        => 'info',
					'url'         => fh_field( 'hack_tool_vergleich_button_url', home_url( '/vergleich/' ) ),
					'is_primary'  => false,
				),
			);
		}

		$kit_type_icons = array(
			'rechner'    => 'calculator',
			'checkliste' => 'checklist',
			'vorlage'    => 'template',
			'vergleich'  => 'compare',
			'quelle'     => 'info',
			'artikel'    => 'article',
			'download'   => 'download',
		);

		$hack_steps = array();

		for ( $i = 1; $i <= 5; $i++ ) {
			$step_title = fh_field( "instruction_{$i}_title" );

			if ( ! $step_title ) {
				continue;
			}

			$hack_steps[] = array(
				'number'  => $i,
				'title'   => $step_title,
				'short'   => fh_field( "flow_{$i}_text", fh_field( "instruction_{$i}_text" ) ),
				'time'    => fh_field( "flow_{$i}_duration" ),
				'text'    => fh_field( "instruction_{$i}_text" ),
				'tip'     => fh_field( "instruction_{$i}_tip" ),
				'color'   => fh_color_class( fh_field( "instruction_{$i}_color", 'blue' ), 'blue' ),
				'icon'    => fh_field( "instruction_{$i}_icon", 'check' ),
			);
		}
		?>

		<main class="fh-module fh-hack-page fh-single-hack">

			<div class="fh-single-breadcrumb">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>">Startseite</a>
				<span>&rsaquo;</span>
				<a href="<?php echo esc_url( home_url( '/hacks/' ) ); ?>">Alle Hacks</a>
				<?php if ( $hack_term_name && ! is_wp_error( $hack_term_link ) ) : ?>
					<span>&rsaquo;</span>
					<a href="<?php echo esc_url( $hack_term_link ); ?>"><?php echo esc_html( $hack_term_name ); ?></a>
				<?php endif; ?>
				<span>&rsaquo;</span>
				<strong><?php the_title(); ?></strong>
			</div>

			<section class="fh-hack-hero-new">
				<div class="fh-container fh-hack-container">

					<div class="fh-hack-hero-top fh-hack-hero-template">

						<div class="fh-hack-hero-copy">

							<div class="fh-hack-meta">
								<?php if ( $hack_term_name && ! is_wp_error( $hack_term_link ) ) : ?>
									<a class="fh-badge fh-badge-orange fh-category-badge fh-hack-badge" href="<?php echo esc_url( $hack_term_link ); ?>">
										<?php echo esc_html( $hack_term_name ); ?>
									</a>
								<?php else : ?>
									<span class="fh-badge fh-badge-orange fh-hack-badge">
										<?php echo esc_html( $label ); ?>
									</span>
								<?php endif; ?>
							</div>

							<h1><?php the_title(); ?></h1>

							<?php if ( $intro ) : ?>
								<p class="fh-hack-intro"><?php echo esc_html( $intro ); ?></p>
							<?php endif; ?>

							<div class="fh-hack-meta-row">

								<div class="fh-hero-meta-item">
									<span class="fh-hero-meta-icon"><?php echo fh_icon_svg( 'clock' ); ?></span>
									<strong><?php echo esc_html( $duration ); ?></strong>
								</div>

								<div class="fh-hero-meta-item">
									<span class="fh-hero-meta-icon"><?php echo fh_icon_svg( 'bars' ); ?></span>
									<strong><?php echo esc_html( $difficulty ); ?></strong>
								</div>

								<div class="fh-hero-meta-item fh-hero-save-wrap">
									<span class="fh-hero-meta-icon">
										<span class="rb-bookmark bookmark-trigger loaded" data-pid="<?php echo esc_attr( $post_id ); ?>" style="opacity: 1;">
											<i class="rbi rbi-bookmark" aria-hidden="true" data-title="Save it"></i>
											<i class="bookmarked-icon rbi rbi-bookmark-fill" aria-hidden="true" data-title="Undo Save"></i>
										</span>
									</span>
									<strong>Merken</strong>
								</div>

							</div>

							<a class="fh-hero-start-button" href="#fh-ki-assistent">
								Hack starten <span aria-hidden="true">&rarr;</span>
							</a>

						</div>

						<aside class="fh-quickstart-card fh-check-glance-card fh-hero-check-card">
							<div class="fh-check-glance-stripe"></div>

							<div class="fh-check-glance-title">
								<span><?php echo fh_icon_svg( 'bolt' ); ?></span>
								<h2>Schnellcheck</h2>
							</div>

							<div class="fh-check-glance-rows">
								<?php if ( $for_whom ) : ?>
									<div class="fh-check-glance-row">
										<span class="yellow"><?php echo fh_icon_svg( 'users' ); ?></span>
										<div>
											<small>Für wen?</small>
											<strong><?php echo esc_html( $for_whom ); ?></strong>
										</div>
									</div>
								<?php endif; ?>

								<?php if ( $needed ) : ?>
									<div class="fh-check-glance-row">
										<span class="blue"><?php echo fh_icon_svg( 'file' ); ?></span>
										<div>
											<small>Benötigt</small>
											<strong><?php echo esc_html( $needed ); ?></strong>
										</div>
									</div>
								<?php endif; ?>

								<?php if ( $saving ) : ?>
									<div class="fh-check-glance-row">
										<span class="purple"><?php echo fh_icon_svg( 'euro' ); ?></span>
										<div>
											<small>Potential</small>
											<strong><?php echo esc_html( $saving ); ?></strong>
										</div>
									</div>
								<?php endif; ?>

								<?php if ( $result ) : ?>
									<div class="fh-check-glance-row">
										<span class="green"><?php echo fh_icon_svg( 'check' ); ?></span>
										<div>
											<small>Ergebnis</small>
											<strong><?php echo esc_html( $result ); ?></strong>
										</div>
									</div>
								<?php endif; ?>

								<div class="fh-check-glance-row">
									<span class="yellow"><?php echo fh_icon_svg( 'clock' ); ?></span>
									<div>
										<small>Aufwand</small>
										<strong>Ca. <?php echo esc_html( $duration ); ?></strong>
									</div>
								</div>
							</div>

						</aside>

					</div>

					<div class="fh-hack-tool-stage">

						<article id="fh-ki-assistent" class="fh-hack-tool-card ai fh-ai-window" data-fh-ai-assistant data-post-id="<?php echo esc_attr( $post_id ); ?>">
							<div class="fh-ai-window-head">
								<div>
									<div>
										<h2>KI-Assistent</h2>
										<p>Dein smarter Finanz-Copilot</p>
									</div>
									<span>Beta</span>
								</div>
							</div>

							<div class="fh-ai-hatch"></div>

							<div class="fh-ai-window-body">
								<div class="fh-ai-copilot-card">
									<span><?php echo fh_icon_svg( 'bot' ); ?></span>
									<p>Ich helfe dir, den Hack optimal für dich zu nutzen und die richtigen Entscheidungen zu treffen.</p>
								</div>

								<div class="fh-ai-quick">
									<h3>Schnelleinstieg</h3>
									<div class="fh-ai-quick-grid">
										<button type="button" data-fh-ai-question="Lohnt sich dieser Hack für mich?">
											<span>?</span>
											<strong>Lohnt sich das für mich?</strong>
											<small>Erfahre, ob sich eine Prüfung lohnt.</small>
										</button>
										<button type="button" data-fh-ai-question="Welche Angaben brauchst du, um diesen Hack für mich einzuschätzen?">
											<span><?php echo fh_icon_svg( 'file-list' ); ?></span>
											<strong>Welche Angaben brauche ich?</strong>
											<small>Sieh, welche Unterlagen und Infos wichtig sind.</small>
										</button>
										<button type="button" data-fh-ai-question="Was sollte ich bei diesem Hack zuerst prüfen?">
											<span><?php echo fh_icon_svg( 'checklist' ); ?></span>
											<strong>Was prüfe ich zuerst?</strong>
											<small>Prüfe, ob du zur Zielgruppe gehörst.</small>
										</button>
										<button type="button" data-fh-ai-question="Wie gehe ich bei diesem Hack Schritt für Schritt vor?">
											<span><?php echo fh_icon_svg( 'route' ); ?></span>
											<strong>Wie gehe ich Schritt für Schritt vor?</strong>
											<small>Der Ablauf - einfach und verständlich.</small>
										</button>
									</div>
								</div>

								<div class="fh-ai-question-box">
									<h3>Stelle deine Frage an die KI</h3>
								<div class="fh-ai-input-wrap">
									<label class="screen-reader-text" for="fhAiInput">Deine Frage zum aktuellen Hack</label>
									<textarea id="fhAiInput" class="fh-ai-input" rows="4" maxlength="600" placeholder="Stelle deine Frage zum aktuellen Hack..."></textarea>
									<button type="button" class="fh-ai-send" data-fh-ai-submit aria-label="Einschätzung holen">
										KI-Antwort erhalten <span aria-hidden="true"><?php echo fh_icon_svg( 'send' ); ?></span>
									</button>
								</div>

								<div class="fh-ai-count" data-fh-ai-counter>0 / 600 Zeichen</div>
								</div>

								<div class="fh-ai-hint">
									<span aria-hidden="true"><?php echo fh_icon_svg( 'bulb' ); ?></span>
									Je konkreter deine Frage, desto besser die Antwort.
								</div>

								<div class="fh-ai-result" aria-live="polite" data-fh-ai-result></div>

								<div class="fh-ai-good-to-know">
									<h3>Gut zu wissen</h3>
									<ul>
										<li>Antworten basieren auf dem Inhalt dieses Hacks und verlässlichen Quellen.</li>
										<li>Keine Rechts-, Steuer- oder Finanzberatung.</li>
										<li>Deine Daten werden nicht gespeichert.</li>
									</ul>
									<span aria-hidden="true"><?php echo fh_icon_svg( 'bot' ); ?></span>
								</div>
							</div>

							<div class="fh-ai-window-foot">
								<span><?php echo fh_icon_svg( 'shield' ); ?></span>
								Keine Rechts-, Steuer- oder Finanzberatung. <a href="#fh-steps">Hinweise beachten.</a>
							</div>
						</article>

					</div>

					<div class="fh-print-checklist-source" hidden>
						<div data-print-title><?php echo esc_html( get_the_title() ); ?></div>
						<div data-print-subtitle><?php echo esc_html( $check_title ); ?></div>
						<div data-print-intro><?php echo esc_html( $check_intro ); ?></div>

						<ul data-print-items>
							<?php
							$has_checklist = false;

							for ( $i = 1; $i <= 7; $i++ ) :
								$check_item = fh_field( "hack_checklist_{$i}" );
								$check_hint = fh_field( "hack_checklist_{$i}_hint" );

								if ( ! $check_item ) {
									continue;
								}

								$has_checklist = true;
								?>
								<li>
									<strong><?php echo esc_html( $check_item ); ?></strong>
									<?php if ( $check_hint ) : ?>
										<span><?php echo esc_html( $check_hint ); ?></span>
									<?php endif; ?>
								</li>
							<?php endfor; ?>

							<?php if ( ! $has_checklist ) : ?>
								<?php
								$needed_items = $needed ? array_map( 'trim', explode( ',', $needed ) ) : array(
									'Wichtigste Angaben bereithalten',
									'Unterlagen grob sammeln',
									'Nächsten Schritt notieren',
								);
								?>

								<?php foreach ( $needed_items as $item ) : ?>
									<li>
										<strong><?php echo esc_html( $item ); ?></strong>
									</li>
								<?php endforeach; ?>
							<?php endif; ?>
						</ul>
					</div>

				</div>
			</section>

			<?php if ( ! empty( $hack_kit_items ) ) : ?>
			<section class="fh-action-roadmap fh-hack-kit-section">
				<div class="fh-container fh-hack-container">

					<div class="fh-hack-kit-head">
						<div>
							<p>Dein Werkzeugkasten</p>
							<h2>Dein Hack-Kit</h2>
							<span>Alles, was du für diesen Hack brauchst.</span>
						</div>
					</div>

					<div class="fh-hack-kit-grid">
						<?php foreach ( $hack_kit_items as $kit_item ) : ?>
							<?php
							$kit_type = isset( $kit_item['type'] ) ? sanitize_key( $kit_item['type'] ) : 'artikel';
							$kit_icon = ! empty( $kit_item['icon'] ) ? sanitize_key( $kit_item['icon'] ) : ( $kit_type_icons[ $kit_type ] ?? 'article' );
							$kit_url  = ! empty( $kit_item['url'] ) ? $kit_item['url'] : '#fh-steps';
							$kit_action = ! empty( $kit_item['action'] ) ? $kit_item['action'] : 'link';
							?>

							<article class="fh-hack-kit-card <?php echo ! empty( $kit_item['is_primary'] ) ? 'is-primary' : ''; ?>">
								<span class="fh-hack-kit-icon type-<?php echo esc_attr( $kit_type ); ?>">
									<?php echo fh_icon_svg( $kit_icon ); ?>
								</span>

								<div>
									<small><?php echo esc_html( $kit_type ); ?></small>
									<h3><?php echo esc_html( $kit_item['label'] ); ?></h3>

									<?php if ( ! empty( $kit_item['description'] ) ) : ?>
										<p><?php echo esc_html( $kit_item['description'] ); ?></p>
									<?php endif; ?>
								</div>

								<?php if ( 'print' === $kit_action ) : ?>
									<button type="button" data-fh-print-checklist>
										Checkliste drucken <span>&rarr;</span>
									</button>
								<?php else : ?>
									<a href="<?php echo esc_url( $kit_url ); ?>">
										<?php echo ! empty( $kit_item['is_primary'] ) ? 'Jetzt starten' : 'Öffnen'; ?> <span>&rarr;</span>
									</a>
								<?php endif; ?>
							</article>
						<?php endforeach; ?>
					</div>

				</div>
			</section>
			<?php endif; ?>

			<section class="fh-hack-detail" id="fh-steps">
				<div class="fh-container fh-hack-container fh-detail-grid">

					<article class="fh-detail-main">

						<div class="fh-section-title">
							<p>Schritt für Schritt</p>
							<h2>So setzt du den Hack um</h2>
							<span>Kompakt erklärt. Klicke einen Schritt an, um die Details zu sehen.</span>
						</div>

						<?php if ( ! empty( $hack_steps ) ) : ?>
							<div class="fh-step-tabs" role="tablist" aria-label="Hack-Schritte">
								<?php foreach ( $hack_steps as $index => $step ) : ?>
									<button
										type="button"
										class="fh-step-tab <?php echo 0 === $index ? 'is-active' : ''; ?>"
										data-fh-step-tab="<?php echo esc_attr( $index ); ?>"
										aria-selected="<?php echo 0 === $index ? 'true' : 'false'; ?>"
									>
										<span class="fh-step-tab-icon <?php echo esc_attr( $step['color'] ); ?>">
											<?php echo fh_icon_svg( $step['icon'] ); ?>
										</span>
										<strong><?php echo esc_html( $step['number'] ); ?>. <?php echo esc_html( $step['title'] ); ?></strong>
										<?php if ( $step['short'] ) : ?>
											<small><?php echo esc_html( wp_trim_words( $step['short'], 12 ) ); ?></small>
										<?php endif; ?>
									</button>
								<?php endforeach; ?>
							</div>

							<div class="fh-step-panels">
								<?php foreach ( $hack_steps as $index => $step ) : ?>
									<section
										class="fh-step-box fh-step-panel <?php echo 0 === $index ? 'is-active' : ''; ?>"
										id="<?php echo 5 === $step['number'] ? 'fh-antrag' : ''; ?>"
										data-fh-step-panel="<?php echo esc_attr( $index ); ?>"
									>
										<span class="fh-step-icon <?php echo esc_attr( $step['color'] ); ?>">
											<?php echo fh_icon_svg( $step['icon'] ); ?>
										</span>

										<div>
											<small>Schritt <?php echo esc_html( $step['number'] ); ?></small>
											<h3><?php echo esc_html( $step['title'] ); ?></h3>

											<?php if ( $step['text'] ) : ?>
												<p><?php echo esc_html( $step['text'] ); ?></p>
											<?php endif; ?>

											<?php if ( $step['tip'] ) : ?>
												<div class="fh-tip">
													<strong>finanzhack-Tipp:</strong>
													<?php echo esc_html( $step['tip'] ); ?>
												</div>
											<?php endif; ?>
										</div>
									</section>
								<?php endforeach; ?>
							</div>
						<?php endif; ?>

						<?php if ( $cta_title || $cta_button_text ) : ?>
							<section class="fh-product-cta">

								<?php if ( $cta_badge ) : ?>
									<span class="fh-product-cta-badge"><?php echo esc_html( $cta_badge ); ?></span>
								<?php endif; ?>

								<?php if ( $cta_title ) : ?>
									<h3><?php echo esc_html( $cta_title ); ?></h3>
								<?php endif; ?>

								<?php if ( $cta_text ) : ?>
									<p><?php echo esc_html( $cta_text ); ?></p>
								<?php endif; ?>

								<?php if ( $cta_button_text && $cta_button_url ) : ?>
									<a class="fh-product-cta-button" href="<?php echo esc_url( $cta_button_url ); ?>" target="_blank" rel="nofollow sponsored noopener">
										<?php echo esc_html( $cta_button_text ); ?> <span>&rarr;</span>
									</a>
								<?php endif; ?>

								<?php if ( $cta_note ) : ?>
									<small><?php echo esc_html( $cta_note ); ?></small>
								<?php endif; ?>

							</section>
						<?php endif; ?>

						<?php if ( get_the_content() ) : ?>
							<div class="fh-editor-content fh-mint-content-box">
								<?php the_content(); ?>
							</div>
						<?php endif; ?>

					</article>

					<aside class="fh-detail-sidebar">

						<div class="fh-side-card fh-side-card-savings">
							<h3>Sparpotenzial</h3>

							<?php
							for ( $i = 1; $i <= 5; $i++ ) :
								$saving_label  = fh_first_field( array( "saving_{$i}_label", "hack_saving_{$i}_label", "hack_saving_potential_{$i}_label" ) );
								$saving_amount = fh_first_field( array( "saving_{$i}_amount", "hack_saving_{$i}_amount", "hack_saving_potential_{$i}_amount" ) );

								if ( ! $saving_label && ! $saving_amount ) {
									continue;
								}
								?>

								<div class="fh-side-row">
									<span><?php echo esc_html( $saving_label ); ?></span>
									<strong><?php echo esc_html( $saving_amount ); ?></strong>
								</div>

							<?php endfor; ?>

							<?php if ( fh_first_field( array( 'saving_total', 'hack_saving_total', 'hack_saving_potential_total' ) ) ) : ?>
								<div class="fh-side-total">
									<span>Gesamt</span>
									<strong><?php echo esc_html( fh_first_field( array( 'saving_total', 'hack_saving_total', 'hack_saving_potential_total' ) ) ); ?></strong>
								</div>
							<?php endif; ?>
						</div>

						<div class="fh-side-card fh-side-card-pitfalls">
							<h3>Stolperfallen</h3>

							<?php
							$pitfall_count = 0;

							for ( $i = 1; $i <= 4; $i++ ) :
								$pitfall_title = fh_first_field( array( "pitfall_{$i}_title", "hack_pitfall_{$i}_title", "stolperfalle_{$i}_title", "hack_stolperfalle_{$i}_title" ) );
								$pitfall_text  = fh_first_field( array( "pitfall_{$i}_text", "hack_pitfall_{$i}_text", "stolperfalle_{$i}_text", "hack_stolperfalle_{$i}_text" ) );

								if ( ! $pitfall_title ) {
									continue;
								}

								$pitfall_count++;
								?>

								<div class="fh-pitfall">
									<strong><?php echo esc_html( $pitfall_title ); ?></strong>

									<?php if ( $pitfall_text ) : ?>
										<p><?php echo esc_html( $pitfall_text ); ?></p>
									<?php endif; ?>
								</div>

							<?php endfor; ?>

							<?php if ( 0 === $pitfall_count ) : ?>
								<p class="fh-side-empty">Noch keine Stolperfallen hinterlegt.</p>
							<?php endif; ?>
						</div>

						<div class="fh-side-card fh-side-card-next">
							<h3>N&auml;chste Schritte</h3>

							<?php
							for ( $i = 1; $i <= 3; $i++ ) :
								$next_title = fh_first_field( array( "next_{$i}_title", "hack_next_{$i}_title", "next_step_{$i}_title", "hack_next_step_{$i}_title" ) );
								$next_url   = fh_first_field( array( "next_{$i}_url", "hack_next_{$i}_url", "next_step_{$i}_url", "hack_next_step_{$i}_url" ) );

								if ( ! $next_title ) {
									continue;
								}
								?>

								<a href="<?php echo esc_url( $next_url ? $next_url : '#fh-steps' ); ?>">
									<?php echo esc_html( $next_title ); ?> <span>&rarr;</span>
								</a>

							<?php endfor; ?>
						</div>

					</aside>

				</div>
			</section>

			<section class="fh-bottom-claim">
				<div class="fh-container fh-hack-container">
					<div class="fh-bottom-claim-inner">
						<div class="fh-bottom-stripe"></div>

						<p><?php echo esc_html( $bottom_badge ); ?></p>
						<h2><?php echo esc_html( $bottom_title ); ?></h2>

						<?php if ( $bottom_subline ) : ?>
							<span><?php echo esc_html( $bottom_subline ); ?></span>
						<?php endif; ?>

						<a href="<?php echo esc_url( $bottom_button_url ); ?>">
							<?php echo esc_html( $bottom_button_text ); ?> <span>&rarr;</span>
						</a>
					</div>
				</div>
			</section>

		</main>

		<script>
		window.finanzhackAi = {
			endpoint: <?php echo wp_json_encode( esc_url_raw( rest_url( 'finanzhack/v1/hack-ai-assistant' ) ) ); ?>,
			nonce: <?php echo wp_json_encode( wp_create_nonce( 'wp_rest' ) ); ?>
		};
		</script>

	<?php endwhile; ?>
<?php endif; ?>

<script>
(function () {
	var stepTabs = Array.from(document.querySelectorAll("[data-fh-step-tab]"));
	var stepPanels = Array.from(document.querySelectorAll("[data-fh-step-panel]"));

	if (stepTabs.length && stepPanels.length) {
		stepTabs.forEach(function (tab) {
			tab.addEventListener("click", function () {
				var target = tab.getAttribute("data-fh-step-tab");

				stepTabs.forEach(function (item) {
					var isActive = item === tab;
					item.classList.toggle("is-active", isActive);
					item.setAttribute("aria-selected", isActive ? "true" : "false");
				});

				stepPanels.forEach(function (panel) {
					panel.classList.toggle("is-active", panel.getAttribute("data-fh-step-panel") === target);
				});
			});
		});
	}

	document.querySelectorAll("[data-fh-print-checklist]").forEach(function (button) {
		button.addEventListener("click", function () {
			var source = document.querySelector(".fh-print-checklist-source");

			if (!source) return;

			var titleNode = source.querySelector("[data-print-title]");
			var subtitleNode = source.querySelector("[data-print-subtitle]");
			var introNode = source.querySelector("[data-print-intro]");
			var items = Array.from(source.querySelectorAll("[data-print-items] li"));

			var title = titleNode ? titleNode.textContent : "finanzhack Checkliste";
			var subtitle = subtitleNode ? subtitleNode.textContent : "Checkliste";
			var intro = introNode ? introNode.textContent : "";

			var itemHtml = items.map(function (item) {
				var strongNode = item.querySelector("strong");
				var spanNode = item.querySelector("span");

				var strong = strongNode ? strongNode.textContent : "";
				var span = spanNode ? spanNode.textContent : "";

				return ''
					+ '<li>'
					+ '<span class="box"></span>'
					+ '<div>'
					+ '<strong>' + escapeHtml(strong) + '</strong>'
					+ (span ? '<p>' + escapeHtml(span) + '</p>' : '')
					+ '</div>'
					+ '</li>';
			}).join("");

			var html = ''
				+ '<!doctype html>'
				+ '<html lang="de">'
				+ '<head>'
				+ '<meta charset="utf-8">'
				+ '<title>' + escapeHtml(title) + ' - Checkliste</title>'
				+ '<style>'
				+ '@page{size:A4;margin:18mm;}'
				+ 'body{font-family:Georgia,"Times New Roman",serif;color:#070709;background:#fff;margin:0;}'
				+ '.sheet{border:4px solid #070709;padding:24px;}'
				+ '.stripe{height:12px;border:2px solid #070709;background:repeating-linear-gradient(-60deg,#070709 0,#070709 8px,#fff 8px,#fff 15px);margin-bottom:24px;}'
				+ '.brand{color:#c45100;font-family:Arial Black,Arial,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.22em;margin-bottom:12px;}'
				+ 'h1{font-family:Arial Black,Arial,sans-serif;font-size:46px;line-height:.9;letter-spacing:-.06em;margin:0 0 12px;}'
				+ 'h2{font-family:Arial Black,Arial,sans-serif;font-size:24px;line-height:1;margin:0 0 10px;}'
				+ '.intro{font-size:16px;line-height:1.4;margin:0 0 24px;max-width:620px;}'
				+ 'ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}'
				+ 'li{display:grid;grid-template-columns:28px 1fr;gap:12px;border:2px solid #070709;padding:14px;break-inside:avoid;}'
				+ '.box{width:24px;height:24px;border:2px solid #070709;display:block;}'
				+ 'strong{font-family:Arial Black,Arial,sans-serif;font-size:16px;line-height:1.1;}'
				+ 'li p{margin:5px 0 0;font-size:14px;line-height:1.3;color:#333;}'
				+ '.footer{margin-top:28px;padding-top:14px;border-top:2px solid #070709;font-family:Arial Black,Arial,sans-serif;font-size:12px;text-transform:uppercase;}'
				+ '</style>'
				+ '</head>'
				+ '<body>'
				+ '<div class="sheet">'
				+ '<div class="stripe"></div>'
				+ '<div class="brand">finanzhack Checkliste</div>'
				+ '<h1>' + escapeHtml(title) + '</h1>'
				+ '<h2>' + escapeHtml(subtitle) + '</h2>'
				+ (intro ? '<p class="intro">' + escapeHtml(intro) + '</p>' : '')
				+ '<ul>' + itemHtml + '</ul>'
				+ '<div class="footer">Starte mit einem Schritt.</div>'
				+ '</div>'
				+ '<script>window.onload=function(){window.focus();window.print();};<\/script>'
				+ '</body>'
				+ '</html>';

			var printWindow = window.open("", "_blank", "width=900,height=1100");

			if (!printWindow) {
				alert("Bitte Pop-up erlauben, um die Checkliste zu drucken oder als PDF zu speichern.");
				return;
			}

			printWindow.document.open();
			printWindow.document.write(html);
			printWindow.document.close();
		});
	});

	function escapeHtml(str) {
		return String(str)
			.replace(/&/g, "&amp;")
			.replace(/</g, "&lt;")
			.replace(/>/g, "&gt;")
			.replace(/"/g, "&quot;")
			.replace(/'/g, "&#039;");
	}
})();
</script>

<?php
get_footer();


