// Faith & Joy v2 — page sections (all copy comes from the i18n dictionary `t`)
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

function useInViewS(ref, threshold = 0.15) {
  const [inView, setInView] = useStateS(false);
  useEffectS(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return inView;
}

function Reveal({ children, delay = 0, as = "div", style }) {
  const ref = useRefS(null);
  const inView = useInViewS(ref);
  const Tag = as;
  return (
    <Tag ref={ref} className={"fj-reveal" + (inView ? " in" : "")} style={{ transitionDelay: `${delay}ms`, ...style }}>
      {children}
    </Tag>
  );
}

function CountUp({ to, duration = 1400 }) {
  const ref = useRefS(null);
  const inView = useInViewS(ref);
  const [val, setVal] = useStateS(0);
  useEffectS(() => {
    if (!inView) return;
    let raf, start;
    const step = (ts) => {
      if (!start) start = ts;
      const p = Math.min(1, (ts - start) / duration);
      setVal(Math.round(to * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [inView, to]);
  return <span ref={ref}>{val.toLocaleString()}</span>;
}

// ---------- Daily verse ----------
function DailyVerse({ t, lang }) {
  const [override, setOverride] = useStateS(null);
  const [loading, setLoading] = useStateS(false);
  const idx = new Date().getDate() % t.verse.verses.length;

  useEffectS(() => { setOverride(null); }, [lang]);

  const generate = async () => {
    setLoading(true);
    try {
      const langName = { en: "English", es: "Spanish", fr: "French", pt: "Brazilian Portuguese", hi: "Hindi", de: "German" }[lang] || "English";
      const res = await window.claude.complete(
        `Give me ONE short, uplifting Bible verse for today, in ${langName} (use a well-known ${langName} Bible translation, and write the book name in ${langName}). Respond in JSON only: {"text": "verse text", "ref": "Book Chapter:Verse"}. No other text.`
      );
      setOverride(JSON.parse(res.match(/\{[\s\S]*\}/)[0]));
    } catch (e) {
      setOverride(t.verse.verses[(idx + 1 + Math.floor(Math.random() * 5)) % t.verse.verses.length]);
    }
    setLoading(false);
  };

  const verse = override || t.verse.verses[idx];
  const dateStr = new Date().toLocaleDateString(t.locale, { weekday: "long", month: "long", day: "numeric" });

  return (
    <section id="verse" className="fj-section soft" data-screen-label="Daily Verse" style={{ overflow: "hidden" }}>
      <div style={{
        position: "absolute", top: -100, right: -100, width: 400, height: 400, borderRadius: "50%",
        background: "radial-gradient(circle, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%)",
      }}></div>
      <div className="fj-wrap narrow">
        <Reveal>
          <div className="fj-eyebrow" style={{ marginBottom: 30 }}>✦ {t.verse.label} — {dateStr}</div>
          <blockquote className="fj-verse-quote">
            <span className="fj-verse-mark" style={{ marginRight: 8 }}>"</span>
            {verse.text}
            <span className="fj-verse-mark" style={{ marginLeft: 4 }}>"</span>
          </blockquote>
          <div style={{ display: "flex", alignItems: "center", gap: 24, marginTop: 36, flexWrap: "wrap" }}>
            <div className="fj-verse-ref">— {verse.ref}</div>
            <div style={{ flex: 1, height: 1, background: "var(--border)", minWidth: 100 }}></div>
            <button type="button" className="fj-btn-outline" onClick={generate} disabled={loading} style={{ cursor: loading ? "wait" : "pointer" }}>
              {loading ? t.verse.loading : "✦ " + t.verse.newVerse}
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Book View Feature ----------
function BookViewSection({ lang, t }) {
  const bookViewImgs = {
    en: "assets/app-genesis-v2.png",
    es: "assets/app-bookview-es.png",
    fr: "assets/app-bookview-fr.png",
    pt: "assets/app-bookview-pt.png",
    hi: "assets/app-bookview-hi.png",
    de: "assets/app-bookview-de.png",
  };
  const bookImg = bookViewImgs[lang] || "assets/app-genesis-v2.png";
  return (
    <section id="features" className="fj-section" data-screen-label="Book View" style={{ overflow: "hidden" }}>
      <div className="fj-wrap">
        <div className="fj-split" style={{ alignItems: "center", gap: 60 }}>

          <Reveal style={{ flex: "0 0 auto", display: "flex", justifyContent: "center" }}>
            <div style={{ position: "relative" }}>
              <div style={{
                position: "absolute", inset: -24, borderRadius: 56,
                background: "radial-gradient(ellipse at 50% 60%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%)",
                pointerEvents: "none",
              }}></div>
              <PhoneFrame img={bookImg} width={300} glow={true}></PhoneFrame>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <div className="fj-eyebrow" style={{ marginBottom: 20 }}>✦ {t.bookView.eyebrow}</div>
            <h2 className="fj-h2" style={{ marginBottom: 24 }}>
              {t.bookView.title}<br></br>
              <em>{t.bookView.em}</em>
            </h2>
            <p className="fj-body" style={{ maxWidth: 480, margin: "0 0 20px" }}>
              {t.bookView.body1}
            </p>
            <p className="fj-body" style={{ maxWidth: 480, margin: "0 0 36px" }}>
              {t.bookView.body2}
            </p>
            <div style={{ display: "grid", gap: 12 }}>
              {t.bookView.features.map((f) => (
                <div key={f.label} style={{
                  display: "flex", alignItems: "center", gap: 16,
                  padding: "14px 18px", background: "var(--card)",
                  border: "1px solid var(--border)", borderRadius: 12,
                }}>
                  <div style={{
                    width: 8, height: 8, borderRadius: "50%", flexShrink: 0,
                    background: "var(--accent)",
                  }}></div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 15, color: "var(--ink)", marginBottom: 2 }}>{f.label}</div>
                    <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>{f.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>

        </div>
      </div>
    </section>
  );
}

// ---------- Library Features (two-tab showcase) ----------
function LibraryFeatures({ t, lang }) {
  const [active, setActive] = useStateS(0);
  const tabImgs = lang === "es"
    ? ["assets/app-edit-passage-es.png", "assets/app-chapter-library-es.png"]
    : lang === "fr"
    ? ["assets/app-edit-passage-fr.png", "assets/app-chapter-library-fr.png"]
    : lang === "de"
    ? ["assets/app-chapter-library-de.png", "assets/app-edit-passage-de.png"]
    : lang === "pt"
    ? ["assets/app-edit-passage-pt.png", "assets/app-chapter-library-pt.png"]
    : lang === "hi"
    ? ["assets/app-edit-passage-hi.png", "assets/app-chapter-library-hi.png"]
    : ["assets/app-edit-passage.png", "assets/app-chapter-library.png"];

  const screens = t.library.tabs.map((tab, i) => ({
    img: tabImgs[i] || tabImgs[0],
    label: tab.label,
    eyebrow: "✦ " + tab.eyebrow,
    title: tab.title,
    em: tab.em,
    body: tab.body,
    features: tab.features.map((f) => [f.label, f.desc]),
  }));

  const s = screens[active];

  return (
    <section id="library" className="fj-section" data-screen-label="Library Features">
      <div className="fj-wrap">
        <div className="fj-split">

          {/* LEFT — text + feature buttons */}
          <div>
            <Reveal>
              <div className="fj-eyebrow" style={{ marginBottom: 20 }}>{s.eyebrow}</div>
              <h2 className="fj-h2" style={{ marginBottom: 28 }}>
                {s.title}<br></br>
                <em>{s.em}</em>
              </h2>
              <p className="fj-body" style={{ maxWidth: 480, margin: "0 0 36px" }}>{s.body}</p>
            </Reveal>
            <div style={{ display: "grid", gap: 14 }}>
              {screens.map((sc, i) => (
                <button type="button" key={i}
                  className={"fj-feature-btn" + (active === i ? " active" : "")}
                  onClick={() => setActive(i)}
                >
                  <div className="fj-feature-num">{i + 1}</div>
                  <div style={{ textAlign: "left" }}>
                    <div className="fj-feature-label">{sc.label}</div>
                    <div style={{ fontSize: 12.5, color: active === i ? "color-mix(in oklab, var(--accent) 80%, var(--ink))" : "var(--ink-soft)", marginTop: 2 }}>
                      {sc.features[0][0]} · {sc.features[1][0]}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* RIGHT — stacked phones */}
          <div style={{ position: "relative", height: 680, display: "flex", alignItems: "center", justifyContent: "center" }}>
            {screens.map((sc, i) => {
              const offset = i - active;
              return (
                <div key={i} onClick={() => setActive(i)} style={{
                  position: "absolute", width: 290, height: 620,
                  transform: `translateX(${offset * 160}px) scale(${active === i ? 1 : 0.82}) rotate(${offset * 4}deg)`,
                  transition: "all 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2)",
                  zIndex: active === i ? 10 : 10 - Math.abs(offset),
                  opacity: Math.abs(offset) > 1 ? 0 : 1,
                  cursor: "pointer",
                  filter: active === i ? "none" : "brightness(0.88)",
                }}>
                  <PhoneFrame img={sc.img} width={290} glow={active === i}></PhoneFrame>
                </div>
              );
            })}
          </div>

        </div>
      </div>
    </section>
  );
}

// ---------- Faith & Joy AI ----------
function FaithJoyAI({ t, lang }) {
  return (
    <section id="ai" className="fj-section soft" data-screen-label="Faith & Joy AI" style={{ overflow: "hidden" }}>
      <div className="fj-wrap">
        <div className="fj-split" style={{ alignItems: "center", gap: 60 }}>

          {/* LEFT — phone */}
          <Reveal style={{ flex: "0 0 auto", display: "flex", justifyContent: "center" }}>
            <div style={{ position: "relative" }}>
              <div style={{
                position: "absolute", inset: -24, borderRadius: 56,
                background: "radial-gradient(ellipse at 50% 60%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%)",
                pointerEvents: "none",
              }}></div>
              <PhoneFrame img={lang === "es" ? "assets/app-fj-ai-es.png" : lang === "fr" ? "assets/app-fj-ai-fr.png" : lang === "de" ? "assets/app-fj-ai-de.png" : lang === "pt" ? "assets/app-fj-ai-pt.png" : "assets/app-fj-ai.png"} width={300} glow={true}></PhoneFrame>
            </div>
          </Reveal>

          {/* RIGHT — text */}
          <Reveal delay={150}>
            <div className="fj-eyebrow" style={{ marginBottom: 20 }}>✦ {t.ai.eyebrow}</div>
            <h2 className="fj-h2" style={{ marginBottom: 24 }}>
              {t.ai.title}<br></br>
              <em>{t.ai.em}</em>
            </h2>
            <p className="fj-body" style={{ maxWidth: 480, margin: "0 0 32px" }}>
              {t.ai.body}
            </p>

            {/* Privacy badge */}
            <div style={{
              display: "flex", alignItems: "flex-start", gap: 16,
              padding: "20px 22px",
              background: "color-mix(in oklab, var(--accent) 8%, var(--card))",
              border: "1px solid color-mix(in oklab, var(--accent) 30%, var(--border))",
              borderRadius: 14, marginBottom: 28,
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                background: "color-mix(in oklab, var(--accent) 16%, transparent)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 18,
              }}>&#x1F512;</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 15, color: "var(--ink)", marginBottom: 4 }}>{t.ai.badgeTitle}</div>
                <div style={{ fontSize: 13.5, color: "var(--ink-soft)", lineHeight: 1.6 }}>
                  {t.ai.badgeBody}
                </div>
              </div>
            </div>

            <div style={{ display: "grid", gap: 12, marginBottom: 28 }}>
              {t.ai.features.map((f) => (
                <div key={f.label} style={{
                  display: "flex", alignItems: "center", gap: 16,
                  padding: "14px 18px", background: "var(--card)",
                  border: "1px solid var(--border)", borderRadius: 12,
                }}>
                  <div style={{ width: 8, height: 8, borderRadius: "50%", flexShrink: 0, background: "var(--accent)" }}></div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 15, color: "var(--ink)", marginBottom: 2 }}>{f.label}</div>
                    <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>{f.desc}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* Disclaimer */}
            <div style={{
              display: "flex", alignItems: "flex-start", gap: 10,
              padding: "14px 16px",
              background: "var(--card)",
              border: "1px solid var(--border)",
              borderRadius: 10,
              opacity: 0.75,
            }}>
              <div style={{ fontSize: 14, flexShrink: 0, marginTop: 1 }}>&#9432;</div>
              <div style={{ fontSize: 12.5, color: "var(--ink-soft)", lineHeight: 1.6 }}>
                <strong style={{ color: "var(--ink)" }}>{t.ai.disclaimerTitle}</strong> {t.ai.disclaimerBody}
              </div>
            </div>
          </Reveal>

        </div>
      </div>
    </section>
  );
}

// ---------- Studies Section ----------
function StudiesSection({ t, lang }) {
  const [active, setActive] = useStateS(0);
  const tabImgs = lang === "es" ? [
    "assets/app-study-library-es.png",
    "assets/app-study-overview-es.png",
    "assets/app-study-add-es.png",
    "assets/app-study-share-es.png",
  ] : lang === "fr" ? [
    "assets/app-study-library-fr.png",
    "assets/app-study-overview-fr.png",
    "assets/app-study-add-fr.png",
    "assets/app-study-share-fr.png",
  ] : lang === "de" ? [
    "assets/app-study-library-de.png",
    "assets/app-study-overview-de.png",
    "assets/app-study-add-de.png",
    "assets/app-study-share-de.png",
  ] : lang === "pt" ? [
    "assets/app-study-library-pt.png",
    "assets/app-study-overview-pt.png",
    "assets/app-study-add-pt.png",
    "assets/app-study-share-pt.png",
  ] : lang === "hi" ? [
    "assets/app-study-library-hi.png",
    "assets/app-study-overview-hi.png",
    "assets/app-study-add-hi.png",
    "assets/app-study-share-hi.png",
  ] : [
    "assets/app-study-library.png",
    "assets/app-study-overview.png",
    "assets/app-study-add.png",
    "assets/app-study-share.png",
  ];

  const screens = t.studies.tabs.map((tab, i) => ({
    img: tabImgs[i] || tabImgs[0],
    label: tab.label,
    eyebrow: "✦ " + tab.eyebrow,
    title: tab.title,
    em: tab.em,
    body: tab.body,
    features: tab.features.map((f) => [f.label, f.desc]),
  }));

  const s = screens[active];

  return (
    <section id="studies" className="fj-section soft" data-screen-label="Studies" style={{ overflow: "hidden" }}>
      <div className="fj-wrap">
        <div className="fj-split">

          {/* LEFT — text + buttons */}
          <div>
            <Reveal>
              <div className="fj-eyebrow" style={{ marginBottom: 20 }}>{s.eyebrow}</div>
              <h2 className="fj-h2" style={{ marginBottom: 28 }}>
                {s.title}<br></br>
                <em>{s.em}</em>
              </h2>
              <p className="fj-body" style={{ maxWidth: 480, margin: "0 0 36px" }}>{s.body}</p>
            </Reveal>
            <div style={{ display: "grid", gap: 14 }}>
              {screens.map((sc, i) => (
                <button type="button" key={i}
                  className={"fj-feature-btn" + (active === i ? " active" : "")}
                  onClick={() => setActive(i)}
                >
                  <div className="fj-feature-num">{i + 1}</div>
                  <div style={{ textAlign: "left" }}>
                    <div className="fj-feature-label">{sc.label}</div>
                    <div style={{ fontSize: 12.5, color: active === i ? "color-mix(in oklab, var(--accent) 80%, var(--ink))" : "var(--ink-soft)", marginTop: 2 }}>
                      {sc.features[0][0]} · {sc.features[1][0]}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* RIGHT — stacked phones */}
          <div style={{ position: "relative", height: 680, display: "flex", alignItems: "center", justifyContent: "center" }}>
            {screens.map((sc, i) => {
              const offset = i - active;
              return (
                <div key={i} onClick={() => setActive(i)} style={{
                  position: "absolute", width: 290, height: 620,
                  transform: `translateX(${offset * 140}px) scale(${active === i ? 1 : 0.82}) rotate(${offset * 4}deg)`,
                  transition: "all 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2)",
                  zIndex: active === i ? 10 : 10 - Math.abs(offset),
                  opacity: Math.abs(offset) > 1 ? 0 : 1,
                  cursor: "pointer",
                  filter: active === i ? "none" : "brightness(0.88)",
                }}>
                  <PhoneFrame img={sc.img} width={290} glow={active === i}></PhoneFrame>
                </div>
              );
            })}
          </div>

        </div>
      </div>
    </section>
  );
}

// ---------- App showcase ----------
function PhoneShowcase({ t, lang }) {
  const homeImgs = {
    en: "assets/app-home-v2.png",
    es: "assets/app-home-es.png",
    fr: "assets/app-home-fr.png",
    pt: "assets/app-home-pt.png",
    hi: "assets/app-home-hi.png",
    de: "assets/app-home-de.png",
  };
  const icloudImg = lang === "es" ? "assets/app-icloud-es.png"
    : lang === "fr" ? "assets/app-icloud-fr.png"
    : lang === "de" ? "assets/app-icloud-de.png"
    : lang === "pt" ? "assets/app-icloud-pt.png"
    : lang === "hi" ? "assets/app-icloud-hi.png"
    : "assets/app-icloud.png";
  const imgs = lang === "es"
    ? ["assets/app-achievements-es.png", "assets/app-library-es.png", "assets/app-friends.png", "assets/app-widgets-es.png", icloudImg]
    : lang === "fr"
    ? ["assets/app-achievements-fr.png", "assets/app-library-fr.png", "assets/app-friends.png", "assets/app-widgets-fr.png", icloudImg]
    : lang === "de"
    ? ["assets/app-achievements-de.png", "assets/app-library-de.png", "assets/app-friends.png", "assets/app-widgets-de.png", icloudImg]
    : lang === "pt"
    ? ["assets/app-achievements-pt.png", "assets/app-library-pt.png", "assets/app-friends.png", "assets/app-widgets-pt.png", icloudImg]
    : lang === "hi"
    ? ["assets/app-achievements-hi.png", "assets/app-library-hi.png", "assets/app-friends.png", "assets/app-widgets-hi.png", icloudImg]
    : ["assets/app-achievements.png", "assets/app-library.png", "assets/app-friends.png", "assets/app-widgets.png", icloudImg];
  const featureLabels = [
    t.companion.features[2],
    t.companion.features[3],
    t.companion.features[4],
    t.companion.features[0],
    t.companion.features[5],
  ];
  const [active, setActive] = useStateS(0);

  useEffectS(() => { setActive(0); }, [lang]);

  return (
    <section id="app-showcase" className="fj-section" data-screen-label="App Showcase">
      <div className="fj-wrap">
        <div className="fj-split">
          <div>
            <Reveal>
              <div className="fj-eyebrow" style={{ marginBottom: 20 }}>{t.companion.label}</div>
              <h2 className="fj-h2" style={{ marginBottom: 28 }}>
                {t.companion.title}<br></br>
                <em>{t.companion.em}</em>
              </h2>
              <p className="fj-body" style={{ maxWidth: 480, margin: "0 0 36px" }}>{t.companion.body}</p>
            </Reveal>
            <div style={{ display: "grid", gap: 14 }}>
              {featureLabels.map((label, i) => (
                <button type="button" key={i} className={"fj-feature-btn" + (active === i ? " active" : "")} onClick={() => setActive(i)}>
                  <div className="fj-feature-num">{i + 1}</div>
                  <span className="fj-feature-label">{label}</span>
                </button>
              ))}
            </div>
          </div>
          <div style={{ position: "relative", height: 680, display: "flex", alignItems: "center", justifyContent: "center" }}>
            {imgs.map((img, i) => {
              const offset = i - active;
              return (
                <div key={i} onClick={() => setActive(i)} style={{
                  position: "absolute", width: 290, height: 620,
                  transform: `translateX(${offset * 160}px) scale(${active === i ? 1 : 0.82}) rotate(${offset * 4}deg)`,
                  transition: "all 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2)",
                  zIndex: active === i ? 10 : 10 - Math.abs(offset),
                  opacity: Math.abs(offset) > 1 ? 0 : 1,
                  cursor: "pointer",
                  filter: active === i ? "none" : "brightness(0.88)",
                }}>
                  <PhoneFrame img={img} width={290} glow={active === i} imgStyle={i === 4 ? { objectFit: "contain", background: "#0a1628" } : {}}></PhoneFrame>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Stats ----------
function StatsStrip({ t }) {
  const nums = [1189, 66, 10, 100, 6];
  return (
    <section className="fj-section" data-screen-label="Stats" style={{ borderTop: "1px solid var(--border)", paddingTop: 100, paddingBottom: 100 }}>
      <div className="fj-wrap">
        <div className="fj-stats-grid">
          {t.stats.items.map((s, i) => (
            <div key={i} className="fj-stat">
              <div className="fj-stat-num">
                <CountUp to={nums[i]}></CountUp>
                {(i === 2 || i === 3 || i === 4) && <span className="gold">+</span>}
              </div>
              <div style={{ fontSize: 16, fontWeight: 600, color: "var(--ink)", marginBottom: 4 }}>{s.label}</div>
              <div className="fj-mono-sm" style={{ fontSize: 12.5, color: "var(--ink-soft)" }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Chapter grid demo ----------
function ChapterGridDemo({ t }) {
  const BOOKS = [{ chapters: 31, read: 3 }, { chapters: 28, read: 0 }];
  const [bookIdx, setBookIdx] = useStateS(0);
  const book = BOOKS[bookIdx];
  const [read, setRead] = useStateS(() => new Set([1, 2, 3]));

  useEffectS(() => {
    const s = new Set();
    for (let i = 1; i <= BOOKS[bookIdx].read; i++) s.add(i);
    setRead(s);
  }, [bookIdx]);

  const toggle = (n) => setRead((prev) => {
    const next = new Set(prev);
    next.has(n) ? next.delete(n) : next.add(n);
    return next;
  });

  const pct = (read.size / book.chapters) * 100;

  return (
    <section id="themes" className="fj-section soft" data-screen-label="Chapter Demo">
      <div className="fj-wrap narrow">
        <Reveal style={{ textAlign: "center", marginBottom: 56 }}>
          <div className="fj-eyebrow centered" style={{ marginBottom: 20 }}>{t.demo.label}</div>
          <h2 className="fj-h2">
            {t.demo.title} <em>{t.demo.em}</em>
          </h2>
        </Reveal>
        <div className="fj-demo-card">
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 30 }}>
            {t.demo.books.map((name, i) => (
              <button type="button" key={i} className={"fj-book-tab" + (bookIdx === i ? " active" : "")} onClick={() => setBookIdx(i)}>{name}</button>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 22 }}>
            <h3 style={{
              fontFamily: "var(--serif)", fontSize: "clamp(38px, 4.5vw, 58px)", fontWeight: 500, margin: 0,
              color: "var(--ink)", letterSpacing: "0.05em", textTransform: "uppercase",
            }}>{t.demo.books[bookIdx]}</h3>
            <div className="fj-mono-sm" style={{ fontSize: 14, color: "var(--ink-soft)" }}>{read.size} / {book.chapters} {t.demo.chapters}</div>
          </div>
          <div style={{ height: 4, background: "var(--border)", borderRadius: 2, marginBottom: 36, overflow: "hidden" }}>
            <div style={{ height: "100%", width: `${pct}%`, background: "var(--accent)", borderRadius: 2, transition: "width 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2)" }}></div>
          </div>
          <div className="fj-chapter-grid">
            {Array.from({ length: book.chapters }, (_, i) => i + 1).map((n) => (
              <button type="button" key={n} className={"fj-chapter" + (read.has(n) ? " read" : "")} onClick={() => toggle(n)}>
                {n}
                {read.has(n) && <span style={{ fontSize: 10, marginTop: 2, opacity: 0.7 }}>✓</span>}
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Themes showcase ----------
function ThemesShowcase({ t, themeKey, setThemeKey }) {
  return (
    <section className="fj-section" data-screen-label="Themes">
      <div className="fj-wrap">
        <div className="fj-split">
          <Reveal>
            <div className="fj-eyebrow" style={{ marginBottom: 20 }}>{t.themesSec.label}</div>
            <h2 className="fj-h2" style={{ marginBottom: 28 }}>
              {t.themesSec.title} <em>{t.themesSec.em}</em>
            </h2>
            <p className="fj-body" style={{ maxWidth: 500 }}>{t.themesSec.body}</p>
          </Reveal>
          <div className="fj-theme-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {window.FJ_THEME_ORDER.map((key) => {
              const tt = window.FJ_THEMES[key];
              const names = t.themesSec.items[key];
              const active = themeKey === key;
              return (
                <button type="button" key={key} className={"fj-theme-card" + (active ? " active" : "")}
                  style={{ background: tt.bg, borderColor: active ? "var(--accent)" : "transparent" }}
                  onClick={() => setThemeKey(key)}>
                  <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
                    <span style={{ width: 14, height: 14, borderRadius: "50%", background: tt.accent }}></span>
                    <span style={{ width: 14, height: 14, borderRadius: "50%", background: tt.ink, opacity: 0.85 }}></span>
                    <span style={{ width: 14, height: 14, borderRadius: "50%", background: tt.card, border: `1px solid ${tt.accent}55` }}></span>
                  </div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 500, color: tt.ink, marginBottom: 4 }}>{names.name}</div>
                  <div className="fj-mono-sm" style={{ fontSize: 11, textTransform: "uppercase", color: tt.inkSoft }}>{names.sub}</div>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Mission ----------
function Mission({ t, themeKey }) {
  const th = window.FJ_THEMES[themeKey];
  const inverted = !th.dark;
  const bg = inverted ? th.ink : th.card;
  const fg = inverted ? th.bg : th.ink;
  const pledgeIcons = ["🕊", "🚫", "🔓", "📵"];
  return (
    <section id="mission" className="fj-section" data-screen-label="Mission" style={{ background: bg, color: fg, overflow: "hidden", paddingTop: 150, paddingBottom: 150 }}>
      <div style={{
        position: "absolute", top: "-20%", left: "-10%",
        fontFamily: "var(--serif)", fontSize: 600, fontWeight: 500,
        color: "var(--accent)", opacity: 0.08, lineHeight: 1, pointerEvents: "none",
      }}>✦</div>
      <div className="fj-wrap" style={{ maxWidth: 900, textAlign: "center" }}>
        <Reveal>
          <div className="fj-eyebrow centered" style={{ color: "var(--accent)", marginBottom: 30 }}>{t.mission.label}</div>
          <h2 className="fj-h2" style={{ color: fg, marginBottom: 36 }}>
            {t.mission.title}<br></br>
            <em>{t.mission.em}</em>
          </h2>
          <p style={{ fontSize: 21, lineHeight: 1.65, margin: "0 0 22px", opacity: 0.88, textWrap: "pretty" }}>{t.mission.body1}</p>

          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24,
            maxWidth: 700, margin: "0 auto", paddingTop: 38,
            borderTop: "1px solid color-mix(in oklab, var(--accent) 35%, transparent)",
          }}>
            {t.mission.pledges.map((label, i) => (
              <div key={i} style={{ textAlign: "center" }}>
                <div style={{ fontSize: 26, marginBottom: 10, color: "var(--accent)" }}>{pledgeIcons[i]}</div>
                <div className="fj-mono-sm" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", opacity: 0.8 }}>{label}</div>
              </div>
            ))}
          </div>

          <div style={{
            maxWidth: 560, margin: "48px auto 0",
            background: "var(--card)", border: "1px solid var(--border)",
            borderRadius: 24, padding: "32px 40px",
            position: "relative", overflow: "hidden", textAlign: "center",
          }}>
            <div style={{
              position: "absolute", top: -50, right: -50, width: 180, height: 180, borderRadius: "50%",
              background: "radial-gradient(circle, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%)",
              pointerEvents: "none",
            }}></div>
            <p style={{ margin: "0 0 10px", fontFamily: "var(--serif)", fontSize: 15, fontStyle: "italic", fontWeight: 600, color: "var(--ink)", lineHeight: 1.5 }}>{t.mission.ded1}</p>
            <p style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 14, fontStyle: "italic", color: "var(--ink-soft)", lineHeight: 1.7 }}>{t.mission.ded2}</p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Reading plans ----------
function ReadingPlans({ t }) {
  const days = [365, 365, 30, 60, 90, 0];
  return (
    <section id="plans" className="fj-section soft" data-screen-label="Reading Plans">
      <div className="fj-wrap">
        <Reveal style={{ marginBottom: 56, textAlign: "center" }}>
          <div className="fj-eyebrow centered" style={{ marginBottom: 20 }}>{t.plans.label}</div>
          <h2 className="fj-h2" style={{ maxWidth: 900, textAlign: "center", margin: "0 auto" }}>
            {t.plans.title}<br></br>
            <em>{t.plans.em}</em>
          </h2>
        </Reveal>
        <div className="fj-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {t.plans.items.map((p, i) => (
            <div key={i} className="fj-plan-card">
              <div style={{
                position: "absolute", top: -40, right: -40, width: 160, height: 160, borderRadius: "50%",
                background: "radial-gradient(circle, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%)",
              }}></div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 54, fontWeight: 500, color: "var(--accent)", lineHeight: 1, letterSpacing: "-0.03em", textAlign: "center" }}>{days[i] === 0 ? "∞" : days[i]}</div>
              <div className="fj-mono-sm" style={{ fontSize: 11, textTransform: "uppercase", color: "var(--ink-soft)", marginTop: 4, marginBottom: 18, textAlign: "center" }}>{days[i] === 0 ? "Custom" : t.plans.days}</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 25, fontWeight: 500, color: "var(--ink)", lineHeight: 1.18, marginBottom: 12, textAlign: "center" }}>{p.name}</div>
              <div style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-soft)", textAlign: "center" }}>{p.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Reviews (coming soon) ----------
const FJ_REVIEWS_SOON = {
  en: { heading: "From the App Store", sub: "Reviews are on their way.", body: "Faith & Joy is just getting started. As our community grows, stories of daily reading, answered prayers, and renewed faith will fill this space. We can't wait to hear yours.", cta: "Be the first to leave a review" },
  es: { heading: "En el App Store", sub: "Las reseñas están en camino.", body: "Faith & Joy acaba de comenzar. A medida que nuestra comunidad crece, este espacio se llenará de historias de lectura diaria, oraciones respondidas y fe renovada. No podemos esperar para leer la tuya.", cta: "Sé de los primeros en dejar una reseña" },
  fr: { heading: "Sur l'App Store", sub: "Les avis arrivent bientôt.", body: "Faith & Joy débute tout juste. Au fil de la croissance de notre communauté, cet espace se remplira d'histoires de lecture quotidienne, de prières exaucées et de foi renouvelée. Nous avons hâte d'entendre la vôtre.", cta: "Soyez parmi les premiers à laisser un avis" },
  pt: { heading: "Na App Store", sub: "As avaliações estão a caminho.", body: "O Faith & Joy está apenas começando. À medida que nossa comunidade cresce, histórias de leitura diária, orações respondidas e fé renovada vão preencher este espaço. Mal podemos esperar para ouvir a sua.", cta: "Seja um dos primeiros a deixar uma avaliação" },
  hi: { heading: "App Store पर", sub: "समीक्षाएं जल्द आ रही हैं।", body: "Faith & Joy अभी शुरू हुआ है। जैसे-जैसे हमारा समुदाय बढ़ेगा, दैनिक पाठ, उत्तरित प्रार्थनाओं और नवीनीकृत विश्वास की कहानियाँ इस स्थान को भर देंगी। हम आपकी कहानी सुनने के लिए उत्सुक हैं।", cta: "पहले समीक्षा देने वालों में शामिल हों" },
  de: { heading: "Im App Store", sub: "Bewertungen sind unterwegs.", body: "Faith & Joy hat gerade erst begonnen. Während unsere Gemeinschaft wächst, werden Geschichten über tägliches Lesen, erhörte Gebete und erneuertem Glauben diesen Raum füllen. Wir freuen uns darauf, Ihre zu hören.", cta: "Seien Sie unter den Ersten, die eine Bewertung hinterlassen" },
};

function ReviewStars({ count }) {
  return (
    <div style={{ display: "flex", gap: 4, justifyContent: "center" }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} width="18" height="18" viewBox="0 0 14 14" fill={i < count ? "var(--accent)" : "none"} stroke="var(--accent)" strokeWidth="1.2">
          <polygon points="7,1 8.8,5.2 13.4,5.5 10,8.5 11.1,13 7,10.5 2.9,13 4,8.5 0.6,5.5 5.2,5.2" />
        </svg>
      ))}
    </div>
  );
}

function PrayerWall({ t, lang }) {
  const copy = FJ_REVIEWS_SOON[lang] || FJ_REVIEWS_SOON.en;
  return (
    <section className="fj-section" data-screen-label="Reviews" style={{ borderTop: "1px solid var(--border)" }}>
      <div className="fj-wrap">
        <Reveal style={{ textAlign: "center", marginBottom: 64 }}>
          <div className="fj-eyebrow centered" style={{ marginBottom: 20 }}>{copy.heading}</div>
          <h2 className="fj-h2">
            {t.reviews.title}<br />
            <em>{t.reviews.em}</em>
          </h2>
        </Reveal>
        <Reveal>
          <div style={{
            maxWidth: 680, margin: "0 auto",
            background: "var(--card)", border: "1px solid var(--border)",
            borderRadius: 24, padding: "60px 56px", textAlign: "center",
            position: "relative", overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", top: -60, right: -60, width: 260, height: 260, borderRadius: "50%",
              background: "radial-gradient(circle, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%)",
              pointerEvents: "none",
            }}></div>
            <ReviewStars count={5}></ReviewStars>
            <p style={{
              fontFamily: "var(--serif)", fontSize: "clamp(22px, 2.2vw, 30px)", fontStyle: "italic",
              color: "var(--ink)", lineHeight: 1.55, margin: "28px 0 18px", textWrap: "pretty",
            }}>{copy.sub}</p>
            <p style={{ fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.7, margin: "0 0 36px", textWrap: "pretty" }}>{copy.body}</p>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "11px 22px",
              border: "1px solid color-mix(in oklab, var(--accent) 50%, var(--border))",
              borderRadius: 100,
              fontFamily: "var(--mono)", fontSize: 11.5, letterSpacing: "0.1em",
              textTransform: "uppercase", color: "var(--accent-deep)",
            }}>
              <svg width="12" height="12" viewBox="0 0 14 14" fill="var(--accent)" stroke="none">
                <polygon points="7,1 8.8,5.2 13.4,5.5 10,8.5 11.1,13 7,10.5 2.9,13 4,8.5 0.6,5.5 5.2,5.2" />
              </svg>
              {copy.cta}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Download CTA ----------
function DownloadCTA({ t }) {
  return (
    <section id="download" className="fj-section soft" data-screen-label="Download" style={{ textAlign: "center", paddingTop: 150, paddingBottom: 150 }}>
      <div className="fj-wrap" style={{ maxWidth: 900 }}>
        <Reveal>
          <h2 className="fj-h2" style={{ fontSize: "clamp(52px, 7.5vw, 110px)", marginBottom: 36 }}>
            {t.download.title}<br></br>
            <em>{t.download.em}</em>
          </h2>
          <p className="fj-body" style={{ fontSize: 20, margin: "0 auto 52px", maxWidth: 560 }}>{t.download.body}</p>
          <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "nowrap" }}>
            <a className="fj-cta" href="#" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}>
              <AppleGlyph size={15}></AppleGlyph>
              {t.ui.downloadIos}
            </a>
            <a className="fj-cta" href="#" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}>
              <AppleGlyph size={15}></AppleGlyph>
              {t.ui.downloadIpad}
            </a>
            <a className="fj-cta" href="#" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}>
              <AppleGlyph size={15}></AppleGlyph>
              {t.ui.downloadMac}
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Footer ----------
const FJ_SOCIAL_FOOTER = window.FJ_SOCIAL || [];

function CopyEmail() {
  const [copied, setCopied] = useStateS(false);
  const email = "hello@faithandjoy.app";
  const copy = () => {
    navigator.clipboard.writeText(email).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };
  return (
    <button type="button" onClick={copy} title="Copy email" style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      background: "none", border: "1px solid var(--border)", borderRadius: 8,
      padding: "7px 13px", cursor: "pointer", marginTop: 18,
      fontFamily: "var(--mono)", fontSize: 12.5, color: copied ? "var(--accent)" : "var(--ink-soft)",
      transition: "color 0.2s, border-color 0.2s",
      borderColor: copied ? "color-mix(in oklab, var(--accent) 50%, var(--border))" : "var(--border)",
    }}>
      {copied ? (
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
      ) : (
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
      )}
      {copied ? "Copied!" : email}
    </button>
  );
}

function FJFooter({ t, themeKey }) {
  const theme = window.FJ_THEMES[themeKey];
  return (
    <footer className="fj-section" data-screen-label="Footer" style={{ paddingTop: 64, paddingBottom: 40, color: "var(--ink-soft)" }}>
      <div className="fj-wrap">
        <div className="fj-footer-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 40, marginBottom: 40 }}>
          <div>
            <img src={theme.logo} alt="Faith & Joy" style={{ height: 44, width: "auto", display: "block", marginBottom: 20 }}></img>
            <p style={{ fontFamily: "var(--serif)", fontSize: 18, fontStyle: "italic", lineHeight: 1.5, maxWidth: 320, margin: 0, color: "var(--ink)" }}>{t.footer.quote}</p>
            <div className="fj-mono-sm" style={{ fontSize: 11, marginTop: 6, color: "var(--accent-deep)" }}>— {t.footer.ref}</div>
          </div>
          {t.footer.cols.map((col, i) => (
            <div key={i}>
              <div className="fj-mono-sm" style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent-deep)", marginBottom: 16 }}>{col.title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }}>
                {col.links.map((item) => {
                  const privacyLabels = new Set(["Privacy","Privacidad","Confidentialité","Privacidade","गोपनीयता","Datenschutz"]);
                  const contactLabels = new Set(["Contact","Contáctanos","Nous écrire","Contato","संपर्क करें","Schreib uns"]);
                  const supportLabels = new Set(["Support us","Apóyanos","Nous soutenir","Apoie-nos","हमारा साथ दें","Unterstütze uns"]);
                  const featuresLabels = new Set(["Features","Funciones","Fonctions","Recursos","विशेषताएँ","Funktionen"]);
                  const themesLabels = new Set(["Themes","Temas","Thèmes","Temas","थीम","Designs"]);
                  const plansLabels = new Set(["Plans","Planes","Parcours","Planos","योजनाएँ","Lesepläne"]);
                  const downloadLabels = new Set(["Download","Descargar","Télécharger","Baixar","डाउनलोड","Laden"]);
                  const missionLabels = new Set(["Why free?","¿Por qué gratis?","Pourquoi gratuit ?","Por que grátis?","मुफ़्त क्यों?","Warum kostenlos?"]);
                  const href = privacyLabels.has(item) ? "privacy.html"
                    : contactLabels.has(item) ? "mailto:hello@faithandjoy.app"
                    : supportLabels.has(item) ? "https://ko-fi.com/faithandjoy"
                    : featuresLabels.has(item) ? "#features"
                    : themesLabels.has(item) ? "#themes"
                    : plansLabels.has(item) ? "#plans"
                    : downloadLabels.has(item) ? "#download"
                    : missionLabels.has(item) ? "#mission"
                    : "#";
                  const external = supportLabels.has(item) || contactLabels.has(item);
                  return (
                    <li key={item}><a href={href} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined} style={{ color: "var(--ink)", textDecoration: "none", fontSize: 15 }}>{item}</a></li>
                  );
                })}
              {i === 2 && (
                <li style={{ marginTop: 12 }}>
                  <div style={{ display: "flex", gap: 8 }}>
                    {FJ_SOCIAL_FOOTER.map((s) => (
                      <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" title={s.label} style={{
                        width: 32, height: 32, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center",
                        background: "var(--card)", border: "1px solid var(--border)",
                        color: "var(--ink-soft)", transition: "color 0.2s, border-color 0.2s",
                      }}
                      onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; e.currentTarget.style.borderColor = "color-mix(in oklab, var(--accent) 50%, var(--border))"; }}
                      onMouseLeave={(e) => { e.currentTarget.style.color = "var(--ink-soft)"; e.currentTarget.style.borderColor = "var(--border)"; }}
                      >{s.icon}</a>
                    ))}
                  </div>
                </li>
              )}
              {i === 2 && <li style={{ marginTop: 8 }}><CopyEmail></CopyEmail></li>}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          paddingTop: 32, borderTop: "1px solid var(--border)",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
        }} className="fj-mono-sm">
          <div>{t.footer.copyright}</div>
          <div>{t.footer.soli}</div>
        </div>
      </div>
    </footer>
  );
}

// ---------- 3D Model Showcase ----------
function ModelShowcase3D({ modelUrl, t }) {
  const hasModel = modelUrl && modelUrl.trim() !== "";

  return (
    <section id="model3d" className="fj-section" data-screen-label="3D Showcase" style={{ overflow: "hidden" }}>
      <div style={{
        position: "absolute", top: -200, left: "50%", transform: "translateX(-50%)",
        width: 700, height: 700, borderRadius: "50%",
        background: "radial-gradient(circle, color-mix(in oklab, var(--accent) 8%, transparent), transparent 65%)",
        pointerEvents: "none",
      }}></div>
      <div className="fj-wrap">
        <div className="fj-split" style={{ alignItems: "start", gap: 60 }}>

          <div>
            <Reveal>
              <div className="fj-eyebrow" style={{ marginBottom: 20 }}>✦ {t.achievements.eyebrow}</div>
              <h2 className="fj-h2" style={{ marginBottom: 28 }}>
                {t.achievements.title}<br></br>
                <em>{t.achievements.em}</em>
              </h2>
              <p className="fj-body" style={{ maxWidth: 460, margin: "0 0 36px" }}>
                {t.achievements.body}
              </p>
              <div style={{ display: "grid", gap: 14 }}>
                {t.achievements.steps.map((step) => (
                  <div key={step.num} style={{
                    display: "flex", alignItems: "center", gap: 16,
                    padding: "16px 20px", background: "var(--card)",
                    border: "1px solid var(--border)", borderRadius: 12,
                  }}>
                    <div style={{
                      width: 36, height: 36, borderRadius: 8, flexShrink: 0,
                      background: "color-mix(in oklab, var(--accent) 14%, transparent)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontFamily: "var(--mono)", fontSize: 11, fontWeight: 600,
                      color: "var(--accent)", letterSpacing: "0.05em",
                    }}>{step.num}</div>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 15, color: "var(--ink)", marginBottom: 2 }}>{step.label}</div>
                      <div className="fj-mono-sm" style={{ fontSize: 11.5, color: "var(--ink-soft)" }}>{step.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          <Reveal delay={150} style={{ width: "100%" }}>
            <div style={{
              width: "100%", aspectRatio: "1 / 1", maxHeight: 580,
              background: "var(--card)",
              border: "1px solid var(--border)",
              borderRadius: 24,
              overflow: "hidden",
              position: "relative",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              {hasModel ? (
                <iframe
                  src={modelUrl}
                  title="3D Model Viewer"
                  allow="autoplay; fullscreen; xr-spatial-tracking"
                  allowFullScreen={true}
                  style={{ width: "100%", height: "100%", border: "none" }}
                ></iframe>
              ) : (
                <div style={{ textAlign: "center", padding: 48, maxWidth: 380 }}>
                  <div style={{
                    width: 80, height: 80, borderRadius: 20, margin: "0 auto 24px",
                    background: "color-mix(in oklab, var(--accent) 12%, transparent)",
                    border: "1.5px dashed color-mix(in oklab, var(--accent) 60%, transparent)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontFamily: "var(--serif)", fontSize: 36, color: "var(--accent)",
                  }}>✦</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 500, color: "var(--ink)", marginBottom: 12 }}>
                    {t.achievements.placeholderTitle}
                  </div>
                  <div style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.6, marginBottom: 28 }}>
                    {t.achievements.placeholderBody}
                  </div>
                  <div style={{
                    padding: "11px 20px",
                    background: "color-mix(in oklab, var(--accent) 10%, transparent)",
                    border: "1px solid var(--border)", borderRadius: 8,
                    fontFamily: "var(--mono)", fontSize: 11, color: "var(--accent-deep)",
                    letterSpacing: "0.08em", textTransform: "uppercase",
                  }}>{t.achievements.placeholderCta}</div>
                </div>
              )}
            </div>
          </Reveal>

          {hasModel && (
            <Reveal delay={200} style={{ textAlign: "center", marginTop: 16 }}>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.12em",
                textTransform: "uppercase", color: "var(--ink-soft)",
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 9l-3 3 3 3"/><path d="M19 9l3 3-3 3"/><path d="M2 12h20"/><circle cx="12" cy="5" r="2"/><circle cx="12" cy="19" r="2"/>
                </svg>
                {t.ui.dragHint}
              </div>
            </Reveal>
          )}

        </div>
      </div>
    </section>
  );
}

// ---------- Share Section ----------
function ShareSection({ t, lang }) {
  const [active, setActive] = useStateS(0);
  const tabImgs = [lang === "es" ? "assets/app-share-verse-es.png" : lang === "fr" ? "assets/app-share-verse-fr.png" : lang === "de" ? "assets/app-share-verse-de.png" : lang === "pt" ? "assets/app-share-verse-pt.png" : lang === "hi" ? "assets/app-share-verse-hi.png" : "assets/app-share-verse.png", "assets/app-share-stats.png"];

  const screens = t.share.tabs.map((tab, i) => ({
    img: tabImgs[i] || tabImgs[0],
    label: tab.label,
    eyebrow: "✦ " + tab.eyebrow,
    title: tab.title,
    em: tab.em,
    body: tab.body,
    features: tab.features.map((f) => [f.label, f.desc]),
  }));

  const s = screens[active];

  return (
    <section className="fj-section soft" data-screen-label="Share" style={{ overflow: "hidden" }}>
      <div className="fj-wrap">
        <div className="fj-split">

          {/* LEFT — stacked phones */}
          <div style={{ position: "relative", height: 680, display: "flex", alignItems: "center", justifyContent: "center" }}>
            {screens.map((sc, i) => {
              const offset = i - active;
              return (
                <div key={i} onClick={() => setActive(i)} style={{
                  position: "absolute", width: 290, height: 620,
                  transform: `translateX(${offset * 140}px) scale(${active === i ? 1 : 0.82}) rotate(${offset * 4}deg)`,
                  transition: "all 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2)",
                  zIndex: active === i ? 10 : 10 - Math.abs(offset),
                  opacity: Math.abs(offset) > 1 ? 0 : 1,
                  cursor: "pointer",
                  filter: active === i ? "none" : "brightness(0.88)",
                }}>
                  <PhoneFrame img={sc.img} width={290} glow={active === i} imgStyle={(lang === "es" || lang === "fr" || lang === "de" || lang === "pt" || lang === "hi") && i === 0 ? { objectFit: "contain", background: "#0a1628" } : {}}></PhoneFrame>
                </div>
              );
            })}
          </div>

          {/* RIGHT — text + buttons */}
          <div>
            <Reveal>
              <div className="fj-eyebrow" style={{ marginBottom: 20 }}>{s.eyebrow}</div>
              <h2 className="fj-h2" style={{ marginBottom: 28 }}>
                {s.title}<br></br>
                <em>{s.em}</em>
              </h2>
              <p className="fj-body" style={{ maxWidth: 480, margin: "0 0 36px" }}>{s.body}</p>
            </Reveal>
            <div style={{ display: "grid", gap: 14 }}>
              {screens.map((sc, i) => (
                <button type="button" key={i}
                  className={"fj-feature-btn" + (active === i ? " active" : "")}
                  onClick={() => setActive(i)}
                >
                  <div className="fj-feature-num">{i + 1}</div>
                  <div style={{ textAlign: "left" }}>
                    <div className="fj-feature-label">{sc.label}</div>
                    <div style={{ fontSize: 12.5, color: active === i ? "color-mix(in oklab, var(--accent) 80%, var(--ink))" : "var(--ink-soft)", marginTop: 2 }}>
                      {sc.features[0][0]} · {sc.features[1][0]}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Reveal, CountUp, DailyVerse, BookViewSection, LibraryFeatures, FaithJoyAI, StudiesSection, ShareSection, PhoneShowcase, StatsStrip, ChapterGridDemo,
  ThemesShowcase, Mission, ReadingPlans, PrayerWall, DownloadCTA, FJFooter,
  ModelShowcase3D,
});