<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<header class="page-hero hero-projects text-center">
  <div class="hero-overlay"></div>
  <div class="container hero-content">
    <h1>Our Projects</h1>
  </div>
</header>

<section class="section">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-lg-6"><h2>Excellence in Every Structure</h2><p>Our approach to construction is rooted in meticulous planning, uncompromising quality, and an unwavering commitment to safety.</p><div class="badges"><span>ISO Certified</span><span>Zero Accident Record</span></div></div>
      <div class="col-lg-3"><div class="big-number dark"><b>150+</b><span>Projects Completed</span></div></div>
      <div class="col-lg-3"><div class="big-number accent"><b>25+</b><span>Years Experience</span></div></div>
    </div>
  </div>
</section>

<section class="project-filter">
  <div class="container d-flex justify-content-between align-items-center flex-wrap gap-3">
    <span>Filter by Sector</span>
    <div class="filter-buttons">
      <button class="active" data-filter="all">All Projects</button>
      <button data-filter="residential">Residential</button>
      <button data-filter="commercial">Commercial</button>
      <button data-filter="institutional">Institutional</button>
      <button data-filter="renovation">Renovation</button>
      <button data-filter="facility">Facility</button>
    </div>
  </div>
</section>

<section class="section section-soft">
  <div class="container">
    <div class="row g-4 project-grid">
      <div class="col-md-4 project-item" data-category="institutional renovation"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=900&q=80"><span>Institutional</span><h4>EDO College Renovation Works</h4><p>Comprehensive structural overhaul and modernization of academic facilities.</p><div class="project-foot"><b>Completed</b><a href="<?= site_url('contact') ?>">View Details </a></div></div></div>
      <div class="col-md-4 project-item" data-category="facility"><div class="project-card"><img src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&w=900&q=80"><span>Medical</span><h4>NAW Dialysis Centre</h4><p>Specialized healthcare facility construction featuring advanced medical systems.</p><div class="project-foot"><b>Completed</b><a href="<?= site_url('contact') ?>">View Details </a></div></div></div>
      <div class="col-md-4 project-item" data-category="commercial"><div class="project-card"><img src="https://images.unsplash.com/photo-1564501049412-61c2a3083791?auto=format&fit=crop&w=900&q=80"><span>Hospitality</span><h4>Hotel Construction Project</h4><p>High-end resort development featuring complex HVAC systems and luxury finishes.</p><div class="project-foot"><b>In Progress</b><a href="<?= site_url('contact') ?>">View Details </a></div></div></div>
      <div class="col-md-4 project-item" data-category="renovation"><div class="project-card"><img src="https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=900&q=80"><span>Religious</span><h4>Church Remodelling</h4><p>Graceful interior and exterior renovation focused on structural refinement.</p><div class="project-foot"><b>Completed</b><a href="<?= site_url('contact') ?>">View Details </a></div></div></div>
      <div class="col-md-4 project-item" data-category="commercial"><div class="project-card"><img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80"><span>Commercial</span><h4>Eaglewatch Security Office Block</h4><p>Multi-story corporate headquarters featuring integrated high-level security systems.</p><div class="project-foot"><b>Completed</b><a href="<?= site_url('contact') ?>">View Details </a></div></div></div>
    </div>
  </div>
</section>

<section class="cta-block dark">
  <div class="container text-center">
    <h2>Let Your Project Be Our Next Success Story</h2>
    <p>From expansive industrial complexes to intricate renovations, we bring precision and resilience to every square foot.</p>
    <a href="<?= site_url('contact') ?>" class="btn btn-accent">Start a Consultation</a>
    <a href="<?= site_url('clients') ?>" class="btn btn-outline-light">Download Portfolio</a>
  </div>
</section>
<?= $this->endSection() ?>
