"use client";

import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";

const Banner: React.FC = () => {

  return (
    <>
      <div className="banner-section">
        <div className="container-fluid">
          <div className="row">
            <div className="col-lg-5 col-md-12">
              <div className="banner-content">
                <h1
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="100"
                  data-aos-once="true"
                >
                  Empowering Your Digital Future
                </h1>

                <p
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="200"
                  data-aos-once="true"
                >
                  Comprehensive IT Solutions for Businesses & Individuals – Secure, Reliable, and Scalable.
                </p>

                <div
                  className="btn-box"
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="300"
                  data-aos-once="true"
                >
                  <Link href="/about-us" className="default-btn">
                    <i className="flaticon-right"></i>
                    About Us <span></span>
                  </Link>
                </div>
              </div>
            </div>

            <div className="col-lg-7 col-md-12">
              <div className="banner-animation-image">
                <Image
                  src="/img/main-banner/banner-two/banner-two-shape1.png"
                  alt="image"
                  width={107}
                  height={173}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="50"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape2.png"
                  alt="image"
                  width={156}
                  height={134}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="100"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape3.png"
                  alt="image"
                  width={40}
                  height={168}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="150"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape4.png"
                  alt="image"
                  width={97}
                  height={154}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="200"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape5.png"
                  alt="image"
                  width={311}
                  height={175}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="250"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape6.png"
                  alt="image"
                  width={55}
                  height={186}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="300"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape7.png"
                  alt="image"
                  width={208}
                  height={218}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="350"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape8.png"
                  alt="image"
                  width={215}
                  height={236}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="400"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape9.png"
                  alt="image"
                  width={134}
                  height={113}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="450"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape10.png"
                  alt="image"
                  width={267}
                  height={292}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="500"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape11.png"
                  alt="image"
                  width={200}
                  height={255}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="550"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-shape12.png"
                  alt="image"
                  width={698}
                  height={407}
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay="600"
                  data-aos-once="true"
                />

                <Image
                  src="/img/main-banner/banner-two/banner-two-main-img.png"
                  alt="image"
                  width={967}
                  height={643}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Banner;