// SMASH — Landing page sections (Hero, Problem, Steps, Screens, Stats, CTA, Footer)

// ──────────────────────────────────────────────────────────────────────────
// 1. HERO — animated, hover-reactive phone
// ──────────────────────────────────────────────────────────────────────────
function HeroPhone({ tweaks }) {
  const wrapRef = React.useRef(null);
  const tiltRef = React.useRef(null);
  const floatRef = React.useRef(null);
  const [hovering, setHovering] = React.useState(false);

  const tiltMax = tweaks?.tiltMax ?? 18;
  const baseRotZ = tweaks?.baseRotZ ?? -6;
  const floatOn = tweaks?.float ?? true;
  const orbitOn = tweaks?.orbitBall ?? true;
  const floatSpeed = tweaks?.floatSpeed ?? 7;

  // Apply float animation on/off via inline style on the float layer
  React.useEffect(() => {
    if (!floatRef.current) return;
    floatRef.current.style.animation = floatOn ?
    `phoneFloat ${floatSpeed}s ease-in-out infinite` :
    'none';
  }, [floatOn, floatSpeed]);

  // Mouse-tracking 3D tilt — uses requestAnimationFrame to coalesce events
  React.useEffect(() => {
    const wrap = wrapRef.current;
    const tilt = tiltRef.current;
    if (!wrap || !tilt) return;

    let rafId = null;
    let target = { x: 0, y: 0, scale: 1 };
    let current = { x: 0, y: 0, scale: 1 };

    const onMove = (e) => {
      const rect = wrap.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      // -1..1 across the wrap. Clamp at edges.
      const dx = Math.max(-1, Math.min(1, (e.clientX - cx) / (rect.width / 2)));
      const dy = Math.max(-1, Math.min(1, (e.clientY - cy) / (rect.height / 2)));
      // Tilt-Y follows X, Tilt-X is inverted (push top back when mouse goes up)
      target.x = -dy * tiltMax;
      target.y = dx * tiltMax;
      target.scale = 1.04;
    };

    const onEnter = () => {setHovering(true);};
    const onLeave = () => {
      setHovering(false);
      target.x = 0;target.y = 0;target.scale = 1;
    };

    const tick = () => {
      // Lerp toward target for a buttery follow
      const k = hovering ? 0.18 : 0.10;
      current.x += (target.x - current.x) * k;
      current.y += (target.y - current.y) * k;
      current.scale += (target.scale - current.scale) * k;
      tilt.style.setProperty('--tilt-x', current.x.toFixed(2) + 'deg');
      tilt.style.setProperty('--tilt-y', current.y.toFixed(2) + 'deg');
      tilt.style.setProperty('--tilt-scale', current.scale.toFixed(3));
      rafId = requestAnimationFrame(tick);
    };

    wrap.addEventListener('mousemove', onMove);
    wrap.addEventListener('mouseenter', onEnter);
    wrap.addEventListener('mouseleave', onLeave);
    rafId = requestAnimationFrame(tick);
    return () => {
      wrap.removeEventListener('mousemove', onMove);
      wrap.removeEventListener('mouseenter', onEnter);
      wrap.removeEventListener('mouseleave', onLeave);
      if (rafId) cancelAnimationFrame(rafId);
    };
  }, [tiltMax, hovering]);

  // Push base rotation Z + tilt-scale defaults into custom properties whenever
  // tweaks change so CSS picks them up.
  React.useEffect(() => {
    if (!tiltRef.current) return;
    tiltRef.current.style.setProperty('--tilt-base-z', baseRotZ + 'deg');
  }, [baseRotZ]);

  return (
    <div className="hero-phone-wrap reveal d2" ref={wrapRef}>
      {orbitOn && <span className="phone-orbit-ball" />}
      <div className="hero-phone-float" ref={floatRef}>
        <div
          className={'hero-phone-tilt' + (hovering ? ' is-hovering' : '')}
          ref={tiltRef}>
          
          <PhoneStage scale={0.72} rotate={0}>
            <DiscoverScreen nav={() => {}} />
          </PhoneStage>
        </div>
      </div>
    </div>);

}

function HeroSection({ tweaks }) {
  return (
    <section className="hero" id="hero">
      <Nav />
      <SectionDecor variant="hero" />
      <span className="ball b1" />
      <span className="ball b2" />
      <span className="ball b3" />

      {/* Subtle court line decoration */}
      <svg className="hero-court-lines" viewBox="0 0 1440 900" preserveAspectRatio="none">
        <g fill="none" stroke="#9FE1CB" strokeWidth="1">
          <rect x="120" y="120" width="1200" height="660" />
          <line x1="120" y1="450" x2="1320" y2="450" />
          <line x1="720" y1="120" x2="720" y2="780" />
        </g>
      </svg>

      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy reveal">
            <span className="mini-label on-dark">СКОРО · НАЙДИ ДРУЗЕЙ ПО ТЕННИСУ</span>
            <h1 className="hero-headline" style={{ fontFamily: "\"Bebas Neue\"" }}>
              Сыграй<br />
              <span className="accent" style={{ fontFamily: "\"Bebas Neue\"" }}>больше.</span>
            </h1>

            <ol className="hero-steps">
              <li><span className="n">1</span>Найди партнера по теннису в своем районе за 10 минут</li>
              <li><span className="n">2</span>Договорись о матче в 3 тапа</li>
              <li><span className="n">3</span>Расти в рейтинге</li>
            </ol>

            <WaitlistForm variant="dark" ctaLabel="Хочу играть" />
          </div>

          <HeroPhone tweaks={tweaks} />
        </div>
      </div>
    </section>);

}

window.HeroPhone = HeroPhone;

// ──────────────────────────────────────────────────────────────────────────
// 2. PROBLEM
// ──────────────────────────────────────────────────────────────────────────
function ProblemSection() {
  const pains = [
  {
    icon: LandingIcon.calendarX,
    title: 'Партнёр снова отменил.',
    body: <>Постоянных партнёров — 2-3 человека. Один уехал, второй простыл, третий<br />не отвечает. И ты опять не играешь.</>
  },
  {
    icon: LandingIcon.arrowsUpDown,
    title: 'Уровень не совпадает.',
    body: <>С друзьями скучно — они слабее.<br />С тренером дорого. С сильными — унижение. Где найти равных по уровню?</>
  },
  {
    icon: LandingIcon.clockX,
    title: 'Время уходит впустую.',
    body: <>Ракетка лежит. Календарь пустой.<br />А ты хочешь играть три раза в неделю, не два.</>
  }];


  return (
    <section className="light" id="problem">
      <SectionDecor variant="problem" />
      <div className="container">
        <div className="section-head reveal">
          <span className="mini-label">Знакомо?</span>
          <h2 className="display l" style={{ fontFamily: "\"Bebas Neue\"" }}>Каждый теннисист<br /><span className="accent-italic">знает</span> это чувство.</h2>
        </div>

        <div className="grid-3">
          {pains.map((p, i) =>
          <div key={i} className={`card pain-card reveal d${i + 1}`}>
              <div className="icon-wrap">{p.icon(28)}</div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </div>
          )}
        </div>

        <div className="transition-line reveal d4">
          Мы тоже устали от этого. Поэтому делаем <span className="accent">SMASH</span>.
        </div>
      </div>
    </section>);

}

// Ball that flies toward the racquet during the "Как это работает" section
// and bounces off the strings. Driven by section scroll progress.
function HowSectionBall() {
  const sectionRef = React.useRef(null);
  const ballRef = React.useRef(null);
  const racquetRef = React.useRef(null);

  React.useEffect(() => {
    // Find the parent section once the ref is set
    const ball = ballRef.current;
    if (!ball) return;
    const section = ball.closest('section');
    sectionRef.current = section;

    let raf;
    let running = true;
    let curT = 0;          // smoothed progress 0..1
    let tgtT = 0;          // scroll-derived target progress
    let hitFired = false;  // racquet ping fired for the current approach

    const measure = () => {
      const rect = section.getBoundingClientRect();
      const vh = window.innerHeight;
      // 0 when the section first enters from the bottom, 1 when its top has
      // scrolled well past — a monotonic mapping so the ball moves toward
      // the racquet as you scroll DOWN and retreats as you scroll UP.
      const total = rect.height + vh;
      const traveled = vh - rect.top;
      tgtT = Math.max(0, Math.min(1, traveled / total));
    };

    const loop = () => {
      if (!running) return;
      curT += (tgtT - curT) * 0.10;       // smooth follow
      if (Math.abs(tgtT - curT) < 0.0005) curT = tgtT;

      // Map progress → flight path. The ball starts far (upper-left) and
      // travels to the racquet strings as curT goes 0 → 1. Contact zone is
      // the last stretch (curT > ~0.9).
      const e = curT;                      // already eased by lerp
      const x = -150 + 210 * e;            // left → strings
      const y = -260 + 250 * e;            // up → strings
      // Compress against the strings near the end of the approach.
      let scale = 1;
      if (e > 0.88) {
        const c = Math.min(1, (e - 0.88) / 0.12);
        scale = 1 - 0.16 * Math.sin(c * Math.PI);
      }
      ball.style.transform =
        `translate3d(${x.toFixed(1)}px, ${y.toFixed(1)}px, 0) scale(${scale.toFixed(3)})`;

      // Fire the racquet ping once when the ball reaches the strings while
      // scrolling DOWN; re-arm when the ball pulls away (scrolling UP).
      if (curT > 0.9 && !hitFired) {
        hitFired = true;
        const rq = racquetRef.current;
        if (rq) {
          rq.classList.remove('strings-hit');
          void rq.offsetWidth;
          rq.classList.add('strings-hit');
        }
      } else if (curT < 0.78 && hitFired) {
        hitFired = false;
      }

      raf = requestAnimationFrame(loop);
    };

    measure();
    curT = tgtT;
    const onScroll = () => measure();
    const onResize = () => measure();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize, { passive: true });
    raf = requestAnimationFrame(loop);
    return () => {
      running = false;
      if (raf) cancelAnimationFrame(raf);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  // The element wraps both the ball and the racquet-pivot reference so we
  // can absolutely position them in concert near the section's top-right.
  return (
    <div className="how-ball-stage" aria-hidden="true">
      <div className="how-racquet-pivot" ref={racquetRef} />
      <div className="how-ball" ref={ballRef}>
        {Sprite.ball(48)}
      </div>
    </div>
  );
}

window.HowSectionBall = HowSectionBall;

// ──────────────────────────────────────────────────────────────────────────
// 3. HOW IT WORKS (dark)
// ──────────────────────────────────────────────────────────────────────────
function HowItWorksSection() {
  const steps = [
  {
    n: '01',
    title: 'Найди партнёра твоего уровня',
    body: 'Игроки твоего NTRP в твоём районе. Фильтр по уровню, времени, виду игры. От поиска до контакта — 30 секунд.'
  },
  {
    n: '02',
    title: 'Договорись о матче в 3 тапа',
    body: <>Не в чате — структурированно. Время, корт, формат, длительность. Один тап<br />на подтверждение. Никаких «давай как-нибудь сыграем».</>
  },
  {
    n: '03',
    title: 'Расти в рейтинге',
    body: <>Каждый матч — это данные. Видишь,<br />как растёшь в NTRP. Сообщество видит твой прогресс. Теннис становится осмысленным.</>
  }];


  return (
    <section className="dark" id="how">
      <SectionDecor variant="how" />
      <HowSectionBall />
      <div className="container">
        <div className="section-head reveal">
          <span className="mini-label on-dark">Как это работает</span>
          <h2 className="display l on-dark" style={{ fontFamily: "\"Bebas Neue\"" }}>
            Три шага<br />
            до <span className="accent-italic">следующего</span> матча.
          </h2>
        </div>

        <div className="grid-3">
          {steps.map((s, i) =>
          <div key={s.n} className={`card dark step-card reveal d${i + 1}`}>
              <div className="step-num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          )}
        </div>

        {/* Mid-page call-to-action — scrolls to the final waitlist form */}
        <div className="mid-cta-row reveal">
          <a href="#cta" className="mid-cta" onClick={(e) => {
            e.preventDefault();
            const target = document.getElementById('cta');
            if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }}>
            <span className="mid-cta-label">Готов сыграть?</span>
            <span className="mid-cta-arrow">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 5l7 7-7 7" />
              </svg>
            </span>
          </a>
          <span className="mid-cta-aside">Получи доступ первым — летом 2026</span>
        </div>
      </div>
    </section>);
}

// ──────────────────────────────────────────────────────────────────────────
// 3.5 — WHY SMASH? Brand-meaning section with real tennis trivia
// ──────────────────────────────────────────────────────────────────────────
function WhySmashSection() {
  const trivia = [
  {
    num: '263',
    unit: 'км/ч',
    cap: <>Самая быстрая зафиксированная подача<br />в истории. Замах смэша — тот же.</>,
    src: 'Sam Groth · ATP Challenger, 2012'
  },
  {
    num: '~120',
    unit: 'подач',
    cap: <>У профи за обычный трёхсетовый матч.<br />По исследованию US Open.</>,
    src: 'Sports Health, US Open 2013–14'
  },
  {
    num: '1 000+',
    unit: 'ударов',
    cap: 'За неделю турнира Большого Шлема — только подач, без обменов с задней линии.',
    src: 'PMC, 2008'
  }];


  return (
    <section className="ink why-smash" id="why-smash">
      <SectionDecor variant="why" />
      <span className="ball b1" />
      <span className="ball b2" />

      {/* Subtle court line backdrop */}
      <svg className="why-court-lines" viewBox="0 0 1440 600" preserveAspectRatio="none">
        <g fill="none" stroke="#D9F378" strokeWidth="1" opacity="0.08">
          <rect x="120" y="80" width="1200" height="440" />
          <line x1="120" y1="300" x2="1320" y2="300" />
          <line x1="720" y1="80" x2="720" y2="520" />
        </g>
      </svg>

      <div className="container">
        <div className="why-smash-grid">
          <div className="why-smash-copy reveal">
            <span className="mini-label" style={{ color: 'var(--ball-yellow)' }}>ПОЧЕМУ SMASH?

            </span>
            <h2 className="display l on-dark" style={{ fontFamily: '"Bebas Neue"' }}>
              Smash — это удар,<br />после которого<br />нечего возвращать.
            </h2>
            <p className="why-smash-body">Удар сверху, по высокой мяче, в потолок зала. Технически — та же механика, что и подача. Эмоционально — точка
в конце предложения. Мы назвали приложение так, потому что верим: каждый твой матч должен заканчиваться так же — решительно.



            </p>
          </div>

          <div className="why-smash-stat reveal d1">
            <div className="big-stat">
              <span className="big-num"><CountUp value="69" duration={1600} /><span className="pct">%</span></span>
            </div>
            <div className="big-stat-label">
              профессиональных смэшей в&nbsp;мужском теннисе заканчивают розыгрыш — выигрышным мячом или вынужденной ошибкой соперника.
            </div>
            <div className="big-stat-src">
              The Match Charting Project · 3,500+&nbsp;матчей
            </div>
          </div>
        </div>

        <div className="trivia-row reveal d2">
          {trivia.map((t, i) =>
          <div className="trivia" key={i}>
              <div className="trivia-num">
                <CountUp value={t.num} duration={1400 + i * 150} /><span className="trivia-unit">{t.unit}</span>
              </div>
              <div className="trivia-cap">{t.cap}</div>
              <div className="trivia-src">{t.src}</div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

window.WhySmashSection = WhySmashSection;

// ──────────────────────────────────────────────────────────────────────────
// 4. PRODUCT SCREENS
// ──────────────────────────────────────────────────────────────────────────
function ProductScreensSection() {
  const captions = [
  { title: 'Поиск', body: <>Игроки рядом, отфильтрованы<br />по уровню.</> },
  { title: 'Профиль', body: 'История матчей, стиль игры, прогресс.' },
  { title: 'Запись', body: 'Записал счёт — рейтинг обновлён.' }];


  return (
    <section className="light" id="product">
      <SectionDecor variant="product" />
      <div className="container">
        <div className="section-head reveal">
          <span className="mini-label">Продукт</span>
          <h2 className="display l" style={{ fontFamily: "\"Bebas Neue\"" }}>Сделано для тех,<br />кто играет всерьёз.</h2>
          <p className="subhead" style={{ color: 'var(--slate)' }}>iOS-приложение, готовое к запуску.
NTRP-рейтинг, структурированные приглашения на матч, история каждого сыгранного дня.
          </p>
        </div>

        <div className="screens-row">
          <div className="screen-col reveal d1">
            <PhoneStage scale={0.6}>
              <DiscoverScreen nav={() => {}} />
            </PhoneStage>
            <div className="caption">
              <strong>{captions[0].title}</strong>
              {captions[0].body}
            </div>
          </div>
          <div className="screen-col reveal d2">
            <PhoneStage scale={0.6}>
              <PlayerProfileScreen nav={() => {}} playerId="lev" />
            </PhoneStage>
            <div className="caption">
              <strong>{captions[1].title}</strong>
              {captions[1].body}
            </div>
          </div>
          <div className="screen-col reveal d3">
            <PhoneStage scale={0.6}>
              <RecordMatchScreen nav={() => {}} playerId="anton" />
            </PhoneStage>
            <div className="caption">
              <strong>{captions[2].title}</strong>
              {captions[2].body}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────────────────
// CountUp — animates a numeric value from 0 → target the first time the
// element scrolls into view. Doesn't replay on subsequent scrolls.
// Handles SMASH-style values: "500K+", "50K", "237", "0", "69%".
// ──────────────────────────────────────────────────────────────────────────
function CountUp({ value, duration = 1400, className, style }) {
  const ref = React.useRef(null);
  const [display, setDisplay] = React.useState('0');

  // Parse the value into a numeric target + a formatter that re-applies
  // suffixes like K, +, %, etc.
  const parsed = React.useMemo(() => {
    const raw = String(value).trim();
    // Extract sign/prefix, digits, and suffix
    const m = raw.match(/^(~)?\s*([\d\s,]+)\s*([KkMm]?)(\+|%)?$/);
    if (!m) {
      // unparseable — return value as static
      return null;
    }
    const prefix = m[1] || '';
    const digitsRaw = m[2].replace(/\s|,/g, '');
    const num = parseInt(digitsRaw, 10);
    const multSuffix = (m[3] || '').toUpperCase();   // K, M, or ''
    const trail = m[4] || '';                         // + or % or ''
    // The displayed number magnitude. Suffixes K/M reapply at the end.
    return { prefix, target: num, multSuffix, trail };
  }, [value]);

  const format = React.useCallback((n) => {
    if (!parsed) return String(value);
    const rounded = Math.round(n);
    // Re-insert thin space every 3 digits if no K/M suffix used
    let body;
    if (parsed.multSuffix) {
      body = String(rounded);
    } else {
      body = String(rounded).replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
    }
    return `${parsed.prefix}${body}${parsed.multSuffix}${parsed.trail}`;
  }, [parsed, value]);

  React.useEffect(() => {
    if (!parsed) { setDisplay(String(value)); return; }
    const el = ref.current;
    if (!el) return;

    let started = false;
    const start = () => {
      if (started) return;
      started = true;
      const t0 = performance.now();
      const tick = (now) => {
        const t = Math.min(1, (now - t0) / duration);
        // ease-out cubic for a quick, satisfying snap-to-final
        const e = 1 - Math.pow(1 - t, 3);
        setDisplay(format(parsed.target * e));
        if (t < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };

    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          start();
          io.disconnect();
        }
      });
    }, { threshold: 0.45 });
    io.observe(el);
    return () => io.disconnect();
  }, [parsed, duration, format, value]);

  return (
    <span ref={ref} className={className} style={style}>{display}</span>
  );
}

window.CountUp = CountUp;

// ──────────────────────────────────────────────────────────────────────────
// 5. SOCIAL PROOF / STATS
// ──────────────────────────────────────────────────────────────────────────
function SocialProofSection() {
  const stats = [
  { num: '500K+', lbl: 'теннисистов\nв России' },
  { num: '50K', lbl: 'активных\nв Москве' },
  { num: '237', lbl: 'уже в waitlist' },
  { num: '0', lbl: 'аналогов\nв РФ' }];


  return (
    <section className="light" id="proof" style={{ paddingTop: 48, paddingBottom: 120 }}>
      <div className="container">
        <div className="stats-divider reveal" />
        <div className="section-head center reveal">
          <span className="mini-label">Присоединяйся</span>
          <h2 className="display m" style={{ textAlign: 'center', fontFamily: "\"Bebas Neue\"", maxWidth: "720px", width: "100%", borderWidth: "0px", borderStyle: "solid", borderRadius: "0px" }}>
            Москва уже играет в теннис. Тише, чем должна.
          </h2>
        </div>

        <div className="grid-4">
          {stats.map((s, i) =>
          <div key={i} className={`stat reveal d${i + 1}`} style={{ textAlign: 'center' }}>
              <div className="num"><CountUp value={s.num} duration={1400 + i * 120} /></div>
              <div className="lbl" style={{ whiteSpace: 'pre-line' }}>{s.lbl}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────────────────
// 6. FINAL CTA (yellow)
// ──────────────────────────────────────────────────────────────────────────
function FinalCTASection() {
  return (
    <section className="yellow cta-yellow" id="cta">
      <SectionDecor variant="cta" />
      <span className="ball b1" />
      <span className="ball b2" />
      <div className="container">
        <div className="reveal">
          <span className="mini-label on-yellow" style={{ justifyContent: 'center', display: 'inline-flex' }}>
            Waitlist · лето 2026
          </span>
          <h2 className="display on-yellow" style={{ fontFamily: "\"Bebas Neue\"" }}>Время<br />сыграть.</h2>
          <p className="subhead">
            Первые 200 человек получат бесплатный месяц SMASH&nbsp;Pro.
            Без спама — обещаем.
          </p>
        </div>
        <div className="reveal d1" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <WaitlistForm variant="yellow" ctaLabel="Хочу играть" showExtras={true} />
        </div>
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────────────────
// 7. FOOTER
// ──────────────────────────────────────────────────────────────────────────
function FooterSection() {
  return (
    <footer className="ink">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="#hero" className="smash-logo" style={{ textDecoration: 'none', color: 'inherit', cursor: 'pointer' }}>SMASH</a>
            <div className="footer-tagline" style={{ fontFamily: "\"Bebas Neue\"" }}>Сыграй больше.</div>
          </div>

          <div className="footer-col">
            <h4>Связь</h4>
            <a href="mailto:hello@smashapp.ru">hello@smashapp.ru</a>
            <a href="#" target="_blank" rel="noopener">@smash_app · Telegram</a>
          </div>

          <div className="footer-col">
            <h4>Соцсети</h4>
            <a href="#" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginRight: 18 }}>
              {LandingIcon.telegram(18)} smashapp
            </a>
            <a href="#" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginRight: 18 }}>
              {LandingIcon.instagram(18)} smash.app
            </a>
            <a href="#" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              {LandingIcon.x(16)} smashapp
            </a>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© SMASH 2026 · Москва</div>
          <div className="right">
            <a href="#">Конфиденциальность</a>
            <a href="#">Условия</a>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  HeroSection, ProblemSection, HowItWorksSection,
  ProductScreensSection, SocialProofSection, FinalCTASection, FooterSection
});