// App composition — flow nou, cu picks din canvas
const { useState: useStateApp, useEffect: useEffectApp } = React;

const App = () => {
  const [isMobile, setIsMobile] = useStateApp(false);
  useEffectApp(() => {
    const mq = () => setIsMobile(window.innerWidth < 760);
    mq();
    window.addEventListener("resize", mq);
    return () => window.removeEventListener("resize", mq);
  }, []);

  return (
  <div data-screen-label="01 Homepage" style={{ position: "relative" }}>
    <window.ParticlesFX />
    <window.CursorFX />
    <window.LandingNav />
    <window.LandingHero />

    {/* DARK ZONE: Hero + Problema — seamless, no gap */}
    <section id="problema" data-screen-label="02 Problema">
      <window.ProblemaV1 />
    </section>

    {/* Bridge band — logo mark between Problema (dark) and Solutia (light) */}
    <section aria-hidden="true" style={{
      background: "var(--bg-1, #05130b)",
      padding: "80px 0",
      overflow: "hidden",
      position: "relative",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
    }}>
      <img
        src={(window.__resources && window.__resources.logoMain) || "assets/confirmari_logo.png"}
        alt="Confirmări.ro"
        style={{
          height: "min(20vw, 200px)", width: "auto",
          opacity: 0.2,
          filter: "drop-shadow(0 0 60px rgba(9,169,85,0.22))",
          userSelect: "none",
          marginTop: isMobile ? -8 : -40,
        }}
      />
    </section>



    {/* LIGHT ZONE: Solutia → Footer */}
    <div className="theme-light">
      <section data-screen-label="03 Solutia">
        <window.SolutiaV4 />
      </section>

      <section id="cum-dureaza" data-screen-label="04 Cum functioneaza">
        <window.HowItWorksV7 />
      </section>

      <section data-screen-label="04b Metrics">
        <window.MetricsStripV1 />
      </section>

      <section data-screen-label="05 Stats">
        <window.StatsV2 />
      </section>

      <section id="comparatie" data-screen-label="06 Comparatie">
        <window.SolutiaV3 />
      </section>

      <section id="dashboard" data-screen-label="07 Drafturi Auto">
        <window.DraftsAutoV1 />
      </section>

      <section data-screen-label="08 Ecosistem">
        <window.EcosistemV1 />
      </section>

      <section data-screen-label="08b Calculator">
        <window.SavingsCalcV1 />
      </section>

      <section id="faq" data-screen-label="09 FAQ">
        <window.FAQV2 />
      </section>

      <section id="contact" data-screen-label="10 CTA">
        <window.FinalCTAV2 />
      </section>

      <section data-screen-label="11 Footer" style={{ padding: "0" }}>
        <window.FooterV3 />
      </section>
    </div>

    <window.LandingDemoModal />
  </div>
  );
};

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