"use client";

import Header from "@/components/layout/Header";

export default function AboutUs() {
  return (
    <>
      <Header />

      {/* Font Awesome CDN */}
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      />

      {/* About Us Banner */}
      <section className="about-banner-wrapper">
        <div className="about-banner"></div>
        <div className="about-banner-title-container">
          <div className="about-banner-title">
            <h1>About Us</h1>
          </div>
        </div>
      </section>

      {/* Vision & Mission Section */}
      <section className="vision-mission-section">
        <div className="content-wrapper">
          <div className="vision-mission-row">
            <div className="vision-column">
              <h2>Vision</h2>
              <div className="underline"></div>
              <p>Ignite creativity, enhance communication, and build a strategic outlook of 1 million lives by 2026</p>
            </div>
            <div className="mission-column">
              <h2>Mission</h2>
              <div className="underline"></div>
              <p>To enable leadership effectiveness of people, drive growth and deliver lasting impact by enhancing communication and providing a roadmap for leading careers.</p>
            </div>
          </div>
        </div>
      </section>

      {/* What We Believe Section */}
      <section className="believe-section">
        <div className="pink-line-decorator"></div>
        <div className="content-wrapper">
          <h3 className="section-title">What we believe in</h3>

          <p className="believe-intro">
            <strong>Learning = Leading</strong><br />
            Learning sits at the heart of leadership. Here, we are not only referring to the classroom or textbook-based learning, but we are also alluding to –
          </p>

          <ul className="believe-list">
            <li>Being observant about life experiences and processing lessons from it.</li>
            <li>Absorbing successes, failures, experiments, and goof-ups of life & forming a point of view.</li>
            <li>Being an active novice when it comes to learning from people around you.</li>
            <li>Instilling an inner compass to think and dream big and nurture bold ambition.</li>
            <li>Being at ease with initial hiccups, awkward moments when entering an unfamiliar terrain or learning a new skill.</li>
          </ul>

          <p className="believe-text">
            The most important of them all is the fact that you are undertaking all the above five components in a playful manner.
          </p>

          <p className="believe-text">
            The critical aspect of leadership development is to learn like a perpetual apprentice, consistently absorbing cues from the environment, experimenting with those cues, and forming a point of view.
          </p>

          <p className="believe-text">
            We at NLC believe that if we can stoke three aspects in people, we can unlock their leadership potential. Those three nuances are: –
          </p>

          <div className="aspects">
            <p><strong>1. Ambition</strong></p>
            <p><strong>2. Learning Orientation</strong></p>
            <p><strong>3. Structure to reach their ambition through learning & tough or unfamiliar situations.</strong></p>
          </div>

          <p className="believe-text">
            What we firmly believe and vouch is the fact that if we make this process playful rather than pensive and serious, the impact of leadership development is more sustainable and long-lasting.
          </p>

          <p className="believe-text">
            We combine our prowess of conceptual depth and engaging with leaders along with our expertise in crafting clutter-breaking exercises (virtual and face to face) to create appealing leadership development endeavors and talent management solutions that deliver visible business impact.
          </p>

          <p className="highlight-text">
            <strong>At NLC we aspire to make leadership wisdom go viral.</strong>
          </p>
        </div>
        <div className="pink-line-decorator"></div>
      </section>

      {/* How Did Nyra Come Into Existence */}
      <section className="founder-existence-section">
        <div className="content-wrapper">
          <div className="founder-row">
            <div className="founder-text">
              <h2 className="section-title-dark">How did Nyra come into existence?</h2>

              <p>
                After over a decade of experience & exposure in the sphere of leadership development and talent management, Founder Ridima Wali started Nyra Leadership Consulting – a boutique firm that specializes in leadership development and talent management in 2020.
              </p>

              <p>
                It was started based on her interactions with more than 5500 leaders across different realms like Technology, Big 4, Retail, Manufacturing, Pharmaceutical, and Service industries to name a few.
              </p>
            </div>

            <div className="founder-image-wrap">
              <img src="/images/ridima-wali.jpg" alt="Ridima Wali" />
            </div>
          </div>
        </div>
      </section>

      {/* Three Key Focus Areas */}
      <section className="focus-areas-section">
        <div className="content-wrapper">
          <p className="intro-text">
            Armed with her observations and insights, she & her team conducted an exclusive and extensive research with over 500 leaders from multifaceted contexts.
          </p>

          <p className="intro-text">
            The objective of this research had been to understand the mission-critical skills of tomorrow on which businesses would like to invest and take a bet to ascertain their relevance in the long run.
          </p>

          <p className="intro-text">
            The most intriguing insights & findings from this research project were almost a unanimous and intense nod of the leaders participating in this project for their employees and teams to get visibly better at three components which are:
          </p>

          <div className="focus-areas-grid">
            <div className="focus-area-card">
              <div className="focus-image">
                <img src="/images/communication.jpg" alt="Communication" />
              </div>
              <div className="focus-content">
                <h3>Communication</h3>
                <div className="title-underline"></div>
                <p>
                  It connotes the ability of team members to express themselves with clarity, conviction, and confidence to build visibility, draw attention, and network effectively.
                </p>
                <p className="quote">
                  One of the most strongly articulated verbatims was, <strong>"No longer, this attitude that 'My work will speak for me' will be relevant. Team members who work well and are able to explain their body of work to a large audience will win".</strong>
                </p>
              </div>
            </div>

            <div className="focus-area-card">
              <div className="focus-content">
                <h3>Creativity</h3>
                <div className="title-underline"></div>
                <p>
                  It alludes to the orientation to think differently and do different things in a constrained free manner with a sense of discipline and consistency. It refers to the prowess of experimentation to either improve an existing set of processes or disrupt it completely or create something totally new.
                </p>
                <p className="quote">
                  One of the most repetitive articulated verbatims was, <strong>"Team members will need to build the comfort around newer ways of doing & delivering things because if COVID has done something, it has disrupted the traditional ways of doing business. Your ability to deliver your work creatively will become your greatest competitive advantage."</strong>
                </p>
              </div>
              <div className="focus-image">
                <img src="/images/creativity.jpg" alt="Creativity" />
              </div>
            </div>

            <div className="focus-area-card">
              <div className="focus-image">
                <img src="/images/strategic-thinking.jpg" alt="Strategic Thinking" />
              </div>
              <div className="focus-content">
                <h3>Strategic Thinking</h3>
                <div className="title-underline"></div>
                <p>
                  It implies building, sharpening, and amplifying the spirit of thinking futuristically. It insinuates the orientation for people to plan their careers, maneuver their roles, and lead their businesses, with one eye on the future and in a deliberate manner.
                </p>
                <p className="quote">
                  One of the most prevalent verbatims was, <strong>"In the new world, career progression will no longer be a shared responsibility between organizations and employees."</strong>
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Why Engage With Us */}
      <section className="engage-section">
        <div className="content-wrapper">
          <h2 className="section-title-dark">Why engage with us</h2>

          <div className="engage-grid">
            <div className="engage-card">
              <div className="engage-icon">
                <i className="fas fa-sync-alt"></i>
              </div>
              <p>Collaborate with the client for Problem Discovery</p>
            </div>

            <div className="engage-card">
              <div className="engage-icon">
                <i className="fas fa-key"></i>
              </div>
              <p>Turn-key solution providers</p>
            </div>

            <div className="engage-card">
              <div className="engage-icon">
                <i className="fas fa-chart-line"></i>
              </div>
              <p>Post-program engagement for adopting actionable behaviors</p>
            </div>

            <div className="engage-card">
              <div className="engage-icon">
                <i className="fas fa-bullseye"></i>
              </div>
              <p>Customise Personalise Individualise our diverse portfolio</p>
            </div>

            <div className="engage-card">
              <div className="engage-icon">
                <i className="fas fa-star"></i>
              </div>
              <p>Empathy, Expertise, and Experience to simplify complexities</p>
            </div>

            <div className="engage-card">
              <div className="engage-icon">
                <i className="fas fa-comments"></i>
              </div>
              <p>Practical, relevant, and original content delivered through reflective facilitation</p>
            </div>
          </div>
        </div>
      </section>

      {/* Milestone Timeline */}
      <section className="milestone-section">
        <div className="content-wrapper">
          <h2 className="section-title-dark">Milestone Roadmap 2022</h2>

          <div className="milestone-grid">
            <div className="milestone-card">
              <div className="milestone-date">Sep 2020</div>
              <p className="milestone-description">Nyra Leadership Consulting</p>
            </div>

            <div className="milestone-card">
              <div className="milestone-date">Sep Oct Nov 2020</div>
              <p className="milestone-description">Launched Marquee Endeavor Communicate Right with clients like Deloitte, Mahindra, ONGC as participants.</p>
            </div>

            <div className="milestone-card">
              <div className="milestone-date">Dec 2020</div>
              <p className="milestone-description">Bagged a full-fledged project with data center YOTTA for their value proliferation, strategy road map curation called PROJECT ALIGN</p>
            </div>

            <div className="milestone-card">
              <div className="milestone-date">June-Jul-August 2021</div>
              <p className="milestone-description">Project delivery for above-stated clients</p>
            </div>

            <div className="milestone-card">
              <div className="milestone-date">Aug 2021</div>
              <p className="milestone-description">Secured project with Carestream for their top leaders on the topic of Executive Presence</p>
            </div>

            <div className="milestone-card">
              <div className="milestone-date">Sep 2021</div>
              <p className="milestone-description">Picked by Glenmark for a unique leadership development program their field force called Elite Cafe</p>
            </div>
          </div>
        </div>
      </section>



      <style jsx>{`
        /* ===================================
           CONTENT WRAPPER - MATCHES HEADER EXACTLY
           =================================== */
        .content-wrapper {
          max-width: 1400px;
          margin: 0 auto;
          padding: 0 5.5%;
          box-sizing: border-box;
        }

        /* ===================================
           ABOUT BANNER
           =================================== */
        .about-banner-wrapper {
          margin-top: 105px;
          margin-bottom: 60px;
          position: relative;
        }

        .about-banner {
          background: url('/images/about-header.jpg') center center / cover no-repeat;
          min-height: 500px;
          height: 60vh;
          max-height: 650px;
          width: 100%;
        }

        .about-banner-title-container {
          max-width: 1400px;
          margin: 0 auto;
          padding: 0 5.5%;
          position: absolute;
          bottom: -60px;
          left: 0;
          right: 0;
          z-index: 10;
        }

        .about-banner-title {
          background: linear-gradient(-90deg, #b53855 0%, #62c0e2 100%);
          padding: 45px 85px;
          border-top-right-radius: 10px;
          border-top-left-radius: 15px;
          display: inline-block;
        }

        .about-banner-title h1 {
          font-size: 38px;
          font-weight: 700;
          margin: 0;
          font-family: Helvetica, Arial, sans-serif;
          color: #FFFFFF;
        }

        /* ===================================
           VISION & MISSION SECTION
           =================================== */
        .vision-mission-section {
          padding: 40px 0 0;
          background: #fff;
          overflow: hidden;
          margin-top: -40px;
        }

        .vision-mission-row {
          display: flex;
          margin: 0;
        }

        .vision-column {
          flex: 0 0 50%;
          max-width: 50%;
          padding: 40px 20px 40px 0;
          box-sizing: border-box;
        }

        .mission-column {
          flex: 0 0 50%;
          max-width: 50%;
          padding: 40px 0 40px 20px;
          box-sizing: border-box;
        }

        .vision-column h2,
        .mission-column h2 {
          font-size: 28px;
          color: #181B31;
          margin-bottom: 15px;
          font-family: Helvetica, Arial, sans-serif;
          font-weight: 600;
        }

        .underline {
          width: 60px;
          height: 0;
          border: none;
          border-bottom: 2px dotted #cf87b0;
          margin-bottom: 20px;
          display: block;
        }

        .vision-column p,
        .mission-column p {
          font-size: 18px;
          color: #5D6371;
          line-height: 1.7;
          font-family: Helvetica, Arial, sans-serif;
          letter-spacing: 0.01em;
          margin: 0;
          word-wrap: break-word;
          overflow-wrap: break-word;
        }

        /* ===================================
           WHAT WE BELIEVE SECTION
           =================================== */
        .believe-section {
          background: linear-gradient(134deg, #0a587b 0%, #05729a 100%);
          color: white;
          position: relative;
          padding: 50px 0 40px;
          margin-top: 0;
          overflow: hidden;
        }

        .pink-line-decorator {
          width: 100%;
          height: 15px;
          background: #cf87b0;
        }

        .believe-section .pink-line-decorator:first-child {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
        }

        .believe-section .pink-line-decorator:last-child {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
        }

        .section-title {
          font-size: 32px;
          font-weight: 700;
          margin-bottom: 25px;
          text-transform: none;
          color: #FFFFFF;
          font-family: Helvetica, Arial, sans-serif;
          letter-spacing: 1px;
          padding-bottom: 15px;
          border-bottom: 2px dotted #FFFFFF;
          display: inline-block;
        }

        .believe-intro {
          margin-top: 35px;
          margin-bottom: 0;
          line-height: 1.7;
          font-size: 18px;
          font-family: Helvetica, Arial, sans-serif;
          letter-spacing: 0.01em;
          color: #FFFFFF;
          font-weight: 400;
          word-wrap: break-word;
          overflow-wrap: break-word;
        }

        .believe-intro strong {
          font-size: 20px;
          font-weight: 400;
          display: block;
          margin-bottom: 0;
        }

        .believe-intro br {
          display: block;
        }

        .believe-text {
          margin-bottom: 0;
          margin-top: 20px;
          line-height: 1.7;
          font-size: 18px;
          font-family: Helvetica, Arial, sans-serif;
          letter-spacing: 0.01em;
          color: #FFFFFF;
          font-weight: 400;
          word-wrap: break-word;
          overflow-wrap: break-word;
        }

        .believe-list {
          list-style-type: disc;
          list-style-position: outside;
          margin-left: 30px;
          margin-bottom: 0;
          margin-top: 15px;
          line-height: 1.7;
          padding-left: 0;
          padding-top: 0;
        }

        .believe-list li {
          margin-bottom: 10px;
          margin-top: 0;
          font-family: Helvetica, Arial, sans-serif;
          letter-spacing: 0.01em;
          font-size: 18px;
          color: #FFFFFF;
          font-weight: 400;
          word-wrap: break-word;
          overflow-wrap: break-word;
        }

        .believe-list li:last-child {
          margin-bottom: 0;
        }

        .aspects {
          margin: 30px 0;
          margin-bottom: 35px;
        }

        .aspects p {
          margin-bottom: 8px;
          font-size: 18px;
          font-family: Helvetica, Arial, sans-serif;
          color: #FFFFFF;
          font-weight: 700;
        }

        .highlight-text {
          font-size: 18px;
          margin-top: 35px;
          font-family: Helvetica, Arial, sans-serif;
          color: #FFFFFF;
          font-weight: 700;
        }

        /* ===================================
           FOUNDER SECTION
           =================================== */
        .founder-existence-section {
          background: #ffffff;
          padding: 80px 0;
          position: relative;
        }

        .founder-existence-section::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 15px;
          background: #62c0e2;
        }

        .section-title-dark {
          font-size: 34px;
          font-weight: 700;
          margin-bottom: 50px;
          margin-top: 0;
          text-transform: none;
          color: #181b31;
          font-family: Helvetica, Arial, sans-serif;
          line-height: 1.2em;
          padding-bottom: 15px;
          border-bottom: 2px dotted #62c0e2;
          display: inline-block;
          width: auto;
        }

        .founder-row {
          display: flex;
          align-items: flex-start;
          margin-top: 0;
          gap: 80px;
        }

        .founder-text {
          flex: 0 0 55%;
          max-width: 55%;
          padding-left: 0;
        }

        .founder-text p {
          line-height: 1.8;
          margin-bottom: 30px;
          color: #626974;
          font-family: Helvetica, Arial, sans-serif;
          font-size: 18px;
          letter-spacing: 0.01em;
        }

        .founder-text p:last-child {
          margin-bottom: 0;
        }

        .founder-image-wrap {
          flex: 0 0 45%;
          max-width: 45%;
          display: flex;
          justify-content: flex-end;
          padding-right: 40px;
        }

        .founder-image-wrap img {
          width: 100%;
          max-width: 380px;
          height: auto;
          display: block;
        }

        /* ===================================
           FOCUS AREAS SECTION
           =================================== */
        .focus-areas-section {
          background: #fff;
          padding: 20px 0 40px;
          position: relative;
        }

        .intro-text {
          line-height: 1.8;
          margin-bottom: 25px;
          margin-top: 0;
          color: #5d6371;
          font-family: Helvetica, Arial, sans-serif;
          font-size: 18px;
          letter-spacing: 0.01em;
        }

        .intro-text:first-child {
          margin-top: 20px;
        }

        .intro-text:last-of-type {
          padding-bottom: 30px;
          margin-bottom: 40px;
          position: relative;
        }

        .intro-text:last-of-type::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 1px;
          background-image: linear-gradient(to right, #b8dff0 40%, transparent 40%);
          background-size: 8px 1px;
          background-repeat: repeat-x;
        }

        .focus-areas-grid {
          display: flex;
          flex-direction: column;
          gap: 0;
          margin-top: 0;
        }

        .focus-area-card {
          display: flex;
          align-items: center;
          gap: 60px;
          background: transparent;
          border: none;
          border-radius: 0;
          padding: 60px 0;
          border-bottom: 2px dotted #b8dff0;
        }

        .focus-area-card:first-child {
          padding-top: 0;
        }

        .focus-area-card:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }

        .focus-area-card:hover {
          transform: none;
          box-shadow: none;
        }

        .focus-area-card-reverse {
          flex-direction: row-reverse;
        }

        .focus-image {
          width: 35%;
          height: auto;
          overflow: hidden;
          border-radius: 10px;
          flex-shrink: 0;
        }

        .focus-image img {
          width: 100%;
          height: 315px;
          object-fit: cover;
          display: block;
          border-radius: 12px;
        }

        .focus-content {
          width: 65%;
          padding: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .focus-content h3 {
          font-size: 32px;
          color: #181b31;
          margin-bottom: 15px;
          font-family: Helvetica, Arial, sans-serif;
          font-weight: 700;
        }

        .title-underline {
          width: 60px;
          height: 0;
          border-bottom: 2px dotted #b8dff0;
          margin-bottom: 25px;
        }

        .focus-content p {
          line-height: 1.8;
          color: #5d6371;
          margin-bottom: 27px;
          font-family: Helvetica, Arial, sans-serif;
          font-size: 18px;
        }

        .focus-content p:last-child {
          margin-bottom: 0;
        }

        .quote {
          font-style: normal;
          color: #626974;
          margin-top: 25px;
          font-weight: 700;
        }

        /* ===================================
           ENGAGE SECTION
           =================================== */
        .engage-section {
          background: #fff;
          padding: 80px 0;
          position: relative;
        }

        .engage-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 15px;
          background: #62c0e2;
        }

        .engage-section::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 15px;
          background: #cf87b0;
        }

        .engage-section .section-title-dark {
          font-size: 30px;
          font-weight: 700;
          color: #181b31;
          margin-bottom: 0;
          text-transform: none;
          font-family: Helvetica, Arial, sans-serif;
          line-height: 1.2em;
          border-bottom: 2px dotted #e6a5c5;
          display: inline-block;
          padding-bottom: 10px;
          margin-bottom: 60px;
        }

        .engage-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 60px 40px;
          margin-top: 0;
        }

        .engage-card {
          display: flex;
          align-items: center;
          gap: 20px;
          background: transparent;
          padding: 0;
          border-radius: 0;
          text-align: left;
          transition: none;
        }

        .engage-card:hover {
          transform: none;
          box-shadow: none;
        }

        .engage-icon {
          width: 80px;
          height: 80px;
          min-width: 80px;
          background: #0f1b43;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: rotate(45deg);
          border-radius: 15px;
          flex-shrink: 0;
        }

        .engage-icon i {
          transform: rotate(-45deg);
          font-size: 40px;
          background: linear-gradient(135deg, #bc0b86 0%, #6a5acd 50%, #4169e1 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .engage-card p {
          line-height: 1.7;
          color: #5d6371;
          font-family: Helvetica, Arial, sans-serif;
          font-size: 18px;
          margin: 0;
          flex: 1;
        }

        /* ===================================
           MILESTONE SECTION
           =================================== */
        .milestone-section {
          background: #f7f7f7;
          padding: 80px 0;
          position: relative;
        }

        .milestone-section .section-title-dark {
          margin-bottom: 0;
        }

        .milestone-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 60px 40px;
          margin-top: 60px;
          position: relative;
        }

        .milestone-grid::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          height: 1px;
          background: linear-gradient(to right, #e6a5c5 40%, transparent 40%);
          background-size: 6px 1px;
          background-repeat: repeat-x;
          z-index: 1;
        }

        .milestone-card {
          background: #fff;
          padding: 40px 30px;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          border-bottom: 3px solid #cf87b0;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          position: relative;
          z-index: 2;
        }

        .milestone-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        .milestone-date {
          font-size: 18px;
          color: #cf87b0;
          font-weight: 700;
          margin-bottom: 20px;
          font-family: Helvetica, Arial, sans-serif;
          line-height: 1.4;
        }

        .milestone-description {
          line-height: 1.7;
          color: #5d6371;
          font-family: Helvetica, Arial, sans-serif;
          font-size: 18px;
          margin: 0;
        }

        /* ===================================
           RESPONSIVE DESIGN
           =================================== */
        
        @media (max-width: 1200px) {
          .content-wrapper {
            padding: 0 4.5%;
          }

          .about-banner-title-container {
            padding: 0 4.5%;
          }
        }

        @media (max-width: 767px) {
          .content-wrapper {
            padding: 0 25px;
          }

          .about-banner-wrapper {
            margin-top: 70px;
            margin-bottom: 40px;
          }

          .about-banner {
            min-height: 350px;
            height: 45vh;
          }

          .about-banner-title-container {
            padding: 0 25px;
            bottom: -40px;
          }

          .about-banner-title {
            padding: 23px 15px;
          }

          .about-banner-title h1 {
            font-size: 22px;
          }

          .vision-mission-row {
            flex-direction: column;
          }

          .vision-column,
          .mission-column {
            flex: 0 0 100%;
            max-width: 100%;
            padding: 30px 0;
          }

          .founder-row {
            flex-direction: column;
            gap: 30px;
          }

          .founder-text {
            flex: 0 0 100%;
            max-width: 100%;
          }

          .founder-image-wrap {
            flex: 0 0 100%;
            max-width: 100%;
            justify-content: flex-start;
          }

          .focus-area-card,
          .focus-area-card-reverse {
            flex-direction: column;
            gap: 30px;
          }

          .focus-image,
          .focus-content {
            width: 100%;
          }

          .engage-grid {
            grid-template-columns: 1fr;
          }

          .milestone-grid {
            grid-template-columns: 1fr;
          }
        }
      `}</style>
    </>
  );
}