// Products data
const products = [
  {
    id: 1,
    name: "แตงกวาไทยรุ่นคลาสสิค",
    price: 79,
    description: "เมล็ดพันธุ์แตงกวาไทยดั้งเดิม ทนโรคและให้ผลผลิตสูง เหมาะสำหรับการปลูกในสภาพอากาศร้อนชื้น",
    image: "images/product-1.png",
    category: "thai-slicing",
  },
  {
    id: 2,
    name: "แตงกวาญี่ปุ่นนิฮอน",
    price: 89,
    description: "เมล็ดพันธุ์แตงกวาญี่ปุ่น ผลยาว เนื้อกรอบ รสชาติหวานอ่อนๆ นิยมใช้ทำซาชิมิและซูชิ",
    image: "images/product-2.png",
    category: "japanese",
  },
  {
    id: 3,
    name: "แตงกวาดองเขียวมรกต",
    price: 65,
    description: "เมล็ดพันธุ์แตงกวาสำหรับการดอง ผิวขรุขระ เนื้อแน่น อายุเก็บเกี่ยวสั้น",
    image: "images/product-3.png",
    category: "pickling",
  },
  {
    id: 4,
    name: "แตงกวาพิเศษ มินิคิวคัมเบอร์",
    price: 120,
    description: "เมล็ดพันธุ์แตงกวาขนาดจิ๋ว ขนาด 5-8 ซม. รสชาติหวานกรอบ เหมาะสำหรับทานสด",
    image: "images/product-4.png",
    category: "specialty",
  },
  {
    id: 5,
    name: "แตงกวาไทยสีทอง",
    price: 85,
    description: "เมล็ดพันธุ์แตงกวาไทยพิเศษ ผลสีเหลืองทอง รสชาติหวานกว่าแตงกวาทั่วไป",
    image: "images/product-5.png",
    category: "thai-slicing",
  },
  {
    id: 6,
    name: "แตงกวาญี่ปุ่นคิโยมิซึ",
    price: 95,
    description: "เมล็ดพันธุ์แตงกวาญี่ปุ่นพรีเมียม ผลยาวพิเศษ 30-35 ซม. เนื้อกรอบ รสชาติดี",
    image: "images/product-6.png",
    category: "japanese",
  },
  {
    id: 7,
    name: "แตงกวาดองโบสตัน",
    price: 75,
    description: "เมล็ดพันธุ์แตงกวาดองแบบตะวันตก ทนโรค ให้ผลดก เหมาะสำหรับทำดิลล์พิกเคิล",
    image: "images/product-7.png",
    category: "pickling",
  },
  {
    id: 8,
    name: "แตงกวาพิเศษ เลมอนคิวคัมเบอร์",
    price: 150,
    description: "เมล็ดพันธุ์แตงกวารูปทรงกลมคล้ายเลมอน รสชาติเปรี้ยวอมหวาน นิยมใช้ในสลัดและค็อกเทล",
    image: "images/product-8.png",
    category: "specialty",
  },
]

// DOM Elements
const productGrid = document.getElementById("product-grid")
const filterButtons = document.querySelectorAll(".filter-btn")
const cartIcon = document.getElementById("cart-icon")
const cartSidebar = document.getElementById("cart-sidebar")
const closeCart = document.getElementById("close-cart")
const overlay = document.getElementById("overlay")
const cartItems = document.getElementById("cart-items")
const cartTotalAmount = document.getElementById("cart-total-amount")
const cartCount = document.querySelector(".cart-count")
const mobileMenuBtn = document.getElementById("mobile-menu-btn")
const mobileMenu = document.getElementById("mobile-menu")
const faqItems = document.querySelectorAll(".faq-item")
const contactForm = document.getElementById("contact-form")
const newsletterForm = document.getElementById("newsletter-form")

// Cart array
let cart = []

// Declare lucide variable
const lucide = window.lucide

// Initialize the page
document.addEventListener("DOMContentLoaded", () => {
  // Display all products initially
  displayProducts("all")

  // Setup event listeners
  setupEventListeners()

  // Initialize FAQ accordions
  initFAQ()
})

// Display products based on category
function displayProducts(category) {
  productGrid.innerHTML = ""

  const filteredProducts = category === "all" ? products : products.filter((product) => product.category === category)

  filteredProducts.forEach((product) => {
    const productCard = document.createElement("div")
    productCard.className = "product-card"
    productCard.innerHTML = `
      <div class="product-image">
        <img src="${product.image}" alt="${product.name}">
      </div>
      <div class="product-details">
        <h3 class="product-title">${product.name}</h3>
        <div class="product-price">฿${product.price.toLocaleString()}</div>
        <p class="product-description">${product.description}</p>
        <button class="add-to-cart" data-id="${product.id}">เพิ่มลงตะกร้า</button>
      </div>
    `
    productGrid.appendChild(productCard)
  })

  // Add event listeners to the new add-to-cart buttons
  document.querySelectorAll(".add-to-cart").forEach((button) => {
    button.addEventListener("click", addToCart)
  })
}

// Setup event listeners
function setupEventListeners() {
  // Filter buttons
  filterButtons.forEach((button) => {
    button.addEventListener("click", () => {
      // Remove active class from all buttons
      filterButtons.forEach((btn) => btn.classList.remove("active"))
      // Add active class to clicked button
      button.classList.add("active")
      // Display products based on category
      displayProducts(button.getAttribute("data-filter"))
    })
  })

  // Cart toggle
  cartIcon.addEventListener("click", toggleCart)
  closeCart.addEventListener("click", toggleCart)
  overlay.addEventListener("click", () => {
    if (cartSidebar.classList.contains("active")) {
      toggleCart()
    }
    if (mobileMenu.classList.contains("active")) {
      toggleMobileMenu()
    }
  })

  // Mobile menu toggle
  mobileMenuBtn.addEventListener("click", toggleMobileMenu)

  // Contact form submission
  if (contactForm) {
    contactForm.addEventListener("submit", handleContactForm)
  }

  // Newsletter form submission
  if (newsletterForm) {
    newsletterForm.addEventListener("submit", handleNewsletterForm)
  }
}

// Toggle cart sidebar
function toggleCart() {
  cartSidebar.classList.toggle("active")
  overlay.classList.toggle("active")
  document.body.style.overflow = cartSidebar.classList.contains("active") ? "hidden" : ""
}

// Toggle mobile menu
function toggleMobileMenu() {
  mobileMenu.classList.toggle("active")
  overlay.classList.toggle("active")
  document.body.style.overflow = mobileMenu.classList.contains("active") ? "hidden" : ""
}

// Add to cart function
function addToCart(e) {
  const productId = Number.parseInt(e.target.getAttribute("data-id"))
  const product = products.find((p) => p.id === productId)

  // Check if product is already in cart
  const existingItem = cart.find((item) => item.id === productId)

  if (existingItem) {
    existingItem.quantity += 1
  } else {
    cart.push({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.image,
      quantity: 1,
    })
  }

  // Update cart UI
  updateCart()

  // Show cart
  if (!cartSidebar.classList.contains("active")) {
    toggleCart()
  }
}

// Update cart UI
function updateCart() {
  // Clear cart items
  cartItems.innerHTML = ""

  // If cart is empty
  if (cart.length === 0) {
    cartItems.innerHTML = '<p class="empty-cart">ตะกร้าสินค้าว่างเปล่า</p>'
    cartTotalAmount.textContent = "฿0"
    cartCount.textContent = "0"
    return
  }

  // Calculate total
  let total = 0
  let count = 0

  // Add items to cart
  cart.forEach((item) => {
    const itemTotal = item.price * item.quantity
    total += itemTotal
    count += item.quantity

    const cartItem = document.createElement("div")
    cartItem.className = "cart-item"
    cartItem.innerHTML = `
      <img src="${item.image}" alt="${item.name}" class="cart-item-image">
      <div class="cart-item-details">
        <h3 class="cart-item-title">${item.name}</h3>
        <div class="cart-item-price">฿${item.price.toLocaleString()}</div>
        <div class="cart-item-quantity">
          <button class="quantity-btn decrease" data-id="${item.id}">-</button>
          <span>${item.quantity}</span>
          <button class="quantity-btn increase" data-id="${item.id}">+</button>
        </div>
      </div>
      <button class="cart-item-remove" data-id="${item.id}">
        <i data-lucide="trash-2"></i>
      </button>
    `
    cartItems.appendChild(cartItem)
  })

  // Update total and count
  cartTotalAmount.textContent = `฿${total.toLocaleString()}`
  cartCount.textContent = count.toString()

  // Initialize Lucide icons for new elements
  lucide.createIcons()

  // Add event listeners to quantity buttons and remove buttons
  document.querySelectorAll(".quantity-btn.decrease").forEach((button) => {
    button.addEventListener("click", decreaseQuantity)
  })

  document.querySelectorAll(".quantity-btn.increase").forEach((button) => {
    button.addEventListener("click", increaseQuantity)
  })

  document.querySelectorAll(".cart-item-remove").forEach((button) => {
    button.addEventListener("click", removeFromCart)
  })
}

// Decrease quantity
function decreaseQuantity(e) {
  const productId = Number.parseInt(e.target.getAttribute("data-id"))
  const item = cart.find((item) => item.id === productId)

  if (item.quantity > 1) {
    item.quantity -= 1
  } else {
    cart = cart.filter((item) => item.id !== productId)
  }

  updateCart()
}

// Increase quantity
function increaseQuantity(e) {
  const productId = Number.parseInt(e.target.getAttribute("data-id"))
  const item = cart.find((item) => item.id === productId)

  item.quantity += 1

  updateCart()
}

// Remove from cart
function removeFromCart(e) {
  const productId = Number.parseInt(e.target.closest(".cart-item-remove").getAttribute("data-id"))
  cart = cart.filter((item) => item.id !== productId)

  updateCart()
}

// Initialize FAQ accordions
function initFAQ() {
  faqItems.forEach((item) => {
    const question = item.querySelector(".faq-question")

    question.addEventListener("click", () => {
      // Close all other items
      faqItems.forEach((otherItem) => {
        if (otherItem !== item) {
          otherItem.classList.remove("active")
        }
      })

      // Toggle current item
      item.classList.toggle("active")
    })
  })
}

// Handle contact form submission
function handleContactForm(e) {
  e.preventDefault()

  // Get form data
  const formData = new FormData(contactForm)
  const data = Object.fromEntries(formData.entries())

  // In a real application, you would send this data to a server
  console.log("Contact form data:", data)

  // Show success message
  alert("ขอบคุณสำหรับข้อความของคุณ เราจะติดต่อกลับโดยเร็วที่สุด")

  // Reset form
  contactForm.reset()
}

// Handle newsletter form submission
function handleNewsletterForm(e) {
  e.preventDefault()

  // Get email
  const email = newsletterForm.querySelector("input").value

  // In a real application, you would send this data to a server
  console.log("Newsletter subscription:", email)

  // Show success message
  alert("ขอบคุณสำหรับการสมัครรับข่าวสาร")

  // Reset form
  newsletterForm.reset()
}