// THE EPIZODE — homepage. // Uses shared layout (header / footer / theme) from layout.jsx. function EpzHomepage() { const F = EPZ_FONTS; useEpzLang(); const items = EPZ_COLLECTION; // Порядок мозаики кампейна фиксируется на загрузку страницы (микс — только при обновлении, // без дёрганья на ре-рендерах). Платок Тони (004) всегда в малом квадрате. const mosaicSlots = React.useMemo(() => { const byId = (id) => EPZ_EPISODES.find((e) => e.id === id); const others = ['001', '002', '003'].map(byId); for (let i = others.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); const t = others[i]; others[i] = others[j]; others[j] = t; } return [{ area: 'a', ep: others[0] }, { area: 'b', ep: others[1] }, { area: 'c', ep: others[2] }, { area: 'd', ep: byId('004') }]; }, []); // Бегущая строка-плёнка скрыта (дублировала кампейн). Вернуть → true. const SHOW_FILM_ROLL = false; const featured = items[2]; const [theme, setTheme, T] = useEpzTheme(); const dark = theme === 'dark'; const cornerCol = T.cornerCrop; const [clubOpen, setClubOpen] = React.useState(false); // Герой занимает ровно первый экран (шапка sticky и в потоке — вычитаем её высоту), // чтобы снизу не выглядывал следующий блок: 100% погружение в первый кадр. const [hdrH, setHdrH] = React.useState(63); React.useEffect(() => { const measure = () => { const h = document.querySelector('header'); if (h) setHdrH(Math.round(h.getBoundingClientRect().height)); }; measure(); window.addEventListener('resize', measure); return () => window.removeEventListener('resize', measure); }, []); // Live scrubber: real seconds ticking 0 → 4:00 (4 episodes ≈ 4 minutes), then loops. const SCRUB_TOTAL = 240; const [elapsed, setElapsed] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setElapsed((e) => (e + 1) % (SCRUB_TOTAL + 1)), 1000); return () => clearInterval(t); }, []); const fmtTime = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`; const scrubPct = elapsed / SCRUB_TOTAL * 100; // Catalog carousel — index-based, whole-card aligned, custom smooth easing. const railRef = React.useRef(null); const showcaseLen = epzHomeShowcase().length; const idxRef = React.useRef(showcaseLen); // start of middle copy const animRef = React.useRef(false); function railCards() { return railRef.current ? railRef.current.querySelectorAll('.home-card') : []; } function animateScroll(el, to, dur) { animRef.current = true; const start = el.scrollLeft,change = to - start,t0 = performance.now(); const ease = (p) => p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2; function step(now) { const p = Math.min(1, (now - t0) / dur); el.scrollLeft = start + change * ease(p); if (p < 1) requestAnimationFrame(step);else animRef.current = false; } requestAnimationFrame(step); } function alignTo(i, animate) { const el = railRef.current;const cards = railCards(); if (!el || !cards[i]) return; const target = cards[i].offsetLeft - 32; // flush to left padding → whole card if (animate) animateScroll(el, target, 780);else el.scrollLeft = target; } function nearestIdx() { const el = railRef.current;const cards = railCards(); if (!el || !cards.length) return idxRef.current; let best = 0,bd = Infinity; cards.forEach((c, i) => { const d = Math.abs(c.offsetLeft - 32 - el.scrollLeft); if (d < bd) {bd = d;best = i;} }); return best; } function scrollRail(dir) { const N = showcaseLen; let i = nearestIdx() + dir * 2; alignTo(i, true); idxRef.current = i; setTimeout(() => { let j = idxRef.current; if (j < N) {j += N;alignTo(j, false);idxRef.current = j;} else if (j >= 2 * N) {j -= N;alignTo(j, false);idxRef.current = j;} }, 820); } React.useEffect(() => { idxRef.current = showcaseLen; const t = setTimeout(() => alignTo(showcaseLen, false), 60); // бесконечная прокрутка: при ручном скролле незаметно перебрасываем в среднюю копию const el = railRef.current; const N = showcaseLen; const onScroll = () => { if (animRef.current || !el) return; const cards = railCards(); if (cards.length < 2 * N) return; const setW = cards[N].offsetLeft - cards[0].offsetLeft; const base = cards[0].offsetLeft - 32; if (el.scrollLeft < base + setW * 0.15) el.scrollLeft += setW;else if (el.scrollLeft > base + setW * 1.85) el.scrollLeft -= setW; }; if (el) el.addEventListener('scroll', onScroll, { passive: true }); return () => {clearTimeout(t);if (el) el.removeEventListener('scroll', onScroll);}; }, []); return (
{/* ═════════════════════ HERO — видео ~5 сек (положить файл assets/video-hero-1.mp4; пока его нет — показывается постер) ═════════════════════ */}
{/* REC indicator top-left */}
rec
{/* CTA на заглавном кадре — прозрачная кнопка */}
{/* ═════════════════════ Большое горизонтальное фото ═════════════════════ */}
{epzT('перейти в каталог')} →
{/* ═════════════════════ CAMPAIGN — мозаика (большой + 3) — вместо коллажа ═════════════════════ */}
{(() => { const slots = mosaicSlots; return (
{slots.map(({ area, ep }) => { const arts = epzArticlesOf(ep.id); const cImg = ep.image || (arts.find((x) => x.image) || {}).image || null; const contain = ep.campaignContain || !ep.image; return ( {cImg ?
: }
{epzT('смотреть эпизод')} →
 ); })}
); })()}
{/* ═════════════════════ КОЛЛЕКЦИЯ «ПИЛОТ» — сетка 4 в ряд, без бокового скролла ═════════════════════ */}

{epzT('Коллекция «Пилот»')}

{(() => { // порядок карточек задан вручную: платье Catherine → платье Elvira → комплект Elvira шёлк → // платье Hatsumomo → комплект Elvira вискоза → тренч Catherine → платок Tony → комплект Catherine const ORDER = ['001-1', '002-1', '002-2:set', '003-1', '002-3:set', '001-2', '004-1', '001-set']; const all = epzHomeShowcase(); return ORDER.map((id) => all.find((a) => a.id === id)).filter(Boolean) .map((a) => ); })()}
{epzT('смотреть полностью')}
{/* ═════════════════════ FILM ROLL ═════════════════════ */} {/* СКРЫТО по просьбе: бегущая строка из фото дублировала кампейн. Сохранено для будущего — поменять SHOW_FILM_ROLL на true, чтобы вернуть. */} {SHOW_FILM_ROLL && (
{[0, 1].map((dup) =>
{[0, 1, 2, 3, 2, 1, 0, 3].map((idx, i) => { const it = items[idx]; return (
{!it.image && }
ep {it.id} · {it.timecode}
); })}
)}
)} {/* ═════════════════════ LOYALTY teaser ═════════════════════ */} {/* лояльность-тизер убран с главной по просьбе */} {/* ═════════════════════ COMMUNITY (UGC) ═════════════════════ */} {/* ═════════════════════ MANIFESTO ═════════════════════ */} {/* Убран с главной по просьбе. Вёрстка сохранена в founder-quote.jsx (window.EpzFounderQuote) — для будущей страницы. */} {/* ═════════════════════ INNER CIRCLE — Telegram (компакт, по центру) ═════════════════════ */}
{epzT('Ольга
{epzT('закрытый показ · только для клиентов бренда')}

{epzT('Telegram-канал основательницы бренда')}

83 / 300
{['выбор тканей для коллекций', 'ваш голос за кино', 'эскизы до релиза', 'ранний предзаказ', 'доступ к покупке образцов', '−10% на первый заказ'].map((perk, i) => (
{String(i + 1).padStart(2, '0')} {epzT(perk)}
))}
setClubOpen(false)} T={T} />
); } // ─── Club invite modal — клиенты бренда → закрытый телеграм ─────────────────── function EpzClubModal({ open, onClose, T }) { const F = EPZ_FONTS; const [sent, setSent] = React.useState(false); const [form, setForm] = React.useState({ name: '', contact: '', order: '', about: '' }); React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); }; }, [open]); function submit(e) { e.preventDefault(); // Persist request locally so the founder can review (демо — без бэкенда). try { const list = JSON.parse(localStorage.getItem('epz-club-requests') || '[]'); list.push({ ...form, at: new Date().toISOString() }); localStorage.setItem('epz-club-requests', JSON.stringify(list)); } catch (err) {} setSent(true); } const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); const field = { width: '100%', background: 'transparent', color: T.text, outline: 'none', border: `1px solid ${T.border}`, padding: '14px 16px', marginBottom: '-1px', fontFamily: F.mono, fontSize: 14, }; return ( <>
за кулисами · по приглашению
{sent ? (

Заявка принята.

Мы проверим вашу историю заказов и пришлём персональную ссылку-приглашение в течение пары дней. Если что-то понадобится уточнить — напишем на указанный контакт.

) : ( <>

Запросить приглашение

Канал — закрытый, только для тех, кто уже покупал THE EPIZODE. Оставьте контакты и номер заказа: мы сверим и пришлём личную ссылку.