import React, { Fragment } from "react";
import DetailGallery from "./DetailGallery";
import DetailInfo from "./DetailInfo";
import { Breadcrumb } from "react-bootstrap";
import GuestReviews from "./GuestReviews";
import SimilarExperiences from "./SimilarExperiences";
import Faqs from "./Faqs";
import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform";

const Detail = () => {
  return (
    <Fragment>
      <main>
        <section className="main-mt">
          <div className="container mt-5">
            <div className="row hide-on-mobile">
              <div className="col-12">
                <div className="breadcrumb-container">
                  <Breadcrumb>
                    <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                    <Breadcrumb.Item href="#">New York</Breadcrumb.Item>
                    <Breadcrumb.Item href="#">Adventure</Breadcrumb.Item>
                    <Breadcrumb.Item active>Mountain Climbing</Breadcrumb.Item>
                  </Breadcrumb>
                </div>
              </div>
            </div>
            <div className="row mb-5">
              <div className="col-xl-5">
                <DetailGallery></DetailGallery>
              </div>
              <div className="col-xl-7 listing-wrapper">
                <DetailInfo></DetailInfo>
              </div>
            </div>
          </div>
        </section>
        <GuestReviews />
        <SimilarExperiences />
        <Faqs />
        <SignUpToExperienceOurPlatform />
      </main>
    </Fragment>
  );
};

export default Detail;