const menuToggle = document.getElementById("menuToggle");
const navLinks = document.getElementById("navLinks");

if (menuToggle && navLinks) {
  menuToggle.addEventListener("click", () => {
    navLinks.classList.toggle("open");
  });

  navLinks.querySelectorAll("a").forEach((link) => {
    link.addEventListener("click", () => navLinks.classList.remove("open"));
  });
}

const tabs = document.querySelectorAll(".tab");
const panels = document.querySelectorAll(".panel");

tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    const target = tab.getAttribute("data-tab");

    tabs.forEach((t) => t.classList.remove("active"));
    panels.forEach((panel) => panel.classList.remove("active"));

    tab.classList.add("active");
    document.getElementById(target)?.classList.add("active");
  });
});

const faqButtons = document.querySelectorAll(".faq-question");

faqButtons.forEach((btn) => {
  btn.addEventListener("click", () => {
    const answer = btn.nextElementSibling;
    const sign = btn.querySelector("span");
    const isOpen = answer.style.maxHeight;

    faqButtons.forEach((otherBtn) => {
      const otherAnswer = otherBtn.nextElementSibling;
      const otherSign = otherBtn.querySelector("span");
      otherAnswer.style.maxHeight = null;
      otherSign.textContent = "+";
    });

    if (!isOpen) {
      answer.style.maxHeight = `${answer.scrollHeight}px`;
      sign.textContent = "-";
    }
  });
});

const revealEls = document.querySelectorAll(".reveal");
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("in-view");
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.2 }
);

revealEls.forEach((el) => observer.observe(el));

function getSelectedPlan() {
  return localStorage.getItem("selected_plan") || "general";
}

function saveFormEntry(plan, formName, data) {
  const safePlan = (plan || "general").toLowerCase();
  const dataKey = "techechi_plan_data";
  const textKey = "techechi_text_file";

  const grouped = JSON.parse(localStorage.getItem(dataKey) || "{}");
  if (!grouped[safePlan]) grouped[safePlan] = [];

  const entry = {
    form: formName,
    plan: safePlan,
    submittedAt: new Date().toISOString(),
    ...data
  };
  grouped[safePlan].push(entry);
  localStorage.setItem(dataKey, JSON.stringify(grouped));

  const existingText = localStorage.getItem(textKey) || "";
  const line = [
    `Plan: ${safePlan}`,
    `Form: ${formName}`,
    `Time: ${entry.submittedAt}`,
    `Data: ${JSON.stringify(data)}`,
    "-----"
  ].join("\n");
  localStorage.setItem(textKey, existingText ? `${existingText}\n${line}` : line);
}

document.querySelectorAll(".plan-link").forEach((link) => {
  link.addEventListener("click", () => {
    const plan = link.dataset.plan || "general";
    localStorage.setItem("selected_plan", plan);
  });
});

const callOpenTriggers = document.querySelectorAll(".open-call");
const callModal = document.getElementById("callModal");
const callOverlay = document.getElementById("callOverlay");
const callClose = document.getElementById("callClose");
const callForm = document.getElementById("callForm");
const callName = document.getElementById("callName");
const callPhone = document.getElementById("callPhone");
const callEmail = document.getElementById("callEmail");
const callTiming = document.getElementById("callTiming");
const callTopic = document.getElementById("callTopic");
const callStatus = document.getElementById("callStatus");

const authModal = document.getElementById("authModal");
const authOverlay = document.getElementById("authOverlay");
const authClose = document.getElementById("authClose");
const authTriggers = document.querySelectorAll(".open-auth");
const step1Form = document.getElementById("leadFormStep1");
const step2Form = document.getElementById("leadFormStep2");
const step1Status = document.getElementById("step1Status");
const step2Status = document.getElementById("step2Status");
const backToStep1Btn = document.getElementById("backToStep1");

const firstNameInput = document.getElementById("firstName");
const lastNameInput = document.getElementById("lastName");
const leadEmailInput = document.getElementById("leadEmail");
const leadAgeInput = document.getElementById("leadAge");
const leadPhoneInput = document.getElementById("leadPhone");
const leadCityInput = document.getElementById("leadCity");
const leadBusinessInput = document.getElementById("leadBusiness");

const whyJoinInput = document.getElementById("whyJoin");
const whyInterestedInput = document.getElementById("whyInterested");
const goalsInput = document.getElementById("goals");
const experienceInput = document.getElementById("experience");
const supportNeedInput = document.getElementById("supportNeed");

const nameRegex = /^[A-Za-z][A-Za-z\s'-]{1,29}$/;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
const phoneRegex = /^\+?[0-9]{10,15}$/;

function getErrorElement(input) {
  return input.closest(".field-group")?.querySelector(".field-error");
}

function setFieldError(input, message) {
  const errorEl = getErrorElement(input);
  input.classList.add("error");
  if (errorEl) errorEl.textContent = message;
}

function clearFieldError(input) {
  const errorEl = getErrorElement(input);
  input.classList.remove("error");
  if (errorEl) errorEl.textContent = "";
}

function openAuthModal(event) {
  event.preventDefault();
  authModal.classList.add("open");
  authModal.setAttribute("aria-hidden", "false");
  document.body.classList.add("modal-open");
  step1Form.classList.add("active");
  step2Form.classList.remove("active");
}

function closeAuthModal() {
  authModal.classList.remove("open");
  authModal.setAttribute("aria-hidden", "true");
  document.body.classList.remove("modal-open");
  step1Status.textContent = "";
  step2Status.textContent = "";
}

authTriggers.forEach((trigger) => trigger.addEventListener("click", openAuthModal));
authClose.addEventListener("click", closeAuthModal);
authOverlay.addEventListener("click", closeAuthModal);

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape" && authModal.classList.contains("open")) {
    closeAuthModal();
  }
  if (event.key === "Escape" && chatModal.classList.contains("open")) {
    closeChatbot();
  }
  if (event.key === "Escape" && callModal.classList.contains("open")) {
    closeCallModal();
  }
});

[firstNameInput, lastNameInput, leadEmailInput, leadAgeInput, leadPhoneInput, leadCityInput, leadBusinessInput].forEach((input) => {
  input.addEventListener("input", () => clearFieldError(input));
});

[
  whyJoinInput,
  whyInterestedInput,
  goalsInput,
  experienceInput,
  supportNeedInput
].forEach((input) => {
  input.addEventListener("input", () => clearFieldError(input));
});

step1Form.addEventListener("submit", (event) => {
  event.preventDefault();
  step1Status.textContent = "";

  let isValid = true;

  if (!nameRegex.test(firstNameInput.value.trim())) {
    setFieldError(firstNameInput, "Enter a valid first name.");
    isValid = false;
  }

  if (!nameRegex.test(lastNameInput.value.trim())) {
    setFieldError(lastNameInput, "Enter a valid last name.");
    isValid = false;
  }

  if (!emailRegex.test(leadEmailInput.value.trim())) {
    setFieldError(leadEmailInput, "Enter a valid email address.");
    isValid = false;
  }

  const ageValue = Number(leadAgeInput.value);
  if (!Number.isFinite(ageValue) || ageValue < 16 || ageValue > 80) {
    setFieldError(leadAgeInput, "Enter age between 16 and 80.");
    isValid = false;
  }

  if (!phoneRegex.test(leadPhoneInput.value.trim())) {
    setFieldError(leadPhoneInput, "Enter a valid phone number.");
    isValid = false;
  }

  if (leadCityInput.value.trim().length < 2) {
    setFieldError(leadCityInput, "Enter your city.");
    isValid = false;
  }

  if (leadBusinessInput.value.trim().length < 2) {
    setFieldError(leadBusinessInput, "Enter your business/work profile.");
    isValid = false;
  }

  if (!isValid) {
    step1Status.textContent = "Please correct the highlighted fields.";
    return;
  }

  step1Form.classList.remove("active");
  step2Form.classList.add("active");
  step1Status.textContent = "";
});

backToStep1Btn.addEventListener("click", () => {
  step2Form.classList.remove("active");
  step1Form.classList.add("active");
  step2Status.textContent = "";
});

step2Form.addEventListener("submit", (event) => {
  event.preventDefault();
  step2Status.textContent = "";

  let isValid = true;

  [whyJoinInput, whyInterestedInput, goalsInput, experienceInput, supportNeedInput].forEach((input) => {
    if (input.value.trim().length < 10) {
      setFieldError(input, "Please add at least 10 characters.");
      isValid = false;
    }
  });

  if (!isValid) {
    step2Status.textContent = "Please answer all questions before submit.";
    return;
  }

  saveFormEntry(getSelectedPlan(), "get_started_two_step", {
    firstName: firstNameInput.value.trim(),
    lastName: lastNameInput.value.trim(),
    email: leadEmailInput.value.trim(),
    age: leadAgeInput.value.trim(),
    phone: leadPhoneInput.value.trim(),
    city: leadCityInput.value.trim(),
    business: leadBusinessInput.value.trim(),
    whyJoin: whyJoinInput.value.trim(),
    whyInterested: whyInterestedInput.value.trim(),
    goals: goalsInput.value.trim(),
    experience: experienceInput.value.trim(),
    supportNeed: supportNeedInput.value.trim()
  });

  step2Status.textContent = "Thank you. Your response has been submitted.";

  setTimeout(() => {
    step1Form.reset();
    step2Form.reset();
    step2Status.textContent = "";
    closeAuthModal();
  }, 1200);
});

const chatOpenTriggers = document.querySelectorAll(".open-chat");
const chatModal = document.getElementById("chatModal");
const chatOverlay = document.getElementById("chatOverlay");
const chatbotPanel = document.getElementById("chatbotPanel");
const chatClose = document.getElementById("chatClose");
const chatQuick = document.getElementById("chatQuick");
const chatMessages = document.getElementById("chatMessages");
const chatForm = document.getElementById("chatForm");
const chatInput = document.getElementById("chatInput");

const qaPairs = [
  { q: "What services does techechi.shop provide?", a: "We provide paid ads, SEO/content, lifecycle automation, and conversion design.", k: ["services", "provide", "offer"] },
  { q: "How do I get started on this website?", a: "Click the Get started button in the navbar and complete the 2-step form.", k: ["get started", "start", "begin"] },
  { q: "How can I contact your team?", a: "Use Talk to us for quick help or submit the Get started form for direct follow-up.", k: ["contact", "team", "reach"] },
  { q: "Where can I see pricing plans?", a: "Open the Plans section in navbar or scroll to the pricing cards.", k: ["pricing", "plans", "price"] },
  { q: "What information is required in the Get started form?", a: "First name, last name, email, age, phone, city, and business/work profile.", k: ["information", "required", "form"] },
  { q: "Why is there a second form after submit?", a: "The second form helps us understand your goals and interest to give better guidance.", k: ["second form", "why", "questionnaire"] },
  { q: "How do I use the services tab section?", a: "Click each service tab to switch content between Paid Media, SEO, Automation, and CRO.", k: ["services tab", "tab", "switch"] },
  { q: "How do FAQs work on the site?", a: "Click any FAQ row to expand it. Only one answer stays open at a time.", k: ["faq", "expand", "questions"] },
  { q: "Is this website mobile friendly?", a: "Yes, the layout and menus are responsive for mobile and desktop.", k: ["mobile", "responsive", "phone"] },
  { q: "How do I close popup forms or chatbot?", a: "Use the x button, click outside the form, or press Escape for the form modal.", k: ["close", "popup", "chatbot"] },
  { q: "What happens after I submit both forms?", a: "Your responses are captured on the page and you can be contacted for next steps.", k: ["after submit", "next", "happens"] }
];

function addChatMessage(author, text) {
  const msg = document.createElement("div");
  msg.className = `chat-msg ${author.toLowerCase() === "you" ? "you" : "bot"}`;
  msg.innerHTML = `<strong>${author}:</strong> ${text}`;
  chatMessages.appendChild(msg);
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function answerQuestion(question) {
  const normalized = question.trim().toLowerCase();
  const match = qaPairs.find((item) => {
    return item.k.some((kw) => normalized.includes(kw));
  });
  return match
    ? match.a
    : "I can help with services, pricing, forms, FAQs, contact, and navigation. Try one of the quick questions above.";
}

qaPairs.forEach((item) => {
  const btn = document.createElement("button");
  btn.type = "button";
  btn.textContent = item.q;
  btn.addEventListener("click", () => {
    addChatMessage("You", item.q);
    addChatMessage("Bot", item.a);
  });
  chatQuick.appendChild(btn);
});

function openChatbot(event) {
  event.preventDefault();
  chatModal.classList.add("open");
  chatModal.setAttribute("aria-hidden", "false");
  if (!chatMessages.children.length) {
    addChatMessage("Bot", "Hi, I can answer 11 common questions about this website. Ask me anything.");
  }
}

function closeChatbot() {
  chatModal.classList.remove("open");
  chatModal.setAttribute("aria-hidden", "true");
}

chatOpenTriggers.forEach((trigger) => trigger.addEventListener("click", openChatbot));
chatClose.addEventListener("click", closeChatbot);
chatOverlay.addEventListener("click", closeChatbot);

chatForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const question = chatInput.value.trim();
  if (!question) return;
  addChatMessage("You", question);
  addChatMessage("Bot", answerQuestion(question));
  saveFormEntry(getSelectedPlan(), "chat_query", { question });
  chatInput.value = "";
});

function openCallModal(event) {
  event.preventDefault();
  callModal.classList.add("open");
  callModal.setAttribute("aria-hidden", "false");
  document.body.classList.add("modal-open");
}

function closeCallModal() {
  callModal.classList.remove("open");
  callModal.setAttribute("aria-hidden", "true");
  document.body.classList.remove("modal-open");
  callStatus.textContent = "";
}

callOpenTriggers.forEach((trigger) => trigger.addEventListener("click", openCallModal));
callClose.addEventListener("click", closeCallModal);
callOverlay.addEventListener("click", closeCallModal);

[callName, callPhone, callEmail, callTiming, callTopic].forEach((input) => {
  input.addEventListener("input", () => {
    clearFieldError(input);
    callStatus.textContent = "";
  });
});

callForm.addEventListener("submit", (event) => {
  event.preventDefault();
  let isValid = true;
  callStatus.textContent = "";

  if (!nameRegex.test(callName.value.trim())) {
    setFieldError(callName, "Enter a valid name.");
    isValid = false;
  }
  if (!phoneRegex.test(callPhone.value.trim())) {
    setFieldError(callPhone, "Enter a valid mobile number.");
    isValid = false;
  }
  if (!emailRegex.test(callEmail.value.trim())) {
    setFieldError(callEmail, "Enter a valid email.");
    isValid = false;
  }
  if (callTiming.value.trim().length < 3) {
    setFieldError(callTiming, "Enter your preferred call timing.");
    isValid = false;
  }
  if (callTopic.value.trim().length < 5) {
    setFieldError(callTopic, "Enter the topic you want to discuss.");
    isValid = false;
  }

  if (!isValid) {
    callStatus.textContent = "Please complete all required fields.";
    return;
  }

  saveFormEntry(getSelectedPlan(), "strategy_call", {
    name: callName.value.trim(),
    mobile: callPhone.value.trim(),
    email: callEmail.value.trim(),
    timing: callTiming.value.trim(),
    topic: callTopic.value.trim()
  });

  callStatus.textContent = "Request submitted. Our team will contact you soon.";
  callForm.reset();
  setTimeout(closeCallModal, 900);
});

const newsletterForm = document.querySelector(".contact-box");
const newsletterEmail = document.getElementById("email");
if (newsletterForm && newsletterEmail) {
  newsletterForm.addEventListener("submit", (event) => {
    event.preventDefault();
    if (!newsletterEmail.value.trim()) return;
    saveFormEntry(getSelectedPlan(), "newsletter", { email: newsletterEmail.value.trim() });
    newsletterForm.reset();
  });
}

document.getElementById("year").textContent = new Date().getFullYear();