/* global React, ChromeBlob, ChromeDrop, VideoPH, PhotoPH, MagneticBtn, Arrow, Play, Marquee, TOURS, TESTIMONIALS, useReveal, openBooking */
const { useState: _uState, useEffect: _uEffect, useRef: _uRef } = React;

function HeroVideo() {
  const videoRef = _uRef(null);
  const [muted, setMuted] = _uState(true);
  const [playing, setPlaying] = _uState(true);
  const [showControls, setShowControls] = _uState(false);

  const handleClick = () => {
    const v = videoRef.current;
    if (!v) return;
    if (muted) {
      // first click — unmute + show controls
      v.muted = false;
      setMuted(false);
      setShowControls(true);
    } else {
      // subsequent clicks — toggle play/pause
      if (v.paused) { v.play(); setPlaying(true); }
      else { v.pause(); setPlaying(false); }
    }
  };

  return (
    <div
      onClick={handleClick}
      className="hero-video-container"
      style={{ position: 'relative', width: '100%', borderRadius: 'var(--radius)', overflow: 'hidden', cursor: 'pointer',
        aspectRatio: '9/16', background: '#000',
        boxShadow: '0 40px 80px -20px rgba(0,0,0,.7)',
        border: '1px solid var(--line-strong)',
      }}
    >
      <video
        ref={videoRef}
        src="/IMG_0750.MP4"
        autoPlay
        muted
        loop
        playsInline
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
      />

      {/* gradient overlay bottom */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%)', pointerEvents: 'none' }} />

      {/* hint tap — показується поки muted */}
      {!showControls && (
        <div style={{
          position: 'absolute', top: 16, right: 16,
          background: 'rgba(0,0,0,.5)', backdropFilter: 'blur(8px)',
          color: '#fff', fontSize: 11, fontFamily: 'JetBrains Mono',
          padding: '6px 12px', borderRadius: 999, letterSpacing: '0.05em',
          pointerEvents: 'none', display: 'flex', alignItems: 'center', gap: 6,
        }}>
          🔇 натисни для звуку
        </div>
      )}

      {/* controls — показуються після першого кліку */}
      {showControls && (
        <div style={{
          position: 'absolute', top: 16, right: 16,
          display: 'flex', gap: 8, alignItems: 'center',
        }}>
          <button
            onClick={e => { e.stopPropagation(); handleClick(); }}
            style={{
              width: 44, height: 44, borderRadius: 999,
              background: 'rgba(255,255,255,.15)', backdropFilter: 'blur(10px)',
              border: '1px solid rgba(255,255,255,.25)',
              color: '#fff', fontSize: 18, cursor: 'pointer',
              display: 'grid', placeItems: 'center',
            }}
          >
            {playing ? '⏸' : '▶'}
          </button>
        </div>
      )}

      {/* bottom caption */}
      <div style={{ position: 'absolute', left: 18, bottom: 18, right: 18, pointerEvents: 'none' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,.6)' }}>Bukovel · 2025</div>
        <div style={{ fontFamily: 'Unbounded', fontSize: 20, fontWeight: 600, color: '#fff', marginTop: 4, lineHeight: 1.2 }}>Літо на одному диханні</div>
      </div>
    </div>
  );
}

function Hero({ onNav }) {
  const heroRef = _uRef(null);
  _uEffect(() => {
    const onMove = (e) => {
      const el = heroRef.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      el.style.setProperty('--mx', x);
      el.style.setProperty('--my', y);
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section className="hero-section" ref={heroRef} style={{ paddingTop: 'clamp(120px, 16vw, 200px)', paddingBottom: 'clamp(40px, 6vw, 80px)', position: 'relative' }}>
      <div className="blob-layer">
        <div style={{ position: 'absolute', right: '-6%', top: '6%', transform: 'translate(calc(var(--mx,0) * -30px), calc(var(--my,0) * -20px))' }}>
          <ChromeBlob shape="knot" size={760} hue={285} />
        </div>
        <div style={{ position: 'absolute', left: '-8%', bottom: '-10%', transform: 'translate(calc(var(--mx,0) * 20px), calc(var(--my,0) * 16px))' }}>
          <ChromeBlob shape="flow" size={520} hue={280} />
        </div>
        <div style={{ position: 'absolute', right: '20%', bottom: '5%' }}>
          <ChromeDrop size={120} hue={288} />
        </div>
      </div>

      <div className="container" style={{ position: 'relative' }}>
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 48, alignItems: 'center' }}>
          <div className="hero-text-col">
            <div className="eyebrow reveal is-in hero-eyebrow"><span>POSITIVE VIBES ONLY</span> · UA / EU · 2026</div>
            <h1 className="h-mega reveal is-in mt-6 hero-title">
              Podorozhi,<br />
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 20 }}>
                <span style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--fg-2)', fontSize: '0.62em' }}>що</span>
                <em style={{ fontStyle: 'italic', fontWeight: 500 }}>змінюють</em>
              </span><br />
              усе.
            </h1>
            <p className="reveal is-in mt-8 hero-desc" style={{ fontSize: 19, color: 'var(--fg-1)', maxWidth: 520, lineHeight: 1.5 }}>
              Закриті тури-події для своїх. Ком'юніті творчих людей та підприємців — там, де кожен на одній хвилі.
            </p>

            <div className="flex gap-4 mt-8 reveal is-in hero-btns" style={{ flexWrap: 'wrap' }}>
              <MagneticBtn className="btn btn-primary" onClick={openBooking}>
                Вирушити з нами <span className="arrow"><Arrow /></span>
              </MagneticBtn>
              <button className="btn btn-ghost" onClick={() => onNav('tour')}>
                <Play size={12} /> Подивитися тур
              </button>
            </div>

            <div className="flex gap-8 mt-16 hero-stats" style={{ borderTop: '1px solid var(--line)', paddingTop: 24, flexWrap: 'wrap' }}>
              <Stat big="10" label="турів проведено" />
              <Stat big="600+" label="учасників у резиденції" />
              <Stat big="4.96" label="середній рейтинг" />
            </div>
          </div>

          <div className="hero-video-wrap reveal is-in" style={{ position: 'relative' }}>
            <HeroVideo />
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ big, label }) {
  return (
    <div>
      <div className="stat-number" style={{ fontFamily: 'Unbounded', fontSize: 42, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1 }}>{big}</div>
      <div className="mono stat-label" style={{ fontSize: 11, color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: 0.1, marginTop: 8 }}>{label}</div>
    </div>
  );
}

function MarqueeBar() {
  return (
    <div style={{ padding: '20px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <Marquee items={['COMMUNITY FIRST', 'CLOSED TOURS', 'POSITIVE VIBES ONLY', 'UKRAINE · EUROPE', '600+ RESIDENTS', 'SINCE 2022']} />
    </div>
  );
}

function ToursCalendar({ onOpen }) {
  return (
    <section id="tours">
      <div className="container">
        <div className="flex between tours-header" style={{ alignItems: 'end', flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div className="eyebrow reveal">БЛОК 02 · CALENDAR</div>
            <h2 className="h-xl reveal mt-6">Куди ми їдемо<br /><em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--violet-soft)' }}>далі?</em></h2>
          </div>
          <p className="reveal" style={{ maxWidth: 420, color: 'var(--fg-1)' }}>
            Обирай напрямок та бронюй — зазвичай місця розлітаються за 48 годин. Нижче всі тури сезону.
          </p>
        </div>

        <div className="grid mt-16 tours-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
          {TOURS.map((t, i) => <TourCard key={t.id} t={t} onOpen={onOpen} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

function TourCard({ t, onOpen, idx }) {
  const statusClass = t.status === 'sold' ? 'sold' : t.status === 'open' ? 'open' : 'soon';
  const statusLabel = t.status === 'sold' ? 'Місць немає' : t.status === 'open' ? 'Відкрито набір' : 'Скоро';
  return (
    <div className="card reveal" style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 16, height: '100%', transition: 'transform .4s var(--ease), border-color .3s var(--ease)' }}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-6px)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = ''}
    >
      <div style={{ position: 'relative' }}>
        <PhotoPH label={`${t.tag} · ${t.title.toUpperCase()}`} hue={t.hue} src={t.image || null} />
        <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', gap: 8 }}>
          <span className={`pill ${statusClass}`}><span className="dot" /> {statusLabel}</span>
        </div>
        <div style={{ position: 'absolute', top: 14, right: 14 }}>
          <span className="pill">{t.tag}</span>
        </div>
      </div>
      <div style={{ flex: 1 }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', letterSpacing: 0.12, textTransform: 'uppercase' }}>{t.month} · {t.dates}</div>
        <h3 className="h-md mt-2">{t.title}<span style={{ color: 'var(--fg-2)', fontWeight: 400 }}> · {t.subtitle}</span></h3>
        <p className="mt-4" style={{ color: 'var(--fg-2)', fontSize: 14 }}>{t.short}</p>
      </div>
      <div style={{ borderTop: '1px solid var(--line)', paddingTop: 16, marginTop: 'auto', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 12 }}>
        <span className="mono" style={{ fontSize: 13 }}>{t.price}</span>
        <button className="btn btn-ghost" onClick={() => onOpen(t.id)} style={{ padding: '10px 16px', fontSize: 13, whiteSpace: 'nowrap' }}>
          {t.status === 'soon' ? 'Дізнатись першим' : 'Детальніше'} <Arrow size={12} />
        </button>
      </div>
    </div>
  );
}

function MultiExperience() {
  const [active, setActive] = _uState(0);
  const zones = [
    { title: 'Денний чил\n& Pool Parties', tag: 'CHILL', text: 'Естетика розслабленого відпочинку. Починаємо день біля басейну з освіжаючими коктейлями. Неспішно спілкуємося та ловимо теплий, легкий вайб під правильну музику в колі своїх.', hue: 275, label: 'POOL · WELCOME DRINKS · SOFT HOUSE' },
    { title: 'Активний туризм\n& екстрим', tag: 'DRIVE', text: 'Для тих, кому потрібен драйв. Підкорюємо вершини, катаємося на квадроциклах, стрибаємо з парапланом та сплавляємося гірськими річками. Заряджаємося емоціями на все життя.', hue: 298, label: 'MOUNTAINS · QUAD · PARAGLIDING' },
    { title: 'Легендарні\nвечірки', tag: 'NIGHT', text: 'Багато учасників кажуть, що наші нічні тусовки — це реальне втілення "Project X". Якісне світло, звук, повна свобода, танці до ранку та енергія, яка збиває з ніг.', hue: 310, label: 'DJ SET · OPEN AIR · UNTIL SUNRISE' },
  ];

  return (
    <section style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="exp-header" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end' }}>
          <div>
            <div className="eyebrow reveal">БЛОК 03 · MULTI-EXPERIENCE</div>
            <h2 className="h-xl reveal mt-6">Свобода бути<br /><em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--violet-soft)' }}>собою.</em></h2>
          </div>
          <p className="reveal" style={{ color: 'var(--fg-1)', maxWidth: 480 }}>
            У наших турах немає нудьги та зобов'язань. Кожен на 100% залучений, але сам обирає сценарій на день — від тотального релаксу до драйву.
          </p>
        </div>

        <div className="mt-16 exp-zones" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, height: 'clamp(420px, 50vw, 560px)' }}>
          {zones.map((z, i) => (
            <div key={i}
              className={`exp-zone${active === i ? ' exp-zone-active' : ''}`}
              onMouseEnter={() => setActive(i)}
              onClick={() => setActive(i)}
              style={{
                position: 'relative',
                borderRadius: 'var(--radius-lg)',
                overflow: 'hidden',
                flex: active === i ? '2.2' : '1',
                transition: 'flex .6s var(--ease)',
                cursor: 'pointer',
              }}>
              <VideoPH label={z.label} aspect="auto" style={{ position: 'absolute', inset: 0, borderRadius: 'var(--radius-lg)' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(5,5,8,.92) 100%)', zIndex: 2 }} />
              <div style={{ position: 'relative', zIndex: 3, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 28, color: '#fff' }}>
                <div className="flex between">
                  <span className="pill" style={{ background: 'rgba(255,255,255,.12)', border: '1px solid rgba(255,255,255,.2)', color: '#fff' }}>0{i+1} · {z.tag}</span>
                  <span style={{ width: 10, height: 10, borderRadius: 999, background: active === i ? 'var(--violet)' : 'rgba(255,255,255,.3)', boxShadow: active === i ? '0 0 20px var(--violet)' : 'none' }} />
                </div>
                <div>
                  <h3 style={{ fontFamily: 'Unbounded', fontSize: active === i ? 'clamp(32px, 3.4vw, 52px)' : 'clamp(22px, 2vw, 30px)', fontWeight: 700, lineHeight: 1, letterSpacing: '-0.03em', whiteSpace: 'pre-line', transition: 'font-size .6s var(--ease)' }}>{z.title}</h3>
                  <p style={{ color: 'rgba(255,255,255,.78)', fontSize: 14, marginTop: 16, maxWidth: 420, maxHeight: active === i ? 180 : 0, overflow: 'hidden', transition: 'max-height .6s var(--ease), margin-top .4s var(--ease)', marginTop: active === i ? 16 : 0 }}>
                    {active === i && z.text}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Community() {
  return (
    <section>
      <div className="container">
        <div className="community-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center' }}>
          <div className="community-photos" style={{ position: 'relative' }}>
            <PhotoPH label="COMMUNITY · WELCOME CIRCLE" hue={285} tall style={{ transform: 'rotate(-2deg)' }} />
            <div style={{ position: 'absolute', right: -24, bottom: 40, width: '60%' }}>
              <PhotoPH label="ONLINE · PRE-TOUR CALL" hue={298} style={{ transform: 'rotate(4deg)', border: '1px solid var(--line-strong)' }} />
            </div>
            <div style={{ position: 'absolute', left: -32, top: 40 }}>
              <ChromeDrop size={100} hue={290} />
            </div>
          </div>
          <div>
            <div className="eyebrow reveal">БЛОК 04 · КОМ'ЮНІТІ</div>
            <h2 className="h-xl reveal mt-6">Тільки<br /><em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--violet-soft)' }}>свої</em> люди.</h2>
            <p className="reveal mt-8" style={{ fontSize: 17, color: 'var(--fg-1)', maxWidth: 540, lineHeight: 1.6 }}>
              Секрет нашої атмосфери — ком'юніті, де повністю виключений негатив. Перед туром ми проводимо тепле онлайн-знайомство: просто спілкуємося, щоб переконатися, що збігаємося за цінностями.
            </p>
            <p className="reveal mt-4" style={{ fontSize: 15, color: 'var(--fg-2)', maxWidth: 540 }}>
              У результаті ти приїжджаєш у готель до незнайомців, а вже за годину відчуваєш, що відпочиваєш із найкращими друзями.
            </p>
            <div className="mt-8 reveal community-steps" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {[
                ['01', 'Заявка'],
                ['02', 'Онлайн-знайомство'],
                ['03', 'Підтвердження'],
              ].map(([n, l]) => (
                <div key={n} className="card" style={{ padding: 16 }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--violet-soft)' }}>ETAP · {n}</div>
                  <div style={{ fontFamily: 'Unbounded', fontWeight: 600, marginTop: 8, fontSize: 13 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Story() {
  return (
    <section style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="flex between" style={{ alignItems: 'end', flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div className="eyebrow reveal">БЛОК 05 · ЗАСНОВНИКИ</div>
            <h2 className="h-xl reveal mt-6">Усе почалося з<br /><em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--violet-soft)' }}>кохання.</em></h2>
          </div>
          <p className="reveal" style={{ color: 'var(--fg-1)', maxWidth: 460 }}>
            Діма (DJ Чирик) та Віка (DJ Little Vx) — засновники, які самі познайомилися на своєму другому турі. Ми створюємо простір, де люди знаходять близьких по духу, партнерів та своє кохання.
          </p>
        </div>

        <div className="grid mt-16 story-grid" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 20 }}>
          <VideoPH label="ABOUT US · 01:40" aspect="16 / 10">
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', zIndex: 2 }}>
              <button style={{ width: 92, height: 92, borderRadius: 999, background: 'rgba(255,255,255,.95)', color: '#0a0a0d', display: 'grid', placeItems: 'center', boxShadow: '0 20px 60px rgba(0,0,0,.5)' }}>
                <Play size={26} />
              </button>
            </div>
            <div style={{ position: 'absolute', bottom: 24, left: 24, color: '#fff', zIndex: 2 }}>
              <div className="mono" style={{ fontSize: 11, opacity: .7, letterSpacing: 0.12, textTransform: 'uppercase' }}>The story of Positive Vibes</div>
              <div style={{ fontFamily: 'Unbounded', fontSize: 28, fontWeight: 700, marginTop: 6 }}>Ми — головний кейс наших турів.</div>
            </div>
          </VideoPH>

          <div className="stack gap-3 story-team">
            {[
              { name: 'Діма · DJ Чирик', role: 'Співзасновник · Music Director' },
              { name: 'Віка · DJ Little Vx', role: 'Співзасновниця · Vibe & Program' },
              { name: 'Ілля', role: 'Вайб-менеджер' },
              { name: 'Духовні наставники', role: 'Йога · Медитація · Ліла' },
              { name: 'Ведучий + Відеограф', role: 'Ритм та відео-історія туру' },
            ].map((p, i) => (
              <div key={i} className="card" style={{ padding: 16, display: 'flex', gap: 14, alignItems: 'center' }}>
                <PhotoPH label={`0${i+1}`} hue={280 + i * 5} style={{ width: 64, height: 64, aspectRatio: '1/1', borderRadius: 14, flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'Unbounded', fontWeight: 600, fontSize: 15 }}>{p.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 2 }}>{p.role}</div>
                </div>
                <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>0{i+1}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function MusicDNA() {
  return (
    <section>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', right: '-8%', top: '10%', opacity: .9 }}>
          <ChromeBlob shape="wave" size={420} hue={285} />
        </div>
        <div className="eyebrow reveal">БЛОК 06 · SOUND IS DNA</div>
        <h2 className="h-xl reveal mt-6" style={{ maxWidth: 900 }}>
          Звук, що<br />
          <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--violet-soft)' }}>об'єднує.</em>
        </h2>

        <div className="grid mt-16 music-grid" style={{ gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'center' }}>
          <div className="card" style={{ padding: 28, position: 'relative', overflow: 'hidden', background: 'linear-gradient(135deg, var(--bg-card) 0%, rgba(140,90,255,.08) 100%)' }}>
            <div className="flex between center">
              <div className="pill violet">СПЕЦГІСТЬ СЕЗОНУ</div>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)' }}>NOW PLAYING</span>
            </div>
            <div style={{ display: 'flex', gap: 20, alignItems: 'center', marginTop: 24 }}>
              <PhotoPH label="DJ KANTIK" hue={288} style={{ width: 120, height: 120, aspectRatio: '1/1', borderRadius: 16, flexShrink: 0 }} />
              <div>
                <div style={{ fontFamily: 'Unbounded', fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em' }}>Zaman Zaman</div>
                <div style={{ color: 'var(--fg-2)', marginTop: 4 }}>DJ Kantik · гімн Positive Vibes</div>
              </div>
            </div>
            <Waveform />
            <p className="mt-8" style={{ color: 'var(--fg-1)', fontSize: 15 }}>
              Трек, що став для нас якорем — повертає у найкращі моменти літа. DJ Kantik приєднається до нас цього сезону.
            </p>
          </div>
          <div>
            <p style={{ fontSize: 17, color: 'var(--fg-1)', lineHeight: 1.6 }}>
              Музика задає пульс кожному дню в турі. Ми не тільки граємо самі, але й привозимо крутих гостей.
            </p>
            <div className="mt-8 stack gap-3">
              {[
                ['DJ Чирик', 'House · Progressive · Резидент'],
                ['DJ Little Vx', 'Melodic · Indie Dance · Резидент'],
                ['DJ Kantik', 'Special Guest · Серпень 2026'],
                ['Secret Guest', 'TBA · Барселона, жовтень'],
              ].map(([n, d], i) => (
                <div key={i} className="flex between center" style={{ padding: '14px 0', borderBottom: '1px solid var(--line)' }}>
                  <div>
                    <div style={{ fontFamily: 'Unbounded', fontWeight: 600 }}>{n}</div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 4, letterSpacing: 0.1 }}>{d}</div>
                  </div>
                  <span style={{ width: 32, height: 32, borderRadius: 999, border: '1px solid var(--line-strong)', display: 'grid', placeItems: 'center' }}>
                    <Play size={11} />
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Waveform() {
  const bars = 48;
  return (
    <div className="waveform-bars" style={{ display: 'flex', alignItems: 'center', gap: 3, height: 56, marginTop: 24 }}>
      {Array.from({ length: bars }).map((_, i) => {
        const h = 15 + Math.abs(Math.sin(i * 0.9) * 40) + (i > 18 && i < 28 ? 15 : 0);
        const active = i < 18;
        return <div key={i} style={{
          width: 3, height: h + '%',
          background: active ? 'var(--violet)' : 'var(--line-strong)',
          borderRadius: 2,
          animation: active ? `wfBar${i % 4} ${1.2 + (i % 3) * .2}s ease-in-out infinite` : 'none',
        }} />;
      })}
      <style>{`
        @keyframes wfBar0 { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1.2); } }
        @keyframes wfBar1 { 0%,100% { transform: scaleY(.9); } 50% { transform: scaleY(.4); } }
        @keyframes wfBar2 { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1.1); } }
        @keyframes wfBar3 { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.7); } }
      `}</style>
    </div>
  );
}

function Scale() {
  return (
    <section style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="flex between" style={{ flexWrap: 'wrap', gap: 24, alignItems: 'end' }}>
          <div>
            <div className="eyebrow reveal">БЛОК 07 · SCALE</div>
            <h2 className="h-xl reveal mt-6">Сім'я, яка<br /><em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--violet-soft)' }}>зростає.</em></h2>
          </div>
          <p className="reveal" style={{ maxWidth: 440, color: 'var(--fg-1)' }}>
            Почали з камерних виїздів на 28 людей — тепер закриваємо під себе готелі на 100 учасників у Карпатах, робимо яхт-party у Барселоні та готуємо Амстердам.
          </p>
        </div>

        <div className="grid mt-16 scale-stats-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            ['10', 'турів проведено'],
            ['100', 'макс. у заїзді'],
            ['5-6x', 'учасники вертаються'],
            ['12', 'країн амбасадорів'],
          ].map(([b, l], i) => (
            <div key={i} className="card reveal" style={{ padding: 24 }}>
              <div className="scale-big" style={{ fontFamily: 'Unbounded', fontSize: 'clamp(48px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1 }}>{b}</div>
              <div className="mt-4 mono" style={{ fontSize: 11, color: 'var(--fg-2)', letterSpacing: 0.1, textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>

        <div className="mt-16">
          <div className="flex between center mb-4" style={{ marginBottom: 16 }}>
            <h3 className="h-md">Відгуки резидентів</h3>
            <span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)' }}>живі відео</span>
          </div>
          <div className="grid testimonials-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {TESTIMONIALS.map((t, i) => (
              <div key={i} className="card reveal" style={{ padding: 0, overflow: 'hidden' }}>
                <VideoPH label={`RESIDENT · 0${i+1}`} aspect="3 / 4" style={{ borderRadius: 0 }} />
                <div style={{ padding: 18 }}>
                  <p style={{ fontSize: 14, color: 'var(--fg-1)', lineHeight: 1.45 }}>"{t.text}"</p>
                  <div className="mt-6" style={{ fontFamily: 'Unbounded', fontWeight: 600, fontSize: 13 }}>{t.name}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-2)', letterSpacing: 0.12, marginTop: 4 }}>{t.role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function VideoHub() {
  const hubs = [
    { t: 'Як це було', d: 'Головні хайлайти минулих поїздок', hue: 278 },
    { t: 'За лаштунками', d: 'Підготовка, фан та робота команди', hue: 288 },
    { t: 'Галерея вайбу', d: 'Естетика, краса локацій, емоції', hue: 295 },
    { t: 'Очима учасників', d: 'Щирі сторіз та Reels від резидентів', hue: 305 },
  ];
  return (
    <section>
      <div className="container">
        <div className="flex between" style={{ flexWrap: 'wrap', alignItems: 'end', gap: 24 }}>
          <div>
            <div className="eyebrow reveal">БЛОК 08 · VIDEO HUB</div>
            <h2 className="h-xl reveal mt-6">Positive Vibes<br /><em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--violet-soft)' }}>у моменті.</em></h2>
          </div>
          <p className="reveal" style={{ maxWidth: 400, color: 'var(--fg-1)' }}>
            Поринь у нашу атмосферу просто зараз — контент тягнеться з нашого Instagram в реальному часі.
          </p>
        </div>
        <div className="grid mt-16 videohub-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {hubs.map((h, i) => (
            <div key={i} className="reveal videohub-item" style={{ position: 'relative', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
              <VideoPH label={`IG · @positivevibes · 0${i+1}`} aspect="9 / 16" style={{ borderRadius: 'var(--radius)' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(5,5,8,.9) 100%)', zIndex: 2 }} />
              <div style={{ position: 'absolute', left: 16, right: 16, bottom: 16, zIndex: 3, color: '#fff' }}>
                <div style={{ fontFamily: 'Unbounded', fontWeight: 700, fontSize: 18 }}>{h.t}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,.7)', marginTop: 4 }}>{h.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ onNav }) {
  const [form, setForm] = _uState({ name: '', telegram: '', instagram: '' });
  const [sent, setSent] = _uState(false);

  return (
    <section id="contact" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)', paddingBottom: 40 }}>
      <div className="container">
        <div className="footer-main" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'start' }}>
          <div>
            <div className="eyebrow">БЛОК 09 · LET'S GO</div>
            <h2 className="h-mega mt-6" style={{ fontSize: 'clamp(48px, 6vw, 96px)' }}>Готовий<br />до найкращих<br /><em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--violet-soft)' }}>вихідних?</em></h2>
            <p className="mt-8" style={{ color: 'var(--fg-1)', maxWidth: 500, fontSize: 17 }}>
              Залиш заявку на коротке знайомство. Ми зв'яжемося, розповімо деталі та підберемо ідеальний тур.
            </p>
          </div>

          <div className="card" style={{ padding: 28 }}>
            {!sent ? (
              <>
                <div className="mono" style={{ fontSize: 11, color: 'var(--violet-soft)', letterSpacing: 0.12 }}>ФОРМА ЗНАЙОМСТВА · 03 ПОЛЯ</div>
                <h3 className="h-md mt-4">Залишай заявку</h3>
                <div className="stack gap-4 mt-8">
                  <Field label="Твоє ім'я" value={form.name} onChange={v => setForm({ ...form, name: v })} placeholder="Анна" />
                  <Field label="Telegram" value={form.telegram} onChange={v => setForm({ ...form, telegram: v })} placeholder="@username" />
                  <Field label="Instagram" value={form.instagram} onChange={v => setForm({ ...form, instagram: v })} placeholder="@username" />
                </div>
                <button
                  className="btn btn-primary mt-6"
                  style={{ width: '100%', justifyContent: 'center' }}
                  disabled={!form.name}
                  onClick={() => setSent(true)}>
                  Хочу з вами <span className="arrow"><Arrow /></span>
                </button>
              </>
            ) : (
              <div style={{ textAlign: 'center', padding: '20px 0' }}>
                <div style={{ width: 64, height: 64, borderRadius: 999, background: 'var(--violet)', display: 'grid', placeItems: 'center', margin: '0 auto' }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3"><path d="M5 12l5 5L20 7" strokeLinecap="round" /></svg>
                </div>
                <h3 className="h-md mt-6">Дякуємо, {form.name}!</h3>
                <p className="mt-4" style={{ color: 'var(--fg-2)' }}>Напишемо тобі в Telegram протягом 24 годин.</p>
              </div>
            )}
          </div>
        </div>

        <div className="mt-24 footer-bottom-grid" style={{ borderTop: '1px solid var(--line)', paddingTop: 32, display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 40 }}>
          <div className="footer-brand">
            <div className="flex gap-3 center" style={{ alignItems: 'center' }}>
              <div className="logo-mark">PV</div>
              <div style={{ fontFamily: 'Unbounded', fontWeight: 700 }}>POSITIVE VIBES ONLY</div>
            </div>
            <p className="mt-6" style={{ fontSize: 13, color: 'var(--fg-2)', maxWidth: 320 }}>
              Закриті тури-події для своїх. Створюємо простір, де люди знаходять близьких по духу.
            </p>
          </div>
          <FootCol title="Навігація" items={['Тури', 'Multi-Experience', 'Про нас', 'Відгуки']} />
          <FootCol title="Instagram" items={['@positivevibes.tours', '@dj_chyryk', '@djlittlevx']} />
          <FootCol title="Контакт" items={['hello@positivevibes.tours', '+380 (67) 000-00-00', 'Telegram @pvtours_bot']} />
        </div>
        <div className="mt-12 flex between footer-copy" style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--fg-3)', letterSpacing: 0.12, textTransform: 'uppercase' }}>
          <div>© 2026 Positive Vibes Only · All tours are a movement</div>
          <div>UA · EU · TR · NL</div>
        </div>
      </div>
    </section>
  );
}

function FootCol({ title, items }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: 0.12, textTransform: 'uppercase' }}>{title}</div>
      <div className="stack gap-3 mt-6">
        {items.map((i, k) => <a key={k} href="#" style={{ fontSize: 14, color: 'var(--fg-1)' }}>{i}</a>)}
      </div>
    </div>
  );
}

function Field({ label, value, onChange, placeholder }) {
  return (
    <label style={{ display: 'block' }}>
      <span className="mono" style={{ fontSize: 10, color: 'var(--fg-2)', letterSpacing: 0.12, textTransform: 'uppercase', display: 'block', marginBottom: 8 }}>{label}</span>
      <input
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          width: '100%', padding: '14px 16px',
          background: 'var(--input-bg)',
          border: '1px solid var(--line-strong)',
          borderRadius: 12,
          color: 'var(--fg)',
          fontSize: 15, fontFamily: 'inherit',
          outline: 'none',
          transition: 'border-color .2s',
        }}
        onFocus={e => e.target.style.borderColor = 'var(--violet)'}
        onBlur={e => e.target.style.borderColor = 'var(--line-strong)'}
      />
    </label>
  );
}

function HomePage({ onNav }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="page-fade">
      <Hero onNav={onNav} />
      <MarqueeBar />
      <ToursCalendar onOpen={(id) => onNav('tour', id)} />
      <MultiExperience />
      <Community />
      <Story />
      <MusicDNA />
      <Scale />
      <VideoHub />
      <Footer onNav={onNav} />
    </div>
  );
}

Object.assign(window, { HomePage });