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: 150px;
          padding-bottom: 150px;
        }

        /* dark gradient overlay */
        .banner__inner-page::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(270.07deg, #3779b9 0.07%, #1a1f2b 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: #3779b9;
        }
        .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: #3779b9;
        }

        /* ── 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: 60px; padding-bottom: 60px; }
          .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-solid fa-angles-right mx-2" />
              {crumb}
            </span>
          </div>
        </div>
      </section>
    </>
  );
};

export default InnerBanner;