// shark service — page sections
const { useState: useS, useEffect: useE } = React;

const INDEX_URL = "index.html";
const COFFEE_URL = "coffee.html";
const LOGO_SRC = "components/logo.png";

function LogoMark() {
  return (
    <span className="logo-mark">
      <img src={LOGO_SRC} alt="" width="42" height="42" />
    </span>
  );
}

const PHONE_DISPLAY = "+375 (44) 527-28-27";
const PHONE_HREF = "tel:+375445272827";
const TELEGRAM_HREF = "https://t.me/+375445272827";
const VIBER_HREF = "viber://chat?number=%2B375445272827";
const WHATSAPP_HREF = "https://wa.me/375445272827";
const HOURS_DISPLAY = "9.00–22.00 · Без выходных";

const scrollToSection = (id) => {
  const el = document.getElementById(id);
  if (!el) return;
  const run = () => {
    const root = getComputedStyle(document.documentElement);
    const hdr = document.querySelector(".hdr");
    const gap = parseFloat(root.getPropertyValue("--scroll-gap")) || 12;
    const padKeep = parseFloat(root.getPropertyValue("--scroll-pad-keep")) || 20;
    const offset = hdr ? hdr.offsetHeight + gap : 88;
    const padTop = el.classList.contains("section") ? parseFloat(getComputedStyle(el).paddingTop) || 0 : 0;
    const top = el.getBoundingClientRect().top + window.scrollY - offset + padTop - padKeep;
    window.scroll({ top: Math.max(0, top), behavior: "smooth" });
  };
  run();
  requestAnimationFrame(run);
};

/* ---------------- Studio rationale ribbon ---------------- */
function Rationale() {
  const [open, setOpen] = useS(false);
  const refs = [
  { ref: "REF 01 · coffeemachinerepaircenter.com", obj: "Цель — провести посетителя по единой истории сверху вниз.", krs: ["Фиксированный порядок: обещание в герое → эмпатия к проблеме → услуги → процесс → доверие → конверсия.", "Каждый блок отвечает на вопрос, поднятый предыдущим — скролл ощущается как путь.", "Спокойный ритм — одна идея на секцию, без конкуренции за внимание."] },
  { ref: "REF 02 · grajqevci.com", obj: "Цель — сделать «как заказать сервис?» очевидным на любой точке скролла.", krs: ["Постоянная закреплённая шапка с телефоном и кнопкой заявки на каждом экране.", "Полосы CTA повторяются между каждой крупной секцией.", "Доступ к контакту никогда не дальше половины скролла."] },
  { ref: "REF 03 · reliantcoffee.com", obj: "Цель — вплести повторные призывы к контакту между блоками.", krs: ["Тон CTA чередуется (звонок / запись / форма), чтобы повтор не раздражал.", "Акцентные CTA выделяются на нейтральных полосах для мгновенной считываемости.", "Полная форма контакта появляется в середине и снова перед футером."] },
  { ref: "REF 04 · tripleshotservices.com", obj: "Цель — сделать каждую услугу понятной.", krs: ["Каждая услуга: «решаемую проблему» → «что входит» → «что включено».", "Единая анатомия карточки: иконка, заголовок, описание, чек-лист, свой CTA.", "Простой язык и явный список включённого снимают неопределённость."] }];

  return (
    <div className={"rationale" + (open ? " open" : "")}>
      <div className="rationale-bar" onClick={() => setOpen((o) => !o)}>
        <span className="tag"><Icon name="clipboard" size={14} /> Обоснование дизайна</span>
        <span className="label">OKR-анализ 4 референсных сайтов — синтезирован в этот дизайн</span>
        <span className="toggle">{open ? "Скрыть" : "Читать"} <Icon name="chevronD" size={15} /></span>
      </div>
      <div className="rationale-body">
        <div className="rationale-inner">
          <p className="rationale-intro">Перед дизайном каждый референс проанализирован как Цель (что сайт делает хорошо) плюс конкретные Key Results, которые этого достигают. Лучшие Key Results затем объединены: <strong style={{ color: "#fff" }}>нарративная структура</strong> из #1, <strong style={{ color: "#fff" }}>насыщение CTA</strong> из #2 и #3, и <strong style={{ color: "#fff" }}>подробные описания услуг</strong> из #4.</p>
          <div className="okr-grid">
            {refs.map((r) =>
            <div className="okr-card" key={r.ref}>
                <div className="ref">{r.ref}</div>
                <div className="obj">{r.obj}</div>
                <ul>{r.krs.map((k, i) => <li key={i}>{k}</li>)}</ul>
              </div>
            )}
          </div>
          <div className="okr-synth"><strong>Синтез → </strong> Единая направляющая история (REF 1) с доступом к контакту на любой глубине скролла через закреплённую шапку, повторяющиеся полосы и две полные формы (REF 2 и 3), построенная вокруг подробных карточек услуг с чек-листами (REF 4). Доверие строится на гарантиях, сертификации и прозрачности — никогда на отзывах или выдуманной истории, ведь это новый сервис.</div>
        </div>
      </div>
    </div>);

}

/* ---------------- Top contact bar ---------------- */
function TopBar() {
  return (
    <div className="topbar">
      <div className="container topbar-inner topbar-inner--desktop">
        <div className="topbar-left">
          <a className="topbar-phone" href={PHONE_HREF}>
            <Icon name="phone" size={14} /> {PHONE_DISPLAY}
          </a>
          <span className="topbar-loc"><Icon name="mapPin" size={14} /> Обслуживаем Минск и регионы</span>
        </div>
        <div className="topbar-right">
          <span className="topbar-hours"><Icon name="clock" size={14} /> {HOURS_DISPLAY}</span>
          <a href={TELEGRAM_HREF} target="_blank" rel="noopener noreferrer"><Icon name="send" size={14} /> Telegram</a>
          <a href={VIBER_HREF} target="_blank" rel="noopener noreferrer"><Icon name="viber" size={14} /> Viber</a>
          <a href={WHATSAPP_HREF} target="_blank" rel="noopener noreferrer"><Icon name="whatsapp" size={14} /> WhatsApp</a>
        </div>
      </div>
      <div className="container topbar-inner topbar-inner--mobile">
        <a className="topbar-phone" href={PHONE_HREF}>
          <Icon name="phone" size={14} /> {PHONE_DISPLAY}
        </a>
        <span className="topbar-hours"><Icon name="clock" size={14} /> {HOURS_DISPLAY}</span>
      </div>
    </div>);

}

/* ---------------- Header ---------------- */
function Header({ onQuote }) {
  const [scrolled, setScrolled] = useS(false);
  const [menu, setMenu] = useS(false);
  useE(() => {
    const h = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", h);
    return () => window.removeEventListener("scroll", h);
  }, []);
  const links = [["Услуги", "services"], ["Как это работает", "process"], ["Почему Shark Service", "why"], ["Неисправности", "faq"], ["Контакты", "contact"]];
  const go = (id) => {setMenu(false);scrollToSection(id);};
  return (
    <React.Fragment>
      <header className={"hdr" + (scrolled ? " scrolled" : "")}>
        <div className="container hdr-inner">
          <a className="logo" href={INDEX_URL} onClick={(e) => {e.preventDefault();window.scroll({ top: 0, behavior: "smooth" });}}>
            <LogoMark />
            <span className="logo-name">shark<b>service</b><small>Ремонт кофемашин</small></span>
          </a>
          <nav className="nav">
            <a href={COFFEE_URL}>Кофе</a>
            {links.map(([l, id]) => <a key={id} href={"#" + id} onClick={(e) => {e.preventDefault();go(id);}}>{l}</a>)}
          </nav>
          <div className="hdr-actions">
            <a className="hdr-phone" href={PHONE_HREF}><small>Телефон мастера</small><strong>{PHONE_DISPLAY}</strong></a>
            <button className="btn btn-primary" onClick={onQuote}><Icon name="wrench" size={17} /> Заказать расчёт</button>
            <button className="hdr-burger" onClick={() => setMenu(true)} aria-label="Открыть меню"><Icon name="menu" size={22} /></button>
          </div>
        </div>
      </header>
      <div className={"mnav" + (menu ? " open" : "")}>
        <div className="mnav-scrim" onClick={() => setMenu(false)} />
        <div className="mnav-panel">
          <div className="mnav-head">
            <span className="logo-name" style={{ fontSize: 19 }}>shark<b style={{ color: "var(--brand)" }}>service</b></span>
            <button className="icon-btn" onClick={() => setMenu(false)} aria-label="Close"><Icon name="x" size={20} /></button>
          </div>
          <a href={COFFEE_URL}>Кофе</a>
          {links.map(([l, id]) => <a key={id} href={"#" + id} onClick={(e) => {e.preventDefault();go(id);}}>{l}</a>)}
          <button className="btn btn-primary btn-lg" onClick={() => {setMenu(false);onQuote();}}>Заказать бесплатный расчёт</button>
          <a href={PHONE_HREF} style={{ borderBottom: "none", color: "var(--brand)" }}>{PHONE_DISPLAY}</a>
        </div>
      </div>
    </React.Fragment>);

}

/* ---------------- Hero ---------------- */
function Hero({ layout, onQuote }) {
  const heroSub = "Бытовые и профессиональные кофемашины — от домашних до барных. Протекает, слабый напор, не греет или капризничает кофемолка: быстро находим причину и ремонтируем оригинальными деталями с гарантией по договору.";
  const promises = [["building", "Бытовые и профессиональные"], ["award", "Сертифицированные мастера"], ["box", "Оригинальные и OEM-детали"], ["shield", "Гарантия по договору"]];
  const HeroBadges = () =>
    <div className="hero-badges">
      <div className="hero-badge">
        <span className="ico"><Icon name="search" size={20} /></span>
        <div><strong>Бесплатная диагностика</strong><span>Расчёт до начала работ</span></div>
      </div>
      <div className="hero-badge hero-badge--scope">
        <span className="ico"><Icon name="building" size={20} /></span>
        <div><strong>В том числе профессиональные</strong><span>Кофемашины для кафе и ресторанов</span></div>
      </div>
    </div>;
  const Prom = () => <div className="hero-promises">{promises.map(([i, t]) => <span className="chip chip-promise" key={t}><Icon name={i} size={15} /> {t}</span>)}</div>;
  const CTAs = () =>
  <div className="hero-cta">
      <button className="btn btn-primary btn-lg" onClick={onQuote}><Icon name="wrench" size={18} /> Записаться на ремонт</button>
      <a className="hero-callout" href={PHONE_HREF}><small>или позвоните мастеру сейчас</small><strong>{PHONE_DISPLAY}</strong></a>
    </div>;

  if (layout === "bleed") {
    return (
      <section className="hero hero-bleed">
        <div className="hero-bg"><image-slot id="hero-bleed" src="https://images.unsplash.com/photo-1620807773206-49c1f2957417?auto=format&fit=crop&w=1900&q=80" placeholder="Добавьте фото для героя — бариста у кофемашины" fit="cover"></image-slot></div>
        <div className="container hero-inner">
          <div className="hero-panel">
            <p className="eyebrow hero-eyebrow eyebrow-line">Ремонт бытовых и профессиональных кофемашин</p>
            <h1 className="hero-h1">Ваша кофемашина <span className="accent">в руках экспертов</span></h1>
            <p className="hero-sub">{heroSub}</p>
            <CTAs />
            <Prom />
          </div>
        </div>
      </section>);

  }
  return (
    <section className="hero hero-split">
      <div className="container hero-inner">
        <div className="hero-text">
          <p className="eyebrow hero-eyebrow eyebrow-line">Ремонт бытовых и профессиональных кофемашин</p>
          <h1 className="hero-h1">Кофемашина снова <span className="accent">как новая</span></h1>
          <p className="hero-sub">{heroSub}</p>
          <CTAs />
          <Prom />
        </div>
        <div className="hero-media">
          <image-slot id="hero-split" src="https://images.unsplash.com/photo-1620807773206-49c1f2957417?auto=format&fit=crop&w=1200&q=80" style={{ borderRadius: "20px" }} placeholder="Добавьте фото кофемашины / мастера" fit="cover"></image-slot>
          <HeroBadges />
          <div className="hero-rating">
            <strong>от 3 часов</strong><span>Экспресс-ремонт</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- CTA strip ---------------- */
function CtaStrip({ variant, title, text, onQuote, primaryLabel }) {
  return (
    <section className={"ctastrip" + (variant === "amber" ? " amber" : "")}>
      <div className="container ctastrip-inner">
        <div className="ctastrip-text">
          <h3>{title}</h3>
          <p>{text}</p>
        </div>
        <div className="ctastrip-actions">
          <a className="ctastrip-phone" href={PHONE_HREF}><small>Позвоните мастеру</small><strong>{PHONE_DISPLAY}</strong></a>
          <button className="btn btn-on-dark btn-lg" onClick={onQuote}><Icon name="wrench" size={18} /> {primaryLabel || "Записаться на ремонт"}</button>
        </div>
      </div>
    </section>);

}

/* ---------------- Problem / reassurance ---------------- */
function Problem({ onQuote }) {
  return (
    <section className="section" id="problem">
      <div className="container">
        <div className="problem-grid">
          <div>
            <p className="eyebrow eyebrow-line reveal">Кофемашина барахлит?</p>
            <h2 className="reveal" style={{ fontSize: "clamp(28px,3.8vw,40px)", lineHeight: 1.1, letterSpacing: "-0.02em", margin: "14px 0 18px" }}>Находим настоящую причину — и быстро её устраняем.</h2>
            <p className="reveal" style={{ fontSize: 17, color: "var(--fg-2)", lineHeight: 1.6, marginBottom: 24, maxWidth: 480 }}>Кофемашину почти всегда можно спасти. Чаще всего причина простая: накипь, изношенное уплотнение, уставший насос или датчик — и всё это ремонтируется. Мы находим первопричину, а не гадаем, объясняем всё простым языком и возвращаем Вас к отличному кофе.</p>
            <button className="btn btn-ghost reveal" onClick={onQuote}>Расскажите, что не так <Icon name="arrowR" size={17} /></button>
          </div>
          <div className="problem-symptoms reveal">
            {SYMPTOMS.map((s) =>
            <div className="symptom" key={s.t}>
                <span className="ico"><Icon name={s.icon} size={22} /></span>
                <strong>{s.t}</strong>
                <span>{s.d}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- How it works ---------------- */
function HowItWorks({ dark = true }) {
  return (
    <section className={"section " + (dark ? "band-roast" : "band-cream")} id="process">
      <div className="container">
        <div className="section-head center reveal">
          <p className="eyebrow eyebrow-line" style={{ justifyContent: "center" }}>Как это работает</p>
          <h2>Четыре простых шага, без догадок</h2>
          <p></p>
        </div>
        <div className="steps">
          {STEPS.map((s) =>
          <div className="step reveal" key={s.n}>
              <div className="step-line" />
              <div className="step-num">{s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.text}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Services ---------------- */
function Services({ onQuote }) {
  const [inclOpen, setInclOpen] = useS(() => typeof window !== "undefined" && window.matchMedia("(min-width: 769px)").matches);
  useE(() => {
    const mq = window.matchMedia("(min-width: 769px)");
    const sync = () => setInclOpen(mq.matches);
    sync();
    mq.addEventListener("change", sync);
    return () => mq.removeEventListener("change", sync);
  }, []);

  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head reveal">
          <p className="eyebrow eyebrow-line">Что мы ремонтируем и обслуживаем</p>
          <h2>Подробный, честный сервис — для каждого узла машины</h2>
          <p>Каждая услуга ниже точно указывает, что в неё входит и что включено — чтобы Вы точно знали, за что платите, ещё до начала работ.</p>
        </div>
        <div className="svc-grid">
          {SERVICES.map((s) =>
          <article className="svc-card reveal" key={s.id} id={"svc-" + s.id}>
              <div className="svc-media">
                {s.tag && <span className={"chip svc-tagchip " + (s.tag === "Чаще всего заказывают" || s.tag === "Абонемент" ? "chip-amber" : "chip-promise")}>{s.tag}</span>}
                <image-slot id={"svc-" + s.id} src={s.img} placeholder={"Фото — " + s.title} fit="cover"></image-slot>
              </div>
              <div className="svc-body">
                <div className="svc-head">
                  <span className="svc-ico"><Icon name={s.icon} size={26} /></span>
                  <h3>{s.title}</h3>
                </div>
                <p className="svc-desc">{s.desc}</p>
                <p className="svc-solves"><b>Решает:</b> {s.solves}</p>
                <details className="svc-incl-details" open={inclOpen}>
                  <summary className="svc-incl-label">Что включено <span className="svc-incl-count">{s.incl.length}</span></summary>
                  <ul className="svc-incl">
                    {s.incl.map((i) => <li key={i}><Icon name="check" size={15} /> {i}</li>)}
                  </ul>
                </details>
                <div className="svc-foot">
                  <span className="svc-price"><strong>{s.price}</strong><span className="svc-promo">−30% на первое обращение</span></span>
                  <button className="btn btn-primary" onClick={() => onQuote(s.title)}>Заказать услугу</button>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Why us ---------------- */
function WhyUs() {
  return (
    <section className="section band-cream" id="why">
      <div className="container">
        <div className="section-head reveal">
          <p className="eyebrow eyebrow-line">Почему Shark Service</p>
          <h2>Новое имя. Серьёзная квалификация.</h2>
          <p>Мы новый сервис — поэтому завоёвываем доверие честно: гарантиями, сертифицированной экспертизой и полной прозрачностью, а не чужими отзывами.</p>
        </div>
        <div className="why-grid">
          {WHYUS.map((w) =>
          <div className="why-card reveal" key={w.t}>
              <span className="why-ico"><Icon name={w.icon} size={26} /></span>
              <h4>{w.t}</h4>
              <p>{w.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Form section ---------------- */
function FormSection({ id, dark, title, kicker, body, trust, formId }) {
  return (
    <section className={"section form-section" + (dark ? " band-roast" : "")} id={id}>
      <div className="container">
        <div className="form-wrap">
          <div className={"form-aside reveal" + (dark ? " on-dark" : "")}>
            <p className="eyebrow eyebrow-line">{kicker}</p>
            <h2>{title}</h2>
            <p>{body}</p>
            <ul className="form-trust">
              {trust.map((t) => <li key={t}><Icon name="checkCircle" size={20} /> {t}</li>)}
            </ul>
          </div>
          <div className="reveal form-anchor" id={formId + "-form"}><QuoteForm id={formId} /></div>
        </div>
      </div>
    </section>);

}

/* ---------------- Symptoms / diagnose grid ---------------- */
function Faq({ onQuote }) {
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head center reveal">
          <p className="eyebrow eyebrow-line" style={{ justifyContent: "center" }}>ЧАСТЫЕ ПРОБЛЕМЫ</p>
          <h2>Узнайте свою поломку — и что мы с ней сделаем</h2>
          <p>Опишите симптом — а ниже видно, как обычно решается проблема. Точную причину и расчёт мы назовём после бесплатной диагностики.</p>
        </div>
        <div className="dx-grid">
          {DIAGNOSE.map((d, i) =>
          <article className="dx-card reveal" key={i}>
              <h3>{d.t}</h3>
              <p className="dx-line"><b>Симптомы:</b> {d.sym}</p>
              <p className="dx-line"><b>Что делаем:</b> {d.do}</p>
              <button className="dx-go" onClick={() => onQuote && onQuote(d.t)} aria-label={"Записаться: " + d.t}><Icon name="chevronR" size={18} /></button>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Final CTA ---------------- */
function FinalCta({ onQuote }) {
  return (
    <section className="final">
      <div className="final-inner">
        <p className="eyebrow eyebrow-line reveal">Мы готовы, когда и Вы</p>
        <h2 className="reveal">Вернём Вашей кофемашине идеальный вкус.</h2>
        <p className="reveal">Бесплатная диагностика, расчёт до начала работ, оригинальные детали и гарантия по договору. Запишитесь онлайн за две минуты или позвоните мастеру прямо сейчас.</p>
        <div className="final-cta reveal">
          <button className="btn btn-primary btn-lg" onClick={() => onQuote()}><Icon name="wrench" size={18} /> Записаться на ремонт</button>
          <a className="btn btn-on-dark btn-lg" href={PHONE_HREF}><Icon name="phone" size={18} /> {PHONE_DISPLAY}</a>
        </div>
      </div>
    </section>);

}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer className="ft">
      <div className="container">
        <div className="ft-top">
          <div className="ft-brand">
            <span className="logo">
              <LogoMark />
              <span className="logo-name" style={{ color: "#fff" }}>shark<b style={{ color: "var(--brand)" }}>service</b></span>
            </span>
            <p>Специализированный ремонт и обслуживание кофемашин для дома, кафе, офисов и ресторанов. Сертифицированные мастера, оригинальные детали, честные цены.</p>
            <div className="ft-social">
              <a href={TELEGRAM_HREF} target="_blank" rel="noopener noreferrer" aria-label="Telegram"><Icon name="send" size={19} /></a>
              <a href={VIBER_HREF} target="_blank" rel="noopener noreferrer" aria-label="Viber"><Icon name="viber" size={19} /></a>
              <a href={WHATSAPP_HREF} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><Icon name="whatsapp" size={19} /></a>
              <a href="#" aria-label="Instagram"><Icon name="instagram" size={19} /></a>
              <a href={PHONE_HREF} aria-label="Phone"><Icon name="phone" size={19} /></a>
            </div>
          </div>
          <div className="ft-col">
            <h5>Услуги</h5>
            {SERVICES.slice(0, 6).map((s) => <a key={s.id} href={"#svc-" + s.id} onClick={(e) => {e.preventDefault();scrollToSection("svc-" + s.id);}}>{s.title}</a>)}
          </div>
          <div className="ft-col">
            <h5>Компания</h5>
            <a href="#process" onClick={(e) => {e.preventDefault();scrollToSection("process");}}>Как это работает</a>
            <a href="#why" onClick={(e) => {e.preventDefault();scrollToSection("why");}}>Почему Shark Service</a>
            <a href="#faq" onClick={(e) => {e.preventDefault();scrollToSection("faq");}}>Частые неисправности</a>
            <a href="#mid-form" onClick={(e) => {e.preventDefault();scrollToSection("mid-form");}}>Записаться на ремонт</a>
            <a href={COFFEE_URL}>Продажа кофе</a>
            <a href="#">Договоры для бизнеса</a>
          </div>
          <div className="ft-col">
            <h5>Связаться</h5>
            <div className="ft-contact-line"><Icon name="phone" size={18} /><div><strong>{PHONE_DISPLAY}</strong><span>Звонок и Telegram</span></div></div>
            <div className="ft-contact-line"><Icon name="clock" size={18} /><div><strong>9.00–22.00</strong><span>Без выходных</span></div></div>
            <div className="ft-contact-line"><Icon name="mail" size={18} /><div><strong>oooscaleup@gmail.com</strong><span>Отвечаем в течение одного рабочего дня</span></div></div>
            <div className="ft-contact-line"><Icon name="mapPin" size={18} /><div><strong>г. Минск, ул. Володько, 24А, пом. 411</strong><span>Минск, регионы и вся Беларусь</span></div></div>
          </div>
        </div>
      </div>
      <div className="ft-bottom">
        <div className="container ft-req">ООО «СкалАП» · УНП 193990824 · 220007, Республика Беларусь, г. Минск, ул. Володько, 24А, пом. 411 · р/с BY18MTBK30120001093300138263 в ЗАО «МТБанк», г. Минск, ул. Толстого, 10, БИК MTBKBY22

        </div>
        <div className="container ft-bottom-inner">
          <span>© 2026 Shark Service — ремонт кофемашин. Все права защищены.</span>
          <span className="ft-bottom-links"><a href="#">Конфиденциальность</a><a href="#">Условия</a><a href="#">Гарантия</a></span>
        </div>
      </div>
    </footer>);

}

/* ---------------- Mobile sticky CTA ---------------- */
function MobileCta({ onQuote }) {
  return (
    <div className="mobile-cta">
      <a className="btn btn-call btn-lg" href={PHONE_HREF}><Icon name="phone" size={18} /> Позвонить</a>
      <button className="btn btn-primary btn-lg" onClick={onQuote}><Icon name="wrench" size={18} /> Записаться</button>
    </div>);

}

Object.assign(window, { Rationale, TopBar, Header, Hero, CtaStrip, Problem, HowItWorks, Services, WhyUs, FormSection, Faq, FinalCta, Footer, MobileCta, scrollToSection, LogoMark, INDEX_URL, COFFEE_URL, PHONE_DISPLAY, PHONE_HREF, TELEGRAM_HREF, VIBER_HREF, WHATSAPP_HREF });