<?php
/*
 * Template Name: Demo page Static
 *
 */

get_header("static");
?>

<main>

  <div class="hero-demo hide-mobile">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h1 class="hero-demo__title h1">Meet Oxy in Augmented Reality!</h1>
          <p class="hero-demo__text h3">Open this page on your phone to make Oxy appear in your room</p>
        </div>
      </div>
    </div>
  </div>

  <div class="hero-demo hide-desktop">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h1 class="hero-demo__title h1">AR Experience!</h1>
          <p class="hero-demo__text h3">Tap on "try it out" button to open your camera and place Oxy or Valve in your room</p>
        </div>
      </div>
    </div>
  </div>

  <section class="ar-demo hide-mobile">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h1 class="ar-demo__title h2">Experience the high fidelity of our 3D models</h1>
          <div class="qr-code__wrap">
            <div class="qr-code__col">
              <img class="" src="<?= THEMEROOT ?>/frontend/img/oxy.png" alt="Oxy smiling">
            </div>
            <div class="qr-code__col">
              <div class="bubble-small">
                <div class="bubble-small__img-wrap">
                  <img class="" src="<?= THEMEROOT ?>/frontend/img/qr-info-bubble.png" alt="">
                </div>
                <div class="bubble-small__content">
                  <h1 class="bubble-small__title"><span>Try me on your phone!</span></h1>
                  <p class="bubble-small__text">Scan the QR code to open this page on your phone faster</p>
                </div>
                <img class="bubble-small__arrow" src="<?= THEMEROOT ?>/frontend/img/arrow-rounded.png" alt="">
              </div>
              <div class="qr-code__img-wrap">
                <img class="qr-code__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-qr.png" alt="qr code">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="ar-experience hide-desktop">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="ar-tabs">
            <div data-ar-model="oxy" class="ar-tabs__item active">Oxy</div>
            <div data-ar-model="valve" class="ar-tabs__item">Valve</div>
          </div>
          <img data-ar-img="oxy" class="ar-experience__img active" src="<?= THEMEROOT ?>/frontend/img/oxy-img-mobile.png" alt="Oxy smiling">
          <img data-ar-img="valve" class="ar-experience__img" src="<?= THEMEROOT ?>/frontend/img/valve-img.png" alt="Two pipes and a valve">
          <div class="btn-center">
            <button class="btn btn--gradient w-100" id="start-ar-demo">Try it out</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <model-viewer class="u-hidden model-viewer" data-ar-viewer="oxy" id="active-viewer" src="<?= THEMEROOT ?>/frontend/img/Oxy.glb" ar ar-modes="webxr scene-viewer quick-look" ar-scale="auto" animation-name="Clap.001" camera-target="0.1375m 1.8m -0.002111m" camera-controls alt="A 3D model of Oxy" skybox-image="" ios-src="<?= THEMEROOT ?>/frontend/img/Oxy.usdz"></model-viewer>

  <model-viewer class="u-hidden model-viewer" data-ar-viewer="valve" id="" src="<?= THEMEROOT ?>/frontend/img/ValveAnimated.glb" ar ar-modes="webxr scene-viewer quick-look" ar-scale="auto" camera-controls alt="A 3D model of a Valve" skybox-image="" ios-src="<?= THEMEROOT ?>/frontend/img/ValveAnimated.usdz"></model-viewer>

</main>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<?php

get_footer("static");

?>