<?php
/* Template Name: OnePage Bootstrap */
get_header();
?>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="<?php echo home_url(); ?>">Dawah Academy</a>
    <div class="ms-auto">
      <button id="lang-en" class="btn btn-outline-primary btn-sm">EN</button>
      <button id="lang-ar" class="btn btn-outline-primary btn-sm">AR</button>
    </div>
  </div>
</nav>

<!-- Hero -->
<header class="hero bg-primary text-white text-center">
  <div class="container">
    <h1 id="hero-title">Loading...</h1>
    <p id="hero-tagline" class="lead"></p>
  </div>
</header>

<!-- About -->
<section id="about" class="py-5">
  <div class="container">
    <h2>About Us</h2>
    <div id="about-content"></div>
  </div>
</section>

<!-- Programs -->
<section id="programs" class="py-5 bg-light">
  <div class="container">
    <h2>Programs</h2>
    <div id="programs-container" class="row"></div>
  </div>
</section>

<!-- Contact -->
<section id="contact" class="py-5">
  <div class="container">
    <h2>Contact</h2>
    <p>Email: info@dawahacademy.org</p>
    <p>Phone: +1 (XXX) XXX-XXXX</p>
  </div>
</section>

<?php get_footer(); ?>

<script>
const pages = { en: 9, ar: 7 }; // Replace with your actual page IDs

const labels = {
  en: { about: "About Us", programs: "Programs", contact: "Contact", button: "Learn More" },
  ar: { about: "من نحن", programs: "البرامج", contact: "اتصل بنا", button: "المزيد" }
};

function loadContent(lang) {
  document.body.setAttribute("lang", lang);

  // Update headings
  document.querySelector('#about h2').innerText = labels[lang].about;
  document.querySelector('#programs h2').innerText = labels[lang].programs;
  document.querySelector('#contact h2').innerText = labels[lang].contact;

  // Fetch page content
  fetch(`https://azzroo.com/wp-json/wp/v2/pages/${pages[lang]}`)
    .then(res => res.json())
    .then(page => {
      document.getElementById('hero-title').innerHTML = page.title.rendered;
      document.getElementById('hero-tagline').innerHTML = page.excerpt.rendered;
      document.getElementById('about-content').innerHTML = page.content.rendered;
    });

  // Fetch Programs (replace 12 with your actual category ID)
  fetch('https://azzroo.com/wp-json/wp/v2/posts?categories=12')
    .then(res => res.json())
    .then(data => {
      const container = document.getElementById('programs-container');
      container.innerHTML = '';
      data.forEach(post => {
        const col = document.createElement('div');
        col.className = 'col-md-4';
        col.innerHTML = `
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">${post.title.rendered}</h5>
              <p class="card-text">${post.excerpt.rendered}</p>
              <a href="${post.link}" class="btn btn-primary">${labels[lang].button}</a>
            </div>
          </div>`;
        container.appendChild(col);
      });
    });
}

document.getElementById('lang-en').addEventListener('click', () => loadContent('en'));
document.getElementById('lang-ar').addEventListener('click', () => loadContent('ar'));
loadContent('en');
</script>

