<?php
$jobs = $jobs ?? [];

function career_icon($type) {
    $icons = [
        'arrow' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13.2 5.3 20 12l-6.8 6.7-1.4-1.4 4.4-4.3H4v-2h12.2l-4.4-4.3 1.4-1.4Z"/></svg>',
        'people' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8 1c-2.7 0-5 1.1-6 2.7A7.8 7.8 0 0 1 16 22h6v-3c0-3.3-2.7-6-6-6ZM8 14c-3.3 0-6 2.7-6 6v2h12v-2c0-3.3-2.7-6-6-6Z"/></svg>',
        'growth' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16v2H4V3h2v12.6l4.4-4.4 3.1 3.1L20.3 7.5 21.7 9l-8.2 8.2-3.1-3.1L6 18.4V19Z"/></svg>',
        'shield' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 4 5.4v5.8c0 5 3.4 9.7 8 10.8 4.6-1.1 8-5.8 8-10.8V5.4L12 2Zm-1 13.4-3.4-3.4L9 10.6l2 2 4.4-4.4 1.4 1.4-5.8 5.8Z"/></svg>',
        'book' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H21v17H7a2 2 0 0 0-2 2H3V4.5Zm3 .5a2 2 0 0 0-2 2v11.1A4 4 0 0 1 7 17h12V4H7Z"/></svg>',
        'heart' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.4 10.6 20C5.4 15.3 2 12.2 2 8.3A5.3 5.3 0 0 1 7.4 3c1.9 0 3.7.9 4.6 2.3A5.5 5.5 0 0 1 16.6 3 5.3 5.3 0 0 1 22 8.3c0 3.9-3.4 7-8.6 11.7L12 21.4Z"/></svg>',
        'award' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a7 7 0 0 1 4 12.7V22l-4-2-4 2v-7.3A7 7 0 0 1 12 2Zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z"/></svg>',
        'briefcase' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 4h6v3h5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V4Zm2 3h2V6h-2v1Zm-7 4v2h16v-2H4Z"/></svg>',
        'location' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z"/></svg>',
        'clock' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 11h5v-2h-4V6h-2v7Z"/></svg>',
        'upload' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 16h2V8.8l3.1 3.1 1.4-1.4L12 5l-5.5 5.5 1.4 1.4L11 8.8V16Zm-7 2h16v2H4v-2Z"/></svg>',
        'check' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9.2 16.2-4.2-4.2-1.4 1.4 5.6 5.6L21 7.2l-1.4-1.4L9.2 16.2Z"/></svg>'
    ];

    return $icons[$type] ?? $icons['arrow'];
}

$benefits = [
    ['icon' => 'growth', 'title' => 'Career Growth', 'desc' => 'Opportunities to learn, grow and advance your career.'],
    ['icon' => 'book', 'title' => 'Learning Culture', 'desc' => 'Continuous learning and development at every level.'],
    ['icon' => 'people', 'title' => 'Inclusive Workplace', 'desc' => 'A culture built on respect, equality and collaboration.'],
    ['icon' => 'heart', 'title' => 'Purposeful Work', 'desc' => 'Be part of meaningful work that supports global health.'],
    ['icon' => 'award', 'title' => 'Recognition', 'desc' => 'We recognize and celebrate valuable contributions.'],
    ['icon' => 'shield', 'title' => 'Health & Wellbeing', 'desc' => 'We care for your physical, emotional and financial wellbeing.']
];

$career_points = [
    ['icon' => 'people', 'title' => 'People First', 'sub' => 'Value & respect'],
    ['icon' => 'growth', 'title' => 'Grow Together', 'sub' => 'Career progression'],
    ['icon' => 'shield', 'title' => 'Make an Impact', 'sub' => 'Global health']
];
?>

<section class="career-hero section" aria-labelledby="careerHeroTitle">
    <div class="site-container career-hero-grid">
        <div class="career-hero-copy">
            <nav class="breadcrumbs" aria-label="Breadcrumb">
                <a href="<?= $base_url ?>/">Home</a>
                <span class="separator">/</span>
                <span>Employment</span>
            </nav>

            <span class="section-eyebrow">Careers at Sanjar Pharma</span>

            <h1 id="careerHeroTitle">
                Build Your Future<br>
                with <span>Purpose.</span>
            </h1>

            <p>
                At Sanjar Pharma LLP, we are driven by a shared purpose to improve global health through high-quality sterile injectables. Join a team that values innovation, integrity and impact.
            </p>

            <div class="career-point-grid">
                <?php foreach ($career_points as $point): ?>
                    <article class="career-point">
                        <span><?= career_icon($point['icon']) ?></span>
                        <div>
                            <h2><?= htmlspecialchars($point['title'], ENT_QUOTES, 'UTF-8') ?></h2>
                            <p><?= htmlspecialchars($point['sub'], ENT_QUOTES, 'UTF-8') ?></p>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>

            <a href="#openings-section" class="primary-button">
                View Open Positions
                <?= career_icon('arrow') ?>
            </a>
        </div>

        <div class="career-hero-visual">
            <img
                src="<?= $base_url ?>/assets/images/about/abts1.webp"
                width="760"
                height="520"
                alt="Sanjar Pharma manufacturing team and facility"
                fetchpriority="high"
                loading="eager"
                decoding="async"
            >

            <div class="experience-badge card">
                <?= career_icon('people') ?>
                <strong>150+</strong>
                <span>Dedicated Professionals</span>
            </div>
        </div>
    </div>
</section>

<section class="career-benefits-section section section-surface" aria-labelledby="benefitsTitle">
    <div class="site-container">
        <div class="section-head centered-head">
            <div>
                <span class="section-eyebrow">Why Build Your Career with Us?</span>
                <h2 id="benefitsTitle" class="section-title">A Workplace Built for Growth</h2>
            </div>
        </div>

        <div class="benefit-grid">
            <?php foreach ($benefits as $benefit): ?>
                <article class="benefit-card card card-pad card-hover">
                    <span class="benefit-icon"><?= career_icon($benefit['icon']) ?></span>
                    <h3><?= htmlspecialchars($benefit['title'], ENT_QUOTES, 'UTF-8') ?></h3>
                    <p><?= htmlspecialchars($benefit['desc'], ENT_QUOTES, 'UTF-8') ?></p>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="job-openings-section section" id="openings-section" aria-labelledby="openingsTitle">
    <div class="site-container">
        <div class="section-head centered-head">
            <div>
                <span class="section-eyebrow">Explore Opportunities</span>
                <h2 id="openingsTitle" class="section-title">Current Job Openings</h2>
            </div>
        </div>

        <?php if (!empty($jobs)): ?>
            <div class="jobs-layout">
                <div class="job-list" aria-label="Available job openings">
                    <?php foreach ($jobs as $index => $job): ?>
                        <button
                            class="job-list-card card <?= $index === 0 ? 'active' : '' ?>"
                            type="button"
                            data-job-id="<?= htmlspecialchars((string) $job['id'], ENT_QUOTES, 'UTF-8') ?>"
                        >
                            <span class="job-card-head">
                                <strong><?= htmlspecialchars($job['title'], ENT_QUOTES, 'UTF-8') ?></strong>
                                <em><?= htmlspecialchars($job['type'], ENT_QUOTES, 'UTF-8') ?></em>
                            </span>

                            <span class="job-meta-row">
                                <span><?= career_icon('briefcase') ?> <?= htmlspecialchars($job['dept'], ENT_QUOTES, 'UTF-8') ?></span>
                                <span><?= career_icon('location') ?> <?= htmlspecialchars($job['location'], ENT_QUOTES, 'UTF-8') ?></span>
                                <span><?= career_icon('clock') ?> <?= htmlspecialchars($job['exp'], ENT_QUOTES, 'UTF-8') ?></span>
                            </span>
                        </button>
                    <?php endforeach; ?>
                </div>

                <article class="job-details-panel card card-pad" id="job-details-panel" aria-live="polite">
                    <div class="job-details-head">
                        <div>
                            <h3 id="detail-title"></h3>
                            <div class="job-detail-meta">
                                <span id="detail-dept"></span>
                                <span id="detail-location"></span>
                                <span id="detail-exp"></span>
                            </div>
                        </div>

                        <span id="detail-type" class="badge badge-brand"></span>
                    </div>

                    <div class="job-rich-content">
                        <h4>Job Description & Responsibilities:</h4>
                        <ul id="detail-desc" class="job-bullet-list"></ul>

                        <h4>Qualifications & Skills Required:</h4>
                        <ul id="detail-qual" class="job-bullet-list"></ul>
                    </div>

                    <a href="#application-form-section" class="primary-button">
                        Apply For This Position
                        <?= career_icon('arrow') ?>
                    </a>
                </article>
            </div>
        <?php else: ?>
            <div class="empty-state card card-pad">
                <p>There are no current openings at this moment. You can still submit your application below for future opportunities.</p>
            </div>
        <?php endif; ?>
    </div>
</section>

<section class="application-section section section-surface" id="application-form-section" aria-labelledby="applicationTitle">
    <div class="site-container application-grid">
        <div class="application-form-card card card-pad">
            <div class="content-title-row">
                <span class="form-accent-dash" aria-hidden="true"></span>
                <h2 id="applicationTitle">Apply Now</h2>
            </div>

            <p>Fill out the form below and our HR team will get in touch with you.</p>

            <form action="<?= $base_url ?>/actions/submit-application.php" method="POST" enctype="multipart/form-data" class="career-form">
                <div class="form-grid">
                    <div class="form-field">
                        <label class="sr-only" for="careerFullname">Full Name</label>
                        <input id="careerFullname" type="text" name="fullname" placeholder="Full Name*" autocomplete="name" required>
                    </div>

                    <div class="form-field">
                        <label class="sr-only" for="careerEmail">Email Address</label>
                        <input id="careerEmail" type="email" name="email" placeholder="Email Address*" autocomplete="email" required>
                    </div>

                    <div class="form-field">
                        <label class="sr-only" for="careerPhone">Phone Number</label>
                        <input id="careerPhone" type="tel" name="phone" placeholder="Phone Number*" autocomplete="tel" required>
                    </div>

                    <div class="form-field">
                        <label class="sr-only" for="careerLocation">Current Location</label>
                        <input id="careerLocation" type="text" name="location" placeholder="Current Location*" autocomplete="address-level2" required>
                    </div>

                    <div class="form-field">
                        <label class="sr-only" for="careerDesignation">Current Designation</label>
                        <input id="careerDesignation" type="text" name="designation" placeholder="Current Designation">
                    </div>

                    <div class="form-field">
                        <label class="sr-only" for="careerExperience">Total Experience</label>
                        <select id="careerExperience" name="experience" required>
                            <option value="" selected disabled>Total Experience*</option>
                            <option value="Fresher">Fresher</option>
                            <option value="1-3 Years">1-3 Years</option>
                            <option value="3-5 Years">3-5 Years</option>
                            <option value="5+ Years">5+ Years</option>
                        </select>
                    </div>

                    <div class="form-field">
                        <label class="sr-only" for="careerQualification">Highest Qualification</label>
                        <select id="careerQualification" name="qualification" required>
                            <option value="" selected disabled>Highest Qualification*</option>
                            <option value="B.Pharm">B.Pharm / M.Pharm</option>
                            <option value="B.Sc">B.Sc / M.Sc</option>
                            <option value="Diploma">Diploma</option>
                            <option value="Other">Other Graduate</option>
                        </select>
                    </div>

                    <div class="form-field">
                        <label class="sr-only" for="form-dept-select">Department of Interest</label>
                        <select id="form-dept-select" name="department" required>
                            <option value="" selected disabled>Department of Interest*</option>
                            <option value="Production">Production</option>
                            <option value="Quality Assurance">Quality Assurance</option>
                            <option value="Regulatory Affairs">Regulatory Affairs</option>
                            <option value="Maintenance">Maintenance / Engineering</option>
                        </select>
                    </div>

                    <div class="form-field form-field-full">
                        <label class="file-upload-wrapper" for="careerResume">
                            <input id="careerResume" type="file" name="resume" accept=".pdf,.doc,.docx" required>
                            <?= career_icon('upload') ?>
                            <strong id="resumeFileName">Click to upload or drag and drop</strong>
                            <span>PDF, DOC or DOCX. Max 5MB.</span>
                        </label>
                    </div>

                    <div class="form-field form-field-full">
                        <label class="sr-only" for="careerMessage">Additional Message</label>
                        <textarea id="careerMessage" name="message" rows="4" placeholder="Additional Message (Optional)"></textarea>
                    </div>
                </div>

                <button type="submit" class="primary-button form-submit-btn">
                    Submit Application
                    <?= career_icon('arrow') ?>
                </button>
            </form>
        </div>

        <aside class="career-side-card">
            <div class="compliance-box">
                <span class="compliance-icon"><?= career_icon('briefcase') ?></span>
                <h2>Your Journey Starts Here</h2>
                <p>We are always looking for passionate individuals who want to make a difference. Join us and be part of a team shaping the future of healthcare.</p>

                <ul class="career-check-list">
                    <li><?= career_icon('check') ?> Equal Opportunity Employer</li>
                    <li><?= career_icon('check') ?> Confidential & Secure Process</li>
                    <li><?= career_icon('check') ?> Fast & Transparent Hiring</li>
                    <li><?= career_icon('check') ?> Join a Purpose-Driven Team</li>
                </ul>
            </div>
        </aside>
    </div>
</section>

<section class="career-stats-section section-sm" aria-label="Sanjar Pharma employment statistics">
    <div class="site-container career-stats-grid card">
        <article>
            <strong>150+</strong>
            <p>Team Members</p>
        </article>
        <article>
            <strong>10+</strong>
            <p>Departments</p>
        </article>
        <article>
            <strong>100%</strong>
            <p>Equal Opportunity</p>
        </article>
        <article>
            <strong>Flexible</strong>
            <p>Work Culture</p>
        </article>
    </div>
</section>

<style>
.career-hero {
  overflow: hidden;
  background: var(--body-bg);
}

.career-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.career-hero-copy h1 {
  margin-bottom: 1rem;
}

.career-hero-copy h1 span {
  color: var(--primary);
}

.career-hero-copy p {
  max-width: 64ch;
}

.career-point-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0 2rem;
}

.career-point {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.career-point > span {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.career-point svg,
.benefit-icon svg,
.job-meta-row svg,
.job-detail-meta svg,
.file-upload-wrapper svg,
.compliance-icon svg,
.career-check-list svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.career-point h2 {
  margin: 0;
  font-size: 0.95rem;
}

.career-point p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.career-hero-visual {
  position: relative;
  min-height: 380px;
}

.career-hero-visual img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.experience-badge {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  min-width: 180px;
  padding: 1rem;
  text-align: center;
}

.experience-badge svg {
  width: 2rem;
  height: 2rem;
  margin-inline: auto;
  color: var(--primary);
  fill: currentColor;
}

.experience-badge strong {
  display: block;
  color: var(--heading);
  font-size: 1.6rem;
  line-height: 1.1;
}

.experience-badge span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.centered-head {
  justify-content: center;
  text-align: center;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.benefit-card {
  text-align: center;
}

.benefit-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  border-radius: var(--radius-sm);
  color: #111315;
  background: var(--primary);
}

.benefit-card h3 {
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.benefit-card p {
  margin: 0;
  font-size: 0.92rem;
}

.jobs-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: var(--gap);
  align-items: stretch;
}

.job-list {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.job-list-card {
  width: 100%;
  padding: 1.25rem;
  border: 1px solid var(--border);
  text-align: left;
  color: inherit;
  background: var(--surface);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.job-list-card:hover,
.job-list-card.active {
  transform: translateY(-2px);
  border-color: var(--primary);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.job-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.7rem;
}

.job-card-head strong {
  color: var(--heading);
  font-size: 1rem;
}

.job-card-head em {
  flex: 0 0 auto;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
}

.job-meta-row,
.job-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.job-meta-row span,
.job-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.job-details-panel {
  transition: opacity var(--transition-fast);
}

.job-details-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.job-details-head h3 {
  margin-bottom: 0.4rem;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.8rem);
}

.job-rich-content h4 {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
}

.job-bullet-list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--text);
}

.job-bullet-list li {
  margin-bottom: 0.35rem;
}

.application-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: var(--gap);
  align-items: stretch;
}

.application-form-card {
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.career-form {
  margin-top: 1.5rem;
}

.form-submit-btn {
  width: 100%;
  margin-top: 1.5rem;
  border: 0;
}

.file-upload-wrapper {
  position: relative;
  min-height: 148px;
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 1.5rem;
  border: 2px dashed var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--heading);
  background: var(--input-bg);
  text-align: center;
  cursor: pointer;
}

.file-upload-wrapper:hover {
  border-color: var(--primary);
  background: var(--surface-2);
}

.file-upload-wrapper input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-upload-wrapper svg {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--primary);
}

.file-upload-wrapper strong {
  font-size: 0.9rem;
}

.file-upload-wrapper span {
  color: var(--muted);
  font-size: 0.8rem;
}

.compliance-box {
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
  border-radius: var(--radius-lg);
  color: #fff;
  background: #2d3134;
  box-shadow: var(--shadow-lg);
}

.compliance-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: rgba(255, 255, 255, 0.08);
}

.compliance-box h2 {
  color: #fff;
}

.compliance-box p {
  color: rgba(255, 255, 255, 0.68);
}

.career-check-list {
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.career-check-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 700;
}

.career-check-list svg {
  color: var(--primary);
  flex: 0 0 auto;
}

.career-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.career-stats-grid article {
  padding: clamp(1rem, 2vw, 1.8rem);
  text-align: center;
  border-right: 1px solid var(--border);
}

.career-stats-grid article:last-child {
  border-right: 0;
}

.career-stats-grid strong {
  display: block;
  color: var(--heading);
  font-size: clamp(1.6rem, 2vw, 2.4rem);
  line-height: 1.1;
}

.career-stats-grid p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.empty-state {
  text-align: center;
}

@media (max-width: 991px) {
  .career-hero-grid,
  .jobs-layout,
  .application-grid {
    grid-template-columns: 1fr;
  }

  .career-point-grid {
    grid-template-columns: 1fr;
  }

  .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .career-hero-visual,
  .career-hero-visual img {
    height: auto;
    min-height: auto;
  }

  .career-hero-visual img {
    aspect-ratio: 4 / 3;
  }

  .job-details-head {
    flex-direction: column;
  }

  .compliance-box {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .benefit-grid,
  .career-stats-grid {
    grid-template-columns: 1fr;
  }

  .career-stats-grid article {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .career-stats-grid article:last-child {
    border-bottom: 0;
  }

  .experience-badge {
    position: static;
    margin-top: 1rem;
  }

  .job-card-head {
    flex-direction: column;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const jobsData = <?= json_encode($jobs, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;

    const panel = document.getElementById("job-details-panel");
    const title = document.getElementById("detail-title");
    const dept = document.getElementById("detail-dept");
    const location = document.getElementById("detail-location");
    const exp = document.getElementById("detail-exp");
    const type = document.getElementById("detail-type");
    const desc = document.getElementById("detail-desc");
    const qual = document.getElementById("detail-qual");
    const formDeptSelect = document.getElementById("form-dept-select");
    const cards = document.querySelectorAll(".job-list-card");
    const resumeInput = document.getElementById("careerResume");
    const resumeFileName = document.getElementById("resumeFileName");

    const escapeHtml = value => String(value || "").replace(/[&<>"']/g, char => ({
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&#039;"
    }[char]));

    const iconBriefcase = `<?= career_icon('briefcase') ?>`;
    const iconLocation = `<?= career_icon('location') ?>`;
    const iconClock = `<?= career_icon('clock') ?>`;

    const displayJobDetails = id => {
        const data = jobsData.find(job => String(job.id) === String(id));
        if (!data || !panel) return;

        panel.style.opacity = "0.45";

        window.setTimeout(() => {
            title.textContent = data.title || "";
            dept.innerHTML = iconBriefcase + " " + escapeHtml(data.dept || "");
            location.innerHTML = iconLocation + " " + escapeHtml(data.location || "");
            exp.innerHTML = iconClock + " " + escapeHtml(data.exp || "");
            type.textContent = data.type || "";

            desc.innerHTML = Array.isArray(data.responsibilities)
                ? data.responsibilities.map(item => `<li>${escapeHtml(item)}</li>`).join("")
                : "";

            qual.innerHTML = Array.isArray(data.qualifications)
                ? data.qualifications.map(item => `<li>${escapeHtml(item)}</li>`).join("")
                : "";

            if (formDeptSelect && data.dept) {
                formDeptSelect.value = data.dept;
            }

            panel.style.opacity = "1";
        }, 120);
    };

    cards.forEach(card => {
        card.addEventListener("click", () => {
            cards.forEach(item => item.classList.remove("active"));
            card.classList.add("active");
            displayJobDetails(card.dataset.jobId);
        });
    });

    if (jobsData.length > 0) {
        displayJobDetails(jobsData[0].id);
    }

    if (resumeInput && resumeFileName) {
        resumeInput.addEventListener("change", () => {
            const file = resumeInput.files && resumeInput.files[0];

            if (!file) {
                resumeFileName.textContent = "Click to upload or drag and drop";
                return;
            }

            resumeFileName.textContent = file.name;
        });
    }
});
</script>