https://water-heroes-cz.lovable.app/assets/nahledy.timeline-BFTJ811F.js

1import{j as e,r as m}from"./index-CLPRSiMc.js";import{T as l,a as u}from"./timeline-stops-DbFOJ_HR.js";import{u as j}from"./use-reduced-motion-6zqD-k51.js";import{u as v}from"./use-scroll-E9FVhpIP.js";import{u as g,a as x}from"./use-spring-CsBQvuBO.js";import{m as r}from"./proxy-XIwHtclt.js";const f=[{id:"t1",label:"T1 — Údolí",note:"Souvislá krajina, řeka jako svislá osa. Atmosféra nad informací."},{id:"t2",label:"T2 — Soutok",note:"Editorial sloupec, řeka jen jako tenká stopa. Nejlépe čitelné na mobilu."},{id:"t3",label:"T3 — Dvě řeky",note:"Celá osa jako přechod z poškozené řeky do obnovené."}];function w(){const[t,a]=m.useState("t1");return e.jsxs("div",{className:"min-h-screen bg-water-deep text-paper",children:[e.jsxs("header",{className:"border-b border-white/10 bg-water-deep/95 px-5 py-5 md:px-8",children:[e.jsx("p",{className:"text-[11px] font-semibold uppercase tracking-[0.22em] text-[#F4A52A]",children:"Interní náhled"}),e.jsx("h1",{className:"mt-1 font-wwf-display text-2xl uppercase md:text-4xl",children:"Tři návrhy časové osy"}),e.jsx("p",{className:"mt-2 max-w-2xl text-sm text-paper/70",children:"Samostatné vizuální skici. Na hlavní stránce zatím zůstává původní verze — přenese se až vybraný návrh."}),e.jsx("div",{className:"mt-4 flex flex-wrap gap-2",children:f.map(s=>e.jsx("button",{type:"button",onClick:()=>a(s.id),className:`rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.12em] transition ${t===s.id?"bg-[#F4A52A] text-water-deep":"border border-white/20 text-paper/75 hover:border-white/40"}`,children:s.label},s.id))}),e.jsx("p",{className:"mt-3 text-xs text-paper/55",children:f.find(s=>s.id===t)?.note})]}),e.jsxs("main",{children:[t==="t1"?e.jsx(b,{}):null,t==="t2"?e.jsx(y,{}):null,t==="t3"?e.jsx(k,{}):null]})]})}function b(){const t=m.useRef(null),a=j(),{scrollYProgress:s}=v({target:t,offset:["start 0.9","end 0.5"]}),o=g(s,{stiffness:70,damping:24,mass:.4}),d=l.map((n,p)=>p/(l.length-1)),i=x(o,d,l.map(n=>u[n.terrain].sky)),c=x(o,d,l.map(n=>u[n.terrain].land)),h=x(o,[0,1],[.02,1]);return e.jsxs("section",{ref:t,className:"relative overflow-x-clip",children:[e.jsx("div",{"aria-hidden":!0,className:"pointer-events-none absolute inset-0 z-0",children:e.jsxs("div",{className:"sticky top-0 h-[100svh] w-full overflow-hidden",children:[e.jsx(r.div,{className:"absolute inset-0",style:{backgroundColor:a?"#103146":i,opacity:.6}}),e.jsx("div",{className:"absolute inset-0 bg-[linear-gradient(180deg,var(--color-water-deep)_0%,transparent_20%,transparent_80%,var(--color-water-deep)_100%)]"}),e.jsxs("svg",{className:"absolute inset-x-0 bottom-0 h-[42%] w-full",viewBox:"0 0 100 40",preserveAspectRatio:"none",children:[e.jsx(r.path,{d:"M0 24 L12 13 L23 21 L34 9 L46 20 L58 11 L70 22 L82 14 L92 23 L100 17 L100 40 L0 40 Z",style:{fill:a?"#33454F":c},fillOpacity:.45}),e.jsx(r.path,{d:"M0 31 Q18 25 34 31 T68 30 T100 33 L100 40 L0 40 Z",style:{fill:a?"#33454F":c},fillOpacity:.75})]})]})}),e.jsx("div",{"aria-hidden":!0,className:"pointer-events-none absolute inset-0 z-10",children:e.jsxs("svg",{className:"h-full w-full",viewBox:"0 0 100 1000",preserveAspectRatio:"none",children:[e.jsx(r.path,{d:"M8 0 C 14 120, 2 240, 9 360 C 16 480, 3 600, 10 720 C 17 840, 6 940, 9 1000",className:"md:hidden",fill:"none",stroke:"#79C5E8",strokeWidth:5,strokeLinecap:"round",style:{pathLength:a?1:h,opacity:.75}}),e.jsx(r.path,{d:"M50 0 C 58 120, 42 240, 51 360 C 60 480, 41 600, 52 720 C 61 840, 46 940, 50 1000",className:"hidden md:block",fill:"none",stroke:"#79C5E8",strokeWidth:3.4,strokeLinecap:"round",style:{pathLength:a?1:h,opacity:.7}})]})}),e.jsx("ol",{className:"relative z-20 mx-auto max-w-4xl px-5 py-16 md:px-8 md:py-24",children:l.map((n,p)=>e.jsx("li",{className:"py-6 md:py-10",children:e.jsx("div",{className:`pl-10 md:pl-0 ${p%2?"md:pl-[52%]":"md:pr-[52%]"}`,children:e.jsx(N,{stop:n,order:p+1})})},n.title))})]})}function N({stop:t,order:a}){const s=t.status==="now";return e.jsxs(r.div,{initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0,amount:.35},transition:{duration:.5},className:`rounded-[8px] border p-5 backdrop-blur-[3px] ${s?"border-[#F4A52A]/60 bg-water-deep/85":"border-white/12 bg-water-deep/70"}`,children:[e.jsxs("p",{className:"text-[10px] font-bold uppercase tracking-[0.16em] text-paper/50",children:[a,". z ",l.length," · ",t.when]}),e.jsx("h3",{className:"mt-1 font-wwf-display text-2xl uppercase leading-none md:text-3xl",children:t.title}),e.jsx("p",{className:"mt-3 text-sm leading-relaxed text-paper/80",children:t.desc}),s?e.jsx("p",{className:"mt-3 inline-block bg-[#F4A52A] px-2 py-1 text-[10px] font-bold uppercase tracking-[0.16em] text-water-deep",children:"Právě probíhá"}):null]})}function y(){return e.jsx("section",{className:"mx-auto max-w-2xl px-5 py-16 md:px-8 md:py-24",children:e.jsxs("ol",{className:"relative",children:[e.jsx("div",{"aria-hidden":!0,

1className:"absolute bottom-0 left-[7px] top-0 w-px bg-[linear-gradient(to_bottom,transparent,#79C5E8_8%,#79C5E8_86%,#F4C94A)]"}),l.map((t,a)=>{const s=t.status==="now";return e.jsxs(r.li,{initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0,amount:.4},transition:{duration:.45},className:"relative pb-12 pl-8",children:[e.jsx("span",{"aria-hidden":!0,className:`absolute left-0 top-2 h-3.5 w-3.5 rounded-full ${s?"bg-[#F4A52A]":"bg-[#79C5E8]"}`,style:{boxShadow:"0 0 0 5px var(--color-water-deep)"}}),e.jsx("p",{className:"text-[10px] font-bold uppercase tracking-[0.2em] text-paper/50",children:t.when}),e.jsx("h3",{className:"mt-1 font-wwf-display text-3xl uppercase leading-none md:text-5xl",children:t.title}),e.jsx("p",{className:"mt-3 text-[15px] leading-relaxed text-paper/80",children:t.desc}),t.restoration?e.jsxs("div",{className:"mt-4 grid gap-3 border-t border-white/10 pt-4 sm:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-[10px] font-bold uppercase tracking-[0.14em] text-[#E8836A]",children:t.restoration.damagedLabel}),e.jsx("p",{className:"mt-1 text-[13px] leading-snug text-paper/65",children:t.restoration.damagedNote})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[10px] font-bold uppercase tracking-[0.14em] text-[#67C6A3]",children:t.restoration.restoredLabel}),e.jsx("p",{className:"mt-1 text-[13px] leading-snug text-paper/65",children:t.restoration.restoredNote})]})]}):null]},t.title)})]})})}function k(){const t=m.useRef(null),a=j(),{scrollYProgress:s}=v({target:t,offset:["start 0.9","end 0.4"]}),o=g(s,{stiffness:60,damping:22}),d=x(o,[0,1],["0%","100%"]);return e.jsxs("section",{ref:t,className:"relative overflow-x-clip",children:[e.jsx("div",{"aria-hidden":!0,className:"pointer-events-none absolute inset-0 z-0",children:e.jsxs("div",{className:"sticky top-0 h-[100svh] w-full overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 bg-[linear-gradient(180deg,#2B3238_0%,#3A4550_60%,#242B31_100%)]"}),e.jsx(r.div,{className:"absolute inset-x-0 top-0 overflow-hidden",style:{height:a?"100%":d},children:e.jsx("div",{className:"h-[100svh] w-full bg-[linear-gradient(180deg,#0E3149_0%,#1B4A63_55%,#2D4A3E_100%)]"})}),e.jsx("div",{className:"absolute inset-0 bg-[linear-gradient(180deg,var(--color-water-deep)_0%,transparent_18%,transparent_82%,var(--color-water-deep)_100%)]"})]})}),e.jsxs("ol",{className:"relative z-10 mx-auto max-w-3xl px-5 py-16 md:px-8 md:py-24",children:[l.map((i,c)=>e.jsx(r.li,{initial:{opacity:0,y:18},whileInView:{opacity:1,y:0},viewport:{once:!0,amount:.4},transition:{duration:.5},className:"py-8 md:py-12",children:e.jsxs("div",{className:"max-w-xl border-l-2 border-[#79C5E8]/70 pl-5",children:[e.jsxs("p",{className:"text-[10px] font-bold uppercase tracking-[0.2em] text-paper/50",children:[String(c+1).padStart(2,"0")," · ",i.when]}),e.jsx("h3",{className:"mt-1 font-wwf-display text-3xl uppercase leading-none md:text-5xl",children:i.title}),e.jsx("p",{className:"mt-3 text-[15px] leading-relaxed text-paper/85",children:i.desc})]})},i.title)),e.jsx("li",{className:"py-10",children:e.jsx("p",{className:"max-w-xl font-wwf-display text-2xl uppercase leading-tight text-[#F4C94A] md:text-4xl",children:"Z šedé řeky zpátky živá."})})]})]})}const S=()=>e.jsx(e.Fragment,{children:e.jsx(w,{})});export{S as component};