text: import React from "react"
  import styled from "styled-components"
  import Facts1Img from "../Assets/images/facts-1.jpg"
  import Facts2Img from "../Assets/images/facts-2.jpg"
  import Facts3Img from "../Assets/images/facts-3.jpg"
  import Facts4Img from "../Assets/images/facts-9.jpg"
  import Facts5Img from "../Assets/images/facts-5.jpg"
  import Facts6Img from "../Assets/images/facts-6.jpg"
  import Facts7Img from "../Assets/images/facts-7.jpg"
  import Facts8Img from "../Assets/images/facts-8.jpg"
  
  const FactsAndQuestions = () => {
    return (
      <FactsAndQuestionsContainer>
        <Description id="facts">F & Q's</Description>
        <ContentWrapper>
          <ColumnOne>
            <ContentInput id="what-is-it">
              <h3>What is the North Coast 500 Route?</h3>
              <Facts1 />
              <CountyInfo>
                <ColumnTwo>
                  <p>
                    The North Coast 500 (NC500) was created in 2014 by the North
                    Highland Initiative, which is a non-profit organization that
                    was established by Prince Charles in 2005 in an effort to
                    develop economic growth across the North Highlands. The NC500
                    is not an actual single road or highway like Route 66 or the
                    Pacific Coast Highway, but is a series of existing roads that
                    form a loop around the Northern Highlands.
                    <br />
                    <br />
                    The route is just over 500 miles and mainly hugs the northern
                    coast of Scotland, hence the name. It was designed to showcase
                    the natural beauty and local businesses in this part of
                    Scotland which has previously received a relatively low level
                    of tourism. It has become a major tourism success in Scotland
                    with tens of thousands of people having already driven the
                    route.
                    <br />
                    <br />
                    The North Coast 500 route runs 516 miles to and from
                    Inverness, forming a loop around the northern Highlands. So if
                    you drive the full route, you’ll end up where you started
                    which can be very convenient if you are flying in and out of
                    Inverness or renting a car. However you can of course start
                    and end your drive wherever you please. The route runs through
                    a number of loosely defined areas or historical counties in
                    northern Scotland including Inverness-shire, the Black Isle,
                    Wester Ross, Easter Ross, Sutherland, and Caithness.
                  </p>
                </ColumnTwo>
              </CountyInfo>
            </ContentInput>
            <ContentInput id="sights">
              <h3>What Will I See?</h3>
              <Facts2 />
              <CountyInfo>
                <ColumnTwo>
                  <p>
                    The North Coast 500 route follows the main roads across the
                    coastal edges of the North Highlands. The largest city (by
                    far) is Inverness with a population of close to 50,000 people
                    and the next biggest places are towns and villages like
                    Ullapool, Durness, Dornoch, Wick, Thurso, and Lochinver which
                    each have a population of under 2,000 people! So expect to
                    spend time in lots of small villages and rural areas.
                    <br />
                    <br />
                    The highlights of the route for many people are the scenic
                    views along the coast and the feeling of “being away” from it
                    all for a while. Scenery includes rugged coastline, beaches,
                    rural farmland, marshland, rivers, forest, lochs, and munros
                    (Scottish mountains over 3,000 ft high). You’ll also have the
                    opportunity to see local wildlife such as deer, squirrels,
                    pine martens, birds of prey, seabirds, and sea mammals such as
                    dolphins, whales and seals.
                    <br />
                    <br />
                    Of course there are also loads of sheep and the iconic
                    Highland coos which you’ll spot in the fields. In addition to
                    nature and wildlife, there are loads of things to see and do
                    along the route which include hiking, golfing, castles,
                    heritage sites, prehistoric sites, a geological park, museums,
                    beaches, whisky distilleries, and much more.
                    <br />
                    <br />
                    You can also sample the local food of the Scottish Highlands
                    and stay in unique lodging from simple B&B’s and inns to grand
                    family country homes to luxurious castles.
                  </p>
                </ColumnTwo>
              </CountyInfo>
            </ContentInput>
            <ContentInput id="weather">
              <h3>When is the Best Time of Year?</h3>
              <Facts3 />
              <CountyInfo>
                <ColumnTwo>
                  <p>
                    The best time to drive the North Coast 500 for most people is
                    between May and October as during this period you’ll find most
                    attractions and restaurants open, the greatest variety of
                    lodging, and the best chances for warmer weather. However,
                    this also corresponds with the busiest time along the North
                    Coast 500 which is from early May to late September.
                    <br />
                    <br />
                    If you are looking to drive the route during a quieter time of
                    year, I’d consider April, early May, late September, or
                    October, avoiding holidays, festivals, special events, and
                    school breaks.
                    <br />
                    <br />
                    Winter can be a nice time for photography and solitude,
                    although the weather can be bad and certain minor roads (e.g.
                    the Bealach Na Ba) may be closed due to bad weather. If you
                    plan to drive the NC500 out of season (e.g., October to March)
                    just note that many businesses (including hotels, restaurants,
                    tourist information offices, and attractions) in the Scottish
                    Highlands are seasonal or have reduced winter hours.
                    <br />
                    <br />
                    Obviously, the best time to drive the North Coast 500 is the
                    time you have available, and if you need to set out at a less
                    than opportune time of the year, just be prepared and be
                    flexible.
                    <br />
                    <br />
                    If you are trying to plan your trip around Scottish weather,
                    weather conditions are fickle in Scotland and we experience
                    rain, clouds, and chilly weather year round (that is what
                    keeps Scotland green!). However, we also get these bursts of
                    sunshine and warm weather than can occur any time of the year
                    with probably May and September being two of the better months
                    in our experience thus far.
                  </p>
                </ColumnTwo>
              </CountyInfo>
            </ContentInput>
            <ContentInput id="time">
              <h3>How Many Days Does it Take?</h3>
              <Facts4 />
              <CountyInfo>
                <ColumnTwo>
                  <p>
                    This really depends on how much you want to see, how much you
                    want to drive each day, and how many detours you plan to make.
                    You could speed along the entire 500 miles in less than 24
                    hours if you don’t mind not sleeping or seeing anything along
                    the way!
                    <br />
                    <br />
                    But the North Coast 500 is designed for touring, sightseeing,
                    and taking things slowly. The minimum number of days we’d
                    recommend to drive the North Coast 500 is 5 days, but 7 to 10
                    days would be ideal. If you plan to speed around, you could do
                    it with 3 full days and night, but we’d recommend more time.
                    <br />
                    <br />
                    If you really want to explore the route slowly, relax, and
                    maybe take some detours (e.g., visits to Loch Ness, Orkney
                    Islands, Summer Isles, Isle of Skye), I’d recommend 2 weeks.
                    For those with more time, you could easily fill up a few weeks
                    and not run out of things to do, especially if you love
                    hiking, nature, and historical sites.
                  </p>
                </ColumnTwo>
              </CountyInfo>
            </ContentInput>
            <ContentInput id="planning">
              <h3>How Much Should I Plan Ahead?</h3>
              <Facts5 />
              <CountyInfo>
                <ColumnTwo>
                  <p>
                    This really depends on your style of travel, some people plan
                    little in advance and others plan in great detail what they
                    are going to see each day. I’d recommend that you at least
                    make a loose itinerary of places you definitely want to stop
                    before you leave so you have an idea of how much time you want
                    to spend in each area so you can plan your accommodation.
                    <br />
                    <br />
                    Have at least a tentative itinerary can also help you identify
                    and fit in places you really want to see that have limited
                    opening times (e.g., a museum or attraction only open 3 days a
                    week or a restaurant only open on weekends for dinner).
                    <br />
                    <br />
                    In terms of making reservations, very few attractions take
                    reservations or pre-sell tickets, but I’d strongly recommend
                    booking your lodging in advance and also any special dinners.
                    You’ll also want to book most activities such as guided hikes,
                    kayaking, boat rides, fishing trips, wildlife tours, surfing
                    lessons, etc. in advance as many require prior reservations.
                    <br />
                    <br />
                    For the North Coast 500, we would recommend that you start
                    researching lodging options as soon as you know your dates. I
                    would book at least 3 months in advance if possible. Staff at
                    several of the busiest properties recommended to us that
                    travelers should try to book 6 months in advance to guarantee
                    a room as they had some dates fully booked 6 to 9 months in
                    advance.
                    <br />
                    <br />
                    If you are someone who hates planning ahead and wants to be
                    able to stop and spend as much time in a place as you wish,
                    I’d consider doing a camping or campervan trip along the
                    NC500. That way you won’t need to search for last-minute
                    lodging each night which can be difficult on sections of the
                    route. This way all you need to worry about in advance is your
                    transportation and camping gear and you will have the
                    flexibility of either traditional lodging or camping each
                    night.
                  </p>
                </ColumnTwo>
              </CountyInfo>
            </ContentInput>
            <ContentInput id="dining">
              <h3>Dining along the NC500?</h3>
              <Facts6 />
              <CountyInfo>
                <ColumnTwo>
                  <p>
                    In terms of food, I’d expect fresh, rustic, and homestyle
                    meals that rely on the local produce at most eateries along
                    the NC500. However, whereas there are fewer options than you’d
                    have in a large city like Edinburgh or Glasgow, there is still
                    a wide variety of food stops that range from budget-friendly
                    cafes serving simple salads and sandwiches to Michelin-starred
                    restaurants serving four-course menus.
                    <br />
                    <br />
                    Lunch and coffee stops are generally easy to find along the
                    route, but dinner options can be more limited (often at hotel
                    restaurants) and some may require 24 to 48 hour pre-booking.
                    Note that some cafes and restaurants, especially in the
                    smaller towns and villages, are seasonal so be sure to check
                    opening dates and hours in advance, especially if traveling
                    outside of the main season (May to September).
                    <br />
                    <br />
                    Most towns have a small grocery store (not usually open late
                    in the evenings so stop during the day) where you can pick up
                    picnic supplies, snacks, and food to cook your own meals.
                    There are also a couple of specialty food spots along the
                    route such as Robertsons The Larder farm shop.
                    <br />
                    <br />
                    It is wise to think ahead each day about where you’ll be for
                    meals as some hotels or campsites may be a 30 minute to 1 hour
                    drive from a restaurant. It is also a good idea to also have
                    some snacks and maybe a couple cups of pot noodles in your car
                    just in case you arrive later than expected and there is no
                    place to eat for dinner.
                    <br />
                    <br />
                    Some places we’d recommend checking out for sit down lunches
                    or dinners include the Chez Roux restaurant at the Rocpool
                    Reserve Hotel in Inverness, Mustard Seed in Inverness, Boath
                    House hotel restaurant near Nairn (Michelin-starred), Dornoch
                    Castle Hotel restaurant in Dornoch, Y-Not Bar and Grill in
                    Thurso, Kylesku Hotel restaurant (known for its fresh local
                    seafood), The Ceilidh Place in Ullapool, The Arch Inn in
                    Ullapool, and The Torridon hotel restaurant in Annat.
                  </p>
                </ColumnTwo>
              </CountyInfo>
            </ContentInput>
            <ContentInput id="start">
              <h3>Where Does the Route Start and End?</h3>
              <Facts7 />
              <CountyInfo>
                <ColumnTwo>
                  <p>
                    The NC500 route officially begins and ends in the city of
                    Inverness at Inverness Castle, forming a loop. However, you
                    can begin and end the route anywhere you choose although
                    Inverness, as the largest city along the route, is a
                    convenient place to start and stop. <br />
                    <br />
                    <br />
                    Since the NC500 is not a single road or highway like Route 66
                    or the Pacific Coast Highway, you won’t find it on a regular
                    map and your GPS probably won’t know the route. So just to be
                    clear, there is no actual road named North Coast 500 but it is
                    a designated tourist route. <br />
                    <br />
                    <br />
                    Before your trip, you can take a look at the official North
                    Coast 500 map online to get a good idea of the route to help
                    you plan. <br />
                  </p>
                </ColumnTwo>
              </CountyInfo>
            </ContentInput>
            <ContentInput id="safety">
              <h3>Driving Safety Tips ?</h3>
              <Facts8 />
              <CountyInfo>
                <ColumnTwo>
                  <p>
                    If you have never driven in Scotland before, you’ll want to
                    review some of the driving laws and road safety tips before
                    your North Coast 500 road trip. This is particularly true if
                    you are planning to drive a rental car, caravan, or motorhome.{" "}
                    <br />
                    <br />
                    Some things that may be new for you are driving on
                    single-track roads, and driving in areas where livestock is
                    unfenced. Increased tourism in the Highlands has led to more
                    traffic accidents and complaints. <br />
                    <br />
                    The infrastructure of the Highlands in some areas is not fully
                    ready to handle mass tourism, but most traffic incidents can
                    be avoided by following the driving laws, knowing how to
                    safely drive your vehicle, and being prepared. <br />
                  </p>
                </ColumnTwo>
              </CountyInfo>
            </ContentInput>
          </ColumnOne>
          {/* </ColumnTwo> */}
        </ContentWrapper>
      </FactsAndQuestionsContainer>
    )
  }
  
  export default FactsAndQuestions
  
  const FactsAndQuestionsContainer = styled.div`
    width: 100%;
    background: #fcfcfc;
    color: #000;
    padding: 5rem calc((100vw - 1300px) / 2);
    height: 100%;
  `
  
  const Description = styled.p`
    font-size: clamp(1.2rem, 5vw, 3rem);
    text-align: center;
    margin: 0 auto;
    margin-bottom: 2rem;
    font-weight: bold;
    background: #f26a2e;
    color: white;
    display: flex;
    justify-content: center;
    width: max-content;
    padding: 1rem;
    border-radius: 14px;
  `
  
  const ContentWrapper = styled.div`
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 2rem;
  
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  `
  
  const ColumnOne = styled.div`
    display: grid;
    grid-template-rows: 1fr;
  `
  
  const ContentInput = styled.div`
    padding-top: 2rem;
    width: auto;
    height: max-content;
  
    h3 {
      margin-bottom: 0.5rem;
      background: #f26a2e;
      color: white;
      width: max-content;
      padding: 1rem;
      border-radius: 14px;
      font-size: clamp(1.2rem, 5vw, 3rem);
      text-align: center;
      font-weight: bold;
      display: flex;
      justify-content: center;
  
      @media screen and (max-width: 1300px) {
        font-size: clamp(0.5rem, 2.5vw, 1.5rem);
      }
    }
    p {
      color: #3b3b3b;
    }
  
    @media screen and (max-width: 700px) {
      padding: 2rem;
    }
  `
  const CountyInfo = styled.div`
    display: grid;
  
    grid-template-columns: 1fr;
  `
  const ColumnTwo = styled.div`
    display: grid;
    grid-template-rows: 1fr;
  
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 2rem;
    grid-gap: 10px;
  
    @media screen and (max-width: 500px) {
      grid-template-columns: 1fr;
    }
  
    p {
      padding: 1rem;
    }
  `
  
  const Facts1 = styled.div`
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      url(${Facts1Img}) no-repeat center;
    background-size: cover;
    height: 450px;
    width: 100%;
    padding: 5rem calc((100vw - 1300px) / 2);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    @media screen and (max-width: 1000px) {
      width: 90%;
    }
    ${"" /* border: 4px solid #f26a2e; */}
  `
  const Facts2 = styled.div`
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      url(${Facts2Img}) no-repeat center;
    background-size: cover;
    height: 450px;
    width: 100%;
    padding: 5rem calc((100vw - 1300px) / 2);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    @media screen and (max-width: 1000px) {
      width: 90%;
    }
  `
  const Facts3 = styled.div`
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      url(${Facts3Img}) no-repeat center;
    background-size: cover;
    height: 450px;
    width: 100%;
    padding: 5rem calc((100vw - 1300px) / 2);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    @media screen and (max-width: 1000px) {
      width: 90%;
    }
  `
  const Facts4 = styled.div`
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      url(${Facts4Img}) no-repeat center;
    background-size: cover;
    height: 450px;
    width: 100%;
    padding: 5rem calc((100vw - 1300px) / 2);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    @media screen and (max-width: 1000px) {
      width: 90%;
    }
  `
  const Facts5 = styled.div`
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      url(${Facts5Img}) no-repeat center;
    background-size: cover;
    height: 450px;
    width: 100%;
    padding: 5rem calc((100vw - 1300px) / 2);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    @media screen and (max-width: 1000px) {
      width: 90%;
    }
  `
  const Facts6 = styled.div`
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      url(${Facts6Img}) no-repeat center;
    background-size: cover;
    height: 450px;
    width: 100%;
    padding: 5rem calc((100vw - 1300px) / 2);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    @media screen and (max-width: 1000px) {
      width: 90%;
    }
  `
  const Facts7 = styled.div`
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      url(${Facts7Img}) no-repeat center;
    background-size: cover;
    height: 450px;
    width: 100%;
    padding: 5rem calc((100vw - 1300px) / 2);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    @media screen and (max-width: 1000px) {
      width: 90%;
    }
  `
  const Facts8 = styled.div`
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      url(${Facts8Img}) no-repeat center;
    background-size: cover;
    height: 450px;
    width: 100%;
    padding: 5rem calc((100vw - 1300px) / 2);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    @media screen and (max-width: 1000px) {
      width: 90%;
    }
  `
  