// shark service — root app + Tweaks
const { useState: uS, useEffect: uE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1B7FA8",
  "heroLayout": "split",
  "bandScheme": "contrast",
  "headings": "sans"
}/*EDITMODE-END*/;

const ACCENTS = ["#1B7FA8", "#2BB5CE", "#166A8C", "#4A6B7A"];

function useReveal() {
  uE(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    if (!("IntersectionObserver" in window)) { els.forEach((e) => e.classList.add("in")); return; }
    const io = new IntersectionObserver((ents) => {
      ents.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  });
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  const goForm = () => scrollToSection("mid-form");

  const accentVars = {
    "--brand": t.accent,
    "--brand-hover": `color-mix(in srgb, ${t.accent} 84%, #2a1206)`,
    "--brand-pressed": `color-mix(in srgb, ${t.accent} 70%, #2a1206)`,
    "--brand-tint": `color-mix(in srgb, ${t.accent} 12%, #fff)`,
    "--accent": t.accent,
    "--accent-hover": `color-mix(in srgb, ${t.accent} 84%, #2a1206)`,
    "--accent-pressed": `color-mix(in srgb, ${t.accent} 70%, #2a1206)`,
    "--accent-tint": `color-mix(in srgb, ${t.accent} 12%, #fff)`,
    "--fg-link": t.accent,
    "--blue-200": `color-mix(in srgb, ${t.accent} 40%, #fff)`,
  };

  const contrast = t.bandScheme === "contrast";

  return (
    <div className="app" data-headings={t.headings} style={accentVars}>
      <TopBar />
      <Header onQuote={goForm} />

      <Hero layout={t.heroLayout} onQuote={goForm} />

      <CtaStrip variant="amber"
        title="Машина вышла из строя? Решим уже сегодня."
        text="Бесплатная диагностика и расчёт до начала работ — и для бытовых кофемашин, и для профессиональных."
        onQuote={goForm} />

      <Problem onQuote={goForm} />

      <HowItWorks dark={contrast} />

      <CtaStrip variant="roast"
        title="Не уверены, какая услуга нужна?"
        text="Опишите симптомы — мы бесплатно проведём диагностику, без обязательств и догадок."
        onQuote={goForm} primaryLabel="Заказать бесплатный расчёт" />

      <Services onQuote={goForm} />

      <FormSection
        id="quote" dark={false}
        kicker="Заявка на ремонт"
        title="Получите бесплатный расчёт за две минуты"
        body="Расскажите о Вашей машине и что с ней не так. Сертифицированный мастер рассмотрит каждую заявку и перезвонит в течение одного рабочего часа с понятным расчётом."
        trust={["Бесплатная диагностика", "Фиксированный расчёт до начала работ", "Оригинальные и OEM-детали", "Гарантия по договору на каждый ремонт"]}
        formId="mid" />

      <CtaStrip variant="amber"
        title="У Вас кафе, офис или ресторан?"
        text="Спросите о приоритетном выезде, подменных машинах и договорах обслуживания, которые держат Ваш бар в работе."
        onQuote={goForm} primaryLabel="Обсудить для бизнеса" />

      <WhyUs />

      <Faq onQuote={goForm} />

      <FormSection
        id="contact" dark={contrast}
        kicker="Запись на ремонт"
        title="Готовы починить? Давайте обсудим."
        body="Оставьте свои данные — мы свяжемся в течение одного рабочего часа. Предпочитаете обсудить голосом? Позвоните — трубку берёт настоящий мастер."
        trust={["Сертифицированный мастер перезвонит Вам", "Прозрачные цены, без скрытых платежей", "Выезд или удобный привоз", "Обслуживаем Минск, регионы и всю Беларусь"]}
        formId="foot" />

      <FinalCta onQuote={goForm} />
      <Footer />
      <MobileCta onQuote={goForm} />

      <TweaksPanel>
        <TweakSection label="Акцент бренда" />
        <TweakColor label="Цвет CTA" value={t.accent} options={ACCENTS} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Герой" />
        <TweakRadio label="Макет" value={t.heroLayout} options={["split", "bleed"]} onChange={(v) => setTweak("heroLayout", v)} />
        <TweakSection label="Секции" />
        <TweakRadio label="Фон" value={t.bandScheme} options={["contrast", "all cream"]}
          onChange={(v) => setTweak("bandScheme", v === "all cream" ? "cream" : v)} />
        <TweakRadio label="Заголовки" value={t.headings} options={["sans", "serif"]} onChange={(v) => setTweak("headings", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);