"use client";
import Link from "next/link";
import BlogsingleImg1 from "../../../public/assets/images/blog/blog-single-img-1.jpg";
import BlogAutherImg1 from "../../../public/assets/images/blog/author-img.jpg";
import BlogBlackNewsImg1 from "../../../public/assets/images/blog/back-news-img-1.jpg";
import BlogBlackNewsImg2 from "../../../public/assets/images/blog/back-news-img-2.jpg";
import BlogCommentImg1 from "../../../public/assets/images/blog/comment-1-1.jpg";
import BlogCommentImg2 from "../../../public/assets/images/blog/comment-1-2.jpg";
import sliderPostImg1 from "../../../public/assets/images/blog/sidebar-post-image-1.png";
import sliderPostImg2 from "../../../public/assets/images/blog/sidebar-post-image-2.png";
import sliderPostImg3 from "../../../public/assets/images/blog/sidebar-post-image-3.png";

function BlogDetailPage() {
  return (
    <div>
      <section className="blog-detail-page">
        <div className="container">
          <div className="row">
            <div className="col-lg-8 col-md-12 col-sm-12">
              <div className="blog-detail-page-left">
                <div className="blog-detail-single">
                  <div
                    className="blog-detail-img-box wow fadeInLeft animated animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <img src={BlogsingleImg1.src} alt="blog-single-img-1" />
                  </div>
                  <div className="blog-detail-content">
                    <div
                      className="blog-detail-title wow fadeInLeft animated animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      <h3>Elegant Design Runway to Real Life</h3>
                    </div>
                    <div
                      className="blog-detail-text wow fadeInLeft animated animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="400ms"
                    >
                      <p>
                        Sed ut perspiciatis unde omnis iste natus error sit
                        voluptatem accusantium doloremque laudantium, totam rem
                        aperiam, eaque ipsa quae ab illo inventore veritatis et
                        quasi architecto beatae vitae dicta sunt explicabo. Nemo
                        enim ipsam voluptatem quia voluptas sit aspernatur aut
                        odit aut fugit, sed quia consequuntur magni dolores eos
                        qui ratione voluptatem sequi nesciunt. Neque porro
                        quisquam est, qui dolorem ipsum quia dolor sit amet
                        consectetur, adipisci velit, sed quia non numquam eius
                        modi tempora incidunt ut labore et dolore magnam aliquam
                        quaerat voluptatem. Ut enim ad minima veniam, quis
                        nostrum exercitationem ullam corporis suscipit
                        laboriosam, nisi ut aliquid ex ea commodi consequatur?
                        Quis autem vel eum iure reprehenderit qui in ea
                        voluptate velit esse quam nihil molestiae consequatur,
                        vel illum qui dolorem eum fugiat quo voluptas nulla
                        pariatur
                      </p>
                    </div>
                    <div
                      className="blog-quote-three-box wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="200ms"
                    >
                      <div className="blog-quote-three-icon">
                        <i className="icon-right-quotation-sign-1" />
                      </div>
                      <div className="blog-quote-three-title">
                        <h3>
                          Handling Mounting And Unmounting Of Given Navigation
                          Routes In React Native
                        </h3>
                        <p>Johnny M. Martin</p>
                      </div>
                    </div>
                    <div
                      className="blog-detail-title wow fadeInLeft animated animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="200ms"
                    >
                      <h3>Elegant Design Runway to Real Life</h3>
                    </div>
                    <div
                      className="blog-detail-text wow fadeInLeft animated animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="400ms"
                    >
                      <p>
                        Neque porro quisquam est, qui dolorem ipsum quia dolor
                        sit amet, consectetur, adipisci velit, sed quia non
                        numquam eius modi tempora incidunt ut labore et dolore
                        magnam aliquam quaerat voluptatem. Ut enim ad minima
                        veniam, quis nostrum exercitationem ullam
                      </p>
                    </div>
                    <div
                      className="blog-details-tags-and-social wow fadeInLeft animated animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="200ms"
                    >
                      <div className="blog-details-tags-box">
                        <h4>Tags</h4>
                        <div className="blog-details-tags-list">
                          <Link href="#">SEO</Link>
                          <Link href="#">Marketing</Link>
                          <Link href="#">Research</Link>
                        </div>
                      </div>
                      <div className="blog-details-social-box">
                        <h4>Share</h4>
                        <ul className="blog-details-social">
                          <li>
                            <Link href="#">
                              <i className="icon icon-facebook-f" />
                            </Link>
                          </li>
                          <li>
                            <Link href="#">
                              <i className="icon icon-twitter" />
                            </Link>
                          </li>
                          <li>
                            <Link href="#">
                              <i className="icon icon-linkedin-in" />
                            </Link>
                          </li>
                          <li>
                            <Link href="#">
                              <i className="icon icon-instagram" />
                            </Link>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div
                      className="author wow fadeInLeft animated animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="200ms"
                    >
                      <div className="author-img">
                        <img src={BlogAutherImg1.src} alt="author-img" />
                      </div>
                      <div className="author-content">
                        <h4>Richard M. Fudge</h4>
                        <p>
                          We denounce with righteous indignation and dislike men
                          ways to beguiled demoralized by the charms of pleasure
                        </p>
                        <div className="author-social">
                          <Link href="#">
                            <i className="fab fa-facebook-f" />
                          </Link>
                          <Link href="#">
                            <i className="fab fa-twitter" />
                          </Link>
                          <Link href="#">
                            <i className="fab fa-linkedin-in" />
                          </Link>
                          <Link href="#">
                            <i className="fab fa-instagram" />
                          </Link>
                        </div>
                      </div>
                    </div>
                    <div
                      className="back-news wow fadeInLeft animated animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="200ms"
                    >
                      <div className="back-news-single">
                        <div className="back-news-img">
                          <img
                            src={BlogBlackNewsImg1.src}
                            alt="back-news-img-1"
                          />
                        </div>
                        <div className="back-news-content">
                          <p>September 20, 2023</p>
                          <h6>
                            <Link href="#">
                              Achieving Fashion Elegant Runway to Real Life
                            </Link>
                          </h6>
                        </div>
                      </div>
                      <div className="back-news-single">
                        <div className="back-news-img">
                          <img
                            src={BlogBlackNewsImg2.src}
                            alt="back-news-img-2"
                          />
                        </div>
                        <div className="back-news-content">
                          <p>September 20, 2023</p>
                          <h6>
                            <Link href="#">
                              Achieving Fashion Elegant Runway to Real Life
                            </Link>
                          </h6>
                        </div>
                      </div>
                    </div>
                    <div
                      className="comment wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="200ms"
                    >
                      <h3 className="comment-title">Comments</h3>
                      <div className="comment-single">
                        <div className="comment-image">
                          <img src={BlogCommentImg1.src} alt="comment-1-1" />
                        </div>
                        <div className="comment-content">
                          <div className="comment-title-inner">
                            <h6>William L. Jackson</h6>
                            <span className="blog-comment-date">
                              Sep 25, 2023
                            </span>
                          </div>
                          <p className="comment-text">
                            Quis autem vel eum iure reprehenderit qui in ea
                            voluptate velit esse molestiae consequatur qui
                            dolorem eum fugiat voluptas
                          </p>
                          <div className="comment-reply-btn">
                            <Link
                              href="/blog-details"
                              className="post-reply-inner"
                            >
                              Reply
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                      <div
                        className="comment-single comment-single-two wow fadeInLeft animated"
                        data-wow-duration="1500ms"
                        data-wow-delay="200ms"
                      >
                        <div className="comment-image">
                          <img src={BlogCommentImg2.src} alt="comment-1-2" />
                        </div>
                        <div className="comment-content">
                          <div className="comment-title-inner">
                            <h6>James M. Stovall</h6>
                            <span className="blog-comment-date">
                              Sep 25, 2023
                            </span>
                          </div>
                          <p className="comment-text">
                            Quis autem vel eum iure reprehenderit qui in ea
                            voluptate velit esse molestiae consequatur qui
                            dolorem eum fugiat voluptas
                          </p>
                          <div className="comment-reply-btn">
                            <Link
                              href="/blog-details"
                              className="post-reply-inner"
                            >
                              Reply
                              <i className="icon-right-arrow" />
                            </Link>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="comment-reply wow fadeInLeft animated animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="200ms"
                    >
                      <div className="comment-form comment-respond mt--0">
                        <h3 className="title mb--30">Leave a Reply</h3>
                        <form action="#">
                          <div className="row">
                            <div className="col-lg-6 col-12">
                              <div className="form-group">
                                <input
                                  id="name"
                                  type="text"
                                  placeholder="Full Name"
                                  required=""
                                />
                              </div>
                            </div>
                            <div className="col-lg-6 col-12">
                              <div className="form-group">
                                <input
                                  type="text"
                                  name="text"
                                  placeholder="Phone"
                                  required=""
                                />
                              </div>
                            </div>
                            <div className="col-12">
                              <div className="form-group">
                                <input
                                  type="email"
                                  name="email"
                                  placeholder="Email Address"
                                  required=""
                                />
                              </div>
                            </div>
                            <div className="col-12">
                              <div className="form-group">
                                <textarea
                                  name="message"
                                  placeholder="Comments"
                                  required=""
                                  defaultValue={""}
                                />
                              </div>
                            </div>
                            <div className="col-lg-12">
                              <div className="form-submit">
                                <button
                                  type="submit"
                                  id="submit"
                                  className="main-btn thm-btn"
                                >
                                  Send Comments
                                  <i className="icon-right-arrow" />
                                </button>
                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-md-12 col-sm-12">
              <div className="sidebar blog-sidebar widget-area">
                <div
                  className="widget-box widget widget-search wow fadeInRight animated animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-search">
                    <h4>Search</h4>
                    <div className="blog-search">
                      <input type="search" placeholder="Keywords" />
                      <i className="icon-search" />
                    </div>
                  </div>
                </div>
                <div
                  className="widget-box widget widget-categories wow fadeInRight animated animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <div className="sidebar-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="widget-box widget widget-post wow fadeInRight animated animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                >
                  <div className="sidebar-post">
                    <h4>Recant News</h4>
                    <ul className="list-unstyled">
                      <li>
                        <div className="sidebar-post-image">
                          <img
                            src={sliderPostImg1.src}
                            alt="sidebar-post-image-1"
                          />
                        </div>
                        <div className="sidebar-post-content">
                          <span>September 20, 2023</span>
                          <h6>
                            <Link href="/blog-details">
                              Achieving Fashion Elegant se Runway to Real Life
                            </Link>
                          </h6>
                        </div>
                      </li>
                      <li>
                        <div className="sidebar-post-image">
                          <img
                            src={sliderPostImg2.src}
                            alt="sidebar-post-image-2"
                          />
                        </div>
                        <div className="sidebar-post-content">
                          <span>September 20, 2023</span>
                          <h6>
                            <Link href="/blog-details">
                              Achieving Fashion Elegant se Runway to Real Life
                            </Link>
                          </h6>
                        </div>
                      </li>
                      <li>
                        <div className="sidebar-post-image">
                          <img
                            src={sliderPostImg3.src}
                            alt="sidebar-post-image-3"
                          />
                        </div>
                        <div className="sidebar-post-content">
                          <span>September 20, 2023</span>
                          <h6>
                            <Link href="/blog-details">
                              Achieving Fashion Elegant se Runway to Real Life
                            </Link>
                          </h6>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  className="widget-box widget widget-tags wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="200ms"
                >
                  <div className="sidebar-tags">
                    <h4>Tags</h4>
                    <div className="sidebar-tags-list">
                      <Link href="#">SEO Camping</Link>
                      <Link href="#">Marketing</Link>
                      <Link href="#">SMM</Link>
                      <Link href="#">SMM</Link>
                      <Link href="#">Content</Link>
                      <Link href="#">Social Media</Link>
                    </div>
                  </div>
                </div>
                <div
                  className="widget sidebar-banner wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="200ms"
                >
                  <div className="sidebar-banner-box-shape-1" />
                  <div className="sidebar-banner-box-shape-2" />
                  <div className="sidebar-banner-box-shape-3" />
                  <div className="sidebar-banner-box">
                    <div className="sidebar-banner-box-title">
                      <h5>Boost your Digital Product marketing?</h5>
                    </div>
                    <div className="sidebar-banner-box-btn">
                      <Link href="/projects" className="thm-btn main-btn">
                        Get Started
                        <i className="icon-right-arrow" />
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default BlogDetailPage;
