From 71ae322b3f64b692f9e0f76fa7314df8ad9c79ef Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Sat, 27 Jun 2026 19:29:08 -0500
Subject: [PATCH] feat(landscape): multi-photo gallery like rooms with uploads
 and ordering

---
 src/app/admin/page.tsx           |  29 +++--
 src/app/api/places/[id]/route.ts |   8 +-
 src/app/api/places/route.ts      |   8 +-
 src/app/landscape/page.tsx       | 196 ++++++++++++++++++++++---------
 src/lib/schema.ts                |   9 +-
 5 files changed, 174 insertions(+), 76 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 6f3e05b..ac59373 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -67,7 +67,8 @@ interface Place {
   id: number;
   name: string;
   description: string;
-  photo: string | null;
+  photos: string[];
+  featured_photo: string | null;
   distance_km: string | null;
   visit_time: string | null;
   suggestion: string | null;
@@ -140,7 +141,7 @@ export default function AdminPage() {
   const [editingMenu, setEditingMenu] = useState<number | null>(null);
 
   const [places, setPlaces] = useState<Place[]>([]);
-  const [placeForm, setPlaceForm] = useState<Partial<Place>>({ name: '', description: '', photo: '', distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 });
+  const [placeForm, setPlaceForm] = useState<Partial<Place>>({ name: '', description: '', photos: [], featured_photo: null, distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 });
   const [editingPlace, setEditingPlace] = useState<number | null>(null);
 
   const [reviews, setReviews] = useState<Review[]>([]);
@@ -305,7 +306,7 @@ export default function AdminPage() {
 
   const savePlace = async (e: React.FormEvent) => {
     e.preventDefault();
-    const payload = { ...placeForm, active: placeForm.active !== false, sort_order: placeForm.sort_order || 0 };
+    const payload = { ...placeForm, photos: placeForm.photos || [], featured_photo: placeForm.featured_photo || null, active: placeForm.active !== false, sort_order: placeForm.sort_order || 0 };
     if (editingPlace) {
       await api(`/api/places/${editingPlace}`, 'PUT', payload);
       setPlaces((prev) => prev.map((p) => (p.id === editingPlace ? { ...p, ...payload } as Place : p)));
@@ -314,11 +315,11 @@ export default function AdminPage() {
       const json = await api('/api/places', 'POST', payload);
       setPlaces((prev) => [...prev, json.data]);
     }
-    setPlaceForm({ name: '', description: '', photo: '', distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 });
+    setPlaceForm({ name: '', description: '', photos: [], featured_photo: null, distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 });
     notify('Place saved.');
   };
 
-  const editPlace = (p: Place) => { setPlaceForm({ ...p }); setEditingPlace(p.id); };
+  const editPlace = (p: Place) => { setPlaceForm({ ...p, photos: p.photos || [], featured_photo: p.featured_photo || null }); setEditingPlace(p.id); };
   const deletePlace = async (id: number) => { await api(`/api/places/${id}`, 'DELETE'); setPlaces((prev) => prev.filter((p) => p.id !== id)); };
 
   const approveReview = async (id: number) => {
@@ -558,7 +559,7 @@ export default function AdminPage() {
           <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) })} />
-          <RoomPhotoPicker
+          <PhotoPicker
             label="Room photos"
             images={images}
             photos={roomForm.photos || []}
@@ -635,8 +636,14 @@ export default function AdminPage() {
           <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 })} />
-          <Text label="Photo URL" value={placeForm.photo || ''} onChange={(v) => setPlaceForm({ ...placeForm, photo: 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' }}>
@@ -645,10 +652,10 @@ export default function AdminPage() {
           </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: '', photo: '', distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
+            {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.active ? 'On' : 'Off', `#${p.sort_order}`])} onEdit={(i) => editPlace(places[i])} onDelete={(i) => deletePlace(places[i].id)} />
+        <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)} />
       </Section>
 
       <Section title="Pending Reviews">
@@ -823,7 +830,7 @@ function ListTable({ rows, onEdit, onDelete, onComments }: { rows: string[][]; o
   );
 }
 
-function RoomPhotoPicker({
+function PhotoPicker({
   label, images, photos, featuredPhoto, onChange,
 }: {
   label: string;
@@ -873,7 +880,7 @@ function RoomPhotoPicker({
       </div>
       {allPhotos.length > 0 && (
         <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <span style={{ fontSize: '13px', color: '#777' }}>Featured photo:</span>
+          <span style={{ fontSize: '13px', color: '#777' }}>Featured:</span>
           <select
             value={featuredPhoto || ''}
             onChange={(e) => onChange(photos, e.target.value || null)}
diff --git a/src/app/api/places/[id]/route.ts b/src/app/api/places/[id]/route.ts
index 919999a..34643b2 100644
--- a/src/app/api/places/[id]/route.ts
+++ b/src/app/api/places/[id]/route.ts
@@ -7,12 +7,12 @@ export async function PUT(request: NextRequest, { params }: { params: { id: stri
     await requireRole('admin');
     const id = parseInt(params.id, 10);
     const body = await request.json();
-    const { name, description, photo, distance_km, visit_time, suggestion, active, sort_order } = body;
+    const { name, description, photos, featured_photo, distance_km, visit_time, suggestion, active, sort_order } = body;
 
     const { rows } = await db.query(
-      `UPDATE places SET name = $1, description = $2, photo = $3, distance_km = $4, visit_time = $5, suggestion = $6, active = $7, sort_order = $8
-       WHERE id = $9 RETURNING *`,
-      [name, description, photo || null, distance_km || null, visit_time || null, suggestion || null, active, sort_order || 0, id]
+      `UPDATE places SET name = $1, description = $2, photos = $3, featured_photo = $4, distance_km = $5, visit_time = $6, suggestion = $7, active = $8, sort_order = $9
+       WHERE id = $10 RETURNING *`,
+      [name, description, photos || '{}', featured_photo || null, distance_km || null, visit_time || null, suggestion || null, active, sort_order || 0, id]
     );
 
     if (rows.length === 0) {
diff --git a/src/app/api/places/route.ts b/src/app/api/places/route.ts
index 4b4ff24..15300bb 100644
--- a/src/app/api/places/route.ts
+++ b/src/app/api/places/route.ts
@@ -16,17 +16,17 @@ export async function POST(request: NextRequest) {
   try {
     await requireRole('admin');
     const body = await request.json();
-    const { name, description, photo, distance_km, visit_time, suggestion, sort_order } = body;
+    const { name, description, photos, featured_photo, distance_km, visit_time, suggestion, sort_order } = body;
 
     if (!name || !description) {
       return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
     }
 
     const { rows } = await db.query(
-      `INSERT INTO places (name, description, photo, distance_km, visit_time, suggestion, sort_order)
-       VALUES ($1, $2, $3, $4, $5, $6, $7)
+      `INSERT INTO places (name, description, photos, featured_photo, distance_km, visit_time, suggestion, sort_order)
+       VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
        RETURNING *`,
-      [name, description, photo || null, distance_km || null, visit_time || null, suggestion || null, sort_order || 0]
+      [name, description, photos || '{}', featured_photo || null, distance_km || null, visit_time || null, suggestion || null, sort_order || 0]
     );
 
     return NextResponse.json({ data: rows[0] });
diff --git a/src/app/landscape/page.tsx b/src/app/landscape/page.tsx
index 08078fb..1244d69 100644
--- a/src/app/landscape/page.tsx
+++ b/src/app/landscape/page.tsx
@@ -6,16 +6,16 @@ interface Place {
   id: number;
   name: string;
   description: string;
-  photo: string | null;
+  photos: string[];
+  featured_photo: string | null;
   distance_km: string | null;
   visit_time: string | null;
   suggestion: string | null;
+  sort_order: number;
 }
 
 const gold = '#E8A849';
-const navy = '#010D1E';
-const cream = '#f5f0e8';
-const warm = '#a6683c';
+const navy = '#001321';
 
 export default function LandscapePage() {
   const [places, setPlaces] = useState<Place[]>([]);
@@ -33,60 +33,144 @@ export default function LandscapePage() {
       .finally(() => setLoading(false));
   }, []);
 
+  if (loading) {
+    return (
+      <main style={{ minHeight: '100vh', background: navy, color: '#d4c9b8', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <p style={{ fontSize: '18px', fontStyle: 'italic' }}>Loading landscape...</p>
+      </main>
+    );
+  }
+
   return (
-    <main style={{ padding: '2rem', maxWidth: '72rem', margin: '0 auto', minHeight: '60vh' }}>
-      <h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', fontWeight: 400, fontStyle: 'italic', color: navy, margin: '0 0 0.5rem' }}>Landscape</h1>
-      <p style={{ color: '#555', marginBottom: '2rem', maxWidth: '50ch' }}>
-        Trails, rivers, waterfalls, and villages around La Huasca.
-      </p>
+    <main style={{ minHeight: '100vh', background: navy, color: '#f5f0e8' }}>
+      <section
+        style={{
+          background: 'linear-gradient(rgba(0,19,33,0.75), rgba(0,19,33,0.85))',
+          padding: '5rem 1.5rem 3rem',
+          textAlign: 'center',
+        }}
+      >
+        <h1
+          style={{
+            fontSize: 'clamp(34px, 5vw, 56px)',
+            fontWeight: 400,
+            fontStyle: 'italic',
+            color: gold,
+            margin: '0 0 1rem',
+            letterSpacing: '-0.5px',
+          }}
+        >
+          Landscape
+        </h1>
+        <p style={{ maxWidth: '720px', margin: '0 auto', fontSize: '18px', color: '#d4c9b8', lineHeight: 1.6 }}>
+          Nearby destinations and Andean highlights worth exploring from La Huasca.
+        </p>
+      </section>
 
-      {loading && <p style={{ color: warm }}>Loading places...</p>}
-      {error && <p style={{ color: '#c23b22' }}>{error}</p>}
-
-      {!loading && places.length === 0 && <p style={{ color: '#777' }}>No places added yet.</p>}
-
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '1.5rem' }}>
-        {places.map((place) => (
-          <article
-            key={place.id}
-            style={{
-              background: cream,
-              borderRadius: '20px',
-              overflow: 'hidden',
-              boxShadow: '0 2px 8px rgba(1,13,30,0.08)',
-              display: 'flex',
-              flexDirection: 'column',
-              transition: 'transform 0.2s, box-shadow 0.2s',
-            }}
-            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(1,13,30,0.14)'; }}
-            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(1,13,30,0.08)'; }}
-          >
-            <div
-              style={{
-                height: '200px',
-                background: '#ddd',
-                backgroundImage: place.photo ? `url(${place.photo})` : undefined,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-              }}
-            />
-            <div style={{ padding: '1.5rem', flex: 1 }}>
-              <h2 style={{ margin: '0 0 0.5rem', color: navy }}>{place.name}</h2>
-              <p style={{ color: '#555', lineHeight: 1.5 }}>{place.description}</p>
-              <div style={{ marginTop: '1rem', display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
-                {place.distance_km && <span style={{ fontSize: '13px', background: '#e8eff3', color: navy, padding: '0.3rem 0.7rem', borderRadius: '999px' }}>{place.distance_km} km</span>}
-                {place.visit_time && <span style={{ fontSize: '13px', background: '#e8eff3', color: navy, padding: '0.3rem 0.7rem', borderRadius: '999px' }}>{place.visit_time}</span>}
-              </div>
-              {place.suggestion && (
-                <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#fff', borderLeft: '3px solid ' + gold, borderRadius: '0 10px 10px 0' }}>
-                  <strong style={{ fontSize: '13px', color: warm }}>Suggestion:</strong>
-                  <p style={{ margin: '0.25rem 0 0', fontSize: '14px', color: '#555' }}>{place.suggestion}</p>
-                </div>
-              )}
-            </div>
-          </article>
-        ))}
-      </div>
+      <section style={{ padding: '2rem 1.5rem 5rem', maxWidth: '1200px', margin: '0 auto' }}>
+        {error && <p style={{ textAlign: 'center', color: '#c23b22' }}>{error}</p>}
+        {places.length === 0 ? (
+          <p style={{ textAlign: 'center', color: '#aaa' }}>No places listed yet.</p>
+        ) : (
+          <div style={{ display: 'grid', gap: '2rem' }}>
+            {places.map((place) => (
+              <PlaceCard key={place.id} place={place} />
+            ))}
+          </div>
+        )}
+      </section>
     </main>
   );
 }
+
+function PlaceCard({ place }: { place: Place }) {
+  const [active, setActive] = useState(place.featured_photo || place.photos[0] || '');
+
+  return (
+    <article
+      style={{
+        background: '#f5f0e8',
+        color: navy,
+        borderRadius: '20px',
+        overflow: 'hidden',
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        boxShadow: '0 12px 30px rgba(0,0,0,0.25)',
+      }}
+    >
+      <div style={{ position: 'relative', minHeight: '320px' }}>
+        {active ? (
+          <img
+            src={active}
+            alt={place.name}
+            style={{ width: '100%', height: '100%', minHeight: '320px', objectFit: 'cover', display: 'block' }}
+          />
+        ) : (
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              minHeight: '320px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: '#e0d8cc',
+              color: navy,
+              fontStyle: 'italic',
+            }}
+          >
+            No image
+          </div>
+        )}
+        {place.photos.length > 1 && (
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              display: 'flex',
+              gap: '0.5rem',
+              padding: '0.75rem',
+              overflowX: 'auto',
+              background: 'rgba(0,19,33,0.55)',
+            }}
+          >
+            {place.photos.map((photo, idx) => (
+              <button
+                key={idx}
+                onClick={() => setActive(photo)}
+                style={{
+                  padding: 0,
+                  border: active === photo ? '2px solid #E8A849' : '2px solid transparent',
+                  borderRadius: '8px',
+                  flexShrink: 0,
+                  cursor: 'pointer',
+                  background: 'transparent',
+                }}
+              >
+                <img
+                  src={photo}
+                  alt={`${place.name} ${idx + 1}`}
+                  style={{ width: '64px', height: '64px', objectFit: 'cover', borderRadius: '6px', display: 'block' }}
+                />
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      <div style={{ padding: '2rem', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+        <h2 style={{ fontSize: '28px', fontWeight: 400, fontStyle: 'italic', margin: '0 0 0.75rem', color: navy }}>{place.name}</h2>
+        {place.distance_km && (
+          <p style={{ margin: '0 0 0.5rem', color: '#a6683c', fontWeight: 600, fontSize: '15px' }}>{place.distance_km} km away · {place.visit_time || 'varies'}</p>
+        )}
+        <p style={{ margin: '0 0 1rem', lineHeight: 1.7, color: '#2b3a46' }}>{place.description}</p>
+        {place.suggestion && (
+          <div style={{ background: navy, color: gold, padding: '1rem 1.25rem', borderRadius: '12px', fontSize: '15px' }}>
+            <strong>Suggestion:</strong> {place.suggestion}
+          </div>
+        )}
+      </div>
+    </article>
+  );
+}
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index 4192f08..569e142 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -101,7 +101,8 @@ export async function initSchema() {
       id SERIAL PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       description TEXT NOT NULL,
-      photo VARCHAR(500),
+      photos TEXT[] DEFAULT '{}',
+      featured_photo VARCHAR(500),
       distance_km NUMERIC(8,2),
       visit_time VARCHAR(100),
       suggestion TEXT,
@@ -165,6 +166,12 @@ export async function initSchema() {
     ALTER TABLE users ADD COLUMN IF NOT EXISTS last_name VARCHAR(100);
   `);
 
+  await db.query(`
+    ALTER TABLE places ADD COLUMN IF NOT EXISTS featured_photo VARCHAR(500);
+    UPDATE places SET photos = ARRAY[photo] WHERE photo IS NOT NULL AND (photos IS NULL OR photos = '{}');
+    ALTER TABLE places DROP COLUMN IF EXISTS photo;
+  `);
+
   await db.query(`
     CREATE TABLE IF NOT EXISTS user_sessions (
       id SERIAL PRIMARY KEY,