"use client";

export default function CommunicationCoachingPage() {
    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-Communication.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; } }

                /* ── Typography ── */
                .section-title {
                    font-size: 30px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 25px;
                    font-family: Helvetica, Arial, sans-serif;
                }
                .section-title-medium {
                    font-size: 32px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 10px;
                    font-family: Helvetica, Arial, sans-serif;
                }
                .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: 24px; }
                    .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: 20px; margin-bottom: 16px; }
                    .section-title-medium { font-size: 20px; }
                    .body-text            { font-size: 15px; line-height: 1.7; }
                    .body-text-list       { font-size: 15px; }
                }

                /* ── 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 (What will it entail) ── */
                .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>

            <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">Communication Coaching</h1>
                        </div>
                    </div>
                </section>

                {/* ===== TAGLINE SECTION ===== */}
                <section className="tagline-section">
                    <div className="cw">
                        <h2 className="section-title">
                            Equipping professionals with the communication dexterity required to carve out their own growth trajectory.
                        </h2>

                        <p className="body-text" style={{ marginBottom: '25px' }}>
                            Through our marquee program at NLC, we provide a staggered, structured and pragmatic approach to cultivating crucial corporate communication skills. This is done through our tried-and-tested experiential module, with emphasis on business communication and presentation skills through a blend of:
                        </p>

                        <ul style={{ listStyleType: 'disc', paddingLeft: '25px', marginBottom: '15px' }}>
                            {["In-depth masterclasses", "Action learning programs", "Industry-based case studies", "Harnessing dialogues"].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="cw">
                        <div className="content-grid">
                            <img
                                src="/images/masterclass/coaching.jpg"
                                alt="What will it entail"
                                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 inclusive, all-encompassing module on the ABC's of corporate communication comprises of the following essential concepts:
                                </p>

                                <ul style={{ listStyleType: 'disc', paddingLeft: '25px' }}>
                                    {[
                                        "Spoken Communication – the art of selling, pitching, customer engagement, presentation skills & voice modulation.",
                                        "Written Communication – email writing, report consolidation, business proposals.",
                                        "Conversational Intelligence – body language, negotiation skills and building an executive presence.",
                                        "The Art of Storytelling & Networking Etiquettes."
                                    ].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="cw">
                        <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 facilitate individuals to
                        </p>

                        <ul style={{ listStyleType: 'disc', paddingLeft: '25px' }}>
                            {[
                                "Create an impact through their words and presence and leave residue and recall in the minds of people they converse with.",
                                "Cultivate essential skills required to succeed in the sales and marketing field.",
                                "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="cw">
                        <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 & Pre-work",
                                    desc: "A session of context setting post which the participants shall be required to complete an assortment of tasks designed to trigger questions and instill a basic understanding of the agenda at hand."
                                },
                                {
                                    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, an extensive set of activities are undertaken to measure the impact of learning on a leader's day-to-day working & driving outcomes."
                                }
                            ].map((phase, i) => (
                                <div key={i} style={{ textAlign: 'center' }}>
                                    <div style={{ marginBottom: '30px', display: 'flex', justifyContent: 'center' }}>
                                        <img src={phase.img} alt={phase.title} style={{ width: '150px', height: '150px' }} />
                                    </div>
                                    <h3 className="phase-title">{phase.title}</h3>
                                    <p className="body-text">{phase.desc}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

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