// City Data
const citiesData = {
  bengaluru: {
    name: "Bengaluru",
    description:
      "The Silicon Valley of India, Bangalore is home to pleasant climate and seamless connectivity. An ever-booming real estate skyline, Bengaluru is our home ground, featuring some of the finest luxury flats strategically spread across the city. SOBHA is known for its Architectural Theme based Apartment Projects in Bangalore.",
    highlight:
      "AVENTURINE Offers Best Flats in Bangalore for Sale, Luxury Apartments & Houses in Bangalore.",
    ongoingSubtabs: ["North", "East", "South", "Central"],
    deliveredSubtabs: ["South", "Central"],
    projects: {
      ongoing: {
        north: [
          {
            name: "AVENTURINE MAGNUS",
            location: "Bannerghatta Main Road, Bengaluru",
            area: "1856 - 2578 sq. ft.",
            type: "3 & 4 BHK",
            label: "new-launch",
            image: "./Assets/Images/residential3.jpg",
          },
          {
            name: "AVENTURINE LUXE NORTH",
            location: "Whitefield Main Road, Bengaluru",
            area: "1400 - 2200 sq. ft.",
            type: "2 & 3 BHK",
            label: "available",
            image: "./Assets/Images/residential.webp",
          },
          {
            name: "AVENTURINE PINNACLE",
            location: "Indiranagar, Bengaluru",
            area: "1600 - 2400 sq. ft.",
            type: "3 BHK",
            label: "new-launch",
            image: "./Assets/Images/residential4.jpg",
          },
        ],
        east: [
          {
            name: "AVENTURINE WESTEND",
            location: "Indira Nagar, Bengaluru",
            area: "1200 - 2000 sq. ft.",
            type: "2 & 3 BHK",
            label: "available",
            image: "./Assets/Images/residential3.jpg",
          },
        ],
        south: [
          {
            name: "AVENTURINE COVENANT",
            location: "Koramangala, Bengaluru",
            area: "1400 - 2400 sq. ft.",
            type: "3 & 4 BHK",
            label: "new-launch",
            image: "./Assets/Images/residential1.jpg",
          },
        ],
        central: [
          {
            name: "AVENTURINE TROPICAL GARDENS",
            location: "Whitefield, Bengaluru",
            area: "1800 - 2800 sq. ft.",
            type: "3 & 4 BHK",
            label: "available",
            image: "./Assets/Images/residential2.jpg",
          },
        ],
      },
      delivered: {
        south: [
          {
            name: "AVENTURINE TOWNPARK",
            location: "Near Electronic City, Bengaluru",
            area: "1240 - 2846 sq. ft.",
            type: "2, 3 & 4 BHK",
            label: "sold-out",
            image: "./Assets/Images/residential3.jpg",
          },
        ],
        central: [
          {
            name: "AVENTURINE FOREST VIEW",
            location: "Sarjapur Road, Bengaluru",
            area: "2000 - 3000 sq. ft.",
            type: "3 & 4 BHK",
            label: "sold-out",
            image:
              "https://images.unsplash.com/photo-1449844908441-8829872d2607?w=600&h=400&fit=crop",
          },
        ],
      },
    },
  },
};

let currentCity = "bengaluru";
let currentTab = "ongoing";
let currentSubtab = null;

// Initialize
function init() {
  renderCityList();
  renderContent();
}

// Render City Sidebar
function renderCityList() {
  const cityList = document.getElementById("cityList");
  cityList.innerHTML = "";
  Object.keys(citiesData).forEach((cityKey) => {
    const li = document.createElement("li");
    const btn = document.createElement("button");
    btn.className = "city-btn" + (cityKey === currentCity ? " active" : "");
    btn.textContent = citiesData[cityKey].name;
    btn.onclick = () => switchCity(cityKey);
    li.appendChild(btn);
    cityList.appendChild(li);
  });
}

// Switch City
function switchCity(cityKey) {
  currentCity = cityKey;
  currentTab = "ongoing";
  currentSubtab = null;
  renderCityList();
  renderContent();
}

// Render Content
function renderContent() {
  const city = citiesData[currentCity];

  // City Header
  const header = document.getElementById("cityHeader");
  header.innerHTML = `
                <h1 class="city-title">${city.name}</h1>
                <p class="city-description">${city.description}</p>
                <p class="city-highlight">${city.highlight}</p>
            `;

  // Project Tabs
  const tabs = document.getElementById("projectTabs");
  tabs.innerHTML = `
                <button class="project-tab active" onclick="switchTab('ongoing')">ONGOING PROJECTS</button>
                <button class="project-tab" onclick="switchTab('delivered')">DELIVERED PROJECTS</button>
            `;

  // Render Subtabs and Projects
  renderSubtabsAndProjects();
}

// Switch Tab
function switchTab(tab) {
  currentTab = tab;
  currentSubtab = null;

  const tabs = document.querySelectorAll(".project-tab");
  tabs.forEach((t, i) => {
    t.classList.remove("active");
    if ((i === 0 && tab === "ongoing") || (i === 1 && tab === "delivered")) {
      t.classList.add("active");
    }
  });

  renderSubtabsAndProjects();
}

// Render Subtabs and Projects
function renderSubtabsAndProjects() {
  const city = citiesData[currentCity];
  const subtabsContainer = document.getElementById("projectSubtabs");
  const subtabs =
    currentTab === "ongoing" ? city.ongoingSubtabs : city.deliveredSubtabs;

  if (!currentSubtab) {
    currentSubtab = subtabs[0];
  }

  // Render Subtabs
  subtabsContainer.innerHTML = "";
  subtabs.forEach((subtab) => {
    const btn = document.createElement("button");
    btn.className =
      "subtab-btn" +
      (subtab === currentSubtab ||
      subtab.toLowerCase() === currentSubtab?.toLowerCase()
        ? " active"
        : "");
    btn.textContent = subtab;
    btn.onclick = () => switchSubtab(subtab);
    subtabsContainer.appendChild(btn);
  });

  // Render Projects
  renderProjects();
}

// Switch Subtab
function switchSubtab(subtab) {
  currentSubtab = subtab;

  const buttons = document.querySelectorAll(".subtab-btn");
  buttons.forEach((btn) => {
    btn.classList.remove("active");
    if (btn.textContent.toLowerCase() === subtab.toLowerCase()) {
      btn.classList.add("active");
    }
  });

  renderProjects();
}

// Render Projects
function renderProjects() {
  const city = citiesData[currentCity];
  const grid = document.getElementById("projectsGrid");
  const subtabKey = currentSubtab.toLowerCase();

  let projects = [];
  if (currentTab === "ongoing" && city.projects.ongoing[subtabKey]) {
    projects = city.projects.ongoing[subtabKey];
  } else if (currentTab === "delivered" && city.projects.delivered[subtabKey]) {
    projects = city.projects.delivered[subtabKey];
  }

  grid.innerHTML = "";
  projects.forEach((project) => {
    const card = document.createElement("div");
    card.className = "project-card";
    card.innerHTML = `
                    <div class="project-image-container">
                        <img src="${project.image}" alt="${project.name}">
                        <div class="project-label ${project.label}">
                            ${
                              project.label === "new-launch"
                                ? "New Launch"
                                : project.label === "sold-out"
                                ? "Sold Out"
                                : "Available"
                            }
                        </div>
                    </div>
                    <div class="project-info">
                        <div class="project-name">
                            <h3>${project.name}</h3>
                        </div>
                        <div class="project-location">
                            <div class="project-location-label">Location</div>
                            <div class="project-location-text">${
                              project.location
                            }</div>
                        </div>
                        <div class="project-specs">
                            <div class="spec-item">
                                <div class="spec-label">Area</div>
                                <div class="spec-value">${project.area}</div>
                            </div>
                            <div class="spec-item">
                                <div class="spec-label">Type</div>
                                <div class="spec-value">${project.type}</div>
                            </div>
                        </div>
                    </div>
                `;
    grid.appendChild(card);
  });
}

// Initialize on load
init();
