<?php
declare(strict_types=1);
require_once __DIR__ . '/config.php';
require_once __DIR__ . '/includes/functions.php';
$projects = projects_all();
$pageTitle = 'Portfolio — ' . setting('company_name', SITE_NAME);
$current = 'portfolio';
$breadcrumbTitle = 'Portfolio / Projects';
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>
    <section class="ot-space">
      <div class="container">
        <style>
          .portfolio-pro-card {
            border: 1px solid #e7edf5;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            height: 100%;
            box-shadow: 0 10px 28px rgba(4, 34, 62, 0.06);
            transition: all 0.25s ease;
          }
          .portfolio-pro-card:hover {
            transform: translateY(-4px);
            border-color: var(--ot-theme-color);
            box-shadow: 0 14px 30px rgba(4, 34, 62, 0.12);
          }
          .portfolio-pro-image {
            height: 250px;
            object-fit: cover;
            width: 100%;
          }
          .portfolio-pro-badge {
            background: rgba(232, 136, 46, 0.18);
            color: var(--ot-title-color);
            border: 1px solid rgba(232, 136, 46, 0.42);
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.2px;
          }
          .portfolio-pro-btn {
            font-weight: 600;
            color: var(--ot-title-color);
          }
          .portfolio-pro-btn:hover {
            color: var(--ot-theme-color);
          }
        </style>

        <div class="ot-title-area text-center mb-50">
          <span class="ot-sec-subtitle">Our Portfolio</span>
          <h3 class="ot-sec-title ot-text-anime-3">Recent Solar Projects</h3>
          <p class="ot-sec-text mx-auto" style="max-width:760px;">
            Explore our completed residential and commercial installations, designed for
            reliable performance and long-term energy savings.
          </p>
        </div>

        <div class="row gy-4">
          <?php if ($projects): ?>
            <?php foreach ($projects as $p): ?>
              <div class="col-xl-4 col-md-6">
                <div class="portfolio-pro-card">
                  <a href="project-detail.php?slug=<?= urlencode((string)$p['slug']) ?>">
                    <img src="<?= h(img_url($p['image_path'] ?? null)) ?>" alt="<?= h((string)$p['title']) ?>" class="portfolio-pro-image">
                  </a>
                  <div class="p-4">
                    <?php if (!empty($p['category'])): ?>
                      <span class="portfolio-pro-badge d-inline-block mb-2"><?= h((string)$p['category']) ?></span>
                    <?php endif; ?>
                    <h3 class="ot-box-title mb-12">
                      <a href="project-detail.php?slug=<?= urlencode((string)$p['slug']) ?>"><?= h((string)$p['title']) ?></a>
                    </h3>
                    <p class="ot-sec-text small mb-20">
                      <?php $d = strip_tags((string)$p['description']); echo h(strlen($d) > 145 ? substr($d, 0, 142) . '...' : $d); ?>
                    </p>
                    <a href="project-detail.php?slug=<?= urlencode((string)$p['slug']) ?>" class="portfolio-pro-btn">
                      View Project <i class="fa-solid fa-arrow-right ms-1"></i>
                    </a>
                  </div>
                </div>
              </div>
            <?php endforeach; ?>
          <?php else: ?>
            <div class="col-12">
              <div class="alert alert-info text-center mb-0">
                Portfolio projects will appear here once you add them from the admin panel.
              </div>
            </div>
          <?php endif; ?>
        </div>
      </div>
    </section>
  </main>
<?php require __DIR__ . '/includes/footer.php'; ?>
