"use client";

import Image from "next/image";

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

                /* ── Hero — position UNCHANGED: bottom -60px ── */
                .hero-section {
                    position: relative;
                    margin-top: 105px;
                    margin-bottom: 60px;
                }
                .hero-banner {
                    height: 60vh;
                    min-height: 500px;
                    width: 100%;
                    background: url('/clients/offering-structured.jpg') center center / cover no-repeat;
                }
                .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;
                    line-height: 1.3;
                    color: #ffffff;
                    font-family: Helvetica, Arial, sans-serif;
                    margin: 0;
                    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 ── */
                .tagline-section {
                    background: #fff;
                    padding-top: 80px;
                    padding-bottom: 20px;
                }
                @media (max-width: 1024px) { .tagline-section { padding-top: 55px; } }
                @media (max-width: 767px)  { .tagline-section { padding-top: 28px; padding-bottom: 10px; } }

                /* ── Typography ── */
                .section-title {
                    font-size: 30px;
                    font-weight: 700;
                    color: #181B31;
                    font-family: Helvetica, Arial, sans-serif;
                }
                .section-title-medium {
                    font-size: 32px;
                    font-weight: 700;
                    color: #181B31;
                    font-family: Helvetica, Arial, sans-serif;
                    margin-bottom: 10px;
                }
                .body-text {
                    font-size: 18px;
                    line-height: 1.8;
                    color: #5D6371;
                    font-family: Helvetica, Arial, sans-serif;
                }
                .body-text-list {
                    font-size: 18px;
                    line-height: 1.6;
                    color: #5D6371;
                    font-family: Helvetica, Arial, sans-serif;
                }

                @media (max-width: 1024px) {
                    .section-title        { font-size: 22px; }
                    .section-title-medium { font-size: 26px; }
                    .body-text            { font-size: 16px; }
                    .body-text-list       { font-size: 16px; }
                }
                @media (max-width: 767px) {
                    .section-title        { font-size: 18px; }
                    .section-title-medium { font-size: 20px; }
                    .body-text            { font-size: 15px; line-height: 1.7; }
                    .body-text-list       { font-size: 15px; line-height: 1.6; }
                }
                @media (max-width: 480px) {
                    .section-title        { font-size: 16px; }
                    .section-title-medium { font-size: 18px; }
                }

                /* ── Dotted divider ── */
                .dotted-divider {
                    height: 1px;
                    border-bottom: 1px dotted #f78da7;
                    margin-bottom: 30px;
                }
                @media (max-width: 767px) { .dotted-divider { margin-bottom: 20px; } }

                /* ── Content grid ── */
                .content-grid {
                    display: grid;
                    grid-template-columns: 45% 55%;
                    gap: 40px;
                    align-items: start;
                }
                @media (max-width: 1024px) { .content-grid { grid-template-columns: 1fr; gap: 28px; } }
                @media (max-width: 767px)  { .content-grid { gap: 20px; } }

                /* ── Phases grid ── */
                .phases-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 60px;
                }
                @media (max-width: 1024px) { .phases-grid { grid-template-columns: 1fr; gap: 40px; } }
                @media (max-width: 767px)  { .phases-grid { gap: 32px; } }

                .phase-title {
                    font-size: 24px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 15px;
                    white-space: pre-line;
                    font-family: Helvetica, Arial, sans-serif;
                }
                @media (max-width: 1024px) { .phase-title { font-size: 20px; } }
                @media (max-width: 767px)  { .phase-title { font-size: 18px; } }

                /* ── Section spacing ── */
                .content-section { background: #fff; padding-bottom: 50px; }
                .phases-section  { background: #fff; padding-bottom: 60px; }
                @media (max-width: 767px) {
                    .content-section { padding-bottom: 32px; }
                    .phases-section  { padding-bottom: 40px; }
                }
            `}</style>

            {/* ===== HERO BANNER ===== */}
            <section className="hero-section">
                <div className="hero-banner" />
                <div className="content-wrapper hero-badge">
                    <div className="hero-badge-inner">
                        <h1 className="hero-title">
                            Structured Leadership<br />Development Journey
                        </h1>
                    </div>
                </div>
            </section>

            {/* ===== TAGLINE SECTION ===== */}
            <section className="tagline-section">
                <div className="content-wrapper">
                    <h2 className="section-title">
                        Enabling individuals to drive success with precision, structure, and cogent science.
                    </h2>
                </div>
            </section>

            {/* ===== INTRODUCTION SECTION ===== */}
            <section className="content-section">
                <div className="content-wrapper">
                    <p className="body-text" style={{ marginBottom: '25px' }}>
                        Leadership is a journey, not a destination. A structured leadership development journey is a systematic & scientific mechanism to build the capability of leaders across a diverse realm of competencies. At NLC, our in-depth research and interaction with a multifaceted set of leaders across versatile sectors have garnered certain critical insights about adult learning:-
                    </p>

                    <ul style={{ listStyleType: 'disc', paddingLeft: '25px', marginBottom: '15px' }}>
                        {[
                            "It needs to be engaging & experiential.",
                            "Adult learners crave conceptual depth & practical applicability.",
                            "They seek frameworks & tools that can harness their experiences & wisdom.",
                            "They look for safe microcosms where they can engage in peer learning.",
                            "They prefer quest, exploration-based learning rather than preachy monologues."
                        ].map((item, i) => (
                            <li key={i} className="body-text-list" style={{ marginBottom: '8px' }}>{item}</li>
                        ))}
                    </ul>

                    <p className="body-text-list">
                        We actively deploy the above insights while designing the learning journeys.
                    </p>
                </div>
            </section>

            {/* ===== WHAT WILL IT ENTAIL SECTION ===== */}
            <section className="content-section">
                <div className="content-wrapper">
                    <div className="content-grid">
                        <Image
                            src="/clients/structured-what-entail.jpg"
                            alt="What will it entail"
                            width={450}
                            height={300}
                            style={{ borderRadius: '12px', width: '100%', height: 'auto' }}
                        />
                        <div>
                            <h2 className="section-title-medium">What will it entail?</h2>
                            <div className="dotted-divider" style={{ width: '280px', maxWidth: '100%' }} />
                            <p className="body-text" style={{ marginBottom: '15px' }}>
                                Our leadership development journeys enable & endow leaders to make learning a self-driven agenda rather than an organizational mandate. We partner with leaders to drive transformation and shifts in behaviors.
                            </p>
                            <ul style={{ listStyleType: 'disc', paddingLeft: '25px' }}>
                                {[
                                    "Providing access to global as well as indigenous case studies & references.",
                                    "Furnishing frameworks, concepts & tools that channels their native intelligence & experiences.",
                                    "Articulating behaviours that are simple to replicate on the ground & highly fungible.",
                                    "Highlighting cause & effect linkage between behaviours & outcomes.",
                                    "Sharing anecdotes, stories, and personalities that stoke ambition & incite curiosity."
                                ].map((item, i) => (
                                    <li key={i} className="body-text-list" style={{ marginBottom: '8px' }}>{item}</li>
                                ))}
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            {/* ===== WHY IS IT NECESSARY SECTION ===== */}
            <section className="content-section">
                <div className="content-wrapper">
                    <h2 className="section-title-medium">Why is it necessary?</h2>
                    <div className="dotted-divider" style={{ width: '340px', maxWidth: '100%' }} />
                    <p className="body-text" style={{ marginBottom: '15px' }}>
                        The crux and gist of the engagement are to equip leaders to
                    </p>
                    <ul style={{ listStyleType: 'disc', paddingLeft: '25px' }}>
                        {[
                            "Stay updated on the avant-garde skill sets that can impact their longterm relevance.",
                            "Leverage triggers, cues, blueprint to undertake thought experiments express them.",
                            "Engage meaningfully with their extended ecosystem to drive bigger outcomes alignment."
                        ].map((item, i) => (
                            <li key={i} className="body-text-list" style={{ marginBottom: '8px' }}>{item}</li>
                        ))}
                    </ul>
                </div>
            </section>

            {/* ===== PHASES OF DEPLOYMENT SECTION ===== */}
            <section className="phases-section">
                <div className="content-wrapper">
                    <h2 className="section-title-medium">Phases of Deployment</h2>
                    <div className="dotted-divider" style={{ width: '340px', maxWidth: '100%', marginBottom: '40px' }} />
                    <div className="phases-grid">
                        {[
                            {
                                img: "/images/icons/phase1.jpg",
                                title: "Phase 1\nContext Gathering Insights Curation",
                                desc: "Utilised to build connection, weave clarity, instill confidence, seek sponsorship & unfold advocacy with the leaders & their ecosystem about the overall process."
                            },
                            {
                                img: "/images/icons/phase2.jpg",
                                title: "Phase 2\nStaggered Solution Deployment",
                                desc: "Post curating insights from context gathering, we stagger the endeavor into different phases & sequential steps."
                            },
                            {
                                img: "/images/icons/phase3.jpg",
                                title: "Phase 3\nMeasuring Impact & Application",
                                desc: "Post deploying the solution, extensive activities are undertaken to measure the impact of learning on a leader's day-to-day working & outcomes."
                            }
                        ].map((phase, i) => (
                            <div key={i} style={{ textAlign: 'center' }}>
                                <div style={{ marginBottom: '30px', display: 'flex', justifyContent: 'center' }}>
                                    <Image src={phase.img} alt={phase.title} width={150} height={150} />
                                </div>
                                <h3 className="phase-title">{phase.title}</h3>
                                <p className="body-text">{phase.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

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