const SECTION_COMPONENTS = {
  hero: HeroSection,
  problem: ProblemSection,
  benefits: BenefitsSection,
  features: FeaturesSection,
  use_cases: UseCasesSection,
  process: ProcessSection,
  trust: TrustSection,
  case_studies: CaseStudiesSection,
  pricing: PricingSection,
  faq: FaqSection,
  cta: CtaSection,
  lead_form: LeadFormSection,
  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);
  }, [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 reveals = document.querySelectorAll(".reveal");
    if (!reveals.length) return undefined;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-visible");
            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 />);