import { useState, useMemo } from "react"; // Architectural study boards - gray palette, buildings in context with construction notes function SiteSVG({ id }) { const s = { width: "100%", height: "240px", display: "block" }; const bg="#0e0e0e", ln="#4a4a4a", dl="#252525", al="#777", gl="#141414", tx="#333", hi="#999"; // Shared elements const Grid=()=><>{[...Array(26)].map((_,i)=>)}{[...Array(15)].map((_,i)=>)}; const Ground=({y=215})=>{[...Array(50)].map((_,i)=>)}; const Road=({y=218,x1=0,x2=500})=>; const Tree=({x,y})=>; const Note=({x,y,children,anchor="start"})=>{children}; const Title=({children,sub})=>{children}{sub&&{sub}}; const Dim=({x1,x2,y,label})=>{label&&{label}}; const Scale=()=>~50m; const Bldg=({x,y,w,h})=>; const W=({x,y,w,h,cols,rows})=>{const cw=w/cols,rh=h/rows;return {[...Array(rows)].map((_,r)=>[...Array(cols)].map((_,c)=>))};}; const svgs = { genex: ( ), palace: ( ), moca: ( ), block23: ( ), sava: ( ), siv3: ( ), hotel_j: ( ), toblerone: ( ), eastern_gate: ( ), avala: ( ), kosmaj: ( ), sumarice: ( ), kadinjaca: ( ), bubanj: ( ), stratiste: ( ), }; return svgs[id] || null; } const SITES = [ { id:"genex",name:"Genex Tower (Western City Gate)",zone:"New Belgrade",day:1,year:"1977-1980",architect:"Mihajlo Mitrović",lat:44.8202,lng:20.4049,viewMin:37,description:"Twin concrete towers connected by a sky-bridge at the 26th floor, crowned by a revolving restaurant that never revolved. 36 storeys of pure defiance against the skyline, one of the most iconic brutalist structures on Earth.",tip:"Best photographed from the Bulevar Arsenija Čarnojevića overpass at golden hour. Try the café at its base.",duration:"30-45 min",access:"Exterior only (residential side occasionally accessible)"}, { id:"palace",name:"Palace of Serbia (SIV)",zone:"New Belgrade",day:1,year:"1947-1961",architect:"Vladimir Potočnjak & team",lat:44.8200,lng:20.4275,viewMin:25,description:"The first monumental project of New Belgrade after WWII. An enormous late-modernist complex of glass and concrete that housed the Federal Executive Council, designed to project authority while remaining approachable.",tip:"The fountains in front are the best framing device. Photography near the entrance can attract security attention.",duration:"20-30 min",access:"Exterior only (active government building)"}, { id:"moca",name:"Museum of Contemporary Art",zone:"New Belgrade",day:1,year:"1960-1965",architect:"Ivan Antić & Ivanka Raspopović",lat:44.8196,lng:20.4425,viewMin:90,description:"Crystal-like glass and concrete volumes perched at the confluence of the Sava and Danube. One of the first purpose-built contemporary art museums in Europe. The building itself is the masterpiece.",tip:"Go inside. The collection is excellent and the interior geometry is striking. Closed Tuesdays.",duration:"1-2 hrs",access:"Full interior access (small entry fee)"}, { id:"block23",name:"Block 23",zone:"New Belgrade",day:1,year:"1960s-1970s",architect:"Various Yugoslav architects",lat:44.8088,lng:20.4263,viewMin:37,description:"The socialist housing ideal made real: angular residential slabs arranged around schools, kindergartens, parks, and shops. Walk through the courtyard and feel the 1970s dream of collective living.",tip:"Wander the internal courtyards slowly. The scale only hits you when you stand between the buildings and look up.",duration:"30-45 min",access:"Open public space"}, { id:"sava",name:"Sava Congress Center",zone:"New Belgrade",day:1,year:"1976-1977",architect:"Stojan Maksimović",lat:44.8091,lng:20.4310,viewMin:30,description:"A massive polyhedral congress complex built in record time for the 1977 OSCE conference. Nominated for the Pritzker Prize. This is where Yugoslavia's last Communist Party congress met in 1990, and the country began to unravel.",tip:"Recently renovated, and the interior is accessible and impressive. There's a Lidl and a café at ground level for regrouping.",duration:"30 min",access:"Interior accessible during events and business hours"}, { id:"siv3",name:"SIV 3 (Police Building)",zone:"New Belgrade",day:1,year:"1970s",architect:"Branislav Jovin",lat:44.8220,lng:20.4133,viewMin:17,description:"Considered architect Branislav Jovin's greatest achievement. Massive raw concrete façade with distinctive yellow glass that ignites at sunrise and sunset. One of the most prominent examples of brutalism in Serbia.",tip:"Catch it during golden hour. The yellow glass becomes almost luminous. It's across from the Novi Beograd municipality building.",duration:"15-20 min",access:"Exterior only (active government building)"}, { id:"hotel_j",name:"Hotel Jugoslavija",zone:"New Belgrade",day:1,year:"1969",architect:"Lavoslav Horvat",lat:44.8223,lng:20.4368,viewMin:17,description:"Once the largest and most modern hotel in Yugoslavia: 1,500 rooms, seven floors, a monument to Tito-era ambition on the Danube riverbank. Now partially abandoned, it's a ghost of a grander era.",tip:"The exterior and riverside promenade around it are atmospheric. Combine with the nearby Museum of Contemporary Art.",duration:"15-20 min",access:"Exterior/partial"}, { id:"toblerone",name:"Toblerone Building",zone:"Karaburma",day:2,year:"1963",architect:"Rista Šekerinski",lat:44.8153,lng:20.4901,viewMin:17,description:"A hexagonal housing tower with sharp triangular features that earned it the Toblerone nickname. Sixty meters of early Belgrade brutalism, now home to University of Belgrade faculty offices.",tip:"A bit of a trek from central Belgrade, but worth combining with the Eastern Gate visit.",duration:"15-20 min",access:"Exterior"}, { id:"eastern_gate",name:"Eastern City Gate (Rudo)",zone:"Konjarnik",day:2,year:"1970s",architect:"Vera Ćirković",lat:44.7844,lng:20.5119,viewMin:52,description:"Three residential towers on a circular base creating the optical illusion of depth. Built on a hillside at the city's eastern edge, this is the counterpart to the Genex Tower. The rooftop offers the best panoramic view of Belgrade.",tip:"The building entrances are unlocked, so you can respectfully explore and climb for incredible views. Concrete chunks have been known to fall, so stay alert.",duration:"45 min-1 hr",access:"Interior accessible (residential, be respectful)"}, { id:"stratiste",name:"Stratište Memorial",zone:"Jabuka / Pančevo",day:2,year:"1981",architect:"Various",lat:44.9288,lng:20.6338,viewMin:30,description:"A haunting memorial complex beside the main road, marking the site where over 10,000 Jewish, Serb, and Roma prisoners were executed between 1941 and 1944. Recently refurbished after years of neglect and vandalism.",tip:"Easy to combine with a Belgrade day since it's only 25 km out. The roadside location makes it feel suddenly discovered.",duration:"30 min",access:"Open, free"}, { id:"avala",name:"Avala Tower",zone:"Mt. Avala",day:2,year:"1965 (rebuilt 2010)",architect:"Uglješa Bogunović & Slobodan Janjić",lat:44.6960,lng:20.5147,viewMin:75,description:"A 204m telecommunications tower with an equilateral triangle cross-section, standing on legs rather than planted in the ground, one of very few of its kind globally. Destroyed in the 1999 NATO bombing, then rebuilt as a symbol of resilience.",tip:"The observation deck has panoramic views of Serbia. On clear days you can see for 70+ km. Best combined with Kosmaj on a half-day road trip.",duration:"1-1.5 hrs",access:"Observation deck open (entry fee)"}, { id:"kosmaj",name:"Kosmaj Partisan Monument",zone:"Mt. Kosmaj",day:2,year:"1971",architect:"Vojin Stojić & Gradimir Medaković",lat:44.4679,lng:20.5717,viewMin:75,description:"Five 30-meter concrete prongs reaching skyward from the mountaintop, a spaceship stranded from a 1970s vision of the future. Dedicated to the Kosmaj Partisan Detachment who lost 5,000 fighters resisting the Nazi occupation.",tip:"Go at dawn or dusk for dramatic light. The monument is in some disrepair but the setting is extraordinary. Great hiking in the surrounding forest.",duration:"1-1.5 hrs (plus drive)",access:"Open, free"}, { id:"sumarice",name:"Šumarice Memorial Park",zone:"Kragujevac",day:3,year:"1953 onwards",architect:"Multiple artists & architects",lat:44.0184,lng:20.8814,viewMin:150,description:"A vast memorial park with 33 monuments across forested hills, commemorating the massacre of ~3,000 men and boys by German forces in October 1941. The 'Interrupted Flight' sculpture, a broken wing, is among the most haunting war memorials anywhere.",tip:"Allow a full morning. The museum provides essential context. This is an emotional visit, so go prepared.",duration:"2-3 hrs",access:"Open, museum has entry fee"}, { id:"kadinjaca",name:"Kadinjača Memorial Complex",zone:"Near Užice",day:3,year:"1979",architect:"Miodrag Živković & Aleksandar Đokić",lat:43.9122,lng:19.7427,viewMin:75,description:"Massive concrete and stone sculptures arranged across a hillside ridge, commemorating the Workers' Battalion from Užice who fell defending the Partisan retreat in 1941. The scale is staggering. Geometric forms marching across the landscape like a frozen army.",tip:"On the road between Užice and Tara National Park, making it a natural stop on a western Serbia loop. Some renovation works may be in progress.",duration:"1-1.5 hrs",access:"Open, free"}, { id:"bubanj",name:"Bubanj Memorial Park",zone:"Niš",day:4,year:"1963",architect:"Ivan Sabolić",lat:43.3053,lng:21.8726,viewMin:52,description:"Three monumental concrete fists thrust upward from the earth, representing men, women, and children who defied the Nazi occupiers. Over 10,000 Serbs, Roma, and Jews were executed at this site. Raw, furious, unforgettable.",tip:"45 minutes on foot from Niš center, or ~€4 by taxi. Visit the Niš concentration camp (Crveni Krst) first for devastating context.",duration:"45 min-1 hr",access:"Open, free"}, ]; const DAY_DEFS = [ { num:1,title:"New Belgrade: The Concrete Utopia",subtitle:"All walkable. Start at Genex, arc east through the blokovi.",startCity:"Belgrade",endCity:"Belgrade",startLat:44.8176,startLng:20.4569,endLat:44.8176,endLng:20.4569,overnightNote:"Stay in Belgrade"}, { num:2,title:"Belgrade's Edges & Mountain Monuments",subtitle:"Car or taxi day. East gates, south to Avala, deep into Kosmaj.",startCity:"Belgrade",endCity:"Belgrade",startLat:44.8176,startLng:20.4569,endLat:44.8176,endLng:20.4569,overnightNote:"Stay in Belgrade"}, { num:3,title:"Western & Central Serbia Road Trip",subtitle:"Belgrade to Kragujevac to Užice corridor. One-way drive day.",startCity:"Belgrade",endCity:"Užice",startLat:44.8176,startLng:20.4569,endLat:43.8584,endLng:19.8426,overnightNote:"Stay in Užice or Zlatibor"}, { num:4,title:"Niš Extension",subtitle:"Cross-country from Užice via highway, or return to Belgrade first.",startCity:"Užice",endCity:"Niš",startLat:43.8584,startLng:19.8426,endLat:43.3209,endLng:21.8954,overnightNote:"Stay in Niš (or drive back to Belgrade: 3 hrs)"}, ]; const MEAL_MIN=75,WINDOW=600; function hav(a,b){const R=6371,dL=((b.lat-a.lat)*Math.PI)/180,dN=((b.lng-a.lng)*Math.PI)/180,x=Math.sin(dL/2)**2+Math.cos((a.lat*Math.PI)/180)*Math.cos((b.lat*Math.PI)/180)*Math.sin(dN/2)**2;return R*2*Math.atan2(Math.sqrt(x),Math.sqrt(1-x));} function driveMin(a,b){const km=hav(a,b);return Math.round((km/(km<8?20:55))*60);} function computeRoute(selected){const selSites=SITES.filter(s=>selected.has(s.id));const byDay={};selSites.forEach(s=>{if(!byDay[s.day])byDay[s.day]=[];byDay[s.day].push(s)});const activeDays=DAY_DEFS.filter(d=>byDay[d.num]?.length>0);let tV=0,tD=0,tM=0;const db={};const rs={};DAY_DEFS.forEach(d=>{rs[d.num]={lat:d.startLat,lng:d.startLng}});if(!byDay[3]?.length&&byDay[4]?.length)rs[4]={lat:44.8176,lng:20.4569};activeDays.forEach(day=>{const sites=byDay[day.num];const start=rs[day.num];let dD=0,dV=0;if(sites.length>0)dD+=driveMin(start,sites[0]);for(let i=0;i0)dD+=driveMin(sites[sites.length-1],{lat:day.endLat,lng:day.endLng});tD+=dD;tV+=dV;tM+=MEAL_MIN;db[day.num]={drive:dD,view:dV,meals:MEAL_MIN,total:dD+dV+MEAL_MIN,overWindow:dD+dV+MEAL_MIN>WINDOW};});const last=activeDays[activeDays.length-1];let ret=0;if(last&&last.endCity!=="Belgrade")ret=driveMin({lat:last.endLat,lng:last.endLng},{lat:44.8176,lng:20.4569});return{tV,tD,tM,ret,totalMin:tV+tD+tM,calDays:activeDays.length,needsRet:ret>90,displayDays:activeDays.length+(ret>90?0.5:0),db,activeDays};} function SerbiaMap({sites,selected,expanded,onExpand}){const W=280,H=260;const p=(la,ln)=>({x:((ln-18.8)/4.2)*W,y:((46.2-la)/4)*H});const ol=[[46.15,19],[46.1,19.5],[46.1,20],[45.9,20.3],[45.8,20.5],[45.5,20.8],[45.2,21],[44.9,21.3],[44.8,21.5],[44.7,21.8],[44.6,22],[44.3,22.3],[44.2,22.7],[43.8,22.4],[43.5,22.4],[43.2,22.6],[43,22.7],[42.8,22.4],[42.6,22.1],[42.5,21.7],[42.3,21.4],[42.4,21],[42.5,20.7],[42.7,20.3],[43,20.3],[43.2,20.1],[43.4,19.6],[43.5,19.2],[43.7,19.2],[43.9,19.3],[44.1,19.1],[44.4,19],[44.6,19],[44.8,19.2],[45,19.1],[45.2,19],[45.5,19],[45.8,18.9],[46,19],[46.15,19]].map(([a,b])=>p(a,b));const d=ol.map((pt,i)=>`${i===0?"M":"L"}${pt.x.toFixed(1)},${pt.y.toFixed(1)}`).join(" ")+" Z";const dc={1:"#888",2:"#aaa",3:"#ccc",4:"#fff"};return(

{DAY_DEFS.map(d=>{const c=sites.filter(s=>s.day===d.num&&selected.has(s.id)).length;if(!c)return null;return(

DAY {d.num} ({c})

)})}

);} function SiteCard({site,isSelected,onToggle,isExpanded,onExpand}){return(

onExpand(isExpanded?null:site.id)} style={{background:isExpanded?"#1a1a1a":"#111",border:isSelected?"1px solid #333":"1px solid #2a2a2a",cursor:"pointer",transition:"all 0.25s ease",position:"relative",overflow:"hidden"}}>

{site.year} · {site.zone}

{site.name}

{isExpanded&&(

{site.description}

Insider tip

{site.tip}

{[["Architect",site.architect],["Time needed",site.duration],["Access",site.access]].map(([l,v])=>(

{l}

{v}

))}

)}

);} function genText(sel,r){const byDay={};sel.forEach(s=>{if(!byDay[s.day])byDay[s.day]=[];byDay[s.day].push(s)});let t=`BRUTALIST SERBIA // ${sel.length} sites, ${r.displayDays} days\n\n`;r.activeDays.forEach(day=>{const sites=byDay[day.num]||[];const bd=r.db[day.num];t+=`--- DAY ${day.num}: ${day.title} ---\n Stay: ${day.overnightNote}\n`;if(bd)t+=` ~${(bd.total/60).toFixed(1)} hrs (${Math.round(bd.drive)} min driving, ${Math.round(bd.view)} min viewing)\n\n`;sites.forEach((s,i)=>{t+=` ${i+1}. ${s.name}\n ${s.year} | ${s.duration}\n ${s.tip}\n\n`});});if(r.needsRet)t+=`--- RETURN: Drive back to Belgrade (~${Math.round(r.ret)} min) ---\n\n`;t+=`----------------------\nViewing: ~${(r.tV/60).toFixed(1)} hrs | Driving: ~${(r.tD/60).toFixed(1)} hrs | Meals: ~${(r.tM/60).toFixed(1)} hrs\nBest season: April-May or Sep-Oct\nBelgrade transit is free since 2025\n`;return t;} export default function App(){ const[selected,setSelected]=useState(new Set(SITES.map(s=>s.id)));const[expanded,setExpanded]=useState(null);const[activeDay,setActiveDay]=useState(null);const[copied,setCopied]=useState(false);const[showCopyText,setShowCopyText]=useState(null); const toggle=id=>{setSelected(p=>{const n=new Set(p);n.has(id)?n.delete(id):n.add(id);return n})};const sel=useMemo(()=>SITES.filter(s=>selected.has(s.id)),[selected]);const route=useMemo(()=>computeRoute(selected),[selected]);const filt=activeDay!==null?SITES.filter(s=>s.day===activeDay):SITES; const copy=()=>{const text=genText(sel,route);try{const ta=document.createElement("textarea");ta.value=text;ta.style.cssText="position:fixed;left:-9999px;top:-9999px";document.body.appendChild(ta);ta.focus();ta.select();const ok=document.execCommand("copy");document.body.removeChild(ta);if(ok){setCopied(true);setTimeout(()=>setCopied(false),2500)}else{setShowCopyText(text)}}catch(e){setShowCopyText(text)}}; const m9={fontFamily:"'Space Mono',monospace",fontSize:"9px",letterSpacing:"1.5px",color:"#555",textTransform:"uppercase"}; return(

Serbia · Brutalist Architecture · Trip Planner

Concrete
Monuments

Yugoslavia built something no other socialist state did: brutalism untethered from Soviet dogma. Toggle sites to shape your itinerary. The planner accounts for driving, viewing, meals, and where you'll sleep each night.

{[[sel.length,"sites"],[route.displayDays,"days"]].map(([v,l])=>(

{v}

{l}

))}

{route.totalMin>0&&<>

}

{[["#777",`${(route.tV/60).toFixed(1)}h viewing`],["#444",`${(route.tD/60).toFixed(1)}h driving`],["#2a2a2a",`${(route.tM/60).toFixed(1)}h meals`]].map(([c,t])=>(

{t}

))}

{route.activeDays.length>0&&(

Overnight route

{route.activeDays.map((d,i)=>(

{d.endCity}{i→}

))}{route.needsRet&&<>→Belgrade (~{Math.round(route.ret)} min)}

)}

{DAY_DEFS.map(d=>{const bd=route.db[d.num];const hrs=bd?(bd.total/60).toFixed(1):0;return()})}

{DAY_DEFS.filter(d=>activeDay===null||d.num===activeDay).map(day=>{const ds=filt.filter(s=>s.day===day.num);if(!ds.length)return null;const bd=route.db[day.num];return(

Day {day.num}

{day.title}

{day.subtitle}

{bd&&(

{Math.round(bd.view)} min viewing · {Math.round(bd.drive)} min driving · {bd.meals} min meals{bd.overWindow&&Long day}

)}

🛏{day.overnightNote}

{ds.map((site,i)=>{const prev=i===0?{lat:day.startLat,lng:day.startLng}:ds[i-1];const tm=driveMin(prev,site);const isSel=selected.has(site.id);return(

{isSel&&tm>3&&

{tm<10?"~"+tm+" MIN WALK":"~"+tm+" MIN DRIVE"}

}

)})}

{showCopyText&&(

setShowCopyText(null)}>

e.stopPropagation()}>

Select all + copy

e.target.select()} style={{flex:1,minHeight:"300px",background:"#0a0a0a",color:"#aaa",border:"none",padding:"16px 18px",fontFamily:"'Space Mono',monospace",fontSize:"11px",lineHeight:1.6,resize:"none",outline:"none"}}/></div></div>)}
    <div style={{maxWidth:"680px",margin:"0 auto",padding:"40px 24px 60px",borderTop:"1px solid #1a1a1a"}}><div style={{...m9,letterSpacing:"2px",color:"#444",marginBottom:"12px"}}>Planning notes</div><div style={{fontFamily:"'DM Sans',sans-serif",fontSize:"13px",color:"#666",lineHeight:1.8}}><p style={{margin:"0 0 8px 0"}}><strong style={{color:"#888"}}>Transport:</strong> Public transit is free in Belgrade as of 2025. Days 2-4 need a rental car or driver. Yugotour runs dedicated architecture tours in a vintage Yugo if that's your vibe.</p><p style={{margin:"0 0 8px 0"}}><strong style={{color:"#888"}}>Best season:</strong> April-May or September-October for comfortable walking and the best photography light.</p><p style={{margin:"0 0 8px 0"}}><strong style={{color:"#888"}}>Guided options:</strong> Several private brutalism tours operate from ~€50-65/person. Art historian-led tours of New Belgrade run ~2.5 hours.</p><p style={{margin:"0 0 8px 0"}}><strong style={{color:"#888"}}>Overnight tips:</strong> Belgrade for Days 1-2. Užice or Zlatibor for the western Serbia leg. Zlatibor is a ski resort town with better hotel stock. Niš has solid accommodation near the fortress area.</p><p style={{margin:0}}><strong style={{color:"#888"}}>Food fuel:</strong> Pljeskavica and ćevapi are on every corner. Serbian kafanas near the memorial sites are often the most authentic meals of any trip.</p></div></div>
  </div>);
}
</article></body></html>

{site.name}

ConcreteMonuments

{day.title}

Concrete
Monuments