"use client";

const caseStudies = [
    { id: 1, title: "Carestream Building Executive Presence", image: "/images/case-studies/carestream.jpg", description: "Country General Manager at Carestream Health approached NLC to craft a leadership module around the realm of Executive Presence for his direct reportees.", link: "/case-studies/carestream" },
    { id: 2, title: "Famous Studios Mission-Vision-Values Articulation", image: "/images/case-studies/famous-studios.jpg", description: "Third generation entrepreneur Anant Roongta approached NLC to envision the Future 3.0 for Famous in the form of Vision-Mission-Strategic Pillars coupled with Values.", link: "/case-studies/famous-studios" },
    { id: 3, title: "Godrej – Hi-Pot Journey & Interviews", image: "/images/case-studies/godrej.jpg", description: "Division Head Mr. Sourav Dey at Godrej Retail approached NLC to create a 3 months long developmental journey to prepare their selected sales Hi-Pots for an internal promotion interview series.", link: "/case-studies/godrej" },
    { id: 4, title: "Radiometer Communicate to Differentiate", image: "/images/case-studies/radiometer.jpg", description: "General Manager (Indian Subcontinent, Distributor Markets of SEA), Mr. Smit Dave at Radiometer accosted NLC to create one of a kind development program which engages his team to communicate with impact and express their ideas more boldly.", link: "/case-studies/radiometer" },
    { id: 5, title: "upGrad – Mechanics of Communication", image: "/images/case-studies/upgrad.jpg", description: "upGrad engaged with NLC to enable and equip leaners across the world pursuing Data Science and Machine learning to abreast them with basic and advanced mechanics of communication.", link: "/case-studies/upgrad" },
    { id: 6, title: "Yotta Infrastructure – Competency Grid Curation", image: "/images/case-studies/yotta-competency.jpg", description: "After the success of the marquee project ALIGN; Yotta Infrastructure collaborated with NLC to create a contextualized and customized skillset dictionary in the form of a structured Competency Grid.", link: "/case-studies/yotta-competency" },
    { id: 7, title: "Yotta Infrastructure – Strategy Roadmap", image: "/images/case-studies/yotta-strategy.jpg", description: "Yotta Infrastructure approached NLC in Dec 2020 with a unique intent. Yotta had been in existence for 1.5 years by then and was pacing to grow aggressively.", link: "/case-studies/yotta-strategy" },
    { id: 8, title: "Yotta Infrastructure – Values Dissemination", image: "/images/case-studies/yotta-values.jpg", description: "Yotta Infrastructure approached NLC in Dec 2020 with a unique intent. Yotta had been in existence for 1.5 years by then and was poised to grow aggressively.", link: "/case-studies/yotta-values" },
    { id: 9, title: "Ericsson – Written business communication", image: "/images/case-studies/ericsson.jpg", description: "Ericsson approached NLC in Dec 2021 with a unique intent. The team deals with a variety of stakeholder groups and addresses problems of varying complexities.", link: "/case-studies/ericsson" },
    { id: 10, title: "Glenmark – Communicate to Differentiate", image: "/images/case-studies/glenmark.jpg", description: "Glenmark approached NLC in July 2021 with a unique intent. The DSMs who are a part of Glenmark family have a good track record of sales & customer relationships.", link: "/case-studies/glenmark" },
];

export default function CaseStudiesPage() {
    return (
        <>
            <style>{`
                /* ── 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/case-studyhero.jpg') center center / cover no-repeat;
                    height: 60vh;
                    min-height: 400px;
                    width: 100%;
                }
                .hero-badge {
                    position: absolute;
                    bottom: -60px;
                    left: 0;
                    right: 0;
                    z-index: 10;
                }
                .hero-badge-inner {
                    display: inline-block;
                    border-radius: 10px 15px 0 0;
                    padding: 45px 85px;
                    max-width: 85%;
                    background: linear-gradient(-90deg, #b53855 0%, #62c0e2 100%);
                }
                .hero-title {
                    font-size: 38px;
                    font-weight: 700;
                    color: #ffffff;
                    margin: 0;
                    line-height: 1.3;
                    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: 340px; 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: 300px; 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: 260px; height: 78vw; }
                    .hero-badge { bottom: -25px; }
                    .hero-badge-inner { padding: 16px 20px; max-width: 96%; }
                    .hero-title { font-size: 16px; }
                }

                /* ── Case studies grid ── */
                .cs-section { background: #fff; padding-top: 20px; padding-bottom: 80px; }
                @media (max-width: 767px) { .cs-section { padding-bottom: 48px; } }

                .cs-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 60px;
                }
                @media (max-width: 1024px) { .cs-grid { gap: 40px; } }
                @media (max-width: 767px)  { .cs-grid { grid-template-columns: 1fr; gap: 40px; } }

                /* ── Card text ── */
                .cs-card-title {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 32px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 15px;
                    line-height: 1.2;
                    min-height: 80px;
                    display: flex;
                    align-items: center;
                }
                .cs-card-desc {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    line-height: 1.6;
                    color: #626974;
                    margin-bottom: 25px;
                    flex-grow: 1;
                }
                .cs-card-btn {
                    display: inline-block;
                    border: 2px solid #181B31;
                    font-size: 18px;
                    font-weight: 700;
                    padding: 12px 30px;
                    border-radius: 5px;
                    text-decoration: none;
                    width: fit-content;
                    margin-top: auto;
                    color: #181B31;
                    background: transparent;
                    font-family: Helvetica, Arial, sans-serif;
                    transition: background 0.2s, color 0.2s;
                }
                .cs-card-btn:hover { background: #181B31; color: #ffffff; }

                @media (max-width: 1024px) {
                    .cs-card-title { font-size: 26px; min-height: unset; }
                    .cs-card-desc  { font-size: 16px; }
                    .cs-card-btn   { font-size: 16px; }
                }
                @media (max-width: 767px) {
                    .cs-card-title { font-size: 22px; }
                    .cs-card-desc  { font-size: 15px; }
                }
            `}</style>

            <div style={{ minHeight: '100vh', background: '#fff' }}>

                {/* ── HERO BANNER ── */}
                <section className="hero-section">
                    <div className="hero-banner" />
                    <div className="cw hero-badge">
                        <div className="hero-badge-inner">
                            <h1 className="hero-title">Case Studies</h1>
                        </div>
                    </div>
                </section>

                {/* ── CASE STUDIES GRID ── */}
                <section className="cs-section">
                    <div className="cw">
                        <div className="cs-grid">
                            {caseStudies.map((cs) => (
                                <div key={cs.id} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                                    {/* Image */}
                                    <div style={{ borderRadius: '15px', overflow: 'hidden', marginBottom: '25px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)', aspectRatio: '16/10' }}>
                                        <img src={cs.image} alt={cs.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                                    </div>

                                    {/* Title */}
                                    <h2 className="cs-card-title">{cs.title}</h2>

                                    {/* Divider */}
                                    <div style={{ width: '100%', borderTop: '1px dotted #CCCCCC', marginBottom: '20px' }} />

                                    {/* Description */}
                                    <p className="cs-card-desc">{cs.description}</p>

                                    {/* Button */}
                                    <a href={cs.link} className="cs-card-btn">Read More »</a>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

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