import React from 'react';
import { Navbar, PickerItem } from '../../../../src';
import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
import Icon from '../../../shared/components/icon';
import ContactForm from '../../components/contact';
import Slider from '../../components/slider';
import { QSMConfiguration, TypeaheadOption } from '../../../qsm/types';
import QSM from '../../../qsm';
import { PortalQsmType, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';

interface ContentPageSelfContainedProps {
  path: string;
}

const originAirports: TypeaheadOption[] = [
  { key: 'AMS', value: 'Amsterdam', type: 'airport', iataCode: 'AMS', country: 'Netherlands' },
  { key: 'BRU', value: 'Brussels', type: 'airport', iataCode: 'BRU', country: 'Belgium' },
  { key: 'CDG', value: 'Paris Charles de Gaulle', type: 'airport', iataCode: 'CDG', country: 'France' },
  { key: 'FRA', value: 'Frankfurt', type: 'airport', iataCode: 'FRA', country: 'Germany' },
  { key: 'LHR', value: 'London Heathrow', type: 'airport', iataCode: 'LHR', country: 'United Kingdom' },
  { key: 'MAD', value: 'Madrid', type: 'airport', iataCode: 'MAD', country: 'Spain' }
];

const destinationAirports: TypeaheadOption[] = [
  { key: 'LAX', value: 'Los Angeles', type: 'airport', iataCode: 'LAX', country: 'United States' },
  { key: 'JFK', value: 'New York JFK', type: 'airport', iataCode: 'JFK', country: 'United States' },
  { key: 'SFO', value: 'San Francisco', type: 'airport', iataCode: 'SFO', country: 'United States' },
  { key: 'DXB', value: 'Dubai', type: 'airport', iataCode: 'DXB', country: 'United Arab Emirates' },
  { key: 'HND', value: 'Tokyo Haneda', type: 'airport', iataCode: 'HND', country: 'Japan' },
  { key: 'SIN', value: 'Singapore Changi', type: 'airport', iataCode: 'SIN', country: 'Singapore' },
  { key: 'TFS', value: 'Tenerife South', type: 'airport', iataCode: 'TFS', country: 'Spain' }
];

const destinations: TypeaheadOption[] = [
  { key: '1024', value: 'Brussels', type: 'location', country: 'Belgium' },
  { key: '1', value: 'Tenerife', type: 'region', country: 'Spain' },
  { key: 'HTFSSOFTROCK', value: 'Soft rock Hotel', type: 'hotel', country: 'Spain' }
];

const nationalities: PickerItem[] = [
  { id: '1', label: 'Nederland' },
  { id: '2', label: 'België' },
  { id: '3', label: 'Duitsland' },
  { id: '4', label: 'Frankrijk' },
  { id: '5', label: 'Verenigd Koninkrijk' },
  { id: '6', label: 'Spanje' }
];

const travelClasses: PickerItem[] = [
  { id: '1', label: 'Economy' },
  { id: '2', label: 'Premium Economy' },
  { id: '4', label: 'Business' },
  { id: '8', label: 'First Class' }
];

const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
  {
    id: 4,
    name: 'Search Group tour',
    icon: '',
    defaultSearchType: 1,
    serviceTypes: [0],
    defaultCatalogueId: 1,
    defaultDuration: undefined,
    fromDateAmount: 0,
    fromDateAmountType: 0,
    toDateAmount: 12,
    toDateAmountType: 1,
    enableManualPackaging: false,
    allowFlights: false,
    allowAccommodations: false,
    allowCarRentals: false,
    allowTransfers: false,
    allowExcursions: false,
    qsmType: 5
  },
  {
    id: 5,
    name: 'Search Hotels',
    icon: '',
    defaultSearchType: 0,
    serviceTypes: [3],
    defaultCatalogueId: 1,
    defaultDuration: undefined,
    fromDateAmount: 1,
    fromDateAmountType: 1,
    toDateAmount: 7,
    toDateAmountType: 0,
    enableManualPackaging: false,
    allowFlights: false,
    allowAccommodations: false,
    allowCarRentals: false,
    allowTransfers: false,
    allowExcursions: false,
    qsmType: 1
  },
  {
    id: 6,
    name: 'Search Flights',
    icon: '',
    defaultSearchType: 3,
    serviceTypes: [7],
    defaultCatalogueId: 1,
    defaultDuration: undefined,
    fromDateAmount: 1,
    fromDateAmountType: 1,
    toDateAmount: 7,
    toDateAmountType: 0,
    enableManualPackaging: false,
    allowFlights: false,
    allowAccommodations: false,
    allowCarRentals: false,
    allowTransfers: false,
    allowExcursions: false,
    qsmType: 3
  },
  {
    id: 7,
    name: 'Transport + hotel',
    icon: '',
    defaultSearchType: 0,
    serviceTypes: [0],
    defaultCatalogueId: 1,
    defaultDuration: undefined,
    fromDateAmount: 1,
    fromDateAmountType: 1,
    toDateAmount: 7,
    toDateAmountType: 0,
    enableManualPackaging: true,
    allowFlights: true,
    allowAccommodations: true,
    allowCarRentals: false,
    allowTransfers: false,
    allowExcursions: false,
    qsmType: 2
  }
];

let configuration: QSMConfiguration = {
  type: PortalQsmType.Accommodation,
  searchConfigurations: searchConfigurations,

  askTravelers: true,
  askNationality: true,
  askTravelClass: true,
  askTravelType: true,
  askRooms: true,

  departureAirport: {
    fieldKey: 'selectedDepartureAirport',
    label: 'Vertrek',
    placeholder: 'Kies vertrekplaats',
    icon: <Icon name="ui-flight" height={16} />,
    options: originAirports,
    autoComplete: true
  },

  destinationAirport: {
    fieldKey: 'selectedDestinationAirport',
    label: 'Bestemming',
    placeholder: 'Kies bestemming',
    icon: <Icon name="ui-flight" height={16} />,
    options: destinationAirports,
    autoComplete: true
  },

  destination: {
    fieldKey: 'selectedDestination',
    label: 'Bestemming of hotel',
    placeholder: 'Bestemming of hotel',
    icon: <Icon name="ui-hotel" height={16} />,
    options: destinations
  },

  travelTypes: [
    {
      id: '1',
      label: 'Familiereis',
      icon: (
        <svg id="heen_of_terug" data-name="heen of terug" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
          <path
            id="connecting_airports_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
            d="M106.978-871.035l-2.245-3.493h-2.994a1.2,1.2,0,0,1-.884-.364,1.2,1.2,0,0,1-.364-.884,1.2,1.2,0,0,1,.364-.884,1.2,1.2,0,0,1,.884-.364H104.4l2.578-3.992h1.5l-1.247,3.992h2.162l1.081-1.5h1.5l-1,2.744,1,2.744h-1.5l-1.081-1.5h-2l1.081,3.493Z"
            transform="translate(114.968 -867.035) rotate(180)"
            fill="#707070"
          />
        </svg>
      )
    },
    {
      id: '2',
      label: 'Groepsreis',
      icon: (
        <svg id="opstijgen" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
          <path
            id="flight_takeoff_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
            d="M71.539-822.592v-1.5H85.51v1.5Zm1.5-3.992L70-831.449l1.934-.52,2.329,1.954,2.765-.749-4.221-5.572L75.219-837l6.009,5.094,3.389-.915a1.437,1.437,0,0,1,1.144.146,1.469,1.469,0,0,1,.707.915,1.41,1.41,0,0,1-.146,1.133,1.477,1.477,0,0,1-.915.7Z"
            transform="translate(-69 839)"
            fill="#707070"
          />
        </svg>
      )
    },

    { id: '3', label: 'Individuele reis' }
  ],
  travelTypeIcon: '',

  travelClasses: travelClasses,
  travelClassIcon: '',

  nationalities: nationalities,

  dateFlexibility: [
    {
      name: '1 dag voor en na',
      before: 1,
      after: 1
    },
    {
      name: '3 dagen voor en na',
      before: 3,
      after: 3
    }
  ],
  minDate: new Date(2025, 6, 10),
  maxDate: new Date(2026, 6, 25),
  showReturnDate: true,
  datesIcon: <Icon name="ui-calendar" height={16} />,

  defaultTravelers: 3,
  maxTravelers: 9,
  maxChildAge: 12,
  maxInfantAge: 2,

  onSubmit: () => {},
  submitIcon: '',

  languageCode: 'en-GB'
};

const ContentPageSelfContained: React.FC<ContentPageSelfContainedProps> = ({ path }) => {
  return (
    <div id="tide-content">
      {/* <nav className='nav'> */}
      <Navbar
        logo={<TideLogo />}
        topLinks={topLinks}
        items={navItems}
        language={language}
        languages={languages}
        onLanguageChange={(lang) => console.log('Language changed:', lang)}
        onSearch={(query) => console.log('Search:', query)}
      />
      {/* </nav> */}

      <div className="header">
        {/* <img src="https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_1280.jpg" alt="boat in sunset" 
          className='header__image'
          /> */}

        <video className="header__video" autoPlay loop muted playsInline>
          <source
            data-src="https://cdn.pixabay.com/video/2023/03/04/153167-817186036_large.mp4"
            type="video/mp4"
            src="https://cdn.pixabay.com/video/2023/03/04/153167-817186036_large.mp4"
            data-wf-ignore="true"
          />
        </video>
        <div className="header__container">
          <div className="header__content">
            <h1 className="header__title">Explore the world with us</h1>
            <p className="header__description">
              Discover breathtaking destinations, unique experiences, and unforgettable adventures. Your journey starts here.
            </p>
            {/* <button className='cta header__btn'>Get started</button> */}
          </div>
        </div>
      </div>
      <div className="content__qsm">
        <QSM configuration={configuration} />
      </div>

      <div className="content">
        <div className="content__container">
          <div className="content__title__row">
            <h2 className="content__title">Activities</h2>
          </div>
          <div className="content__colums content__colums--3">
            <div className="text-in-image">
              <img
                src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                alt="eiland"
                className="text-in-image__image"
              />
              <div className="text-in-image__content">
                <h3 className="text-in-image__title">Ontdek het zonnige Santorini</h3>
                <p className="text-in-image__description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum.
                  Vestibulum vel sodales massa.
                </p>
                <button className="cta text-in-image__btn">Watch now</button>
              </div>
            </div>
            <div className="text-in-image">
              <img
                src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                alt="eiland"
                className="text-in-image__image"
              />
              <div className="text-in-image__content">
                <h3 className="text-in-image__title">Ontdek het zonnige Santorini</h3>
                <button className="cta text-in-image__btn">Watch now</button>
              </div>
            </div>
            <div className="text-in-image">
              <img
                src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                alt="eiland"
                className="text-in-image__image"
              />
              <div className="text-in-image__content">
                <h3 className="text-in-image__title">Ontdek het zonnige Santorini</h3>
                <p className="text-in-image__description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum.
                  Vestibulum vel sodales massa.
                </p>
                <button className="cta text-in-image__btn">Watch now</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="content">
        <div className="content__container">
          <div className="content__title__row">
            <h2 className="content__title">Products</h2>
          </div>
          <div className="content__colums content__colums--4">
            <div className="image-card">
              <img
                src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                alt="eiland"
                className="image-card__image"
              />
              <div className="image-card__content">
                <h3 className="image-card__title">Santorini</h3>
                <div className="image-card__options">
                  <div className="image-card__option">
                    <Icon name="ui-location" width={16} height={16} />
                    <span>4 destinations</span>
                  </div>
                  <div className="image-card__option">
                    <Icon name="ui-moon" width={16} height={16} />
                    <span>2 nights</span>
                  </div>
                  <div className="image-card__option">
                    <Icon name="ui-plane" width={16} height={16} />
                    <span>3 transports</span>
                  </div>
                </div>
                {/* <p className="image__card__description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
                  </p> */}
                <div className="image-card__bottom">
                  <div className="image-card__price">
                    From
                    <p className="image-card__price--amount">$899</p>
                    Per Person
                  </div>
                  <button className="cta">Book now</button>
                </div>
              </div>
            </div>
            <div className="image-card">
              <img
                src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                alt="eiland"
                className="image-card__image"
              />
              <div className="image-card__content">
                <h3 className="image-card__title">Santorini</h3>
                <div className="image-card__options">
                  <div className="image-card__option">
                    <Icon name="ui-location" width={16} height={16} />
                    <span>4 destinations</span>
                  </div>
                  <div className="image-card__option">
                    <Icon name="ui-moon" width={16} height={16} />
                    <span>2 nights</span>
                  </div>
                  <div className="image-card__option">
                    <Icon name="ui-plane" width={16} height={16} />
                    <span>3 transports</span>
                  </div>
                </div>
                {/* <p className="image__card__description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
                  </p> */}
                <div className="image-card__bottom">
                  <div className="image-card__price">
                    From
                    <p className="image-card__price--amount">$899</p>
                    Per Person
                  </div>
                  <button className="cta">Book now</button>
                </div>
              </div>
            </div>
            <div className="image-card">
              <img
                src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                alt="eiland"
                className="image-card__image"
              />
              <div className="image-card__content">
                <h3 className="image-card__title">Santorini</h3>
                <div className="image-card__options">
                  <div className="image-card__option">
                    <Icon name="ui-location" width={16} height={16} />
                    <span>4 destinations</span>
                  </div>
                  <div className="image-card__option">
                    <Icon name="ui-moon" width={16} height={16} />
                    <span>2 nights</span>
                  </div>
                  <div className="image-card__option">
                    <Icon name="ui-plane" width={16} height={16} />
                    <span>3 transports</span>
                  </div>
                </div>
                {/* <p className="image__card__description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
                  </p> */}
                <div className="image-card__bottom">
                  <div className="image-card__price">
                    From
                    <p className="image-card__price--amount">$899</p>
                    Per Person
                  </div>
                  <button className="cta">Book now</button>
                </div>
              </div>
            </div>
            <div className="image-card">
              <img
                src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                alt="eiland"
                className="image-card__image"
              />
              <div className="image-card__content">
                <h3 className="image-card__title">Santorini</h3>
                <div className="image-card__options">
                  <div className="image-card__option">
                    <Icon name="ui-location" width={16} height={16} />
                    <span>4 destinations</span>
                  </div>
                  <div className="image-card__option">
                    <Icon name="ui-moon" width={16} height={16} />
                    <span>2 nights</span>
                  </div>
                  <div className="image-card__option">
                    <Icon name="ui-plane" width={16} height={16} />
                    <span>3 transports</span>
                  </div>
                </div>
                {/* <p className="image__card__description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
                  </p> */}
                <div className="image-card__bottom">
                  <div className="image-card__price">
                    From
                    <p className="image-card__price--amount">$899</p>
                    Per Person
                  </div>
                  <button className="cta">Book now</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Slider
        path="/images/slider"
        images={[
          'https://cdn.pixabay.com/photo/2018/08/20/22/16/coast-3620146_1280.jpg',
          'https://cdn.pixabay.com/photo/2022/05/03/10/29/prague-7171444_1280.jpg',
          'https://cdn.pixabay.com/photo/2018/08/16/08/39/hallstatt-3609863_1280.jpg'
        ]}
        mode="manual"
      />

      <Slider
        path="/images/slider"
        images={[
          'https://cdn.pixabay.com/photo/2018/08/20/22/16/coast-3620146_1280.jpg',
          'https://cdn.pixabay.com/photo/2022/05/03/10/29/prague-7171444_1280.jpg',
          'https://cdn.pixabay.com/photo/2018/08/16/08/39/hallstatt-3609863_1280.jpg'
        ]}
        mode="auto"
      />

      <div className="image-with-text image-with-text--background">
        <div className="image-with-text__container">
          <div className="image-with-text__title__row">
            <h2 className="image-with-text__title">Activities</h2>
          </div>
          <div className="image-with-text__card__wrapper">
            <div className="image-with-text__card">
              <div className="image-with-text__card__image__wrapper">
                <img
                  src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                  alt="eiland"
                  className="image-with-text__card__image"
                />
              </div>
              <div className="image-with-text__card__content">
                <h3 className="image-with-text__card__title">Ontdek het zonnige Santorini</h3>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Your activity</h5>
                  <p className="image-with-text__card__description__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum.
                    Vestibulum vel sodales massa. Pellentesque bibendum nisl at hendrerit sagittis. Pellentesque eget dui scelerisque, dictum diam non, ultrices
                    velit. Duis et sem est. Suspendisse potenti.
                  </p>
                </div>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Details</h5>
                  <p className="image-with-text__card__description__text">
                    Etiam ipsum elit, volutpat sed semper at, eleifend vitae erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. In at lectus rutrum elit egestas consectetur. Suspendisse sit amet erat dapibus, tincidunt arcu fringilla, auctor justo.
                  </p>
                </div>
                <div className="image-with-text__card__btn">
                  <button type="button" className="cta cta--primary">
                    Book now
                  </button>
                </div>
              </div>
            </div>
            <div className="image-with-text__card image-with-text__card--reverse">
              <div className="image-with-text__card__image__wrapper">
                <img
                  src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                  alt="eiland"
                  className="image-with-text__card__image"
                />
              </div>
              <div className="image-with-text__card__content">
                <h3 className="image-with-text__card__title">Ontdek het zonnige Santorini</h3>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Your activity</h5>
                  <p className="image-with-text__card__description__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum.
                    Vestibulum vel sodales massa. Pellentesque bibendum nisl at hendrerit sagittis. Pellentesque eget dui scelerisque, dictum diam non, ultrices
                    velit. Duis et sem est. Suspendisse potenti.
                  </p>
                </div>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Details</h5>
                  <p className="image-with-text__card__description__text">
                    Etiam ipsum elit, volutpat sed semper at, eleifend vitae erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. In at lectus rutrum elit egestas consectetur. Suspendisse sit amet erat dapibus, tincidunt arcu fringilla, auctor justo.
                  </p>
                </div>
                <div className="image-with-text__card__btn">
                  <button type="button" className="cta cta--primary">
                    Book now
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="image-with-text image-with-text--no-card">
        <div className="image-with-text__container">
          <div className="image-with-text__title__row">
            <h2 className="image-with-text__title">Activities</h2>
          </div>
          <div className="image-with-text__card__wrapper">
            <div className="image-with-text__card">
              <div className="image-with-text__card__image__wrapper">
                <img
                  src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                  alt="eiland"
                  className="image-with-text__card__image"
                />
              </div>
              <div className="image-with-text__card__content">
                <h3 className="image-with-text__card__title">Ontdek het zonnige Santorini</h3>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Your activity</h5>
                  <p className="image-with-text__card__description__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum.
                    Vestibulum vel sodales massa. Pellentesque bibendum nisl at hendrerit sagittis. Pellentesque eget dui scelerisque, dictum diam non, ultrices
                    velit. Duis et sem est. Suspendisse potenti.
                  </p>
                </div>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Details</h5>
                  <p className="image-with-text__card__description__text">
                    Etiam ipsum elit, volutpat sed semper at, eleifend vitae erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. In at lectus rutrum elit egestas consectetur. Suspendisse sit amet erat dapibus, tincidunt arcu fringilla, auctor justo.
                  </p>
                </div>
                <div className="image-with-text__card__btn">
                  <button type="button" className="cta cta--primary">
                    Book now
                  </button>
                </div>
              </div>
            </div>
            <div className="image-with-text__card image-with-text__card--reverse">
              <div className="image-with-text__card__image__wrapper">
                <img
                  src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                  alt="eiland"
                  className="image-with-text__card__image"
                />
              </div>
              <div className="image-with-text__card__content">
                <h3 className="image-with-text__card__title">Ontdek het zonnige Santorini</h3>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Your activity</h5>
                  <p className="image-with-text__card__description__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum.
                    Vestibulum vel sodales massa. Pellentesque bibendum nisl at hendrerit sagittis. Pellentesque eget dui scelerisque, dictum diam non, ultrices
                    velit. Duis et sem est. Suspendisse potenti.
                  </p>
                </div>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Details</h5>
                  <p className="image-with-text__card__description__text">
                    Etiam ipsum elit, volutpat sed semper at, eleifend vitae erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. In at lectus rutrum elit egestas consectetur. Suspendisse sit amet erat dapibus, tincidunt arcu fringilla, auctor justo.
                  </p>
                </div>
                <div className="image-with-text__card__btn">
                  <button type="button" className="cta cta--primary">
                    Book now
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="image-with-text image-with-text--full-img">
        <div className="image-with-text__container">
          <div className="image-with-text__title__row">
            <h2 className="image-with-text__title">Activities</h2>
          </div>
          <div className="image-with-text__card__wrapper">
            <div className="image-with-text__card">
              <div className="image-with-text__card__image__wrapper">
                <img
                  src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                  alt="eiland"
                  className="image-with-text__card__image"
                />
              </div>
              <div className="image-with-text__card__content">
                <h3 className="image-with-text__card__title">Ontdek het zonnige Santorini</h3>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Your activity</h5>
                  <p className="image-with-text__card__description__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum.
                    Vestibulum vel sodales massa. Pellentesque bibendum nisl at hendrerit sagittis. Pellentesque eget dui scelerisque, dictum diam non, ultrices
                    velit. Duis et sem est. Suspendisse potenti.
                  </p>
                </div>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Details</h5>
                  <p className="image-with-text__card__description__text">
                    Etiam ipsum elit, volutpat sed semper at, eleifend vitae erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. In at lectus rutrum elit egestas consectetur. Suspendisse sit amet erat dapibus, tincidunt arcu fringilla, auctor justo.
                  </p>
                </div>
                <div className="image-with-text__card__btn">
                  <button type="button" className="cta cta--primary">
                    Book now
                  </button>
                </div>
              </div>
            </div>
            <div className="image-with-text__card image-with-text__card--reverse">
              <div className="image-with-text__card__image__wrapper">
                <img
                  src="https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg"
                  alt="eiland"
                  className="image-with-text__card__image"
                />
              </div>
              <div className="image-with-text__card__content">
                <h3 className="image-with-text__card__title">Ontdek het zonnige Santorini</h3>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Your activity</h5>
                  <p className="image-with-text__card__description__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum.
                    Vestibulum vel sodales massa. Pellentesque bibendum nisl at hendrerit sagittis. Pellentesque eget dui scelerisque, dictum diam non, ultrices
                    velit. Duis et sem est. Suspendisse potenti.
                  </p>
                </div>
                <div className="image-with-text__card__description">
                  <h5 className="image-with-text__card__description__title">Details</h5>
                  <p className="image-with-text__card__description__text">
                    Etiam ipsum elit, volutpat sed semper at, eleifend vitae erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. In at lectus rutrum elit egestas consectetur. Suspendisse sit amet erat dapibus, tincidunt arcu fringilla, auctor justo.
                  </p>
                </div>
                <div className="image-with-text__card__btn">
                  <button type="button" className="cta cta--primary">
                    Book now
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="content">
        <div className="content__container content__container--medium">
          <div className="content__colums">
            <div className="newsletter">
              <div className="newsletter__container">
                <h3 className="newsletter__title">Subscribe to our newsletter</h3>
                {/* <p className="newsletter__description"></p> */}
                <form action="" className="newsletter__form">
                  <div className="newsletter__form__group">
                    <input type="text" className="newsletter__input" placeholder="Enter your name" aria-label="Enter your name" />
                    <input type="email" className="newsletter__input" placeholder="Enter your email" aria-label="Enter your email" />
                    <button type="submit" className="cta newsletter__btn">
                      Subscribe
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>

      <ContactForm />

      <footer className="footer">
        <div className="footer__container">
          <div className="footer__top">
            <div className="footer__logo">
              <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 362 105" fill="none">
                <path d="M162.919 93.5458V7.96968H136.383V0H197.82V7.96968H171.285V93.5458H162.919Z" fill="black" />
                <path
                  d="M210.005 13.849C208.175 13.849 206.606 13.2393 205.299 12.0199C204.079 10.7133 203.469 9.18909 203.469 7.44708C203.469 5.61798 204.079 4.09372 205.299 2.87432C206.606 1.56781 208.175 0.914552 210.005 0.914552C211.748 0.914552 213.229 1.56781 214.449 2.87432C215.757 4.09372 216.41 5.61798 216.41 7.44708C216.41 9.18909 215.757 10.7133 214.449 12.0199C213.229 13.2393 211.748 13.849 210.005 13.849ZM205.822 93.5458V29.527H214.188V93.5458H205.822Z"
                  fill="black"
                />
                <path
                  d="M280.911 82.3099H280.388C279.342 84.0519 278.078 85.7503 276.597 87.4052C275.115 88.973 273.373 90.3666 271.368 91.5861C269.364 92.8055 267.098 93.7635 264.571 94.4604C262.044 95.2443 259.255 95.6362 256.205 95.6362C252.109 95.6362 248.231 94.8088 244.571 93.1539C240.911 91.4118 237.686 89.0601 234.898 86.0987C232.196 83.0502 230.017 79.4355 228.362 75.2547C226.793 71.0739 226.009 66.5011 226.009 61.5364C226.009 56.5717 226.793 51.9989 228.362 47.8181C230.017 43.6373 232.196 40.0662 234.898 37.1048C237.686 34.0563 240.911 31.7045 244.571 30.0496C248.231 28.3076 252.109 27.4366 256.205 27.4366C262.305 27.4366 267.359 28.7431 271.368 31.3561C275.377 33.9691 278.383 37.0612 280.388 40.6323H280.911L280.388 31.7481V0H288.754V93.5458H280.911V82.3099ZM257.643 88.0585C260.693 88.0585 263.612 87.4923 266.401 86.36C269.277 85.1406 271.76 83.3986 273.852 81.134C276.031 78.7823 277.73 75.9951 278.95 72.7724C280.257 69.4625 280.911 65.7172 280.911 61.5364C280.911 57.3556 280.257 53.6103 278.95 50.3005C277.73 46.9907 276.031 44.2034 273.852 41.9388C271.76 39.6742 269.277 37.9758 266.401 36.8435C263.612 35.6241 260.693 35.0144 257.643 35.0144C254.593 35.0144 251.63 35.6241 248.754 36.8435C245.965 38.0629 243.481 39.8484 241.303 42.2001C239.211 44.4647 237.512 47.252 236.205 50.5618C234.985 53.7845 234.375 57.4427 234.375 61.5364C234.375 65.6301 234.985 69.3319 236.205 72.6417C237.512 75.9515 239.211 78.7387 241.303 81.0033C243.481 83.268 245.965 85.01 248.754 86.2294C251.63 87.4488 254.593 88.0585 257.643 88.0585Z"
                  fill="black"
                />
                <path
                  d="M359.793 78.3903C358.66 80.7421 357.223 82.9631 355.48 85.0535C353.737 87.1439 351.689 88.973 349.336 90.5408C347.07 92.1087 344.456 93.3281 341.493 94.1991C338.53 95.1572 335.262 95.6362 331.689 95.6362C327.07 95.6362 322.8 94.8088 318.878 93.1539C314.957 91.4118 311.558 89.0166 308.682 85.9681C305.894 82.9196 303.715 79.3484 302.146 75.2547C300.578 71.0739 299.793 66.5011 299.793 61.5364C299.793 56.9201 300.491 52.5651 301.885 48.4714C303.366 44.2905 305.458 40.6759 308.159 37.6274C310.861 34.4917 314.129 32.0094 317.963 30.1803C321.798 28.3512 326.111 27.4366 330.905 27.4366C335.523 27.4366 339.663 28.2641 343.323 29.919C347.07 31.4868 350.251 33.7514 352.865 36.7128C355.48 39.5871 357.484 43.0711 358.878 47.1649C360.36 51.2586 361.101 55.7878 361.101 60.7525C361.101 61.0138 361.101 61.2751 361.101 61.5364C361.013 61.7977 360.97 62.0155 360.97 62.1897V62.9736H308.29C308.377 67.4157 309.162 71.2046 310.643 74.3402C312.125 77.4758 313.998 80.0888 316.264 82.1792C318.53 84.1825 321.057 85.6632 323.846 86.6213C326.634 87.5794 329.336 88.0585 331.95 88.0585C337.353 88.0585 341.623 86.8391 344.761 84.4003C347.898 81.8744 350.512 78.6952 352.604 74.8628L359.793 78.3903ZM352.342 55.9184C352.255 53.828 351.82 51.5634 351.035 49.1246C350.251 46.6858 349.031 44.4212 347.375 42.3308C345.719 40.2404 343.497 38.4984 340.708 37.1048C338.007 35.7112 334.652 35.0144 330.643 35.0144C328.029 35.0144 325.501 35.4934 323.061 36.4515C320.621 37.3225 318.399 38.629 316.395 40.371C314.478 42.113 312.822 44.2905 311.427 46.9036C310.12 49.5166 309.249 52.5215 308.813 55.9184H352.342Z"
                  fill="black"
                />
                <path
                  d="M101.211 60.1065C101.211 60.1065 107.877 26.7486 76.2712 7.84631C76.4781 7.97189 58.3876 -4.7109 38.4167 3.42406C38.7673 3.78 35.9017 18.7582 45.3684 27.9065C45.161 27.7809 101.213 60.1093 101.213 60.1093"
                  fill="url(#paint0_linear_100_16650)"
                />
                <path
                  d="M100.141 65.9671C99.6608 66.1056 87.8509 56.4508 75.2936 60.4101C75.5028 60.2877 20.3579 94.1359 20.3579 94.1359C20.3579 94.1359 46.5252 115.888 78.2137 97.1233C78.0045 97.2452 97.7823 87.3929 100.141 65.9671"
                  fill="url(#paint1_linear_100_16650)"
                />
                <path
                  d="M31.9853 5.67737C31.9853 5.67737 -0.0892988 17.3353 0.153201 54.2498C0.153201 54.0065 -1.30549 76.1073 16.0681 88.9789C16.1905 88.4932 30.5257 83.1504 33.4426 70.2788C33.444 70.522 31.9853 5.67737 31.9853 5.67737Z"
                  fill="url(#paint2_linear_100_16650)"
                />
                <defs>
                  <linearGradient id="paint0_linear_100_16650" x1="101.798" y1="60.1093" x2="43.5053" y2="0.000186692" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#95C3E6" />
                    <stop offset="1" stop-color="#2672AB" />
                  </linearGradient>
                  <linearGradient id="paint1_linear_100_16650" x1="21.3951" y1="93.8819" x2="70.8134" y2="39.2931" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#9494F3" />
                    <stop offset="1" stop-color="#2626C4" />
                  </linearGradient>
                  <linearGradient id="paint2_linear_100_16650" x1="31.6767" y1="5.67737" x2="-17.9893" y2="50.1198" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#14DA9E" />
                    <stop offset="1" stop-color="#26B489" />
                  </linearGradient>
                </defs>
              </svg>
            </div>

            <div className="footer__social">
              <a href="#" className="footer__social__link" aria-label="Instagram">
                <Icon name="ui-instagram" width={24} height={24} />
              </a>
              <a href="#" className="footer__social__link" aria-label="LinkedIn">
                <Icon name="ui-linkedin" width={24} height={24} />
              </a>
              <a href="#" className="footer__social__link" aria-label="Facebook">
                <Icon name="ui-facebook" width={24} height={24} />
              </a>
            </div>
          </div>
          <div className="footer__wrapper">
            <div className="footer__links">
              <h5 className="footer__link__title">Bestemmingen</h5>
              <a href="#" className="footer__link">
                Spanje
              </a>
              <a href="#" className="footer__link">
                Kroatië
              </a>
              <a href="#" className="footer__link">
                Tenerife
              </a>
              <a href="#" className="footer__link">
                Griekenland
              </a>
              <a href="#" className="footer__link">
                Ibiza
              </a>
            </div>
            <div className="footer__links">
              <h5 className="footer__link__title">Themareizen</h5>
              <a href="#" className="footer__link">
                Huwlijksreizen
              </a>
              <a href="#" className="footer__link">
                Familiereizen
              </a>
              <a href="#" className="footer__link">
                Groepsreizen
              </a>
              <a href="#" className="footer__link">
                Golf
              </a>
              <a href="#" className="footer__link">
                Sport
              </a>
            </div>
            <div className="footer__links">
              <h5 className="footer__link__title">Info diensten</h5>
              <a href="#" className="footer__link">
                Privacy Policy
              </a>
              <a href="#" className="footer__link">
                Terms of Service
              </a>
              <a href="#" className="footer__link">
                About us
              </a>
              <a href="#" className="footer__link">
                Contact Us
              </a>
            </div>
            <div className="footer__links">
              <h5 className="footer__link__title">About us</h5>
              <a href="#" className="footer__link">
                Privacy Policy
              </a>
              <a href="#" className="footer__link">
                Terms of Service
              </a>
              <a href="#" className="footer__link">
                About us
              </a>
              <a href="#" className="footer__link">
                Contact Us
              </a>
            </div>
          </div>
          <div className="footer__line"></div>
          <div className="footer__bottom">
            <p className="footer__copyright">&copy; 2024 Travel Agency. All rights reserved.</p>
            <div className="footer__payments">
              <img src="https://koningaap.be/public/KoningAap/payments/bancontactmrcash-logo.svg" alt="bank" />
              <img src="https://koningaap.be/public/KoningAap/payments/mastercard-logo.svg" alt="mastercard" />
              <img src="https://www.tui.be/sites/all/themes/tui/img/maestro.png" alt="maestro" />
              <img src="https://koningaap.be/public/KoningAap/payments/visa-logo.svg" alt="visa" />
              <img src="https://1000logos.net/wp-content/uploads/2016/10/American-Express-logo.png" alt="american express" />
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default ContentPageSelfContained;