<?php
/**
 * AR Developer - Project Details Case Study
 * Dynamic single project view with full architectural breakdown
 */
require_once __DIR__ . '/config/auth.php';
requireAuthentication();

$slug = isset($_GET['slug']) ? htmlspecialchars($_GET['slug']) : 'nexus-cloud-analytics';
$pageTitle = 'Case Study | AR Developer Portfolio';
$pageDescription = 'In-depth case study and architectural breakdown by AR Developer (ARaza).';
$canonicalUrl = 'https://ardeveloper.online/project.php?slug=' . $slug;
$activeNav = 'portfolio';
require_once __DIR__ . '/includes/header.php';
?>

  <article class="project-hero">
    <div class="container">
      <div class="project-hero-head">
        <div class="project-hero-meta">
          <a href="/portfolio.php" style="color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.35rem;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            All Case Studies
          </a>
          <span>·</span>
          <span class="kicker" id="projectCategory" style="margin-bottom: 0;">Case Study</span>
        </div>
        <h1 id="projectTitle" style="margin-bottom: 1rem;">Loading project...</h1>
        <p class="hero-desc" id="projectShortDesc" style="font-size: 1.2rem; max-width: 750px;">
        </p>
      </div>

      <!-- Lead Media (Image or Video) -->
      <div class="project-lead-image" id="projectLeadMedia">
        <div style="width: 100%; height: 350px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: var(--text-muted);">
          Loading media...
        </div>
      </div>

      <!-- Two-Column Case Study Content Grid -->
      <div class="project-content-grid">
        <div class="project-main-content">
          <div>
            <span class="kicker">OVERVIEW</span>
            <h2>Project Background</h2>
            <p id="projectDescription" style="font-size: 1.05rem; line-height: 1.8;"></p>
          </div>

          <div style="margin-top: 3.5rem;">
            <span class="kicker">THE CHALLENGE</span>
            <h2>The Problem</h2>
            <p id="projectProblem" style="font-size: 1.05rem; line-height: 1.8;"></p>
          </div>

          <div style="margin-top: 3.5rem;">
            <span class="kicker">ENGINEERING EXECUTION</span>
            <h2>The Solution</h2>
            <p id="projectSolution" style="font-size: 1.05rem; line-height: 1.8;"></p>
          </div>

          <div class="section-block" style="margin-top: 3.5rem;">
            <span class="kicker">SYSTEM CAPABILITIES</span>
            <h2>Key Features</h2>
            <ul id="projectFeatures" style="list-style: none; margin-top: 1.25rem; font-size: 1.02rem;"></ul>
          </div>

          <!-- Project Gallery Section -->
          <div id="projectGallerySection" style="margin-top: 4rem; display: none;">
            <span class="kicker">INTERFACE GALLERY</span>
            <h2 style="margin-bottom: 1.5rem;">Product Showcase</h2>
            <div id="projectGalleryGrid" style="display: grid; grid-template-columns: 1fr; gap: 1.5rem;"></div>
          </div>
        </div>

        <!-- Sidebar Metadata -->
        <aside>
          <div class="project-sidebar-card">
            <h3 style="font-size: 1.15rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-subtle);">Project Specs</h3>

            <div class="sidebar-meta-item">
              <div class="sidebar-label">Technologies</div>
              <div id="projectTechnologies" class="project-tech-list" style="margin-top: 0.4rem; margin-bottom: 0;"></div>
            </div>

            <div class="sidebar-meta-item">
              <div class="sidebar-label">Engineering Discipline</div>
              <div class="sidebar-value">Full-Stack Architecture</div>
            </div>

            <div class="sidebar-meta-item">
              <div class="sidebar-label">Lead Engineer</div>
              <div class="sidebar-value">ARaza</div>
            </div>

            <div style="margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem;">
              <a href="#" id="projectLiveUrl" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-sm" style="display: none; justify-content: center;">
                Launch Live Product
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg>
              </a>
              <a href="#" id="projectGithubUrl" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-sm" style="display: none; justify-content: center;">
                View Source Repository
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
              </a>
              <a href="/contact.php" class="btn btn-accent btn-sm" style="justify-content: center; margin-top: 0.5rem;">
                Start Similar Project
              </a>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </article>

  <!-- Script to hydrate project details -->
  <script type="module">
    import { initProjectPage } from '/assets/js/project.js';
    initProjectPage();
  </script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>
