<?php
/**
 * Six category cards.
 *
 * @package Foliora
 */

$cats = array(
	array( 'Book Protection', 'Book sleeves', 'book-protection', 'cat-protection.jpg' ),
	array( 'Bookmarks', 'Magnetic bookmarks / page holders', 'bookmarks', 'cat-bookmarks.jpg' ),
	array( 'Book Lights', 'Clip-on lights', 'book-lights', 'cat-lights.jpg' ),
	array( 'Reading Comfort', 'Book stands / reading accessories', 'reading-comfort', 'cat-comfort.jpg' ),
	array( 'Annotations & Journaling', 'Tabs / highlighters / journals', 'annotations', 'cat-annotate.jpg' ),
	array( 'Gifts for Readers', 'Embosser / bundles / gift products', 'gifts', 'cat-gifts.jpg' ),
);
?>
<section class="section cats" id="collections" aria-labelledby="cats-title">
	<div class="wrap">
		<header class="section-head" data-reveal>
			<h2 id="cats-title">Find something for your next chapter</h2>
		</header>
		<ul class="cats__grid">
			<?php foreach ( $cats as $cat ) : ?>
				<li class="cats__item" data-reveal>
					<a class="cats__card" href="<?php echo esc_url( foliora_cat_url( $cat[2] ) ); ?>">
						<img src="<?php echo esc_url( foliora_image_uri( $cat[3] ) ); ?>" alt="" width="800" height="1000">
						<span class="cats__copy">
							<span class="cats__name"><?php echo esc_html( $cat[0] ); ?></span>
							<span class="cats__sub"><?php echo esc_html( $cat[1] ); ?></span>
						</span>
					</a>
				</li>
			<?php endforeach; ?>
		</ul>
	</div>
</section>
