MetatronLatestWebsite/src/components/common/InnerBanner.tsx

"use client";
import React, { useEffect } from "react";
import Link from "next/link";

interface InnerBannerProps {
    title: string;
    breadcrumb?: string; // overrides title in breadcrumb if different
    bgImage?: string;    // optional custom background, defaults to hero-bg1
}

const InnerBanner = ({
    title,
    breadcrumb,
    bgImage = "/assets/img/bg/hero-bg1.png",
}: InnerBannerProps) => {
    const crumb = breadcrumb ?? title;

    useEffect(() => {
        if (typeof window !== "undefined") {
            // @ts-ignore
            if (window.WOW) {
                // @ts-ignore
                new window.WOW({ live: false }).init();
            }
        }
    }, []);

    return (
        <>
            <style>{`
        /* ── Inner Banner ─────────────────────────────────────────── */
        .banner__inner-page {
          position: relative;
          overflow: hidden;
          z-index: 1;
          text-transform: capitalize;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          padding-top: 180px;
          padding-bottom: 180px;
        }

        /* dark gradient overlay */
        .banner__inner-page::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(270.07deg, #002b98 0.07%, #00060c 99.95%);
          z-index: -1;
          opacity: 0.82;
        }

        /* shapes */
        .banner__inner-page .ib-shape1,
        .banner__inner-page .ib-shape2 {
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: -1;
          pointer-events: none;
        }
        .banner__inner-page .ib-shape3 {
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: -1;
          pointer-events: none;
        }

        /* container */
        .banner__inner-page .ib-container {
          position: relative;
          z-index: 2;
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 15px;
        }

        /* title */
        .banner__inner-page h2 {
          font-size: 40px;
          line-height: 48px;
          color: #ffffff;
          margin-bottom: 10px;
          font-weight: 700;
        }

        /* breadcrumb */
        .banner__inner-page .breadcrumb-list {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 4px;
          font-size: 15px;
        }
        .banner__inner-page .breadcrumb-list a {
          color: #ffffff;
          text-decoration: none;
          transition: color 0.3s;
        }
        .banner__inner-page .breadcrumb-list a:hover {
          color: #3c72fc;
        }
        .banner__inner-page .breadcrumb-list span {
          color: rgba(255, 255, 255, 0.75);
          display: flex;
          align-items: center;
          gap: 4px;
        }
        .banner__inner-page .breadcrumb-list i {
          font-size: 13px;
          color: #3c72fc;
        }

        /* ── sway animation for shape3 ─── */
        @keyframes swayX {
          0%   { transform: translateX(0); }
          50%  { transform: translateX(-18px); }
          100% { transform: translateX(0); }
        }
        .sway__animationX {
          animation: swayX 4s ease-in-out infinite;
          display: block;
        }

        /* ── WOW fallback ─── */
        @keyframes _slideInLeft {
          from { opacity: 0; transform: translateX(-80px); }
          to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes _slideInRight {
          from { opacity: 0; transform: translateX(80px); }
          to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes _fadeInUp {
          from { opacity: 0; transform: translateY(20px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .wow.slideInLeft  { animation: _slideInLeft  1.2s ease both; }
        .wow.slideInRight { animation: _slideInRight 1.2s ease both; }
        .wow.fadeInUp     { animation: _fadeInUp     1s ease both; }

        @media (max-width: 768px) {
          .banner__inner-page { padding-top: 120px; padding-bottom: 120px; }
          .banner__inner-page h2 { font-size: 28px; line-height: 36px; }
          .banner__inner-page .ib-shape3 { display: none; }
        }
      `}</style>

            <section
                className="banner__inner-page"
                style={{ backgroundImage: `url(${bgImage})` }}
            >
                {/* shape2 – bottom-left large */}
                <div
                    className="ib-shape2 wow slideInLeft"
                    data-wow-delay="0ms"
                    data-wow-duration="1500ms"
                >
                    <img
                        src="/assets/img/elements/elements16.png"
                        alt="shape"
                        width={169}
                        height={266}
                        style={{ color: "transparent" }}
                    />
                </div>

                {/* shape1 – bottom-left small (layered above shape2) */}
                <div
                    className="ib-shape1 wow slideInLeft"
                    data-wow-delay="200ms"
                    data-wow-duration="1500ms"
                >
                    <img
                        src="/assets/img/elements/elements8.png"
                        alt="shape"
                        width={188}
                        height={231}
                        style={{ color: "transparent", opacity: 0.6 }}
                    />
                </div>

                {/* shape3 – right side with sway */}
                <div
                    className="ib-shape3 wow slideInRight"
                    data-wow-delay="200ms"
                    data-wow-duration="1500ms"
                >
                    <img
                        src="/assets/img/elements/elements9.png"
                        alt="shape"
                        width={535}
                        height={450}
                        className="sway__animationX"
                        style={{ color: "transparent", opacity: 0.5 }}
                    />
                </div>

                {/* text content */}
                <div className="ib-container">
                    <h2
                        className="wow fadeInUp"
                        data-wow-delay="0ms"
                        data-wow-duration="1500ms"
                    >
                        {title}
                    </h2>

                    <div
                        className="breadcrumb-list wow fadeInUp"
                        data-wow-delay="200ms"
                        data-wow-duration="1500ms"
                    >
                        <Link href="/">Home</Link>
                        <span>
                            <i className="fa-regular fa-angles-right mx-2" />
                            {crumb}
                        </span>
                    </div>
                </div>
            </section>
        </>
    );
};

export default InnerBanner;