const SECTION_COMPONENTS = {
  hero: HeroSection,
  benefits: BenefitsSection,
  features: FeaturesSection,
  gallery: GallerySection,
  process: ProcessSection,
  team: TeamSection,
  testimonials: TestimonialsSection,
  pricing: PricingSection,
  faq: FaqSection,
  cta: CtaSection,
  lead_form: LeadFormSection,
  contacts: ContactsSection,
  footer: FooterSection,
};

const App = () => {
  const [schemaVisible, setSchemaVisible] = React.useState(false);
  const [currentSection, setCurrentSection] = React.useState("hero");
  const schemaSections = (window.LP_SCHEMA && window.LP_SCHEMA.sections) || [];

  React.useEffect(() => {
    document.body.classList.toggle("schema-on", schemaVisible);
    document.documentElement.classList.add("js-on");
  }, [schemaVisible]);

  React.useEffect(() => {
    const sections = document.querySelectorAll("[data-editor-section-id]");
    if (!sections.length) return undefined;
    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio);
        if (visible[0]) {
          setCurrentSection(visible[0].target.getAttribute("data-editor-section-id"));
        }
      },
      { rootMargin: "-20% 0px -55% 0px", threshold: [0.15, 0.4, 0.7] }
    );
    sections.forEach((s) => observer.observe(s));
    return () => observer.disconnect();
  }, []);

  React.useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const reveals = document.querySelectorAll(".reveal");
    if (!reveals.length) return undefined;
    if (reduce) {
      reveals.forEach((el) => el.classList.add("in"));
      return undefined;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("in");
            io.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    reveals.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const SP = window.SchemaPanel || null;
  const LT = window.LPTweaks || null;

  return (
    <React.Fragment>
      <Nav />
      <main id="main-content">
        {schemaSections
          .filter(({ sectionId }) => sectionId !== "footer")
          .map(({ sectionId }) => {
            const Component = SECTION_COMPONENTS[sectionId];
            return Component ? <Component key={sectionId} /> : null;
          })}
      </main>
      {SECTION_COMPONENTS.footer && <FooterSection />}
      <button className={"fab-schema" + (schemaVisible ? " fab-schema--active" : "")} onClick={() => setSchemaVisible((v) => !v)} aria-pressed={schemaVisible} aria-label="Toggle schema overlay">
        {schemaVisible ? "HIDE SCHEMA" : "SHOW SCHEMA"}
      </button>
      {SP && <SP visible={schemaVisible} currentSection={currentSection} />}
      {LT && <LT currentSection={currentSection} schemaVisible={schemaVisible} onToggleSchema={() => setSchemaVisible((v) => !v)} />}
    </React.Fragment>
  );
};

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