"use client";

import Image from "next/image";

const OFFERINGS = [
    {
        boldText: "Structured Leadership",
        regularText: "Development Journey",
        image: "/offering-1.jpg",
    },
    {
        boldText: "Team Engagement\nThrough",
        regularText: "Experiential Learning",
        image: "/offering-2.jpg",
    },
    {
        boldText: "Communication",
        regularText: "Coaching",
        image: "/offering-3.jpg",
    },
    {
        boldText: "Our",
        regularText: "Masterclass",
        image: "/offering-4.jpg",
    },
];

export default function OfferingsSection() {
    return (
        <>
            {/* Top Pink Bar */}
            <div className="w-full h-[15px] bg-[#c97b9e]" />

            <section
                className="w-full offerings-section"
                style={{ background: "linear-gradient(134deg, #0a587b 0%, #05729a 100%)" }}
            >
                <div className="max-w-[1140px] mx-auto px-[15px]">

                    {/* Heading */}
                    <div className="offerings-heading-block">
                        <h2
                            className="offerings-heading"
                            style={{ color: "#ffffff", fontWeight: 700, fontFamily: "Helvetica, Arial, sans-serif" }}
                        >
                            OUR OFFERINGS
                        </h2>
                        <div className="offerings-divider" />
                    </div>

                    {/* Description */}
                    <div
                        className="offerings-desc text-justify font-[Helvetica]"
                        style={{ color: "#ffffff" }}
                    >
                        <p>
                            We partner with clients to understand the facets of their aspirations and challenges to create bespoke solutions that are relevant to their context.
                        </p>
                        <p>
                            We create tailor-made solutions around the realm of Leadership Development, Talent Management, and Capability building. We offer specialised masterclasses around the different facets of Communication, Creativity, and Strategic Thinking.
                        </p>
                        <p>
                            Our proficiency in creating & deploying behavior-based assessments & projects enables us to support clients and measure the transformation and impact that our engagement has created. We are clients' partners in the journey of accomplishing their leadership development goals.
                        </p>
                    </div>

                    {/* Cards */}
                    <div className="offerings-cards">
                        {OFFERINGS.map((item, index) => (
                            <div key={index} className="offering-card">

                                {/* Plain img instead of Next.js Image fill to prevent flash */}
                                <img
                                    src={item.image}
                                    alt={item.boldText}
                                    loading="lazy"
                                    className="offering-bg-img"
                                />

                                {/* Overlay */}
                                <div className="offering-overlay" />

                                {/* Text + Arrow */}
                                <div className="offering-text">
                                    <div className="offering-title-block">
                                        <div className="offering-bold">
                                            {item.boldText}
                                        </div>
                                        <div className="offering-regular">
                                            {item.regularText}
                                        </div>
                                    </div>
                                    <div className="offering-arrow">
                                        <div className="scale-[1.35] origin-left">
                                            <Image
                                                src="/arrow_white.png"
                                                alt="arrow"
                                                width={52}
                                                height={22}
                                                loading="lazy"
                                                unoptimized
                                            />
                                        </div>
                                    </div>
                                </div>

                            </div>
                        ))}
                    </div>

                </div>
            </section>

            {/* Bottom Pink Bar */}
            <div className="w-full h-[15px] bg-[#c97b9e]" />

            <style jsx global>{`

                /* ── SECTION ── */
                .offerings-section {
                    padding: 40px 0 50px;
                    position: relative;
                    z-index: 0;
                }

                /* ── HEADING BLOCK ── */
                .offerings-heading-block {
                    margin-bottom: 50px;
                }
                .offerings-heading {
                    font-size: 42px;
                    font-weight: 700;
                    font-family: Helvetica, Arial, sans-serif;
                    margin-bottom: 12px;
                    letter-spacing: 0.02em;
                }
                .offerings-divider {
                    width: 350px;
                    max-width: 100%;
                    height: 0;
                    border: none;
                    border-top: 1px dashed #6bb4ca;
                }

                /* ── DESCRIPTION ── */
                .offerings-desc {
                    margin-bottom: 60px;
                    font-size: 18px;
                    line-height: 1.6;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                }

                /* ── CARDS GRID ── */
                .offerings-cards {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 20px;
                }

                /* ── SINGLE CARD ── */
                .offering-card {
                    position: relative;
                    overflow: hidden;
                    border-radius: 6px;
                    height: 360px;
                    background: #000;
                }

                /* ── BACKGROUND IMAGE — fully contained inside card ── */
                .offering-bg-img {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center center;
                    z-index: 1;
                }

                .offering-overlay {
                    position: absolute;
                    inset: 0;
                    z-index: 10;
                    background: linear-gradient(
                        to top,
                        rgba(0, 0, 0, 0.92) 0%,
                        rgba(0, 0, 0, 0.65) 45%,
                        rgba(0, 0, 0, 0.30) 100%
                    );
                }

                /* ── TEXT BLOCK ── */
                .offering-text {
                    position: absolute;
                    left: 28px;
                    bottom: 26px;
                    z-index: 20;
                }
                .offering-title-block {
                    margin-bottom: 12px;
                }
                .offering-bold {
                    font-size: 18px;
                    font-weight: 700;
                    font-family: Helvetica, Arial, sans-serif;
                    line-height: 1.2;
                    white-space: pre-line;
                    color: #ffffff;
                }
                .offering-regular {
                    font-size: 18px;
                    font-weight: 400;
                    font-family: Helvetica, Arial, sans-serif;
                    line-height: 1.2;
                    color: #ffffff;
                }
                .offering-arrow {
                    margin-top: 6px;
                    width: 42px;
                    height: 42px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                }

                /* ── RESPONSIVE ── */
                @media (max-width: 1024px) {
                    .offerings-cards {
                        grid-template-columns: repeat(3, 1fr);
                    }
                    .offerings-heading {
                        font-size: 36px !important;
                    }
                }

                @media (max-width: 768px) {
                    .offerings-section {
                        padding: 30px 0 40px !important;
                    }
                    .offerings-cards {
                        grid-template-columns: repeat(2, 1fr);
                        gap: 14px;
                    }
                    .offering-card {
                        height: 300px;
                    }
                    .offerings-heading {
                        font-size: 28px !important;
                        margin-bottom: 10px !important;
                    }
                    .offerings-heading-block {
                        margin-bottom: 24px !important;
                    }
                    .offerings-desc {
                        font-size: 15px !important;
                        line-height: 1.6 !important;
                        gap: 12px !important;
                        margin-bottom: 28px !important;
                        text-align: left !important;
                    }
                    .offerings-desc p {
                        text-align: left !important;
                    }
                    .offering-bold,
                    .offering-regular {
                        font-size: 16px !important;
                    }
                    .offering-text {
                        left: 18px !important;
                        bottom: 18px !important;
                    }
                    .offerings-divider {
                        width: 200px !important;
                    }
                }

                @media (max-width: 480px) {
                    .offerings-cards {
                        grid-template-columns: 1fr;
                        gap: 12px;
                    }
                    .offering-card {
                        height: 260px;
                    }
                    .offerings-heading {
                        font-size: 24px !important;
                    }
                    .offerings-desc {
                        font-size: 14px !important;
                        margin-bottom: 22px !important;
                        text-align: left !important;
                    }
                    .offerings-desc p {
                        text-align: left !important;
                    }
                    .offering-bold,
                    .offering-regular {
                        font-size: 17px !important;
                    }
                    .offerings-divider {
                        width: 160px !important;
                    }
                }
            `}</style>
        </>
    );
}