<?php
// Template name: Services
get_header();
$template_directory = get_template_directory_uri();
$srcset = 'srcset="' . $template_directory . '/assets/images/lazyload.png"';
?>
<?php
$main = get_field('main');
if ($main['title']) :
?>
<section class="inner-main-section" data-animate-group="list" data-offset="0">
<div class="container">
<div class="inner-main__wrapper">
<?php
if ($main['tag_text']) :
?>
<div class="bubble-tag text-3 mob-text-3" data-animate="fade" data-index="2">
<?php echo $main['tag_text']; ?>
</div>
<?php
endif;
?>
<h1 class="title-1 mob-title-1 title --red-dot" data-animate="word" data-index="1">
<?php
echo $main['title'];
?>
</h1>
</div>
</div>
</section>
<?php
endif;
?>
<section class="discovery-section" data-animate-group="list" data-offset="0.2">
<div class="container">
<div class="discovery-wrapper">
<div class="discovery-wrapper__left">
<?php
$block_of_accordions = get_field('block_of_accordions');
foreach($block_of_accordions as $key=>$item) :
$img_pc = $item['img']['pc'];
$img_mobile = $item['img']['mobile'];
if ($item['accordion_title'] && $item['accordion_content'] && ($img_pc || $img_mobile)) :
?>
<div class="--accordion cube-acordion" data-accordion-group="cube-acordions" data-animate="swim-top" data-index="<?php echo $key + 1; ?>">
<div class="--accordion__open title-3 mob-title-3 --light">
<span class="title">
<span class="number text-2 mob-text-2"><?php echo $key + 1; ?></span>
<?php echo $item['accordion_title']; ?>
</span>
<span class="opener"></span>
</div>
<div class="--accordion__content-container">
<div class="--accordion__content">
<p class="text text-2 mob-text-2 --light">
<?php echo $item['accordion_content']; ?>
</p>
<div class="img for-mob">
<?php
if ($img_mobile && $img_pc) :
?>
<picture>
<source srcset="<?php echo $img_mobile['url']; ?>" media="(max-width: 760px)">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $img_pc['url']; ?>" alt="<?php echo $img_pc['alt']; ?>">
</picture>
<?php
elseif (($img_mobile && !$img_pc) || (!$img_mobile && $img_pc)) :
$img = $img_pc ? $img_pc : $img_mobile;
?>
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt']; ?>">
<?php
endif;
?>
</div>
</div>
</div>
</div>
<?php
endif;
endforeach;
?>
</div>
<div class="discovery-wrapper__right">
<div class="cube__wrapper" data-animate="swim-left" data-index="5">
<?php
foreach($block_of_accordions as $item) :
$img_pc = $item['img']['pc'];
$img_mobile = $item['img']['mobile'];
if ($item['accordion_title'] && $item['accordion_content'] && ($img_pc || $img_mobile)) :
?>
<div class="img <?php if ($key == 0) echo '-active'; ?>">
<?php
if ($img_mobile && $img_pc) :
?>
<picture>
<source srcset="<?php echo $img_mobile['url']; ?>" media="(max-width: 760px)">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $img_pc['url']; ?>" alt="<?php echo $img_pc['alt']; ?>">
</picture>
<?php
elseif (($img_mobile && !$img_pc) || (!$img_mobile && $img_pc)) :
$img = $img_pc ? $img_pc : $img_mobile;
?>
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt']; ?>">
<?php
endif;
?>
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</div>
</div>
</section>
<?php
get_template_part('templates/blocks/clients-section');
?>
<?php
$args = [];
$args['has-breadcrumbs'] = true;
get_template_part('templates/blocks/cta-section', null, $args);
get_template_part('templates/blocks/breadcrumbs');
?>
<?php
get_footer();
?>