document.addEventListener("DOMContentLoaded", function () {
  // PRICING FUNCTIONALITY
  const pricingData = {
    logo: {
      basic: {
        plan: "Basic Package",
        price: "£39",
        features: [
          "2 Custom Logo Design Concepts",
          "1 Creative Designer",
          "3 Rounds of Revisions",
          "Final Files (JPG. & PNG)",
          "24-72 Hours TAT",
        ],
      },
      standard: {
        plan: "Standard Package",
        price: "£59",
        features: [
          "3-4 Custom Logo Design Concepts",
          "2 Creative Designers",
          "5-6 Rounds of Revisions",
          "Final Files (JPG, PNG & PDF)",
          "24-72 Hours TAT",
        ],
      },
      premium: {
        plan: "Premium Package",
        price: "£99",
        features: [
          "6 Custom Logo Design Concepts",
          "3 Creative Designers",
          "Unlimited Revisions",
          "Final Files (JPG, PNG, PDF, Ai/Psd)",
          "24-72 hours TAT",
        ],
      },
    },
    web: {
      basic: {
        plan: "Startup Website Package",
        price: "£149",
        features: [
          "1-3 Page Website Design",
          "WordPress Based",
          "1 Banner Design",
          "Hover Effect",
          "Contact/ Query Form",
          "3-4 Revisions",
          "Complete Deployment",
          "100% Ownership",
          "100% Satisfaction Guarantee",
          "✖  Professional Email",
          "✖ SSL",
        ],
      },
      standard: {
        plan: "Standard Website Package",
        price: "£349",
        features: [
          "4-5 Pages Website Design",
          "WordPress Based",
          "3 Sliding Banner Design",
          "Hover Effect",
          "3 Professional Email",
          "Unlimited Revisions",
          "Contact/ Query Form",
          "Complete Deployment",
          "Complete Responsive",
          "100% Ownership",
          "100% Satisfaction Guarantee",
          "✖  SSL",
        ],
      },
      premium: {
        plan: "Elite Website <br>Package",
        price: "£1299",
        features: [
          "10 Unique Pages Website Design",
          "Customized WordPress or PHP Development",
          "Custom, Interactive, Dynamic & High-End Design",
          "10 Stock Images",
          "10 Interactive Sliding Banners",
          "5 Professional Email",
          "Complete Deployment",
          "Complete Responsive",
          "100% Ownership",
          "100% Satisfaction Guarantee",
          "SSL",
        ],
      },
    },
    ecommerce: {
      basic: {
        plan: "Basic",
        price: "£299",
        features: [
          "Basic Ecommerce Setup",
          "5 Product Uploads",
          "Payment Gateway",
          "Mobile Responsive",
          "✖ Custom Features",
        ],
      },
      standard: {
        plan: "Standard",
        price: "£599",
        features: [
          "Full Ecommerce Website",
          "Unlimited Products",
          "SEO Optimization",
          "Payment Gateway",
          "24/7 Support",
        ],
      },
      premium: {
        plan: "Premium",
        price: "£1499",
        features: [
          "Custom Ecommerce Solution",
          "Marketing Tools",
          "SEO Optimization",
          "Custom Features",
          "Priority Support",
        ],
      },
    },
    app: {
      basic: {
        plan: "Basic",
        price: "£499",
        features: [
          "Basic App UI/UX",
          "Prototype",
          "Android or iOS",
          "100% Ownership Rights",
          "✖ Advanced Features",
        ],
      },
      standard: {
        plan: "Standard",
        price: "£999",
        features: [
          "Full UI/UX",
          "Cross-platform",
          "Backend Integration",
          "Advanced Features",
          "24/7 Support",
        ],
      },
      premium: {
        plan: "Premium",
        price: "£1999",
        features: [
          "Custom App Development",
          "AI/ML Features",
          "End-to-End Testing",
          "Priority Support",
          "Ongoing Maintenance",
        ],
      },
    },
    branding: {
      basic: {
        plan: "Starter Package",
        price: "£149/",
        features: [
          "9 Post Designs",
          "Social Media Strategy",
          "Social Media Account Setup",
          "Monthly Progress Report",
          "✖ 1 Video Reel (15-30 Seconds)",
          "✖ Content Creation",
          "✖ Social Media Monitoring",
          "✖ Increase In Followers",
        ],
      },
      standard: {
        plan: "Small Business",
        price: "£249/",
        features: [
          "9 Post Designs",
          "Social Media Strategy",
          "Social Media Account Setup",
          "Content Creation",
          "Social Media Monitoring",
          "Monthly Progress Report",
          "1 Video Reel (15-30 Seconds)",
          "✖ Increase In Followers",
        ],
      },
      premium: {
        plan: "Elite Package",
        price: "£399/",
        features: [
          "9 Post Designs",
          "1 Video Reel (15-30 Seconds)",
          "Social Media Strategy",
          "Social Media Account Setup",
          "Content Creation",
          "Social Media Monitoring",
          "Increase in followers",
          "Monthly Progress Report",
        ],
      },
    },
    smm: {
      basic: {
        plan: "Basic",
        price: "£99",
        features: [
          "2 Social Media Posts",
          "Account Setup",
          "Basic Engagement",
          "100% Ownership Rights",
          "✖ Paid Ad Management",
        ],
      },
      standard: {
        plan: "Standard",
        price: "£299",
        features: [
          "10 Posts",
          "Community Management",
          "Hashtag Research",
          "Paid Ad Strategy",
          "24/7 Support",
        ],
      },
      premium: {
        plan: "Premium",
        price: "£799",
        features: [
          "Custom Content",
          "Advanced Targeting",
          "Paid Ad Management",
          "Influencer Collaboration",
          "Priority Support",
        ],
      },
    },
    seo: {
      basic: {
        plan: "Basic",
        price: "£79",
        features: [
          "Basic SEO Audit",
          "Keyword Research",
          "On-Page SEO",
          "100% Ownership Rights",
          "✖ Off-Page SEO",
        ],
      },
      standard: {
        plan: "Standard",
        price: "£199",
        features: [
          "Full SEO Optimization",
          "Technical SEO",
          "Link Building",
          "Content Strategy",
          "24/7 Support",
        ],
      },
      premium: {
        plan: "Premium",
        price: "£499",
        features: [
          "Enterprise SEO",
          "Competitive Analysis",
          "AI-driven SEO",
          "Continuous Optimization",
          "Priority Support",
        ],
      },
    },
    video: {
      basic: {
        plan: "2D Animation <br>Starter",
        price: "£199",
        features: [
          "30s Duration",
          "Professional Script",
          "Story board",
          "Custom Graphics",
          "Animation & SFX",
          "Resolution - HD",
          "Voice Over Recording",
          "Sync Voice Over",
          "Unlimited Revisions",
          "Turnaround time 2-3 weeks",
        ],
      },
      standard: {
        plan: "2D Animation Professional",
        price: "£299",
        features: [
          "Up-to 60s Duration",
          "Professional Script",
          "Story board",
          "Custom Graphics",
          "Animation & SFX",
          "Resolution - HD",
          "Voice Over Recording",
          "Sync Voice Over",
          "Unlimited Revisions",
          "Turnaround time 3-4 weeks",
        ],
      },
      premium: {
        plan: "2D Animation Supreme",
        price: "£999",
        features: [
          "Up-to 120s Duration",
          "Professional Script",
          "Story board",
          "Custom Graphics",
          "Animation & SFX",
          "Resolution - HD",
          "Voice Over Recording",
          "Sync Voice Over",
          "Unlimited Revisions",
          "Turnaround time 4-6 weeks",
        ],
      },
    },
  };

  // Function to update pricing based on selected category



  function updatePricing(category) {
    const data = pricingData[category];
    if (!data) return;

    const priceElements = {
      basic: document.getElementById("basic-price"),
      standard: document.getElementById("standard-price"),
      premium: document.getElementById("premium-price"),
    };

    const planElements = {
      basic: document.getElementById("basic-plan"),
      standard: document.getElementById("standard-plan"),
      premium: document.getElementById("premium-plan"),
    };

    ["basic", "standard", "premium"].forEach((type) => {
      if (priceElements[type]) {
        priceElements[type].innerHTML =
          category === "branding"
            ? `${data[type].price} <span class="per-month">Month</span>`
            : data[type].price;
      }

      if (planElements[type]) {
        planElements[type].innerHTML = data[type].plan;
      }

      updateFeatures(`${type}-features`, data[type].features);
    });
  }

  function updateFeatures(elementId, features) {
    const ul = document.getElementById(elementId);
    if (!ul) return;

    ul.innerHTML = "";
    features.forEach((feature) => {
      const li = document.createElement("li");
      li.className = "mb-3 d-flex align-items-start gap-2";

      if (feature.includes("✖")) {
        li.classList.add("not-included", "text-muted", "opacity-50");
        li.innerHTML = `<i class="fas fa-times-circle mt-1 text-danger"></i> <span>${feature.replace("✖", "").trim()}</span>`;
      } else {
        li.classList.add("included");
        li.innerHTML = `<i class="fas fa-check-circle mt-1 text-primary"></i> <span>${feature.replace("✔", "").trim()}</span>`;
      }
      ul.appendChild(li);
    });
  }

  document.querySelectorAll(".tab").forEach((tab) => {
    tab.addEventListener("click", function () {
      document.querySelectorAll(".tab").forEach((t) => t.classList.remove("active"));
      this.classList.add("active");
      updatePricing(this.dataset.category);
    });
  });

  const bodyClass =
    document.body.classList.contains("web-pricing-tab")
      ? "web"
      : document.body.classList.contains("brand-pricing-tab")
        ? "branding"
        : document.body.classList.contains("smm-pricing-tab")
          ? "smm"
          : document.body.classList.contains("seo-pricing-tab")
            ? "seo"
            : document.body.classList.contains("app-pricing-tab")
              ? "app"
              : document.body.classList.contains("ecom-pricing-tab")
                ? "ecommerce"
                : "logo";

  updatePricing(bodyClass);

  // SHOWCASE FILTER
  const filterButtons = document.querySelectorAll(".showcase-filter-menu button");
  const showcaseCards = document.querySelectorAll(".showcase-card");
  const learnMoreButton = document.querySelector(".showcase-learn-more");

  if (filterButtons.length && showcaseCards.length && learnMoreButton) {
    let activeFilter = "all";
    let visibleCount = 6;

    function updateVisibleCards() {
      let shown = 0;
      showcaseCards.forEach((card) => {
        const categoryEl = card.querySelector(".showcase-category");
        if (!categoryEl) return;
        const category = categoryEl.textContent.trim().toLowerCase();
        const matchesFilter = activeFilter === "all" || category.includes(activeFilter);
        if (matchesFilter && shown < visibleCount) {
          card.style.display = "block";
          shown++;
        } else {
          card.style.display = "none";
        }
      });

      const totalMatching = Array.from(showcaseCards).filter((card) => {
        const categoryEl = card.querySelector(".showcase-category");
        if (!categoryEl) return false;
        const category = categoryEl.textContent.trim().toLowerCase();
        return activeFilter === "all" || category.includes(activeFilter);
      }).length;

      learnMoreButton.style.display = shown >= totalMatching ? "none" : "";

      // Refresh AOS to catch newly visible/hidden elements
      if (typeof AOS !== 'undefined') {
        AOS.refresh();
      }
    }

    filterButtons.forEach((button) => {
      button.addEventListener("click", () => {
        filterButtons.forEach((btn) => btn.classList.remove("active"));
        button.classList.add("active");
        activeFilter = button.textContent.trim().toLowerCase();
        visibleCount = 6;
        updateVisibleCards();
      });
    });

    learnMoreButton.addEventListener("click", () => {
      visibleCount += 6;
      updateVisibleCards();
    });

    updateVisibleCards();
  }

  // NAVIGATION TOGGLE
  const menuButton = document.querySelector(".menu");
  const navLinks = document.querySelector("nav ul");
  if (menuButton && navLinks) {
    menuButton.addEventListener("click", () => {
      navLinks.classList.toggle("active-menu");
    });
  }


  // CAROUSEL (3D Coverflow)
  const carousel = document.getElementById("services-carousel");
  const items = Array.from(document.querySelectorAll(".service-carousel-item"));
  let currentIndex = 0;

  function renderCarousel() {
    const total = items.length;
    items.forEach((item, i) => {
      const offset = ((i - currentIndex + total) % total);
      const r = offset <= total / 2 ? offset : offset - total;

      // Calculate translation and rotation for Coverflow effect
      const translateX = r * 280; // Adjusted spacing
      const rotateY = r * -45;    // Adjusted rotation
      const scale = r === 0 ? 1 : 0.8;
      const opacity = Math.abs(r) > 2 ? 0 : 1 - (Math.abs(r) * 0.2);

      item.style.transform = `translateX(${translateX}px) rotateY(${rotateY}deg) scale(${scale})`;
      item.style.opacity = opacity;
      item.style.zIndex = `${100 - Math.abs(r)}`;
      item.style.pointerEvents = r === 0 ? "auto" : "none"; // Only middle card is clickable
    });
  }

  function moveNext() {
    currentIndex = (currentIndex + 1) % items.length;
    renderCarousel();
  }

  if (carousel && items.length) {
    setInterval(moveNext, 4000); // Slightly slower intervals for better readability
    renderCarousel();

    // Optional: Add click to navigate
    items.forEach((item, index) => {
      item.addEventListener("click", () => {
        currentIndex = index;
        renderCarousel();
      });
    });
  }





  // BACK-TO-TOP BUTTON
  const backToTopButton = document.getElementById("back-to-top");

  if (backToTopButton) {
    window.addEventListener("scroll", () => {
      backToTopButton.style.display =
        window.scrollY > 100 ? "block" : "none";
    });

    backToTopButton.addEventListener("click", () => {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    });
  }
});
