// 示例数据
const titles = [
  "Apple", "Banana", "Cherry", "Date", "Fig", 
  "Grape", "Kiwi", "Lemon", "Mango", "Orange",
  "Peach", "Pear", "Quince", "Raspberry", "Strawberry"
];

// 分组函数
function groupByFirstLetter(items) {
  return items.reduce((acc, item) => {
    const firstLetter = item.charAt(0).toUpperCase();
    if (!acc[firstLetter]) {
      acc[firstLetter] = [];
    }
    acc[firstLetter].push(item);
    return acc;
  }, {});
}

// 使用示例
const groupedTitles = groupByFirstLetter(titles);
console.log(groupedTitles);

// 渲染分组列表
function renderGroupedList(groupedData) {
  const container = document.getElementById('list-container');
  
  // 按字母顺序排序分组
  const sortedLetters = Object.keys(groupedData).sort();
  
  sortedLetters.forEach(letter => {
    // 创建字母标题
    const letterHeader = document.createElement('h2');
    letterHeader.textContent = letter;
    container.appendChild(letterHeader);
    
    // 创建项目列表
    const list = document.createElement('ul');
    groupedData[letter].forEach(item => {
      const listItem = document.createElement('li');
      listItem.textContent = item;
      list.appendChild(listItem);
    });
    container.appendChild(list);
  });
}

// 调用渲染函数
renderGroupedList(groupedTitles);

/* 基础样式 */
#list-container {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}

#list-container h2 {
  background-color: #f0f0f0;
  padding: 8px 12px;
  margin: 10px 0 5px 0;
  border-radius: 4px;
}

#list-container ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 20px 0;
}

#list-container li {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

#list-container li:last-child {
  border-bottom: none;
}

function getGroupKey(title) {
  const firstChar = title.charAt(0).toUpperCase();
  return /[A-Z]/.test(firstChar) ? firstChar : '#';
}

function getGroupKey(title, locale = 'en') {
  const firstChar = title.charAt(0).toLocaleUpperCase(locale);
  return /[\p{L}]/u.test(firstChar) ? firstChar : '#';
}

// 添加字母索引导航
function addAlphabetIndex(groupedData) {
  const letters = Object.keys(groupedData).sort();
  const indexContainer = document.createElement('div');
  indexContainer.className = 'alphabet-index';
  
  letters.forEach(letter => {
    const link = document.createElement('a');
    link.href = `#${letter}`;
    link.textContent = letter;
    indexContainer.appendChild(link);
  });
  
  document.body.insertBefore(indexContainer, document.getElementById('list-container'));
}