import React,{useEffect,useState} from 'react'
import {createRoot} from 'react-dom/client'
import './styles.css'
import {AboutPage,Section,Cards} from './routes.jsx'
import {RelationshipPage} from './RelationshipPage.jsx'
import {BooksPageSeparate as BooksPage} from './BooksPageSeparate.jsx'

const nav=[['O MNIE','/o-mnie.html'],['RELATIONSHIP','/relationship.html'],['FOTOGRAFIA','/fotografia.html'],['KSIĄŻKI','/ksiazki.html'],['FILM','/zwiastuny.html'],['TELEDYSKI','/teledyski.html'],['MASAŻE','/masaze.html'],['APLIKACJE','/aplikacje.html'],['AGENCI','/agenci.html'],['PROJEKTY','/projekty.html'],['PUBLIKACJE','/publikacje.html'],['NAGRODY','/nagrody.html'],['KONTAKT','/kontakt.html'],['WARSZTATY','/warsztaty-fotograficzne.html']]

const searchIndex=[
  ...nav.map(([label,path])=>({label,path,type:'WORLD'})),
  {label:'Człowiek Roku',path:'/ksiazki.html',type:'KSIĄŻKI'},
  {label:'CCR — Architektura Nieskończoności',path:'/ksiazki.html',type:'KSIĄŻKI'},
  {label:'Światło, które zostało',path:'/ksiazki.html',type:'KSIĄŻKI'},
  {label:'Baśń o Pornlandii',path:'/ksiazki.html',type:'KSIĄŻKI'},
  {label:'Cieszyn Noir',path:'/ksiazki.html',type:'KSIĄŻKI'},
  {label:'Ontologia Liczby i Geometrii',path:'/ksiazki.html',type:'KSIĄŻKI'},
  {label:'Druga połowa',path:'/ksiazki.html',type:'KSIĄŻKI'}
]

function Menu({open,onClose}){if(!open)return null;const link=(l,h)=><a key={h} href={h} onClick={onClose}>{l}</a>;return <div id="world-menu" className="menu-overlay" role="dialog" aria-modal="true" aria-labelledby="world-menu-title"><h2 id="world-menu-title" className="sr-only">Menu MojeAlterego</h2><button type="button" className="menu-close" onClick={onClose} autoFocus aria-label="Zamknij menu">×</button><div className="menu-grid"><div>{nav.slice(0,7).map(([l,h])=>link(l,h))}</div><div>{nav.slice(7).map(([l,h])=>link(l,h))}</div></div></div>}

function SearchOverlay({open,onClose}){const[q,setQ]=useState('');useEffect(()=>{if(!open)return;const key=e=>{if(e.key==='Escape')onClose()};addEventListener('keydown',key);return()=>removeEventListener('keydown',key)},[open,onClose]);useEffect(()=>{if(open)setQ('')},[open]);if(!open)return null;const term=q.trim().toLowerCase();const results=term?searchIndex.filter(x=>`${x.label} ${x.type}`.toLowerCase().includes(term)).slice(0,12):searchIndex.slice(0,10);return <div id="world-search" className="menu-overlay world-search" role="dialog" aria-modal="true" aria-labelledby="world-search-title"><h2 id="world-search-title" className="sr-only">Wyszukiwanie świata MojeAlterego</h2><button type="button" className="menu-close" onClick={onClose} autoFocus aria-label="Zamknij wyszukiwanie">×</button><div className="search-shell"><span className="eyebrow">WORLD SEARCH · COMMAND INTERFACE</span><input autoFocus value={q} onChange={e=>setQ(e.target.value)} placeholder="Szukaj w świecie MojeAlterego…" aria-label="Szukaj w świecie MojeAlterego"/><div className="search-results" aria-live="polite">{results.length?results.map((r,i)=><a href={r.path} onClick={onClose} key={`${r.path}-${r.label}`}><span>{String(i+1).padStart(2,'0')} · {r.type}</span><strong>{r.label}</strong><i>↗</i></a>):<div className="projects-empty">Brak wyników dla „{q}”.</div>}</div></div></div>}

function Header({onMenu,onSearch}){const[compact,setCompact]=useState(false);useEffect(()=>{const f=()=>setCompact(scrollY>48);addEventListener('scroll',f,{passive:true});f();return()=>removeEventListener('scroll',f)},[]);return <header className={`site-nav ${compact?'compact':''}`}><a href="/" className="brand" aria-label="Strona główna MojeAlterego"><img src="/assets/logo-master.svg" alt="Andrzej Mikulski — MojeAlterego"/></a><div className="nav-actions"><button type="button" className="search-trigger" onClick={onSearch} aria-expanded="false" aria-controls="world-search">SZUKAJ <span aria-hidden="true">⌕</span></button><button type="button" className="menu-trigger" onClick={onMenu} aria-expanded="false" aria-controls="world-menu">MENU <span aria-hidden="true">↗</span></button></div></header>}

function Home(){useEffect(()=>{const hero=document.querySelector('.hero');const light=document.querySelector('.hero-light');if(!hero||!light)return;const move=e=>{const x=(e.clientX/window.innerWidth-.5)*2;const y=(e.clientY/window.innerHeight-.5)*2;light.style.transform=`translate3d(${x*22}px,${y*14}px,0)`};hero.addEventListener('pointermove',move,{passive:true});return()=>hero.removeEventListener('pointermove',move)},[]);return <><section className="hero"><div className="hero-material"/><div className="hero-light"/><div className="hero-content"><img className="hero-logo" src="/assets/logo-master.svg" alt="Andrzej Mikulski — MojeAlterego"/><p className="hero-tag">CZŁOWIEK. OBRAZ. RELACJA. TECHNOLOGIA.</p><p className="hero-lead">Świat tworzony pomiędzy rzeczywistością, obrazem, słowem i technologią.</p><a className="entry" href="#world">WEJDŹ DO ŚWIATA <span aria-hidden="true">↓</span></a></div></section><section id="world" className="manifest section"><div className="eyebrow">01 / MANIFEST</div><div className="manifest-grid"><h2>Nie tworzę jednej rzeczy.<br/><em>Tworzę własny język.</em></h2><div><p>Fotografia nauczyła mnie patrzeć. Fotoreportaż — dostrzegać prawdę w sytuacjach, w których emocje często przesłaniają obraz.</p><p>MojeAlterego jest mapą pracy: ludzi, historii, obrazów, słów, idei i systemów.</p></div></div></section><section className="domains section">{[['01','RELACJA','Relationship Coaching i praca nad rozumieniem relacji.','/relationship.html'],['02','FOTOGRAFIA','Reportaż, street photo, portret i dokument.','/fotografia.html'],['03','KSIĄŻKI','Literatura, publikacje i autorskie światy.','/ksiazki.html'],['04','TECHNOLOGIA','Aplikacje, agenci AI, projekty i eksperymenty.','/projekty.html']].map(x=><article className="domain" key={x[1]}><span>{x[0]}</span><div><h2>{x[1]}</h2><p>{x[2]}</p><a href={x[3]}>WEJDŹ DO DZIAŁU ↗</a></div></article>)}</section><section className="numbers section">{[['2000+','nagród, wyróżnień i akceptacji'],['300+','wystaw zbiorowych'],['40+','krajów prezentacji prac'],['16','wystaw indywidualnych'],['75 000+','członków społeczności']].map(x=><div className="stat" key={x[0]}><strong>{x[0]}</strong><span>{x[1]}</span></div>)}</section><section className="section world-index"><div className="eyebrow">05 / WORLD INDEX</div>{nav.map((x,i)=><a className="index-row" href={x[1]} key={x[1]}><span>{String(i+1).padStart(2,'0')}</span><strong>{x[0]}</strong><i>↗</i></a>)}</section><section className="contact-band"><div><span className="eyebrow">NAWIĄŻMY KONTAKT</span><h2>W jakiej sprawie<br/>chcesz się skontaktować?</h2></div><a className="entry" href="/kontakt.html">KONTAKT ↗</a></section></>}

const pages={
 '/fotografia.html':['05','FOTOGRAFIA · REPORTAŻ · PORTRET · DOKUMENT','Fotografia.','Reportaż, street photo, portret i dokument — prezentowane jako autorski wybór, nie katalog.'],
 '/zwiastuny.html':['07','VIDEO · TRAILERS · STORYTELLING','Zwiastuny.','Rzeczywiste materiały video z przekazanej selekcji, bez wymyślonych tytułów.'],
 '/teledyski.html':['08','VIDEO · MUSIC · IMAGE','Teledyski.','Materiały audiowizualne prezentowane jako filmowa ściana.'],
 '/masaze.html':['09','MASAŻE · STUDIO · CIESZYN','Masaże.','Osobna, spokojna przestrzeń usługowa. Kontakt: studiomasazu1810@gmail.com'],
 '/aplikacje.html':['10','APLIKACJE · SYSTEMS · INTERFACES','Aplikacje.','Autorskie aplikacje i narzędzia cyfrowe prezentowane przez funkcję, architekturę i zastosowanie.'],
 '/agenci.html':['11','AI AGENTS · AUTOMATION · SYSTEMS','Agenci.','Agenci AI, ich role, integracje, architektury i zastosowania.'],
 '/projekty.html':['12','PROJECT ARCHIVE · AI · SECURITY · SYSTEMS','Projekty.','Archiwum projektów MojeAlterego — od infrastruktury i AI po eksperymenty i projekty kreatywne.'],
 '/publikacje.html':['13','MEDIA · DATA · PUBLICATIONS','Publikacje.','Archiwum publikacji, wywiadów i materiałów medialnych.'],
 '/nagrody.html':['14','AWARDS · FIAP · AFRP · ACHIEVEMENTS','Nagrody i osiągnięcia.','Dokumentacja tytułów, medali, konkursów i wyróżnień.'],
 '/kontakt.html':['15','MOJEALTEREGO · KONTAKT','Kontakt.','W jakiej sprawie chcesz się skontaktować?'],
 '/warsztaty-fotograficzne.html':['16','FOTOGRAFIA · EDUKACJA · WARSZTATY','Warsztaty fotograficzne.','Warsztaty i praca nad świadomym patrzeniem, kompozycją oraz językiem obrazu'],
}

function ProjectDetail({repo,onBack}){const[detail,setDetail]=useState(repo||null);const[loading,setLoading]=useState(!repo);const[error,setError]=useState('');useEffect(()=>{if(repo)return;const name=new URLSearchParams(window.location.search).get('repo');if(!name)return;let live=true;fetch(`https://api.github.com/repos/mojealterego/${encodeURIComponent(name)}`).then(r=>{if(!r.ok)throw new Error('GitHub API');return r.json()}).then(data=>{if(live)setDetail(data)}).catch(()=>{if(live)setError('Nie udało się pobrać danych repozytorium.')}).finally(()=>{if(live)setLoading(false)});return()=>{live=false}},[repo]);if(loading)return <main className="inner-page"><section className="inner-hero"><div><span className="eyebrow">PROJECT DETAIL · GITHUB</span><h1>Ładowanie…</h1><p>Pobieranie zweryfikowanych danych projektu.</p></div></section></main>;if(error||!detail)return <main className="inner-page"><section className="inner-hero"><div><span className="eyebrow">PROJECT DETAIL · ERROR</span><h1>Brak projektu.</h1><p>{error||'Nie podano identyfikatora repozytorium.'}</p><button className="entry-button" onClick={onBack}>WRÓĆ DO ARCHIWUM ↗</button></div></section></main>;const date=d=>d?new Date(d).toLocaleDateString('pl-PL'):'';return <main className="inner-page project-detail-page"><section className="inner-hero"><div><span className="eyebrow">PROJECT DETAIL · GITHUB · {detail.language||'REPOSITORY'}</span><h1>{detail.name}</h1><p>{detail.description||'Publiczne repozytorium GitHub.'}</p><div className="detail-actions"><button className="entry-button" onClick={onBack}>← ARCHIWUM</button><a className="entry" href={detail.html_url} target="_blank" rel="noreferrer">OTWÓRZ NA GITHUBIE ↗</a></div></div></section><section className="section"><div className="detail-grid"><div className="prose"><span className="eyebrow">01 / PROJECT</span><h2>Projekt jako element świata.</h2><p>Ten widok jest generowany z rzeczywistych metadanych publicznego repozytorium. Nie tworzy zastępczego opisu ani fikcyjnych informacji.</p><p>{detail.homepage?'Strona projektu: ':''}{detail.homepage&&<a className="inline-link" href={detail.homepage} target="_blank" rel="noreferrer">{detail.homepage}</a>}</p></div><div className="detail-facts"><div><span>STARS</span><strong>★ {detail.stargazers_count||0}</strong></div><div><span>FORKS</span><strong>{detail.forks_count||0}</strong></div><div><span>ISSUES</span><strong>{detail.open_issues_count||0}</strong></div><div><span>UTWORZONO</span><strong>{date(detail.created_at)}</strong></div><div><span>AKTUALIZACJA</span><strong>{date(detail.updated_at)}</strong></div><div><span>BRANCH</span><strong>{detail.default_branch||'main'}</strong></div></div></div><div className="detail-meta"><span>OWNER · {detail.owner?.login||'mojealterego'}</span><span>LICENSE · {detail.license?.spdx_id||'—'}</span><span>SIZE · {detail.size||0} KB</span></div></section></main>}

function ProjectsPage(){const[repos,setRepos]=useState([]);const[loading,setLoading]=useState(true);const[error,setError]=useState('');const[detail,setDetail]=useState(()=>new URLSearchParams(window.location.search).get('repo'));useEffect(()=>{let live=true;fetch('https://api.github.com/search/repositories?q=user%3Amojealterego%20fork%3Afalse&sort=updated&order=desc&per_page=100').then(r=>{if(!r.ok)throw new Error('GitHub API');return r.json()}).then(data=>{if(live)setRepos(Array.isArray(data.items)?data.items:[])}).catch(()=>{if(live)setError('Nie udało się pobrać aktualnego archiwum GitHub.')}).finally(()=>{if(live)setLoading(false)});return()=>{live=false}},[]);const openRepo=repo=>{history.pushState({},'',`/projekty.html?repo=${encodeURIComponent(repo)}`);setDetail(repo)};const back=()=>{history.pushState({},'',`/projekty.html`);setDetail(null)};useEffect(()=>{const pop=()=>setDetail(new URLSearchParams(window.location.search).get('repo'));addEventListener('popstate',pop);return()=>removeEventListener('popstate',pop)},[]);if(detail){const selected=repos.find(r=>r.name===detail);return <ProjectDetail repo={selected||null} onBack={back}/>};return <main className="inner-page projects-page"><section className="inner-hero"><span className="page-number">12</span><div><span className="eyebrow">PROJECT ARCHIVE · GITHUB · MOJEALTEREGO</span><h1>Projekty.</h1><p>Żywe archiwum publicznych projektów pobierane bezpośrednio z GitHub. Każdy wpis prowadzi do własnego widoku projektu opartego na rzeczywistych metadanych repozytorium.</p></div></section><Section number="01" title="ARCHIWUM"><div className="projects-meta"><span>{loading?'ŁADOWANIE':`${repos.length} REPOZYTORIÓW`}</span><span>ŹRÓDŁO: GITHUB API · LIVE</span></div>{error?<div className="projects-empty">{error}</div>:<div className="route-cards project-grid">{loading?Array.from({length:6}).map((_,i)=><article className="route-card project-card" key={i}><span>—</span><h3>Ładowanie…</h3><p>Pobieranie aktualnych danych repozytorium.</p></article>):repos.map((repo,i)=><button type="button" className="route-card project-card project-card-button" onClick={()=>openRepo(repo.name)} key={repo.id}><span>{String(i+1).padStart(2,'0')} · {repo.language||'REPO'}</span><h3>{repo.name}</h3><p>{repo.description||'Publiczne repozytorium GitHub.'}</p><div className="project-stats">★ {repo.stargazers_count} · forks {repo.forks_count} · aktualizacja {new Date(repo.updated_at).toLocaleDateString('pl-PL')}</div><b>OTWÓRZ PROJEKT ↗</b></button>)}</div>}</Section></main>}

function DataPage({path}){const p=pages[path];if(!p)return <NotFoundPage/>;const cards={
 '/fotografia.html':[['REPORTAŻ','Dokumentowanie życia codziennego i wydarzeń.'],['PORTRET','Człowiek jako centrum obrazu.'],['STREET PHOTO','Obserwacja przestrzeni i codzienności.'],['DOKUMENT','Obraz jako zapis rzeczywistości.']],
 '/masaze.html':[['STUDIO','Spokojna, sensoryczna przestrzeń.'],['KONTAKT','studiomasazu1810@gmail.com'],['REZERWACJA','Szczegóły ustalane indywidualnie.']],
 '/agenci.html':[['ROLE','Agenci wykonujący określone zadania.'],['ARCHITEKTURA','Narzędzia, modele, pamięć i integracje.'],['AUTOMATYZACJA','Powtarzalne procesy zamieniane w system.']],
 '/aplikacje.html':[['PRODUKT','Aplikacja jako kompletne doświadczenie.'],['INTERFEJS','Czytelność, hierarchia i interakcja.'],['SYSTEM','Integracje i warstwa wykonawcza.']],
 '/publikacje.html':[['MEDIA','Publikacje i wywiady.'],['DATA','Data i źródło materiału.'],['ARCHIVE','Uporządkowane archiwum.']],
 '/nagrody.html':[['2017','Artysta Fotograf RP (AFRP).'],['2018','Srebrny Medal „Za Zasługi dla Polskiej Fotografii”.'],['2019','Artiste FIAP (AFIAP).'],['2020','Excellence FIAP (EFIAP).'],['2023','Złoty Medal „Za Fotograficzną Twórczość” · Człowiek Roku Powiatu Cieszyńskiego.'],['2024','Człowiek Roku Powiatu Cieszyńskiego.']],
 '/warsztaty-fotograficzne.html':[['PATRZENIE','Świadome obserwowanie obrazu.'],['KOMPOZYCJA','Budowanie kadru i hierarchii.'],['PRAKTYKA','Praca z rzeczywistym materiałem.']],
 '/zwiastuny.html':[['01','Materiał video — źródło YouTube.'],['02','Materiał video — źródło YouTube.'],['03','Materiał video — źródło YouTube.']],
 '/teledyski.html':[['FILM','Obraz, rytm i muzyka.'],['MONTAŻ','Narracja budowana ruchem.'],['PLAY','Pełnoekranowe doświadczenie video.']],
 '/kontakt.html':[['RELATIONSHIP','Konsultacje i relacje.'],['FOTOGRAFIA','Sesje, reportaż, projekty.'],['MASAŻ','Studio masażu.'],['MEDIA','Publikacje i kontakt prasowy.'],['PROJEKTY','Współpraca technologiczna.'],['AI / AGENT','Agenci i systemy AI.']]}[path]||[];return <main className="inner-page"><section className="inner-hero"><div><span className="eyebrow">{p[1]}</span><h1>{p[2]}</h1><p>{p[3]}</p></div></section><Section number="01" title="WORLD"><Cards items={cards}/></Section></main>}

function NotFoundPage(){return <main className="inner-page"><section className="inner-hero"><div><span className="eyebrow">404 · MOJEALTEREGO</span><h1>Nie znaleziono.</h1><p>Ta ścieżka nie jest zdefiniowana w aktualnej mapie świata MojeAlterego.</p><a className="entry" href="/">WRÓĆ NA STRONĘ GŁÓWNĄ ↗</a></div></section></main>}
function LegacyPage({path}){if(path==='/o-mnie.html')return <AboutPage/>;if(path==='/relationship.html')return <RelationshipPage/>;if(path==='/ksiazki.html')return <BooksPage/>;if(path==='/projekty.html')return <ProjectsPage/>;return <DataPage path={path}/>}
function App(){const[menu,setMenu]=useState(false);const[search,setSearch]=useState(false);useEffect(()=>{const key=e=>{if(e.key==='Escape'){setMenu(false);setSearch(false)}};addEventListener('keydown',key);return()=>removeEventListener('keydown',key)},[]);const path=window.location.pathname;return <div className="site"><a className="skip-link" href="#main-content">PRZEJDŹ DO TREŚCI</a><Header onMenu={()=>{setSearch(false);setMenu(true)}} onSearch={()=>{setMenu(false);setSearch(true)}}/><Menu open={menu} onClose={()=>setMenu(false)}/><SearchOverlay open={search} onClose={()=>setSearch(false)}/><div id="main-content" tabIndex="-1">{path==='/'?<Home/>:<LegacyPage path={path}/>}</div><footer><span>© 2026 ANDRZEJ MIKULSKI · MOJEALTEREGO</span><span>THE WORLD IS LARGER THAN THE PAGE.</span><a href="/kontakt.html">KONTAKT</a></footer></div>}
createRoot(document.getElementById('root')).render(<App/>)