// Variant B — Architectural Light
// Світла, повітряна, швейцарська сітка, фокус на даних

const HERO_SLIDES = [
'assets/hero-1.jpg',
'assets/hero-2.jpg',
'assets/hero-3.jpg',
'assets/hero-4.jpg',
'assets/hero-5.jpg'];


const HeroSlideshow = () => {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % HERO_SLIDES.length), 4500);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={vbStyles.heroPhotoWide}>
      {HERO_SLIDES.map((src, i) =>
      <img
        key={src}
        src={src}
        alt={`Upstream Place — фото ${i + 1}`}
        style={{
          ...vbStyles.heroPhotoImgWide,
          position: 'absolute',
          inset: 0,
          opacity: i === idx ? 1 : 0,
          transition: 'opacity 1.2s ease-in-out'
        }} />

      )}
      <div style={{
        position: 'absolute', bottom: 16, left: 16, display: 'flex', gap: 6, zIndex: 2
      }}>
        {HERO_SLIDES.map((_, i) =>
        <span key={i} style={{
          width: i === idx ? 24 : 8, height: 4, background: i === idx ? '#fff' : 'rgba(255,255,255,0.45)',
          transition: 'all 0.4s ease', borderRadius: 2
        }} />
        )}
      </div>

      {/* TOP-LEFT GREEN BADGES */}
      <div style={{
        position: 'absolute', top: 20, left: 20, display: 'flex', gap: 8, zIndex: 2, flexWrap: 'wrap'
      }}>
        <span style={{
          background: VB_ACCENT, color: '#fff',
          padding: '8px 14px', borderRadius: 999,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#fff' }} />
          Зйомки · Подкасти · Live
        </span>
        <span style={{
          background: 'rgba(255,255,255,0.92)', color: VB_INK,
          padding: '8px 14px', borderRadius: 999,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.08em', textTransform: 'uppercase'
        }}>
          150–300 місць
        </span>
      </div>

      {/* BOTTOM-RIGHT TECH BADGES */}
      <div style={{
        position: 'absolute', bottom: 20, right: 20, display: 'flex', gap: 8, zIndex: 2, flexWrap: 'wrap', justifyContent: 'flex-end'
      }}>
        <span style={{
          background: 'rgba(20,30,25,0.7)', backdropFilter: 'blur(8px)', color: '#fff',
          padding: '10px 14px', borderRadius: 6,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.04em',
          border: `1px solid ${VB_ACCENT}`,
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          <span style={{ color: VB_ACCENT }}>◆</span>
          СЦЕНА 12×4 м
        </span>
        <span style={{
          background: 'rgba(20,30,25,0.7)', backdropFilter: 'blur(8px)', color: '#fff',
          padding: '10px 14px', borderRadius: 6,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.04em',
          border: `1px solid ${VB_ACCENT}`,
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          <span style={{ color: VB_ACCENT }}>◆</span>
          LED 6×2,5 м
        </span>
        <span style={{
          background: 'rgba(20,30,25,0.7)', backdropFilter: 'blur(8px)', color: '#fff',
          padding: '10px 14px', borderRadius: 6,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.04em',
          border: `1px solid ${VB_ACCENT}`,
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          <span style={{ color: VB_ACCENT }}>◆</span>
          СТЕЛЯ 4,45 м
        </span>
      </div>
    </div>);

};

const TourSection = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const onSubmit = (e) => {
    e.preventDefault();
    if (!phone.trim()) return;
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 6000);
    setName('');setPhone('');
  };
  return (
    <section style={{ padding: '0 48px 96px' }}>
      <div style={{
        maxWidth: 1440, margin: '0 auto',
        background: VB_INK, color: 'oklch(0.97 0.012 75)',
        borderRadius: 6, padding: '64px 56px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
        position: 'relative', overflow: 'hidden'
      }}>
        <div>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: VB_ACCENT, marginBottom: 16 }}>09 — Перегляд</div>
          <h2 style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 'clamp(28px, 3vw, 40px)', fontWeight: 500, lineHeight: 1.1, margin: 0 }}>Запишіться на перегляд</h2>
          <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, opacity: 0.75, maxWidth: 460 }}>Покажемо простір вживу. Залиште імʼя та номер — зателефонуємо протягом 15 хв, щоб підібрати зручний час.</p>
        </div>
        <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Імʼя" style={{ background: 'transparent', border: '1px solid oklch(0.97 0.012 75 / 0.2)', color: '#fff', padding: '16px 20px', fontSize: 16, fontFamily: 'inherit', borderRadius: 4, outline: 'none' }} />
          <input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="Телефон" style={{ background: 'transparent', border: '1px solid oklch(0.97 0.012 75 / 0.2)', color: '#fff', padding: '16px 20px', fontSize: 16, fontFamily: 'inherit', borderRadius: 4, outline: 'none' }} />
          <button type="submit" style={{ background: VB_ACCENT, color: '#fff', border: 'none', padding: '18px 24px', fontSize: 15, fontWeight: 600, fontFamily: 'inherit', borderRadius: 4, cursor: 'pointer', letterSpacing: '0.02em' }}>Записатися на перегляд →</button>
        </form>
        {submitted &&
        <div style={{
          position: 'absolute', inset: 0, background: 'oklch(0.22 0.025 50 / 0.97)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 12,
          animation: 'fadeIn 0.3s ease'
        }}>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.1em', color: VB_ACCENT }}>✓ ЗАЯВКА ПРИЙНЯТА</div>
            <div style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 28, textAlign: 'center', maxWidth: 600 }}>Зателефонуємо протягом 15 хв</div>
          </div>
        }
      </div>
    </section>);

};

const VariantB = () => {
  const [hovered, setHovered] = React.useState(null);
  const [activeFilter, setActiveFilter] = React.useState('all');
  const [tweaks, setTweak] = (typeof useTweaks !== 'undefined') ? useTweaks(/*EDITMODE-BEGIN*/{
    "palette": "forest"
  }/*EDITMODE-END*/) : [{ palette: 'forest' }, () => {}];

  const spaces = [
  { id: 'hall', code: 'H-01', name: 'Велика зала', area: 370, cap: 320, ceil: 4.45, price: 3000, type: 'event', photo: 'assets/hall-catalog.png', tags: ['Концерт', 'Зйомка', 'Конференція'], desc: 'Універсальна локація 370 м² зі сценою 6×2,5 м, LED-екраном на всю задню стіну та повним технічним забезпеченням.' },
  { id: 'lounge', code: 'L-02', name: 'Конференц-лаундж', area: 60, cap: 40, ceil: 3.20, price: 600, type: 'meeting', tags: ['Конференція', 'Гримерка', 'Зйомка'], desc: 'Простір другого фокусу — конференц-зал, лаундж, освітні заходи або локація для зйомок. ' },
  { id: 'podcast', code: 'P-03', name: 'Подкаст-студія', area: null, cap: 4, ceil: null, price: null, type: 'studio', photo: 'assets/podcast-soon.png', tags: ['Скоро'], desc: 'Звукоізольована подкаст-студія повного циклу — у фінальній стадії ремонту. Запуск у 2026.', soon: true }];


  const filtered = activeFilter === 'all' ? spaces : spaces.filter((s) => s.type === activeFilter);

  return (
    <div style={vbStyles.root} className="vb-root" data-palette={tweaks.palette}>
      <style>{vbCss}</style>
      {typeof TweaksPanel !== 'undefined' && ReactDOM.createPortal(
        <TweaksPanel title="Tweaks · Палітра">
          <TweakRadio
            label="Палітра"
            value={tweaks.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
              { value: 'warm', label: 'Warm' },
              { value: 'forest', label: 'Forest' },
              { value: 'lime', label: 'Lime' },
              { value: 'ink', label: 'Ink' },
              { value: 'stone', label: 'Stone' },
            ]}
          />
        </TweaksPanel>,
        document.body
      )}

      {/* TOPBAR */}
      <header style={vbStyles.topbar}>
        <div style={vbStyles.topbarInner}>
          <div style={vbStyles.brand}>
            <span style={vbStyles.brandMark}>◐</span>
            <span style={vbStyles.brandName}>Upstream Place</span>
          </div>
          <nav style={vbStyles.nav}>
            <a style={vbStyles.navLink}>Простори</a>
            <a style={vbStyles.navLink}>Тарифи</a>
            <a style={vbStyles.navLink}>Зручності</a>
            <a style={vbStyles.navLink}>Локація</a>
            <a style={vbStyles.navLink}>Контакти</a>
          </nav>
          <div style={vbStyles.topbarRight}>
            <span style={vbStyles.topbarMeta}>+38 063 984 27 52</span>
            <button style={vbStyles.btnFilled}>Забронювати</button>
          </div>
        </div>
      </header>

      {/* HERO */}
      <section style={vbStyles.hero}>
        <div style={vbStyles.heroLeft}>
          <div style={vbStyles.heroLeftMain}>
            <div style={vbStyles.heroIndex}>
              <span style={vbStyles.heroIndexNum}>N° 01</span>
              <span style={vbStyles.heroIndexDiv}></span>
              <span style={vbStyles.heroIndexLoc}>KYIV</span>
            </div>
            <div style={vbStyles.heroLabel}>
              <span style={vbStyles.heroDot}></span>
              <span>Київ — погодинна оренда — будні дні</span>
            </div>
            <h1 style={vbStyles.heroTitle}>
              Простір для зйомок, подкастів і <span style={vbStyles.heroSerif}>live-шоу</span> з аудиторією.
            </h1>
            <p style={vbStyles.heroP}>
              Зал зі сценою на 150–300 місць у Києві —
              для YouTube, подкастів, інтерв&apos;ю, стендапу,
              концертів та інших подій з аудиторією.
            </p>
            <div style={vbStyles.heroCtas}>
              <button style={vbStyles.btnFilled}>Залишити заявку →</button>
              <button style={vbStyles.btnText}>Подивитися простори</button>
            </div>
          </div>

          <div style={vbStyles.heroSide}>
            <div style={vbStyles.heroSideTop}>
              <div style={vbStyles.heroSideKey}>Upstream Place</div>
              <div style={vbStyles.heroSideMeta}>H-01 · Велика зала</div>
              <div style={vbStyles.heroSideMeta}>370 м² · сцена 6×2,5 м</div>
              <div style={vbStyles.heroSideMeta}>LED-екран · світло · звук</div>
            </div>
            <div style={vbStyles.heroSideMid}>
              <div style={vbStyles.heroSideMidLabel}>Слоти бронювання</div>
              <div style={vbStyles.heroSideMidRow}>
                <span>Пн—Пт</span>
                <span style={vbStyles.heroSideMidVal}>09:00 — 22:00</span>
              </div>
              <div style={vbStyles.heroSideMidRow}>
                <span>Мін. бронь</span>
                <span style={vbStyles.heroSideMidVal}>3 години</span>
              </div>
              <div style={vbStyles.heroSideMidRow}>
                <span>Відповідь</span>
                <span style={vbStyles.heroSideMidVal}>протягом години</span>
              </div>
            </div>
            <div style={vbStyles.heroStats}>
              <div style={vbStyles.heroStat}>
                <div style={vbStyles.heroStatVal}>від 2 500</div>
                <div style={vbStyles.heroStatU}>грн / год — будні події</div>
              </div>
              <div style={vbStyles.heroStat}>
                <div style={vbStyles.heroStatVal}>від 5 000</div>
                <div style={vbStyles.heroStatU}>грн / год — зйомки / подкасти</div>
              </div>
            </div>
          </div>
        </div>
        <HeroSlideshow />
      </section>

      {/* PRIMARY USE — 3 ОСНОВНІ СЦЕНАРІЇ */}
      <section style={vbStyles.primary}>
        <div style={vbStyles.primaryHead}>
          <div style={vbStyles.primaryHeadInner}>
            <div>
              <div style={{ ...vbStyles.sectionLabel, color: VB_ACCENT }}>00 — Основне призначення</div>
              <h2 style={vbStyles.sectionTitle}>Простір для зйомок<br />і live-форматів</h2>
            </div>
            <p style={vbStyles.primaryLead}>
              Зал зі сценою на 150–300 місць у Києві —
              для YouTube, подкастів, інтервʼю, стендапу,
              концертів та інших подій з аудиторією.
            </p>
          </div>
        </div>

        <div style={vbStyles.primaryGrid}>
          {[
          { num: '01', icon: '🎬', title: 'Зйомки та продакшн', kinds: 'YouTube · подкасти · курси · інтервʼю', desc: 'Готова сцена 12×4 м, LED-екран 6×2,5 м, високі стелі під монтаж студійного світла.', price: 'від 5 000', unit: 'грн / год' },
          { num: '02', icon: '🎤', title: 'Live події', kinds: 'стендап · концерти · open mic', desc: 'Сцена з повним технічним забезпеченням, місткість 150–300 осіб, окрема гримерка.', price: 'від 2 500', unit: 'грн / год' },
          { num: '03', icon: '🎓', title: 'Освітні формати', kinds: 'лекції · воркшопи · школи', desc: 'Велика зала або компактний лаундж на 40 осіб. Екрани, мікрофони, можливість організації кава-брейку.', price: 'від 2 500', unit: 'грн / год' }].
          map((p) =>
          <div key={p.num} style={vbStyles.primaryCard}>
              <div style={vbStyles.primaryTop}>
                <span style={vbStyles.primaryNum}>{p.num}</span>
                <span style={vbStyles.primaryIcon}>{p.icon}</span>
              </div>
              <h3 style={vbStyles.primaryTitle}>{p.title}</h3>
              <div style={vbStyles.primaryKinds}>{p.kinds}</div>
              <p style={vbStyles.primaryDesc}>{p.desc}</p>
              <div style={vbStyles.primaryPrice}>
                <span style={vbStyles.primaryPriceVal}>{p.price}</span>
                <span style={vbStyles.primaryPriceUnit}>{p.unit}</span>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* MARQUEE */}
      <section style={vbStyles.marqueeBar}>
        <div style={vbStyles.marqueeViewport}>
          <div style={vbStyles.marqueeTrack}>
            {[...Array(2)].map((_, i) =>
            <div key={i} style={vbStyles.marqueeRun} aria-hidden={i === 1}>
                <span style={vbStyles.marqueeItem}>
                  <span style={vbStyles.marqueeLbl}>Робочі дні</span>
                  <span style={vbStyles.marqueeVal}>пн — пт</span>
                </span>
                <span style={vbStyles.marqueeDot}>✦</span>
                <span style={vbStyles.marqueeItem}>
                  <span style={vbStyles.marqueeLbl}>Доступ</span>
                  <span style={vbStyles.marqueeVal}>24/7 за домовленістю</span>
                </span>
                <span style={vbStyles.marqueeDot}>✦</span>
                <span style={vbStyles.marqueeItem}>
                  <span style={vbStyles.marqueeLbl}>Парковка</span>
                  <span style={vbStyles.marqueeVal}>є парковка</span>
                </span>
                <span style={vbStyles.marqueeDot}>✦</span>
                <span style={vbStyles.marqueeItem}>
                  <span style={vbStyles.marqueeLbl}>Залишайте заявку

</span>
                  <span style={vbStyles.marqueeVal}>прорахуємо за годину</span>
                </span>
                <span style={vbStyles.marqueeDot}>✦</span>
              </div>)}
          </div>
        </div>
      </section>

      {/* SPACES */}
      <section style={vbStyles.spaces}>
        <div style={vbStyles.sectionHead}>
          <div>
            <div style={vbStyles.sectionLabel}>01 — Простори</div>
            <h2 style={vbStyles.sectionTitle}>Каталог локацій</h2>
          </div>
          <div style={vbStyles.filters}>
            {[{ id: 'all', label: 'Усі' },
            { id: 'event', label: 'Великі івенти' },
            { id: 'meeting', label: 'Зустрічі' },
            { id: 'studio', label: 'Студії' }].
            map((f) =>
            <button
              key={f.id}
              onClick={() => setActiveFilter(f.id)}
              style={{
                ...vbStyles.filterBtn,
                ...(activeFilter === f.id ? vbStyles.filterBtnActive : {})
              }}>
              {f.label}</button>
            )}
          </div>
        </div>

        <div style={vbStyles.spacesGrid}>
          {filtered.map((s) =>
          <article
            key={s.id}
            style={{
              ...vbStyles.spaceCard,
              ...(hovered === s.id ? vbStyles.spaceCardHover : {}),
              ...(s.soon ? vbStyles.spaceCardSoon : {})
            }}
            onMouseEnter={() => setHovered(s.id)}
            onMouseLeave={() => setHovered(null)}>
            
              <div style={vbStyles.spaceImg}>
                {s.photo ?
              <img src={s.photo} alt={s.name} style={vbStyles.spaceImgEl} /> :

              <div style={vbStyles.imgPlaceholderInner}>
                    <span style={vbStyles.imgPlaceholderCode}>{s.code}</span>
                    <span style={vbStyles.imgPlaceholderLabel}>
                      {s.soon ? 'У ремонті' : 'Фото простору'}
                    </span>
                  </div>
              }
                {s.soon && s.photo &&
                  <div style={{
                    position: 'absolute', inset: 0,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    pointerEvents: 'none'
                  }}>
                    <span style={{
                      fontFamily: '"Unbounded", sans-serif',
                      fontSize: 'clamp(40px, 7vw, 64px)',
                      fontWeight: 600,
                      letterSpacing: '-0.04em',
                      color: '#fff',
                      lineHeight: 1,
                      textShadow: '0 4px 32px rgba(0,0,0,0.55)'
                    }}>soon..</span>
                  </div>
                }
              </div>
              <div style={vbStyles.spaceBody}>
                <div style={vbStyles.spaceMeta}>
                  <span style={vbStyles.spaceCode}>{s.code}</span>
                  <div style={vbStyles.spaceTags}>
                    {s.tags.map((t) => <span key={t} style={vbStyles.spaceTag}>{t}</span>)}
                  </div>
                </div>
                <h3 style={vbStyles.spaceName}>{s.name}</h3>
                <p style={vbStyles.spaceDesc}>{s.desc}</p>
                <div style={vbStyles.spaceMetricsRow}>
                  <div style={vbStyles.spaceMetric}>
                    <span style={vbStyles.spaceMetricL}>Площа</span>
                    <span style={vbStyles.spaceMetricV}>{s.area ? `${s.area} м²` : '—'}</span>
                  </div>
                  <div style={vbStyles.spaceMetric}>
                    <span style={vbStyles.spaceMetricL}>Місткість</span>
                    <span style={vbStyles.spaceMetricV}>{s.cap}</span>
                  </div>
                  <div style={vbStyles.spaceMetric}>
                    <span style={vbStyles.spaceMetricL}>Стеля</span>
                    <span style={vbStyles.spaceMetricV}>{s.ceil ? `${s.ceil} м` : '—'}</span>
                  </div>
                </div>
                <div style={vbStyles.spaceFoot}>
                  <div>
                    <div style={vbStyles.spacePriceVal}>
                      {s.price ? s.price.toLocaleString('uk-UA') : 'Скоро'}
                      {s.price && <span style={vbStyles.spacePriceCur}> грн</span>}
                    </div>
                    <div style={vbStyles.spacePriceUnit}>{s.price ? 'за годину' : 'TBA · 2026'}</div>
                  </div>
                  <button
                  style={{ ...vbStyles.spaceBtn, ...(s.soon ? vbStyles.spaceBtnDisabled : {}) }}
                  disabled={s.soon}>
                  {s.soon ? 'Сповістити' : 'Деталі →'}</button>
                </div>
              </div>
            </article>
          )}
        </div>
      </section>

      {/* USE CASES — Інші формати (другорядні) */}
      <section style={vbStyles.useCases}>
        <div style={vbStyles.othersHead}>
          <div style={vbStyles.othersHeadLeft}>
            <div style={vbStyles.sectionLabel}>02 — Інші формати</div>
            <h3 style={vbStyles.othersTitle}>Окрім зйомок та live-шоу</h3>
          </div>
          <p style={vbStyles.othersLead}>
            Відкриті до співпраці з церквами, музичними школами
            та іншими креативними просторами — на постійній або разовій основі.
          </p>
        </div>

        <div style={vbStyles.othersGrid}>
          {[
          { n: '01', t: 'Музичні школи', d: 'Звітні концерти, випускні, відкриті уроки. Сцена, звук, гримерка, LED-екран під афішу.', what: 'Сформовані пропозиції' },
          { n: '02', t: 'Церкви та спільноти', d: 'Зал зі сценою для богослужінь, конференцій, дитячих програм.', what: 'На постійній основі' },
          { n: '03', t: 'Оренда окремих кімнат', d: 'Лаундж 60 м² як переговорна, гримерка, camera room для подкасту або менші кімнати — під уроки та репетиції.', what: 'Від 600 грн / год' }].
          map((u) =>
          <div key={u.n} style={vbStyles.othersRow}>
              <span style={vbStyles.othersNum}>{u.n}</span>
              <div style={vbStyles.othersBody}>
                <h4 style={vbStyles.othersRowTitle}>{u.t}</h4>
                <p style={vbStyles.othersRowDesc}>{u.d}</p>
              </div>
              <div style={vbStyles.othersTag}>{u.what}</div>
            </div>
          )}
        </div>
      </section>

      {/* AMENITIES */}
      <section style={vbStyles.amenSection}>
        <div style={vbStyles.sectionHead}>
          <div>
            <div style={vbStyles.sectionLabel}>03 — Зручності</div>
            <h2 style={vbStyles.sectionTitle}>Усе включено у вартість</h2>
          </div>
        </div>

        <div style={vbStyles.amenGrid}>
          {[
          { g: 'Технічне', items: ['Wi-Fi 1 Gbps', 'LED-екран 6×2,5 м', 'Звук та мікрофони', 'Проектор / плазма', 'Студійне світло'] },
          { g: 'Простір', items: ['Кондиціонування', 'Звукоізоляція', 'Висока стеля 4.45 м', 'Меблі-трансформери'] },
          { g: 'Сервіс', items: ['Окрема рецепція', 'Гримерка', 'Парковка', 'Доступ 24/7'] }].
          map((cat) =>
          <div key={cat.g} style={vbStyles.amenCol}>
              <div style={vbStyles.amenColTitle}>{cat.g}</div>
              <ul style={vbStyles.amenList}>
                {cat.items.map((i) =>
              <li key={i} style={vbStyles.amenLi}>
                    <span style={vbStyles.amenCheck}>+</span>
                    <span>{i}</span>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
      </section>

      {/* GREEN ACCENT STRIPE — декоративна плашка */}
      <section style={{ maxWidth: 1440, margin: '0 auto', padding: '64px 48px 0' }}>
        <div style={{
          background: VB_ACCENT,
          color: '#fff',
          borderRadius: 8,
          padding: '40px 48px',
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          gap: 48,
          alignItems: 'center',
          position: 'relative',
          overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute', top: 0, right: 0, bottom: 0, width: '40%',
            backgroundImage: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 18px)',
            pointerEvents: 'none'
          }} />
          <div style={{ position: 'relative', zIndex: 2 }}>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.12em',
              textTransform: 'uppercase', opacity: 0.7, marginBottom: 14
            }}>
              ◆ Чому Upstream Place
            </div>
            <div style={{
              fontFamily: '"Unbounded", sans-serif', fontSize: 32, fontWeight: 500,
              letterSpacing: '-0.02em', lineHeight: 1.15, maxWidth: 720
            }}>
              Готовий простір з технікою — без витрат на оренду світла, звуку, монтажу сцени.
            </div>
          </div>
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 10, position: 'relative', zIndex: 2,
            paddingLeft: 32, borderLeft: '1px solid rgba(255,255,255,0.25)'
          }}>
            {[
              { k: '370 м²', l: 'площа залу' },
              { k: '4,45 м', l: 'висота стелі' },
              { k: '24 / 7', l: 'доступ за домовленістю' }
            ].map((row) =>
              <div key={row.k} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', minWidth: 90 }}>{row.k}</span>
                <span style={{ fontSize: 13, opacity: 0.85 }}>{row.l}</span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* PRICING TABLE */}
      <section style={vbStyles.pricing}>
        <div style={vbStyles.sectionHead}>
          <div>
            <div style={vbStyles.sectionLabel}>04 — Тарифи</div>
            <h2 style={vbStyles.sectionTitle}>Прозоре ціноутворення</h2>
          </div>
        </div>

        <div style={vbStyles.priceTable}>
          <div style={vbStyles.priceTableHead}>
            <div>Пакет</div>
            <div>Опис</div>
            <div>Тривалість</div>
            <div style={{ textAlign: 'right' }}>Ціна</div>
          </div>
          {[
          { tier: 'Погодинно — Велика зала', d: 'Базовий тариф для зйомок, репетицій, невеликих подій. Мінімум 3 години.', t: '1 год', p: '3 000 грн', accent: false },
          { tier: 'Погодинно — Лаундж 60м²', d: 'Конференц-зал, гримерка, або локація для зйомок крупних планів.', t: '1 год', p: '600 грн', accent: false },
          { tier: 'Денний пакет — Велика зала', d: 'Цілий робочий день у залі. Економія 25% порівняно з погодинною оплатою.', t: '8 год', p: '18 000 грн', accent: true, badge: 'POPULAR' },
          { tier: 'Концертний пакет', d: 'Підготовка + проведення + технік на майданчику. Весь технічний обвʼяз.', t: '6 год', p: 'від 10 000 грн', accent: false },
          { tier: 'Зйомочний день', d: 'Розширений день під відеовиробництво. Без перерв, локація під ключ.', t: '10 год', p: '22 000 грн', accent: false },
          { tier: 'Серія днів — знижка', d: 'Для серій зйомок або подій поспіль. Можна залишати реквізит на майданчику.', t: '3+ днів', p: '−10%', accent: false },
          { tier: 'Корпоративний / під подію', d: 'Конференція, презентація, корпоратив, освітній курс. Прорахуємо індивідуально.', t: 'за домовленістю', p: 'обговорюється', accent: false }].
          map((row, i) =>
          <div key={i} style={{
            ...vbStyles.priceRow,
            ...(row.accent ? vbStyles.priceRowAccent : {})
          }}>
              <div style={vbStyles.priceRowTier}>
                {row.tier}
                {row.badge && <span style={vbStyles.priceBadge}>{row.badge}</span>}
              </div>
              <div style={vbStyles.priceRowDesc}>{row.d}</div>
              <div style={vbStyles.priceRowTime}>{row.t}</div>
              <div style={vbStyles.priceRowPrice}>{row.p}</div>
            </div>
          )}
        </div>

        <div style={vbStyles.priceFoot}>
          <div style={vbStyles.priceFootBlock}>
            <div style={vbStyles.priceFootLabel}>Графік</div>
            <div style={vbStyles.priceFootVal}>Будні дні (пн–пт). Вихідні дні з 17:00.</div>
          </div>
          <div style={vbStyles.priceFootBlock}>
            <div style={vbStyles.priceFootLabel}>Знижки</div>
            <div style={vbStyles.priceFootVal}>−10% на 3+ днів поспіль · −15% у нічні години (00:00–08:00)</div>
          </div>
          <div style={vbStyles.priceFootBlock}>
            <div style={vbStyles.priceFootLabel}>Передоплата</div>
            <div style={vbStyles.priceFootVal}>50% при бронюванні. Решта — у день події.</div>
          </div>
        </div>
      </section>

      {/* LOCATION */}
      <section style={vbStyles.location}>
        <div style={vbStyles.locInner}>
          <div style={vbStyles.locLeft}>
            <div style={vbStyles.sectionLabel}>05 — Локація</div>
            <h2 style={vbStyles.locTitle}>Зручна локація з великою парковкою.</h2>

            <div style={vbStyles.locRows}>
              <div style={vbStyles.locRow}>
                <span style={vbStyles.locL}>Адреса</span>
                <span style={vbStyles.locV}>пр-т Степана Бандери, 23, Київ</span>
              </div>
              <div style={vbStyles.locRow}>
                <span style={vbStyles.locL}>Метро</span>
                <span style={vbStyles.locV}>«Почайна» · 5 хв пішки</span>
              </div>
              <div style={vbStyles.locRow}>
                <span style={vbStyles.locL}>Доступ</span>
                <span style={vbStyles.locV}>24/7 за попередньою домовленістю</span>
              </div>
            </div>

            <div style={vbStyles.locCtas}>
              <a href="https://www.google.com/maps/place/Upstream+Church/@50.4921018,30.4945357,18z/data=!4m6!3m5!1s0x40d4cfc3ed16c377:0x17f98808107f402c!8m2!3d50.4921018!4d30.4945357!16s%2Fg%2F11vmb2xgc9" target="_blank" rel="noopener noreferrer" style={{ ...vbStyles.btnFilled, textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}>Відкрити в Google Maps</a>
              <a href="https://www.google.com/maps/dir/?api=1&destination=50.4921018,30.4945357" target="_blank" rel="noopener noreferrer" style={{ ...vbStyles.btnText, textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}>Як дістатись →</a>
            </div>
          </div>

          <div style={vbStyles.locRight}>
            <a
              href="https://www.google.com/maps/place/Upstream+Church/@50.4921018,30.4945357,18z/data=!4m6!3m5!1s0x40d4cfc3ed16c377:0x17f98808107f402c!8m2!3d50.4921018!4d30.4945357!16s%2Fg%2F11vmb2xgc9"
              target="_blank"
              rel="noopener noreferrer"
              style={{ ...vbStyles.mapBox, display: 'block', textDecoration: 'none', position: 'relative' }}
              aria-label="Відкрити локацію в Google Maps">
              
              <iframe
                src="https://www.google.com/maps?q=50.4921018,30.4945357&z=17&hl=uk&output=embed"
                style={{ width: '100%', height: '100%', border: 0, display: 'block', pointerEvents: 'none' }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="Upstream Place — Google Maps" />
              
              <div style={{
                position: 'absolute', left: 16, bottom: 16,
                background: 'oklch(0.18 0.025 250)', color: 'oklch(0.96 0.005 240)',
                padding: '8px 12px', fontFamily: '"JetBrains Mono", monospace',
                fontSize: 11, fontWeight: 700, letterSpacing: '0.04em'
              }}>UPSTREAM PLACE ·пр-т Степана Бандери, 23
</div>
            </a>
          </div>
        </div>
      </section>

      {/* PROCESS — 4 кроки */}
      <section style={{ maxWidth: 1440, margin: '0 auto', padding: '120px 48px 96px' }}>
        <div style={vbStyles.sectionHead}>
          <div>
            <div style={vbStyles.sectionLabel}>06 — Як забронювати</div>
            <h2 style={vbStyles.sectionTitle}>Від першого дзвінка<br />до події — 4 кроки</h2>
          </div>
          <div style={vbStyles.sectionMeta}>Зазвичай — 24 години<br />від запиту до підтвердження</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 56 }}>
          {[
          { n: '01', t: 'Заявка', d: 'Заповнюєте форму або телефонуєте. Розповідаєте формат, дату, кількість гостей та технічні потреби.' },
          { n: '02', t: 'Прорахунок', d: 'Протягом години надсилаємо комерційну пропозицію — погодинно або пакетом, із усіма зручностями.' },
          { n: '03', t: 'Перегляд', d: 'Запрошуємо в простір — обходимо локацію, обговорюємо нюанси, перевіряємо обладнання під ваш сценарій.' },
          { n: '04', t: 'Подія', d: 'У день події — техшпіль, наш менеджер на майданчику, повна готовність обладнання та сервісу.' }].
          map((p) =>
          <div key={p.n} style={{
            background: VB_CARD, border: `1px solid ${VB_BORDER}`, borderRadius: 6,
            padding: 32, display: 'flex', flexDirection: 'column', gap: 16, minHeight: 240
          }}>
              <div style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.1em',
              color: VB_ACCENT, fontWeight: 700
            }}>STEP {p.n}</div>
              <h4 style={{ fontFamily: '"Unbounded", sans-serif', fontSize: 22, fontWeight: 500, margin: 0, lineHeight: 1.2, color: VB_INK }}>{p.t}</h4>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: VB_TEXT }}>{p.d}</p>
            </div>
          )}
        </div>
      </section>

      {/* TRUST — Хто вже знімав / виступав */}
      {/* TOUR */}
      <TourSection />

      {/* FOOTER */}
      <footer style={vbStyles.footer}>
        <div style={vbStyles.footerTop}>
          <div style={vbStyles.footerBrand}>
            <div style={vbStyles.footerMark}>Upstream Place</div>
            <div style={vbStyles.footerTag}>Простір для подій, що мають значення.<br />Київ — з 2024.</div>
          </div>
          <div style={vbStyles.footerCols}>
            <div>
              <div style={vbStyles.footerColTitle}>Простори</div>
              <a style={vbStyles.footerLink}>Велика зала</a>
              <a style={vbStyles.footerLink}>Лаундж</a>
              <a style={vbStyles.footerLink}>Подкаст-студія</a>
            </div>
            <div>
              <div style={vbStyles.footerColTitle}>Інформація</div>
              <a style={vbStyles.footerLink}>Тарифи</a>
              <a style={vbStyles.footerLink}>Локація</a>
              <a style={vbStyles.footerLink}>FAQ</a>
            </div>
            <div>
              <div style={vbStyles.footerColTitle}>Контакти</div>
              <a style={vbStyles.footerLink}>Telegram</a>
              <a style={vbStyles.footerLink}>Instagram</a>
            </div>
          </div>
        </div>
        <div style={vbStyles.footerBottom}>
          <span>© 2024–2026 Upstream Place</span>
          <span>Зроблено з увагою до простору</span>
        </div>
      </footer>
    </div>);
};

// ===== VARIANT B STYLES =====
// Palette is driven by CSS custom properties on .vb-root[data-palette="…"]
// Each VB_* below maps to a var() so the whole UI re-themes with one attribute.
const VB_BG = 'var(--vb-bg)';
const VB_CARD = 'var(--vb-card)';
const VB_INK = 'var(--vb-ink)';
const VB_TEXT = 'var(--vb-text)';
const VB_MUTED = 'var(--vb-muted)';
const VB_BORDER = 'var(--vb-border)';
const VB_BORDER_STRONG = 'var(--vb-border-strong)';
const VB_ACCENT = 'var(--vb-accent)';
const VB_ACCENT_SOFT = 'var(--vb-accent-soft)';

const vbCss = `
  @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

  /* WARM — cream paper + terracotta (original) */
  .vb-root, .vb-root[data-palette="warm"] {
    --vb-bg: oklch(0.975 0.012 75);
    --vb-card: oklch(0.995 0.006 75);
    --vb-ink: oklch(0.22 0.025 50);
    --vb-text: oklch(0.36 0.022 55);
    --vb-muted: oklch(0.55 0.018 60);
    --vb-border: oklch(0.9 0.012 70);
    --vb-border-strong: oklch(0.82 0.018 65);
    --vb-accent: oklch(0.66 0.16 50);
    --vb-accent-soft: oklch(0.94 0.035 65);
  }

  /* MONO FOREST — neutral b/w + deep evergreen */
  .vb-root[data-palette="forest"] {
    --vb-bg: oklch(0.985 0 0);
    --vb-card: #ffffff;
    --vb-ink: oklch(0.18 0 0);
    --vb-text: oklch(0.36 0 0);
    --vb-muted: oklch(0.55 0 0);
    --vb-border: oklch(0.9 0 0);
    --vb-border-strong: oklch(0.8 0 0);
    --vb-accent: oklch(0.46 0.11 155);
    --vb-accent-soft: oklch(0.94 0.04 155);
  }

  /* MONO LIME — neutral b/w + electric yellow-green */
  .vb-root[data-palette="lime"] {
    --vb-bg: oklch(0.985 0 0);
    --vb-card: #ffffff;
    --vb-ink: oklch(0.16 0 0);
    --vb-text: oklch(0.34 0 0);
    --vb-muted: oklch(0.55 0 0);
    --vb-border: oklch(0.9 0 0);
    --vb-border-strong: oklch(0.78 0 0);
    --vb-accent: oklch(0.78 0.21 130);
    --vb-accent-soft: oklch(0.95 0.08 130);
  }

  /* MONO INK — neutral b/w + dark blue ink */
  .vb-root[data-palette="ink"] {
    --vb-bg: oklch(0.985 0 0);
    --vb-card: #ffffff;
    --vb-ink: oklch(0.18 0 0);
    --vb-text: oklch(0.36 0 0);
    --vb-muted: oklch(0.55 0 0);
    --vb-border: oklch(0.9 0 0);
    --vb-border-strong: oklch(0.8 0 0);
    --vb-accent: oklch(0.42 0.16 265);
    --vb-accent-soft: oklch(0.94 0.04 265);
  }

  /* STONE MINT — warm grey + soft mint */
  .vb-root[data-palette="stone"] {
    --vb-bg: oklch(0.97 0.005 100);
    --vb-card: oklch(0.99 0.003 100);
    --vb-ink: oklch(0.22 0.008 100);
    --vb-text: oklch(0.38 0.006 100);
    --vb-muted: oklch(0.56 0.005 100);
    --vb-border: oklch(0.9 0.006 100);
    --vb-border-strong: oklch(0.82 0.008 100);
    --vb-accent: oklch(0.55 0.12 165);
    --vb-accent-soft: oklch(0.94 0.04 165);
  }

  .vb-root *::selection { background: var(--vb-ink); color: var(--vb-bg); }
  .vb-root button { font-family: inherit; }
  .vb-root a { color: inherit; text-decoration: none; cursor: pointer; }
  .vb-root input, .vb-root textarea, .vb-root select { font-family: inherit; }

  @keyframes vbMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
`;

const vbStyles = {
  root: {
    background: VB_BG,
    color: VB_INK,
    fontFamily: '"Inter", system-ui, sans-serif',
    minHeight: '100vh'
  },

  topbar: {
    position: 'sticky',
    top: 0,
    zIndex: 100,
    background: 'rgba(252, 252, 253, 0.85)',
    backdropFilter: 'blur(12px)',
    borderBottom: `1px solid ${VB_BORDER}`
  },
  topbarInner: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '16px 48px',
    display: 'grid',
    gridTemplateColumns: 'auto 1fr auto',
    gap: 48,
    alignItems: 'center'
  },
  brand: {
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    fontFamily: '"Unbounded", sans-serif',
    fontWeight: 700,
    letterSpacing: '-0.01em'
  },
  brandMark: { fontSize: 18, color: VB_ACCENT },
  brandName: { fontSize: 16, color: VB_INK },
  nav: { display: 'flex', gap: 28, justifyContent: 'center' },
  navLink: { fontSize: 14, color: VB_TEXT, fontWeight: 500 },
  topbarRight: { display: 'flex', alignItems: 'center', gap: 16 },
  topbarMeta: { fontSize: 13, color: VB_MUTED, fontWeight: 500 },

  btnFilled: {
    background: VB_INK,
    color: VB_BG,
    border: 'none',
    padding: '12px 20px',
    fontSize: 14,
    fontWeight: 500,
    cursor: 'pointer',
    borderRadius: 999
  },
  btnFilledLg: {
    background: VB_INK,
    color: VB_BG,
    border: 'none',
    padding: '18px 28px',
    fontSize: 15,
    fontWeight: 500,
    cursor: 'pointer',
    borderRadius: 999,
    width: 'fit-content'
  },
  btnText: {
    background: 'transparent',
    color: VB_INK,
    border: 'none',
    padding: '12px 4px',
    fontSize: 14,
    fontWeight: 500,
    cursor: 'pointer',
    borderBottom: `1px solid ${VB_INK}`,
    borderRadius: 0
  },

  hero: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '40px 48px 48px',
    display: 'flex',
    flexDirection: 'column',
    gap: 48
  },
  heroPhotoWide: {
    width: '100%',
    aspectRatio: '21/9',
    background: VB_INK,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 6,
    position: 'relative',
    overflow: 'hidden'
  },
  heroPhotoImgWide: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block'
  },
  heroPhotoCaption: {
    position: 'absolute',
    bottom: 16,
    right: 16,
    display: 'flex',
    gap: 16,
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: 'rgba(252,252,253,0.85)',
    letterSpacing: '0.04em',
    background: 'rgba(20,20,28,0.55)',
    padding: '8px 12px',
    backdropFilter: 'blur(6px)',
    borderRadius: 4
  },
  heroLeft: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'stretch', paddingTop: 24 },
  heroLeftMain: { display: 'flex', flexDirection: 'column', gap: 24 },
  heroSide: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    paddingLeft: 32,
    borderLeft: `1px solid ${VB_BORDER}`,
    gap: 32
  },
  heroSideTop: { display: 'flex', flexDirection: 'column', gap: 6 },
  heroSideKey: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 22,
    fontWeight: 600,
    color: VB_INK,
    letterSpacing: '-0.01em',
    marginBottom: 8
  },
  heroSideMeta: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 13,
    color: VB_MUTED,
    letterSpacing: '0.02em',
    lineHeight: 1.55
  },
  heroSideMid: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    paddingTop: 20,
    borderTop: `1px solid ${VB_BORDER}`
  },
  heroSideMidLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    marginBottom: 4
  },
  heroSideMidRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'baseline',
    fontSize: 13,
    color: VB_TEXT
  },
  heroSideMidVal: {
    fontWeight: 600,
    color: VB_INK
  },
  heroIndex: {
    display: 'flex',
    alignItems: 'center',
    gap: 12,
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    marginBottom: 4
  },
  heroIndexNum: { color: VB_INK, fontWeight: 600 },
  heroIndexDiv: { width: 24, height: 1, background: VB_BORDER },
  heroIndexLoc: {},
  heroLabel: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    width: 'fit-content',
    padding: '8px 14px',
    background: VB_ACCENT_SOFT,
    border: `1px solid ${VB_ACCENT}`,
    borderRadius: 999,
    fontSize: 13,
    color: VB_ACCENT,
    fontWeight: 600
  },
  heroDot: {
    width: 8, height: 8, borderRadius: '50%', background: VB_ACCENT
  },
  heroTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(40px, 5vw, 72px)',
    fontWeight: 600,
    letterSpacing: '-0.035em',
    lineHeight: 1.02,
    margin: 0
  },
  heroSerif: {
    fontFamily: '"Instrument Serif", serif',
    fontStyle: 'italic',
    fontWeight: 400,
    color: VB_ACCENT,
    letterSpacing: '-0.02em'
  },
  heroP: {
    fontSize: 17,
    lineHeight: 1.55,
    color: VB_TEXT,
    margin: 0,
    maxWidth: 520
  },
  heroCtas: { display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' },
  heroStats: {
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: 24,
    paddingTop: 24,
    borderTop: `1px solid ${VB_BORDER}`
  },
  heroStat: { display: 'flex', flexDirection: 'column', gap: 4 },
  heroStatVal: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 36,
    fontWeight: 600,
    letterSpacing: '-0.03em',
    color: VB_INK,
    lineHeight: 1
  },
  heroStatU: { fontSize: 13, color: VB_MUTED },

  heroRight: {},
  heroImg: { display: 'flex', flexDirection: 'column', gap: 12 },
  heroPhoto: {
    aspectRatio: '4/5',
    background: VB_INK,
    border: `1px solid ${VB_BORDER}`,
    position: 'relative',
    overflow: 'hidden',
    borderRadius: 4
  },
  heroPhotoImg: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block'
  },
  heroPhotoMeta: {
    position: 'absolute',
    top: 16,
    left: 16,
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
    background: 'rgba(252, 252, 253, 0.92)',
    padding: '10px 14px',
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 4,
    backdropFilter: 'blur(6px)'
  },
  imgPlaceholder: {
    aspectRatio: '4/5',
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    backgroundImage: `repeating-linear-gradient(45deg, ${VB_ACCENT_SOFT} 0, ${VB_ACCENT_SOFT} 1px, transparent 1px, transparent 14px)`,
    position: 'relative',
    display: 'flex',
    alignItems: 'flex-end',
    justifyContent: 'flex-start',
    padding: 24,
    borderRadius: 4
  },
  imgMeta: {
    display: 'flex',
    flexDirection: 'column',
    gap: 4,
    background: VB_CARD,
    padding: '10px 14px',
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 4
  },
  imgMetaCode: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 10,
    color: VB_ACCENT,
    letterSpacing: '0.1em'
  },
  imgMetaName: {
    fontSize: 14,
    fontWeight: 600,
    color: VB_INK
  },
  imgPlaceholderText: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_MUTED,
    letterSpacing: '0.1em',
    textTransform: 'uppercase'
  },
  heroImgCaption: {
    display: 'flex',
    justifyContent: 'space-between',
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.06em'
  },

  marqueeBar: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '0 48px'
  },
  marqueeViewport: {
    border: `1px solid ${VB_ACCENT}`,
    background: VB_ACCENT,
    color: '#fff',
    borderRadius: 4,
    overflow: 'hidden',
    padding: '20px 0'
  },
  marqueeTrack: {
    display: 'flex',
    width: 'max-content',
    animation: 'vbMarquee 38s linear infinite'
  },
  marqueeRun: {
    display: 'flex',
    alignItems: 'center',
    flexShrink: 0,
    paddingRight: 48
  },
  marqueeItem: {
    display: 'inline-flex',
    alignItems: 'baseline',
    gap: 12,
    padding: '0 36px',
    whiteSpace: 'nowrap'
  },
  marqueeLbl: { fontSize: 16, fontWeight: 500, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.02em' },
  marqueeVal: { fontSize: 16, fontWeight: 600, color: '#fff', letterSpacing: '0.02em' },
  marqueeDot: { color: 'rgba(255,255,255,0.5)', fontSize: 16 },

  spaces: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '96px 48px 0'
  },
  sectionHead: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    marginBottom: 48,
    gap: 32,
    flexWrap: 'wrap'
  },
  sectionLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    marginBottom: 12
  },
  sectionTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(36px, 4vw, 56px)',
    fontWeight: 600,
    letterSpacing: '-0.03em',
    lineHeight: 1,
    color: VB_INK,
    margin: 0
  },
  filters: { display: 'flex', gap: 8 },
  filterBtn: {
    background: 'transparent',
    color: VB_TEXT,
    border: `1px solid ${VB_BORDER}`,
    padding: '10px 18px',
    fontSize: 13,
    fontWeight: 500,
    cursor: 'pointer',
    borderRadius: 999
  },
  filterBtnActive: {
    background: VB_INK,
    color: VB_BG,
    borderColor: VB_INK
  },

  gallery: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '96px 48px 0'
  },
  galleryGrid: {
    display: 'grid',
    gridTemplateColumns: '1.2fr 1fr 1fr',
    gridTemplateRows: 'auto',
    gap: 16
  },
  galleryFig: {
    margin: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 8
  },
  galleryFigTall: {
    margin: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    gridRow: 'span 1'
  },
  galleryImg: {
    width: '100%',
    aspectRatio: '4/3',
    objectFit: 'cover',
    display: 'block',
    borderRadius: 4,
    border: `1px solid ${VB_BORDER}`
  },
  galleryCap: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.04em'
  },
  spacesGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16
  },
  spaceCard: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    overflow: 'hidden',
    transition: 'border-color 0.2s, transform 0.2s',
    display: 'flex',
    flexDirection: 'column'
  },
  spaceCardHover: {
    borderColor: VB_INK,
    transform: 'translateY(-2px)'
  },
  spaceCardSoon: { opacity: 0.7 },
  spaceImg: {
    aspectRatio: '4/3',
    background: VB_INK,
    borderBottom: `1px solid ${VB_BORDER}`,
    position: 'relative',
    overflow: 'hidden'
  },
  spaceImgEl: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block'
  },
  spaceImgOld: {
    aspectRatio: '4/3',
    background: VB_ACCENT_SOFT,
    backgroundImage: `repeating-linear-gradient(135deg, ${VB_ACCENT_SOFT} 0, ${VB_ACCENT_SOFT} 12px, ${VB_BG} 12px, ${VB_BG} 24px)`,
    borderBottom: `1px solid ${VB_BORDER}`,
    position: 'relative',
    display: 'flex',
    alignItems: 'flex-end',
    padding: 16
  },
  imgPlaceholderInner: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 4,
    padding: '8px 12px',
    display: 'flex',
    flexDirection: 'column',
    gap: 2
  },
  imgPlaceholderCode: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 10,
    color: VB_ACCENT,
    letterSpacing: '0.08em'
  },
  imgPlaceholderLabel: {
    fontSize: 11,
    color: VB_MUTED
  },

  spaceBody: {
    padding: '24px',
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    flex: 1
  },
  spaceMeta: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  spaceCode: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.1em'
  },
  spaceTags: { display: 'flex', gap: 4, flexWrap: 'wrap' },
  spaceTag: {
    fontSize: 10,
    padding: '3px 8px',
    background: VB_ACCENT_SOFT,
    color: VB_ACCENT,
    borderRadius: 999,
    fontWeight: 500,
    letterSpacing: '0.02em'
  },
  spaceName: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 24,
    fontWeight: 600,
    color: VB_INK,
    margin: 0,
    letterSpacing: '-0.02em'
  },
  spaceDesc: { fontSize: 14, color: VB_TEXT, lineHeight: 1.5, margin: 0 },
  spaceMetricsRow: {
    display: 'flex',
    gap: 16,
    paddingTop: 12,
    borderTop: `1px solid ${VB_BORDER}`,
    flexWrap: 'wrap'
  },
  spaceMetric: { display: 'flex', flexDirection: 'column', gap: 2 },
  spaceMetricL: { fontSize: 11, color: VB_MUTED, letterSpacing: '0.04em' },
  spaceMetricV: { fontSize: 14, fontWeight: 600, color: VB_INK },
  spaceFoot: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    marginTop: 'auto',
    paddingTop: 16
  },
  spacePriceVal: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 28,
    fontWeight: 700,
    color: VB_INK,
    letterSpacing: '-0.02em',
    lineHeight: 1
  },
  spacePriceCur: { fontSize: 14, fontWeight: 500, color: VB_MUTED },
  spacePriceUnit: { fontSize: 12, color: VB_MUTED, marginTop: 4 },
  spaceBtn: {
    background: VB_INK,
    color: VB_BG,
    border: 'none',
    padding: '10px 16px',
    fontSize: 13,
    fontWeight: 500,
    cursor: 'pointer',
    borderRadius: 999
  },
  spaceBtnDisabled: {
    background: VB_BORDER,
    color: VB_TEXT,
    cursor: 'not-allowed'
  },

  useCases: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '64px 48px 0'
  },
  othersHead: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 48,
    alignItems: 'end',
    paddingBottom: 24,
    borderBottom: `1px solid ${VB_BORDER}`,
    marginBottom: 0
  },
  othersHeadLeft: {},
  othersTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 28,
    fontWeight: 500,
    letterSpacing: '-0.02em',
    lineHeight: 1.1,
    color: VB_INK,
    margin: 0
  },
  othersLead: {
    fontSize: 14,
    lineHeight: 1.55,
    color: VB_MUTED,
    margin: 0,
    maxWidth: 480
  },
  othersGrid: {
    display: 'flex',
    flexDirection: 'column'
  },
  othersRow: {
    display: 'grid',
    gridTemplateColumns: '60px 1fr auto',
    gap: 32,
    alignItems: 'center',
    padding: '24px 0',
    borderBottom: `1px solid ${VB_BORDER}`
  },
  othersNum: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    fontWeight: 600
  },
  othersBody: {
    display: 'grid',
    gridTemplateColumns: '220px 1fr',
    gap: 32,
    alignItems: 'baseline'
  },
  othersRowTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 18,
    fontWeight: 500,
    color: VB_INK,
    margin: 0,
    letterSpacing: '-0.01em'
  },
  othersRowDesc: {
    fontSize: 14,
    color: VB_TEXT,
    lineHeight: 1.5,
    margin: 0
  },
  othersTag: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    whiteSpace: 'nowrap'
  },
  primary: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '0 48px 0'
  },
  primaryHead: {
    paddingBottom: 40,
    borderBottom: `2px solid ${VB_INK}`,
    marginBottom: 32
  },
  primaryHeadInner: {
    display: 'grid',
    gridTemplateColumns: '1.4fr 1fr',
    gap: 64,
    alignItems: 'end'
  },
  primaryLead: {
    fontSize: 16,
    lineHeight: 1.55,
    color: VB_TEXT,
    margin: 0,
    maxWidth: 480
  },
  primaryGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16
  },
  primaryCard: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    padding: 36,
    display: 'flex',
    flexDirection: 'column',
    gap: 14,
    minHeight: 340
  },
  primaryTop: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  primaryNum: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: '#fff',
    background: VB_ACCENT,
    padding: '6px 12px',
    borderRadius: 4,
    letterSpacing: '0.12em',
    fontWeight: 700
  },
  primaryIcon: {
    fontSize: 28
  },
  primaryTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 26,
    fontWeight: 600,
    margin: 0,
    color: VB_INK,
    letterSpacing: '-0.02em',
    lineHeight: 1.1
  },
  primaryKinds: {
    fontSize: 13,
    color: VB_MUTED,
    letterSpacing: '0.02em'
  },
  primaryDesc: {
    fontSize: 14,
    color: VB_TEXT,
    lineHeight: 1.55,
    margin: 0
  },
  primaryPrice: {
    marginTop: 'auto',
    paddingTop: 16,
    borderTop: `1px solid ${VB_BORDER}`,
    display: 'flex',
    alignItems: 'baseline',
    gap: 8
  },
  primaryPriceVal: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 28,
    fontWeight: 700,
    color: VB_INK,
    letterSpacing: '-0.02em'
  },
  primaryPriceUnit: {
    fontSize: 12,
    color: VB_MUTED
  },
  usesGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16
  },
  useCard: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    padding: 28,
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    minHeight: 240,
    position: 'relative'
  },
  useTop: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  useNum: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_ACCENT,
    letterSpacing: '0.1em'
  },
  useEmoji: { fontSize: 24, color: VB_ACCENT, fontFamily: 'serif' },
  useTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 22,
    fontWeight: 600,
    color: VB_INK,
    margin: 0,
    letterSpacing: '-0.02em'
  },
  useDesc: { fontSize: 14, color: VB_TEXT, lineHeight: 1.5, margin: 0 },
  useTag: {
    marginTop: 'auto',
    fontSize: 11,
    color: VB_MUTED,
    letterSpacing: '0.05em',
    paddingTop: 16,
    borderTop: `1px solid ${VB_BORDER}`,
    textTransform: 'uppercase',
    fontWeight: 600
  },

  amenSection: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '96px 48px 0'
  },
  amenLead: {
    fontSize: 16,
    color: VB_TEXT,
    lineHeight: 1.55,
    maxWidth: 480,
    marginTop: 24
  },
  amenGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16,
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    padding: 16
  },
  amenCol: {
    padding: 20
  },
  amenColTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 16,
    fontWeight: 600,
    color: VB_INK,
    marginBottom: 16,
    letterSpacing: '-0.01em'
  },
  amenList: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 },
  amenLi: {
    display: 'flex',
    gap: 10,
    fontSize: 14,
    color: VB_TEXT,
    alignItems: 'center'
  },
  amenCheck: {
    width: 20,
    height: 20,
    borderRadius: '50%',
    background: VB_ACCENT_SOFT,
    color: VB_ACCENT,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontWeight: 700,
    fontSize: 14
  },

  pricing: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '96px 48px 0'
  },
  priceTable: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    overflow: 'hidden'
  },
  priceTableHead: {
    display: 'grid',
    gridTemplateColumns: '2fr 3fr 1fr 1fr',
    gap: 24,
    padding: '16px 24px',
    background: VB_BG,
    borderBottom: `1px solid ${VB_BORDER}`,
    fontSize: 12,
    color: VB_MUTED,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    fontWeight: 600
  },
  priceRow: {
    display: 'grid',
    gridTemplateColumns: '2fr 3fr 1fr 1fr',
    gap: 24,
    padding: '20px 24px',
    borderBottom: `1px solid ${VB_BORDER}`,
    alignItems: 'center'
  },
  priceRowAccent: { background: VB_ACCENT_SOFT },
  priceRowTier: {
    fontSize: 15,
    fontWeight: 600,
    color: VB_INK,
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    flexWrap: 'wrap'
  },
  priceBadge: {
    fontSize: 10,
    padding: '3px 8px',
    background: VB_INK,
    color: VB_BG,
    borderRadius: 999,
    letterSpacing: '0.08em',
    fontWeight: 600
  },
  priceRowDesc: { fontSize: 14, color: VB_TEXT, lineHeight: 1.45 },
  priceRowTime: { fontSize: 14, color: VB_TEXT },
  priceRowPrice: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 18,
    fontWeight: 600,
    color: VB_INK,
    letterSpacing: '-0.02em',
    textAlign: 'right'
  },
  priceFoot: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 16,
    marginTop: 16
  },
  priceFootBlock: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 8,
    padding: 20
  },
  priceFootLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_ACCENT,
    letterSpacing: '0.1em',
    marginBottom: 8
  },
  priceFootVal: { fontSize: 14, color: VB_TEXT, lineHeight: 1.5 },

  location: {
    marginTop: 96,
    padding: '0 48px'
  },
  locInner: {
    maxWidth: 1440,
    margin: '0 auto',
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 12,
    overflow: 'hidden',
    display: 'grid',
    gridTemplateColumns: '1fr 1fr'
  },
  locLeft: {
    padding: 48,
    display: 'flex',
    flexDirection: 'column',
    gap: 24
  },
  locTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(32px, 3.6vw, 48px)',
    fontWeight: 600,
    letterSpacing: '-0.03em',
    lineHeight: 1.05,
    color: VB_INK,
    margin: 0
  },
  locRows: { display: 'flex', flexDirection: 'column' },
  locRow: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: '14px 0',
    borderTop: `1px solid ${VB_BORDER}`,
    fontSize: 14,
    gap: 16
  },
  locL: { color: VB_MUTED },
  locV: { color: VB_INK, fontWeight: 500, textAlign: 'right' },
  locCtas: { display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', marginTop: 8 },
  locRight: { background: VB_BG, minHeight: 480 },
  mapBox: { width: '100%', height: '100%' },

  contact: {
    padding: '96px 48px'
  },
  contactInner: {
    maxWidth: 1440,
    margin: '0 auto'
  },
  contactLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 12,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    marginBottom: 12
  },
  contactTitle: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 'clamp(36px, 4vw, 56px)',
    fontWeight: 600,
    letterSpacing: '-0.03em',
    lineHeight: 1.05,
    color: VB_INK,
    margin: '0 0 48px 0'
  },
  contactGrid: {
    display: 'grid',
    gridTemplateColumns: '2fr 1fr',
    gap: 32
  },
  contactForm: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 12,
    padding: 32,
    display: 'flex',
    flexDirection: 'column',
    gap: 16
  },
  contactRow: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 },
  contactInput: {
    background: VB_BG,
    border: `1px solid ${VB_BORDER}`,
    color: VB_INK,
    fontSize: 15,
    padding: '14px 16px',
    outline: 'none',
    borderRadius: 8
  },
  contactTextarea: {
    background: VB_BG,
    border: `1px solid ${VB_BORDER}`,
    color: VB_INK,
    fontSize: 15,
    padding: '14px 16px',
    outline: 'none',
    borderRadius: 8,
    resize: 'vertical'
  },
  contactSide: { display: 'flex', flexDirection: 'column', gap: 16 },
  contactSideBlock: {
    background: VB_CARD,
    border: `1px solid ${VB_BORDER}`,
    borderRadius: 12,
    padding: 24,
    display: 'flex',
    flexDirection: 'column',
    gap: 8
  },
  contactSideLabel: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    marginBottom: 8
  },
  contactSideLink: {
    fontSize: 15,
    fontWeight: 500,
    color: VB_INK,
    paddingBottom: 4,
    borderBottom: `1px solid transparent`
  },
  contactSideText: { fontSize: 15, color: VB_INK, fontWeight: 500 },
  contactSideTextMute: { fontSize: 13, color: VB_MUTED },

  footer: {
    background: VB_CARD,
    borderTop: `1px solid ${VB_BORDER}`,
    padding: '48px 48px 24px'
  },
  footerTop: {
    display: 'grid',
    gridTemplateColumns: '1fr 1.5fr',
    gap: 48,
    paddingBottom: 48,
    maxWidth: 1440,
    margin: '0 auto'
  },
  footerBrand: {},
  footerMark: {
    fontFamily: '"Unbounded", sans-serif',
    fontSize: 24,
    fontWeight: 700,
    color: VB_INK,
    letterSpacing: '-0.02em'
  },
  footerTag: { fontSize: 14, color: VB_TEXT, lineHeight: 1.5, marginTop: 16 },
  footerCols: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 24
  },
  footerColTitle: {
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 11,
    color: VB_ACCENT,
    letterSpacing: '0.12em',
    marginBottom: 16
  },
  footerLink: {
    display: 'block',
    fontSize: 14,
    color: VB_TEXT,
    padding: '6px 0'
  },
  footerBottom: {
    display: 'flex',
    justifyContent: 'space-between',
    paddingTop: 24,
    borderTop: `1px solid ${VB_BORDER}`,
    fontSize: 12,
    color: VB_MUTED,
    maxWidth: 1440,
    margin: '0 auto',
    flexWrap: 'wrap',
    gap: 16
  }
};

window.VariantB = VariantB;