<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cinephiles Films</title>
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="favicon-192.png" />
  <link rel="icon" href="favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
  <link rel="stylesheet" href="/assets/fonts/fonts.css" />
  <link rel="stylesheet" href="styles.css?v=71" />

  <script src="/assets/vendor/react.development.js"></script>
  <script src="/assets/vendor/react-dom.development.js"></script>
  <script src="/assets/vendor/babel.min.js"></script>
</head>
<body>
  <template id="__bundler_thumbnail" data-bg-color="#0e0d0b">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <rect width="100" height="100" fill="#0e0d0b"/>
      <g fill="#f4f1ec">
        <rect x="18" y="30" width="64" height="40" rx="2"/>
        <rect x="22" y="34" width="56" height="32" fill="#0e0d0b"/>
      </g>
      <text x="50" y="86" font-family="Georgia, serif" font-size="7" fill="#f4f1ec" text-anchor="middle" font-style="italic">Cinephiles</text>
    </svg>
  </template>
  <div id="root"></div>

  <script src="data.js?v=18"></script>
  <script type="text/babel" src="i18n.jsx?v=11"></script>
  <script type="text/babel" src="components.jsx?v=15"></script>
  <script type="text/babel" src="pages.jsx?v=43"></script>
  <script type="text/babel">
    const { useState, useEffect, useRef } = React;

    const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
      "showTweaksHint": false,
      "defaultView": "grid"
    }/*EDITMODE-END*/;

    function parseRoute() {
      const h = (window.location.hash || "#/").replace(/^#/, "");
      const parts = h.split("/").filter(Boolean);
      if (parts.length === 0) return { name: "home" };
      if (parts[0] === "films") return { name: "films" };
      if (parts[0] === "film" && parts[1]) return { name: "film", id: parts[1] };
      if (parts[0] === "about") return { name: "about" };
      if (parts[0] === "festivals") return { name: "festivals" };
      return { name: "home" };
    }

    function routeToHash(r) {
      if (r.name === "home") return "#/";
      if (r.name === "films") return "#/films";
      if (r.name === "film") return `#/film/${r.id}`;
      if (r.name === "about") return "#/about";
      if (r.name === "festivals") return "#/festivals";
      return "#/";
    }

    function App() {
      const [route, setRoute] = useState(parseRoute());
      const [tweaksOpen, setTweaksOpen] = useState(false);

      useEffect(() => {
        const onHash = () => setRoute(parseRoute());
        window.addEventListener("hashchange", onHash);
        return () => window.removeEventListener("hashchange", onHash);
      }, []);

      useEffect(() => {
        window.scrollTo(0, 0);
      }, [route]);

      // Tweaks integration
      useEffect(() => {
        function onMessage(e) {
          if (!e.data || typeof e.data !== "object") return;
          if (e.data.type === "__activate_edit_mode") setTweaksOpen(true);
          if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false);
        }
        window.addEventListener("message", onMessage);
        window.parent.postMessage({ type: "__edit_mode_available" }, "*");
        return () => window.removeEventListener("message", onMessage);
      }, []);

      const navigate = (r) => {
        window.location.hash = routeToHash(r);
      };
      const openFilm = (id) => navigate({ name: "film", id });

      return (
        <div className="app">
          <Nav route={route} onNavigate={navigate} />
          <main style={{ flex: 1 }}>
            <div key={route.name + (route.id || "")} className="page-enter">
            {route.name === "home" && (
              <HomePage onOpen={openFilm} onNavigate={navigate} />
            )}
            {route.name === "films" && (
              <FilmsPage onOpen={openFilm} />
            )}
            {route.name === "film" && (
              <DetailPage id={route.id} onBack={() => navigate({ name: "films" })} />
            )}
            {route.name === "about" && <AboutPage />}
            {route.name === "festivals" && <FestivalsPage onOpen={openFilm} />}
            </div>
          </main>
          <Footer />

          {tweaksOpen && (
            <div className="tweaks">
              <div className="tweaks-title">Tweaks</div>
              <div className="tweaks-group">
                <div className="tweaks-label">No live tweaks wired yet.</div>
              </div>
            </div>
          )}
        </div>
      );
    }

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <LanguageProvider>
        <App />
      </LanguageProvider>
    );
  </script>
</body>
</html>
