<?php
/**
 * Custom 50/50 product template.
 *
 * @package Foliora
 */

defined( 'ABSPATH' ) || exit;

global $product;

$copy    = foliora_copy_for_product( $product );
$sku     = $product->get_sku();
$addons  = foliora_crosssell_products( $sku );
$total   = foliora_setup_total( $product, $addons );
$gallery = $product->get_gallery_image_ids();
$main_id = $product->get_image_id();
$images  = array();
if ( $main_id ) {
	$images[] = $main_id;
}
foreach ( $gallery as $gid ) {
	if ( (int) $gid !== (int) $main_id ) {
		$images[] = $gid;
	}
}
$main_image = $images ? array_shift( $images ) : 0;
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( 'pdp', $product ); ?>>
	<div class="pdp__top">
	<div class="pdp__gallery">
		<?php if ( $main_image ) : ?>
			<figure class="pdp__shot pdp__shot--main">
				<?php echo wp_get_attachment_image( $main_image, 'foliora-hero' ); ?>
			</figure>
			<?php if ( $images ) : ?>
				<div class="pdp__thumbs">
					<?php foreach ( array_slice( $images, 0, 4 ) as $aid ) : ?>
						<figure class="pdp__shot">
							<?php echo wp_get_attachment_image( $aid, 'foliora-card' ); ?>
						</figure>
					<?php endforeach; ?>
				</div>
			<?php endif; ?>
		<?php else : ?>
			<figure class="pdp__shot pdp__shot--main">
				<img src="<?php echo esc_url( foliora_image_uri( $copy['image'] ) ); ?>" alt="" width="1200" height="1500">
			</figure>
			<?php if ( ! empty( $copy['hover'] ) ) : ?>
				<div class="pdp__thumbs">
					<figure class="pdp__shot">
						<img src="<?php echo esc_url( foliora_image_uri( $copy['hover'] ) ); ?>" alt="" width="800" height="800">
					</figure>
				</div>
			<?php endif; ?>
		<?php endif; ?>
	</div>

	<div class="pdp__summary">
		<p class="eyebrow"><?php echo esc_html( $copy['eyebrow'] ); ?></p>
		<h1 class="product_title entry-title"><?php the_title(); ?></h1>
		<p class="pdp__stars"><span class="stars" aria-hidden="true">★★★★★</span> <?php echo esc_html( $copy['rating_display'] ); ?></p>
		<p class="pdp__price"><?php echo wp_kses_post( $product->get_price_html() ); ?></p>
		<div class="pdp__short">
			<?php woocommerce_template_single_excerpt(); ?>
		</div>

		<div class="pdp__atc" id="foliora-atc-wrap">
			<?php woocommerce_template_single_add_to_cart(); ?>
		</div>

		<ul class="pdp__trust">
			<li>✓ Free shipping over $50</li>
			<li>✓ 30-day returns</li>
			<li>✓ Secure checkout</li>
		</ul>

		<?php if ( $addons ) : ?>
			<div class="pdp__setup" data-complete-setup>
				<h2>Complete your reading setup</h2>
				<?php foreach ( $addons as $addon ) : ?>
					<label class="setup-row">
						<input type="checkbox" checked data-setup-id="<?php echo esc_attr( (string) $addon->get_id() ); ?>">
						<span><?php echo esc_html( $addon->get_name() ); ?></span>
						<span><?php echo wp_kses_post( $addon->get_price_html() ); ?></span>
					</label>
				<?php endforeach; ?>
				<button
					class="button button--ghost"
					type="button"
					data-add-setup
					data-parent="<?php echo esc_attr( (string) $product->get_id() ); ?>"
				>Add all — <?php echo esc_html( foliora_money( $total ) ); ?></button>
			</div>
		<?php endif; ?>

		<?php if ( ! empty( $copy['benefits'] ) ) : ?>
			<ul class="pdp__benefits">
				<?php foreach ( $copy['benefits'] as $benefit ) : ?>
					<li>
						<strong><?php echo esc_html( $benefit[0] ); ?></strong>
						<span><?php echo esc_html( $benefit[1] ); ?></span>
					</li>
				<?php endforeach; ?>
			</ul>
		<?php endif; ?>
	</div>
	</div>

	<?php if ( ! empty( $copy['story'] ) ) : ?>
		<section class="pdp-story">
			<figure>
				<img src="<?php echo esc_url( foliora_image_uri( $copy['hover'] ? $copy['hover'] : $copy['image'] ) ); ?>" alt="" width="1400" height="900">
			</figure>
			<div>
				<h2><?php echo esc_html( $copy['story_h2'] ); ?></h2>
				<p><?php echo esc_html( $copy['story'] ); ?></p>
			</div>
		</section>
	<?php endif; ?>

	<?php if ( ! empty( $copy['how_it_works'] ) && 0 === strpos( (string) $sku, 'FOL-EMB' ) ) : ?>
		<section class="pdp-how">
			<h2>How it works</h2>
			<ol>
				<?php foreach ( $copy['how_it_works'] as $i => $step ) : ?>
					<li>
						<span class="pdp-how__n"><?php echo esc_html( (string) ( $i + 1 ) ); ?></span>
						<strong><?php echo esc_html( $step[0] ); ?></strong>
						<p><?php echo esc_html( $step[1] ); ?></p>
					</li>
				<?php endforeach; ?>
			</ol>
			<div class="pdp-how__stills">
				<img src="<?php echo esc_url( foliora_image_uri( 'embosser-hero.jpg' ) ); ?>" alt="" width="800" height="1000">
				<img src="<?php echo esc_url( foliora_image_uri( 'embosser-press.jpg' ) ); ?>" alt="" width="800" height="1000">
			</div>
		</section>
	<?php endif; ?>

	<?php if ( ! empty( $copy['dimensions'] ) ) : ?>
		<section class="pdp-dims">
			<h2>Dimensions</h2>
			<p><?php echo esc_html( $copy['dimensions'] ); ?></p>
			<svg class="pdp-dims__box" viewBox="0 0 160 100" aria-hidden="true">
				<rect x="28" y="18" width="104" height="64" fill="none" stroke="currentColor" stroke-width="1.2"/>
				<rect x="36" y="26" width="88" height="48" fill="none" stroke="currentColor" stroke-width="0.8" stroke-dasharray="3 3"/>
			</svg>
		</section>
	<?php endif; ?>

	<?php if ( ! empty( $copy['faq'] ) ) : ?>
		<section class="pdp-faq">
			<h2>Questions, quietly answered</h2>
			<?php foreach ( $copy['faq'] as $q => $a ) : ?>
				<details class="faq">
					<summary><?php echo esc_html( $q ); ?></summary>
					<p><?php echo esc_html( $a ); ?></p>
				</details>
			<?php endforeach; ?>
		</section>
	<?php endif; ?>

	<div class="pdp-sticky" data-sticky-atc>
		<div>
			<p><?php the_title(); ?></p>
			<p><?php echo wp_kses_post( $product->get_price_html() ); ?></p>
		</div>
		<button class="button" type="button" data-sticky-submit>Add to Bag</button>
	</div>
</div>
