"use client";

import Link from "next/link";

const masterclasses = [
    { id: 1, title: "Communicate to Impact", subtitle: "Communication", image: "/images/masterclass/communicate.jpg", description: "Have you had a faint doubt in your heart, the moment of anxiety and fear while voicing your opinion, freezing while you're communicating?", slug: "communicate" },
    { id: 2, title: "Memorable Storytelling", subtitle: "Communication", image: "/images/masterclass/memorable.jpg", description: "Understanding the WHYs and HOWs of effective storytelling will help you to convey more meaning with fewer words – ultimately making you a better.", slug: "memorable" },
    { id: 3, title: "Communicate to Differentiate", subtitle: "Communication", image: "/images/masterclass/differentiate.jpg", description: "Have you ever wondered what it takes to make an impression on someone? Well, let me tell you a secret... that's voice modulation.", slug: "differentiate" },
    { id: 4, title: "Mastering brevity & briefness", subtitle: "Communication", image: "/images/masterclass/mastering-brevity.jpg", description: "Content is King, but conciseness is the Holy Grail. Brevity is the soul of wit. Concision is the soul of language.", slug: "mastering-brevity" },
    { id: 5, title: "Making ideas stick and tick", subtitle: "Communication", image: "/images/masterclass/making-ideas.jpg", description: "Whether you are an entrepreneur, a manager or an employee, we all need to get better at coming up with ideas.", slug: "making-ideas-stick" },
    { id: 6, title: "Structured risk-taking", subtitle: "Communication", image: "/images/masterclass/structured-risk.jpg", description: "Making informed risk-taking decisions is a complex process and all of us are risk takers in one way or the other.", slug: "structured-risk" },
    { id: 7, title: "The Discipline of Prototyping", subtitle: "Communication", image: "/images/masterclass/prototyping.jpg", description: "Have you ever wanted to get better at prototyping? Prototyping is a vital process that every organization should undergo.", slug: "prototyping" },
    { id: 8, title: "Becoming corporate ready", subtitle: "Strategy", image: "/images/masterclass/becoming-corporate.jpg", description: "What makes a Professional? Looking at the definition of 'Professional' in the Oxford & Collins Dictionary. From a layman's perspective.", slug: "becoming-corporate-ready" },
    { id: 9, title: "Discipline of Planning", subtitle: "Strategy", image: "/images/masterclass/discipline-planning.jpg", description: "Have you ever wondered how some people are able to achieve so much in their lives? It's not magic, it's the science of planning.", slug: "discipline-of-planning" },
    { id: 10, title: "Becoming an ideas Ninja", subtitle: "Creativity", image: "/images/masterclass/becoming-an-ideas.jpg", description: "Being innovative means more than coming up with great ideas, although that's a big part of it. It also means taking those great ideas.", slug: "becoming-an-ideas-ninja" },
    { id: 11, title: "Finding your inner compass", subtitle: "Creativity", image: "/images/masterclass/compass.jpg", description: "The quest for finding your passion, is a long and arduous journey with so many twists and turns, ups and downs; it's easy to lose one's way.", slug: "finding-your-inner-compass" },
    { id: 12, title: "Art of Asking Questions", subtitle: "Creativity", image: "/images/masterclass/art-of-asking.jpg", description: "Questions are like a key to unlocking new concepts, knowledge and answers that could solve problems, help you reach your goals and make better decisions.", slug: "art-of-asking-questions" },
    { id: 13, title: "Deepen Listening", subtitle: "Creativity", image: "/images/masterclass/deepen-listening.jpg", description: "Are you an entrepreneur, manager or professional who relies on your listening-sensing-observing sensibilities to be at your best?", slug: "deepen-listening" },
    { id: 14, title: "Creative & Consultative Selling", subtitle: "Creativity", image: "/images/masterclass/creative-consultative.jpg", description: "As a small entrepreneur or a startup, or even a large corporate, you're often pitched by sales professionals on how they'll be able to create possibility.", slug: "creative-consultative-selling" },
    { id: 15, title: "The art and science of crafting content", subtitle: "Communication", image: "/images/masterclass/art-and-science.jpg", description: "A lot of folks think great content could only be found via science. While the way to nurturing great content is indeed a science.", slug: "art-science-crafting-content" },
    { id: 16, title: "Shark Tank Pitches", subtitle: "Communication", image: "/images/masterclass/shark-tank.jpg", description: "As a small entrepreneur or a startup, or even a large corporate, you're often pitched by sales professionals on how they'll be able to create possibility.", slug: "shark-tank-pitches" },
    { id: 17, title: "Communicate Right- Guide to Holistic", subtitle: "Communication", image: "/images/masterclass/holistic.jpg", description: "Everybody knows that communication is very important. However, do we give the same importance to our internal act of communicating?", slug: "communicate-right-holistic" },
    { id: 18, title: "Dealing with Ambiguity", subtitle: "Strategy", image: "/images/masterclass/ambiguity.jpg", description: "As a small entrepreneur or a startup, or even a large corporate, you're often pitched by sales professionals on how they'll be able to create possibility.", slug: "dealing-with-ambiguity" },
    { id: 19, title: "Sense making amidst Chaos", subtitle: "Strategy", image: "/images/masterclass/chaos.jpg", description: "These days, it's extremely difficult to stay focused and on a mission in the face of the abundance of distractions.", slug: "sense-making-amidst-chaos" },
    { id: 20, title: "Unravelling Routine", subtitle: "Strategy", image: "/images/masterclass/unravelling.jpg", description: "It's common to hear people say to create a routine, but after you've been in the game for a while, you begin to notice it's not all that simple.", slug: "unravelling-routine" },
    { id: 21, title: "Connecting the Dots", subtitle: "Creativity", image: "/images/masterclass/connecting.jpg", description: "How to think out of the box when you are stuck with a problem and can't figure it out no matter how hard you try?", slug: "connecting-the-dots" },
    { id: 22, title: "Acing the Game of Creativity", subtitle: "Creativity", image: "/images/masterclass/acing-the-game.jpg", description: "Creativity needs a wild mind and a disciplined eye, but creativity is also about consistency, experimenting with a zillion ideas.", slug: "acing-the-game-of-creativity" },
    { id: 23, title: "Finding Your Inner Picasso", subtitle: "Creativity", image: "/images/masterclass/picasso.jpg", description: "Have you ever wondered how to bridge the wide gap between your daily work grind, responsibilities and running out of energy to be inspired?", slug: "finding-your-inner-picasso" }
];

export default function MasterclassPage() {
    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-masterclass.jpg') center 20% / cover no-repeat;
                    min-height: 500px;
                    height: 80vh;
                    width: 100%;
                }
                .hero-badge {
                    position: absolute;
                    bottom: -60px;
                    left: 0;
                    right: 0;
                    z-index: 10;
                }
                .hero-badge-inner {
                    background: linear-gradient(-90deg, #b53855, #62c0e2);
                    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 size only — bottom stays -60px on desktop */
                @media (max-width: 1024px) {
                    .hero-banner { min-height: 380px; height: 60vh; }
                    .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; }
                }

                /* ── Grid ── */
                .mc-section { background: #fff; padding-top: 50px; padding-bottom: 60px; }
                @media (max-width: 767px) { .mc-section { padding-top: 30px; padding-bottom: 40px; } }

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

                /* ── Card text ── */
                .c-title {
                    color: #fff;
                    font-size: 26px;
                    font-weight: bold;
                    line-height: 1.1;
                    margin: 0 0 5px 0;
                    font-family: Helvetica, Arial, sans-serif;
                    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
                }
                .c-subtitle {
                    color: #fff;
                    font-size: 18px;
                    font-weight: normal;
                    margin: 0;
                    font-family: Helvetica, Arial, sans-serif;
                    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
                }
                .c-desc {
                    font-size: 18px;
                    line-height: 1.6;
                    color: #5D6371;
                    margin-bottom: 20px;
                    font-family: Helvetica, Arial, sans-serif;
                }
                .c-link {
                    font-size: 18px;
                    font-weight: bold;
                    color: #b53855;
                    font-family: Helvetica, Arial, sans-serif;
                    text-decoration: none;
                    transition: color 0.2s;
                }
                .c-link:hover { color: #62c0e2; }

                @media (max-width: 1024px) {
                    .c-title    { font-size: 22px; }
                    .c-subtitle { font-size: 16px; }
                    .c-desc     { font-size: 16px; }
                    .c-link     { font-size: 16px; }
                }
                @media (max-width: 600px) {
                    .c-title { font-size: 20px; }
                    .c-desc  { font-size: 15px; }
                }

                /* hover scale helper */
                .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">Masterclass</h1>
                        </div>
                    </div>
                </section>

                {/* ===== MASTERCLASS GRID ===== */}
                <section className="mc-section">
                    <div className="cw">
                        <div className="mc-grid">
                            {masterclasses.map((mc) => (
                                <div key={mc.id} style={{ display: 'flex', flexDirection: 'column' }}>
                                    {/* Image card */}
                                    <Link href={`/offerings/masterclass/${mc.slug}`} style={{ display: 'block', textDecoration: 'none', marginBottom: '20px' }}>
                                        <div className="img-wrap" style={{ position: 'relative', overflow: 'hidden', borderRadius: '15px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
                                            <div style={{ position: 'relative', width: '100%', aspectRatio: '16/10' }}>
                                                <img
                                                    src={mc.image}
                                                    alt={mc.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.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%)', zIndex: 1, pointerEvents: 'none' }} />
                                                {/* Text */}
                                                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '25px', zIndex: 2 }}>
                                                    <h3 className="c-title">{mc.title}</h3>
                                                    <p className="c-subtitle">{mc.subtitle}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </Link>

                                    <p className="c-desc">{mc.description}</p>
                                    <Link href={`/offerings/masterclass/${mc.slug}`} className="c-link">Read More</Link>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

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