diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 2aa659a..7bab3aa 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,1185 +1,1088 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 
-// Types
-type Image = {
-  id: number;
-  data: string;
-  filename: string;
-  category: string;
-  room_id: number | null;
-  location_target: string;
+type Image = { id: number; filename: string; data: string; category: string; room_id: number | null; location_target: string; uploaded_at: string };
+type Slide = { id: number; title: string; subtitle: string; image_url: string | null; image_id: number | null; active: boolean; sort_order: number };
+type Room = { id: number; name: string; description: string; price: string; photos: string[]; featured_photo: string | null; active: boolean; sort_order: number };
+type CalendarEvent = { id: number; date: string; title: string; type: string; color: string; description: string | null; active: boolean };
+type SocialEvent = { id: number; name: string; description: string; price: string | null; date: string | null; photos: string[]; featured_photo: string | null; active: boolean; sort_order: number };
+type MenuItem = { id: number; category: string; name: string; description: string; price: string; is_daily_special: boolean; active: boolean; sort_order: number };
+type Place = { id: number; name: string; description: string; photos: string[]; featured_photo: string | null; distance_km: string; visit_time: string; suggestion: string; active: boolean; sort_order: number };
+type Review = { id: number; author_name: string; author_email: string | null; rating: number; text: string; approved: boolean };
+type FooterConfig = { logo: string; favicon: string; tagline: string; facebook_url: string; instagram_url: string; whatsapp_url: string; address: string; phone: string; email: string };
+type SocialRes = { id: number; event_id: number; username: string; event_name: string; guests: number; notes: string; status: string; created_at: string };
+
+const C = {
+  gold: '#D4A853', goldLight: 'rgba(212,168,83,0.12)', navy: '#010D1E',
+  warm: '#7A5A3A', bg: '#F7F4EF', card: '#FFFFFF', border: 'rgba(1,13,30,0.08)',
+  text: '#444444', textLight: '#888888', danger: '#D32F2F', success: '#388E3C',
+  shadow: '0 1px 4px rgba(1,13,30,0.06)', shadowHover: '0 6px 20px rgba(1,13,30,0.12)',
 };
 
-type FooterInfo = {
-  facebook_url: string;
-  instagram_url: string;
-  whatsapp_url: string;
-  address: string;
-  phone: string;
-  email: string;
-};
+const NAV = [
+  { id: 'brand', label: 'Brand', icon: '🎨' },
+  { id: 'gallery', label: 'Images', icon: '🖼️' },
+  { id: 'slides', label: 'Slideshow', icon: '🎞️' },
+  { id: 'calendar', label: 'Calendar', icon: '📅' },
+  { id: 'social', label: 'Social Events', icon: '🎪' },
+  { id: 'rooms', label: 'Rooms', icon: '🏨' },
+  { id: 'menu', label: 'Menu', icon: '🍽️' },
+  { id: 'places', label: 'Places', icon: '🗺️' },
+  { id: 'reviews', label: 'Reviews', icon: '⭐' },
+  { id: 'users', label: 'Users', icon: '👥' },
+];
 
-type Slide = {
-  id: number;
-  title: string;
-  subtitle: string;
-  image_id: number | null;
-  image_url: string;
-  active: boolean;
-  sort_order: number;
-};
-
-type CalendarEvent = {
-  id: number;
-  date: string;
-  title: string;
-  type: 'holiday' | 'season' | 'weather' | 'event';
-  color: string;
-  description: string;
-  active: boolean;
-};
-
-type SocialEvent = {
-  id: number;
-  name: string;
-  description: string;
-  price: string;
-  date: string;
-  photos: string[];
-  featured_photo: string | null;
-  active: boolean;
-  sort_order: number;
-  reservation_count: number;
-};
-
-type SocialEventReservation = {
-  id: number;
-  event_id: number;
-  username: string;
-  event_name: string;
-  guests: number;
-  notes: string;
-  status: 'pending' | 'confirmed' | 'cancelled';
-  created_at: string;
-};
-
-type Room = {
-  id: number;
-  name: string;
-  description: string;
-  price: string;
-  photos: string[];
-  featured_photo: string | null;
-  active: boolean;
-  sort_order: number;
-};
-
-type RoomComment = {
-  id: number;
-  room_id: number;
-  first_name: string;
-  last_initial: string;
-  text: string;
-  created_at: string;
-};
-
-type MenuItem = {
-  id: number;
-  category: string;
-  name: string;
-  description: string;
-  price: string;
-  is_daily_special: boolean;
-  active: boolean;
-  sort_order: number;
-};
-
-type Place = {
-  id: number;
-  name: string;
-  description: string;
-  photos: string[];
-  featured_photo: string | null;
-  distance_km: string;
-  visit_time: string;
-  suggestion: string;
-  active: boolean;
-  sort_order: number;
-};
-
-type Review = {
-  id: number;
-  author_name: string;
-  rating: number;
-  text: string;
-  approved: boolean;
-};
-
-// Constants
-const gold = '#E8A849';
-const navy = '#010D1E';
-const warm = '#7A5A3A';
-
-// Components
-function Text({ label, value, onChange, type = 'text' }: { label: string; value: string; onChange: (value: string) => void; type?: string }) {
+function I({ label, value, onChange, type = 'text', placeholder, style }: any) {
   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)' }}
-      />
-    </label>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+      {label && <label style={{ fontSize: '13px', fontWeight: 600, color: C.text }}>{label}</label>}
+      <input type={type} value={value ?? ''} onChange={e => onChange(e.target.value)} placeholder={placeholder}
+        style={{ padding: '8px 12px', borderRadius: 8, border: `1px solid ${C.border}`, fontSize: '14px', outline: 'none', background: '#FAFAFA', ...style }}
+        onFocus={e => { e.target.style.borderColor = C.gold; e.target.style.background = C.white; }}
+        onBlur={e => { e.target.style.borderColor = C.border; e.target.style.background = '#FAFAFA'; }} />
+    </div>
   );
 }
 
-function Number({ label, value, onChange }: { label: string; value: number; onChange: (value: string) => void }) {
+function TA({ label, value, onChange, rows = 3 }: any) {
   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)' }}
-      />
-    </label>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+      {label && <label style={{ fontSize: '13px', fontWeight: 600, color: C.text }}>{label}</label>}
+      <textarea value={value ?? ''} onChange={e => onChange(e.target.value)} rows={rows}
+        style={{ padding: '8px 12px', borderRadius: 8, border: `1px solid ${C.border}`, fontSize: '14px', outline: 'none', background: '#FAFAFA', resize: 'vertical', fontFamily: 'inherit' }}
+        onFocus={e => { e.target.style.borderColor = C.gold; e.target.style.background = C.white; }}
+        onBlur={e => { e.target.style.borderColor = C.border; e.target.style.background = '#FAFAFA'; }} />
+    </div>
   );
 }
 
-function ImageSelect({ label, images, value, onChange }: { label: string; images: Image[]; value: string; onChange: (value: string) => void }) {
+function S({ label, value, onChange, options, style }: any) {
   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 an image</option>
-        {images.map((img) => (
-          <option key={img.id} value={img.id.toString()}>
-            {img.filename}
-          </option>
-        ))}
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+      {label && <label style={{ fontSize: '13px', fontWeight: 600, color: C.text }}>{label}</label>}
+      <select value={value ?? ''} onChange={e => onChange(e.target.value)}
+        style={{ padding: '8px 12px', borderRadius: 8, border: `1px solid ${C.border}`, fontSize: '14px', outline: 'none', background: '#FAFAFA' }}>
+        {options.map((o: any) => <option key={o.value} value={o.value}>{o.label}</option>)}
       </select>
+    </div>
+  );
+}
+
+function Tgl({ label, checked, onChange }: any) {
+  return (
+    <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', fontSize: '14px', color: C.text }}>
+      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)}
+        style={{ width: 18, height: 18, accentColor: C.gold, cursor: 'pointer' }} />
+      {label}
     </label>
   );
 }
 
-function PhotoPicker({ label, images, photos, featuredPhoto, onChange }: { label: string; images: Image[]; photos: string[]; featuredPhoto: string | null; onChange: (photos: string[], featured: string | null) => void }) {
+function Btn({ children, onClick, variant = 'primary', size = 'md', disabled }: any) {
+  const sz = size === 'sm' ? { padding: '5px 10px', fontSize: '12px' } : { padding: '8px 16px', fontSize: '14px' };
+  const bg = variant === 'danger' ? C.danger : variant === 'secondary' ? '#E8E4DF' : C.gold;
+  const color = variant === 'secondary' ? C.text : '#fff';
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
-      {label}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', padding: '0.75rem', border: '1px solid rgba(1,13,30,0.18)', borderRadius: '10px' }}>
-        {images
-          .filter((img) => photos.includes(img.data))
-          .map((img) => (
-            <div key={img.id} style={{ position: 'relative' }}>
-              <img src={img.data} alt={img.filename} style={{ width: '60px', height: '60px', objectFit: 'cover', borderRadius: '8px' }} />
-              <button
-                onClick={() => onChange(photos.filter((p) => p !== img.data), featuredPhoto === img.data ? null : featuredPhoto)}
-                style={{ position: 'absolute', top: '-8px', right: '-8px', width: '20px', height: '20px', borderRadius: '50%', background: '#c23b22', color: '#fff', border: 'none', cursor: 'pointer', fontSize: '12px' }}
-              >
-                ×
-              </button>
-              {featuredPhoto === img.data && (
-                <div style={{ position: 'absolute', bottom: '-8px', left: '50%', transform: 'translateX(-50%)', background: gold, color: '#fff', fontSize: '10px', padding: '2px 6px', borderRadius: '8px' }}>
-                  Featured
-                </div>
+    <button onClick={onClick} disabled={disabled} style={{ ...sz, borderRadius: 8, border: 'none', cursor: disabled ? 'default' : 'pointer',
+      background: bg, color, fontWeight: 600, opacity: disabled ? 0.5 : 1, transition: 'all 200ms' }}
+      onMouseEnter={e => { if (!disabled) { e.currentTarget.style.opacity = '0.85'; e.currentTarget.style.transform = 'translateY(-1px)'; } }}
+      onMouseLeave={e => { if (!disabled) { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'translateY(0)'; } }}>
+      {children}
+    </button>
+  );
+}
+
+function Badge({ children, color: c }: any) {
+  return (
+    <span style={{ padding: '2px 10px', borderRadius: 20, fontSize: '12px', fontWeight: 600,
+      background: c || C.goldLight, color: c ? '#fff' : C.gold }}>
+      {children}
+    </span>
+  );
+}
+
+function Toast({ message, type, onClose }: any) {
+  useEffect(() => { const t = setTimeout(onClose, 3500); return () => clearTimeout(t); }, [onClose]);
+  return (
+    <div style={{ position: 'fixed', top: '20px', right: '20px', padding: '12px 20px', borderRadius: 12,
+      background: type === 'success' ? C.success : type === 'error' ? C.danger : C.gold,
+      color: '#fff', boxShadow: C.shadowHover, zIndex: 9999, fontSize: '14px', fontWeight: 500,
+      display: 'flex', alignItems: 'center', gap: '10px' }}>
+      {message}
+      <button onClick={onClose} style={{ background: 'transparent', border: 'none', color: '#fff', cursor: 'pointer', fontSize: '18px', lineHeight: 1 }}>×</button>
+    </div>
+  );
+}
+
+function StatCard({ icon, value, label }: any) {
+  return (
+    <div style={{ background: C.card, borderRadius: 14, padding: '16px 20px', boxShadow: C.shadow,
+      display: 'flex', alignItems: 'center', gap: '14px', minWidth: '160px' }}>
+      <span style={{ fontSize: '28px' }}>{icon}</span>
+      <div>
+        <div style={{ fontSize: '22px', fontWeight: 700, color: C.navy }}>{value}</div>
+        <div style={{ fontSize: '12px', color: C.textLight }}>{label}</div>
+      </div>
+    </div>
+  );
+}
+
+function Empty({ icon, title, desc }: any) {
+  return (
+    <div style={{ textAlign: 'center', padding: '40px 20px', color: C.textLight }}>
+      <div style={{ fontSize: '48px', marginBottom: '8px' }}>{icon}</div>
+      <div style={{ fontSize: '16px', fontWeight: 600, color: C.text, marginBottom: '4px' }}>{title}</div>
+      {desc && <div style={{ fontSize: '13px' }}>{desc}</div>}
+    </div>
+  );
+}
+
+function SecHead({ title, count, action }: any) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px', flexWrap: 'wrap', gap: '10px' }}>
+      <h2 style={{ margin: 0, fontSize: '20px', fontWeight: 700, color: C.navy }}>
+        {title} <span style={{ fontSize: '14px', fontWeight: 400, color: C.textLight }}>({count})</span>
+      </h2>
+      {action}
+    </div>
+  );
+}
+
+/* ─── Image helpers ─── */
+function readFileBase64(file: File): Promise<string> {
+  return new Promise((res, rej) => {
+    const r = new FileReader();
+    r.onload = () => res(r.result as string);
+    r.onerror = rej;
+    r.readAsDataURL(file);
+  });
+}
+
+/* ─── Entity thumbnail ─── */
+function Thumb({ urls, w = 200, h = 140 }: { urls: string[]; w?: number; h?: number }) {
+  if (!urls?.length) return <div style={{ width: w, height: h, background: '#EEE', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#BBB' }}>No image</div>;
+  return <img src={urls[0]} alt="" style={{ width: w, height: h, objectFit: 'cover', borderRadius: 12 }} />;
+}
+
+/* ─── Thumbnail grid (inline, small) ─── */
+function MiniThumbs({ urls, max = 3 }: { urls: string[]; max?: number }) {
+  if (!urls?.length) return null;
+  return (
+    <div style={{ display: 'flex', gap: '6px', marginTop: '8px' }}>
+      {urls.slice(0, max).map((u, i) => (
+        <img key={i} src={u} alt="" style={{ width: 70, height: 50, objectFit: 'cover', borderRadius: 8, cursor: 'pointer', border: '1px solid #eee' }} />
+      ))}
+      {urls.length > max && <span style={{ padding: '8px', background: '#EEE', borderRadius: 8, fontSize: '12px', color: '#999' }}>+{urls.length - max}</span>}
+    </div>
+  );
+}
+
+/* ─── Section uploader (per-section image upload) ─── */
+function SectionUploader({ category, room_id, label, onUploaded }: { category: string; room_id: number | null; label: string; onUploaded?: () => void }) {
+  const ref = useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <Btn onClick={() => ref.current?.click()} size="sm">{label}</Btn>
+      <input ref={ref} type="file" accept="image/*" multiple style={{ display: 'none' }}
+        onChange={async (e) => {
+          for (const file of Array.from(e.target.files || [])) {
+            const b64 = await readFileBase64(file);
+            try {
+              const res = await fetch('/api/admin/images', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ filename: file.name, data: b64, category, room_id, location_target: category }),
+              });
+              if (res.ok) onUploaded?.();
+            } catch (err) { console.error(err); }
+          }
+          e.target.value = '';
+        }} />
+    </>
+  );
+}
+
+/* ─── Image gallery filter buttons ─── */
+function GalleryFilter({ images, onDelete, filter, onFilter }: { images: Image[]; onDelete: (id: number) => void; filter: string; onFilter: (f: string) => void }) {
+  const cats = ['all', 'rooms', 'slides', 'social', 'landscape', 'other'];
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '6px', marginBottom: '16px', flexWrap: 'wrap' }}>
+        {cats.map(c => (
+          <Btn key={c} onClick={() => onFilter(c)} variant={filter === c ? 'primary' : 'secondary'} size="sm">{c === 'all' ? 'All' : c.charAt(0).toUpperCase() + c.slice(1)}</Btn>
+        ))}
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: '12px' }}>
+        {images.filter(img => filter === 'all' || img.category === filter).map(img => (
+          <div key={img.id} style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', boxShadow: C.shadow }}>
+            <img src={img.data} alt={img.filename} style={{ width: '100%', height: '90px', objectFit: 'cover', display: 'block' }} />
+            <div style={{ padding: '6px 8px', fontSize: '11px', color: C.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', background: C.card }}>
+              {img.filename}
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '2px' }}>
+              <button onClick={() => onDelete(img.id)} style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: C.danger, fontSize: '16px', padding: '2px 6px' }}>×</button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ─── Entity card ─── */
+function EntityCard({ title, desc, meta, thumb, actions, photoUrls }: any) {
+  return (
+    <div style={{ background: C.card, borderRadius: 16, overflow: 'hidden', boxShadow: C.shadow, transition: 'all 200ms', border: `1px solid ${C.border}` }}
+      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = C.shadowHover; }}
+      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = C.shadow; }}>
+      {thumb ? (
+        <img src={thumb} alt="" style={{ width: '100%', height: 140, objectFit: 'cover' }} />
+      ) : photoUrls?.length ? <Thumb urls={photoUrls} /> : <div style={{ height: 100, background: '#EEE', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#CCC' }}>📷</div>}
+      <div style={{ padding: '14px 16px' }}>
+        <div style={{ fontWeight: 700, color: C.navy, fontSize: '15px', marginBottom: '4px' }}>{title}</div>
+        {desc && <div style={{ fontSize: '13px', color: C.text, lineHeight: 1.4, marginBottom: '6px', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{desc}</div>}
+        {meta && <div style={{ fontSize: '12px', color: C.textLight, marginBottom: '10px' }}>{meta}</div>}
+        {photoUrls?.length ? <MiniThumbs urls={photoUrls} /> : null}
+        {actions && <div style={{ display: 'flex', gap: '8px', marginTop: '12px' }}>{actions}</div>}
+      </div>
+    </div>
+  );
+}
+
+/* ─── Confirm dialog ─── */
+function Confirm({ message, onConfirm, onCancel }: any) {
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9998 }}>
+      <div style={{ background: C.white, borderRadius: 16, padding: '24px 28px', maxWidth: 360, width: '90%', boxShadow: '0 20px 60px rgba(0,0,0,0.2)' }}>
+        <p style={{ margin: '0 0 20px', fontSize: '15px', color: C.text }}>{message}</p>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
+          <Btn onClick={onCancel} variant="secondary">Cancel</Btn>
+          <Btn onClick={onConfirm} variant="danger">Delete</Btn>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Slides Section ─── */
+function SlidesSection({ slides, setSlides, images, onToast }: any) {
+  const [editing, setEditing] = useState<Slide | null>(null);
+  const [confirmDel, setConfirmDel] = useState<number | null>(null);
+
+  const saveSlide = async (slide: Slide) => {
+    try {
+      const res = await fetch(`/api/slides/${slide.id}`, {
+        method: slide.id ? 'PUT' : 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(slide),
+      });
+      if (res.ok) { setEditing(null); setSlides((s: any) => s.map((s: Slide) => s.id === slide.id ? slide : s)); onToast('Slide saved!', 'success'); }
+    } catch { onToast('Error saving slide', 'error'); }
+  };
+
+  const delSlide = async (id: number) => {
+    try {
+      await fetch(`/api/slides/${id}`, { method: 'DELETE' });
+      setSlides((s: any) => s.filter((x: Slide) => x.id !== id));
+      onToast('Slide deleted', 'success');
+    } catch { onToast('Error deleting slide', 'error'); }
+    setConfirmDel(null);
+  };
+
+  return (
+    <div>
+      <SecHead title="🎞️ Slideshow" count={slides.length}
+        action={<Btn onClick={() => setEditing({ id: 0, title: '', subtitle: '', image_url: null, image_id: null, active: true, sort_order: slides.length })} size="sm">+ New Slide</Btn>} />
+      {slides.length === 0 ? <Empty icon="🎞️" title="No slides yet" /> : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px' }}>
+          {slides.map((s: Slide) => (
+            <EntityCard key={s.id} title={s.title} desc={s.subtitle} meta={s.active ? 'Active' : 'Inactive'}
+              thumb={s.image_url || s.image_id ? (images.find((i: Image) => i.id === s.image_id)?.data) : null}
+              actions={
+                <>
+                  <Btn size="sm" variant="secondary" onClick={() => setEditing(s)}>Edit</Btn>
+                  <Btn size="sm" variant="danger" onClick={() => setConfirmDel(s.id)}>Del</Btn>
+                </>
+              } />
+          ))}
+        </div>
+      )}
+      {editing && (
+        <SlideEditor slide={editing} setSlide={setEditing} images={images} onSave={saveSlide} onCancel={() => setEditing(null)} />
+      )}
+      {confirmDel !== null && <Confirm message="Delete this slide?" onCancel={() => setConfirmDel(null)} onConfirm={() => delSlide(confirmDel)} />}
+    </div>
+  );
+}
+
+function SlideEditor({ slide, setSlide, images, onSave, onCancel }: any) {
+  const [showPicker, setShowPicker] = useState(false);
+  const s = { ...slide };
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9998 }}>
+      <div style={{ background: C.white, borderRadius: 16, padding: '24px 28px', maxWidth: 500, width: '90%', maxHeight: '90vh', overflowY: 'auto' }}>
+        <h3 style={{ margin: '0 0 20px', fontSize: '18px', fontWeight: 700, color: C.navy }}>{s.id ? 'Edit Slide' : 'New Slide'}</h3>
+        <div style={{ display: 'grid', gap: '14px' }}>
+          <I label="Title" value={s.title} onChange={(v: string) => setSlide({ ...s, title: v })} />
+          <I label="Subtitle" value={s.subtitle} onChange={(v: string) => setSlide({ ...s, subtitle: v })} />
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            <label style={{ fontSize: '13px', fontWeight: 600, color: C.text }}>Image</label>
+            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+              <Btn onClick={() => setShowPicker(!showPicker)} size="sm" variant="secondary">{showPicker ? 'Hide picker' : 'Pick from gallery'}</Btn>
+              {s.image_id && images.find((i: Image) => i.id === s.image_id) && (
+                <img src={images.find((i: Image) => i.id === s.image_id)!.data} style={{ width: 80, height: 56, objectFit: 'cover', borderRadius: 8, border: `2px solid ${C.gold}` }} />
               )}
             </div>
-          ))}
-        <button
-          onClick={() => {
-            const newPhoto = prompt('Enter image URL or select from gallery');
-            if (newPhoto) {
-              onChange([...photos, newPhoto], featuredPhoto);
-            }
-          }}
-          style={{ width: '60px', height: '60px', borderRadius: '8px', border: '1px dashed rgba(1,13,30,0.3)', background: 'transparent', cursor: 'pointer', color: '#777' }}
-        >
-          +
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function ListTable({ rows, onEdit, onDelete, onComments }: { rows: any[][]; onEdit?: (index: number) => void; onDelete?: (index: number) => void; onComments?: (index: number) => void }) {
-  return (
-    <div style={{ overflowX: 'auto' }}>
-      <table style={{ width: '100%', borderCollapse: 'collapse', background: '#fff', borderRadius: '12px', boxShadow: '0 1px 3px rgba(1,13,30,0.06)' }}>
-        <thead>
-          <tr>
-            {rows[0]?.map((_, i) => (
-              <th key={i} style={{ textAlign: 'left', padding: '0.75rem 1rem', borderBottom: '1px solid rgba(1,13,30,0.08)', color: '#777', fontSize: '14px', fontWeight: 600 }}>
-                Column {i + 1}
-              </th>
-            ))}
-            <th style={{ textAlign: 'right', padding: '0.75rem 1rem', borderBottom: '1px solid rgba(1,13,30,0.08)', color: '#777', fontSize: '14px', fontWeight: 600 }}>
-              Actions
-              </th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row, i) => (
-            <tr key={i} style={{ borderBottom: '1px solid rgba(1,13,30,0.05)' }}>
-              {row.map((cell, j) => (
-                <td key={j} style={{ padding: '0.75rem 1rem', color: '#555' }}>
-                  {cell}
-                </td>
-              ))}
-              <td style={{ padding: '0.75rem 1rem', textAlign: 'right' }}>
-                <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
-                  {onComments && (
-                    <button
-                      onClick={() => onComments(i)}
-                      style={{ padding: '0.4rem 0.6rem', background: 'transparent', color: navy, border: '1px solid rgba(1,13,30,0.18)', borderRadius: '8px', cursor: 'pointer', fontSize: '14px' }}
-                    >
-                      Comments
-                    </button>
-                  )}
-                  {onEdit && (
-                    <button
-                      onClick={() => onEdit(i)}
-                      style={{ padding: '0.4rem 0.6rem', background: 'transparent', color: navy, border: '1px solid rgba(1,13,30,0.18)', borderRadius: '8px', cursor: 'pointer', fontSize: '14px' }}
-                    >
-                      Edit
-                    </button>
-                  )}
-                  {onDelete && (
-                    <button
-                      onClick={() => onDelete(i)}
-                      style={{ padding: '0.4rem 0.6rem', background: '#c23b22', color: '#fff', border: 'none', borderRadius: '8px', cursor: 'pointer', fontSize: '14px' }}
-                    >
-                      Delete
-                    </button>
-                  )}
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </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>
-      {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: disabled ? '#999' : navy,
-        border: 'none',
-        borderRadius: '999px',
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        fontWeight: 600,
-        fontSize: '14px',
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function SecondaryButton({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
-  return (
-    <button
-      onClick={onClick}
-      style={{
-        padding: '0.65rem 1.25rem',
-        background: 'transparent',
-        color: navy,
-        border: `1px solid ${gold}`,
-        borderRadius: '999px',
-        cursor: 'pointer',
-        fontWeight: 600,
-        fontSize: '14px',
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function DangerButton({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
-  return (
-    <button
-      onClick={onClick}
-      style={{
-        padding: '0.65rem 1.25rem',
-        background: '#c23b22',
-        color: '#fff',
-        border: 'none',
-        borderRadius: '999px',
-        cursor: 'pointer',
-        fontWeight: 600,
-        fontSize: '14px',
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-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>
+            {showPicker && (
+              <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', padding: '8px', background: '#FAFAFA', borderRadius: 8 }}>
+                {images.filter((i: Image) => i.category === 'slides').map((img: Image) => (
+                  <img key={img.id} src={img.data} alt="" onClick={() => { setSlide({ ...s, image_id: img.id, image_url: img.data }); setShowPicker(false); }}
+                    style={{ width: 64, height: 48, objectFit: 'cover', borderRadius: 6, cursor: 'pointer', border: s.image_id === img.id ? `2px solid ${C.gold}` : '1px solid #eee' }} />
+                ))}
+                {images.filter((i: Image) => i.category === 'slides').length === 0 && <span style={{ fontSize: '12px', color: C.textLight, padding: '8px' }}>No images uploaded</span>}
+              </div>
+            )}
+          </div>
+          <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+            <Tgl label="Active" checked={s.active} onChange={(v: boolean) => setSlide({ ...s, active: v })} />
+            <I label="Sort Order" type="number" value={s.sort_order} onChange={(v: string) => setSlide({ ...s, sort_order: Number(v) })} style={{ width: 80 }} />
+          </div>
         </div>
-      ))}
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '24px' }}>
+          <Btn onClick={onCancel} variant="secondary">Cancel</Btn>
+          <Btn onClick={() => onSave(s)}>Save</Btn>
+        </div>
+      </div>
     </div>
   );
 }
 
-export default function AdminPage() {
-  // State
-  const [count, setCount] = useState(0);
-  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('');
-  const [footer, setFooter] = useState<FooterInfo>({
-    facebook_url: '',
-    instagram_url: '',
-    whatsapp_url: '',
-    address: '',
-    phone: '',
-    email: '',
+/* ─── Calendar Section ─── */
+function CalendarSection({ events, setEvents, images, onToast }: any) {
+  const [editing, setEditing] = useState<CalendarEvent | null>(null);
+  const [confirmDel, setConfirmDel] = useState<number | null>(null);
+
+  const save = async (ev: CalendarEvent) => {
+    try {
+      const res = await fetch(`/api/calendar_events/${ev.id}`, {
+        method: ev.id ? 'PUT' : 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(ev),
+      });
+      if (res.ok) { setEditing(null); setEvents((e: any) => e.map((x: CalendarEvent) => x.id === ev.id ? ev : x)); onToast('Event saved!', 'success'); }
+    } catch { onToast('Error', 'error'); }
+  };
+
+  const del = async (id: number) => {
+    await fetch(`/api/calendar_events/${id}`, { method: 'DELETE' });
+    setEvents((e: any) => e.filter((x: CalendarEvent) => x.id !== id));
+    onToast('Event deleted', 'success');
+    setConfirmDel(null);
+  };
+
+  return (
+    <div>
+      <SecHead title="📅 Calendar Events" count={events.length}
+        action={<Btn onClick={() => setEditing({ id: 0, date: '', title: '', type: 'default', color: '#D4A853', description: null, active: true })} size="sm">+ New Event</Btn>} />
+      {events.length === 0 ? <Empty icon="📅" title="No events" /> : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '16px' }}>
+          {events.map((ev: CalendarEvent) => (
+            <EntityCard key={ev.id} title={ev.title} desc={ev.description || ev.type} meta={`${ev.date} • ${ev.type}`}
+              actions={
+                <>
+                  <Btn size="sm" variant="secondary" onClick={() => setEditing(ev)}>Edit</Btn>
+                  <Btn size="sm" variant="danger" onClick={() => setConfirmDel(ev.id)}>Del</Btn>
+                </>
+              } />
+          ))}
+        </div>
+      )}
+      {editing && <CalendarEditor event={editing} setEvent={setEditing} onSave={save} onCancel={() => setEditing(null)} />}
+      {confirmDel !== null && <Confirm message="Delete this event?" onCancel={() => setConfirmDel(null)} onConfirm={() => del(confirmDel)} />}
+    </div>
+  );
+}
+
+function CalendarEditor({ event, setEvent, onSave, onCancel }: any) {
+  const e = { ...event };
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9998 }}>
+      <div style={{ background: C.white, borderRadius: 16, padding: '24px 28px', maxWidth: 460, width: '90%' }}>
+        <h3 style={{ margin: '0 0 20px', fontSize: '18px', fontWeight: 700, color: C.navy }}>{e.id ? 'Edit Event' : 'New Event'}</h3>
+        <div style={{ display: 'grid', gap: '14px' }}>
+          <I label="Title" value={e.title} onChange={(v: string) => setEvent({ ...e, title: v })} />
+          <I label="Date" type="date" value={e.date} onChange={(v: string) => setEvent({ ...e, date: v })} />
+          <S label="Type" value={e.type} onChange={(v: string) => setEvent({ ...e, type: v })}
+            options={[{ value: 'default', label: 'Default' }, { value: 'special', label: 'Special' }, { value: 'holiday', label: 'Holiday' }]} />
+          <I label="Color" value={e.color} onChange={(v: string) => setEvent({ ...e, color: v })} />
+          <TA label="Description" value={e.description || ''} onChange={(v: string) => setEvent({ ...e, description: v || null })} />
+          <Tgl label="Active" checked={e.active} onChange={(v: boolean) => setEvent({ ...e, active: v })} />
+        </div>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '24px' }}>
+          <Btn onClick={onCancel} variant="secondary">Cancel</Btn>
+          <Btn onClick={() => onSave(e)}>Save</Btn>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Social Events Section ─── */
+function SocialSection({ events, setEvents, images, onToast }: any) {
+  const [editing, setEditing] = useState<SocialEvent | null>(null);
+  const [confirmDel, setConfirmDel] = useState<number | null>(null);
+
+  const save = async (ev: SocialEvent) => {
+    try {
+      const res = await fetch(`/api/social_events/${ev.id}`, {
+        method: ev.id ? 'PUT' : 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(ev),
+      });
+      if (res.ok) { setEditing(null); setEvents((e: any) => e.map((x: SocialEvent) => x.id === ev.id ? ev : x)); onToast('Event saved!', 'success'); }
+    } catch { onToast('Error', 'error'); }
+  };
+
+  const del = async (id: number) => {
+    await fetch(`/api/social_events/${id}`, { method: 'DELETE' });
+    setEvents((e: any) => e.filter((x: SocialEvent) => x.id !== id));
+    onToast('Event deleted', 'success');
+    setConfirmDel(null);
+  };
+
+  return (
+    <div>
+      <SecHead title="🎪 Social Events" count={events.length}
+        action={<Btn onClick={() => setEditing({ id: 0, name: '', description: '', price: null, date: null, photos: [], featured_photo: null, active: true, sort_order: events.length })} size="sm">+ New Event</Btn>} />
+      {events.length === 0 ? <Empty icon="🎪" title="No social events" /> : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px' }}>
+          {events.map((ev: SocialEvent) => (
+            <EntityCard key={ev.id} title={ev.name} desc={ev.description || ''} meta={`${ev.price || 'Free'}${ev.date ? ' • ' + ev.date : ''}`}
+              thumb={ev.featured_photo || ev.photos?.[0]}
+              photoUrls={ev.photos}
+              actions={
+                <>
+                  <Btn size="sm" variant="secondary" onClick={() => setEditing(ev)}>Edit</Btn>
+                  <Btn size="sm" variant="danger" onClick={() => setConfirmDel(ev.id)}>Del</Btn>
+                </>
+              } />
+          ))}
+        </div>
+      )}
+      {editing && <SocialEditor event={editing} setEvent={setEditing} images={images} onSave={save} onCancel={() => setEditing(null)} />}
+      {confirmDel !== null && <Confirm message="Delete this event?" onCancel={() => setConfirmDel(null)} onConfirm={() => del(confirmDel)} />}
+    </div>
+  );
+}
+
+function SocialEditor({ event, setEvent, images, onSave, onCancel }: any) {
+  const [showPicker, setShowPicker] = useState(false);
+  const [localPhotos, setLocalPhotos] = useState<string[]>(event.photos || []);
+  const ev = { ...event, photos: localPhotos };
+
+  const addPhotos = async (files: FileList) => {
+    const newPhotos: string[] = [];
+    for (const f of Array.from(files)) {
+      const b64 = await readFileBase64(f);
+      try {
+        const r = await fetch('/api/admin/images', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filename: f.name, data: b64, category: 'social', room_id: null, location_target: 'social' }),
+        });
+        if (r.ok) { const d = await r.json(); newPhotos.push(d.data); }
+      } catch { const b = await readFileBase64(f); newPhotos.push(b); }
+    }
+    setLocalPhotos(prev => [...prev, ...newPhotos]);
+  };
+
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9998 }}>
+      <div style={{ background: C.white, borderRadius: 16, padding: '24px 28px', maxWidth: 500, width: '90%', maxHeight: '90vh', overflowY: 'auto' }}>
+        <h3 style={{ margin: '0 0 20px', fontSize: '18px', fontWeight: 700, color: C.navy }}>{ev.id ? 'Edit Event' : 'New Event'}</h3>
+        <div style={{ display: 'grid', gap: '14px' }}>
+          <I label="Name" value={ev.name} onChange={(v: string) => setEvent({ ...ev, name: v })} />
+          <TA label="Description" value={ev.description || ''} onChange={(v: string) => setEvent({ ...ev, description: v })} />
+          <I label="Price" value={ev.price || ''} onChange={(v: string) => setEvent({ ...ev, price: v || null })} />
+          <I label="Date" type="date" value={ev.date || ''} onChange={(v: string) => setEvent({ ...ev, date: v || null })} />
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            <label style={{ fontSize: '13px', fontWeight: 600, color: C.text }}>Photos</label>
+            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+              <Btn onClick={() => document.getElementById('social-photos')?.click()} size="sm" variant="secondary">+ Add Photos</Btn>
+              <input id="social-photos" type="file" accept="image/*" multiple style={{ display: 'none' }}
+                onChange={e => { addPhotos(e.target.files!); e.target.value = ''; }} />
+            </div>
+            <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+              {localPhotos.map((p, i) => (
+                <div key={i} style={{ position: 'relative' }}>
+                  <img src={p} alt="" style={{ width: 64, height: 48, objectFit: 'cover', borderRadius: 6, border: '1px solid #eee' }} />
+                  <button onClick={() => setLocalPhotos(prev => prev.filter((_, j) => j !== i))}
+                    style={{ position: 'absolute', top: -4, right: -4, width: 18, height: 18, borderRadius: '50%', background: C.danger, color: '#fff', border: 'none', cursor: 'pointer', fontSize: '11px', lineHeight: 18, padding: 0 }}
+                  >×</button>
+                </div>
+              ))}
+            </div>
+          </div>
+          <Tgl label="Active" checked={ev.active} onChange={(v: boolean) => setEvent({ ...ev, active: v })} />
+        </div>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '24px' }}>
+          <Btn onClick={onCancel} variant="secondary">Cancel</Btn>
+          <Btn onClick={() => onSave(ev)}>Save</Btn>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Rooms Section ─── */
+function RoomsSection({ rooms, setRooms, images, onToast }: any) {
+  const [editing, setEditing] = useState<Room | null>(null);
+  const [confirmDel, setConfirmDel] = useState<number | null>(null);
+
+  const save = async (room: Room) => {
+    try {
+      const res = await fetch(`/api/rooms/${room.id}`, {
+        method: room.id ? 'PUT' : 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(room),
+      });
+      if (res.ok) { setEditing(null); setRooms((r: any) => r.map((x: Room) => x.id === room.id ? room : x)); onToast('Room saved!', 'success'); }
+    } catch { onToast('Error', 'error'); }
+  };
+
+  const del = async (id: number) => {
+    await fetch(`/api/rooms/${id}`, { method: 'DELETE' });
+    setRooms((r: any) => r.filter((x: Room) => x.id !== id));
+    onToast('Room deleted', 'success');
+    setConfirmDel(null);
+  };
+
+  return (
+    <div>
+      <SecHead title="🏨 Rooms" count={rooms.length}
+        action={<Btn onClick={() => setEditing({ id: 0, name: '', description: '', price: '', photos: [], featured_photo: null, active: true, sort_order: rooms.length })} size="sm">+ New Room</Btn>} />
+      {rooms.length === 0 ? <Empty icon="🏨" title="No rooms" /> : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px' }}>
+          {rooms.map((r: Room) => (
+            <EntityCard key={r.id} title={r.name} desc={r.description || ''} meta={r.price}
+              thumb={r.featured_photo || r.photos?.[0]}
+              photoUrls={r.photos}
+              actions={
+                <>
+                  <Btn size="sm" variant="secondary" onClick={() => setEditing(r)}>Edit</Btn>
+                  <Btn size="sm" variant="danger" onClick={() => setConfirmDel(r.id)}>Del</Btn>
+                </>
+              } />
+          ))}
+        </div>
+      )}
+      {editing && <RoomEditor room={editing} setRoom={setEditing} images={images} onSave={save} onCancel={() => setEditing(null)} />}
+      {confirmDel !== null && <Confirm message="Delete this room?" onCancel={() => setConfirmDel(null)} onConfirm={() => del(confirmDel)} />}
+    </div>
+  );
+}
+
+function RoomEditor({ room, setRoom, images, onSave, onCancel }: any) {
+  const [showPicker, setShowPicker] = useState(false);
+  const [localPhotos, setLocalPhotos] = useState<string[]>(room.photos || []);
+  const r = { ...room, photos: localPhotos };
+
+  const addPhotos = async (files: FileList) => {
+    const newPhotos: string[] = [];
+    for (const f of Array.from(files)) {
+      const b64 = await readFileBase64(f);
+      try {
+        const res = await fetch('/api/admin/images', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filename: f.name, data: b64, category: 'rooms', room_id: r.id || null, location_target: `room-${r.id || 'new'}` }),
+        });
+        if (res.ok) { const d = await res.json(); newPhotos.push(d.data); }
+      } catch { const b = await readFileBase64(f); newPhotos.push(b); }
+    }
+    setLocalPhotos(prev => [...prev, ...newPhotos]);
+  };
+
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9998 }}>
+      <div style={{ background: C.white, borderRadius: 16, padding: '24px 28px', maxWidth: 500, width: '90%', maxHeight: '90vh', overflowY: 'auto' }}>
+        <h3 style={{ margin: '0 0 20px', fontSize: '18px', fontWeight: 700, color: C.navy }}>{r.id ? 'Edit Room' : 'New Room'}</h3>
+        <div style={{ display: 'grid', gap: '14px' }}>
+          <I label="Name" value={r.name} onChange={(v: string) => setRoom({ ...r, name: v })} />
+          <TA label="Description" value={r.description || ''} onChange={(v: string) => setRoom({ ...r, description: v })} />
+          <I label="Price" value={r.price} onChange={(v: string) => setRoom({ ...r, price: v })} />
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            <label style={{ fontSize: '13px', fontWeight: 600, color: C.text }}>Photos</label>
+            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+              <Btn onClick={() => document.getElementById(`room-photos-${r.id}`)?.click()} size="sm" variant="secondary">+ Add Photos</Btn>
+              <input id={`room-photos-${r.id}`} type="file" accept="image/*" multiple style={{ display: 'none' }}
+                onChange={e => { addPhotos(e.target.files!); e.target.value = ''; }} />
+            </div>
+            <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+              {localPhotos.map((p, i) => (
+                <div key={i} style={{ position: 'relative' }}>
+                  <img src={p} alt="" style={{ width: 64, height: 48, objectFit: 'cover', borderRadius: 6, border: '1px solid #eee' }} />
+                  <button onClick={() => setLocalPhotos(prev => prev.filter((_, j) => j !== i))}
+                    style={{ position: 'absolute', top: -4, right: -4, width: 18, height: 18, borderRadius: '50%', background: C.danger, color: '#fff', border: 'none', cursor: 'pointer', fontSize: '11px', lineHeight: 18, padding: 0 }}>×</button>
+                </div>
+              ))}
+            </div>
+          </div>
+          <Tgl label="Active" checked={r.active} onChange={(v: boolean) => setRoom({ ...r, active: v })} />
+        </div>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '24px' }}>
+          <Btn onClick={onCancel} variant="secondary">Cancel</Btn>
+          <Btn onClick={() => onSave(r)}>Save</Btn>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Menu Section ─── */
+function MenuSection({ items, setItems, images, onToast }: any) {
+  const [editing, setEditing] = useState<MenuItem | null>(null);
+  const [confirmDel, setConfirmDel] = useState<number | null>(null);
+
+  const save = async (item: MenuItem) => {
+    try {
+      const res = await fetch(`/api/menu/${item.id}`, {
+        method: item.id ? 'PUT' : 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(item),
+      });
+      if (res.ok) { setEditing(null); setItems((i: any) => i.map((x: MenuItem) => x.id === item.id ? item : x)); onToast('Menu item saved!', 'success'); }
+    } catch { onToast('Error', 'error'); }
+  };
+
+  const del = async (id: number) => {
+    await fetch(`/api/menu/${id}`, { method: 'DELETE' });
+    setItems((i: any) => i.filter((x: MenuItem) => x.id !== id));
+    onToast('Item deleted', 'success');
+    setConfirmDel(null);
+  };
+
+  return (
+    <div>
+      <SecHead title="🍽️ Menu" count={items.length}
+        action={<Btn onClick={() => setEditing({ id: 0, category: '', name: '', description: '', price: '', is_daily_special: false, active: true, sort_order: items.length })} size="sm">+ New Item</Btn>} />
+      {items.length === 0 ? <Empty icon="🍽️" title="No menu items" /> : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px' }}>
+          {items.map((item: MenuItem) => (
+            <EntityCard key={item.id} title={item.name} desc={item.description || ''} meta={`${item.category}${item.price ? ' • ' + item.price : ''}`}
+              actions={
+                <>
+                  <Btn size="sm" variant="secondary" onClick={() => setEditing(item)}>Edit</Btn>
+                  <Btn size="sm" variant="danger" onClick={() => setConfirmDel(item.id)}>Del</Btn>
+                </>
+              } />
+          ))}
+        </div>
+      )}
+      {editing && <MenuEditor item={editing} setItem={setEditing} onSave={save} onCancel={() => setEditing(null)} />}
+      {confirmDel !== null && <Confirm message="Delete this menu item?" onCancel={() => setConfirmDel(null)} onConfirm={() => del(confirmDel)} />}
+    </div>
+  );
+}
+
+function MenuEditor({ item, setItem, onSave, onCancel }: any) {
+  const i = { ...item };
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9998 }}>
+      <div style={{ background: C.white, borderRadius: 16, padding: '24px 28px', maxWidth: 460, width: '90%' }}>
+        <h3 style={{ margin: '0 0 20px', fontSize: '18px', fontWeight: 700, color: C.navy }}>{i.id ? 'Edit Item' : 'New Item'}</h3>
+        <div style={{ display: 'grid', gap: '14px' }}>
+          <I label="Category" value={i.category} onChange={(v: string) => setItem({ ...i, category: v })} />
+          <I label="Name" value={i.name} onChange={(v: string) => setItem({ ...i, name: v })} />
+          <TA label="Description" value={i.description || ''} onChange={(v: string) => setItem({ ...i, description: v })} />
+          <I label="Price" value={i.price} onChange={(v: string) => setItem({ ...i, price: v })} />
+          <Tgl label="Daily Special" checked={i.is_daily_special} onChange={(v: boolean) => setItem({ ...i, is_daily_special: v })} />
+          <Tgl label="Active" checked={i.active} onChange={(v: boolean) => setItem({ ...i, active: v })} />
+        </div>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '24px' }}>
+          <Btn onClick={onCancel} variant="secondary">Cancel</Btn>
+          <Btn onClick={() => onSave(i)}>Save</Btn>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Places Section ─── */
+function PlacesSection({ places, setPlaces, images, onToast }: any) {
+  const [editing, setEditing] = useState<Place | null>(null);
+  const [confirmDel, setConfirmDel] = useState<number | null>(null);
+
+  const save = async (place: Place) => {
+    try {
+      const res = await fetch(`/api/places/${place.id}`, {
+        method: place.id ? 'PUT' : 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(place),
+      });
+      if (res.ok) { setEditing(null); setPlaces((p: any) => p.map((x: Place) => x.id === place.id ? place : x)); onToast('Place saved!', 'success'); }
+    } catch { onToast('Error', 'error'); }
+  };
+
+  const del = async (id: number) => {
+    await fetch(`/api/places/${id}`, { method: 'DELETE' });
+    setPlaces((p: any) => p.filter((x: Place) => x.id !== id));
+    onToast('Place deleted', 'success');
+    setConfirmDel(null);
+  };
+
+  return (
+    <div>
+      <SecHead title="🗺️ Landscape Places" count={places.length}
+        action={<Btn onClick={() => setEditing({ id: 0, name: '', description: '', photos: [], featured_photo: null, distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: places.length })} size="sm">+ New Place</Btn>} />
+      {places.length === 0 ? <Empty icon="🗺️" title="No places" /> : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px' }}>
+          {places.map((p: Place) => (
+            <EntityCard key={p.id} title={p.name} desc={p.description || ''} meta={`${p.distance_km || ''} ${p.visit_time ? '• ' + p.visit_time : ''}`}
+              thumb={p.featured_photo || p.photos?.[0]}
+              photoUrls={p.photos}
+              actions={
+                <>
+                  <Btn size="sm" variant="secondary" onClick={() => setEditing(p)}>Edit</Btn>
+                  <Btn size="sm" variant="danger" onClick={() => setConfirmDel(p.id)}>Del</Btn>
+                </>
+              } />
+          ))}
+        </div>
+      )}
+      {editing && <PlaceEditor place={editing} setPlace={setEditing} images={images} onSave={save} onCancel={() => setEditing(null)} />}
+      {confirmDel !== null && <Confirm message="Delete this place?" onCancel={() => setConfirmDel(null)} onConfirm={() => del(confirmDel)} />}
+    </div>
+  );
+}
+
+function PlaceEditor({ place, setPlace, images, onSave, onCancel }: any) {
+  const [localPhotos, setLocalPhotos] = useState<string[]>(place.photos || []);
+  const p = { ...place, photos: localPhotos };
+
+  const addPhotos = async (files: FileList) => {
+    const newPhotos: string[] = [];
+    for (const f of Array.from(files)) {
+      const b64 = await readFileBase64(f);
+      try {
+        const res = await fetch('/api/admin/images', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filename: f.name, data: b64, category: 'landscape', room_id: null, location_target: `place-${p.id || 'new'}` }),
+        });
+        if (res.ok) { const d = await res.json(); newPhotos.push(d.data); }
+      } catch { const b = await readFileBase64(f); newPhotos.push(b); }
+    }
+    setLocalPhotos(prev => [...prev, ...newPhotos]);
+  };
+
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9998 }}>
+      <div style={{ background: C.white, borderRadius: 16, padding: '24px 28px', maxWidth: 500, width: '90%', maxHeight: '90vh', overflowY: 'auto' }}>
+        <h3 style={{ margin: '0 0 20px', fontSize: '18px', fontWeight: 700, color: C.navy }}>{p.id ? 'Edit Place' : 'New Place'}</h3>
+        <div style={{ display: 'grid', gap: '14px' }}>
+          <I label="Name" value={p.name} onChange={(v: string) => setPlace({ ...p, name: v })} />
+          <TA label="Description" value={p.description || ''} onChange={(v: string) => setPlace({ ...p, description: v })} />
+          <I label="Distance (km)" value={p.distance_km} onChange={(v: string) => setPlace({ ...p, distance_km: v })} />
+          <I label="Visit Time" value={p.visit_time} onChange={(v: string) => setPlace({ ...p, visit_time: v })} />
+          <TA label="Suggestion" value={p.suggestion || ''} onChange={(v: string) => setPlace({ ...p, suggestion: v })} />
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            <label style={{ fontSize: '13px', fontWeight: 600, color: C.text }}>Photos</label>
+            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+              <Btn onClick={() => document.getElementById(`place-photos-${p.id}`)?.click()} size="sm" variant="secondary">+ Add Photos</Btn>
+              <input id={`place-photos-${p.id}`} type="file" accept="image/*" multiple style={{ display: 'none' }}
+                onChange={e => { addPhotos(e.target.files!); e.target.value = ''; }} />
+            </div>
+            <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+              {localPhotos.map((ph, i) => (
+                <div key={i} style={{ position: 'relative' }}>
+                  <img src={ph} alt="" style={{ width: 64, height: 48, objectFit: 'cover', borderRadius: 6, border: '1px solid #eee' }} />
+                  <button onClick={() => setLocalPhotos(prev => prev.filter((_, j) => j !== i))}
+                    style={{ position: 'absolute', top: -4, right: -4, width: 18, height: 18, borderRadius: '50%', background: C.danger, color: '#fff', border: 'none', cursor: 'pointer', fontSize: '11px', lineHeight: 18, padding: 0 }}>×</button>
+                </div>
+              ))}
+            </div>
+          </div>
+          <Tgl label="Active" checked={p.active} onChange={(v: boolean) => setPlace({ ...p, active: v })} />
+        </div>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '24px' }}>
+          <Btn onClick={onCancel} variant="secondary">Cancel</Btn>
+          <Btn onClick={() => onSave(p)}>Save</Btn>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Reviews Section ─── */
+function ReviewsSection({ reviews, setReviews, onToast }: any) {
+  const approve = async (id: number) => {
+    try {
+      await fetch(`/api/reviews/${id}`, {
+        method: 'PUT', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ approved: true }),
+      });
+      setReviews((r: any) => r.map((x: Review) => x.id === id ? { ...x, approved: true } : x));
+      onToast('Review approved!', 'success');
+    } catch { onToast('Error', 'error'); }
+  };
+
+  const reject = async (id: number) => {
+    try {
+      await fetch(`/api/reviews/${id}`, {
+        method: 'PUT', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ approved: false }),
+      });
+      setReviews((r: any) => r.map((x: Review) => x.id === id ? { ...x, approved: false } : x));
+      onToast('Review hidden', 'success');
+    } catch { onToast('Error', 'error'); }
+  };
+
+  return (
+    <div>
+      <SecHead title="⭐ Reviews" count={reviews.length} />
+      {reviews.length === 0 ? <Empty icon="⭐" title="No reviews" /> : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '16px' }}>
+          {reviews.map((r: Review) => (
+            <div key={r.id} style={{ background: C.card, borderRadius: 16, padding: '16px 20px', boxShadow: C.shadow, border: `1px solid ${C.border}` }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
+                <span style={{ fontWeight: 700, color: C.navy }}>{r.author_name}</span>
+                <Badge color={r.approved ? C.success : '#FF9800'}>{r.approved ? 'Approved' : 'Pending'}</Badge>
+              </div>
+              <div style={{ fontSize: '14px', color: '#FFB400', marginBottom: '8px', letterSpacing: 2 }}>
+                {'★'.repeat(r.rating)}{'☆'.repeat(5 - r.rating)}
+              </div>
+              <p style={{ margin: '0 0 12px', fontSize: '13px', color: C.text, lineHeight: 1.5 }}>{r.text}</p>
+              <div style={{ display: 'flex', gap: '8px' }}>
+                {!r.approved && <Btn size="sm" variant="secondary" onClick={() => approve(r.id)}>Approve</Btn>}
+                {r.approved && <Btn size="sm" variant="secondary" onClick={() => reject(r.id)}>Hide</Btn>}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ─── Brand Section ─── */
+function BrandSection({ images, onToast }: { images: Image[]; onToast: (m: string, t: string) => void }) {
+  const [config, setConfig] = useState<FooterConfig>({
+    logo: '', favicon: '', tagline: 'Tu refugio en la naturaleza',
+    facebook_url: '', instagram_url: '', whatsapp_url: '',
+    address: '', phone: '', email: '',
   });
-  const [uploadCategory, setUploadCategory] = useState('rooms');
-  const [uploadRoomId, setUploadRoomId] = useState('');
-  const [uploadLocationTarget, setUploadLocationTarget] = useState('gallery');
-  const [images, setImages] = useState<Image[]>([]);
-  const [rooms, setRooms] = useState<Room[]>([]);
+
+  const handleUpload = async (key: keyof FooterConfig) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      const b64 = await readFileBase64(file);
+      try {
+        const res = await fetch('/api/admin/images', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filename: file.name, data: b64, category: 'other', room_id: null, location_target: key }),
+        });
+        if (res.ok) {
+          const d = await res.json();
+          setConfig(prev => ({ ...prev, [key]: d.data }));
+          onToast('Image uploaded!', 'success');
+        }
+      } catch { onToast('Upload failed', 'error'); }
+    };
+    input.click();
+  };
+
+  return (
+    <div>
+      <SecHead title="🎨 Brand & Identity" />
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: '20px' }}>
+        {(['logo', 'favicon'] as (keyof FooterConfig)[]).map(key => (
+          <div key={key} style={{ background: C.card, borderRadius: 16, padding: '20px', boxShadow: C.shadow, textAlign: 'center', border: `1px solid ${C.border}` }}>
+            <div style={{ fontSize: '13px', fontWeight: 600, color: C.text, marginBottom: '12px', textTransform: 'capitalize' }}>{key}</div>
+            {config[key] ? (
+              <img src={config[key] as string} alt={key} style={{ width: 120, height: 80, objectFit: 'contain', borderRadius: 8, marginBottom: '12px' }} />
+            ) : (
+              <div style={{ width: 120, height: 80, background: '#EEE', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#BBB', margin: '0 auto 12px' }}>
+                No {key}
+              </div>
+            )}
+            <Btn onClick={() => handleUpload(key)} size="sm" variant="secondary">Upload</Btn>
+          </div>
+        ))}
+        <div style={{ background: C.card, borderRadius: 16, padding: '20px', boxShadow: C.shadow, border: `1px solid ${C.border}`, gridColumn: 'span 2' }}>
+          <div style={{ fontSize: '13px', fontWeight: 600, color: C.text, marginBottom: '12px' }}>Tagline</div>
+          <I value={config.tagline} onChange={(v: string) => setConfig(prev => ({ ...prev, tagline: v }))} placeholder="Your hotel tagline" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Dashboard (stats cards) ─── */
+function Dashboard({ rooms, slides, events, reviews, places }: any) {
+  return (
+    <div>
+      <h2 style={{ margin: '0 0 20px', fontSize: '22px', fontWeight: 700, color: C.navy }}>Dashboard</h2>
+      <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', marginBottom: '24px' }}>
+        <StatCard icon="🏨" value={rooms?.length || 0} label="Rooms" />
+        <StatCard icon="🎞️" value={slides?.length || 0} label="Slides" />
+        <StatCard icon="📅" value={events?.length || 0} label="Events" />
+        <StatCard icon="🗺️" value={places?.length || 0} label="Places" />
+        <StatCard icon="⭐" value={reviews?.filter((r: Review) => r.approved)?.length || 0} label="Approved Reviews" />
+      </div>
+    </div>
+  );
+}
+
+/* ─── Users Section ─── */
+function UsersSection() {
+  return (
+    <div>
+      <SecHead title="👥 Users" />
+      <div style={{ textAlign: 'center', padding: '40px', color: C.textLight }}>
+        <div style={{ fontSize: '48px', marginBottom: '8px' }}>👥</div>
+        <div style={{ fontSize: '16px', fontWeight: 600, color: C.text }}>User management</div>
+        <p style={{ fontSize: '13px' }}>Manage staff accounts and permissions.</p>
+      </div>
+    </div>
+  );
+}
+
+/* ═══════════════════════════════════════════════════
+   MAIN PAGE
+   ═══════════════════════════════════════════════════ */
+export default function AdminPage() {
+  const [activeSection, setActiveSection] = useState('dashboard');
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [toasts, setToasts] = useState<{ id: number; message: string; type: string }[]>([]);
+
   const [slides, setSlides] = useState<Slide[]>([]);
+  const [rooms, setRooms] = useState<Room[]>([]);
   const [events, setEvents] = useState<CalendarEvent[]>([]);
   const [socialEvents, setSocialEvents] = useState<SocialEvent[]>([]);
-  const [socialEventReservations, setSocialEventReservations] = useState<SocialEventReservation[]>([]);
-  const [socialEventReservationsFor, setSocialEventReservationsFor] = useState<number | null>(null);
-  const [reviews, setReviews] = useState<Review[]>([]);
-  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
   const [places, setPlaces] = useState<Place[]>([]);
-  const [roomComments, setRoomComments] = useState<RoomComment[]>([]);
-  const [roomCommentRoomId, setRoomCommentRoomId] = useState<number | null>(null);
-  const [editingSlide, setEditingSlide] = useState<Slide | null>(null);
-  const [slideForm, setSlideForm] = useState<Omit<Slide, 'id'> & { id?: number }>({
-    title: '',
-    subtitle: '',
-    image_id: null,
-    image_url: '',
-    active: true,
-    sort_order: 0,
-  });
-  const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null);
-  const [eventForm, setEventForm] = useState<Omit<CalendarEvent, 'id'> & { id?: number }>({
-    date: '',
-    title: '',
-    type: 'event',
-    color: '#E8A849',
-    description: '',
-    active: true,
-  });
-  const [editingSocialEvent, setEditingSocialEvent] = useState<SocialEvent | null>(null);
-  const [socialEventForm, setSocialEventForm] = useState<Omit<SocialEvent, 'id' | 'reservation_count'> & { id?: number }>({
-    name: '',
-    description: '',
-    price: '',
-    date: '',
-    photos: [],
-    featured_photo: null,
-    active: true,
-    sort_order: 0,
-  });
-  const [editingRoom, setEditingRoom] = useState<Room | null>(null);
-  const [roomForm, setRoomForm] = useState<Omit<Room, 'id'> & { id?: number }>({
-    name: '',
-    description: '',
-    price: '',
-    photos: [],
-    featured_photo: null,
-    active: true,
-    sort_order: 0,
-  });
-  const [editingMenu, setEditingMenu] = useState<MenuItem | null>(null);
-  const [menuForm, setMenuForm] = useState<Omit<MenuItem, 'id'> & { id?: number }>({
-    category: '',
-    name: '',
-    description: '',
-    price: '',
-    is_daily_special: false,
-    active: true,
-    sort_order: 0,
-  });
-  const [editingPlace, setEditingPlace] = useState<Place | null>(null);
-  const [placeForm, setPlaceForm] = useState<Omit<Place, 'id'> & { id?: number }>({
-    name: '',
-    description: '',
-    photos: [],
-    featured_photo: null,
-    distance_km: '',
-    visit_time: '',
-    suggestion: '',
-    active: true,
-    sort_order: 0,
-  });
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [images, setImages] = useState<Image[]>([]);
 
-  // Effects
-  useEffect(() => {
-    // In a real app, you would fetch data from an API here
-    // For now, we'll just set some dummy data
-    setCount(42);
-    setLogoUrl('https://example.com/logo.png');
-    setFaviconUrl('https://example.com/favicon.ico');
-    setTagline('Welcome to our beautiful hotel');
-    setFooter({
-      facebook_url: 'https://facebook.com/hotel',
-      instagram_url: 'https://instagram.com/hotel',
-      whatsapp_url: 'https://wa.me/1234567890',
-      address: '123 Main St, City, Country',
-      phone: '+1 234 567 890',
-      email: 'info@hotel.com',
-    });
-    setImages([
-      { id: 1, data: 'https://example.com/image1.jpg', filename: 'image1.jpg', category: 'rooms', room_id: 1, location_target: 'gallery' },
-      { id: 2, data: 'https://example.com/image2.jpg', filename: 'image2.jpg', category: 'coffee', room_id: null, location_target: 'gallery' },
-    ]);
-    setRooms([
-      { id: 1, name: 'Deluxe Room', description: 'A spacious room with a view', price: '150', photos: ['https://example.com/image1.jpg'], featured_photo: 'https://example.com/image1.jpg', active: true, sort_order: 1 },
-    ]);
-    setSlides([
-      { id: 1, title: 'Welcome', subtitle: 'Enjoy your stay', image_id: 1, image_url: 'https://example.com/image1.jpg', active: true, sort_order: 1 },
-    ]);
-    setEvents([
-      { id: 1, date: '2023-06-01', title: 'Summer Festival', type: 'event', color: '#E8A849', description: 'Annual summer celebration', active: true },
-    ]);
-    setSocialEvents([
-      { id: 1, name: 'Wine Tasting', description: 'Sample local wines', price: '50', date: '2023-06-15', photos: [], featured_photo: null, active: true, sort_order: 1, reservation_count: 5 },
-    ]);
-    setReviews([
-      { id: 1, author_name: 'John Doe', rating: 5, text: 'Amazing experience!', approved: false },
-    ]);
-    setMenu([
-      { id: 1, category: 'Breakfast', name: 'Continental', description: 'Bread, jam, coffee', price: '10', is_daily_special: false, active: true, sort_order: 1 },
-    ]);
-    setPlaces([
-      { id: 1, name: 'Beach', description: 'Beautiful sandy beach', photos: [], featured_photo: null, distance_km: '2', visit_time: '30 min', suggestion: 'Bring sunscreen', active: true, sort_order: 1 },
-    ]);
+  const [imageFilter, setImageFilter] = useState('all');
+  const [galleryLoading, setGalleryLoading] = useState(false);
+
+  const toastId = useRef(0);
+  const showToast = useCallback((message: string, type: string) => {
+    const id = ++toastId.current;
+    setToasts(prev => [...prev, { id, message, type }]);
   }, []);
 
-  // Functions
-  const updateAsset = (asset: string, value: string) => {
-    setMessage(`${asset} updated successfully`);
-    setTimeout(() => setMessage(null), 3000);
+  const removeToast = useCallback((id: number) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  /* ── Data fetching ── */
+  useEffect(() => {
+    const fetchAll = async () => {
+      try {
+        const [slidesRes, roomsRes, calRes, socialRes, menuRes, placesRes, reviewsRes, imagesRes] = await Promise.all([
+          fetch('/api/slides'),
+          fetch('/api/rooms'),
+          fetch('/api/calendar_events'),
+          fetch('/api/social_events/public'),
+          fetch('/api/menu'),
+          fetch('/api/places'),
+          fetch('/api/reviews'),
+          fetch('/api/admin/images').catch(() => null),
+        ]);
+        if (slidesRes.ok) { const d = await slidesRes.json(); setSlides(Array.isArray(d) ? d : []); }
+        if (roomsRes.ok) { const d = await roomsRes.json(); setRooms(Array.isArray(d) ? d : []); }
+        if (calRes.ok) { const d = await calRes.json(); setEvents(Array.isArray(d) ? d : []); }
+        if (socialRes.ok) { const d = await socialRes.json(); setSocialEvents(Array.isArray(d) ? d : []); }
+        if (menuRes.ok) { const d = await menuRes.json(); setMenuItems(Array.isArray(d) ? d : []); }
+        if (placesRes.ok) { const d = await placesRes.json(); setPlaces(Array.isArray(d) ? d : []); }
+        if (reviewsRes.ok) { const d = await reviewsRes.json(); setReviews(Array.isArray(d) ? d : []); }
+        if (imagesRes?.ok) { const d = await imagesRes.json(); setImages(Array.isArray(d) ? d : []); }
+      } catch (err) { console.error('Failed to load admin data:', err); }
+    };
+    fetchAll();
+  }, []);
+
+  const deleteImage = async (id: number) => {
+    try {
+      await fetch(`/api/admin/images/${id}`, { method: 'DELETE' });
+      setImages(prev => prev.filter(img => img.id !== id));
+      showToast('Image deleted', 'success');
+    } catch { showToast('Error deleting image', 'error'); }
   };
 
-  const saveFooter = () => {
-    setMessage('Footer info saved successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (files && files.length > 0) {
-      // In a real app, you would upload the files to a server
-      // For now, we'll just add a dummy image
-      const newImage: Image = {
-        id: images.length + 1,
-        data: URL.createObjectURL(files[0]),
-        filename: files[0].name,
-        category: uploadCategory,
-        room_id: uploadCategory === 'rooms' ? parseInt(uploadRoomId) : null,
-        location_target: uploadLocationTarget,
-      };
-      setImages([...images, newImage]);
-      setMessage('Image uploaded successfully');
-      setTimeout(() => setMessage(null), 3000);
+  const renderSection = () => {
+    switch (activeSection) {
+      case 'dashboard': return <Dashboard rooms={rooms} slides={slides} events={events} reviews={reviews} places={places} />;
+      case 'brand': return <BrandSection images={images} onToast={showToast} />;
+      case 'gallery': return (
+        <div>
+          <SecHead title="🖼️ Image Gallery" count={images.length} />
+          <GalleryFilter images={images} onDelete={deleteImage} filter={imageFilter} onFilter={setImageFilter} />
+        </div>
+      );
+      case 'slides': return <SlidesSection slides={slides} setSlides={setSlides} images={images} onToast={showToast} />;
+      case 'calendar': return <CalendarSection events={events} setEvents={setEvents} images={images} onToast={showToast} />;
+      case 'social': return <SocialSection events={socialEvents} setEvents={setSocialEvents} images={images} onToast={showToast} />;
+      case 'rooms': return <RoomsSection rooms={rooms} setRooms={setRooms} images={images} onToast={showToast} />;
+      case 'menu': return <MenuSection items={menuItems} setItems={setMenuItems} images={images} onToast={showToast} />;
+      case 'places': return <PlacesSection places={places} setPlaces={setPlaces} images={images} onToast={showToast} />;
+      case 'reviews': return <ReviewsSection reviews={reviews} setReviews={setReviews} onToast={showToast} />;
+      case 'users': return <UsersSection />;
+      default: return <Dashboard rooms={rooms} slides={slides} events={events} reviews={reviews} places={places} />;
     }
   };
 
-  const handleDelete = (id: number) => {
-    setImages(images.filter((img) => img.id !== id));
-    setMessage('Image deleted successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const saveSlide = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (editingSlide) {
-      setSlides(slides.map((s) => (s.id === editingSlide.id ? { ...slideForm, id: editingSlide.id } as Slide : s)));
-      setEditingSlide(null);
-    } else {
-      setSlides([...slides, { ...slideForm, id: slides.length + 1 } as Slide]);
-    }
-    setSlideForm({
-      title: '',
-      subtitle: '',
-      image_id: null,
-      image_url: '',
-      active: true,
-      sort_order: 0,
-    });
-    setMessage('Slide saved successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const editSlide = (slide: Slide) => {
-    setEditingSlide(slide);
-    setSlideForm(slide);
-  };
-
-  const deleteSlide = (id: number) => {
-    setSlides(slides.filter((s) => s.id !== id));
-    setMessage('Slide deleted successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const saveEvent = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (editingEvent) {
-      setEvents(events.map((ev) => (ev.id === editingEvent.id ? { ...eventForm, id: editingEvent.id } as CalendarEvent : ev)));
-      setEditingEvent(null);
-    } else {
-      setEvents([...events, { ...eventForm, id: events.length + 1 } as CalendarEvent]);
-    }
-    setEventForm({
-      date: '',
-      title: '',
-      type: 'event',
-      color: '#E8A849',
-      description: '',
-      active: true,
-    });
-    setMessage('Event saved successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const editEvent = (event: CalendarEvent) => {
-    setEditingEvent(event);
-    setEventForm(event);
-  };
-
-  const deleteEvent = (id: number) => {
-    setEvents(events.filter((ev) => ev.id !== id));
-    setMessage('Event deleted successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const saveSocialEvent = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (editingSocialEvent) {
-      setSocialEvents(socialEvents.map((se) => (se.id === editingSocialEvent.id ? { ...socialEventForm, id: editingSocialEvent.id, reservation_count: editingSocialEvent.reservation_count } as SocialEvent : se)));
-      setEditingSocialEvent(null);
-    } else {
-      setSocialEvents([...socialEvents, { ...socialEventForm, id: socialEvents.length + 1, reservation_count: 0 } as SocialEvent]);
-    }
-    setSocialEventForm({
-      name: '',
-      description: '',
-      price: '',
-      date: '',
-      photos: [],
-      featured_photo: null,
-      active: true,
-      sort_order: 0,
-    });
-    setMessage('Social event saved successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const editSocialEvent = (socialEvent: SocialEvent) => {
-    setEditingSocialEvent(socialEvent);
-    setSocialEventForm(socialEvent);
-  };
-
-  const deleteSocialEvent = (id: number) => {
-    setSocialEvents(socialEvents.filter((se) => se.id !== id));
-    setMessage('Social event deleted successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const loadSocialEventReservations = (eventId: number) => {
-    // In a real app, you would fetch reservations from an API
-    // For now, we'll just set some dummy data
-    setSocialEventReservations([
-      { id: 1, event_id: eventId, username: 'John', event_name: 'Wine Tasting', guests: 2, notes: 'Allergic to nuts', status: 'pending', created_at: '2023-05-01' },
-    ]);
-    setSocialEventReservationsFor(eventId);
-  };
-
-  const updateReservationStatus = (id: number, status: SocialEventReservation['status']) => {
-    setSocialEventReservations(socialEventReservations.map((r) => (r.id === id ? { ...r, status } : r)));
-    setMessage('Reservation status updated');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const deleteReservation = (id: number) => {
-    setSocialEventReservations(socialEventReservations.filter((r) => r.id !== id));
-    setMessage('Reservation deleted');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const saveRoom = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (editingRoom) {
-      setRooms(rooms.map((r) => (r.id === editingRoom.id ? { ...roomForm, id: editingRoom.id } as Room : r)));
-      setEditingRoom(null);
-    } else {
-      setRooms([...rooms, { ...roomForm, id: rooms.length + 1 } as Room]);
-    }
-    setRoomForm({
-      name: '',
-      description: '',
-      price: '',
-      photos: [],
-      featured_photo: null,
-      active: true,
-      sort_order: 0,
-    });
-    setMessage('Room saved successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const editRoom = (room: Room) => {
-    setEditingRoom(room);
-    setRoomForm(room);
-  };
-
-  const deleteRoom = (id: number) => {
-    setRooms(rooms.filter((r) => r.id !== id));
-    setMessage('Room deleted successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const loadRoomComments = (roomId: number) => {
-    // In a real app, you would fetch comments from an API
-    // For now, we'll just set some dummy data
-    setRoomComments([
-      { id: 1, room_id: roomId, first_name: 'John', last_initial: 'D', text: 'Great room!', created_at: '2023-05-01' },
-    ]);
-    setRoomCommentRoomId(roomId);
-  };
-
-  const deleteRoomComment = (id: number) => {
-    setRoomComments(roomComments.filter((c) => c.id !== id));
-    setMessage('Comment deleted');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const saveMenu = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (editingMenu) {
-      setMenu(menu.map((m) => (m.id === editingMenu.id ? { ...menuForm, id: editingMenu.id } as MenuItem : m)));
-      setEditingMenu(null);
-    } else {
-      setMenu([...menu, { ...menuForm, id: menu.length + 1 } as MenuItem]);
-    }
-    setMenuForm({
-      category: '',
-      name: '',
-      description: '',
-      price: '',
-      is_daily_special: false,
-      active: true,
-      sort_order: 0,
-    });
-    setMessage('Menu item saved successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const editMenu = (menuItem: MenuItem) => {
-    setEditingMenu(menuItem);
-    setMenuForm(menuItem);
-  };
-
-  const deleteMenu = (id: number) => {
-    setMenu(menu.filter((m) => m.id !== id));
-    setMessage('Menu item deleted successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const savePlace = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (editingPlace) {
-      setPlaces(places.map((p) => (p.id === editingPlace.id ? { ...placeForm, id: editingPlace.id } as Place : p)));
-      setEditingPlace(null);
-    } else {
-      setPlaces([...places, { ...placeForm, id: places.length + 1 } as Place]);
-    }
-    setPlaceForm({
-      name: '',
-      description: '',
-      photos: [],
-      featured_photo: null,
-      distance_km: '',
-      visit_time: '',
-      suggestion: '',
-      active: true,
-      sort_order: 0,
-    });
-    setMessage('Place saved successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const editPlace = (place: Place) => {
-    setEditingPlace(place);
-    setPlaceForm(place);
-  };
-
-  const deletePlace = (id: number) => {
-    setPlaces(places.filter((p) => p.id !== id));
-    setMessage('Place deleted successfully');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const approveReview = (id: number) => {
-    setReviews(reviews.map((r) => (r.id === id ? { ...r, approved: true } : r)));
-    setMessage('Review approved');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const deleteReview = (id: number) => {
-    setReviews(reviews.filter((r) => r.id !== id));
-    setMessage('Review deleted');
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  const notify = (message: string) => {
-    setMessage(message);
-    setTimeout(() => setMessage(null), 3000);
-  };
-
-  // Stats data
-  const stats = [
-    { label: 'Total Images', value: count },
-    { label: 'Active Slides', value: slides.filter((s) => s.active).length },
-    { label: 'Active Events', value: events.filter((e) => e.active).length },
-    { label: 'Pending Reviews', value: reviews.filter((r) => !r.approved).length },
-  ];
-
   return (
-    <PageWrapper>
-      <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>}
+    <div style={{ minHeight: '100vh', background: C.bg, display: 'flex' }}>
+      {/* Toasts */}
+      {toasts.map(t => <Toast key={t.id} message={t.message} type={t.type} onClose={() => removeToast(t.id)} />)}
 
-      <StatsCards stats={stats} />
+      {/* Mobile sidebar toggle */}
+      <div style={{ display: 'none' }} /> {/* placeholder */}
 
-      <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>
+      {/* Sidebar */}
+      <aside style={{
+        width: 260, background: C.navy, height: '100vh', position: 'sticky', top: 0, overflowY: 'auto',
+        display: 'flex', flexDirection: 'column', transition: 'transform 300ms',
+        borderRight: '1px solid rgba(255,255,255,0.06)',
+      }}>
+        <div style={{ padding: '24px 20px', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
+          <h1 style={{ margin: 0, fontSize: '18px', fontWeight: 700, color: C.gold }}>
+            🏨 Hotel La Huasca
+          </h1>
+          <p style={{ margin: '4px 0 0', fontSize: '11px', color: 'rgba(255,255,255,0.4)' }}>Admin Portal</p>
         </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 })} />
+        <nav style={{ padding: '16px 12px', flex: 1 }}>
+          {NAV.map(n => (
+            <button key={n.id} onClick={() => { setActiveSection(n.id); setSidebarOpen(false); }}
+              style={{ width: '100%', display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 14px', marginBottom: '4px',
+                borderRadius: 10, border: 'none', cursor: 'pointer', fontSize: '14px', fontWeight: 500,
+                background: activeSection === n.id ? C.goldLight : 'transparent',
+                color: activeSection === n.id ? C.gold : 'rgba(255,255,255,0.6)',
+                transition: 'all 200ms', textAlign: 'left' }}
+              onMouseEnter={e => { if (activeSection !== n.id) { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.color = '#fff'; } }}
+              onMouseLeave={e => { if (activeSection !== n.id) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'rgba(255,255,255,0.6)'; } }}>
+              <span style={{ fontSize: '18px' }}>{n.icon}</span>
+              {n.label}
+            </button>
+          ))}
+        </nav>
+        <div style={{ padding: '16px 20px', borderTop: '1px solid rgba(255,255,255,0.06)', fontSize: '11px', color: 'rgba(255,255,255,0.3)' }}>
+          v1.0.0
         </div>
-        <div style={{ marginTop: '1rem' }}>
-          <Button onClick={saveFooter}>Save footer info</Button>
+      </aside>
+
+      {/* Main content */}
+      <main style={{ flex: 1, padding: '32px 40px', overflowY: 'auto', maxHeight: '100vh' }}>
+        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
+          {renderSection()}
         </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?.toString() ?? ''} 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>
-            ))}
-          </div>
-        )}
-      </AccordionSection>
-    </PageWrapper>
+      </main>
+    </div>
   );
-}
\ No newline at end of file
+}