/*
 * Veil Browser - Start Page (about:start)
 */

#ifndef VEIL_PAGE_START_H
#define VEIL_PAGE_START_H

static const char *START_HTML =
"<!DOCTYPE html>"
"<html><head><meta charset='utf-8'><title>Veil</title>"
"<style>"
":root { --bg: %s; --accent: %s; --grad-start: %s; --grad-mid: %s; --grad-end: %s; }"
"* { box-sizing: border-box; margin: 0; padding: 0; }"
"body {"
"  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;"
"  background: var(--bg);"
"  color: #e0e0e8;"
"  min-height: 100vh;"
"  display: flex;"
"  flex-direction: column;"
"  align-items: center;"
"  justify-content: center;"
"  padding: 20px;"
"  %s"  /* background-image style if set */
"}"
".container {"
"  display: flex;"
"  flex-direction: column;"
"  align-items: center;"
"  width: 100%%;"
"  max-width: 700px;"
"  margin-top: -80px;"
"}"
".hero {"
"  display: flex;"
"  align-items: center;"
"  gap: 30px;"
"  margin-bottom: 40px;"
"}"
".logo {"
"  width: 100px;"
"  height: 100px;"
"  position: relative;"
"}"
".logo img {"
"  width: 100%%;"
"  height: 100%%;"
"  object-fit: contain;"
"  border-radius: 50%%;"
"}"
".logo::after {"
"  content: '';"
"  position: absolute;"
"  top: 0; left: 0; right: 0; bottom: 0;"
"  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid), var(--grad-end));"
"  border-radius: 50%%;"
"  mix-blend-mode: color;"
"  pointer-events: none;"
"}"
".ascii-brand {"
"  font-size: 14px;"
"  line-height: 1.1;"
"  font-weight: bold;"
"  white-space: pre;"
"  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid), var(--grad-end));"
"  -webkit-background-clip: text;"
"  -webkit-text-fill-color: transparent;"
"  background-clip: text;"
"}"
".search-container {"
"  width: 100%%;"
"  position: relative;"
"}"
".search-box {"
"  width: 100%%;"
"  padding: 16px 50px 16px 20px;"
"  font-size: 15px;"
"  font-family: inherit;"
"  background: rgba(255,255,255,0.03);"
"  border: 1px solid rgba(255,255,255,0.08);"
"  border-radius: 12px;"
"  color: #e0e0e8;"
"  outline: none;"
"  transition: all 0.2s ease;"
"}"
".search-box::placeholder { color: #505060; }"
".search-box:focus {"
"  border-color: var(--accent);"
"  background: rgba(255,255,255,0.05);"
"  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);"
"}"
".search-icon {"
"  position: absolute;"
"  right: 16px;"
"  top: 50%%;"
"  transform: translateY(-50%%);"
"  width: 20px;"
"  height: 20px;"
"  opacity: 0.4;"
"  pointer-events: none;"
"}"
".quicklinks-section {"
"  display: %s;"
"}"
".shortcuts-header {"
"  display: flex;"
"  align-items: center;"
"  gap: 12px;"
"  margin-top: 50px;"
"  margin-bottom: 16px;"
"}"
".shortcuts-title {"
"  font-size: 11px;"
"  color: #505060;"
"  text-transform: uppercase;"
"  letter-spacing: 2px;"
"}"
".edit-btn {"
"  background: transparent;"
"  border: 1px solid rgba(255,255,255,0.1);"
"  color: #606070;"
"  padding: 4px 10px;"
"  border-radius: 6px;"
"  font-size: 10px;"
"  cursor: pointer;"
"  font-family: inherit;"
"  transition: all 0.2s;"
"}"
".edit-btn:hover { border-color: var(--accent); color: var(--accent); }"
".edit-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }"
".shortcuts {"
"  display: flex;"
"  gap: 16px;"
"  flex-wrap: wrap;"
"  justify-content: center;"
"}"
".shortcut {"
"  display: flex;"
"  flex-direction: column;"
"  align-items: center;"
"  padding: 16px 20px;"
"  background: rgba(255,255,255,0.02);"
"  border: 1px solid rgba(255,255,255,0.05);"
"  border-radius: 12px;"
"  cursor: pointer;"
"  transition: all 0.2s ease;"
"  text-decoration: none;"
"  color: inherit;"
"  min-width: 90px;"
"  position: relative;"
"}"
".shortcut:hover {"
"  background: rgba(255,255,255,0.05);"
"  border-color: rgba(255,255,255,0.1);"
"  transform: translateY(-2px);"
"}"
".shortcut-icon {"
"  width: 32px;"
"  height: 32px;"
"  margin-bottom: 8px;"
"  display: flex;"
"  align-items: center;"
"  justify-content: center;"
"  font-size: 20px;"
"}"
".shortcut-icon img {"
"  width: 24px;"
"  height: 24px;"
"  border-radius: 4px;"
"  object-fit: contain;"
"}"
".shortcut-icon .emoji {"
"  font-size: 20px;"
"}"
".shortcut-label {"
"  font-size: 11px;"
"  color: #707080;"
"}"
".shortcut .delete-btn {"
"  position: absolute;"
"  top: -8px;"
"  right: -8px;"
"  width: 20px;"
"  height: 20px;"
"  background: #f85149;"
"  border: none;"
"  border-radius: 50%%;"
"  color: white;"
"  font-size: 14px;"
"  cursor: pointer;"
"  display: none;"
"  align-items: center;"
"  justify-content: center;"
"  line-height: 1;"
"}"
".editing .shortcut .delete-btn { display: flex; }"
".editing .shortcut:hover { transform: none; }"
".add-shortcut {"
"  display: none;"
"  flex-direction: column;"
"  align-items: center;"
"  justify-content: center;"
"  padding: 16px 20px;"
"  background: transparent;"
"  border: 2px dashed rgba(255,255,255,0.1);"
"  border-radius: 12px;"
"  cursor: pointer;"
"  min-width: 90px;"
"  color: #505060;"
"  transition: all 0.2s;"
"}"
".editing .add-shortcut { display: flex; }"
".add-shortcut:hover { border-color: var(--accent); color: var(--accent); }"
".add-shortcut span { font-size: 24px; }"
".modal {"
"  display: none;"
"  position: fixed;"
"  top: 0; left: 0; right: 0; bottom: 0;"
"  background: rgba(0,0,0,0.8);"
"  align-items: center;"
"  justify-content: center;"
"  z-index: 100;"
"}"
".modal.show { display: flex; }"
".modal-content {"
"  background: #151520;"
"  padding: 24px;"
"  border-radius: 12px;"
"  border: 1px solid rgba(255,255,255,0.1);"
"  width: 300px;"
"}"
".modal-title {"
"  font-size: 14px;"
"  margin-bottom: 16px;"
"  color: #e0e0e8;"
"}"
".modal input {"
"  width: 100%%;"
"  padding: 10px 12px;"
"  margin-bottom: 12px;"
"  background: rgba(255,255,255,0.05);"
"  border: 1px solid rgba(255,255,255,0.1);"
"  border-radius: 8px;"
"  color: #e0e0e8;"
"  font-family: inherit;"
"  font-size: 13px;"
"  outline: none;"
"}"
".modal input:focus { border-color: var(--accent); }"
".modal-buttons {"
"  display: flex;"
"  gap: 8px;"
"  justify-content: flex-end;"
"  margin-top: 8px;"
"}"
".modal-buttons button {"
"  padding: 8px 16px;"
"  border-radius: 6px;"
"  font-family: inherit;"
"  font-size: 12px;"
"  cursor: pointer;"
"  border: none;"
"}"
".modal-buttons .cancel { background: rgba(255,255,255,0.1); color: #a0a0a0; }"
".modal-buttons .save { background: var(--accent); color: #000; }"
".footer {"
"  position: fixed;"
"  bottom: 20px;"
"  font-size: 10px;"
"  color: #303040;"
"}"
"</style></head><body>"
"<div class='container'>"
"  <div class='hero'>"
"    <div class='logo'>"
"      <img src='%s' alt='Veil'>"
"    </div>"
"    <pre class='ascii-brand'>██╗   ██╗███████╗██╗██╗     \n"
"██║   ██║██╔════╝██║██║     \n"
"██║   ██║█████╗  ██║██║     \n"
"╚██╗ ██╔╝██╔══╝  ██║██║     \n"
" ╚████╔╝ ███████╗██║███████╗\n"
"  ╚═══╝  ╚══════╝╚═╝╚══════╝</pre>"
"  </div>"
"  <div class='search-container'>"
"    <input type='text' class='search-box' id='search' placeholder='Suchen oder URL eingeben...' autofocus>"
"    <svg class='search-icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>"
"      <circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/>"
"    </svg>"
"  </div>"
"  <div class='quicklinks-section'>"
"    <div class='shortcuts-header'>"
"      <span class='shortcuts-title'>Quick Links</span>"
"      <button class='edit-btn' id='editBtn'>Bearbeiten</button>"
"    </div>"
"    <div class='shortcuts' id='shortcuts'></div>"
"  </div>"
"</div>"
"<div class='modal' id='modal'>"
"  <div class='modal-content'>"
"    <div class='modal-title'>Neuer Quick Link</div>"
"    <input type='text' id='linkName' placeholder='Name (z.B. Google)'>"
"    <input type='text' id='linkUrl' placeholder='URL (z.B. https://google.com)'>"
"    <input type='text' id='linkIcon' placeholder='Icon Emoji (z.B. 🔍)' maxlength='2'>"
"    <div class='modal-buttons'>"
"      <button class='cancel' onclick='closeModal()'>Abbrechen</button>"
"      <button class='save' onclick='saveLink()'>Speichern</button>"
"    </div>"
"  </div>"
"</div>"
"<div class='footer'>Veil Browser</div>"
"<script>"
"const defaultLinks = ["
"  {name: 'DuckDuckGo', url: 'https://duckduckgo.com', icon: '🦆'},"
"  {name: 'GitHub', url: 'https://github.com', icon: '⚙'},"
"  {name: 'YouTube', url: 'https://youtube.com', icon: '▶'},"
"  {name: 'Settings', url: 'veil:settings', icon: '⚙'}"
"];"
"let links = JSON.parse(localStorage.getItem('veil_quicklinks')) || defaultLinks;"
"let editing = false;"
""
"function getFaviconUrl(url) {"
"  try {"
"    const u = new URL(url);"
"    return 'https://www.google.com/s2/favicons?domain=' + u.hostname + '&sz=64';"
"  } catch { return null; }"
"}"
""
"function renderLinks() {"
"  const container = document.getElementById('shortcuts');"
"  container.innerHTML = '';"
"  links.forEach((link, i) => {"
"    const el = document.createElement('a');"
"    el.className = 'shortcut';"
"    el.href = link.url;"
"    const isInternal = link.url.startsWith('veil:') || link.url.startsWith('about:');"
"    const faviconUrl = !isInternal ? getFaviconUrl(link.url) : null;"
"    const iconHtml = faviconUrl "
"      ? `<img src='${faviconUrl}' onerror=\"this.parentNode.innerHTML='<span class=emoji>${link.icon}</span>'\">`"
"      : `<span class='emoji'>${link.icon}</span>`;"
"    el.innerHTML = `"
"      <button class='delete-btn' onclick='deleteLink(event, ${i})'>×</button>"
"      <div class='shortcut-icon'>${iconHtml}</div>"
"      <div class='shortcut-label'>${link.name}</div>"
"    `;"
"    container.appendChild(el);"
"  });"
"  const addBtn = document.createElement('div');"
"  addBtn.className = 'add-shortcut';"
"  addBtn.innerHTML = '<span>+</span>';"
"  addBtn.onclick = () => document.getElementById('modal').classList.add('show');"
"  container.appendChild(addBtn);"
"}"
""
"function deleteLink(e, index) {"
"  e.preventDefault();"
"  e.stopPropagation();"
"  links.splice(index, 1);"
"  localStorage.setItem('veil_quicklinks', JSON.stringify(links));"
"  renderLinks();"
"}"
""
"function closeModal() {"
"  document.getElementById('modal').classList.remove('show');"
"  document.getElementById('linkName').value = '';"
"  document.getElementById('linkUrl').value = '';"
"  document.getElementById('linkIcon').value = '';"
"}"
""
"function saveLink() {"
"  const name = document.getElementById('linkName').value.trim();"
"  let url = document.getElementById('linkUrl').value.trim();"
"  const icon = document.getElementById('linkIcon').value || '🔗';"
"  if (!name || !url) return;"
"  if (!url.startsWith('http') && !url.startsWith('about:')) url = 'https://' + url;"
"  links.push({name, url, icon});"
"  localStorage.setItem('veil_quicklinks', JSON.stringify(links));"
"  closeModal();"
"  renderLinks();"
"}"
""
"document.getElementById('editBtn').onclick = function() {"
"  editing = !editing;"
"  this.classList.toggle('active', editing);"
"  this.textContent = editing ? 'Fertig' : 'Bearbeiten';"
"  document.querySelector('.container').classList.toggle('editing', editing);"
"};"
""
"document.getElementById('search').addEventListener('keydown', function(e) {"
"  if (e.key === 'Enter' && this.value.trim()) {"
"    window.webkit.messageHandlers.navigate.postMessage(this.value.trim());"
"  }"
"});"
""
"renderLinks();"
"</script></body></html>";

#endif /* VEIL_PAGE_START_H */
