import { useState, useEffect, useRef } from "react"; const COLORS = { bg: "#FAFAF8", dark: "#1A1A1A", text: "#2C2C2A", muted: "#888780", divider: "#E0DDD6", white: "#FFFFFF", teal: { light: "#E1F5EE", mid: "#0F6E56", dark: "#04342C", accent: "#5DCAA5" }, coral: { light: "#FAECE7", mid: "#993C1D", dark: "#4A1B0C" }, blue: { light: "#E6F1FB", mid: "#185FA5", dark: "#042C53" }, amber: { light: "#FAEEDA", mid: "#854F0B", dark: "#412402" }, purple: { light: "#EEEDFE", mid: "#534AB7", dark: "#26215C" }, }; const sections = [ { id: "hero", label: "Амальтея 2.0" }, { id: "context", label: "Контекст" }, { id: "concept", label: "Концепция" }, { id: "boulevard", label: "Бульвар" }, { id: "objects", label: "Медиаобъекты" }, { id: "residents", label: "Резиденты" }, { id: "scenarios", label: "Сценарии" }, { id: "clusters", label: "Мировые кейсы" }, { id: "newwork", label: "Новый формат" }, { id: "team", label: "Команде" }, ]; function Nav({ active, onNav }) { return ( ); } function SectionDivider({ number, title, subtitle }) { return (
{number}

{title}

{subtitle &&

{subtitle}

}
); } function Card({ color = "teal", title, children, wide }) { const c = COLORS[color] || COLORS.teal; return (
{title &&
{title}
}
{children}
); } function Stat({ value, label, color = "teal" }) { const c = COLORS[color] || COLORS.teal; return (
{value}
{label}
); } function Quote({ text, author }) { return (
{text} {author &&
— {author}
}
); } function ResidentRow({ type, name, area, model, fn, color = "teal" }) { const c = COLORS[color] || COLORS.teal; const typeColors = { "А": "teal", "Б": "purple", "В": "coral", "Г": "amber", "Д": "blue" }; const tc = COLORS[typeColors[type]] || COLORS.teal; return (
{type}
{name}
{area} м² · {model}
{fn}
); } function ScenarioCard({ code, title, freq, audience, duration, color = "teal" }) { const c = COLORS[color] || COLORS.teal; return (
{code} {title}
{freq} · {audience} · {duration}
); } function FinBar({ label, values, maxVal }) { const colors = [COLORS.teal.accent, COLORS.teal.mid, COLORS.blue.mid, COLORS.coral.mid]; return (
{label}
{values.map((v, i) => (
0 ? 28 : 0, }}>{v > 0 ? `${Math.round(v / 1e6)}` : ""}
))}
); } function CaseCard({ name, city, size, lesson, details, url }) { return (
{name}
{city} · {size}
{url && сайт ↗}
{details &&
{details}
}
{lesson}
); } export default function AmalteaSite() { const [active, setActive] = useState("hero"); const containerRef = useRef(null); const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; useEffect(() => { const observer = new IntersectionObserver( (entries) => { const visible = entries.filter(e => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top); if (visible.length > 0) setActive(visible[0].target.id); }, { rootMargin: "-80px 0px -60% 0px", threshold: 0 } ); sections.forEach(s => { const el = document.getElementById(s.id); if (el) observer.observe(el); }); return () => observer.disconnect(); }, []); const wrap = { maxWidth: 900, margin: "0 auto", padding: "0 24px" }; return (
); }