// Faith & Joy v2 — fixed nav + three hero variants
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ---------- shared nav ----------
function FJNav({ t, lang, chosen, setLang, themeKey, setThemeKey, langVariant, cycleMs }) {
  const [scrolled, setScrolled] = useStateH(false);
  const [menuOpen, setMenuOpen] = useStateH(false);
  const [themeOpen, setThemeOpen] = useStateH(false);
  const menuRef = useRefH(null);
  const themeRef = useRefH(null);
  const desktopThemeRef = useRefH(null);

  useEffectH(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  // Close dropdowns when tapping outside
  useEffectH(() => {
    const handler = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
      const inMobileTheme = themeRef.current && themeRef.current.contains(e.target);
      const inDesktopTheme = desktopThemeRef.current && desktopThemeRef.current.contains(e.target);
      if (!inMobileTheme && !inDesktopTheme) setThemeOpen(false);
    };
    document.addEventListener("mousedown", handler);
    document.addEventListener("touchstart", handler);
    return () => {
      document.removeEventListener("mousedown", handler);
      document.removeEventListener("touchstart", handler);
    };
  }, []);

  const theme = window.FJ_THEMES[themeKey];
  const navKeys = ["features", "mission", "download"];

  const handleNavLink = () => setMenuOpen(false);
  const handleThemePick = (k) => { setThemeKey(k); setThemeOpen(false); };

  return (
    <nav className={"fj-nav" + (scrolled ? " scrolled" : "")}>
      <LanguagePill lang={lang} chosen={chosen} onChange={setLang} t={t} variant={langVariant} cycleMs={cycleMs}></LanguagePill>
      <img className="fj-nav-logo" src={theme.logo} alt="Faith & Joy"></img>

      {/* Desktop nav links */}
      <div className="fj-nav-links">
        {navKeys.map((k) => (
          <a key={k} href={"#" + k}>{t.nav[k]}</a>
        ))}
        <a href="https://ko-fi.com/faithandjoy" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)", fontWeight: 600 }}>{t.nav.supportUs || "Support us"}</a>
        <div style={{ display: "flex", gap: 8, alignItems: "center", marginLeft: 4 }}>
          {FJ_SOCIAL.map((s) => (
            <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" title={s.label} style={{
              width: 30, height: 30, borderRadius: 7, display: "flex", alignItems: "center", justifyContent: "center",
              color: "var(--ink-soft)", transition: "color 0.2s",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = "var(--ink-soft)"; }}
            >{s.icon}</a>
          ))}
        </div>
      </div>

      {/* Desktop theme picker */}
      <div className="fj-desktop-theme-wrap" ref={desktopThemeRef}>
        <button type="button" className={"fj-desktop-theme-btn" + (themeOpen ? " active" : "")}
          style={{ background: theme.bg }}
          onClick={() => { setThemeOpen((v) => !v); setMenuOpen(false); }}
          title={theme.name} aria-label="Change theme"
        >
          <span style={{ background: theme.accent }}></span>
        </button>
        {themeOpen && (
          <div className="fj-desktop-theme-dropdown">
            {window.FJ_THEME_ORDER.map((k) => {
              const tt = window.FJ_THEMES[k];
              return (
                <button type="button" key={k} title={tt.name}
                  className={"fj-theme-dot" + (themeKey === k ? " active" : "")}
                  style={{ background: tt.bg }}
                  onClick={() => handleThemePick(k)}
                >
                  <span style={{ background: tt.accent }}></span>
                </button>
              );
            })}
          </div>
        )}
      </div>

      {/* Mobile controls */}
      <div className="fj-mobile-controls">
        {/* Burger menu button */}
        <div className="fj-mobile-menu-wrap" ref={menuRef}>
          <button type="button" className={"fj-mobile-icon-btn" + (menuOpen ? " active" : "")}
            aria-label="Open menu" onClick={() => { setMenuOpen((v) => !v); setThemeOpen(false); }}>
            {menuOpen ? (
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
                <line x1="4" y1="4" x2="16" y2="16"/><line x1="16" y1="4" x2="4" y2="16"/>
              </svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
                <line x1="3" y1="6" x2="17" y2="6"/><line x1="3" y1="10" x2="17" y2="10"/><line x1="3" y1="14" x2="17" y2="14"/>
              </svg>
            )}
          </button>
          {menuOpen && (
            <div className="fj-mobile-menu-dropdown">
              {navKeys.map((k) => (
                <a key={k} href={"#" + k} className="fj-mobile-menu-link" onClick={handleNavLink}>{t.nav[k]}</a>
              ))}
              <a href="https://ko-fi.com/faithandjoy" target="_blank" rel="noopener noreferrer"
                className="fj-mobile-menu-link fj-mobile-menu-support" onClick={handleNavLink}>
                {t.nav.supportUs || "Support us"}
              </a>
              <div className="fj-mobile-menu-divider"></div>
              <div className="fj-mobile-menu-socials">
                {FJ_SOCIAL.map((s) => (
                  <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" title={s.label}
                    className="fj-mobile-social-btn">{s.icon}</a>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Theme circle button */}
        <div className="fj-mobile-theme-wrap" ref={themeRef}>
          <button type="button" className={"fj-desktop-theme-btn" + (themeOpen ? " active" : "")}
            style={{ background: theme.bg }}
            aria-label="Change theme" onClick={() => { setThemeOpen((v) => !v); setMenuOpen(false); }}
            title={theme.name}
          >
            <span style={{ background: theme.accent }}></span>
          </button>
          {themeOpen && (
            <div className="fj-mobile-theme-dropdown">
              {window.FJ_THEME_ORDER.map((k) => {
                const tt = window.FJ_THEMES[k];
                return (
                  <button type="button" key={k} title={tt.name}
                    className={"fj-theme-dot" + (themeKey === k ? " active" : "")}
                    style={{ background: tt.bg }}
                    onClick={() => handleThemePick(k)}
                  >
                    <span style={{ background: tt.accent }}></span>
                  </button>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </nav>
  );
}

// ---------- painted parallax scene ----------
function HeroScene({ themeKey, parallax = 0.35 }) {
  const [scroll, setScroll] = useStateH(0);
  useEffectH(() => {
    const on = () => setScroll(window.scrollY);
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const th = window.FJ_THEMES[themeKey];
  return (
    <div className="fj-hero-scene" style={{ transform: `translateY(${scroll * parallax}px)` }}>
      <div style={{ position: "absolute", inset: 0, background: th.sky }}></div>
      <div style={{
        position: "absolute", top: "16%", left: "50%", transform: "translateX(-50%)",
        width: 620, height: 620, filter: "blur(2px)",
        background: `radial-gradient(circle, ${th.sun} 0%, transparent 60%)`,
      }}></div>
      <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice" style={{ position: "absolute", bottom: 0, left: 0, width: "100%", height: "58%" }}>
        <defs>
          <linearGradient id="fj-mtn1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor={th.mtn1a}></stop>
            <stop offset="1" stopColor={th.mtn1b}></stop>
          </linearGradient>
          <linearGradient id="fj-mtn2" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor={th.mtn2a}></stop>
            <stop offset="1" stopColor={th.mtn2b}></stop>
          </linearGradient>
        </defs>
        <path d="M0,600 L150,420 L320,520 L480,360 L640,480 L820,300 L1000,440 L1180,360 L1360,500 L1600,380 L1600,900 L0,900 Z" fill="url(#fj-mtn2)" opacity="0.7"></path>
        <path d="M0,700 L120,560 L280,640 L440,500 L600,600 L780,480 L960,580 L1140,500 L1320,620 L1500,540 L1600,600 L1600,900 L0,900 Z" fill="url(#fj-mtn1)"></path>
        <path d="M780,620 Q750,700 680,780 Q600,860 500,900 L1100,900 Q1000,860 920,780 Q860,700 820,620 Z" fill={th.river}></path>
      </svg>
    </div>
  );
}

const FJ_SOCIAL = [
  {
    label: "YouTube",
    href: "https://www.youtube.com/@Faith_and_Joy",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
        <path d="M23 7s-.3-2-1.2-2.8c-1.1-1.2-2.4-1.2-3-1.3C16.2 2.8 12 2.8 12 2.8s-4.2 0-6.8.1c-.6.1-1.9.1-3 1.3C1.3 5 1 7 1 7S.7 9.1.7 11.2v2c0 2.1.3 4.2.3 4.2s.3 2 1.2 2.8c1.1 1.2 2.6 1.1 3.3 1.2C7.5 21.6 12 21.6 12 21.6s4.2 0 6.8-.2c.6-.1 1.9-.1 3-1.3.9-.8 1.2-2.8 1.2-2.8s.3-2.1.3-4.2v-2C23.3 9.1 23 7 23 7zM9.7 15.5V8.4l8.1 3.6-8.1 3.5z"/>
      </svg>
    ),
  },
  {
    label: "Instagram",
    href: "https://www.instagram.com/faithandjoy_bible/",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
      </svg>
    ),
  },
  {
    label: "TikTok",
    href: "https://www.tiktok.com/@faith_and_joy_app",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
        <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.75a4.85 4.85 0 01-1.01-.06z"/>
      </svg>
    ),
  },
  {
    label: "Reddit",
    href: "https://www.reddit.com/user/Faith_and_Joy/",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
      </svg>
    ),
  },
];

function HeroSocial() {
  return (
    <div style={{ display: "flex", gap: 10, marginTop: 4 }}>
      {FJ_SOCIAL.map((s) => (
        <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" title={s.label} style={{
          width: 36, height: 36, borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center",
          background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.15)",
          color: "rgba(255,255,255,0.7)", transition: "color 0.2s, border-color 0.2s, background 0.2s",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; e.currentTarget.style.borderColor = "color-mix(in oklab, var(--accent) 60%, transparent)"; e.currentTarget.style.background = "color-mix(in oklab, var(--accent) 12%, transparent)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(255,255,255,0.7)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.15)"; e.currentTarget.style.background = "rgba(255,255,255,0.08)"; }}
        >{s.icon}</a>
      ))}
    </div>
  );
}

const AppleGlyph = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.41-1.09-.47-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.41C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09M12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25"></path></svg>
);

function PhoneFrame({ img, width = 280, glow = true, imgStyle = {} }) {
  return (
    <div style={{
      width, aspectRatio: "300 / 640", background: "#000", borderRadius: 44, padding: 8, flex: "none",
      boxShadow: glow ? "0 40px 80px rgba(0,0,0,0.35), 0 0 0 2px rgba(201,165,92,0.4)" : "0 20px 50px rgba(0,0,0,0.25)",
    }}>
      <img src={img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 36, display: "block", ...imgStyle }}></img>
    </div>
  );
}

// ---------- Hero A — "Horizon": centered over the painted scene ----------
function HeroHorizon({ t, themeKey }) {
  const th = window.FJ_THEMES[themeKey];
  return (
    <section className="fj-hero" data-screen-label="Hero">
      <HeroScene themeKey={themeKey}></HeroScene>
      <div className="fj-hero-content">
        <div className="fj-hero-eyebrow">{t.hero.eyebrow}</div>
        <h1 className="fj-hero-title" style={{ display: "flex", justifyContent: "center", width: "100%" }}>
          <img src="assets/wordmark-gold-goldbook.png" alt="Faith & Joy" style={{
            width: "min(56vw, 860px)", minWidth: 300, height: "auto", display: "block",
            filter: th.dark ? "drop-shadow(0 4px 30px rgba(0,0,0,0.45))" : "drop-shadow(0 2px 16px rgba(58,46,31,0.18))",
          }}></img>
        </h1>
        <p className="fj-hero-tagline">{t.hero.tagline}</p>
        <div className="fj-hero-ctas" style={{ display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "center" }}>
          <a className="fj-cta" href="#download" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}><AppleGlyph size={15}></AppleGlyph><span className="fj-cta-long">{t.ui.downloadIos}</span><span className="fj-cta-short">iOS</span></a>
          <a className="fj-cta" href="#download" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}><AppleGlyph size={15}></AppleGlyph><span className="fj-cta-long">{t.ui.downloadIpad}</span><span className="fj-cta-short">iPadOS</span></a>
          <a className="fj-cta fj-cta-mac" href="#download" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}><AppleGlyph size={15}></AppleGlyph><span className="fj-cta-long">{t.ui.downloadMac}</span><span className="fj-cta-short">macOS</span></a>
        </div>
      </div>
      <div className="fj-hero-scroll">
        {t.hero.scroll}<br></br>
        <span style={{ fontSize: 20 }}>↓</span>
      </div>
    </section>
  );
}

// ---------- Hero B — "Manuscript": editorial split with the app in hand ----------
function HeroManuscript({ t, themeKey, lang }) {
  const homeImgs = {
    en: "assets/app-home-v2.png?v=2",
    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 homeImg = homeImgs[lang] || "assets/app-home-v2.png";
  const th = window.FJ_THEMES[themeKey];
  return (
    <section className="fj-hero" data-screen-label="Hero" style={{ minHeight: "100vh" }}>
      <HeroScene themeKey={themeKey} parallax={0.2}></HeroScene>
      <div className="fj-hero-b-grid">
        <div>
          <div className="fj-eyebrow" style={{ color: "var(--hero-ink)", opacity: 0.85, marginBottom: 26 }}>{t.hero.eyebrow}</div>
          <h1 className="fj-hero-b-title" style={{ display: "flex" }}>
            <img src="assets/wordmark-gold-goldbook.png" alt="Faith & Joy" className="fj-hero-b-wordmark" style={{
              width: "min(38vw, 560px)", minWidth: 280, height: "auto", display: "block",
              filter: th.dark ? "drop-shadow(0 4px 24px rgba(0,0,0,0.45))" : "drop-shadow(0 2px 14px rgba(58,46,31,0.18))",
            }}></img>
          </h1>
          <p className="fj-hero-tagline" style={{ margin: "0 0 40px", maxWidth: 560 }}>{t.hero.tagline}</p>
          <div className="fj-hero-ctas" style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a className="fj-cta" href="#download" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}><AppleGlyph size={15}></AppleGlyph><span className="fj-cta-long">{t.ui.downloadIos}</span><span className="fj-cta-short">iOS</span></a>
            <a className="fj-cta" href="#download" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}><AppleGlyph size={15}></AppleGlyph><span className="fj-cta-long">{t.ui.downloadIpad}</span><span className="fj-cta-short">iPadOS</span></a>
            <a className="fj-cta fj-cta-mac" href="#download" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}><AppleGlyph size={15}></AppleGlyph><span className="fj-cta-long">{t.ui.downloadMac}</span><span className="fj-cta-short">macOS</span></a>
          </div>
        </div>
        <div className="fj-hero-b-phone">
          <PhoneFrame img={homeImg} width={300}></PhoneFrame>
        </div>
      </div>
      <div className="fj-hero-scroll">
        {t.hero.scroll}<br></br>
        <span style={{ fontSize: 20 }}>↓</span>
      </div>
    </section>
  );
}

// ---------- Hero C — "Verse": Scripture itself is the headline ----------
function HeroVerse({ t, themeKey }) {
  const verse = t.verse.verses[new Date().getDate() % t.verse.verses.length];
  return (
    <section className="fj-hero" data-screen-label="Hero">
      <HeroScene themeKey={themeKey} parallax={0.25}></HeroScene>
      <div className="fj-hero-content" style={{ gap: 0 }}>
        <div className="fj-hero-eyebrow">Faith &amp; Joy — {t.verse.label}</div>
        <blockquote className="fj-hero-c-quote" style={{ color: "var(--hero-ink)" }}>
          <span style={{ color: "var(--accent)" }}>"</span>{verse.text}<span style={{ color: "var(--accent)" }}>"</span>
        </blockquote>
        <div style={{
          fontFamily: "var(--serif)", fontSize: 22, fontWeight: 600, letterSpacing: "0.08em",
          textTransform: "uppercase", margin: "28px 0 44px", color: "var(--accent)",
        }}>— {verse.ref}</div>
        <p className="fj-hero-tagline" style={{ margin: "0 0 40px", fontSize: "clamp(18px, 1.6vw, 23px)" }}>{t.hero.tagline}</p>
        <div style={{ display: "flex", gap: 10, flexWrap: "nowrap" }}>
          <a className="fj-cta" href="#download" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}><AppleGlyph size={15}></AppleGlyph>{t.ui.downloadIos}</a>
          <a className="fj-cta" href="#download" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}><AppleGlyph size={15}></AppleGlyph>{t.ui.downloadIpad}</a>
          <a className="fj-cta" href="#download" style={{ padding: "12px 16px", fontSize: 13, whiteSpace: "nowrap" }}><AppleGlyph size={15}></AppleGlyph>{t.ui.downloadMac}</a>
        </div>
      </div>
      <div className="fj-hero-scroll">
        {t.hero.scroll}<br></br>
        <span style={{ fontSize: 20 }}>↓</span>
      </div>
    </section>
  );
}

Object.assign(window, { FJNav, HeroScene, HeroHorizon, HeroManuscript, HeroVerse, PhoneFrame, AppleGlyph, FJ_SOCIAL, HeroSocial });