"use client";

const activities = [
    {
        id: 1,
        title: "Stackman",
        subtitle: "Game brief",
        image: "/images/activities/Stackman.jpg",
        description: "Putting together a group of wooden blocks in the shortest time possible.",
        themes: ["Dealing with ambiguity", "Process Optimization", "Strategic Thinking", "Embracing change", "Working together v/s individually"]
    },
    {
        id: 2,
        title: "Rube Chain Reaction",
        subtitle: "Game brief",
        image: "/images/activities/Rube.jpg",
        description: "Organising a set of props like Jenga blocks, toy cars, dominoes etc, in a sequence so as to create a self-sustaining machinery that can ring a bell when a butterfly effect is induced.",
        themes: ["Creativity & Innovation", "Collaborative team work", "Feedback circulation", "Thinking on your feet", "Tackling rejection"]
    },
    {
        id: 3,
        title: "Tower of Power",
        subtitle: "Game brief",
        image: "/images/activities/Tower.jpg",
        description: "Building a tall, stable tower of wooden blocks using strings and a manual crane.",
        themes: ["Collaboration & team work", "Innovative mindset", "Tackling discouraging feedback", "Significance of communication"]
    },
    {
        id: 4,
        title: "The Roller Coaster Challenge",
        subtitle: "Game brief",
        image: "/images/activities/Roller.jpg",
        description: "Creating a working roller coaster through which a with the given resources through which a cricket ball can comfortably slide through.",
        themes: ["Collaboration & team work", "Creativity", "Innovation and effective execution"]
    },
    {
        id: 5,
        title: "The Labyrinth",
        subtitle: "Game brief",
        image: "/images/activities/Labyrinth.jpg",
        description: "Finding a way through a labyrinth by way of communication and continuous feedback.",
        themes: ["Collaboration & team work", "Innovative mindset", "Tackling discouraging feedback", "Significance of communication"]
    },
    {
        id: 6,
        title: "The Domino Rally Challenge",
        subtitle: "Game brief",
        image: "/images/activities/Domino.jpg",
        description: "Arrange domino pieces in elaborate designs and patterns to trigger the butterfly effect.",
        themes: ["Clarity of thought", "Clear communication", "Focus & Strategy", "Creativity"]
    },
];

export default function TeamEngagementPage() {
    return (
        <>
            <style jsx>{`
                /* ── Content wrapper ── */
                .cw {
                    max-width: 1400px;
                    margin: 0 auto;
                    padding: 0 5.5%;
                    box-sizing: border-box;
                }
                @media (max-width: 1200px) { .cw { padding: 0 4.5%; } }
                @media (max-width: 767px)  { .cw { padding: 0 20px; } }

                /* ── Hero — position UNCHANGED: bottom -60px ── */
                .hero-section {
                    position: relative;
                    margin-top: 105px;
                    margin-bottom: 60px;
                }
                .hero-banner {
                    background: url('/clients/offering-team.jpg') center center / cover no-repeat;
                    min-height: 500px;
                    height: 60vh;
                    width: 100%;
                }
                .hero-badge {
                    position: absolute;
                    bottom: -60px;
                    left: 0;
                    right: 0;
                    z-index: 10;
                }
                .hero-badge-inner {
                    background: linear-gradient(-90deg, #b53855 0%, #62c0e2 100%);
                    padding: 45px 85px;
                    border-radius: 10px 15px 0 0;
                    display: inline-block;
                    max-width: 85%;
                }
                .hero-title {
                    color: #fff;
                    font-size: 38px;
                    font-weight: 700;
                    line-height: 1.3;
                    margin: 0;
                    font-family: Helvetica, Arial, sans-serif;
                    white-space: normal;
                    word-wrap: break-word;
                }

                /* Scale title box — bottom stays -60px on desktop/tablet */
                @media (max-width: 1024px) {
                    .hero-banner { min-height: 380px; height: 55vh; }
                    .hero-badge-inner { padding: 35px 50px; max-width: 90%; }
                    .hero-title { font-size: 30px; }
                }
                @media (max-width: 767px) {
                    .hero-section { margin-bottom: 30px; }
                    .hero-banner { min-height: 340px; height: 75vw; }
                    .hero-badge { bottom: -30px; }
                    .hero-badge-inner { padding: 22px 28px; max-width: 95%; border-radius: 8px 10px 0 0; }
                    .hero-title { font-size: 20px; }
                }
                @media (max-width: 480px) {
                    .hero-section { margin-bottom: 25px; }
                    .hero-banner { min-height: 300px; height: 78vw; }
                    .hero-badge { bottom: -25px; }
                    .hero-badge-inner { padding: 16px 20px; max-width: 96%; }
                    .hero-title { font-size: 16px; }
                }

                /* ── Tagline section ── */
                .tagline-section {
                    background: #fff;
                    padding-top: 80px;
                    padding-bottom: 60px;
                }
                @media (max-width: 1024px) { .tagline-section { padding-top: 55px; padding-bottom: 40px; } }
                @media (max-width: 767px)  { .tagline-section { padding-top: 30px; padding-bottom: 24px; } }

                .tagline-text {
                    font-size: 18px;
                    line-height: 1.8;
                    color: #5D6371;
                    font-family: Helvetica, Arial, sans-serif;
                    margin: 0;
                }
                @media (max-width: 1024px) { .tagline-text { font-size: 16px; } }
                @media (max-width: 767px)  { .tagline-text { font-size: 15px; line-height: 1.7; } }

                /* ── Activities grid ── */
                .activities-section { background: #fff; padding-bottom: 80px; }
                @media (max-width: 767px) { .activities-section { padding-bottom: 48px; } }

                .activities-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 40px;
                }
                @media (max-width: 1024px) { .activities-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
                @media (max-width: 600px)  { .activities-grid { grid-template-columns: 1fr; gap: 40px; } }

                /* ── Card text ── */
                .activity-title {
                    font-size: 25px;
                    font-weight: 700;
                    margin: 0 0 5px 0;
                    line-height: 1.2;
                    font-family: Helvetica, Arial, sans-serif;
                    color: #fff;
                }
                .activity-subtitle {
                    font-size: 18px;
                    margin: 0;
                    font-family: Helvetica, Arial, sans-serif;
                    color: #fff;
                }
                .activity-description {
                    font-size: 18px;
                    line-height: 1.8;
                    color: #5D6371;
                    margin-bottom: 27px;
                    font-family: Helvetica, Arial, sans-serif;
                }
                .themes-title {
                    font-size: 20px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 12px;
                    font-family: Helvetica, Arial, sans-serif;
                }
                .theme-item {
                    font-size: 18px;
                    line-height: 1.8;
                    color: #5D6371;
                    margin-bottom: 8px;
                    font-family: Helvetica, Arial, sans-serif;
                }

                @media (max-width: 1024px) {
                    .activity-title       { font-size: 22px; }
                    .activity-subtitle    { font-size: 16px; }
                    .activity-description { font-size: 16px; }
                    .themes-title         { font-size: 18px; }
                    .theme-item           { font-size: 16px; }
                }
                @media (max-width: 767px) {
                    .activity-title       { font-size: 20px; }
                    .activity-description { font-size: 15px; }
                    .theme-item           { font-size: 15px; }
                }

                /* hover scale */
                .img-wrap img { transition: transform 0.5s; }
                .img-wrap:hover img { transform: scale(1.1); }
            `}</style>

            <div className="min-h-screen bg-white">

                {/* ===== HERO BANNER ===== */}
                <section className="hero-section">
                    <div className="hero-banner" />
                    <div className="cw hero-badge">
                        <div className="hero-badge-inner">
                            <h1 className="hero-title">
                                Team Engagement Through<br />Experiential Learning
                            </h1>
                        </div>
                    </div>
                </section>

                {/* ===== TAGLINE SECTION ===== */}
                <section className="tagline-section">
                    <div className="cw">
                        <p className="tagline-text">
                            Activities aimed at developing collaboration and trust, strengthening the lines of communication between team members and promoting healthy competition.
                        </p>
                    </div>
                </section>

                {/* ===== ACTIVITIES GRID ===== */}
                <section className="activities-section">
                    <div className="cw">
                        <div className="activities-grid">
                            {activities.map((activity) => (
                                <div key={activity.id} style={{ display: 'flex', flexDirection: 'column' }}>
                                    {/* Image card */}
                                    <div className="img-wrap" style={{ position: 'relative', overflow: 'hidden', borderRadius: '12px', marginBottom: '25px' }}>
                                        <div style={{ position: 'relative', width: '100%', aspectRatio: '4/3' }}>
                                            <img
                                                src={activity.image}
                                                alt={activity.title}
                                                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                                            />
                                            {/* Overlay */}
                                            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%)', pointerEvents: 'none' }} />
                                            {/* Text */}
                                            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '25px' }}>
                                                <h5 className="activity-title">{activity.title}</h5>
                                                <p className="activity-subtitle"><strong>{activity.subtitle}</strong></p>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Description */}
                                    <p className="activity-description">{activity.description}</p>

                                    {/* Themes */}
                                    <div>
                                        <h4 className="themes-title">Suitable for themes like:</h4>
                                        <ul style={{ listStyleType: 'disc', paddingLeft: '20px', margin: 0 }}>
                                            {activity.themes.map((theme, index) => (
                                                <li key={index} className="theme-item">{theme}</li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* ===== FOOTER BAR ===== */}
                <div style={{ height: '15px', backgroundColor: '#CF87B0' }} />
            </div>
        </>
    );
}