<?php
/**
 * AR Developer - Services Page
 * Full capabilities breakdown with truthful technical details
 */
require_once __DIR__ . '/config/auth.php';
requireAuthentication();

$pageTitle = 'Services | Website, Software, App, Ecommerce & Game Development - AR Developer';
$pageDescription = 'Explore AR Developer services: Custom Website Development, Enterprise Software, iOS/Android Mobile Apps, Headless Ecommerce, and Game Development by ARaza.';
$canonicalUrl = 'https://ardeveloper.online/services.php';
$activeNav = 'services';
require_once __DIR__ . '/includes/header.php';
?>

  <section class="hero-section" style="padding-bottom: 2rem;">
    <div class="container" style="text-align: center; max-width: 800px;">
      <span class="kicker">CAPABILITIES</span>
      <h1 class="hero-title" style="margin-bottom: 1.5rem;">Services & Solutions</h1>
      <p class="hero-desc">
        We architect and ship high-performance digital products engineered around your exact operational goals and brand vision.
      </p>
    </div>
  </section>

  <section class="services-section" style="border-top: none; padding-top: 2rem;">
    <div class="container">
      <div class="services-grid" style="grid-template-columns: repeat(2, 1fr); gap: 2.5rem;">
        
        <!-- 01 Website Development -->
        <div class="service-card" style="padding: 2.5rem;">
          <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>
          <h2 class="service-title" style="font-size: 1.6rem;">Website Development</h2>
          <p class="service-desc" style="font-size: 1rem; margin-bottom: 1.5rem;">
            Fast, clean, responsive corporate websites, agency showcases, portfolios, and high-converting landing pages. Designed from first principles with zero slow bloated builders.
          </p>
          <ul style="list-style: none; margin-bottom: 2rem; color: var(--text-secondary); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem;">
            <li>• Core Web Vitals performance optimization (&lt;1s load times)</li>
            <li>• Semantic, crawlable technical SEO & Schema.org JSON-LD</li>
            <li>• Strict responsive layout across desktop, tablet, and mobile</li>
            <li>• Frictionless deployment to InfinityFree, Apache, or cloud environments</li>
          </ul>
          <a href="/contact.php" class="btn btn-secondary btn-sm" style="width: fit-content;">Discuss Web Project</a>
        </div>

        <!-- 02 Custom Software Development -->
        <div class="service-card" style="padding: 2.5rem;">
          <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>
          <h2 class="service-title" style="font-size: 1.6rem;">Custom Software Development</h2>
          <p class="service-desc" style="font-size: 1rem; margin-bottom: 1.5rem;">
            Bespoke cloud software systems, internal enterprise dashboards, real-time analytics engines, and robust REST APIs built to automate mission-critical workflows.
          </p>
          <ul style="list-style: none; margin-bottom: 2rem; color: var(--text-secondary); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem;">
            <li>• Scalable database architecture (relational SQL & NoSQL Firestore)</li>
            <li>• Multi-role access control (RBAC) and enterprise security hardening</li>
            <li>• Event-driven data processing and real-time dashboard telemetry</li>
            <li>• Clean documentation and maintainable code architecture</li>
          </ul>
          <a href="/contact.php" class="btn btn-secondary btn-sm" style="width: fit-content;">Discuss Software Project</a>
        </div>

        <!-- 03 Mobile App Development -->
        <div class="service-card" style="padding: 2.5rem;">
          <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>
          <h2 class="service-title" style="font-size: 1.6rem;">Mobile App Development</h2>
          <p class="service-desc" style="font-size: 1rem; margin-bottom: 1.5rem;">
            Intuitive iOS and Android mobile applications engineered for high performance, smooth gestures, offline persistence, and biometric security.
          </p>
          <ul style="list-style: none; margin-bottom: 2rem; color: var(--text-secondary); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem;">
            <li>• Cross-platform performance with 60fps touch interactions</li>
            <li>• Biometric authentication (FaceID, fingerprint recognition)</li>
            <li>• Offline-first SQLite/Firestore caching & cloud synchronization</li>
            <li>• Push notifications, background sync, and native device hardware access</li>
          </ul>
          <a href="/contact.php" class="btn btn-secondary btn-sm" style="width: fit-content;">Discuss App Project</a>
        </div>

        <!-- 04 Ecommerce Development -->
        <div class="service-card" style="padding: 2.5rem;">
          <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>
          <h2 class="service-title" style="font-size: 1.6rem;">Ecommerce Development</h2>
          <p class="service-desc" style="font-size: 1rem; margin-bottom: 1.5rem;">
            Headless commerce architecture that eliminates slow loading barriers, boosting conversion rates and providing seamless checkout worldwide.
          </p>
          <ul style="list-style: none; margin-bottom: 2rem; color: var(--text-secondary); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem;">
            <li>• Lightning-fast faceted search and instant product filtering</li>
            <li>• Stripe, PayPal, Apple Pay, and Google Pay payment gateways</li>
            <li>• Dynamic Cloudinary asset management for crisp, optimized visuals</li>
            <li>• Automated inventory tracking and custom admin order management</li>
          </ul>
          <a href="/contact.php" class="btn btn-secondary btn-sm" style="width: fit-content;">Discuss Ecommerce Project</a>
        </div>

        <!-- 05 Game Development -->
        <div class="service-card" style="padding: 2.5rem;">
          <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>
          <h2 class="service-title" style="font-size: 1.6rem;">Game Development</h2>
          <p class="service-desc" style="font-size: 1rem; margin-bottom: 1.5rem;">
            Lightweight, engaging 2D casual browser games, gamified product interactive demos, and multiplayer mechanics built for high retention.
          </p>
          <ul style="list-style: none; margin-bottom: 2rem; color: var(--text-secondary); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem;">
            <li>• HTML5 Canvas & WebGL game loops with fluid rendering</li>
            <li>• Responsive touch and keyboard input handling</li>
            <li>• Physics simulations, collision detection, and procedural puzzles</li>
            <li>• Zero-install immediate browser access for marketing campaigns</li>
          </ul>
          <a href="/contact.php" class="btn btn-secondary btn-sm" style="width: fit-content;">Discuss Game Project</a>
        </div>

        <!-- 06 Custom Digital Solutions -->
        <div class="service-card" style="padding: 2.5rem;">
          <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>
          <h2 class="service-title" style="font-size: 1.6rem;">Custom Digital Solutions</h2>
          <p class="service-desc" style="font-size: 1rem; margin-bottom: 1.5rem;">
            Technical problem solving for unique engineering challenges: legacy modernization, external API integrations, server migration, and technical auditing.
          </p>
          <ul style="list-style: none; margin-bottom: 2rem; color: var(--text-secondary); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem;">
            <li>• Third-party API integrations (CRM, billing, communications)</li>
            <li>• Infrastructure deployment and speed optimization</li>
            <li>• Database migration and schema refactoring</li>
            <li>• Technical consultation directly with ARaza</li>
          </ul>
          <a href="/contact.php" class="btn btn-secondary btn-sm" style="width: fit-content;">Discuss Custom Solution</a>
        </div>

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

  <!-- CTA Section -->
  <section class="cta-section">
    <div class="container">
      <div class="cta-box">
        <span class="kicker">NEXT STEP</span>
        <h2 class="cta-title">Ready to launch your project?</h2>
        <p class="cta-desc">
          Tell us about your requirements, timeline, and goals. We'll provide a technical proposal and transparent scope.
        </p>
        <a href="/contact.php" class="btn btn-primary">Start a Project</a>
      </div>
    </div>
  </section>

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