import React from "react";
import Link from "next/link";
import Image from "next/image";

const bannerShapes = [
  { src: "banner-two-shape1.png", width: 107, height: 173 },
  { src: "banner-two-shape2.png", width: 156, height: 134 },
  { src: "banner-two-shape3.png", width: 40, height: 168 },
  { src: "banner-two-shape4.png", width: 97, height: 154 },
  { src: "banner-two-shape5.png", width: 311, height: 175 },
  { src: "banner-two-shape6.png", width: 55, height: 186 },
  { src: "banner-two-shape7.png", width: 208, height: 218 },
  { src: "banner-two-shape8.png", width: 215, height: 236 },
  { src: "banner-two-shape9.png", width: 134, height: 113 },
  { src: "banner-two-shape10.png", width: 267, height: 292 },
  { src: "banner-two-shape11.png", width: 200, height: 255 },
  { src: "banner-two-shape12.png", width: 698, height: 407 },
];

const Banner: React.FC = () => {
  return (
    <section
      className="banner-section"
      aria-labelledby="banner-heading"
    >
      <div className="container-fluid">
        <div className="row align-items-center">

          {/* Hero Content */}
          <div className="col-lg-5 col-md-12">
            <div className="banner-content">

              <h1
                id="banner-heading"
                data-aos="fade-up"
                data-aos-duration="800"
                data-aos-delay="100"
                data-aos-once="true"
              >
                Web Development, eCommerce & AI Solutions Company
              </h1>

              <p
                data-aos="fade-up"
                data-aos-duration="800"
                data-aos-delay="200"
                data-aos-once="true"
              >
                Digi Horizon Technologies helps businesses worldwide build
                scalable digital solutions through custom web development,
                eCommerce platforms, mobile applications, AI automation,
                and enterprise software services.
              </p>

              <div
                className="btn-box"
                data-aos="fade-up"
                data-aos-duration="800"
                data-aos-delay="300"
                data-aos-once="true"
              >

                <Link
                  href="/contact/"
                  className="default-btn"
                  aria-label="Get a free consultation for your digital project"
                >
                  <i
                    className="flaticon-right"
                    aria-hidden="true"
                  />

                  Get Free Consultation

                  <span />
                </Link>


                <Link
                  href="/portfolio"
                  className="secondary-btn"
                  aria-label="View Digi Horizon portfolio"
                >
                  View Portfolio
                </Link>

              </div>

            </div>
          </div>


          {/* Hero Visual */}
          <div className="col-lg-7 col-md-12">
            <div
              className="banner-animation-image"
              aria-hidden="true"
            >

              {bannerShapes.map((image, index) => (
                <Image
                  key={image.src}
                  src={`/img/main-banner/banner-two/${image.src}`}
                  alt=""
                  width={image.width}
                  height={image.height}
                  sizes="(max-width: 768px) 50vw, 150px"
                  data-aos="fade-up"
                  data-aos-duration="800"
                  data-aos-delay={index * 50}
                  data-aos-once="true"
                />
              ))}


              <Image
                src="/img/main-banner/banner-two/banner-two-main-img.webp"
                alt="Digital technology solutions illustration showing web development, eCommerce, mobile applications, and AI services"
                width={967}
                height={643}
                priority
                fetchPriority="high"
                quality={85}
                sizes="(max-width: 768px) 100vw, 60vw"
              />

            </div>
          </div>

        </div>
      </div>
    </section>
  );
};

export default Banner;