/* ════════════════════════════════════════════════════════════════════
   AI ROADMAP — App shell: assembles the page sections, booking + footer.
   Accent (Decidr orange), rounded corners and the "statement" hero opener
   are fixed via the design tokens in styles.css; the design-tool tweaks
   panel is intentionally excluded from production.
   ════════════════════════════════════════════════════════════════════ */

/* ── Final CTA + Booking ── */
function BookSection() {
  return (
    <section className="book-sec" id="book" data-screen-label="09 Book a discovery call">
      <div className="cover-gradient"></div>
      <div className="container">
        <div className="book-grid">
          <div className="book-pitch reveal-up">
            <h2 className="h2">Find the one build <em className="hi">worth doing first.</em></h2>
            <p className="lead">Book a 15-minute call. We look at your business, show you where AI pays back fastest, and what the first 30 days would deliver.</p>
            <ul className="book-badges">
              <li><i className="ph-bold ph-check"></i> We map your highest-leverage build</li>
              <li><i className="ph-bold ph-check"></i> A 12-month roadmap, sequenced and costed</li>
              <li><i className="ph-bold ph-check"></i> Built and run by Decidr engineers</li>
            </ul>
          </div>
          <div className="reveal-up">
            <BookingCard />
          </div>
        </div>
      </div>
    </section>);
}

/* ── Footer ── */
function Footer() {
  return (
    <footer className="footer" data-screen-label="09 Footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="footer-lockup">
              <Brand height={40} />
              <span className="footer-tagline">The intelligent decision.</span>
            </div>
            <p>An AI operating system for your business. We turn how you run into a system that executes, on one platform you can inspect.</p>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Decidr.</span>
        </div>
      </div>
    </footer>);
}

/* ── App ── */
function App() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal-up");
    if (!("IntersectionObserver" in window)) {
      els.forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } });
    }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Header />
      <Hero opener="statement" />
      <PhaseMap />
      <Trust />
      <Problem />
      <HowItWorks />
      <CaseStudy />
      <Assurances />
      <BookSection />
      <Footer />
    </React.Fragment>);
}

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