<?php
/* Template Name: Brands */
get_header(); ?>

<section class="l-brands-welcome py-5 pt-lg-4 pb-lg-0">
	<div class="l-brands-welcome__wrapper container">
		<div class="row">
			<div class="col-lg-5">
				<img class="c-logo-brand m-auto m-lg-0" src="<?php echo get_template_directory_uri(); ?>/img/layout/celebrity-logo.png" alt="Celebrity X Cruises">
				<h1 class="c-title text-center text-lg-left mt-2 mt-lg-1">Happier,<br> bolder, better.</h1>
				<div class="c-description mt-2">
					<p>Our digital team is working with Celebrity Cruises to use leading-edge technology to make the guest journey every bit as rewarding as the destination.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="l-brands-welcome__cover d-none d-lg-block">
		<img src="<?php echo get_template_directory_uri(); ?>/img/content/ship-cover.jpg" alt="Ship">
	</div>
</section>

<section class="l-brands-luxury pb-3 py-lg-5">
	<div class="l-brands-luxury__cover d-block d-lg-none">
		<img src="<?php echo get_template_directory_uri(); ?>/img/content/ship-cover.jpg" alt="Ship">
	</div>
	<div class="container text-lg-center">
		<h2 class="c-subtitle is-dark is-special">Luxury meets intuitive service</h2>
		<div class="c-description is-dark mw-945 m-auto mt-1 mt-lg-2">
			<p>For 25 years, Celebrity Cruises’ outstanding customer service has been the reason our guests cruise with us year after year, and we look forward to partnering with the digital team to give that service a technological spin.</p>
		</div>
		<div class="c-awards mt-2 mt-lg-4">
			<img class="c-awards__item" src="<?php echo get_template_directory_uri(); ?>/img/content/award-1.png" alt="Award 1">
			<img class="c-awards__item" src="<?php echo get_template_directory_uri(); ?>/img/content/award-1.png" alt="Award 2">
			<img class="c-awards__item" src="<?php echo get_template_directory_uri(); ?>/img/content/award-1.png" alt="Award 3">
		</div>
	</div>
</section>

<section class="l-brands-news py-3 py-md-4 py-lg-5">
	<div class="container d-flex justify-content-between align-items-center mb-3">
		<h2 class="c-subtitle">In the News</h2>

		<div class="d-none d-sm-flex">
			<a href="javascript:;" class="c-btn-round js-carousel-default-prev" aria-label="Prev"><i class="icon icon-left-arrow"></i></a>
			<a href="javascript:;" class="c-btn-round js-carousel-default-next" aria-label="Next"><i class="icon icon-right-arrow"></i></a>
		</div>
	</div>
	<div class="c-carousel-default js-carousel-default owl-carousel">
		<?php for ($i = 0; $i < 6; $i++) : ?>
			<article class="c-card-news">
				<div class="c-card-news__cover">
					<img src="<?php echo get_template_directory_uri(); ?>/img/content/placeholder<?php echo ($i == 1) ? '-2' : '' ?>.jpg">
					<div class="c-card-news__type"><i class="icon icon-<?php echo ($i == 1) ? 'video' : 'article' ?>"></i></div>
				</div>
				<p class="c-card-news__meta">May 20, 2019 · Technology · 30 min read</p>
				<h3 class="c-card-news__title">Discover hi-tech fun on £1bn celebrity 1</h3>
			</article>
		<?php endfor; ?>
	</div>
</section>


<section class="l-brands-ships">
	<div class="row no-gutters h-100">
		<div class="col-lg-5 col-xl-4 h-100 pt-lg-5 d-sm-block">
			<div class="c-info-ships">
				<?php for ($i = 0; $i < 6; $i++) : ?>
					<div class="c-info-ships__item h-100 <?php echo ($i == 1) ? 'is-active' : '' ?>">
						<div class="row no-gutters">
							<div class="col-lg-8">
								<h2 class="c-subtitle is-dark">Our Fleet <?php echo $i ?></h2>
								<h3 class="c-subtitle is-dark is-small mt-3 mt-lg-4">Celebrity Edge <?php echo $i ?></h3>
								<div class="c-description is-dark mt-1">
									<p>Celebrity Apex marks a turning point in our approach to ship design. From the very first sketches to experiencing those designs in a virtual reality setting, every step was done in 3-D. From the incredible new Magic Carpe…</p>
								</div>
								<a class="c-btn-icon is-dark mt-1" href="#0">Learn more <i class="icon icon-go"></i></a>
							</div>
						</div>
					</div>
				<?php endfor; ?>
			</div>
		</div>
		<div class="col-lg-7 col-xl-8 h-100">
			<div class="l-brands-ships__nav d-none d-lg-flex">
				<a href="#0" class="c-btn-round is-dark js-carousel-ships-prev" aria-label="Prev"><i class="icon icon-left-arrow"></i></a>
				<a href="#0" class="c-btn-round is-dark js-carousel-ships-next" aria-label="Next"><i class="icon icon-right-arrow"></i></a>
			</div>

			<div class="l-brands-ships__gallery mt-4 mt-lg-0 h-100">
				<div class="c-carousel-ships js-carousel-ships owl-carousel">
					<?php for ($i = 0; $i < 6; $i++) : ?>
						<img class="js-carousel-ships-bridge" data-id="<?php echo $i ?>" src="<?php echo get_template_directory_uri(); ?>/img/content/ship.png">
					<?php endfor; ?>
				</div>
			</div>
		</div>
	</div>
</section>

<?php get_footer(); ?>
