// Faith & Joy v2 — main app composition + Tweaks
const { useState: useStateA, useEffect: useEffectA } = React;

const FJ_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "Manuscript",
  "langStyle": "Pill",
  "cycleSeconds": 2.2,
  "modelUrl": "https://sketchfab.com/models/39479197c2194c22bd26f10635a9c4d6/embed?autostart=1"
}/*EDITMODE-END*/;

function FaithAndJoyApp() {
  const [tw, setTweak] = useTweaks(FJ_TWEAK_DEFAULTS);
  const { lang, chosen, t, setLang } = useLang();
  const [themeKey, setThemeKey] = useStateA("midnight");

  useEffectA(() => {
    window.fjApplyTheme(themeKey);
  }, [themeKey]);

  const heroProps = { t, themeKey, lang };
  const hero = tw.heroVariant === "Manuscript"
    ? <HeroManuscript {...heroProps}></HeroManuscript>
    : tw.heroVariant === "Verse"
    ? <HeroVerse {...heroProps}></HeroVerse>
    : <HeroHorizon {...heroProps}></HeroHorizon>;

  return (
    <div className="fj-page">
      <FJNav
        t={t} lang={lang} chosen={chosen} setLang={setLang}
        themeKey={themeKey} setThemeKey={setThemeKey}
        langVariant={tw.langStyle === "Text" ? "text" : "pill"}
        cycleMs={Math.round(tw.cycleSeconds * 1000)}
      ></FJNav>
      {hero}
      <DailyVerse t={t} lang={lang}></DailyVerse>
      <BookViewSection lang={lang} t={t}></BookViewSection>
      <LibraryFeatures t={t} lang={lang}></LibraryFeatures>
      <FaithJoyAI t={t} lang={lang}></FaithJoyAI>
      <StudiesSection t={t} lang={lang}></StudiesSection>
      <ShareSection t={t} lang={lang}></ShareSection>
      <PhoneShowcase t={t} lang={lang}></PhoneShowcase>
      <ModelShowcase3D modelUrl={tw.modelUrl} t={t}></ModelShowcase3D>
      <ChapterGridDemo t={t}></ChapterGridDemo>
      <ThemesShowcase t={t} themeKey={themeKey} setThemeKey={setThemeKey}></ThemesShowcase>
      <Mission t={t} themeKey={themeKey}></Mission>
      <ReadingPlans t={t}></ReadingPlans>
      <PrayerWall t={t} lang={lang}></PrayerWall>
      <DownloadCTA t={t}></DownloadCTA>
      <FJFooter t={t} themeKey={themeKey}></FJFooter>

      <TweaksPanel>
        <TweakSection label="3D Model"></TweakSection>
        <TweakText label="Sketchfab Embed URL" value={tw.modelUrl} placeholder="https://sketchfab.com/models/…/embed" onChange={(v) => setTweak("modelUrl", v)}></TweakText>
        <TweakSection label="Hero"></TweakSection>
        <TweakRadio label="Layout" value={tw.heroVariant}
          options={["Horizon", "Manuscript", "Verse"]}
          onChange={(v) => setTweak("heroVariant", v)}></TweakRadio>
        <TweakSection label="Language control"></TweakSection>
        <TweakRadio label="Style" value={tw.langStyle}
          options={["Pill", "Text"]}
          onChange={(v) => setTweak("langStyle", v)}></TweakRadio>
        <TweakSlider label="Cycle speed" value={tw.cycleSeconds} min={1} max={6} step={0.2} unit="s"
          onChange={(v) => setTweak("cycleSeconds", v)}></TweakSlider>
      </TweaksPanel>
    </div>
  );
}

window.FaithAndJoyApp = FaithAndJoyApp;