// Root app — manages prayer→landing transition + tweaks state.

const PALETTES = {
  editorial: {
    label: "Cool Slate — High Contrast",
    swatches: ["#f3f5f8", "#0e1622", "#2a5fb8", "#5a7a9c"],
    vars: {
      "--bg": "#f3f5f8",
      "--bg-warm": "#e9edf3",
      "--bg-deep": "#dde3ec",
      "--ink": "#0e1622",
      "--ink-soft": "#1c2533",
      "--ink-mute": "#5a6678",
      "--rule": "#0e1622",
      "--accent": "#2a5fb8",
      "--gilt": "#5a7a9c",
    },
  },
  parchment: {
    label: "Parchment & Ink",
    swatches: ["#f1e6cc", "#1f1610", "#7a2222", "#a47a2a"],
    vars: {
      "--bg": "#f1e6cc",
      "--bg-warm": "#ead9b6",
      "--bg-deep": "#e3cea2",
      "--ink": "#1f1610",
      "--ink-soft": "#3a2a1c",
      "--ink-mute": "#6b5944",
      "--rule": "#c9b48a",
      "--accent": "#7a2222",
      "--gilt": "#a47a2a",
    },
  },
  ivory: {
    label: "Ivory & Gilt",
    swatches: ["#f7f0df", "#1a1310", "#9a6b1f", "#b8862a"],
    vars: {
      "--bg": "#f7f0df",
      "--bg-warm": "#f1e6c8",
      "--bg-deep": "#e9dab2",
      "--ink": "#1a1310",
      "--ink-soft": "#2f231a",
      "--ink-mute": "#7a6649",
      "--rule": "#d6c08a",
      "--accent": "#9a6b1f",
      "--gilt": "#b8862a",
    },
  },
  vesper: {
    label: "Stone & Vesper",
    swatches: ["#ece5d6", "#1d2330", "#3a4f6e", "#8b7a52"],
    vars: {
      "--bg": "#ece5d6",
      "--bg-warm": "#e3dcc8",
      "--bg-deep": "#d4ccb4",
      "--ink": "#1d2330",
      "--ink-soft": "#2c3445",
      "--ink-mute": "#6c7080",
      "--rule": "#bdb6a3",
      "--accent": "#3a4f6e",
      "--gilt": "#8b7a52",
    },
  },
  oxblood: {
    label: "Bone & Oxblood",
    swatches: ["#efe7d4", "#161312", "#5b1414", "#8a6f3a"],
    vars: {
      "--bg": "#efe7d4",
      "--bg-warm": "#e6dcc1",
      "--bg-deep": "#d8caa6",
      "--ink": "#161312",
      "--ink-soft": "#2b211c",
      "--ink-mute": "#6e604c",
      "--rule": "#c4b48a",
      "--accent": "#5b1414",
      "--gilt": "#8a6f3a",
    },
  },
};

const TYPE_PAIRINGS = {
  fraunces: {
    label: "Inter Sans",
    vars: {
      "--font-display": '"Inter", system-ui, sans-serif',
      "--font-body": '"Inter", system-ui, sans-serif',
      "--font-quote": '"Inter", system-ui, sans-serif',
    },
  },
  playfair: {
    label: "Inter Tight",
    vars: {
      "--font-display": '"Inter", system-ui, sans-serif',
      "--font-body": '"Inter", system-ui, sans-serif',
      "--font-quote": '"Inter", system-ui, sans-serif',
    },
  },
  cormorant: {
    label: "Inter Condensed",
    vars: {
      "--font-display": '"Inter", system-ui, sans-serif',
      "--font-body": '"Inter", system-ui, sans-serif',
      "--font-quote": '"Inter", system-ui, sans-serif',
    },
  },
  garamond: {
    label: "Inter Display",
    vars: {
      "--font-display": '"Inter", system-ui, sans-serif',
      "--font-body": '"Inter", system-ui, sans-serif',
      "--font-quote": '"Inter", system-ui, sans-serif',
    },
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "editorial",
  "typePairing": "fraunces",
  "layout": "editorial",
  "navPlacement": "centered",
  "skipPrayer": false,
  "prayerFont": "crimson"
}/*EDITMODE-END*/;

// Four serif options for the Hail Mary text. Each is wired through to
// PrayerIntro's font-family stack.
const PRAYER_FONTS = {
  fraunces:   { label: "Fraunces",            stack: '"Fraunces", "EB Garamond", Georgia, serif' },
  garamond:   { label: "EB Garamond",         stack: '"EB Garamond", "Cormorant Garamond", Georgia, serif' },
  cormorant:  { label: "Cormorant Garamond",  stack: '"Cormorant Garamond", "EB Garamond", Georgia, serif' },
  playfair:   { label: "Playfair Display",    stack: '"Playfair Display", "Fraunces", Georgia, serif' },
  crimson:    { label: "Crimson Pro",         stack: '"Crimson Pro", "EB Garamond", Georgia, serif' }
};

const SUBTITLE = "Lives of the Saints,\nTheir response to suffering,\nTeachings their lives illuminate.";

const ROUTE_KEY = "saints.route";

const readSavedRoute = () => {
  try { return localStorage.getItem(ROUTE_KEY) || "saints"; }
  catch { return "saints"; }
};

// URL override: ?screen=brand|prayer|saints|about|topics|saint|saint-<slug>
// Lets a parent canvas load any screen directly without the intro sequence.
const readScreenParam = () => {
  try {
    const sp = new URLSearchParams(window.location.search);
    return sp.get("screen");
  } catch { return null; }
};
const SCREEN_OVERRIDE = readScreenParam();
const FIXED_SCREENS = new Set(["saints", "about", "topics", "saint"]);
const isRouteScreen = (s) => !!s && (FIXED_SCREENS.has(s) || s.startsWith("saint-"));

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // If ?screen= is set, jump directly to that stage/route and skip intros.
  const initialStage =
    SCREEN_OVERRIDE === "brand" ? "brand" :
    SCREEN_OVERRIDE === "prayer" ? "prayer" :
    SCREEN_OVERRIDE && isRouteScreen(SCREEN_OVERRIDE) ? "landing" :
    t.skipPrayer ? "landing" : "brand";

  const initialRoute =
    SCREEN_OVERRIDE && isRouteScreen(SCREEN_OVERRIDE) ? SCREEN_OVERRIDE :
    readSavedRoute();

  const [stage, setStage] = React.useState(initialStage);
  const [route, setRoute] = React.useState(initialRoute);
  const [previousRoute, setPreviousRoute] = React.useState(null);

  const handleNavigate = React.useCallback((next) => {
    setRoute((prev) => {
      if (prev !== next) setPreviousRoute(prev);
      return next;
    });
    // Don't write route to storage when running inside the canvas (it would
    // overwrite the main app's saved route and could cause loops).
    if (!SCREEN_OVERRIDE) {
      try { localStorage.setItem(ROUTE_KEY, next); } catch {}
    }
    window.scrollTo(0, 0);
  }, []);

  const handleBrandDone = React.useCallback(() => setStage("prayer"), []);
  const handlePrayerDone = React.useCallback(() => setStage("landing"), []);

  // Apply palette + typography as CSS vars on root
  React.useEffect(() => {
    const root = document.documentElement;
    const pal = PALETTES[t.palette] || PALETTES.editorial;
    const typ = TYPE_PAIRINGS[t.typePairing] || TYPE_PAIRINGS.fraunces;
    Object.entries(pal.vars).forEach(([k, v]) => root.style.setProperty(k, v));
    Object.entries(typ.vars).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [t.palette, t.typePairing]);

  // Hide preload splash once mounted
  React.useEffect(() => {
    const el = document.getElementById("preload");
    if (el) {
      el.style.opacity = "0";
      setTimeout(() => el.remove(), 700);
    }
  }, []);

  return (
    <>
      {stage === "brand" && (
        <BrandIntro
          subtitle={SUBTITLE}
          onDone={handleBrandDone}
          static={!!SCREEN_OVERRIDE} />
      )}
      {stage === "prayer" && (
        <PrayerIntro
          speed={1}
          onDone={handlePrayerDone}
          static={!!SCREEN_OVERRIDE}
          fontFamily={(PRAYER_FONTS[t.prayerFont] || PRAYER_FONTS.fraunces).stack} />
      )}
      {stage === "landing" && (
        <div className="landing-fade-in" ref={(el) => { if (el) window.scrollTo(0, 0); }}>
          <Landing
            subtitle={SUBTITLE}
            layout={t.layout}
            navPlacement={t.navPlacement}
            route={route}
            previousRoute={previousRoute}
            onNavigate={handleNavigate}
          />
          <style>{`
            .landing-fade-in {
              animation: landingFadeIn 1100ms cubic-bezier(.2,.7,.2,1) both;
            }
            @keyframes landingFadeIn {
              from { opacity: 0; }
              to   { opacity: 1; }
            }
          `}</style>
        </div>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Color palette">
          <TweakColor
            label={PALETTES[t.palette]?.label || "Palette"}
            value={PALETTES[t.palette]?.swatches}
            onChange={(arr) => {
              const match = Object.keys(PALETTES).find(k => PALETTES[k].swatches[0] === arr[0]);
              if (match) setTweak("palette", match);
            }}
            options={Object.keys(PALETTES).map(k => PALETTES[k].swatches)}
          />
        </TweakSection>

        <TweakSection label="Typography">
          <TweakSelect
            label="Pairing"
            value={t.typePairing}
            onChange={(v) => setTweak("typePairing", v)}
            options={Object.keys(TYPE_PAIRINGS).map(k => ({ value: k, label: TYPE_PAIRINGS[k].label }))}
          />
        </TweakSection>

        <TweakSection label="Featured saint layout">
          <TweakSelect
            label="Layout"
            value={t.layout}
            onChange={(v) => setTweak("layout", v)}
            options={[
              { value: "editorial", label: "Editorial — text left / image right" },
              { value: "image-left", label: "Reversed — image left / text right" },
              { value: "centered", label: "Centered — portrait above text" },
              { value: "full-bleed", label: "Full-bleed — image fills half" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Navigation placement">
          <TweakSelect
            label="Position"
            value={t.navPlacement}
            onChange={(v) => setTweak("navPlacement", v)}
            options={[
              { value: "centered", label: "Centered under wordmark" },
              { value: "top-bar", label: "Top horizontal bar" },
              { value: "left-rail", label: "Left vertical rail" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Prayer intro">
          <TweakSelect
            label="Prayer font"
            value={t.prayerFont}
            onChange={(v) => setTweak("prayerFont", v)}
            options={Object.keys(PRAYER_FONTS).map(k => ({ value: k, label: PRAYER_FONTS[k].label }))}
          />
          <TweakButton
            label="Replay intro"
            onClick={() => setStage("brand")}
          />
          <TweakToggle
            label="Skip prayer on load"
            value={t.skipPrayer}
            onChange={(v) => setTweak("skipPrayer", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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