@section('title', $query ? "„{$query}" — hľadanie — súdy.ai" : 'Hľadanie rozhodnutí — súdy.ai')

@section('styles')
<style>
.search-hero { background: white; border: 1px solid #E2E8F0; border-radius: 16px; padding: 24px 28px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(15,23,42,0.04); }
.search-hero-title { font-family: 'DM Serif Display', serif; font-size: 22px; margin-bottom: 6px; }
.search-hero-sub { font-size: 13px; color: #64748B; margin-bottom: 18px; }
.search-row { display: flex; gap: 10px; }
.search-main { flex: 1; display: flex; align-items: center; gap: 10px; background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 10px; padding: 10px 16px; transition: border-color 0.15s; }
.search-main:focus-within { border-color: #1D4ED8; }
.search-main input { flex: 1; border: none; outline: none; font-size: 14px; font-family: 'DM Sans', sans-serif; background: none; color: #0F172A; }
.search-main input::placeholder { color: #CBD5E1; }
.search-btn { background: #1D4ED8; color: white; border: none; padding: 10px 22px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; white-space: nowrap; }
.search-btn:hover { background: #1e40af; }

.results-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.results-count { font-size: 13px; color: #64748B; }
.results-count strong { color: #0F172A; }
.results-source { font-size: 11px; color: #94A3B8; }
.results-source a { color: #94A3B8; }

.result-card { background: white; border: 1px solid #E2E8F0; border-radius: 14px; padding: 18px 22px; margin-bottom: 12px; transition: box-shadow 0.15s, border-color 0.15s; }
.result-card:hover { box-shadow: 0 4px 16px rgba(15,23,42,0.07); border-color: #BFDBFE; }

.result-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.result-left { flex: 1; min-width: 0; }
.result-ref { font-size: 15px; font-weight: 600; color: #1D4ED8; text-decoration: none; margin-bottom: 4px; display: block; }
.result-ref:hover { color: #1e40af; text-decoration: underline; }
.result-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.result-forma { font-size: 10px; padding: 3px 9px; border-radius: 100px; font-weight: 600; background: #EFF6FF; color: #1D4ED8; }
.result-court { font-size: 12px; color: #64748B; }
.result-date { font-size: 11px; color: #94A3B8; }

.result-judge { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F8FAFC; border-radius: 8px; flex-shrink: 0; min-width: 0; max-width: 260px; }
.judge-icon { width: 30px; height: 30px; background: linear-gradient(135deg, #EFF6FF, #DBEAFE); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #1D4ED8; flex-shrink: 0; }
.judge-info { min-width: 0; }
.judge-link { font-size: 12px; font-weight: 600; color: #0F172A; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.judge-link:hover { color: #1D4ED8; }
.judge-sublabel { font-size: 10px; color: #94A3B8; }

.result-snippet { font-size: 12px; color: #64748B; line-height: 1.65; border-left: 2px solid #E2E8F0; padding-left: 12px; margin-top: 4px; }

.no-results { text-align: center; padding: 64px 20px; }
.no-results-icon { font-size: 40px; margin-bottom: 14px; }
.no-results-title { font-family: 'DM Serif Display', serif; font-size: 22px; margin-bottom: 8px; color: #0F172A; }
.no-results-sub { font-size: 13px; color: #94A3B8; }

.error-box { background: #FFF1F2; border: 1px solid #FECDD3; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; font-size: 13px; color: #DC2626; display: flex; align-items: center; gap: 10px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #F1F5F9; }
.page-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none; color: #64748B; border: 1px solid #E2E8F0; background: white; transition: all 0.12s; }
.page-btn:hover { border-color: #1D4ED8; color: #1D4ED8; }
.page-btn.active { background: #1D4ED8; color: white; border-color: #1D4ED8; }
.page-btn.disabled { opacity: 0.35; pointer-events: none; }
.page-ellipsis { font-size: 13px; color: #94A3B8; padding: 0 4px; }

.empty-hero { text-align: center; padding: 60px 20px; }
.empty-hero-title { font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 10px; }
.empty-hero-sub { font-size: 14px; color: #64748B; max-width: 420px; margin: 0 auto; }
.suggestions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.suggestion-chip { background: white; border: 1px solid #E2E8F0; border-radius: 100px; padding: 6px 14px; font-size: 12px; color: #374151; text-decoration: none; transition: all 0.12s; }
.suggestion-chip:hover { border-color: #1D4ED8; color: #1D4ED8; }
</style>
<style>
.highlight-substring { background: #FEF9C3; color: #854D0E; font-weight: 600; border-radius: 2px; padding: 0 2px; }
</style>
@endsection



<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="rA6FF6gFgvVABHdukhlUSA1bbbDgdeqP6YsVDaXg">
<title>súdy.ai</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #F8FAFC; color: #0F172A; -webkit-font-smoothing: antialiased; display: flex; min-height: 100vh; }

.sidebar { width: 240px; flex-shrink: 0; background: #0F172A; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; }
.sidebar-logo { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 18px; color: white; padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); text-decoration: none; display: block; }
.sidebar-logo span { color: #60A5FA; }
.sidebar-nav { padding: 16px 10px; flex: 1; }
.nav-label { font-size: 9px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; padding: 0 10px; margin: 16px 0 6px; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); cursor: pointer; margin-bottom: 2px; text-decoration: none; white-space: nowrap; overflow: hidden; }
.nav-item.active { background: rgba(96,165,250,0.15); color: #60A5FA; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
.sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.sidebar-user { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; }
.user-avatar { width: 26px; height: 26px; background: #1D4ED8; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: white; flex-shrink: 0; }
.user-name { font-size: 11px; color: rgba(255,255,255,0.5); }

.main { flex: 1; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }

.topbar { background: white; border-bottom: 1px solid #E5E7EB; padding: 0 28px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; flex-shrink: 0; }
.topbar-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 18px; }
.topbar-back { font-size: 12px; color: #64748B; cursor: pointer; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.topbar-back:hover { color: #1D4ED8; }
.topbar-right { display: flex; gap: 10px; align-items: center; }

.content { padding: 24px 28px; flex: 1; }
</style>
</head>
<body>

<div class="sidebar">
  <a href="https://sudy.ai/dashboard" class="sidebar-logo">súdy<span>.ai</span></a>
  <div class="sidebar-nav">
    <div class="nav-label">Prehľad</div>
    <a href="https://sudy.ai/dashboard" class="nav-item ">◉ Dashboard</a>
    <a href="https://sudy.ai/sudcovia" class="nav-item ">◎ Profily sudcov</a>
    <a href="https://sudy.ai/hladaj" class="nav-item active">⊞ Hľadanie rozhodnutí</a>
    <div class="nav-label">Analýza</div>
    <a href="https://sudy.ai/sektory" class="nav-item ">◈ Sektory</a>
    <a href="#" class="nav-item">◫ Súdy</a>
    <a href="#" class="nav-item">↗ Predikcie</a>
    <div class="nav-label">Nástroje</div>
    <a href="#" class="nav-item">✦ AI analýza</a>
    <a href="#" class="nav-item">↗ Export</a>
  </div>
  <div class="sidebar-footer">
    <div class="sidebar-user">
      <div class="user-avatar">U</div>
      <div class="user-name"></div>
    </div>
  </div>
</div>

<div class="main">
  <div class="topbar">
    <div class="topbar-title">Hľadanie rozhodnutí</div>
    <div class="topbar-right"></div>
  </div>
  <div class="content">
    
<div class="search-hero">
    <form action="https://sudy.ai/hladaj" method="GET">
    <div class="search-row">
      <div class="search-main">
        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="#94A3B8" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
        <input type="text" name="q" value="pracovná zmluva" placeholder="Hľadajte v texte rozhodnutí — napr. „poistenie", „výpoveď z nájmu"..." autofocus autocomplete="off">
      </div>
      <button type="submit" class="search-btn">Hľadať →</button>
    </div>
  </form>
</div>

  <div class="error-box">⚠ Chyba pri načítaní výsledkov (503). Skúste to znova.</div>


  </div>
</div>

<div style="text-align:center;padding:16px 28px;font-size:11px;color:#94A3B8;border-top:1px solid #E5E7EB;background:white;margin-top:auto;">
  Dáta pochádzajú z verejnej databázy <a href="https://obcan.justice.sk" target="_blank" style="color:#64748B;">obcan.justice.sk</a>. Štatistiky sú orientačné a pravidelne aktualizované.
</div>
</body>
</html>