{% extends "layouts/base.html" %}

{% block title %}
Work With CodNesta
{% endblock %}

{% block meta_description %}
Work with CodNesta through partnerships, volunteering, sponsorship,
institutional collaboration, program hosting and project support.
{% endblock %}

{% block extra_css %}

<link
    rel="icon"
    type="image/png"
    href="{{ url_for('static', filename='images/favicon1.png') }}"
>

<link
    rel="stylesheet"
    href="{{ url_for('static', filename='css/pages/work_with_us.css') }}"
>

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
>

{% endblock %}


{% block content %}

<main class="work-page">

    <!-- =====================================================
         SHARED PAGE HERO
         Styled by hero.css
    ====================================================== -->
    <section class="page-hero page-hero--work-with-us">

        <div class="container page-hero__container">

            <div class="page-hero__content reveal reveal--up">

                <span class="section-label">
                    Work With CodNesta
                </span>

                <h1 class="page-hero__title">
                    Let’s Build Meaningful
                    <span>Solutions Together.</span>
                </h1>

                <p class="page-hero__description">
                    Partner, volunteer, sponsor, collaborate or support a
                    CodNesta initiative designed to create practical and
                    lasting value.
                </p>

                <div class="page-hero__actions">

                    <a
                        href="#collaboration-paths"
                        class="button button--primary"
                    >
                        Choose a Path
                    </a>

                    <a
                        href="#collaboration-form"
                        class="button button--secondary"
                    >
                        Submit a Request
                    </a>

                </div>

            </div>

            <div
                class="page-hero__background-word"
                aria-hidden="true"
            >
                Collaborate
            </div>

        </div>

    </section>


    <!-- =====================================================
         PAGE INTRODUCTION
    ====================================================== -->
    <section class="work-section">

        <div class="container">

            <div class="work-intro">

                <div class="work-intro__content reveal reveal--right">

                    <span class="work-eyebrow">
                        Shared Purpose
                    </span>

                    <h2 class="work-title">
                        Strong collaborations begin with
                        <span>clear purpose.</span>
                    </h2>

                    <p class="work-description">
                        CodNesta works with individuals, companies,
                        institutions and organisations that believe in
                        practical technology, skills development, innovation
                        and sustainable community impact.
                    </p>

                    <p class="work-description">
                        Every collaboration should have a clear objective,
                        defined responsibilities and measurable value for the
                        people or organisations involved.
                    </p>

                </div>


                <div class="work-intro__values">

                    <article class="work-value reveal reveal--up reveal-delay-1">

                        <span class="work-value__number">
                            01
                        </span>

                        <div>
                            <h3 class="work-value__title">
                                Clear Purpose
                            </h3>

                            <p class="work-value__description">
                                We begin by understanding the problem, goal and
                                intended outcome.
                            </p>
                        </div>

                    </article>


                    <article class="work-value reveal reveal--up reveal-delay-2">

                        <span class="work-value__number">
                            02
                        </span>

                        <div>
                            <h3 class="work-value__title">
                                Shared Responsibility
                            </h3>

                            <p class="work-value__description">
                                Roles, expectations and contributions should be
                                understood by everyone involved.
                            </p>
                        </div>

                    </article>


                    <article class="work-value reveal reveal--up reveal-delay-3">

                        <span class="work-value__number">
                            03
                        </span>

                        <div>
                            <h3 class="work-value__title">
                                Practical Results
                            </h3>

                            <p class="work-value__description">
                                We focus on collaborations that lead to visible,
                                useful and sustainable outcomes.
                            </p>
                        </div>

                    </article>

                </div>

            </div>

        </div>

    </section>


    <!-- =====================================================
         COLLABORATION PATHS
    ====================================================== -->
    <section
        class="work-section work-section--soft"
        id="collaboration-paths"
    >

        <div class="container">

            <header class="work-heading reveal reveal--up">

                <span class="work-eyebrow">
                    Ways to Work With Us
                </span>

                <h2 class="work-title">
                    Choose the collaboration path that
                    <span>best fits your goal.</span>
                </h2>

                <p class="work-description">
                    Select the most appropriate option below and use the central
                    form to tell us more about your proposed contribution or
                    request.
                </p>

            </header>


            <div class="work-grid work-grid--three">

                <article class="work-card reveal reveal--up reveal-delay-1">

                    <div class="work-card__icon">
                        <i class="fa-solid fa-handshake"></i>
                    </div>

                    <span class="work-badge">
                        Partnership
                    </span>

                    <h3 class="work-card__title">
                        Become a Partner
                    </h3>

                    <p class="work-card__description">
                        Build a structured relationship with CodNesta around
                        shared programs, services, innovation or community
                        development goals.
                    </p>

                    <a
                        href="#collaboration-form"
                        class="work-card__link"
                    >
                        Start a Partnership Request
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>

                </article>


                <article class="work-card reveal reveal--up reveal-delay-2">

                    <div class="work-card__icon">
                        <i class="fa-solid fa-people-group"></i>
                    </div>

                    <span class="work-badge">
                        Volunteering
                    </span>

                    <h3 class="work-card__title">
                        Volunteer With CodNesta
                    </h3>

                    <p class="work-card__description">
                        Contribute your time, technical knowledge, professional
                        experience or creative skills to selected CodNesta
                        activities.
                    </p>

                    <a
                        href="#collaboration-form"
                        class="work-card__link"
                    >
                        Submit Volunteer Interest
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>

                </article>


                <article class="work-card reveal reveal--up reveal-delay-3">

                    <div class="work-card__icon">
                        <i class="fa-solid fa-circle-dollar-to-slot"></i>
                    </div>

                    <span class="work-badge">
                        Sponsorship
                    </span>

                    <h3 class="work-card__title">
                        Sponsor a Program
                    </h3>

                    <p class="work-card__description">
                        Support training, workshops, technology access,
                        community initiatives or learner participation through
                        financial or material sponsorship.
                    </p>

                    <a
                        href="#collaboration-form"
                        class="work-card__link"
                    >
                        Discuss Sponsorship
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>

                </article>


                <article class="work-card reveal reveal--up reveal-delay-1">

                    <div class="work-card__icon">
                        <i class="fa-solid fa-diagram-project"></i>
                    </div>

                    <span class="work-badge">
                        Project Collaboration
                    </span>

                    <h3 class="work-card__title">
                        Collaborate on a Project
                    </h3>

                    <p class="work-card__description">
                        Work with CodNesta to explore, design, build, test or
                        improve a practical technology or community solution.
                    </p>

                    <a
                        href="#collaboration-form"
                        class="work-card__link"
                    >
                        Propose a Project
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>

                </article>


                <article class="work-card reveal reveal--up reveal-delay-2">

                    <div class="work-card__icon">
                        <i class="fa-solid fa-building-columns"></i>
                    </div>

                    <span class="work-badge">
                        Program Hosting
                    </span>

                    <h3 class="work-card__title">
                        Host a CodNesta Program
                    </h3>

                    <p class="work-card__description">
                        Invite CodNesta to deliver a workshop, bootcamp,
                        technology session or special learning program for your
                        community or institution.
                    </p>

                    <a
                        href="#collaboration-form"
                        class="work-card__link"
                    >
                        Request a Program
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>

                </article>


                <article class="work-card reveal reveal--up reveal-delay-3">

                    <div class="work-card__icon">
                        <i class="fa-solid fa-landmark"></i>
                    </div>

                    <span class="work-badge">
                        Institutional Support
                    </span>

                    <h3 class="work-card__title">
                        Request Institutional Support
                    </h3>

                    <p class="work-card__description">
                        Discuss digital support, capacity building, technology
                        guidance or a structured institutional engagement.
                    </p>

                    <a
                        href="#collaboration-form"
                        class="work-card__link"
                    >
                        Submit an Institutional Request
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>

                </article>

            </div>

        </div>

    </section>


    <!-- =====================================================
         WHO CAN WORK WITH CODNESTA
    ====================================================== -->
    <section class="work-section">

        <div class="container">

            <div class="work-split">

                <div class="work-content reveal reveal--right">

                    <span class="work-eyebrow">
                        Who We Work With
                    </span>

                    <h2 class="work-title">
                        Collaboration is open to people and organisations
                        <span>with shared values.</span>
                    </h2>

                    <p class="work-description">
                        We welcome serious collaboration requests from
                        organisations and professionals whose goals align with
                        practical innovation, education, digital development
                        and opportunity creation.
                    </p>

                    <ul class="work-list">

                        <li>
                            <span class="work-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Companies and technology organisations.
                        </li>

                        <li>
                            <span class="work-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Schools, universities and training institutions.
                        </li>

                        <li>
                            <span class="work-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            NGOs and community organisations.
                        </li>

                        <li>
                            <span class="work-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Government and public institutions.
                        </li>

                        <li>
                            <span class="work-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Technology professionals and experienced mentors.
                        </li>

                        <li>
                            <span class="work-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Sponsors, donors and development partners.
                        </li>

                    </ul>

                </div>


                <div class="work-image image-reveal reveal-delay-1">

                    <img
                        src="{{ url_for('static', filename='images/work-with-us/collaboration.jpg') }}"
                        alt="Professionals collaborating during a CodNesta meeting"
                    >

                </div>

            </div>

        </div>

    </section>


    <!-- =====================================================
         COLLABORATION PRINCIPLES
    ====================================================== -->
    <section class="work-section work-section--soft">

        <div class="container">

            <header class="work-heading reveal reveal--up">

                <span class="work-eyebrow">
                    How We Collaborate
                </span>

                <h2 class="work-title">
                    Principles that guide every
                    <span>working relationship.</span>
                </h2>

            </header>


            <div class="work-grid work-grid--five">

                <article class="work-principle reveal reveal--up reveal-delay-1">

                    <div class="work-principle__icon">
                        <i class="fa-solid fa-bullseye"></i>
                    </div>

                    <h3 class="work-principle__title">
                        Shared Purpose
                    </h3>

                    <p class="work-principle__description">
                        The collaboration must address a clear need or goal.
                    </p>

                </article>


                <article class="work-principle reveal reveal--up reveal-delay-2">

                    <div class="work-principle__icon">
                        <i class="fa-solid fa-list-check"></i>
                    </div>

                    <h3 class="work-principle__title">
                        Clear Responsibilities
                    </h3>

                    <p class="work-principle__description">
                        Each party should understand its role and contribution.
                    </p>

                </article>


                <article class="work-principle reveal reveal--up reveal-delay-3">

                    <div class="work-principle__icon">
                        <i class="fa-solid fa-gears"></i>
                    </div>

                    <h3 class="work-principle__title">
                        Practical Outcomes
                    </h3>

                    <p class="work-principle__description">
                        Activities should lead to useful and measurable results.
                    </p>

                </article>


                <article class="work-principle reveal reveal--up reveal-delay-4">

                    <div class="work-principle__icon">
                        <i class="fa-solid fa-shield-halved"></i>
                    </div>

                    <h3 class="work-principle__title">
                        Accountability
                    </h3>

                    <p class="work-principle__description">
                        Commitments, communication and timelines should be
                        respected.
                    </p>

                </article>


                <article class="work-principle reveal reveal--up reveal-delay-5">

                    <div class="work-principle__icon">
                        <i class="fa-solid fa-arrow-trend-up"></i>
                    </div>

                    <h3 class="work-principle__title">
                        Long-Term Value
                    </h3>

                    <p class="work-principle__description">
                        The relationship should create value beyond one activity.
                    </p>

                </article>

            </div>

        </div>

    </section>

    
 <!-- COLLABORATION FORM SECTION -->
<section class="work-section work-form-bg">
  <div class="work-container">
    <div class="work-form-layout">

      <!-- Left Column: Intro Text & Note -->
      <div class="work-form-content">
        <div class="work-header">
          <span class="work-eyebrow">Get In Touch</span>
          <h1 class="work-title">Work With Us</h1>
          <p class="work-subtitle">
            Partner with CodNesta to build, collaborate, and drive impact together. Fill out the form to submit your proposal.
          </p>
        </div>

        <div class="work-form-note reveal reveal--up">
          <div class="work-form-note__icon">
            <i class="fa-solid fa-handshake"></i>
          </div>
          <div>
            <h4 class="work-form-note__title">Have questions before submitting?</h4>
            <p class="work-form-note__description">
              Reach out directly to our partnerships team at <strong>codnesta@codnesta.com</strong>.
            </p>
          </div>
        </div>
      </div>

      <!-- Right Column: Form Container -->
      <div class="work-form-wrapper reveal reveal--up">
        
        <!-- Step Progress Indicator -->
        <div class="form-steps-progress">
          <div class="step-indicator active" data-step="1">
            <span class="step-number">1</span>
            <span class="step-label">Contact</span>
          </div>
          <div class="step-divider"></div>
          <div class="step-indicator" data-step="2">
            <span class="step-number">2</span>
            <span class="step-label">Details</span>
          </div>
          <div class="step-divider"></div>
          <div class="step-indicator" data-step="3">
            <span class="step-number">3</span>
            <span class="step-label">Confirm</span>
          </div>
        </div>

        <form id="collaboration-form" class="work-form reveal reveal--right-scale" action="{{ url_for('work_with_us.index') }}" method="POST" novalidate>
          <input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">

          <!-- STEP 1: Contact Information -->
          <div class="form-step form-step--active" data-step="1">
            <h2 class="work-form__heading">1. Contact Information</h2>
            
            <div class="work-form__grid">
              <div class="work-form__group">
                <label for="name" class="work-form__label">Full Name <span class="required">*</span></label>
                <input type="text" id="name" name="name" class="work-form__input" placeholder="John Doe" maxlength="150" required>
                <span class="work-form__error">Please enter your full name.</span>
              </div>

              <div class="work-form__group">
                <label for="email" class="work-form__label">Email Address <span class="required">*</span></label>
                <input type="email" id="email" name="email" class="work-form__input" placeholder="john@example.com" maxlength="150" required>
                <span class="work-form__error">Please enter a valid email address.</span>
              </div>

              <div class="work-form__group">
                <label for="phone" class="work-form__label">Phone Number</label>
                <input type="tel" id="phone" name="phone" class="work-form__input" placeholder="+1 (555) 000-0000" maxlength="50">
                <span class="work-form__error"></span>
              </div>

              <div class="work-form__group">
                <label for="organisation" class="work-form__label">Organisation / Institution</label>
                <input type="text" id="organisation" name="organisation" class="work-form__input" placeholder="CodNesta Corp" maxlength="150">
                <span class="work-form__error"></span>
              </div>

              <div class="work-form__group">
                <label for="role" class="work-form__label">Your Role / Position</label>
                <input type="text" id="role" name="role" class="work-form__input" placeholder="Software Engineer / Consultant" maxlength="100">
                <span class="work-form__error"></span>
              </div>

              <div class="work-form__group">
                <label for="website" class="work-form__label">Website or Portfolio URL</label>
                <input type="url" id="website" name="website" class="work-form__input" placeholder="https://example.com" maxlength="255">
                <span class="work-form__error">Please enter a valid URL.</span>
              </div>
            </div>

            <div class="step-actions step-actions--end">
              <button type="button" class="btn-step btn-next">Next &gt;&gt;</button>
            </div>
          </div>

          <!-- STEP 2: Collaboration Details -->
          <div class="form-step" data-step="2">
            <h2 class="work-form__heading">2. Collaboration Details</h2>

            <div class="work-form__group">
              <label for="collaboration_type" class="work-form__label">Type of Collaboration <span class="required">*</span></label>
              <select id="collaboration_type" name="collaboration_type" class="work-form__select" required>
                <option value="" disabled selected>Select collaboration type...</option>
                <option value="Technical Partnership">Technical Partnership</option>
                <option value="Project Collaboration">Project Collaboration</option>
                <option value="Research & Development">Research & Development</option>
                <option value="Sponsorship & Community">Sponsorship & Community</option>
                <option value="Volunteer with CodNesta">Volunteer with CodNesta</option>
                <option value="Other">Other</option>
              </select>
              <span class="work-form__error">Please select a collaboration type.</span>
            </div>

            <div class="work-form__grid">
              <div class="work-form__group">
                <label for="contribution" class="work-form__label">What do you bring / contribute? <span class="required">*</span></label>
                <textarea id="contribution" name="contribution" class="work-form__textarea" rows="3" placeholder="Detail your offering..." required></textarea>
                <span class="work-form__error">Please describe what you offer.</span>
              </div>

              <div class="work-form__group">
                <label for="support_requested" class="work-form__label">Support requested from CodNesta? <span class="required">*</span></label>
                <textarea id="support_requested" name="support_requested" class="work-form__textarea" rows="3" placeholder="Outline support needed..." required></textarea>
                <span class="work-form__error">Please detail support requested.</span>
              </div>
            </div>

            <div class="work-form__group">
              <label for="message" class="work-form__label">Additional Notes or Message</label>
              <textarea id="message" name="message" class="work-form__textarea" rows="2" placeholder="Extra notes..."></textarea>
              <span class="work-form__error"></span>
            </div>

            <div class="step-actions">
              <button type="button" class="btn-step btn-prev">&lt;&lt; Back</button>
              <button type="button" class="btn-step btn-next">Next &gt;&gt;</button>
            </div>
          </div>

          <!-- STEP 3: Privacy & Submission -->
          <div class="form-step" data-step="3">
            <h2 class="work-form__heading">3. Final Confirmation</h2>

            <div class="work-form__group work-form__group--checkbox">
              <label class="work-form__checkbox-label">
                <input type="checkbox" id="agreement" name="agreement" value="y" required>
                <span class="checkbox-text">
                  I confirm that the information provided is accurate and agree to the privacy policy regarding this submission. <span class="required">*</span>
                </span>
              </label>
              <span class="work-form__error">You must accept the privacy policy to submit.</span>
            </div>

            <div class="step-actions">
              <button type="button" class="btn-step btn-prev">&lt;&lt; Back</button>
              <button type="submit" class="button button--primary btn-submit work-form__btn">Submit Proposal</button>
            </div>
          </div>

        </form>
      </div>

    </div>
  </div>
</section>

    <!-- =====================================================
         WHAT HAPPENS NEXT
    ====================================================== -->
    <section class="work-section work-section--soft">

        <div class="container">

            <header class="work-heading reveal reveal--up">

                <span class="work-eyebrow">
                    What Happens Next
                </span>

                <h2 class="work-title">
                    A clear process from submission to
                    <span>decision.</span>
                </h2>

            </header>


            <div class="work-process">

                <article class="work-process__step reveal reveal--up reveal-delay-1">

                    <span class="work-process__number">
                        01
                    </span>

                    <h3 class="work-process__title">
                        Request Review
                    </h3>

                    <p class="work-process__description">
                        Our team reviews the information and checks whether the
                        request aligns with CodNesta’s work and priorities.
                    </p>

                </article>


                <span class="work-process__line"></span>


                <article class="work-process__step reveal reveal--up reveal-delay-2">

                    <span class="work-process__number">
                        02
                    </span>

                    <h3 class="work-process__title">
                        Initial Response
                    </h3>

                    <p class="work-process__description">
                        We acknowledge the request and may ask for additional
                        clarification or documents.
                    </p>

                </article>


                <span class="work-process__line"></span>


                <article class="work-process__step reveal reveal--up reveal-delay-3">

                    <span class="work-process__number">
                        03
                    </span>

                    <h3 class="work-process__title">
                        Discussion
                    </h3>

                    <p class="work-process__description">
                        Suitable requests proceed to a meeting or structured
                        discussion about scope, roles and expectations.
                    </p>

                </article>


                <span class="work-process__line"></span>


                <article class="work-process__step reveal reveal--up reveal-delay-4">

                    <span class="work-process__number">
                        04
                    </span>

                    <h3 class="work-process__title">
                        Decision
                    </h3>

                    <p class="work-process__description">
                        CodNesta determines whether the proposed engagement is
                        practical and mutually beneficial.
                    </p>

                </article>


                <span class="work-process__line"></span>


                <article class="work-process__step reveal reveal--up reveal-delay-5">

                    <span class="work-process__number">
                        05
                    </span>

                    <h3 class="work-process__title">
                        Agreement
                    </h3>

                    <p class="work-process__description">
                        Approved collaborations move forward with defined next
                        steps, responsibilities and relevant documentation.
                    </p>

                </article>

            </div>

        </div>

    </section>


    <!-- =====================================================
         FINAL CTA
    ====================================================== -->
    <section class="work-section">

        <div class="container">

            <div class="work-cta reveal reveal--up-scale">

                <span class="work-eyebrow">
                    Build With CodNesta
                </span>

                <h2 class="work-cta__title">
                    Bring your experience, resources or ideas into a meaningful
                    collaboration.
                </h2>

                <p class="work-cta__description">
                    Submit a clear request and let us explore whether there is a
                    practical path to working together.
                </p>

                <div class="work-actions work-actions--center">

                    <a
                        href="#collaboration-form"
                        class="button button--primary"
                    >
                        Submit a Request
                    </a>

                    <a
                        href="{{ url_for('contact.index') }}"
                        class="button button--secondary"
                    >
                        General Contact
                    </a>

                </div>

            </div>

        </div>

    </section>

</main>

<!-- modal -->
 <!-- Popup Status Modal -->
<div id="statusModal" class="modal-overlay" style="display: none;">
  <div class="modal-card">
    <div class="modal-icon" id="modalIcon">✓</div>
    <h3 id="modalTitle">Success</h3>
    <p id="modalMessage"></p>
    <button type="button" class="modal-btn" onclick="closeModal()">OK</button>
  </div>
</div>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-card {
  background: #ffffff;
  padding: 32px 24px;
  border-radius: 12px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.25s ease-out;
}

.modal-icon {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 12px;
}

.modal-card.success .modal-icon {
  color: #10b981; /* Green */
}

.modal-card.error .modal-icon {
  color: #ef4444; /* Red */
}

.modal-card h3 {
  margin: 0 0 10px 0;
  font-size: 1.4rem;
}

.modal-card p {
  color: #4b5563;
  margin-bottom: 24px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.modal-btn {
  border: none;
  padding: 10px 28px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  color: #ffffff;
  transition: background-color 0.2s;
}

.modal-card.success .modal-btn {
  background-color: #10b981;
}
.modal-card.success .modal-btn:hover {
  background-color: #059669;
}

.modal-card.error .modal-btn {
  background-color: #ef4444;
}
.modal-card.error .modal-btn:hover {
  background-color: #dc2626;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
</style>

{% endblock %}

{% block extra_js %}
<!-- Include Form Validation Scripts -->
<script src="{{ url_for('static', filename='js/forms/work-with-us.js') }}"></script>
{% endblock %}