<?php
/**
 * AR Developer - Main Homepage
 * Authenticated visitors landing view with full interactive features
 */
require_once __DIR__ . '/config/auth.php';
requireAuthentication();

$pageTitle = 'AR Developer | Ideas / Code / Reality - Software Development by ARaza';
$pageDescription = 'We build modern websites, custom software, mobile apps, ecommerce platforms and games tailored to your goals.';
$canonicalUrl = 'https://ardeveloper.online/home.php';
$activeNav = 'home';
require_once __DIR__ . '/includes/header.php';
?>

  <!-- Main Hero Section: Strategic Proposition & Image-Based Digital Product Showcase -->
  <section class="hero-section" id="heroSection">
    <div class="container">
      <div class="hero-grid">
        
        <!-- Hero Left: Strategic Proposition -->
        <div class="hero-content">
          <div class="hero-brand-label">
            <span class="brand-accent-line" aria-hidden="true"></span>
            <span>AR DEVELOPER</span>
          </div>
          <h1 class="hero-title">
            Turn Your Ideas Into<br>Powerful Digital Products
          </h1>
          <p class="hero-desc">
            We build modern websites, custom software, mobile apps, ecommerce platforms and games tailored to your goals.
          </p>
          <div class="hero-actions">
            <a href="/contact.php" class="btn btn-primary">Start a Project</a>
            <a href="/portfolio.php" class="btn btn-secondary">View Our Work</a>
          </div>
        </div>

        <!-- Hero Right: Existing GIF Animation -->
        <div class="hero-media-wrapper" id="heroMediaWrapper">
          <div class="hero-gif-container">
            <img
              src="/assets/images/hero-placeholder.gif"
              alt="AR Developer digital product development"
              class="hero-gif-img"
              loading="eager"
              width="480"
              height="270"
            />
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- Featured Project Slider Section (Maintained as before) -->
  <section class="slider-section" id="featuredSlider">
    <div class="container">
      <div id="heroSlider">
        <!-- Rendered dynamically by assets/js/slider.js -->
        <div style="padding: 3rem; text-align: center; color: var(--text-muted);">
          Loading showcase projects...
        </div>
      </div>
    </div>
  </section>

  <!-- Services Section -->
  <section class="services-section" id="services">
    <div class="container">
      <div class="section-head">
        <span class="kicker">SERVICES</span>
        <h2 class="section-title">What We Build</h2>
        <p class="section-subtitle">
          End-to-end digital engineering crafted with clean code and uncompromising aesthetic discipline.
        </p>
      </div>

      <div class="services-grid">
        <div class="service-card">
          <img src="/assets/images/scenes/scene-website-dev.svg" alt="Website Development Illustration" class="service-scene-img" width="640" height="440" loading="lazy" />
          <div class="service-icon-box">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
          </div>
          <h3 class="service-title">Website Development</h3>
          <p class="service-desc">
            Modern, lightning-fast corporate websites, portfolios, and landing pages with sub-second load times and semantic technical SEO.
          </p>
          <a href="/services.php" class="service-link">
            Learn More
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
        </div>

        <div class="service-card">
          <img src="/assets/images/scenes/scene-software-dev.svg" alt="Custom Software Development Illustration" class="service-scene-img" width="640" height="440" loading="lazy" />
          <div class="service-icon-box">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg>
          </div>
          <h3 class="service-title">Custom Software Development</h3>
          <p class="service-desc">
            Bespoke cloud software, internal operational portals, real-time analytics engines, and resilient REST/GraphQL APIs.
          </p>
          <a href="/services.php" class="service-link">
            Learn More
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
        </div>

        <div class="service-card">
          <img src="/assets/images/scenes/scene-mobile-app.svg" alt="Mobile App Development Illustration" class="service-scene-img" width="640" height="440" loading="lazy" />
          <div class="service-icon-box">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
          </div>
          <h3 class="service-title">Mobile App Development</h3>
          <p class="service-desc">
            Cross-platform iOS and Android applications with biometric authentication, offline synchronization, and push notifications.
          </p>
          <a href="/services.php" class="service-link">
            Learn More
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
        </div>

        <div class="service-card">
          <img src="/assets/images/scenes/scene-ecommerce.svg" alt="Ecommerce Development Illustration" class="service-scene-img" width="640" height="440" loading="lazy" />
          <div class="service-icon-box">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4zM3 6h18M16 10a4 4 0 01-8 0"/></svg>
          </div>
          <h3 class="service-title">Ecommerce Development</h3>
          <p class="service-desc">
            Headless storefronts with global multi-currency checkout, dynamic inventory synchronization, and custom admin portals.
          </p>
          <a href="/services.php" class="service-link">
            Learn More
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
        </div>

        <div class="service-card">
          <img src="/assets/images/scenes/scene-game-dev.svg" alt="Game Development Illustration" class="service-scene-img" width="640" height="440" loading="lazy" />
          <div class="service-icon-box">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="6" y1="12" x2="10" y2="12"/><line x1="8" y1="10" x2="8" y2="14"/><line x1="15" y1="13" x2="15.01" y2="13"/><line x1="18" y1="11" x2="18.01" y2="11"/><rect x="2" y="6" width="20" height="12" rx="2"/></svg>
          </div>
          <h3 class="service-title">Game Development</h3>
          <p class="service-desc">
            Interactive 2D web and casual game experiences, procedural logic, and real-time game loops engineered with modern web standards.
          </p>
          <a href="/services.php" class="service-link">
            Learn More
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
        </div>

        <div class="service-card">
          <img src="/assets/images/scenes/scene-digital-solutions.svg" alt="Custom Digital Solutions Illustration" class="service-scene-img" width="640" height="440" loading="lazy" />
          <div class="service-icon-box">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
          </div>
          <h3 class="service-title">Custom Digital Solutions</h3>
          <p class="service-desc">
            Tailored technical problem-solving: database migrations, legacy codebase rewrites, API integrations, and specialized tooling.
          </p>
          <a href="/services.php" class="service-link">
            Learn More
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Selected Work Preview Section -->
  <section class="portfolio-section" id="work">
    <div class="container">
      <div class="section-head" style="display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem;">
        <div>
          <span class="kicker">CASE STUDIES</span>
          <h2 class="section-title">Selected Work</h2>
          <p class="section-subtitle">Real digital products engineered for production reliability.</p>
        </div>
        <a href="/portfolio.php" class="btn btn-secondary">Explore All Projects</a>
      </div>

      <div class="projects-grid" id="homePortfolioGrid">
        <!-- Rendered dynamically by assets/js/portfolio.js -->
      </div>
    </div>
  </section>

  <!-- Why AR Developer -->
  <section class="why-section">
    <div class="container">
      <div class="section-head">
        <span class="kicker">WHY US</span>
        <h2 class="section-title">Why AR Developer</h2>
        <p class="section-subtitle">
          Truthful technical excellence, transparent collaboration, and high-standard craftsmanship.
        </p>
      </div>

      <div class="features-grid">
        <div class="feature-item">
          <h3 class="feature-title">Custom Development</h3>
          <p class="feature-desc">
            Every codebase is architected cleanly without fragile dependencies or slow bloated templates.
          </p>
        </div>

        <div class="feature-item">
          <h3 class="feature-title">Modern Design</h3>
          <p class="feature-desc">
            Clean typography, balanced spatial structure, and generous whitespace that gives your product authority.
          </p>
        </div>

        <div class="feature-item">
          <h3 class="feature-title">Responsive Experiences</h3>
          <p class="feature-desc">
            Tested across smartphones, tablets, laptops, and ultra-wide desktops for flawless rendering.
          </p>
        </div>

        <div class="feature-item">
          <h3 class="feature-title">Performance Focus</h3>
          <p class="feature-desc">
            Sub-second load times, Core Web Vitals optimization, and lean payloads for maximum retention.
          </p>
        </div>

        <div class="feature-item">
          <h3 class="feature-title">Built Around Your Goals</h3>
          <p class="feature-desc">
            Tailored engineering scoped to your budget, technical specifications, and timeline.
          </p>
        </div>

        <div class="feature-item">
          <h3 class="feature-title">Zero Lock-In</h3>
          <p class="feature-desc">
            Deployable on standard hosts like InfinityFree, cPanel, Apache, or cloud containers. Complete source code handover.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- How We Work -->
  <section class="process-section">
    <div class="container">
      <div class="section-head">
        <span class="kicker">METHODOLOGY</span>
        <h2 class="section-title">How We Work</h2>
        <p class="section-subtitle">Our 4-step engineering discipline.</p>
      </div>

      <div class="process-steps">
        <div class="process-card">
          <div class="step-num">01</div>
          <h3 class="step-title">Discuss</h3>
          <p class="step-desc">
            Understand your vision, requirements, technical constraints, and key delivery outcomes.
          </p>
        </div>

        <div class="process-card">
          <div class="step-num">02</div>
          <h3 class="step-title">Plan</h3>
          <p class="step-desc">
            Design the architecture, database schema, responsive layouts, and delivery roadmap.
          </p>
        </div>

        <div class="process-card">
          <div class="step-num">03</div>
          <h3 class="step-title">Build</h3>
          <p class="step-desc">
            Develop clean, maintainable code with continuous staging previews for transparent testing.
          </p>
        </div>

        <div class="process-card">
          <div class="step-num">04</div>
          <h3 class="step-title">Launch</h3>
          <p class="step-desc">
            Deploy to production, optimize speed, verify SEO indexing, and provide documentation.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- What Clients Say (Client Reviews) -->
  <section class="reviews-section" id="reviewsSection">
    <div class="container">
      <div class="section-head" style="text-align: center; max-width: 680px; margin-left: auto; margin-right: auto;">
        <span class="kicker">TESTIMONIALS</span>
        <h2 class="section-title">What Clients Say</h2>
        <p class="section-subtitle">
          Direct feedback from founders, engineers, and product leaders who trust AR Developer.
        </p>
      </div>

      <div class="reviews-grid" id="publicReviewsGrid">
        <!-- Rendered dynamically from Firestore 'reviews' collection -->
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="cta-section">
    <div class="container">
      <div class="cta-box">
        <span class="kicker">COLLABORATE</span>
        <h2 class="cta-title">Have an idea? Let's build it.</h2>
        <p class="cta-desc">
          Ready to turn your concept into reality? Send an inquiry and let's discuss technical execution.
        </p>
        <a href="/contact.php" class="btn btn-primary">Start a Project</a>
      </div>
    </div>
  </section>

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