"use client";
import Link from "next/link";
import Productimg1 from "../../../public/assets/images/shop/sidebar-product-image-1.png";
import Productimg2 from "../../../public/assets/images/shop/sidebar-product-image-2.png";
import Productimg3 from "../../../public/assets/images/shop/sidebar-product-image-3.png";
import Shop1 from "../../../public/assets/images/shop/product-1.png";
import Shop2 from "../../../public/assets/images/shop/product-2.png";
import Shop3 from "../../../public/assets/images/shop/product-3.png";
import Shop4 from "../../../public/assets/images/shop/product-4.png";
import Shop5 from "../../../public/assets/images/shop/product-5.png";
import Shop6 from "../../../public/assets/images/shop/product-6.png";
import Shop7 from "../../../public/assets/images/shop/product-7.png";
import Shop8 from "../../../public/assets/images/shop/product-8.png";
import Shop9 from "../../../public/assets/images/shop/product-9.png";
import Shop10 from "../../../public/assets/images/shop/product-10.png";
import Shop11 from "../../../public/assets/images/shop/product-11.png";
import Shop12 from "../../../public/assets/images/shop/product-12.png";

function ShopPage() {
  return (
    <div>
      <section className="shop-page">
        <div className="container">
          <div className="row">
            <div className="col-lg-3 col-md-12 col-sm-12">
              <div className="sidebar shop-sidebar widget-area">
                <div
                  className="widget-box widget widget-search wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-search">
                    <h4>Search</h4>
                    <div className="shop-search product-search">
                      <input type="search" placeholder="Keywords" />
                      <i className="icon-search" />
                    </div>
                  </div>
                </div>
                <div
                  className="widget-box widget widget-categories wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-category sidebar-shop-category">
                    <h4>Category</h4>
                    <ul className="list-unstyled">
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          Digital Marketing
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          SEO optimization
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          Content Marketing
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          Keywords Research
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          Technical Adult
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  className="shop-filter-price-box wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                  style={{
                    visibility: "visible",
                    animationDuration: "1500ms",
                    animationDelay: "100ms",
                    animationName: "fadeInLeft",
                  }}
                >
                  <div className="shop-filter-price-title">
                    <h4>Filter by Price</h4>
                  </div>
                  <div className="range-slider container">
                    <span className="output outputOne" />
                    <span className="output outputTwo" />
                    <span className="full-range" />
                    <span className="incl-range" />
                    <input
                      name="rangeOne"
                      defaultValue={5}
                      min={0}
                      max={150}
                      step={1}
                      type="range"
                      placeholder="$"
                    />
                    <input
                      name="rangeTwo"
                      defaultValue={89}
                      min={0}
                      max={150}
                      step={1}
                      type="range"
                      placeholder="$"
                    />
                  </div>
                </div>
                <div
                  className="widget-box widget widget-post wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-product">
                    <div className="sidebar-product-title">
                      <h4>Products</h4>
                    </div>
                    <ul className="list-unstyled">
                      <li>
                        <div className="sidebar-product-image">
                          <img
                            src={Productimg1}
                            alt="sidebar-product-image-1"
                          />
                        </div>
                        <div className="sidebar-product-content">
                          <div className="product-rating-star">
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                          </div>
                          <h5>
                            <Link href="/shop-details">Summer M T-Shirt</Link>
                          </h5>
                          <h6>$13.00</h6>
                        </div>
                      </li>
                      <li>
                        <div className="sidebar-product-image">
                          <img
                            src={Productimg2}
                            alt="sidebar-product-image-2"
                          />
                        </div>
                        <div className="sidebar-product-content">
                          <div className="product-rating-star">
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                          </div>
                          <h5>
                            <Link href="/shop-details">Boy Winter Shoe</Link>
                          </h5>
                          <h6>$25.00</h6>
                        </div>
                      </li>
                      <li>
                        <div className="sidebar-product-image">
                          <img
                            src={Productimg3.src}
                            alt="sidebar-post-image-3"
                          />
                        </div>
                        <div className="sidebar-product-content">
                          <div className="product-rating-star">
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                            <i className="fas fa-star" />
                          </div>
                          <h5>
                            <Link href="/shop-details">Men Smart Watch</Link>
                          </h5>
                          <h6>$18.00</h6>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  className="widget-box widget widget-tags wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-tags">
                    <h4>Popular Tags</h4>
                    <div className="sidebar-tags-list">
                      <Link href="#">Shop</Link>
                      <Link href="#">Men</Link>
                      <Link href="#">Women</Link>
                      <Link href="#">Watch</Link>
                      <Link href="#">T-Shirt</Link>
                    </div>
                  </div>
                </div>
                <div
                  className="widget sidebar-banner sidebar-banner-two wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-banner-box-shape-2" />
                  <div className="sidebar-banner-box-shape-3" />
                  <div className="sidebar-banner-box sidebar-banner-box-two">
                    <div className="sidebar-banner-box-title">
                      <h5>Boost your Digital Product marketing?</h5>
                    </div>
                    <div className="sidebar-banner-box-btn">
                      <Link href="#" className="thm-btn main-btn">
                        Get Started
                        <i className="icon-right-arrow" />
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-9 col-md-12 col-sm-12">
              <div className="shop-right">
                <div
                  className="shop-title-box wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <h4>Showing 1–12 of 36 results</h4>
                  <div id="pet-select">
                    <select name="pets">
                      <option value="">Default sorting</option>
                      <option value="fra">popularity</option>
                      <option value="ger">average rating</option>
                      <option value="ita">price: low to high</option>
                      <option value="ita">price: high to low</option>
                      <option value="ita">latest</option>
                    </select>
                  </div>
                </div>
                <div className="row">
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop1.src} alt="product-1" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Summer M T-Shirt</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "300ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop2.src} alt="product-2" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Summer M T-Shirt</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "500ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop3.src} alt="product-3" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Summer M T-Shirt</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "100ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop4.src} alt="product-4" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Women Leather Bag</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "300ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop5.src} alt="product-5" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Women Leather Bag</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "500ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop6.src} alt="product-6" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Women Leather Bag</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "100ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop7.src} alt="product-7" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Men Leather Shoe</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "300ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop8.src} alt="product-8" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Men Leather Shoe</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "500ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop9.src} alt="product-9" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Men Leather Shoe</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "100ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop10.src} alt="product-10" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Modern smart watch</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "300ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop11.src} alt="product-11" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Modern smart watch</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                  <div
                    className="col-lg-4 col-md-6 col-sm-6 col-12 wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                    style={{
                      visibility: "visible",
                      animationDuration: "1500ms",
                      animationDelay: "500ms",
                      animationName: "fadeInRight",
                    }}
                  >
                    <div className="product-box">
                      <div className="product-img">
                        <img src={Shop12.src} alt="product-12" />
                        <div className="product-inner-box">
                          <div className="product-add-btn">
                            <Link href="/checkout" className="thm-btn main-btn">
                              Add to Cart
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div className="product-rating-star">
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                        <i className="fas fa-star" />
                      </div>
                      <div className="product-title">
                        <h5>
                          <Link href="/shop-details">Modern smart watch</Link>
                        </h5>
                      </div>
                      <div className="product-price">
                        <h6>$13.00</h6>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  className="page-numbers wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <ul>
                    <li className="page-numbers-prev">
                      <Link href="#">
                        {" "}
                        <i className="icon icon-arrow-2" />
                      </Link>
                    </li>
                    <li className="page-numbers-list">
                      <Link href="#">
                        <span>1</span>
                      </Link>
                    </li>
                    <li className="page-numbers-list">
                      <Link href="#">
                        <span>2</span>
                      </Link>
                    </li>
                    <li className="page-numbers-list">
                      <Link href="#">
                        <span>3</span>
                      </Link>
                    </li>
                    <li className="page-numbers-list">
                      <Link href="#">
                        <span>4</span>
                      </Link>
                    </li>
                    <li className="page-numbers-next">
                      <Link href="#">
                        {" "}
                        <i className="icon icon-arrow-2" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default ShopPage;
