<?php get_header();

$images     = get_field( 'product_gallery' );
$pd_advantages = get_field( 'pd_advantages' );
$accessories = get_field( 'accessories' );
$application_cases = get_field( 'application_cases' );
$devices_that_you_may_interested = get_field( 'devices_that_you_may_interested' );
$materials = get_field( 'materials' );
$pd_banner = get_home_field( 'pd_banner' );
?>

  <section class="sys_sub_head">
    <div class="head_bn_item">
      <div class="bn_item_img"><img src="<?php echo $pd_banner['url']; ?>" alt="banner-Products"/> </div>
    </div>
    <section class="path_bar">
      <div class="layout">
        <ul>
          <li> <a itemprop="breadcrumb" href="/">Home</a></li><li> <a itemprop="breadcrumb" href="/products/" title="Products">Products</a> </li> </ul>
      </div>
    </section>
  </section>


 <!-- page-layout start -->
  <section class="web_main page_main">
  <div class="layout"> 
  <?php get_sidebar();?>
   <section class="main" >
       <!-- product info -->
      <section class="product-intro">
        <div class="product-view" > 
          
          <div class="product-image"> <a class="cloud-zoom" id="zoom1" data-zoom="adjustX:0, adjustY:0" href="<?php the_post_thumbnail_url( 'full' ); ?>"> <img src="<?php the_post_thumbnail_url( 'full' ); ?>" itemprop="image" title="" alt="<?php wp_title(); ?> Featured Image" style="width:100%" /></a> </div>
      
          <div  style="position:relative; width:100%;">
            <div class="image-additional">
              <ul class="swiper-wrapper">
               <?php $i=1; foreach ( $images as $item ): ?>
                <li class="swiper-slide image-item <?php if($i==1) : ?>current<?php endif; ?>"> <a class="cloud-zoom-gallery item"  href="<?php echo $item['url']; ?>" data-zoom="useZoom:zoom1, smallImage:<?php echo $item['url']; ?>" title="<?php wp_title(); ?>"><img src="<?php echo $item['url']; ?>" alt="<?php wp_title(); ?>" /></a> </li>
                <?php $i++; endforeach; ?>
              </ul>
              <div class="swiper-pagination swiper-pagination-white"></div>
            </div>
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
          </div>
        </div>
        <section class="product-summary">
 			 <h1 class="page_title">
        <?php wp_title(); ?>
      </h1>
          <div class="product-meta">
            <h3>Short Description:</h3>
            <?php the_field( 'short_description' ); ?>
          </div>
          <div class="product-btn-wrap"> <a href="mailto:light@yespkg.com" class="email">Send email to us</a></div>
        </section>
      </section>
      <section class="tab-content-wrap product-detail">
        <div class="tab-title-bar detail-tabs">
          <h2 class="tab-title title current"><span>Product Detail</span></h2>

         
          <h2 class="tab-title title"><span>Product Tags</span></h2>
        
        </div>

        <section class="tab-panel-wrap">
          <section class="tab-panel disabled entry">
            <section class="tab-panel-content">
             
            
              <?php while ( have_posts() ) : the_post(); ?>
              <?php the_content(); ?>
              <?php endwhile; ?>
              <div class="clear"></div>

              <hr>
              <li><b>Previous:</b>
                <?php previous_post_link("%link") ?>
              </li>
              <li><b>Next:</b>
                <?php next_post_link("%link") ?>
              </li>
              <hr>
              <style>
                  /* 表单容器 */
.wpforms-container {
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 表单标题 */
.wpforms-field-container {
  margin-bottom: 20px;
}

/* 表单字段 */
.wpforms-field {
  margin-bottom: 20px;
}

/* 标签样式 */
.wpforms-field-label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #555;
}

/* 输入框样式 */
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

/* 输入框聚焦效果 */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

/* 文本域样式 */
textarea {
  resize: vertical;
  min-height: 120px;
}

/* 提交按钮样式 */
.wpforms-submit-container {
  text-align: center;
}

.wpforms-submit {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* 提交按钮悬停效果 */
.wpforms-submit:hover {
  background-color: #45a049;
}

/* 提交按钮加载状态 */
.wpforms-submit-spinner {
  margin-left: 10px;
  vertical-align: middle;
}

/* 隐藏字段 */
.wpforms-field[data-field-type="text"] {
  display: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .wpforms-container {
    padding: 20px;
  }
  
  input[type="text"],
  input[type="email"],
  textarea {
    padding: 10px;
  }
  
  .wpforms-submit {
    padding: 10px 20px;
  }
}
              </style>
              <?php echo do_shortcode("[wpforms id=\"210\"]"); ?>
            </section>
          </section>

       
          
        </section>
      </section>

  </section>   
  </div>
</section>
  <div class="clear"></div>

<?php get_footer(); ?>