{{define "catalog.tmpl"}}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalog - Decor By Hannahs</title>
<link rel="stylesheet" href="/static/css/styles.css">
<script>
(function() {
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.documentElement.setAttribute('data-theme', savedTheme);
})();
</script>
<script src="/static/js/alpine.js" defer></script>
<script src="/static/htmx/htmx.min.js" defer></script>
<script src="/static/js/drawer.js" defer></script>
</head>

<body>
{{template "header" .}}

<main>
<div style="margin-bottom: 2rem; position: relative;">
<img src="/assets/party-icons/party-hat-with-horn.png" alt="Party horn" style="position: absolute; top: -10px; right: 20px; width: 70px; height: 70px; transform: rotate(-15deg); opacity: 0.9;">
<h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;">Our Services</h1>
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem;">Browse our decoration packages and services</p>
</div>

<div class="grid grid-cols-2">
{{ range .Services }}
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ .Name }}</h3>
{{ if .ImageUrl.Valid }}
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;">
<span class="badge" style="background: hsl(var(--accent));">Featured</span>
</div>
{{ end }}
</div>
<div class="card-content">
<p>{{ .Description }}</p>
{{ if .ImageUrl.Valid }}
<img src="{{ .ImageUrl.String }}" alt="{{ .Name }}" style="width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius); margin-top: 1rem;">
{{ end }}
</div>
<div class="card-footer">
<a href="/booking" class="btn btn-primary">Book This Service</a>
<a href="#" class="btn btn-outline">Learn More</a>
</div>
</div>
{{ else }}
<div class="card" style="grid-column: 1 / -1; text-align: center; padding: 3rem;">
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem;">No services available yet. Check back soon!</p>
</div>
{{ end }}
</div>
</main>

{{template "footer"}}
{{template "theme-script"}}
</body>
</html>
{{end}}
