<?php
declare(strict_types=1);
require_once __DIR__ . '/config.php';
require_once __DIR__ . '/includes/functions.php';

$jobs = job_openings_active();
$company = setting('company_name', SITE_NAME);
$tagline = setting('company_tagline', SITE_TAGLINE);
$mail = setting('email', 'info@bhattenterprise.in');
$ph = setting('phone_display', setting('phone', ''));
$addr = setting('address', '');
$hours = setting('hours', '');
$jobCount = count($jobs);

/** @param array<string, mixed> $row */
function careers_job_apply_query(array $row): string
{
    $title = (string)($row['title'] ?? 'Role');
    return http_build_query([
        'subject' => 'Job application: ' . $title,
        'message' => "Dear " . setting('company_name', SITE_NAME) . " team,\n\n"
            . "I am writing to apply for the position: {$title}.\n\n"
            . "Please find my background and contact details below. I am happy to share my CV and discuss how I can contribute.\n\n"
            . "Thank you,\n",
    ], '', '&', PHP_QUERY_RFC3986);
}

function careers_format_posted(?string $createdAt): string
{
    if ($createdAt === null || $createdAt === '') {
        return '';
    }
    $t = strtotime($createdAt);
    if ($t === false) {
        return '';
    }
    return date('j F Y', $t);
}

$pageTitle = 'Careers — ' . $company;
$metaDescription = 'Explore career opportunities at ' . $company . '. Join our solar energy team in Bilaspur — authorized Tata Power Solar partner. View open roles and apply.';
$current = '';
$breadcrumbTitle = 'Careers';
require __DIR__ . '/includes/head.php';
require __DIR__ . '/includes/preloader.php';
require __DIR__ . '/includes/offcanvas.php';
require __DIR__ . '/includes/header.php';
require __DIR__ . '/includes/breadcrumb.php';
?>
  <main class="careers-page">
    <style>
      .careers-page {
        --careers-ink: var(--ot-title-color);
        --careers-muted: var(--ot-body-color);
        --careers-line: #e8dfd4;
        --careers-accent: var(--ot-theme-color);
        --careers-accent-soft: rgba(232, 136, 46, 0.14);
      }

      .careers-hero {
        background: linear-gradient(135deg, #ffffff 0%, #fff5eb 38%, #ffe8d2 100%);
        color: var(--careers-ink);
        padding: 56px 0 64px;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(232, 136, 46, 0.2);
      }

      .careers-hero .careers-hero-kicker {
        color: var(--careers-accent);
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 12px;
        margin-bottom: 14px;
        display: block;
      }

      .careers-hero h1 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 18px;
        color: var(--careers-ink);
      }

      .careers-hero-lead {
        font-size: 1.05rem;
        line-height: 1.75;
        max-width: 720px;
        color: var(--careers-muted);
        margin-bottom: 28px;
      }

      .careers-hero-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .careers-hero-stats .badge {
        font-weight: 600;
        font-size: 13px;
        padding: 10px 16px;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid rgba(232, 136, 46, 0.35);
        color: var(--careers-ink);
        box-shadow: 0 4px 14px rgba(61, 41, 24, 0.06);
      }

      .careers-hero-stats .badge i {
        color: var(--careers-accent);
        margin-right: 6px;
      }

      .careers-section {
        padding: 72px 0;
      }

      .careers-section-title {
        font-size: clamp(1.35rem, 2.5vw, 1.75rem);
        font-weight: 800;
        color: var(--careers-ink);
        margin-bottom: 12px;
      }

      .careers-section-intro {
        color: var(--careers-muted);
        max-width: 680px;
        line-height: 1.7;
        margin-bottom: 36px;
      }

      .careers-value-card {
        background: #fff;
        border: 1px solid var(--careers-line);
        border-radius: 14px;
        padding: 26px 22px;
        height: 100%;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .careers-value-card:hover {
        border-color: var(--careers-accent);
        box-shadow: 0 14px 36px rgba(4, 34, 62, 0.08);
      }

      .careers-value-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--careers-accent-soft);
        color: var(--careers-ink);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        margin-bottom: 16px;
      }

      .careers-value-card h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--careers-ink);
        margin-bottom: 10px;
      }

      .careers-value-card p {
        font-size: 0.95rem;
        color: var(--careers-muted);
        line-height: 1.65;
        margin-bottom: 0;
      }

      .careers-process {
        counter-reset: step;
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .careers-process li {
        position: relative;
        padding-left: 56px;
        margin-bottom: 28px;
      }

      .careers-process li:last-child {
        margin-bottom: 0;
      }

      .careers-process li::before {
        counter-increment: step;
        content: counter(step);
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--careers-accent);
        color: var(--careers-ink);
        font-weight: 800;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .careers-process strong {
        display: block;
        color: var(--careers-ink);
        font-size: 1.05rem;
        margin-bottom: 6px;
      }

      .careers-process span {
        color: var(--careers-muted);
        line-height: 1.65;
        font-size: 0.95rem;
      }

      .careers-aside-card {
        background: var(--careers-ink);
        color: #fff;
        border-radius: 16px;
        padding: 28px 24px;
        position: sticky;
        top: 100px;
      }

      .careers-aside-card h3 {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 14px;
        color: #fff;
      }

      .careers-aside-card a {
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
      }

      .careers-aside-card a:hover {
        color: var(--careers-accent);
        border-bottom-color: var(--careers-accent);
      }

      .careers-aside-card .btn-light {
        font-weight: 700;
        border-radius: 999px;
        padding: 10px 20px;
      }

      .careers-aside-muted {
        font-size: 0.9rem;
        opacity: 0.85;
        line-height: 1.6;
      }

      .careers-job-card {
        border: 1px solid var(--careers-line);
        border-radius: 16px;
        background: #fff;
        overflow: hidden;
        margin-bottom: 20px;
        box-shadow: 0 8px 24px rgba(4, 34, 62, 0.04);
      }

      .careers-job-card:last-child {
        margin-bottom: 0;
      }

      .careers-job-head {
        padding: 24px 24px 0;
      }

      .careers-job-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
      }

      .careers-job-badges span {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 6px 12px;
        border-radius: 999px;
        background: #f4f7fb;
        color: var(--careers-ink);
      }

      .careers-job-badges span.careers-badge-accent {
        background: var(--careers-accent-soft);
        color: var(--careers-ink);
      }

      .careers-job-title {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--careers-ink);
        margin-bottom: 12px;
        line-height: 1.3;
      }

      .careers-job-summary {
        color: var(--careers-muted);
        line-height: 1.7;
        font-size: 0.98rem;
        margin-bottom: 0;
      }

      .careers-job-body {
        padding: 20px 24px 24px;
      }

      .careers-job-detail-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--careers-muted);
        margin-bottom: 10px;
      }

      .careers-job-detail {
        color: var(--careers-muted);
        line-height: 1.75;
        font-size: 0.97rem;
      }

      .careers-checklist {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
      }

      .careers-checklist li {
        position: relative;
        padding-left: 26px;
        margin-bottom: 10px;
        color: var(--careers-muted);
        font-size: 0.95rem;
        line-height: 1.55;
      }

      .careers-checklist li::before {
        content: "\f00c";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 2px;
        font-size: 12px;
        color: var(--careers-accent);
      }

      .careers-job-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        padding-top: 8px;
      }

      .careers-btn-apply {
        border-radius: 999px;
        font-weight: 700;
        padding: 10px 22px;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.04em;
      }

      .careers-btn-ghost {
        border-radius: 999px;
        font-weight: 600;
        padding: 10px 18px;
        font-size: 13px;
        border: 1px solid var(--careers-line);
        background: #fff;
        color: var(--careers-ink);
      }

      .careers-btn-ghost:hover {
        border-color: var(--careers-accent);
        color: var(--careers-ink);
        background: var(--careers-accent-soft);
      }

      .careers-empty {
        text-align: center;
        padding: 48px 28px;
        border: 1px dashed var(--careers-line);
        border-radius: 16px;
        background: #fafbfd;
      }

      .careers-empty i {
        font-size: 2.5rem;
        color: var(--careers-accent);
        margin-bottom: 16px;
        opacity: 0.85;
      }

      .careers-bottom-cta {
        margin-top: 56px;
        padding: 36px 28px;
        border-radius: 16px;
        background: linear-gradient(90deg, var(--careers-accent-soft) 0%, rgba(232, 136, 46, 0.06) 100%);
        border: 1px solid rgba(232, 136, 46, 0.35);
      }

      .careers-bottom-cta h3 {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--careers-ink);
        margin-bottom: 8px;
      }

      .careers-bottom-cta p {
        color: var(--careers-muted);
        margin-bottom: 0;
        max-width: 560px;
      }

      @media (max-width: 991.98px) {
        .careers-aside-card {
          position: static;
          margin-top: 40px;
        }
      }
    </style>

    <section class="careers-hero">
      <div class="container">
        <span class="careers-hero-kicker">Careers at <?= h($company) ?></span>
        <h1>Build a career in solar energy</h1>
        <p class="careers-hero-lead mb-0">
          <?= h($company) ?> delivers rooftop solar and renewable solutions for homes and businesses across the region.
          <?= $jobCount > 0
            ? 'We are hiring for ' . $jobCount . ' open ' . ($jobCount === 1 ? 'role' : 'roles') . ' — explore the details below and reach out when you are ready to apply.'
            : 'We are always interested in hearing from motivated people. Even when no roles are listed, you may send us your profile for future opportunities.' ?>
        </p>
        <div class="careers-hero-stats mt-4">
          <span class="badge"><i class="fa-solid fa-solar-panel"></i>Tata Power Solar authorized partner</span>
          <span class="badge"><i class="fa-solid fa-location-dot"></i>Bilaspur, Chhattisgarh</span>
          <span class="badge"><i class="fa-solid fa-users"></i>Field, sales &amp; operations roles</span>
        </div>
      </div>
    </section>

    <section class="careers-section ot-faq-inner-style">
      <div class="container">
        <h2 class="careers-section-title">Why join us</h2>
        <p class="careers-section-intro">
          <?= h($tagline) ?> We work on real installations, real customers, and long-term relationships — not just desk work.
          If you care about quality execution and honest advice, you will fit right in.
        </p>
        <div class="row g-4 mb-5">
          <div class="col-md-6 col-xl-3">
            <div class="careers-value-card">
              <div class="careers-value-icon"><i class="fa-solid fa-bolt"></i></div>
              <h3>Growing sector</h3>
              <p>Solar adoption is accelerating. You will work on live projects, new technologies, and varied rooftops — from homes to commercial sites.</p>
            </div>
          </div>
          <div class="col-md-6 col-xl-3">
            <div class="careers-value-card">
              <div class="careers-value-icon"><i class="fa-solid fa-handshake"></i></div>
              <h3>Trusted brand</h3>
              <p>We represent leading products and stand behind our workmanship. Customers rely on us for clear guidance and dependable delivery.</p>
            </div>
          </div>
          <div class="col-md-6 col-xl-3">
            <div class="careers-value-card">
              <div class="careers-value-icon"><i class="fa-solid fa-graduation-cap"></i></div>
              <h3>Learn on the job</h3>
              <p>Whether you are in sales, site execution, or operations, you will learn from experienced colleagues and structured site processes.</p>
            </div>
          </div>
          <div class="col-md-6 col-xl-3">
            <div class="careers-value-card">
              <div class="careers-value-icon"><i class="fa-solid fa-heart-pulse"></i></div>
              <h3>Local impact</h3>
              <p>Your work helps families and businesses save on power bills and move to cleaner energy — with measurable impact in our community.</p>
            </div>
          </div>
        </div>

        <div class="row g-5 align-items-start" style="margin-top:20px">
          <div class="col-lg-5">
            <h2 class="careers-section-title">How we hire</h2>
            <p class="careers-section-intro mb-4">Our process is straightforward. We respect your time and respond as quickly as we can.</p>
            <ol class="careers-process">
              <li>
                <strong>Apply</strong>
                <span>Send your CV and a short note via our contact form, or email us with the job title in the subject line.</span>
              </li>
              <li>
                <strong>Review</strong>
                <span>Our team screens applications and may ask for additional information or work samples relevant to the role.</span>
              </li>
              <li>
                <strong>Conversation</strong>
                <span>Shortlisted candidates are invited for a phone or in-person discussion about experience, expectations, and fit.</span>
              </li>
              <li>
                <strong>Offer &amp; onboarding</strong>
                <span>If it is a mutual fit, we agree on terms, joining date, and next steps to get you started.</span>
              </li>
            </ol>
          </div>
          <div class="col-lg-7">
            <h2 class="careers-section-title">Open positions</h2>
            <p class="careers-section-intro">
              Each listing includes a summary and a full description. Use <strong>Apply online</strong> to open the contact form with a draft message you can edit before sending.
            </p>

            <div class="row g-4">
              <div class="col-xl-8">
                <?php if ($jobs): ?>
                  <?php foreach ($jobs as $j): ?>
                    <?php
                      $jid = (int)$j['id'];
                      $title = (string)$j['title'];
                      $loc = trim((string)($j['location'] ?? ''));
                      $etype = trim((string)($j['employment_type'] ?? ''));
                      $short = trim((string)($j['short_description'] ?? ''));
                      $body = trim((string)($j['description'] ?? ''));
                      $posted = careers_format_posted(isset($j['created_at']) ? (string)$j['created_at'] : null);
                      $collapseId = 'careers-job-' . $jid;
                      $applyHref = 'contact.php?' . careers_job_apply_query($j);
                      $mailto = 'mailto:' . rawurlencode($mail) . '?subject=' . rawurlencode('Job application: ' . $title);
                    ?>
                    <article class="careers-job-card">
                      <div class="careers-job-head">
                        <div class="careers-job-badges">
                          <?php if ($etype !== ''): ?>
                            <span class="careers-badge-accent"><?= h($etype) ?></span>
                          <?php endif; ?>
                          <?php if ($loc !== ''): ?>
                            <span><?= h($loc) ?></span>
                          <?php endif; ?>
                          <?php if ($posted !== ''): ?>
                            <span>Posted <?= h($posted) ?></span>
                          <?php endif; ?>
                        </div>
                        <h3 class="careers-job-title"><?= h($title) ?></h3>
                        <?php if ($short !== ''): ?>
                          <p class="careers-job-summary"><?= nl2br(h($short)) ?></p>
                        <?php elseif ($body !== ''): ?>
                          <?php
                            $excerptLen = 220;
                            if (function_exists('mb_strlen') && mb_strlen($body) > $excerptLen) {
                                $excerpt = mb_substr($body, 0, $excerptLen) . '…';
                            } elseif (strlen($body) > $excerptLen) {
                                $excerpt = substr($body, 0, $excerptLen) . '…';
                            } else {
                                $excerpt = $body;
                            }
                          ?>
                          <p class="careers-job-summary"><?= nl2br(h($excerpt)) ?></p>
                        <?php else: ?>
                          <p class="careers-job-summary text-muted">Full details are available below. Contact us to learn more about this role.</p>
                        <?php endif; ?>
                      </div>
                      <div class="careers-job-body">
                        <?php if ($body !== ''): ?>
                          <div class="careers-job-detail-label">Role overview</div>
                          <div class="collapse careers-job-detail mb-4" id="<?= h($collapseId) ?>">
                            <?= nl2br(h($body)) ?>
                          </div>
                          <button class="btn btn-link text-decoration-none p-0 mb-3 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#<?= h($collapseId) ?>" aria-expanded="false" aria-controls="<?= h($collapseId) ?>">
                            <span class="when-collapsed"><i class="fa-solid fa-plus me-1"></i>Show full description</span>
                            <span class="when-expanded d-none"><i class="fa-solid fa-minus me-1"></i>Hide full description</span>
                          </button>
                        <?php endif; ?>

                        <div class="careers-job-detail-label">Include in your application</div>
                        <ul class="careers-checklist">
                          <li>Updated CV or résumé (PDF preferred)</li>
                          <li>Relevant experience, certifications, or projects</li>
                          <li>Your availability / notice period</li>
                          <li>Best phone number and email for a callback</li>
                        </ul>

                        <div class="careers-job-actions">
                          <a href="<?= h($applyHref) ?>" class="ot-btn-primary careers-btn-apply">Apply online</a>
                          <!--<a href="<?= h($mailto) ?>" class="btn careers-btn-ghost"><i class="fa-solid fa-envelope me-1"></i>Email application</a>-->
                        </div>
                      </div>
                    </article>
                  <?php endforeach; ?>
                <?php else: ?>
                  <div class="careers-empty">
                    <i class="fa-solid fa-briefcase d-block"></i>
                    <h3 class="careers-section-title mb-2">No vacancies right now</h3>
                    <p class="careers-section-intro mx-auto mb-4">
                      We do not have published openings at this moment. We still welcome general applications from electricians, installers, sales executives, and operations talent —
                      send your profile and we will keep it on file for the next hiring cycle.
                    </p>
                    <a href="contact.php?<?= h(http_build_query([
                        'subject' => 'General career enquiry',
                        'message' => "Dear " . $company . " team,\n\nI would like to express interest in future opportunities. Please find a brief note below.\n\n",
                    ], '', '&', PHP_QUERY_RFC3986)) ?>" class="ot-btn-primary careers-btn-apply">Send your profile</a>
                  </div>
                <?php endif; ?>
              </div>
              <div class="col-xl-4">
                <aside class="careers-aside-card">
                  <h3>Recruitment &amp; HR contact</h3>
                  <p class="careers-aside-muted mb-3">
                    Questions about a role, internships, or walk-in timings? Reach us directly — mention the job title so we can route your message quickly.
                  </p>
                  <?php if ($ph !== ''): ?>
                    <p class="mb-2"><i class="fa-solid fa-phone me-2" style="color:var(--careers-accent)"></i>
                      <a href="tel:<?= h(preg_replace('/\s+/', '', (string)setting('phone', ''))) ?>"><?= h($ph) ?></a>
                    </p>
                  <?php endif; ?>
                  <?php if ($mail !== ''): ?>
                    <p class="mb-2"><i class="fa-solid fa-envelope me-2" style="color:var(--careers-accent)"></i>
                      <a href="mailto:<?= h($mail) ?>"><?= h($mail) ?></a>
                    </p>
                  <?php endif; ?>
                  <?php if ($addr !== ''): ?>
                    <p class="careers-aside-muted mb-4"><i class="fa-solid fa-location-dot me-2" style="color:var(--careers-accent)"></i><?= h($addr) ?></p>
                  <?php endif; ?>
                  <?php if ($hours !== ''): ?>
                    <p class="careers-aside-muted small mb-4"><i class="fa-solid fa-clock me-2"></i><?= h($hours) ?></p>
                  <?php endif; ?>
                  <a href="contact.php" class="btn btn-light w-100" style="color:green">Go to contact form</a>
                </aside>

               
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  <script>
    (function () {
      document.querySelectorAll('.careers-job-body [data-bs-toggle="collapse"]').forEach(function (btn) {
        var target = document.querySelector(btn.getAttribute('data-bs-target'));
        if (!target) return;
        target.addEventListener('show.bs.collapse', function () {
          btn.querySelector('.when-collapsed')?.classList.add('d-none');
          btn.querySelector('.when-expanded')?.classList.remove('d-none');
        });
        target.addEventListener('hide.bs.collapse', function () {
          btn.querySelector('.when-collapsed')?.classList.remove('d-none');
          btn.querySelector('.when-expanded')?.classList.add('d-none');
        });
      });
    })();
  </script>
<?php require __DIR__ . '/includes/footer.php'; ?>
