import { useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck } from "@fortawesome/free-solid-svg-icons";
import { gsap } from "gsap";
import { ScrollTrigger } from "@/plugins";
import Accordion from "react-bootstrap/Accordion";
import Link from "next/link.js";

gsap.registerPlugin(ScrollTrigger);

const DigitalMarketingPrice = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      let tHero = gsap.context(() => {
        gsap.set(".fade_bottom", { y: 30, opacity: 0 });
        let pricing_timeline = gsap.timeline({
          scrollTrigger: {
            trigger: ".price__table",
            start: "top center",
          },
        });

        gsap.set(".animation_from_bottom", { yPercent: 50 });

        pricing_timeline.to(".animation_from_bottom", {
          yPercent: 0,
          duration: 2,
          ease: "power4.out",
        });

        gsap.set(".animation_from_top", { yPercent: -50, opacity: 0 });
        pricing_timeline.to(
          ".animation_from_top",
          {
            yPercent: 0,
            duration: 2,
            opacity: 1,
            ease: "power4.out",
          },
          "-=2"
        );
      });
      return () => tHero.revert();
    }
  }, []);
  return (
    <>
      <section className="price__area pt-130 pb-140">
        <div className="container">
          <div className="row">
            <div className="col-xxl-6 col-xl-6 col-lg-6">
              <div className="sec-title-wrapper">
                <h2 className="sec-sub-title title-anim">Exclusive Offer</h2>
                <h3 className="sec-title title-anim">
                  Only for Startups
                </h3>
              </div>

            </div>

            <div className="col-xxl-6 col-xl-6 col-lg-6">
              <div className="price__table">
                <div className="price__item animation_from_top">
                  <div className="price__icon">
                    <span>
                      <FontAwesomeIcon icon={faCheck}></FontAwesomeIcon>
                    </span>
                  </div>
                  <div className="price__info">
                    <h2 className="price__type"></h2>
                    <h3 className="price__title">MVP Package</h3>
                    <ul style={{ fontSize: '1em', color: 'white' }}>
                      <li>
                        •	Custom Web Application Development
                      </li>
                      <li>
                        •	Complete Branding Package
                      </li>
                      <li>
                        •	API Integrations
                      </li>
                      <li>
                        •	Advanced SEO & Marketing Strategy
                      </li>
                      <li>
                        •	1 Year of Support
                      </li>
                    </ul>
                  </div>
                  <div className="price__amount">
                    <h4 className="best-value">Best Value</h4>
                    <p style={{ display: 'flex', alignItems: 'flex-start' }}>
                      <span style={{ fontSize: '0.3em', marginRight: '5px', color: '#ffffff' }}>
                        Starting from
                      </span>
                      <span style={{ fontSize: '0.8em' }}>
                        $7999<span style={{ fontSize: '0.5em' }}>.99</span>
                      </span>
                    </p>
                  </div>
                </div>
                <p style={{ fontSize: '0.7em', fontStyle: 'italic', color: '#21616f' }}>
                  *For Startups ready to build their MVP and take on bigger challenges.
                </p>
                <div
                  style={{
                    height: "1px",
                    background: "#21616f",
                    marginBottom: "20px"
                  }}
                ></div>
                <div className="price__item animation_from_bottom">
                  <div className="price__icon">
                    <span>
                      <FontAwesomeIcon icon={faCheck}></FontAwesomeIcon>
                    </span>
                  </div>
                  <div className="price__info">
                    <h2 className="price__type"></h2>
                    <h3 className="price__title">E-Commerce Package</h3>
                    <ul style={{ fontSize: '1em' }}>
                      <li>
                        •	E-Commerce Integration
                      </li>
                      <li>
                        •	Responsive Website
                      </li>
                      <li>
                        •	Enhanced Branding Kit
                      </li>
                      <li>
                        •	Custom Website Design
                      </li>
                      <li>
                        •	SEO & Content Strategy
                      </li>
                      <li>
                        •	6 Months of Support
                      </li>
                    </ul>
                  </div>
                  <div className="price__amount">
                    <p style={{ display: 'flex', alignItems: 'flex-start' }}>
                      <span style={{ fontSize: '0.3em', marginRight: '5px', color: '#21616f' }}>
                        Starting from
                      </span>
                      <span style={{ fontSize: '0.8em' }}>
                        $3799<span style={{ fontSize: '0.5em' }}>.99</span>
                      </span>
                    </p>
                  </div>
                </div>
                <p style={{ fontSize: '0.7em', fontStyle: 'italic', color: '#21616f' }}>
                  *For Startups ready to sell online and grow their brand presence.
                </p>
                <div
                  style={{
                    height: "1px",
                    background: "#21616f",
                    marginBottom: "20px"
                  }}
                ></div>
                <div className="price__item animation_from_bottom">
                  <div className="price__icon">
                    <span>
                      <FontAwesomeIcon icon={faCheck}></FontAwesomeIcon>
                    </span>
                  </div>
                  <div className="price__info">
                    <h2 className="price__type"></h2>
                    <h3 className="price__title">Starter Package</h3>
                    <ul style={{ fontSize: '1em' }}>
                      <li>
                        •	Modern Website Design
                      </li>
                      <li>
                        •	Basic Branding Kit
                      </li>
                      <li>
                        •	Content Management System (CMS)
                      </li>
                      <li>
                        •	Basic SEO Setup
                      </li>
                      <li>
                        •	3 Months of Support
                      </li>
                    </ul>
                  </div>
                  <div className="price__amount">
                    <p style={{ display: 'flex', alignItems: 'flex-start' }}>
                      <span style={{ fontSize: '0.3em', marginRight: '5px', color: '#21616f' }}>
                        Starting from
                      </span>
                      <span style={{ fontSize: '0.8em' }}>
                        $1499<span style={{ fontSize: '0.5em' }}>.99</span>
                      </span>
                    </p>
                  </div>
                </div>
                <p style={{ fontSize: '0.7em', fontStyle: 'italic', color: '#21616f' }}>
                  *For Startups who need a professional-looking website without the hassle.
                </p>
                <div
                  style={{
                    height: "1px",
                    background: "#21616f",
                    marginBottom: "20px"
                  }}
                ></div>
                <div className="price__btn btn_wrapper">
                  <Link
                    href="/contact"
                    className="wc-btn-black btn-hover btn-item"
                  >
                    <span></span> Start with <br />
                    Book Your Demo Now <i className="fa-solid fa-arrow-right"></i>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default DigitalMarketingPrice;