From 288767f6c042954c7a9e2cb9f180d7c90162cc0c Mon Sep 17 00:00:00 2001
From: muken <muken@ajavasoft.com>
Date: Fri, 17 Jul 2026 14:24:48 -0500
Subject: [PATCH] Security: remove hardcoded credentials, require DB_PASSWORD,
 delete .bak file, warn on secrets template

---
 k8s/bootstrap-secrets.yaml |    1 +
 scripts/migrate-images.js  |    6 +-
 src/app/admin/page.tsx.bak | 1271 ------------------------------------
 src/hooks/useAuth.ts       |   11 +-
 4 files changed, 7 insertions(+), 1282 deletions(-)
 delete mode 100644 src/app/admin/page.tsx.bak

diff --git a/k8s/bootstrap-secrets.yaml b/k8s/bootstrap-secrets.yaml
index 6e1b3e2..6708230 100644
--- a/k8s/bootstrap-secrets.yaml
+++ b/k8s/bootstrap-secrets.yaml
@@ -1,3 +1,4 @@
+# WARNING: Replace CHANGE_ME_* values before applying
 apiVersion: v1
 kind: Secret
 metadata:
diff --git a/scripts/migrate-images.js b/scripts/migrate-images.js
index 4b3733c..6d046a5 100644
--- a/scripts/migrate-images.js
+++ b/scripts/migrate-images.js
@@ -11,7 +11,11 @@ const pool = new Pool({
   port: 5432,
   database: 'lahuasca',
   user: 'lahuasca',
-  password: process.env.DB_PASSWORD || 'lahuasca123',
+  password: (() => {
+    const p = process.env.DB_PASSWORD;
+    if (!p) throw new Error('DB_PASSWORD env var is required');
+    return p;
+  })(),
 });
 
 async function convertToWebP(base64Data) {
diff --git a/src/app/admin/page.tsx.bak b/src/app/admin/page.tsx.bak
deleted file mode 100644
index ee6e187..0000000
--- a/src/app/admin/page.tsx.bak
+++ /dev/null
@@ -1,1271 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-
-interface ImageRecord {
-  id: number;
-  filename: string;
-  data: string;
-  uploaded_at: string;
-}
-
-interface Room {
-  id: number;
-  name: string;
-  description: string;
-  price: string;
-  photos: string[];
-  featured_photo: string | null;
-  active: boolean;
-  sort_order: number;
-}
-
-interface RoomForm {
-  id?: number;
-  name: string;
-  description: string;
-  price: string;
-  photos: string[];
-  featured_photo: string | null;
-  active: boolean;
-  sort_order: number;
-}
-
-interface RoomComment {
-  id: number;
-  room_id: number;
-  photo_url: string | null;
-  user_id: number;
-  first_name: string;
-  last_initial: string | null;
-  text: string;
-  created_at: string;
-}
-
-interface User {
-  id: number;
-  username: string;
-  role: 'admin' | 'user';
-  first_name: string | null;
-  last_name: string | null;
-  comments_disabled: boolean;
-}
-
-interface MenuItem {
-  id: number;
-  category: string;
-  name: string;
-  description: string;
-  price: string;
-  is_daily_special: boolean;
-  active: boolean;
-  sort_order: number;
-}
-
-interface Place {
-  id: number;
-  name: string;
-  description: string;
-  photos: string[];
-  featured_photo: string | null;
-  distance_km: string | null;
-  visit_time: string | null;
-  suggestion: string | null;
-  active: boolean;
-  sort_order: number;
-}
-
-interface Review {
-  id: number;
-  author_name: string;
-  rating: number;
-  text: string;
-  approved: boolean;
-}
-
-interface Slide {
-  id: number;
-  title: string | null;
-  subtitle: string | null;
-  image_id: number | null;
-  image_url: string | null;
-  active: boolean;
-  sort_order: number;
-}
-
-interface CalendarEvent {
-  id: number;
-  date: string;
-  title: string;
-  type: 'holiday' | 'season' | 'weather' | 'event';
-  description: string | null;
-  color: string | null;
-  active: boolean;
-}
-
-interface SocialEvent {
-  id: number;
-  name: string;
-  description: string;
-  price: string | null;
-  date: string | null;
-  photos: string[];
-  featured_photo: string | null;
-  active: boolean;
-  sort_order: number;
-  reservation_count: number;
-}
-
-interface SocialEventReservation {
-  id: number;
-  social_event_id: number;
-  user_id: number;
-  username: string;
-  event_name: string;
-  guests: number;
-  notes: string;
-  status: 'pending' | 'confirmed' | 'cancelled';
-  created_at: string;
-}
-
-const gold = '#E8A849';
-const navy = '#001321';
-const warm = '#a6683c';
-
-export default function AdminPage() {
-  const router = useRouter();
-  const [images, setImages] = useState<ImageRecord[]>([]);
-  const [count, setCount] = useState(0);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [message, setMessage] = useState<string | null>(null);
-  const [logoUrl, setLogoUrl] = useState('');
-  const [faviconUrl, setFaviconUrl] = useState('');
-  const [tagline, setTagline] = useState('Hotel · Restaurant · Andean Highlands');
-
-  const [rooms, setRooms] = useState<Room[]>([]);
-  const [roomForm, setRoomForm] = useState<RoomForm>({ name: '', description: '', price: '', photos: [], featured_photo: null, active: true, sort_order: 0 });
-  const [editingRoom, setEditingRoom] = useState<number | null>(null);
-  const [roomComments, setRoomComments] = useState<RoomComment[]>([]);
-  const [roomCommentRoomId, setRoomCommentRoomId] = useState<number | null>(null);
-  const [editingUser, setEditingUser] = useState<number | null>(null);
-  const [userEditForm, setUserEditForm] = useState({ first_name: '', last_name: '', comments_disabled: false });
-
-  const [menu, setMenu] = useState<MenuItem[]>([]);
-  const [menuForm, setMenuForm] = useState<Partial<MenuItem>>({ category: '', name: '', description: '', price: '', is_daily_special: false, active: true, sort_order: 0 });
-  const [editingMenu, setEditingMenu] = useState<number | null>(null);
-
-  const [places, setPlaces] = useState<Place[]>([]);
-  const [placeForm, setPlaceForm] = useState<Partial<Place>>({ name: '', description: '', photos: [], featured_photo: null, distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 });
-  const [editingPlace, setEditingPlace] = useState<number | null>(null);
-
-  const [reviews, setReviews] = useState<Review[]>([]);
-
-  const [users, setUsers] = useState<User[]>([]);
-  const [userForm, setUserForm] = useState({ username: '', password: '', role: 'user' as 'admin' | 'user' });
-
-  const [slides, setSlides] = useState<Slide[]>([]);
-  const [slideForm, setSlideForm] = useState<Partial<Slide>>({ title: '', subtitle: '', image_id: null, image_url: '', active: true, sort_order: 0 });
-  const [editingSlide, setEditingSlide] = useState<number | null>(null);
-
-  const [events, setEvents] = useState<CalendarEvent[]>([]);
-  const [eventForm, setEventForm] = useState<Partial<CalendarEvent>>({ date: '', title: '', type: 'event', description: '', color: '#E8A849', active: true });
-  const [editingEvent, setEditingEvent] = useState<number | null>(null);
-
-  const [socialEvents, setSocialEvents] = useState<SocialEvent[]>([]);
-  const [socialEventForm, setSocialEventForm] = useState<Partial<SocialEvent>>({ name: '', description: '', price: '', date: '', photos: [], featured_photo: null, active: true, sort_order: 0 });
-  const [editingSocialEvent, setEditingSocialEvent] = useState<number | null>(null);
-  const [socialEventReservations, setSocialEventReservations] = useState<SocialEventReservation[]>([]);
-  const [socialEventReservationsFor, setSocialEventReservationsFor] = useState<number | null>(null);
-
-  const [footer, setFooter] = useState({
-    facebook_url: '', instagram_url: '', whatsapp_url: '', address: '', phone: '', email: '',
-  });
-
-  useEffect(() => {
-    fetch('/api/admin/images', { credentials: 'same-origin' })
-      .then(async (res) => {
-        if (!res.ok) {
-          if (res.status === 401) { router.push('/login'); return; }
-          throw new Error('Failed to load images');
-        }
-        const data = await res.json();
-        setImages(data.images || []);
-        setCount(data.count || 0);
-      })
-      .catch((err) => setError(err.message));
-
-    fetch('/api/rooms').then((r) => r.json()).then((j) => setRooms(j.data || [])).catch(() => {});
-    fetch('/api/menu').then((r) => r.json()).then((j) => setMenu(j.data || [])).catch(() => {});
-    fetch('/api/places').then((r) => r.json()).then((j) => setPlaces(j.data || [])).catch(() => {});
-    fetch('/api/admin/reviews', { credentials: 'same-origin' }).then((r) => r.json()).then((j) => setReviews(j.data || [])).catch(() => {});
-    fetch('/api/admin/users', { credentials: 'same-origin' }).then((r) => r.json()).then((j) => setUsers(j.data || [])).catch(() => {});
-    fetch('/api/slides').then((r) => r.json()).then((j) => setSlides(j.data || [])).catch(() => {});
-    fetch('/api/calendar_events').then((r) => r.json()).then((j) => setEvents(j.data || [])).catch(() => {});
-    fetch('/api/social_events').then((r) => r.json()).then((j) => setSocialEvents(j.data || [])).catch(() => {});
-
-    fetch('/api/site-assets').then((res) => res.json()).then((json) => {
-      const c = json.data || {};
-      setFooter({
-        facebook_url: c.facebook_url || '', instagram_url: c.instagram_url || '', whatsapp_url: c.whatsapp_url || '',
-        address: c.address || '', phone: c.phone || '', email: c.email || '',
-      });
-      if (c.logo) setLogoUrl(c.logo);
-      if (c.favicon) setFaviconUrl(c.favicon);
-      if (c.tagline) setTagline(c.tagline);
-    }).catch(() => {});
-
-    setLoading(false);
-  }, [router]);
-
-  const notify = (msg: string) => {
-    setMessage(msg);
-    setTimeout(() => setMessage(null), 4000);
-  };
-
-  const updateAsset = async (key: string, value: string) => {
-    const res = await fetch('/api/site-assets', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ key, value }),
-      credentials: 'same-origin',
-    });
-    if (!res.ok) { setError('Failed to save ' + key); return; }
-    notify(`${key} updated.`);
-  };
-
-  const saveFooter = async () => {
-    const res = await fetch('/api/site-assets', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ values: footer }),
-      credentials: 'same-origin',
-    });
-    if (!res.ok) { setError('Failed to save footer'); return; }
-    notify('Footer info updated.');
-  };
-
-  const [uploadCategory, setUploadCategory] = useState<string>('other');
-  const [uploadRoomId, setUploadRoomId] = useState<string>('');
-  const [uploadLocationTarget, setUploadLocationTarget] = useState<string>('gallery');
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (!files) return;
-    Array.from(files).forEach((file) => {
-      const reader = new FileReader();
-      reader.onload = async () => {
-        const data = reader.result as string;
-        const body: Record<string, unknown> = { filename: file.name, data, category: uploadCategory, location_target: uploadLocationTarget };
-        if (uploadCategory === 'rooms' && uploadRoomId) body.room_id = Number(uploadRoomId);
-        const res = await fetch('/api/admin/images', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(body),
-          credentials: 'same-origin',
-        });
-        if (!res.ok) { setError('Upload failed'); return; }
-        const result = await res.json();
-        setImages((prev) => [{ ...result.image, data, category: uploadCategory }, ...prev]);
-        setCount((prev) => prev + 1);
-      };
-      reader.readAsDataURL(file);
-    });
-  };
-
-  const handleDelete = async (id: number) => {
-    const res = await fetch(`/api/admin/images?id=${id}`, { method: 'DELETE', credentials: 'same-origin' });
-    if (res.ok) {
-      setImages((prev) => prev.filter((img) => img.id !== id));
-      setCount((prev) => prev - 1);
-    }
-  };
-
-  const api = async (url: string, method: string, body?: object) => {
-    const res = await fetch(url, {
-      method,
-      headers: { 'Content-Type': 'application/json' },
-      credentials: 'same-origin',
-      body: body ? JSON.stringify(body) : undefined,
-    });
-    if (!res.ok) {
-      const j = await res.json().catch(() => ({}));
-      throw new Error(j.error || 'Request failed');
-    }
-    return res.json();
-  };
-
-  const saveRoom = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const payload = { ...roomForm, photos: roomForm.photos || [], featured_photo: roomForm.featured_photo || null, active: roomForm.active !== false, sort_order: roomForm.sort_order || 0 };
-    if (editingRoom) {
-      await api(`/api/rooms/${editingRoom}`, 'PUT', payload);
-      setRooms((prev) => prev.map((r) => (r.id === editingRoom ? { ...r, ...payload } as Room : r)));
-      setEditingRoom(null);
-    } else {
-      const json = await api('/api/rooms', 'POST', payload);
-      setRooms((prev) => [...prev, json.data]);
-    }
-    setRoomForm({ name: '', description: '', price: '', photos: [], featured_photo: null, active: true, sort_order: 0 });
-    notify('Room saved.');
-  };
-
-  const editRoom = (r: Room) => { setRoomForm({ ...r, photos: r.photos || [], featured_photo: r.featured_photo || null }); setEditingRoom(r.id); };
-  const deleteRoom = async (id: number) => { await api(`/api/rooms/${id}`, 'DELETE'); setRooms((prev) => prev.filter((r) => r.id !== id)); };
-
-  const saveMenu = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const payload = { ...menuForm, active: menuForm.active !== false, sort_order: menuForm.sort_order || 0 };
-    if (editingMenu) {
-      await api(`/api/menu/${editingMenu}`, 'PUT', payload);
-      setMenu((prev) => prev.map((m) => (m.id === editingMenu ? { ...m, ...payload } as MenuItem : m)));
-      setEditingMenu(null);
-    } else {
-      const json = await api('/api/menu', 'POST', payload);
-      setMenu((prev) => [...prev, json.data]);
-    }
-    setMenuForm({ category: '', name: '', description: '', price: '', is_daily_special: false, active: true, sort_order: 0 });
-    notify('Menu item saved.');
-  };
-
-  const editMenu = (m: MenuItem) => { setMenuForm({ ...m }); setEditingMenu(m.id); };
-  const deleteMenu = async (id: number) => { await api(`/api/menu/${id}`, 'DELETE'); setMenu((prev) => prev.filter((m) => m.id !== id)); };
-
-  const savePlace = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const payload = {
-      ...placeForm,
-      photos: Array.isArray(placeForm.photos) ? placeForm.photos : [],
-      featured_photo: placeForm.featured_photo || null,
-      active: placeForm.active === true,
-      sort_order: placeForm.sort_order || 0,
-    };
-    if (editingPlace) {
-      const r = await api(`/api/places/${editingPlace}`, 'PUT', payload);
-      setPlaces((prev) => prev.map((p) => (p.id === editingPlace ? ({ ...p, ...payload } as Place) : p)));
-      setEditingPlace(null);
-    } else {
-      const r = await api('/api/places', 'POST', payload);
-      setPlaces((prev) => [...prev, r.data]);
-    }
-    setPlaceForm({ name: '', description: '', photos: [], featured_photo: null, distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 });
-    notify('Place saved.');
-  };
-
-  const editPlace = (p: Place) => { setPlaceForm({ ...p, photos: p.photos || [], featured_photo: p.featured_photo || null }); setEditingPlace(p.id); };
-  const deletePlace = async (id: number) => { await api(`/api/places/${id}`, 'DELETE'); setPlaces((prev) => prev.filter((p) => p.id !== id)); };
-
-  const approveReview = async (id: number) => {
-    await api(`/api/admin/reviews/${id}`, 'PUT', { approved: true });
-    setReviews((prev) => prev.map((r) => (r.id === id ? { ...r, approved: true } : r)));
-  };
-
-  const deleteReview = async (id: number) => { await api(`/api/admin/reviews/${id}`, 'DELETE'); setReviews((prev) => prev.filter((r) => r.id !== id)); };
-
-  const loadRoomComments = async (roomId: number) => {
-    setRoomCommentRoomId(roomId);
-    const res = await fetch(`/api/rooms/${roomId}/comments`, { credentials: 'same-origin' });
-    const json = await res.json().catch(() => ({ data: [] }));
-    setRoomComments(json.data || []);
-  };
-
-  const deleteRoomComment = async (commentId: number) => {
-    await api(`/api/admin/comments/${commentId}`, 'DELETE');
-    setRoomComments((prev) => prev.filter((c) => c.id !== commentId));
-  };
-
-  const toggleUserComments = async (user: User) => {
-    const next = !user.comments_disabled;
-    await api(`/api/admin/users/${user.id}`, 'PUT', { comments_disabled: next });
-    setUsers((prev) => prev.map((u) => (u.id === user.id ? { ...u, comments_disabled: next } : u)));
-    notify(`User ${next ? 'disabled' : 'enabled'} for comments.`);
-  };
-
-  const saveUserNames = async (user: User) => {
-    await api(`/api/admin/users/${user.id}`, 'PUT', {
-      first_name: userEditForm.first_name,
-      last_name: userEditForm.last_name,
-    });
-    setUsers((prev) => prev.map((u) => (u.id === user.id ? { ...u, first_name: userEditForm.first_name, last_name: userEditForm.last_name } : u)));
-    setEditingUser(null);
-    notify('User updated.');
-  };
-
-  const saveUser = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const json = await api('/api/admin/users', 'POST', userForm);
-    setUsers((prev) => [...prev, json.user]);
-    setUserForm({ username: '', password: '', role: 'user' });
-    notify('User created.');
-  };
-
-  const deleteUser = async (id: number) => { await api(`/api/admin/users/${id}`, 'DELETE'); setUsers((prev) => prev.filter((u) => u.id !== id)); };
-
-  const saveSlide = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const payload = { ...slideForm, active: slideForm.active !== false, sort_order: slideForm.sort_order || 0 };
-    if (editingSlide) {
-      await api(`/api/slides/${editingSlide}`, 'PUT', payload);
-      setSlides((prev) => prev.map((s) => (s.id === editingSlide ? { ...s, ...payload } as Slide : s)));
-      setEditingSlide(null);
-    } else {
-      const json = await api('/api/slides', 'POST', payload);
-      setSlides((prev) => [...prev, json.data]);
-    }
-    setSlideForm({ title: '', subtitle: '', image_id: null, image_url: '', active: true, sort_order: 0 });
-    notify('Slide saved.');
-  };
-
-  const editSlide = (s: Slide) => { setSlideForm({ ...s }); setEditingSlide(s.id); };
-  const deleteSlide = async (id: number) => { await api(`/api/slides/${id}`, 'DELETE'); setSlides((prev) => prev.filter((s) => s.id !== id)); };
-
-  const saveEvent = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const payload = { ...eventForm, active: eventForm.active !== false };
-    if (editingEvent) {
-      await api(`/api/calendar_events/${editingEvent}`, 'PUT', payload);
-      setEvents((prev) => prev.map((ev) => (ev.id === editingEvent ? { ...ev, ...payload } as CalendarEvent : ev)));
-      setEditingEvent(null);
-    } else {
-      const json = await api('/api/calendar_events', 'POST', payload);
-      setEvents((prev) => [...prev, json.data]);
-    }
-    setEventForm({ date: '', title: '', type: 'event', description: '', color: '#E8A849', active: true });
-    notify('Calendar event saved.');
-  };
-
-  const editEvent = (ev: CalendarEvent) => { setEventForm({ ...ev }); setEditingEvent(ev.id); };
-  const deleteEvent = async (id: number) => { await api(`/api/calendar_events/${id}`, 'DELETE'); setEvents((prev) => prev.filter((ev) => ev.id !== id)); };
-
-  const saveSocialEvent = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const payload = {
-      name: socialEventForm.name || '',
-      description: socialEventForm.description || '',
-      price: socialEventForm.price || null,
-      date: socialEventForm.date || null,
-      photos: socialEventForm.photos || [],
-      featured_photo: socialEventForm.featured_photo || null,
-      active: socialEventForm.active !== false,
-      sort_order: socialEventForm.sort_order || 0,
-    };
-    if (editingSocialEvent) {
-      await api(`/api/social_events/${editingSocialEvent}`, 'PUT', payload);
-      setSocialEvents((prev) => prev.map((se) => (se.id === editingSocialEvent ? { ...se, ...payload } as SocialEvent : se)));
-      setEditingSocialEvent(null);
-    } else {
-      const json = await api('/api/social_events', 'POST', payload);
-      setSocialEvents((prev) => [...prev, json.data]);
-    }
-    setSocialEventForm({ name: '', description: '', price: '', date: '', photos: [], featured_photo: null, active: true, sort_order: 0 });
-    notify('Social event saved.');
-  };
-
-  const editSocialEvent = (se: SocialEvent) => { setSocialEventForm({ ...se, photos: se.photos || [], featured_photo: se.featured_photo || null }); setEditingSocialEvent(se.id); };
-  const deleteSocialEvent = async (id: number) => { await api(`/api/social_events/${id}`, 'DELETE'); setSocialEvents((prev) => prev.filter((se) => se.id !== id)); };
-
-  const loadSocialEventReservations = async (eventId: number) => {
-    setSocialEventReservationsFor(eventId);
-    const res = await fetch(`/api/social_event_reservations?social_event_id=${eventId}`, { credentials: 'same-origin' });
-    const json = await res.json().catch(() => ({ data: [] }));
-    setSocialEventReservations(json.data || []);
-  };
-
-  const updateReservationStatus = async (reservationId: number, status: SocialEventReservation['status']) => {
-    await api(`/api/admin/social_event_reservations/${reservationId}`, 'PUT', { status });
-    setSocialEventReservations((prev) => prev.map((r) => (r.id === reservationId ? { ...r, status } : r)));
-  };
-
-  const deleteReservation = async (reservationId: number) => {
-    await api(`/api/admin/social_event_reservations/${reservationId}`, 'DELETE');
-    setSocialEventReservations((prev) => prev.filter((r) => r.id !== reservationId));
-  };
-
-  if (loading) {
-    return (
-      <main style={{ padding: '2rem', color: warm, fontSize: '18px' }}>
-        <p>Loading admin...</p>
-      </main>
-    );
-  }
-
-  return (
-    <main style={{ padding: '2rem', maxWidth: '80rem', margin: '0 auto' }}>
-      <h1 style={{ fontSize: 'clamp(28px, 4vw, 42px)', fontWeight: 400, fontStyle: 'italic', color: navy, margin: '0 0 0.5rem' }}>
-        Admin Portal
-      </h1>
-      <p style={{ color: '#555', marginBottom: '1.5rem' }}>
-        Total uploaded images: <strong style={{ color: warm }}>{count}</strong>
-      </p>
-      {error && <p style={{ color: '#c23b22', marginBottom: '1rem' }}>{error}</p>}
-      {message && <p style={{ color: '#3b7a22', marginBottom: '1rem' }}>{message}</p>}
-
-<AccordionSection title="Brand Assets">
-        <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr auto', alignItems: 'end' }}>
-          <Text label="Navbar logo" value={logoUrl} onChange={setLogoUrl} />
-          <Button onClick={() => updateAsset('logo', logoUrl)} disabled={!logoUrl}>Save logo</Button>
-          <Text label="Favicon" value={faviconUrl} onChange={setFaviconUrl} />
-          <Button onClick={() => updateAsset('favicon', faviconUrl)} disabled={!faviconUrl}>Save favicon</Button>
-          <Text label="Homepage tagline" value={tagline} onChange={setTagline} />
-          <Button onClick={() => updateAsset('tagline', tagline)} disabled={!tagline}>Save tagline</Button>
-        </div>
-        <p style={{ margin: '1rem 0 0', fontSize: '13px', color: '#777' }}>
-          Tip: click an uploaded gallery image to preview, copy its data URL, and paste it above.
-        </p>
-      </AccordionSection>
-
-      <AccordionSection title="Footer / Contact">
-        <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
-          <Text label="Facebook URL" value={footer.facebook_url} onChange={(v) => setFooter({ ...footer, facebook_url: v })} />
-          <Text label="Instagram URL" value={footer.instagram_url} onChange={(v) => setFooter({ ...footer, instagram_url: v })} />
-          <Text label="WhatsApp URL" value={footer.whatsapp_url} onChange={(v) => setFooter({ ...footer, whatsapp_url: v })} />
-          <Text label="Address" value={footer.address} onChange={(v) => setFooter({ ...footer, address: v })} />
-          <Text label="Phone" value={footer.phone} onChange={(v) => setFooter({ ...footer, phone: v })} />
-          <Text label="Email" value={footer.email} onChange={(v) => setFooter({ ...footer, email: v })} />
-        </div>
-        <div style={{ marginTop: '1rem' }}>
-          <Button onClick={saveFooter}>Save footer info</Button>
-        </div>
-      </AccordionSection>
-
-      <AccordionSection title="Image Gallery">
-        <div style={{ display: 'grid', gap: '1rem', marginBottom: '1.5rem' }}>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }}>
-            <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-              Category
-              <select 
-                value={uploadCategory} 
-                onChange={(e) => setUploadCategory(e.target.value)}
-                style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}
-              >
-                <option value="rooms">Rooms</option>
-                <option value="coffee">Coffee</option>
-                <option value="landscape">Landscape</option>
-                <option value="social">Social</option>
-                <option value="other">Other</option>
-              </select>
-            </label>
-            
-            {uploadCategory === 'rooms' && (
-              <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-                Room
-                <select 
-                  value={uploadRoomId} 
-                  onChange={(e) => setUploadRoomId(e.target.value)}
-                  style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}
-                >
-                  <option value="">Select a room</option>
-                  {rooms.map((room) => (
-                    <option key={room.id} value={room.id}>{room.name}</option>
-                  ))}
-                </select>
-              </label>
-            )}
-            
-            <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-              Location Target
-              <select 
-                value={uploadLocationTarget} 
-                onChange={(e) => setUploadLocationTarget(e.target.value)}
-                style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}
-              >
-                <option value="gallery">Gallery</option>
-                <option value="homepage">Homepage</option>
-                <option value="rooms">Rooms</option>
-                <option value="coffee">Coffee</option>
-                <option value="social">Social</option>
-              </select>
-            </label>
-          </div>
-          
-          <label style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', padding: '0.75rem 1.25rem', background: gold, color: navy, borderRadius: '999px', cursor: 'pointer', fontWeight: 600 }}>
-            + Upload images
-            <input type="file" accept="image/*" multiple onChange={handleUpload} style={{ display: 'none' }} />
-          </label>
-        </div>
-        
-        {images.length === 0 ? (
-          <p style={{ color: '#777' }}>No images uploaded yet.</p>
-        ) : (
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '1.25rem' }}>
-            {images.map((img) => (
-              <div
-                key={img.id}
-                style={{
-                  borderRadius: '16px',
-                  overflow: 'hidden',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  background: '#f5f0e8',
-                  transition: 'transform 200ms, box-shadow 200ms',
-                  cursor: 'pointer',
-                }}
-                onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.03)'; e.currentTarget.style.boxShadow = '0 8px 22px rgba(0,0,0,0.12)'; }}
-                onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none'; }}
-                onClick={() => { navigator.clipboard.writeText(img.data); notify('Image URL copied.'); }}
-              >
-                <img src={img.data} alt={img.filename} style={{ width: '100%', height: '180px', objectFit: 'cover' }} />
-                <button
-                  onClick={(e) => { e.stopPropagation(); handleDelete(img.id); }}
-                  style={{ padding: '0.65rem', background: '#c23b22', color: '#fff', border: 'none', cursor: 'pointer', fontSize: '14px', fontWeight: 600 }}
-                >
-                  Delete
-                </button>
-              </div>
-            ))}
-          </div>
-        )}
-      </AccordionSection>
-
-      <AccordionSection title="Homepage Slideshow">
-        <form onSubmit={saveSlide} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
-          <Text label="Title" value={slideForm.title || ''} onChange={(v) => setSlideForm({ ...slideForm, title: v })} />
-          <Text label="Subtitle" value={slideForm.subtitle || ''} onChange={(v) => setSlideForm({ ...slideForm, subtitle: v })} />
-          <Number label="Sort order" value={slideForm.sort_order ?? 0} onChange={(v) => setSlideForm({ ...slideForm, sort_order: parseInt(v || '0', 10) })} />
-          <ImageSelect label="Gallery image" images={images} value={slideForm.image_id ?? ''} onChange={(v) => {
-            const imageId = v ? parseInt(v, 10) : null;
-            const image = imageId ? images.find((img) => img.id === imageId) : null;
-            setSlideForm({ ...slideForm, image_id: imageId, image_url: image?.data || '' });
-          }} />
-          {slideForm.image_url && (
-            <div style={{ gridColumn: '1 / -1' }}>
-              <img src={slideForm.image_url} alt="Slide preview" style={{ width: '100%', maxHeight: '200px', objectFit: 'cover', borderRadius: '12px' }} />
-            </div>
-          )}
-          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
-            <input type="checkbox" checked={slideForm.active !== false} onChange={(e) => setSlideForm({ ...slideForm, active: e.target.checked })} />
-            Active
-          </label>
-          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
-            <Button type="submit">{editingSlide ? 'Update slide' : 'Add slide'}</Button>
-            {editingSlide && <SecondaryButton onClick={() => { setEditingSlide(null); setSlideForm({ title: '', subtitle: '', image_id: null, image_url: '', active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
-          </div>
-        </form>
-        <ListTable rows={slides.map((s) => [s.title || '(untitled)', s.image_url ? '🖼️ image' : 'no image', s.active ? 'On' : 'Off', `#${s.sort_order}`])} onEdit={(i) => editSlide(slides[i])} onDelete={(i) => deleteSlide(slides[i].id)} />
-      </AccordionSection>
-
-      <AccordionSection title="Calendar Events">
-        <form onSubmit={saveEvent} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
-          <Text label="Date" type="date" value={eventForm.date || ''} onChange={(v) => setEventForm({ ...eventForm, date: v })} />
-          <Text label="Title" value={eventForm.title || ''} onChange={(v) => setEventForm({ ...eventForm, title: v })} />
-          <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-            Type
-            <select value={eventForm.type || 'event'} onChange={(e) => setEventForm({ ...eventForm, type: e.target.value as CalendarEvent['type'] })} style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}>
-              <option value="holiday">Holiday</option>
-              <option value="season">Season</option>
-              <option value="weather">Weather</option>
-              <option value="event">Event</option>
-            </select>
-          </label>
-          <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-            Color
-            <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
-              <input
-                type="color"
-                value={eventForm.color || '#E8A849'}
-                onChange={(e) => setEventForm({ ...eventForm, color: e.target.value })}
-                style={{ width: '3rem', height: '2.4rem', padding: 0, border: '1px solid rgba(1,13,30,0.18)', borderRadius: '10px', cursor: 'pointer', background: 'transparent' }}
-              />
-              <Text label="Hex" value={eventForm.color || '#E8A849'} onChange={(v) => setEventForm({ ...eventForm, color: v })} />
-            </div>
-          </label>
-          <Text label="Description" value={eventForm.description || ''} onChange={(v) => setEventForm({ ...eventForm, description: v })} />
-          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
-            <input type="checkbox" checked={eventForm.active !== false} onChange={(e) => setEventForm({ ...eventForm, active: e.target.checked })} />
-            Active
-          </label>
-          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
-            <Button type="submit">{editingEvent ? 'Update event' : 'Add event'}</Button>
-            {editingEvent && <SecondaryButton onClick={() => { setEditingEvent(null); setEventForm({ date: '', title: '', type: 'event', description: '', color: '#E8A849', active: true }); }}>Cancel</SecondaryButton>}
-          </div>
-        </form>
-        <ListTable rows={events.map((ev) => [ev.date, ev.title, ev.type, ev.active ? 'On' : 'Off'])} onEdit={(i) => editEvent(events[i])} onDelete={(i) => deleteEvent(events[i].id)} />
-      </AccordionSection>
-
-      <AccordionSection title="Social Events">
-        <form onSubmit={saveSocialEvent} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
-          <Text label="Name" value={socialEventForm.name || ''} onChange={(v) => setSocialEventForm({ ...socialEventForm, name: v })} />
-          <Text label="Price" value={socialEventForm.price || ''} onChange={(v) => setSocialEventForm({ ...socialEventForm, price: v })} />
-          <Text label="Date" type="date" value={socialEventForm.date || ''} onChange={(v) => setSocialEventForm({ ...socialEventForm, date: v })} />
-          <Number label="Sort order" value={socialEventForm.sort_order ?? 0} onChange={(v) => setSocialEventForm({ ...socialEventForm, sort_order: parseInt(v || '0', 10) })} />
-          <PhotoPicker
-            label="Event photos"
-            images={images}
-            photos={socialEventForm.photos || []}
-            featuredPhoto={socialEventForm.featured_photo || null}
-            onChange={(photos: string[], featured: string | null) => setSocialEventForm({ ...socialEventForm, photos, featured_photo: featured })}
-          />
-          <Text label="Description" value={socialEventForm.description || ''} onChange={(v) => setSocialEventForm({ ...socialEventForm, description: v })} />
-          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
-            <input type="checkbox" checked={socialEventForm.active !== false} onChange={(e) => setSocialEventForm({ ...socialEventForm, active: e.target.checked })} />
-            Active
-          </label>
-          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
-            <Button type="submit">{editingSocialEvent ? 'Update social event' : 'Add social event'}</Button>
-            {editingSocialEvent && <SecondaryButton onClick={() => { setEditingSocialEvent(null); setSocialEventForm({ name: '', description: '', price: '', date: '', photos: [], featured_photo: null, active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
-          </div>
-        </form>
-        <ListTable rows={socialEvents.map((se) => [se.name, se.date || '', se.active ? 'On' : 'Off', `#${se.sort_order}`, `${se.reservation_count || 0} reservations`])}
-          onEdit={(i) => editSocialEvent(socialEvents[i])}
-          onDelete={(i) => deleteSocialEvent(socialEvents[i].id)}
-          onComments={(i) => loadSocialEventReservations(socialEvents[i].id)}
-        />
-        {socialEventReservationsFor !== null && (
-          <div style={{ marginTop: '1.5rem', padding: '1rem', background: '#fff', borderRadius: '12px' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
-              <strong style={{ color: navy }}>Reservations for event #{socialEventReservationsFor}</strong>
-              <SecondaryButton onClick={() => { setSocialEventReservationsFor(null); setSocialEventReservations([]); }}>Close</SecondaryButton>
-            </div>
-            {socialEventReservations.length === 0 ? (
-              <p style={{ color: '#777' }}>No reservations yet.</p>
-            ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-                {socialEventReservations.map((r) => (
-                  <div key={r.id} style={{ padding: '0.75rem', background: '#f5f0e8', borderRadius: '10px' }}>
-                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.3rem' }}>
-                      <strong>{r.username || r.event_name}</strong>
-                      <span style={{ fontSize: '12px', color: '#777' }}>{new Date(r.created_at).toLocaleDateString()}</span>
-                    </div>
-                    <p style={{ margin: 0, color: '#555' }}>{`${r.guests} guest${r.guests === 1 ? '' : 's'}${r.notes ? ' — ' + r.notes : ''}`}</p>
-                    <div style={{ marginTop: '0.5rem', display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
-                      <select
-                        value={r.status}
-                        onChange={(e) => updateReservationStatus(r.id, e.target.value as SocialEventReservation['status'])}
-                        style={{ padding: '0.4rem 0.6rem', borderRadius: '8px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '14px' }}
-                      >
-                        <option value="pending">Pending</option>
-                        <option value="confirmed">Confirmed</option>
-                        <option value="cancelled">Cancelled</option>
-                      </select>
-                      <DangerButton onClick={() => deleteReservation(r.id)}>Delete</DangerButton>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      </AccordionSection>
-
-      <AccordionSection title="Rooms">
-        <form onSubmit={saveRoom} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
-          <Text label="Name" value={roomForm.name || ''} onChange={(v) => setRoomForm({ ...roomForm, name: v })} />
-          <Text label="Price / night" value={roomForm.price || ''} onChange={(v) => setRoomForm({ ...roomForm, price: v })} />
-          <Text label="Description" value={roomForm.description || ''} onChange={(v) => setRoomForm({ ...roomForm, description: v })} />
-          <Number label="Sort order" value={roomForm.sort_order ?? 0} onChange={(v) => setRoomForm({ ...roomForm, sort_order: parseInt(v || '0', 10) })} />
-          <PhotoPicker
-            label="Room photos"
-            images={images}
-            photos={roomForm.photos || []}
-            featuredPhoto={roomForm.featured_photo}
-            onChange={(photos: string[], featured: string | null) => setRoomForm({ ...roomForm, photos, featured_photo: featured })}
-          />
-          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
-            <input type="checkbox" checked={roomForm.active !== false} onChange={(e) => setRoomForm({ ...roomForm, active: e.target.checked })} />
-            Active
-          </label>
-          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
-            <Button type="submit">{editingRoom ? 'Update room' : 'Add room'}</Button>
-            {editingRoom && <SecondaryButton onClick={() => { setEditingRoom(null); setRoomForm({ name: '', description: '', price: '', photos: ([] as string[]), featured_photo: null, active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
-          </div>
-        </form>
-        <ListTable rows={rooms.map((r) => [r.name, `$${r.price}`, r.description.slice(0, 60), r.active ? 'On' : 'Off', `#${r.sort_order}`])}
-          onEdit={(i) => editRoom(rooms[i])}
-          onDelete={(i) => deleteRoom(rooms[i].id)}
-          onComments={(i) => loadRoomComments(rooms[i].id)}
-        />
-        {roomCommentRoomId !== null && (
-          <div style={{ marginTop: '1.5rem', padding: '1rem', background: '#fff', borderRadius: '12px' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
-              <strong style={{ color: navy }}>Comments for room #{roomCommentRoomId}</strong>
-              <SecondaryButton onClick={() => { setRoomCommentRoomId(null); setRoomComments([]); }}>Close</SecondaryButton>
-            </div>
-            {roomComments.length === 0 ? (
-              <p style={{ color: '#777' }}>No comments yet.</p>
-            ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-                {roomComments.map((c) => (
-                  <div key={c.id} style={{ padding: '0.75rem', background: '#f5f0e8', borderRadius: '10px' }}>
-                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.3rem' }}>
-                      <strong>{c.first_name}{c.last_initial ? ` ${c.last_initial}.` : ''}</strong>
-                      <span style={{ fontSize: '12px', color: '#777' }}>{new Date(c.created_at).toLocaleDateString()}</span>
-                    </div>
-                    <p style={{ margin: 0, color: '#555' }}>{c.text}</p>
-                    <div style={{ marginTop: '0.5rem' }}>
-                      <DangerButton onClick={() => deleteRoomComment(c.id)}>Remove comment</DangerButton>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      </AccordionSection>
-
-      <AccordionSection title="Menu">
-        <form onSubmit={saveMenu} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
-          <Text label="Category" value={menuForm.category || ''} onChange={(v) => setMenuForm({ ...menuForm, category: v })} />
-          <Text label="Name" value={menuForm.name || ''} onChange={(v) => setMenuForm({ ...menuForm, name: v })} />
-          <Text label="Price" value={menuForm.price || ''} onChange={(v) => setMenuForm({ ...menuForm, price: v })} />
-          <Number label="Sort order" value={menuForm.sort_order ?? 0} onChange={(v) => setMenuForm({ ...menuForm, sort_order: parseInt(v || '0', 10) })} />
-          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
-            <input type="checkbox" checked={menuForm.is_daily_special || false} onChange={(e) => setMenuForm({ ...menuForm, is_daily_special: e.target.checked })} />
-            Daily special
-          </label>
-          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
-            <input type="checkbox" checked={menuForm.active !== false} onChange={(e) => setMenuForm({ ...menuForm, active: e.target.checked })} />
-            Active
-          </label>
-          <Text label="Description" value={menuForm.description || ''} onChange={(v) => setMenuForm({ ...menuForm, description: v })} />
-          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
-            <Button type="submit">{editingMenu ? 'Update item' : 'Add item'}</Button>
-            {editingMenu && <SecondaryButton onClick={() => { setEditingMenu(null); setMenuForm({ category: '', name: '', description: '', price: '', is_daily_special: false, active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
-          </div>
-        </form>
-        <ListTable rows={menu.map((m) => [m.category, m.name, `$${m.price}`, m.is_daily_special ? '★ Daily' : '', m.active ? 'On' : 'Off', `#${m.sort_order}`])} onEdit={(i) => editMenu(menu[i])} onDelete={(i) => deleteMenu(menu[i].id)} />
-      </AccordionSection>
-
-      <AccordionSection title="Landscape Places">
-        <form onSubmit={savePlace} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
-          <Text label="Name" value={placeForm.name || ''} onChange={(v) => setPlaceForm({ ...placeForm, name: v })} />
-          <Text label="Distance (km)" value={placeForm.distance_km || ''} onChange={(v) => setPlaceForm({ ...placeForm, distance_km: v })} />
-          <Text label="Visit time" value={placeForm.visit_time || ''} onChange={(v) => setPlaceForm({ ...placeForm, visit_time: v })} />
-          <Number label="Sort order" value={placeForm.sort_order ?? 0} onChange={(v) => setPlaceForm({ ...placeForm, sort_order: parseInt(v || '0', 10) })} />
-          <PhotoPicker
-            label="Photos"
-            images={images}
-            photos={placeForm.photos || []}
-            featuredPhoto={placeForm.featured_photo || null}
-            onChange={(photos: string[], featured: string | null) => setPlaceForm({ ...placeForm, photos, featured_photo: featured })}
-          />
-          <Text label="Description" value={placeForm.description || ''} onChange={(v) => setPlaceForm({ ...placeForm, description: v })} />
-          <Text label="Suggestion" value={placeForm.suggestion || ''} onChange={(v) => setPlaceForm({ ...placeForm, suggestion: v })} />
-          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
-            <input type="checkbox" checked={placeForm.active !== false} onChange={(e) => setPlaceForm({ ...placeForm, active: e.target.checked })} />
-            Active
-          </label>
-          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
-            <Button type="submit">{editingPlace ? 'Update place' : 'Add place'}</Button>
-            {editingPlace && <SecondaryButton onClick={() => { setEditingPlace(null); setPlaceForm({ name: '', description: '', photos: ([] as string[]), featured_photo: null, distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
-          </div>
-        </form>
-        <ListTable rows={places.map((p) => [p.name, `${p.distance_km || ''} km`, p.description.slice(0, 60), p.photos.length > 0 ? `🖼️ ${p.photos.length}` : 'no image', p.active ? 'On' : 'Off', `#${p.sort_order}`])} onEdit={(i) => editPlace(places[i])} onDelete={(i) => deletePlace(places[i].id)} />
-      </AccordionSection>
-
-      <AccordionSection title="Pending Reviews">
-        {reviews.length === 0 ? <p style={{ color: '#777' }}>No pending reviews.</p> : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-            {reviews.map((r) => (
-              <div key={r.id} style={{ background: '#fff', padding: '1rem 1.25rem', borderRadius: '12px', boxShadow: '0 1px 3px rgba(1,13,30,0.06)' }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-                  <strong>{r.author_name}</strong>
-                  <span style={{ color: gold }}>{'★'.repeat(r.rating)}{'☆'.repeat(5 - r.rating)}</span>
-                </div>
-                <p style={{ margin: '0 0 0.75rem', color: '#555' }}>{r.text}</p>
-                <div style={{ display: 'flex', gap: '0.5rem' }}>
-                  {!r.approved && <Button onClick={() => approveReview(r.id)}>Approve</Button>}
-                  <DangerButton onClick={() => deleteReview(r.id)}>Delete</DangerButton>
-                </div>
-              </div>
-            ))}
-          function AccordionSection({ title, children, defaultOpen = false }: { title: string; children: React.ReactNode; defaultOpen?: boolean }) {
-            const [open, setOpen] = useState(defaultOpen);
-            return (
-              <section style={{ marginBottom: '2.5rem', background: '#fff', borderRadius: '12px', boxShadow: '0 1px 3px rgba(1,13,30,0.06)', padding: '1rem 1.25rem' }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem', cursor: 'pointer' }} onClick={() => setOpen((v) => !v)}>
-                  <h2 style={{ fontSize: 'clamp(20px, 3vw, 28px)', fontWeight: 400, color: navy, margin: 0 }}>{title}</h2>
-                  <span style={{ fontSize: '13px', fontWeight: 600, color: '#555' }}>{open ? 'Minimize' : 'Maximize'}</span>
-                </div>
-              </section>
-            );
-          }
-                {open && <div style={{ marginTop: '0.25rem' }}>{children}</div>}
-              </section>
-            );
-          }
-
-          function Button({ children, type = 'button', disabled, onClick }: { children: React.ReactNode; type?: 'button' | 'submit'; disabled?: boolean; onClick?: () => void }) {
-            return (
-              <button
-                type={type}
-                disabled={disabled}
-                onClick={onClick}
-                style={{
-                  padding: '0.65rem 1.25rem',
-                  background: disabled ? '#ccc' : gold,
-                  color: navy,
-                  border: 'none',
-                  borderRadius: '999px',
-                  cursor: disabled ? 'not-allowed' : 'pointer',
-                  fontWeight: 600,
-                  transition: 'filter 150ms',
-                }}
-                onMouseEnter={(e) => { if (!disabled) e.currentTarget.style.filter = 'brightness(1.08)'; }}
-                onMouseLeave={(e) => { e.currentTarget.style.filter = 'brightness(1)'; }}
-              >
-                {children}
-              </button>
-            );
-          }
-
-          function SecondaryButton({ children, onClick, type = 'button' }: { children: React.ReactNode; onClick?: () => void; type?: 'button' | 'submit' }) {
-            return (
-              <button
-                type={type}
-                onClick={onClick}
-                style={{
-                  padding: '0.65rem 1.25rem',
-                  background: 'transparent',
-                  color: navy,
-                  border: `1px solid ${navy}`,
-                  borderRadius: '999px',
-                  cursor: 'pointer',
-                  fontWeight: 600,
-                }}
-              >
-                {children}
-              </button>
-            );
-          }
-
-          function DangerButton({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
-            return (
-    <button
-      onClick={onClick}
-      style={{ padding: '0.5rem 1rem', background: '#c23b22', color: '#fff', border: 'none', borderRadius: '999px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function Text({ label, value, type = 'text', onChange }: { label: string; value: string; type?: string; onChange: (v: string) => void }) {
-  return (
-    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-      {label}
-      <input
-        type={type}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px' }}
-      />
-    </label>
-  );
-}
-
-function Number({ label, value, onChange }: { label: string; value: number; onChange: (v: string) => void }) {
-  return (
-    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-      {label}
-      <input
-        type="number"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px' }}
-      />
-    </label>
-  );
-}
-
-function ImageSelect({ label, images, value, onChange }: { label: string; images: ImageRecord[]; value: string | number; onChange: (v: string) => void }) {
-  return (
-    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-      {label}
-      <select value={value} onChange={(e) => onChange(e.target.value)} style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}>
-        <option value="">-- select image --</option>
-        {images.map((img) => (
-          <option key={img.id} value={img.id}>{img.filename}</option>
-        ))}
-      </select>
-    </label>
-  );
-}
-
-function PhotoPicker({ label, images, photos, featuredPhoto, onChange }: { label: string; images: ImageRecord[]; photos: string[]; featuredPhoto: string | null; onChange: (photos: string[], featured: string | null) => void }) {
-  return (
-    <div style={{ gridColumn: '1 / -1' }}>
-      <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555', marginBottom: '0.5rem' }}>{label}</label>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))', gap: '0.75rem' }}>
-        {images.map((img) => {
-          const selected = photos.includes(img.data);
-          const featured = featuredPhoto === img.data;
-          return (
-            <div
-              key={img.id}
-              onClick={() => {
-                const next = selected ? photos.filter((p) => p !== img.data) : [...photos, img.data];
-                const nextFeatured = featured ? null : img.data;
-                onChange(next, nextFeatured);
-              }}
-              style={{
-                border: selected ? `3px solid ${gold}` : '3px solid transparent',
-                borderRadius: '12px',
-                overflow: 'hidden',
-                cursor: 'pointer',
-                position: 'relative',
-                transition: 'transform 150ms',
-              }}
-              onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.03)'; }}
-              onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
-            >
-              {featured && <span style={{ position: 'absolute', top: 4, left: 4, background: gold, color: navy, fontSize: '11px', fontWeight: 700, padding: '2px 6px', borderRadius: '6px' }}>FEATURED</span>}
-              {selected && !featured && <span style={{ position: 'absolute', top: 4, right: 4, background: navy, color: '#fff', fontSize: '11px', fontWeight: 700, padding: '2px 6px', borderRadius: '6px' }}>✓</span>}
-              <img src={img.data} alt={img.filename} style={{ width: '100%', height: '100px', objectFit: 'cover' }} />
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function ListTable({ rows, onEdit, onDelete, onComments }: { rows: (string | number)[][]; onEdit?: (i: number) => void; onDelete?: (i: number) => void; onComments?: (i: number) => void }) {
-  if (rows.length === 0) return <p style={{ color: '#777' }}>No items yet.</p>;
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-      {rows.map((row, i) => (
-        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem 1rem', background: '#fff', borderRadius: '12px', boxShadow: '0 1px 3px rgba(1,13,30,0.06)' }}>
-          <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-            {row.map((cell, j) => (
-              <span key={j} style={{ color: j === 0 ? navy : '#555', fontWeight: j === 0 ? 600 : 400 }}>{cell}</span>
-            ))}
-          </div>
-          <div style={{ display: 'flex', gap: '0.5rem' }}>
-            {onEdit && <SecondaryButton onClick={() => onEdit(i)}>Edit</SecondaryButton>}
-            {onComments && <SecondaryButton onClick={() => onComments(i)}>Reservations</SecondaryButton>}
-            {onDelete && <DangerButton onClick={() => onDelete(i)}>Delete</DangerButton>}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function Textarea({ label, value, onChange, rows = 3 }: { label: string; value: string; onChange: (v: string) => void; rows?: number }) {
-  return (
-    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-      {label}
-      <textarea
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        rows={rows}
-        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px', resize: 'vertical' }}
-      />
-    </label>
-  );
-}
-
-function Select({ label, value, options, onChange }: { label: string; value: string; options: { value: string; label: string }[]; onChange: (v: string) => void }) {
-  return (
-    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-      {label}
-      <select value={value} onChange={(e) => onChange(e.target.value)} style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}>
-        {options.map((opt) => (
-          <option key={opt.value} value={opt.value}>{opt.label}</option>
-        ))}
-      </select>
-    </label>
-  );
-}
-
-function Checkbox({ label, checked, onChange }: { label: string; checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
-      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
-      {label}
-    </label>
-  );
-}
-
-function StarRating({ value, onChange }: { value: number; onChange: (v: number) => void }) {
-  return (
-    <div style={{ display: 'flex', gap: '0.25rem' }}>
-      {[1, 2, 3, 4, 5].map((n) => (
-        <button
-          key={n}
-          type="button"
-          onClick={() => onChange(n)}
-          style={{ background: 'transparent', border: 'none', cursor: 'pointer', fontSize: '22px', color: n <= value ? gold : '#ccc' }}
-        >
-          ★
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function DatePicker({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
-  return (
-    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-      {label}
-      <input
-        type="date"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px' }}
-      />
-    </label>
-  );
-}
-
-function ColorPicker({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
-  return (
-    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-      {label}
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
-        <input
-          type="color"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          style={{ width: '3rem', height: '2.4rem', padding: 0, border: '1px solid rgba(1,13,30,0.18)', borderRadius: '10px', cursor: 'pointer', background: 'transparent' }}
-        />
-        <Text label="Hex" value={value} onChange={onChange} />
-      </div>
-    </label>
-  );
-}
-
-function Modal({ open, onClose, title, children }: { open: boolean; onClose: () => void; title: string; children: React.ReactNode }) {
-  if (!open) return null;
-  return (
-    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
-      <div onClick={(e) => e.stopPropagation()} style={{ background: '#fffdf9', padding: '1.5rem', borderRadius: '16px', maxWidth: '560px', width: '90%', maxHeight: '80vh', overflow: 'auto' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-          <h3 style={{ margin: 0, color: navy }}>{title}</h3>
-          <button onClick={onClose} style={{ background: 'transparent', border: 'none', fontSize: '20px', cursor: 'pointer' }}>✕</button>
-        </div>
-        {children}
-      </div>
-    </div>
-  );
-}
-
-function StatusBadge({ status }: { status: 'pending' | 'confirmed' | 'cancelled' }) {
-  const color = status === 'confirmed' ? '#3b7a22' : status === 'cancelled' ? '#c23b22' : '#a6683c';
-  return (
-    <span style={{ padding: '0.25rem 0.6rem', borderRadius: '999px', background: `${color}20`, color, fontSize: '12px', fontWeight: 700, textTransform: 'uppercase' }}>
-      {status}
-    </span>
-  );
-}
-
-function LoadingSpinner() {
-  return (
-    <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
-      <div style={{ width: '2rem', height: '2rem', border: `3px solid ${gold}40`, borderTop: `3px solid ${gold}`, borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
-    </div>
-  );
-}
-
-function EmptyState({ text }: { text: string }) {
-  return <p style={{ color: '#777', textAlign: 'center', padding: '2rem 0' }}>{text}</p>;
-}
-
-function ErrorMessage({ message }: { message: string }) {
-  return <p style={{ color: '#c23b22', textAlign: 'center', padding: '1rem 0' }}>{message}</p>;
-}
-
-function Card({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) {
-  return (
-    <div
-      onClick={onClick}
-      style={{
-        background: '#fff',
-        borderRadius: '16px',
-        boxShadow: '0 2px 8px rgba(1,13,30,0.06)',
-        padding: '1.25rem',
-        cursor: onClick ? 'pointer' : 'default',
-        transition: 'transform 200ms, box-shadow 200ms',
-      }}
-      onMouseEnter={(e) => { if (onClick) { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 8px 22px rgba(1,13,30,0.12)'; }}}
-      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(1,13,30,0.06)'; }}
-    >
-      {children}
-    </div>
-  );
-}
-
-function Input({ label, value, onChange, type = 'text' }: { label: string; value: string; onChange: (v: string) => void; type?: string }) {
-  return (
-    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-      {label}
-      <input
-        type={type}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px' }}
-      />
-    </label>
-  );
-}
-
-function Label({ children }: { children: React.ReactNode }) {
-  return <span style={{ fontSize: '14px', color: '#555' }}>{children}</span>;
-}
-
-function FormGrid({ children }: { children: React.ReactNode }) {
-  return <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>{children}</div>;
-}
-
-function PageHeader({ title, subtitle }: { title: string; subtitle?: string }) {
-  return (
-    <div style={{ marginBottom: '1.5rem' }}>
-      <h1 style={{ fontSize: 'clamp(28px, 4vw, 42px)', fontWeight: 400, fontStyle: 'italic', color: navy, margin: '0 0 0.5rem' }}>{title}</h1>
-      {subtitle && <p style={{ color: '#555', margin: 0 }}>{subtitle}</p>}
-    </div>
-  );
-}
-
-function Tabs({ tabs, active, onChange }: { tabs: string[]; active: string; onChange: (t: string) => void }) {
-  return (
-    <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem', borderBottom: `1px solid rgba(1,13,30,0.12)` }}>
-      {tabs.map((tab) => (
-        <button
-          key={tab}
-          onClick={() => onChange(tab)}
-          style={{
-            padding: '0.75rem 1.25rem',
-            background: 'transparent',
-            border: 'none',
-            borderBottom: active === tab ? `3px solid ${gold}` : '3px solid transparent',
-            color: active === tab ? navy : '#555',
-            fontWeight: active === tab ? 700 : 400,
-            cursor: 'pointer',
-          }}
-        >
-          {tab}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function PageWrapper({ children }: { children: React.ReactNode }) {
-  return (
-    <main style={{ padding: '2rem', maxWidth: '80rem', margin: '0 auto' }}>
-      {children}
-    </main>
-  );
-}
-
-function ActionBar({ children }: { children: React.ReactNode }) {
-  return <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>{children}</div>;
-}
-
-function StatsCards({ stats }: { stats: { label: string; value: string | number }[] }) {
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '1rem', marginBottom: '1.5rem' }}>
-      {stats.map((s) => (
-        <div key={s.label} style={{ background: '#fff', borderRadius: '12px', padding: '1rem', boxShadow: '0 1px 3px rgba(1,13,30,0.06)' }}>
-          <div style={{ fontSize: '12px', color: '#777', textTransform: 'uppercase', letterSpacing: '0.5px' }}>{s.label}</div>
-          <div style={{ fontSize: '24px', fontWeight: 700, color: navy, marginTop: '0.25rem' }}>{s.value}</div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default function AdminPage() {
-}
-}
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 8ee0b4a..b96bb5b 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -18,17 +18,8 @@ export function useAuth() {
   }, []);
 
   const login = useCallback((username: string, password: string): boolean => {
+    // TODO: Implement server-side authentication via API call
     if (typeof window === 'undefined') return false;
-    if (username === 'admin' && password === 'admin') {
-      localStorage.setItem(ROLE_KEY, 'admin');
-      setRole('admin');
-      return true;
-    }
-    if (username === 'user' && password === 'user') {
-      localStorage.setItem(ROLE_KEY, 'user');
-      setRole('user');
-      return true;
-    }
     return false;
   }, []);