"use client";

import Link from 'next/link';
import Image from 'next/image';
const offerings = [
    {
        id: 1,
        title: 'Structured Leadership Development Journey',
        image: '/clients/offering-structured.jpg',
        href: '/offerings/structured-leadership',
    },
    {
        id: 2,
        title: 'Team Engagement Through Experiential Learning',
        image: '/clients/offering-team.jpg',
        href: '/offerings/team-engagement',
    },
    {
        id: 3,
        title: 'Communication Coaching',
        image: '/clients/offering-Communication.jpg',
        href: '/offerings/communication-coaching',
    },
    {
        id: 4,
        title: 'Masterclass',
        image: '/clients/offering-masterclass.jpg',
        href: '/offerings/masterclass',
    },
];

export default function OfferingsPage() {
    return (
        <>
            <div className="min-h-screen bg-white">
                {/* ===== HERO BANNER ===== */}
                <section className="relative" style={{ marginTop: '105px', marginBottom: '60px' }}>
                    {/* Hero Background */}
                    <div
                        style={{
                            background: "url('/clients/our-offerings.jpg') center 20% / cover no-repeat",
                            minHeight: '500px',
                            height: '80vh',
                            width: '100%'
                        }}
                    />

                    {/* Title Badge - BOTTOM OVERLAP */}
                    <div style={{
                        maxWidth: '1400px',
                        margin: '0 auto',
                        padding: '0 5.5%',
                        position: 'absolute',
                        bottom: '-60px',
                        left: 0,
                        right: 0,
                        zIndex: 10
                    }}>
                        <div
                            style={{
                                background: 'linear-gradient(-90deg, #b53855, #62c0e2)',
                                padding: '45px 85px',
                                borderRadius: '10px 15px 0 0',
                                display: 'inline-block'
                            }}
                        >
                            <h1
                                style={{
                                    color: '#fff',
                                    fontSize: '38px',
                                    fontWeight: 700,
                                    margin: 0,
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    lineHeight: 1
                                }}
                            >
                                Offerings
                            </h1>
                        </div>
                    </div>
                </section>

                {/* ===== CARDS SECTION ===== */}
                <section className="bg-white pt-[50px] pb-[15px]">
                    <div className="max-w-[1400px] mx-auto px-[5.5%]">
                        {/* Grid */}
                        <div className="grid grid-cols-3 gap-[30px]">
                            {offerings.map((offering) => (
                                <Link
                                    key={offering.id}
                                    href={offering.href}
                                    className="group relative block overflow-hidden rounded-[12px] shadow-[0_4px_15px_rgba(0,0,0,0.1)] transition-all duration-300 hover:shadow-[0_8px_25px_rgba(0,0,0,0.15)] hover:-translate-y-1 no-underline"
                                >
                                    {/* Card Container with fixed aspect ratio */}
                                    <div className="relative w-full aspect-[4/3] overflow-hidden flex flex-col justify-end">
                                        {/* Background Image */}
                                        <Image
                                            src={offering.image}
                                            alt={offering.title}
                                            fill
                                            sizes="(max-width: 1200px) 50vw, 33vw"
                                            className="object-cover transition-transform duration-500 group-hover:scale-110"
                                            priority={offering.id <= 3}
                                        />

                                        {/* Dark Gradient Overlay */}
                                        <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent pointer-events-none" />

                                        {/* Text Content - Positioned at bottom */}
                                        <div className="relative z-10 p-[30px]">
                                            <h3
                                                className="text-[20px] font-bold leading-[1.2] m-0 font-[Helvetica,Arial,sans-serif]"
                                                style={{ color: '#FFFFFF' }}
                                            >
                                                {offering.title}
                                            </h3>
                                        </div>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    </div>
                </section>

                {/* ===== FOOTER BAR ===== */}
                <div className="h-[15px]" style={{ backgroundColor: '#CF87B0' }} />
            </div>

            <style jsx>{`
                @media (max-width: 1200px) {
                    .grid {
                        grid-template-columns: repeat(2, 1fr) !important;
                        gap: 25px !important;
                    }
                }

                @media (max-width: 767px) {
                    section[style*="marginTop: '105px'"] {
                        margin-top: 70px !important;
                        margin-bottom: 40px !important;
                    }
                    
                    div[style*="minHeight: '500px'"] {
                        min-height: 300px !important;
                        height: 40vh !important;
                    }
                    
                    div[style*="bottom: '-60px'"] {
                        bottom: -40px !important;
                        padding: 0 25px !important;
                    }
                    
                    div[style*="padding: '45px 85px'"] {
                        padding: 23px 15px !important;
                    }
                    
                    h1[style*="fontSize: '38px'"] {
                        font-size: 22px !important;
                    }
                    
                    section[class*="pt-[50px]"] {
                        padding-top: 60px !important;
                    }
                    
                    div[style*="maxWidth: '1400px'"]:not([style*="position: 'absolute'"]) {
                        padding: 0 25px !important;
                    }
                    
                    .grid {
                        grid-template-columns: 1fr !important;
                        gap: 20px !important;
                    }
                }
            `}</style>
        </>
    );
}