const { useEffect } = React;

const defaultSite = {
  settings: {},
  sections: {},
  services: [],
  reviews: [],
  gallery: [],
};

const BRAND_NAME = "Малярка.Pro";
const BRAND_LOGO = "/static/assets/malyarka-pro-logo.svg";
const YANDEX_MAP_POINT = "37.761450,44.698994";
const YANDEX_MAP_URL =
  "https://yandex.ru/map-widget/v1/?ll=37.761450%2C44.698994&pt=37.761450%2C44.698994%2Cpm2rdm&z=18";

function isEnabled(sections, key) {
  return Boolean(sections && sections[key]);
}

function Reveal({ as: Tag = "section", children, ...props }) {
  return (
    <Tag data-reveal="" {...props}>
      {children}
    </Tag>
  );
}

function IndustrialStrip() {
  const items = [
    "Кузовной цех",
    "Покраска",
    "Геометрия",
    "Новороссийск",
    "Оценка по фото",
    "До/после",
    "Кузовной цех",
    "Покраска",
    "Геометрия",
    "Новороссийск",
    "Оценка по фото",
    "До/после",
  ];

  return (
    <div className="industrial-strip" aria-hidden="true">
      <div className="industrial-strip__track">
        {items.map((item, index) => (
          <span key={`${item}-${index}`}>{item}</span>
        ))}
      </div>
    </div>
  );
}

function Header({ sections }) {
  return (
    <header className="site-header">
      <a className="brand" href="#hero">
        <img className="brand-logo" src={BRAND_LOGO} alt={BRAND_NAME} />
      </a>
      <nav className="nav-links">
        {isEnabled(sections, "services") && <a href="#services">Услуги</a>}
        {isEnabled(sections, "before_after") && <a href="#before-after">До/после</a>}
        {isEnabled(sections, "contact") && <a href="#contact">Контакты</a>}
      </nav>
    </header>
  );
}

function Hero({ settings }) {
  const specs = [settings.hero_fact_1, settings.hero_fact_2, settings.hero_fact_3].filter(Boolean);

  return (
    <Reveal id="hero" className="hero section">
      <div className="hero-content">
        <p className="eyebrow">{settings.hero_eyebrow}</p>
        <h1>{settings.hero_title}</h1>
        <div className="hero-motion-line" aria-hidden="true">
          <span></span>
        </div>
        <p className="hero-lead">{settings.hero_subtitle}</p>
        <div className="cta-row">
          <a className="button button-primary" href="#contact">
            Позвонить
          </a>
          <a className="button button-secondary" href="#contact">
            Написать в MAX
          </a>
        </div>
        <dl className="hero-specs">
          {specs.map((fact, index) => (
            <div key={fact}>
              <dt>{String(index + 1).padStart(2, "0")}</dt>
              <dd>{fact}</dd>
            </div>
          ))}
        </dl>
      </div>
      <div className="hero-media">
        <div className="workshop-frame">
          <img src="/static/assets/hero-workshop.png" alt="Автомобиль в зоне кузовного ремонта" />
        </div>
        <div className="media-note">Собственная покрасочная камера</div>
      </div>
    </Reveal>
  );
}

function KineticRail() {
  return (
    <div className="kinetic-rail" aria-hidden="true">
      <span>Рихтовка</span>
      <span>Покраска</span>
      <span>Полировка</span>
      <span>Подбор цвета</span>
    </div>
  );
}

function SectionHeading({ eyebrow, title }) {
  return (
    <div className="section-heading">
      <p className="eyebrow">{eyebrow}</p>
      <h2>{title}</h2>
    </div>
  );
}

function Services({ services }) {
  return (
    <Reveal id="services" className="section">
      <SectionHeading
        eyebrow="Что ремонтируем"
        title="Услуги для повреждений после ДТП и локальных дефектов"
      />
      <div className="services-grid">
        {services.map((service) => (
          <Reveal as="article" className="service-card" key={service.id || service.title}>
            <h3>{service.title}</h3>
            <p>{service.summary}</p>
          </Reveal>
        ))}
      </div>
    </Reveal>
  );
}

function PhotoEvaluation({ settings }) {
  return (
    <Reveal id="photo-evaluation" className="section split-section">
      <div>
        <p className="eyebrow">Быстрый первый шаг</p>
        <h2>Бесплатная оценка по фото в MAX</h2>
        <p>Отправьте несколько фото повреждения. Точная оценка дается после осмотра.</p>
      </div>
      <div className="action-panel">
        <span className="badge">Без формы на сайте</span>
        <h3>Напишите в MAX</h3>
        <p>{settings.max_contact}</p>
      </div>
    </Reveal>
  );
}

function BeforeAfter({ gallery }) {
  return (
    <Reveal id="before-after" className="section">
      <SectionHeading eyebrow="Примеры работ" title="До/после" />
      <div className="comparison-grid">
        {gallery.length ? (
          gallery.map((pair) => (
            <Reveal as="article" className="comparison-card" key={pair.id || pair.caption}>
              <img src={pair.before_image_path} alt="До ремонта" loading="lazy" />
              <img src={pair.after_image_path} alt="После ремонта" loading="lazy" />
              <div>
                <h3>{pair.caption}</h3>
              </div>
            </Reveal>
          ))
        ) : (
          <React.Fragment>
            <Reveal as="article" className="comparison-card">
              <img src="/static/assets/before-placeholder.svg" alt="Заглушка фото до ремонта" loading="lazy" />
              <div>
                <h3>До ремонта</h3>
                <p className="placeholder-text">Фото для замены.</p>
              </div>
            </Reveal>
            <Reveal as="article" className="comparison-card">
              <img src="/static/assets/after-placeholder.svg" alt="Заглушка фото после ремонта" loading="lazy" />
              <div>
                <h3>После ремонта</h3>
                <p className="placeholder-text">Фото для замены.</p>
              </div>
            </Reveal>
          </React.Fragment>
        )}
      </div>
    </Reveal>
  );
}

function Trust({ reviews }) {
  return (
    <Reveal id="trust" className="section trust-section">
      <SectionHeading eyebrow="Почему можно обратиться" title="Доверие через реальные материалы" />
      <div className="trust-grid">
        <Reveal as="article" className="trust-card">
          <h3>Собственная камера покраски</h3>
          <p>Покрасочные работы выполняются в подготовленной зоне.</p>
        </Reveal>
        {reviews.map((review) => (
          <Reveal as="article" className="trust-card" key={review.id || review.reviewer_label}>
            <h3>{review.reviewer_label}</h3>
            <p>{review.text}</p>
          </Reveal>
        ))}
        {!reviews.length && (
          <Reveal as="article" className="trust-card">
            <h3>Реальные отзывы</h3>
            <p className="placeholder-text">Пока нет реальных отзывов: место зарезервировано.</p>
          </Reveal>
        )}
      </div>
    </Reveal>
  );
}

function Contact({ settings }) {
  return (
    <Reveal id="contact" className="section contact-section">
      <div className="contact-copy">
        <p className="eyebrow">Связаться</p>
        <h2>Позвоните или напишите в MAX</h2>
      </div>
      <div className="contact-panel">
        <div className="contact-card">
          <div className="contact-row">
            <span>Телефон</span>
            <strong>{settings.phone}</strong>
          </div>
          <div className="contact-row">
            <span>MAX</span>
            <strong>{settings.max_contact}</strong>
          </div>
          <div className="contact-row">
            <span>Адрес</span>
            <strong>{settings.address}</strong>
          </div>
        </div>
        <div className="contact-map">
          <iframe
            className="yandex-map"
            src={YANDEX_MAP_URL}
            title="Карта проезда"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          ></iframe>
          <a className="map-link" href={`https://yandex.ru/maps/?ll=${YANDEX_MAP_POINT}&pt=${YANDEX_MAP_POINT}&z=18`} target="_blank" rel="noreferrer">
            Открыть в Яндекс.Картах
          </a>
        </div>
      </div>
    </Reveal>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <a className="footer-brand" href="#hero">
        <img className="footer-brand__logo" src={BRAND_LOGO} alt={BRAND_NAME} />
      </a>
      <span>© {new Date().getFullYear()} {BRAND_NAME}</span>
    </footer>
  );
}

function useRevealAnimation() {
  useEffect(() => {
    const revealTargets = document.querySelectorAll("[data-reveal]");
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");

    if (!revealTargets.length) {
      return undefined;
    }

    revealTargets.forEach((target) => target.classList.add("reveal"));

    if (reduceMotion.matches || !("IntersectionObserver" in window)) {
      revealTargets.forEach((target) => target.classList.add("is-visible"));
      return undefined;
    }

    revealTargets.forEach((target, index) => {
      window.setTimeout(() => {
        target.classList.add("is-visible");
      }, 120 + index * 45);
    });

    const revealObserver = new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) {
            return;
          }

          entry.target.classList.add("is-visible");
          observer.unobserve(entry.target);
        });
      },
      { rootMargin: "0px 0px -12% 0px", threshold: 0.12 },
    );

    revealTargets.forEach((target) => revealObserver.observe(target));

    return () => revealObserver.disconnect();
  }, []);
}

function PublicApp() {
  const site = window.__PUBLIC_SITE__ || defaultSite;
  const settings = site.settings || defaultSite.settings;
  const sections = site.sections || defaultSite.sections;
  const services = site.services || defaultSite.services;
  const reviews = site.reviews || defaultSite.reviews;
  const gallery = site.gallery || defaultSite.gallery;

  useRevealAnimation();

  return (
    <React.Fragment>
      <IndustrialStrip />
      <Header sections={sections} />
      <main>
        <Hero settings={settings} />
        <KineticRail />
        {isEnabled(sections, "services") && <Services services={services} />}
        {isEnabled(sections, "photo_evaluation") && <PhotoEvaluation settings={settings} />}
        {isEnabled(sections, "before_after") && <BeforeAfter gallery={gallery} />}
        {isEnabled(sections, "trust") && <Trust reviews={reviews} />}
        {isEnabled(sections, "contact") && <Contact settings={settings} />}
      </main>
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("public-root")).render(<PublicApp />);