import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
import { motion } from "framer-motion";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { useRouter } from "next/router.js";
const GiftAnExperience = () => {
  const router = useRouter();
  return (
    <>
      <section className="gift-an-experience-session">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="gift-an-experience-inner">
                <div className="row align-items-center">
                  <div className="col-md-6">
                    <motion.div variants={zoomIn(0.4)} initial={"false"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                      <div className="content">
                        <div className="title">Share the Joy of Discovery </div>
                        <div className="disc">Treat your loved ones to extraordinary experiences with our gift cards. Perfect for any occasion, they can choose from a variety of adventures, cultural explorations, wellness retreats, and more.</div>
                        <div>
                          <Button variant="primary" onClick={() => {
                            router.push("/gift-card")
                          }}>Gift An Experience</Button>
                        </div>
                      </div>
                    </motion.div>
                  </div>
                  <div className="col-md-6">
                    <div className="img">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/gift-card.webp" />
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default GiftAnExperience;