// OnlySuomiHaku — Home (single-page interactive prototype)

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

const PALETTE_OPTIONS = [
["#3a6ea8", "#dde8f5", "#f3f6fb"], // glacier
["#2f7a6e", "#d6ece6", "#f1f8f6"], // aurora
["#8a5a2b", "#f0e3cf", "#faf6ef"], // sauna
["#b04a3a", "#f6dcd4", "#fbf5f3"], // lakka
["#d4a4c4", "#2e1428", "#150815"]  // plum lounge (mode-aware)
];
const PALETTE_KEYS = ["glacier", "aurora", "sauna", "lakka", "plum"];
const PALETTE_NAMES = ["Jäätikkö", "Revontuli", "Sauna", "Lakka", "Plum Lounge"];

function App() {
  const { CATEGORIES, CITIES, POPULAR_SEARCHES, TOTAL_CREATORS, NEW_THIS_WEEK, HAKUJA_PAIVASSA } = window.OSH_DATA;

  const [t, setTweak] = window.useTweaks(/*EDITMODE-BEGIN*/{
    "mode": "light",
    "palette": ["#d4a4c4", "#2e1428", "#150815"],
    "showTrendBadges": true,
    "density": "comfy",
    "lang": "fi",
    "surface": "solid"
  } /*EDITMODE-END*/);

  const paletteIdx = useMemoA(() => {
    const i = PALETTE_OPTIONS.findIndex((p) => p[0] === t.palette[0]);
    return i < 0 ? 0 : i;
  }, [t.palette]);

  useEffectA(() => {
    document.documentElement.setAttribute("data-mode", t.mode);
    document.documentElement.setAttribute("data-palette", PALETTE_KEYS[paletteIdx]);
    document.documentElement.setAttribute("data-surface", t.surface || "solid");
  }, [t.mode, paletteIdx, t.surface]);

  // Initial mode override from URL fragment (e.g. #mode=dark) — used by Mobile.html preview.
  useEffectA(() => {
    const m = (window.location.hash || "").match(/mode=(light|dark)/);
    if (m && m[1] !== t.mode) setTweak("mode", m[1]);
    // Listen for postMessage from parent (preview frames) to toggle mode live.
    const onMsg = (e) => {
      const d = e && e.data;
      if (d && d.type === "set-mode" && (d.mode === "light" || d.mode === "dark")) {
        setTweak("mode", d.mode);
      }
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
    // eslint-disable-next-line
  }, []);

  const [lastPicked, setLastPicked] = useStateA(null);
  const [filterTier, setFilterTier] = useStateA("all"); // all | hot | core | niche
  const [creatorQuery, setCreatorQuery] = useStateA("");

  const filteredCats = CATEGORIES.filter((c) => filterTier === "all" || c.tier === filterTier);

  const goToCreators = (q) => {
    setCreatorQuery(q || "");
    requestAnimationFrame(() => document.getElementById("creators")?.scrollIntoView({ behavior: "smooth", block: "start" }));
  };

  return (
    <window.LangContext.Provider value={t.lang || "fi"}>
    <div style={{ minHeight: "100vh", position: "relative", zIndex: 2 }}>
      <TopNav t={t} setTweak={setTweak} />

      <main style={{ maxWidth: 1180, margin: "0 auto", padding: "0 28px" }}>
        <Hero
            totalCreators={TOTAL_CREATORS}
            newThisWeek={NEW_THIS_WEEK}
            hakujaPaivassa={HAKUJA_PAIVASSA}
            lastPicked={lastPicked}
            onPicked={setLastPicked}
            onSearch={goToCreators} />


        <QuickChips onPick={(label) => { setLastPicked({ kind: "chip", label }); goToCreators(label); }} />

        <CreatorsSection query={creatorQuery} setQuery={setCreatorQuery} />

        <CategoriesSection
            categories={filteredCats}
            filterTier={filterTier}
            setFilterTier={setFilterTier}
            showTrend={t.showTrendBadges}
            density={t.density}
            onPick={(c) => setLastPicked({ kind: "category", label: c.fi })} />


        <CitiesSection cities={CITIES} onPick={(c) => setLastPicked({ kind: "city", label: c.fi })} />

        <TrustStrip total={TOTAL_CREATORS} hakuja={HAKUJA_PAIVASSA} newThisWeek={NEW_THIS_WEEK} />

        <FaqSection />

        <Footer />
      </main>

      <TweaksUi t={t} setTweak={setTweak} />
    </div>
    </window.LangContext.Provider>);

}

/* ---------- Top nav ---------- */
function TopNav({ t, setTweak }) {
  const T = window.useT();
  const lang = t.lang || "fi";
  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 30,
      backdropFilter: "saturate(160%) blur(14px)",
      WebkitBackdropFilter: "saturate(160%) blur(14px)",
      background: "color-mix(in oklab, var(--bg) 78%, transparent)",
      borderBottom: "1px solid var(--line)"
    }}>
      <div style={{
        maxWidth: 1180, margin: "0 auto", padding: "16px 28px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24
      }}>
        <BrandMark />
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13.5 }}>
          <NavLink>{T("nav_browse")}</NavLink>
          <NavLink>{T("nav_cities")}</NavLink>
          <NavLink>{T("nav_popular")}</NavLink>
          <NavLink>{T("nav_guide")}</NavLink>
          <span style={{ width: 1, height: 16, background: "var(--line)", margin: "0 6px" }} />
          <LangToggle lang={lang} onChange={(v) => setTweak("lang", v)} />
          <button
            onClick={() => setTweak("mode", t.mode === "dark" ? "light" : "dark")}
            aria-label="Toggle mode"
            title={t.mode === "dark" ? T("nav_light") : T("nav_dark")}
            style={{
              background: "transparent", border: "1px solid var(--line)",
              color: "var(--ink)", borderRadius: 999, padding: "7px 12px",
              cursor: "pointer", fontSize: 12.5, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 6
            }}>
            
            {t.mode === "dark" ? "☀" : "☾"} <span>{t.mode === "dark" ? T("nav_light") : T("nav_dark")}</span>
          </button>
          <button style={{
            background: "var(--ink)", color: "var(--surface)", border: "none",
            borderRadius: 999, padding: "8px 16px", fontSize: 13.5, fontWeight: 600, cursor: "pointer"
          }}>{T("nav_join")}</button>
        </div>
      </div>
    </nav>);

}

/* Tiny dev-only FI/EN segmented toggle */
function LangToggle({ lang, onChange }) {
  const opts = ["fi", "en"];
  return (
    <div
      role="group"
      title="Language / Kieli (dev)"
      style={{
        display: "inline-flex", alignItems: "center",
        background: "var(--surface)", border: "1px solid var(--line)",
        borderRadius: 999, padding: 2, position: "relative"
      }}>
      {opts.map((o) =>
      <button key={o}
      onClick={() => onChange(o)}
      aria-pressed={lang === o}
      style={{
        background: lang === o ? "var(--ink)" : "transparent",
        color: lang === o ? "var(--surface)" : "var(--ink-soft)",
        border: "none", cursor: "pointer",
        borderRadius: 999, padding: "5px 10px",
        fontSize: 11, fontWeight: 700, letterSpacing: "0.08em",
        fontFamily: "inherit",
        transition: "background 140ms ease, color 140ms ease"
      }}>{o.toUpperCase()}</button>
      )}
    </div>);

}
function NavLink({ children }) {
  return <a href="#" style={{
    color: "var(--ink-soft)", textDecoration: "none", padding: "8px 12px",
    borderRadius: 8, fontWeight: 500
  }}>{children}</a>;
}

/* ---------- Eyes (custom SVG with controllable gaze direction) ---------- */
function Eyes({ size = "64px", opacity = 1, wrapperStyle, look = { x: 0, y: 0 } }) {
  // look.x and look.y are unit-normalized offsets (-1..1) for pupil direction.
  // Pupils move within a ~4 unit radius inside each ~19-tall eyeball.
  const px = Math.max(-1, Math.min(1, look.x)) * 4;
  const py = Math.max(-1, Math.min(1, look.y)) * 4;
  // Match emoji 👀 visual footprint: ~1em wide square, the eyes occupy ~85% of that
  // and are noticeably TALL (almond/ovoid, taller than wide).
  return (
    <span aria-hidden="true" style={{
      display: "inline-flex", lineHeight: 0, opacity,
      width: size, height: size,
      alignItems: "center", justifyContent: "center",
      ...(wrapperStyle || {}),
    }}>
      <svg viewBox="0 0 64 56"
           style={{ width: "100%", height: "auto", display: "block" }}>
        {/* left eyeball — taller almond shape */}
        <ellipse cx="18" cy="28" rx="15" ry="22" fill="#ffffff" stroke="#1a1a1a" strokeWidth="2.2"/>
        {/* right eyeball */}
        <ellipse cx="46" cy="28" rx="15" ry="22" fill="#ffffff" stroke="#1a1a1a" strokeWidth="2.2"/>
        {/* iris + pupil — left */}
        <g transform={`translate(${px}, ${py})`}>
          <circle cx="18" cy="28" r="6" fill="#3a2a1a"/>
          <circle cx="18" cy="28" r="2.8" fill="#0a0a0a"/>
          <circle cx="19.6" cy="26.4" r="1.1" fill="#ffffff"/>
        </g>
        {/* iris + pupil — right */}
        <g transform={`translate(${px}, ${py})`}>
          <circle cx="46" cy="28" r="6" fill="#3a2a1a"/>
          <circle cx="46" cy="28" r="2.8" fill="#0a0a0a"/>
          <circle cx="47.6" cy="26.4" r="1.1" fill="#ffffff"/>
        </g>
      </svg>
    </span>
  );
}
function useIsMobile(query = "(max-width: 860px)") {
  const [m, setM] = useStateA(() => {
    if (typeof window === "undefined") return false;
    return window.matchMedia(query).matches;
  });
  useEffectA(() => {
    const mq = window.matchMedia(query);
    const on = () => setM(mq.matches);
    on();
    if (mq.addEventListener) mq.addEventListener("change", on);
    else mq.addListener(on);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener("change", on);
      else mq.removeListener(on);
    };
  }, [query]);
  return m;
}

function Hero({ totalCreators, newThisWeek, hakujaPaivassa, lastPicked, onPicked, onSearch }) {
  const T = window.useT();
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: "76px 0 36px", textAlign: "center", position: "relative" }} id="hero">
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px",
        background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 999,
        fontSize: 12.5, color: "var(--ink-soft)", fontWeight: 500,
        boxShadow: "var(--shadow-sm)"
      }}>
        <LiveDot />
        <span>{T("hero_live_pre")}<b style={{ color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>+{newThisWeek}</b>{T("hero_live_mid")}</span>
      </div>

      <div style={{
        display: "flex", alignItems: "center", justifyContent: "center",
        gap: "clamp(16px, 3vw, 36px)", margin: "28px auto 18px", maxWidth: 1080,
      }}>
        <Eyes size="clamp(56px, 7vw, 96px)" opacity={0.9}
              wrapperStyle={{
                flexShrink: 0,
                transform: "rotate(-14deg) translateY(6px)",
                alignSelf: isMobile ? "flex-start" : "auto"
              }}
              look={isMobile ? { x: 0.9, y: 0.3 } : { x: 0.6, y: 0.8 }} />
        <h1 className="serif" style={{
          fontSize: "clamp(48px, 7vw, 92px)",
          lineHeight: 1.02,
          margin: 0,
          color: "var(--ink)",
          textWrap: "balance",
          letterSpacing: "-0.02em"
        }}>
          {T("hero_title_1")}
          <br />
          <span style={{ fontStyle: "italic", color: "var(--accent)" }}>{T("hero_title_2")}</span>
        </h1>
        <Eyes size="clamp(56px, 7vw, 96px)" opacity={0.9}
              wrapperStyle={{
                flexShrink: 0,
                transform: "rotate(-9deg) translateY(-4px)",
                alignSelf: isMobile ? "flex-end" : "auto"
              }}
              look={isMobile ? { x: -0.7, y: 0.9 } : { x: -1, y: 0 }} />
      </div>

      <p style={{
        fontSize: 18, color: "var(--ink-soft)", maxWidth: 620, margin: "0 auto 36px",
        lineHeight: 1.5, textWrap: "balance"
      }}>
        {T("hero_subtitle")}
      </p>

      <div style={{ maxWidth: 760, margin: "0 auto" }}>
        <SearchBar
          onSubmit={(q) => { onPicked({ kind: "submit", label: q || "(empty)" }); onSearch && onSearch(q); }}
          onSelect={(s) => {
            if (s.type === "category" || s.type === "city") { onSearch && onSearch(s.data.fi); }
            else if (s.type === "popular") { onSearch && onSearch(s.data); }
            onPicked({ kind: s.type, label: s.type === "popular" ? s.data : (s.data.fi || s.data.name || s.data.handle) });
          }} />


        <div style={{
          marginTop: 16, display: "flex", justifyContent: "center"
        }}>
          <CategoryMenuButton onPick={(c) => onPicked({ kind: "category", label: c.fi })} />
        </div>

        <div style={{
          marginTop: 14, fontSize: 12.5, color: "var(--muted)",
          display: "flex", alignItems: "center", justifyContent: "center", gap: 14, flexWrap: "wrap"
        }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon.shield /> {T("trust_verified")}
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon.bolt /> {T("trust_realtime")}
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon.pin /> {T("trust_finnish")}
          </span>
        </div>
      </div>

      {lastPicked ?
      <div style={{
        marginTop: 28, display: "inline-flex", alignItems: "center", gap: 10,
        background: "var(--accent-soft)", color: "var(--ink)",
        padding: "8px 14px", borderRadius: 12, fontSize: 13
      }}>
          <span style={{ color: "var(--accent)", display: "inline-flex" }}><Icon.pulse /></span>
          <span><b>{T("demo_picked")}</b> <i style={{ fontFamily: "'Instrument Serif', serif", fontSize: 16 }}>"{lastPicked.label}"</i> {T("demo_picked_after")}</span>
        </div> :
      null}

      <HeroStats total={totalCreators} hakuja={hakujaPaivassa} />
    </section>);

}

function HeroStats({ total, hakuja }) {
  const T = window.useT();
  return (
    <div style={{
      marginTop: 64,
      display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
      gap: 1, background: "var(--line)",
      borderRadius: 18, overflow: "hidden",
      border: "1px solid var(--line)",
      maxWidth: 760, marginInline: "auto"
    }}>
      <Stat kpi={<CountUp value={total} />} label={T("stat_indexed")} sub={T("stat_indexed_sub")} />
      <Stat kpi={<CountUp value={hakuja} />} label={T("stat_searches")} sub={T("stat_searches_sub")} />
      <Stat kpi="100%" label={T("stat_finnish")} sub={T("stat_finnish_sub")} />
    </div>);

}
function Stat({ kpi, label, sub }) {
  return (
    <div style={{ background: "var(--surface)", padding: "22px 18px", textAlign: "center" }}>
      <div className="serif" style={{ fontSize: 38, lineHeight: 1, color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>{kpi}</div>
      <div style={{ marginTop: 6, fontSize: 13.5, color: "var(--ink-soft)", fontWeight: 500 }}>{label}</div>
      <div style={{ marginTop: 2, fontSize: 11.5, color: "var(--muted)" }}>{sub}</div>
    </div>);

}

/* ---------- Category menu button (popover under search) ---------- */
function CategoryMenuButton({ onPick }) {
  const T = window.useT();
  const lang = window.useLang();
  const [open, setOpen] = useStateA(false);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    function onDoc(e) {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    }
    function onKey(e) {if (e.key === "Escape") setOpen(false);}
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {document.removeEventListener("mousedown", onDoc);document.removeEventListener("keydown", onKey);};
  }, []);

  const cats = window.OSH_DATA.CATEGORIES;
  const half = Math.ceil(cats.length / 2);
  const col1 = cats.slice(0, half);
  const col2 = cats.slice(half);

  return (
    <div ref={wrapRef} style={{ position: "relative", display: "inline-block" }}>
      <button
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
        style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "10px 18px",
          background: open ? "var(--accent-soft)" : "var(--surface)",
          color: open ? "var(--accent)" : "var(--ink)",
          border: "1px solid " + (open ? "var(--accent)" : "var(--line)"),
          borderRadius: 999,
          fontSize: 14, fontWeight: 600,
          cursor: "pointer",
          fontFamily: "inherit",
          boxShadow: open ? "0 0 0 4px var(--halo)" : "var(--shadow-sm)",
          transition: "all 160ms ease"
        }}>
        <Icon.tag />
        <span>{T("catmenu_btn")}</span>
        <span style={{
          display: "inline-flex",
          transition: "transform 200ms ease",
          transform: open ? "rotate(180deg)" : "rotate(0deg)"
        }}>
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="m6 9 6 6 6-6" />
          </svg>
        </span>
      </button>

      {open ?
      <div style={{
        position: "absolute", top: "calc(100% + 10px)", left: "50%", transform: "translateX(-50%)",
        minWidth: 560, maxWidth: "min(720px, 92vw)",
        background: "var(--surface)", border: "1px solid var(--line)",
        borderRadius: 18, boxShadow: "var(--shadow-lg)",
        padding: 10, zIndex: 40,
        animation: "oshPop 160ms ease-out",
        textAlign: "left"
      }}>
          <style>{`
            @keyframes oshPop { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
          `}</style>

          <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4,
          maxHeight: "min(60vh, 480px)", overflowY: "auto"
        }}>
            <CatMenuColumn items={col1} lang={lang} T={T} onPick={(c) => {setOpen(false);onPick(c);}} />
            <CatMenuColumn items={col2} lang={lang} T={T} onPick={(c) => {setOpen(false);onPick(c);}} />
          </div>

          <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "12px 12px 6px", borderTop: "1px solid var(--line)", marginTop: 6
        }}>
            <a href="#categories" onClick={(e) => {e.preventDefault();setOpen(false);document.getElementById("categories")?.scrollIntoView({ behavior: "smooth", block: "start" });}}
          style={{
            color: "var(--accent)", textDecoration: "none", fontWeight: 600, fontSize: 13.5,
            display: "inline-flex", alignItems: "center", gap: 6
          }}>
              {T("catmenu_see_all")} <Icon.arrow />
            </a>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--muted)" }}>
              <LiveDot /> {T("catmenu_updated")}
            </span>
          </div>
        </div> :
      null}
    </div>);

}

function CatMenuColumn({ items, lang, T, onPick }) {
  return (
    <div>
      {items.map((c) => {
        const name = lang === "en" && c.en ? c.en : c.fi;
        const isHot = c.tier === "hot";
        return (
          <button key={c.slug}
          onClick={() => onPick(c)}
          style={{
            display: "flex", width: "100%", alignItems: "center", justifyContent: "space-between",
            gap: 12, padding: "10px 12px",
            background: "transparent", border: "none", borderRadius: 10,
            cursor: "pointer", textAlign: "left", fontFamily: "inherit",
            transition: "background 120ms ease"
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = "var(--tag-bg-hover)"}
          onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
            
            <span style={{
              fontSize: 14.5, fontWeight: 600,
              color: isHot ? "var(--accent)" : "var(--ink)",
              display: "inline-flex", alignItems: "center", gap: 6
            }}>
              {name}
              {isHot ? <span style={{ color: "var(--accent)", display: "inline-flex" }}><Icon.bolt /></span> : null}
            </span>
            <span style={{ fontSize: 12.5, color: "var(--muted)", fontVariantNumeric: "tabular-nums" }}>
              {formatCount(c.count)} {T("count_creators")}
            </span>
          </button>);

      })}
    </div>);

}

/* ---------- Quick chips under hero ---------- */
function QuickChips({ onPick }) {
  const T = window.useT();
  const lang = window.useLang();
  const quick = lang === "en" ?
  ["Helsinki", "Free Trial", "MILF / Mom", "Goth", "Femdom & Mistress", "Cosplay", "Trans", "Fitness"] :
  ["Helsinki", "Ilmainen kokeilu", "MILF / Äiti", "Gootti", "Femdom & Valtiatar", "Cosplay", "Trans", "Fitness"];
  return (
    <div style={{
      display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "center",
      maxWidth: 820, margin: "8px auto 0"
    }}>
      <span style={{ fontSize: 12.5, color: "var(--muted)", alignSelf: "center", marginRight: 4 }}>{T("quick_label")}</span>
      {quick.map((q) =>
      <Chip key={q} onClick={() => onPick(q)}>{q}</Chip>
      )}
    </div>);

}

/* ---------- Categories ---------- */
function CategoriesSection({ categories, filterTier, setFilterTier, showTrend, density, onPick }) {
  const T = window.useT();
  const tiers = [
  { k: "all", label: T("cat_tier_all"), n: window.OSH_DATA.CATEGORIES.length },
  { k: "hot", label: T("cat_tier_hot"), n: window.OSH_DATA.CATEGORIES.filter((c) => c.tier === "hot").length },
  { k: "core", label: T("cat_tier_core"), n: window.OSH_DATA.CATEGORIES.filter((c) => c.tier === "core").length },
  { k: "niche", label: T("cat_tier_niche"), n: window.OSH_DATA.CATEGORIES.filter((c) => c.tier === "niche").length }];


  return (
    <section style={{ padding: "64px 0 24px" }} id="categories">
      <header style={{
        display: "flex", justifyContent: "space-between", alignItems: "end",
        marginBottom: 24, gap: 16, flexWrap: "wrap"
      }}>
        <div>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
            {T("cat_eyebrow")}
          </div>
          <h2 className="serif" style={{ fontSize: 42, margin: "6px 0 0", color: "var(--ink)", letterSpacing: "-0.02em" }}>
            {T("cat_title_pre")} <i>{T("cat_title_em")}</i>
          </h2>
          <p style={{ color: "var(--ink-soft)", margin: "8px 0 0", maxWidth: 520, fontSize: 14.5 }}>
            {T("cat_desc")}
          </p>
        </div>
        <div style={{ display: "flex", gap: 6, padding: 4, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 999 }}>
          {tiers.map((tier) =>
          <button key={tier.k}
          onClick={() => setFilterTier(tier.k)}
          style={{
            padding: "8px 14px", border: "none", cursor: "pointer",
            background: filterTier === tier.k ? "var(--ink)" : "transparent",
            color: filterTier === tier.k ? "var(--surface)" : "var(--ink-soft)",
            borderRadius: 999, fontSize: 13, fontWeight: 600,
            transition: "all 160ms ease",
            fontFamily: "inherit"
          }}>
              {tier.label} <span style={{ opacity: 0.6, fontWeight: 500, fontSize: 11.5, marginLeft: 4 }}>{tier.n}</span>
            </button>
          )}
        </div>
      </header>

      <div style={{
        display: "grid",
        gridTemplateColumns: density === "dense" ? "repeat(auto-fill, minmax(220px, 1fr))" : "repeat(auto-fill, minmax(280px, 1fr))",
        gap: density === "dense" ? 12 : 16
      }}>
        {categories.map((c) => <CategoryCard key={c.slug} cat={c} showTrend={showTrend} density={density} onPick={onPick} />)}
      </div>
    </section>);

}

function CategoryCard({ cat, showTrend, density, onPick }) {
  const [hover, setHover] = useStateA(false);
  const T = window.useT();
  const lang = window.useLang();
  const isHot = cat.tier === "hot";
  const isNiche = cat.tier === "niche";
  const name = lang === "en" && cat.en ? cat.en : cat.fi;
  const seed = cat.slug.charCodeAt(0) + cat.slug.charCodeAt(cat.slug.length - 1);
  // Portrait aspect — taller than wide.
  const bannerH = density === "dense" ? 240 : 300;

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", flexDirection: "column",
        background: "var(--surface)",
        border: "1px solid " + (hover ? "var(--accent)" : "var(--line)"),
        borderRadius: 16,
        overflow: "hidden",
        transition: "all 220ms cubic-bezier(.2,.7,.2,1)",
        boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-sm)",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        position: "relative"
      }}>
      
      <CategoryBanner cat={cat} seed={seed} h={bannerH} hover={hover}
      isHot={isHot} isNiche={isNiche}
      hotLabel={T("badge_hot")} nicheLabel={T("badge_niche")}
      countersLabel={T("count_creators")}
      onClick={() => onPick(cat)} />

      <div style={{
        display: "flex", flexDirection: "column",
        padding: density === "dense" ? "12px 14px 14px" : "16px 18px 18px",
        gap: density === "dense" ? 10 : 14, opacity: "1"
      }}>
        <div>
          <div className="serif" style={{
            fontSize: density === "dense" ? 20 : 24,
            color: "var(--ink)",
            letterSpacing: "-0.01em",
            lineHeight: 1.12
          }}>{name}</div>
          <div style={{
            display: "flex", alignItems: "center", gap: 8, marginTop: 6,
            fontSize: 12.5, color: "var(--muted)", fontVariantNumeric: "tabular-nums"
          }}>
            <span><b style={{ color: "var(--ink-soft)" }}>{formatCount(cat.count)}</b> {T("count_creators")}</span>
            {showTrend && cat.trend > 5 ?
            <span style={{
              fontSize: 10.5, color: "var(--accent)", background: "var(--accent-soft)",
              padding: "2px 7px", borderRadius: 6, fontWeight: 700, letterSpacing: "0.02em"
            }}>↑ {cat.trend}%</span> :
            null}
            {showTrend && cat.trend < 0 ?
            <span style={{ fontSize: 10.5, color: "var(--muted)", fontWeight: 600 }}>↓ {Math.abs(cat.trend)}%</span> :
            null}
          </div>
        </div>

        <button
          onClick={() => onPick(cat)}
          style={{
            display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
            padding: density === "dense" ? "10px 14px" : "12px 16px",
            background: hover ? "var(--ink)" : "var(--surface)",
            color: hover ? "var(--surface)" : "var(--ink)",
            border: "1px solid " + (hover ? "var(--ink)" : "var(--line)"),
            borderRadius: 10,
            fontSize: 13.5, fontWeight: 600,
            cursor: "pointer",
            fontFamily: "inherit",
            transition: "all 180ms ease",
            width: "100%"
          }}>
          
          {T("card_cta")}
          <span style={{
            display: "inline-flex",
            transition: "transform 200ms ease",
            transform: hover ? "translateX(3px)" : "translateX(0)"
          }}><Icon.arrow /></span>
        </button>
      </div>
    </div>);

}

/* Portrait-format illustration banner with full-body silhouette placeholder. */
function CategoryBanner({ cat, seed, h, hover, isHot, isNiche, hotLabel, nicheLabel, countersLabel, onClick }) {
  // 7 soft tint pairs — each card gets a stable colorway from its seed.
  const tints = [
  ["#e3edf8", "#3a6ea8"],
  ["#e9e2f2", "#6b5aa0"],
  ["#f3dfdf", "#a85a5a"],
  ["#dceee5", "#3f8a72"],
  ["#f0e3cd", "#a8763a"],
  ["#dfe9f0", "#4a7d99"],
  ["#efdde8", "#a85a85"]];

  const [tBg, tFg] = tints[Math.abs(seed) % tints.length];

  return (
    <div
      onClick={onClick}
      style={{
        position: "relative", height: h, cursor: "pointer",
        background: tBg,
        backgroundImage: `repeating-linear-gradient(135deg, transparent 0 9px, ${withAlpha(tFg, 0.08)} 9px 10px)`,
        overflow: "hidden"
      }}>
      {/* radial highlight behind subject */}
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(ellipse at 50% 75%, ${withAlpha(tFg, 0.22)}, transparent 60%)`,
        pointerEvents: "none"
      }} />

      {/* Single tall portrait figure, anchored to bottom */}
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "flex-end", justifyContent: "center",
        paddingTop: 18,
        transition: "transform 320ms cubic-bezier(.2,.7,.2,1)",
        transform: hover ? "translateY(-4px) scale(1.02)" : "translateY(0) scale(1)"
      }}>
        <PortraitFigure seed={seed} w={h * 0.6} h={h * 0.86} fg={tFg} bg={tBg} />
      </div>

      {/* Mono placeholder hint, top-left */}
      <div style={{
        position: "absolute", top: 10, left: 12,
        fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
        fontSize: 9.5, color: withAlpha(tFg, 0.7),
        letterSpacing: "0.1em"
      }}>placeholder · {cat.slug}</div>

      {/* Tier badge */}
      {isHot ?
      <span style={{
        position: "absolute", top: 10, right: 10,
        fontSize: 9, fontWeight: 800, letterSpacing: "0.12em",
        color: "#ffffff", background: tFg,
        padding: "3px 7px", borderRadius: 5
      }}>{hotLabel}</span> :
      null}
      {isNiche ?
      <span style={{
        position: "absolute", top: 10, right: 10,
        fontSize: 9, fontWeight: 800, letterSpacing: "0.12em",
        color: tFg, background: "rgba(255,255,255,0.7)",
        padding: "3px 7px", borderRadius: 5,
        border: `1px solid ${withAlpha(tFg, 0.4)}`
      }}>{nicheLabel}</span> :
      null}

      {/* Creator count badge — bottom-left over the illustration */}
      <span style={{
        position: "absolute", bottom: 10, left: 10,
        display: "inline-flex", alignItems: "center", gap: 6,
        background: "rgba(255,255,255,0.92)",
        color: "#0c1d36",
        padding: "4px 9px", borderRadius: 999,
        fontSize: 11, fontWeight: 700, fontVariantNumeric: "tabular-nums",
        boxShadow: "0 1px 2px rgba(0,0,0,0.06)",
        backdropFilter: "blur(4px)"
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: tFg }}></span>
        {formatCount(cat.count)} {countersLabel}
      </span>
    </div>);

}

function withAlpha(hex, a) {
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

function CornerTick({ label, subtle }) {
  return (
    <span style={{
      position: "absolute", top: 10, right: 10,
      fontSize: 9, fontWeight: 800, letterSpacing: "0.1em",
      color: subtle ? "var(--muted)" : "var(--accent)",
      background: subtle ? "transparent" : "var(--accent-soft)",
      padding: "2px 6px", borderRadius: 4,
      border: subtle ? "1px solid var(--line)" : "none"
    }}>{label}</span>);

}

/* ---------- Creators grid (real public data) ---------- */
const CREATORS_PAGE = 48;

function CreatorsSection({ query, setQuery }) {
  const T = window.useT();
  const all = window.OSH_PROFILES || [];
  const [count, setCount] = useStateA(CREATORS_PAGE);

  const term = (query || "").trim().toLowerCase().replace(/^@/, "");

  const filtered = useMemoA(() => {
    if (!term) return all;
    return all.filter((c) =>
      (c.handle && c.handle.toLowerCase().includes(term)) ||
      (c.name && c.name.toLowerCase().includes(term)));
  }, [term, all]);

  useEffectA(() => { setCount(CREATORS_PAGE); }, [term]);

  const shown = filtered.slice(0, count);

  return (
    <section style={{ padding: "56px 0 24px" }} id="creators">
      <header style={{
        display: "flex", justifyContent: "space-between", alignItems: "end",
        marginBottom: 22, gap: 16, flexWrap: "wrap"
      }}>
        <div>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
            {T("creators_eyebrow")}
          </div>
          <h2 className="serif" style={{ fontSize: 42, margin: "6px 0 0", color: "var(--ink)", letterSpacing: "-0.02em" }}>
            {T("creators_title_pre")} <i>{T("creators_title_em")}</i>
          </h2>
          <p style={{ color: "var(--ink-soft)", margin: "8px 0 0", maxWidth: 540, fontSize: 14.5 }}>
            {T("creators_desc")}
          </p>
        </div>
        <div style={{
          display: "flex", alignItems: "center", gap: 10,
          background: "var(--surface)", border: "1px solid var(--line)",
          borderRadius: 999, padding: "8px 14px", minWidth: 260,
          boxShadow: "var(--shadow-sm)"
        }}>
          <span style={{ color: "var(--muted)", display: "inline-flex" }}><Icon.search width="18" height="18" /></span>
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder={T("creators_filter_ph")}
            aria-label={T("creators_filter_ph")}
            style={{
              flex: 1, border: "none", outline: "none", background: "transparent",
              color: "var(--ink)", fontSize: 14, fontFamily: "inherit", minWidth: 0
            }} />
          {query ?
            <button onClick={() => setQuery("")} aria-label={T("search_clear")}
              style={{ background: "transparent", border: "none", color: "var(--muted)", cursor: "pointer", fontSize: 13, fontFamily: "inherit" }}>
              {T("search_clear")}
            </button> : null}
        </div>
      </header>

      <div style={{ fontSize: 12.5, color: "var(--muted)", marginBottom: 16, fontVariantNumeric: "tabular-nums" }}>
        {T("creators_showing")} <b style={{ color: "var(--ink-soft)" }}>{shown.length}</b> {T("creators_of")} <b style={{ color: "var(--ink-soft)" }}>{filtered.length}</b>
      </div>

      {filtered.length === 0 ?
        <div style={{ padding: "48px 16px", textAlign: "center", color: "var(--muted)", fontSize: 15 }}>
          {T("creators_none")}
        </div> :
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(208px, 1fr))",
          gap: 16
        }}>
          {shown.map((c) => <CreatorCard key={c.id} c={c} />)}
        </div>}

      {count < filtered.length ?
        <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
          <button
            onClick={() => setCount((n) => n + CREATORS_PAGE)}
            style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "12px 24px", background: "var(--surface)", color: "var(--ink)",
              border: "1px solid var(--line)", borderRadius: 999,
              fontSize: 14, fontWeight: 600, cursor: "pointer", fontFamily: "inherit",
              boxShadow: "var(--shadow-sm)"
            }}>
            {T("creators_show_more")} <Icon.arrow />
          </button>
        </div> : null}
    </section>);

}

function CreatorCard({ c }) {
  const [hover, setHover] = useStateA(false);
  const T = window.useT();
  const seed = (c.handle || c.name || "x").charCodeAt(0) || 0;
  const tints = [
    ["#e3edf8", "#3a6ea8"], ["#e9e2f2", "#6b5aa0"], ["#f3dfdf", "#a85a5a"],
    ["#dceee5", "#3f8a72"], ["#f0e3cd", "#a8763a"], ["#efdde8", "#a85a85"]];
  const [tBg, tFg] = tints[Math.abs(seed) % tints.length];

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", flexDirection: "column",
        background: "var(--surface)",
        border: "1px solid " + (hover ? "var(--accent)" : "var(--line)"),
        borderRadius: 16, overflow: "hidden",
        transition: "all 200ms cubic-bezier(.2,.7,.2,1)",
        boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-sm)",
        transform: hover ? "translateY(-2px)" : "translateY(0)"
      }}>
      <a href={c.of || c.ig || "#"} target="_blank" rel="noopener noreferrer nofollow"
         style={{
           position: "relative", display: "block", height: 232,
           background: tBg, overflow: "hidden", textDecoration: "none"
         }}>
        {c.img ?
          <img src={c.img} alt={c.name} loading="lazy" decoding="async"
            style={{
              width: "100%", height: "100%", objectFit: "cover", display: "block",
              transition: "transform 320ms cubic-bezier(.2,.7,.2,1)",
              transform: hover ? "scale(1.04)" : "scale(1)"
            }} /> :
          <span style={{
            position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "'Instrument Serif', serif", fontSize: 64, color: tFg, opacity: 0.6
          }}>{(c.name || "?").trim().charAt(0).toUpperCase()}</span>}

        {c.verified ?
          <span style={{
            position: "absolute", top: 10, right: 10,
            display: "inline-flex", alignItems: "center", gap: 4,
            background: "rgba(255,255,255,0.92)", color: "#0c1d36",
            padding: "3px 8px", borderRadius: 999, fontSize: 10.5, fontWeight: 700,
            boxShadow: "0 1px 2px rgba(0,0,0,0.08)"
          }}>
            <span style={{ color: tFg, display: "inline-flex" }}><Icon.check /></span> {T("creators_verified")}
          </span> : null}
      </a>

      <div style={{ display: "flex", flexDirection: "column", padding: "14px 16px 16px", gap: 12, flex: 1 }}>
        <div style={{ flex: 1 }}>
          <div className="serif" style={{
            fontSize: 19, color: "var(--ink)", lineHeight: 1.15, letterSpacing: "-0.01em",
            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
          }}>{c.name || c.handle}</div>
          {c.handle ?
            <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              @{c.handle}
            </div> : null}
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <a href={c.of || c.ig || "#"} target="_blank" rel="noopener noreferrer nofollow"
            style={{
              flex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7,
              padding: "10px 14px",
              background: hover ? "var(--ink)" : "var(--surface)",
              color: hover ? "var(--surface)" : "var(--ink)",
              border: "1px solid " + (hover ? "var(--ink)" : "var(--line)"),
              borderRadius: 10, fontSize: 13, fontWeight: 600,
              textDecoration: "none", transition: "all 180ms ease"
            }}>
            {T("creators_visit")} <Icon.external />
          </a>
          {c.ig ?
            <a href={c.ig} target="_blank" rel="noopener noreferrer nofollow" title="Instagram"
              style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                width: 38, height: 38, flexShrink: 0,
                background: "var(--surface)", color: "var(--ink-soft)",
                border: "1px solid var(--line)", borderRadius: 10
              }}>
              <Icon.instagram />
            </a> : null}
        </div>
      </div>
    </div>);

}

/* ---------- Cities ---------- */
function CitiesSection({ cities, onPick }) {
  const T = window.useT();
  return (
    <section style={{ padding: "48px 0 24px" }} id="cities">
      <header style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{T("city_eyebrow")}</div>
        <h2 className="serif" style={{ fontSize: 42, margin: "6px 0 0", color: "var(--ink)", letterSpacing: "-0.02em" }}>
          {T("city_title_pre")} <i>{T("city_title_em")}</i>
        </h2>
      </header>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(190px, 1fr))",
        gap: 10
      }}>
        {cities.map((c) => <CityCard key={c.slug} c={c} onPick={onPick} />)}
      </div>
    </section>);

}

function CityCard({ c, onPick }) {
  const [hover, setHover] = useStateA(false);
  return (
    <button
      onClick={() => onPick(c)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
        padding: "14px 16px",
        background: hover ? "var(--tag-bg-hover)" : "var(--surface)",
        border: "1px solid " + (hover ? "var(--accent)" : "var(--line)"),
        borderRadius: 12, cursor: "pointer", textAlign: "left",
        boxShadow: hover ? "var(--shadow-sm)" : "none",
        transition: "all 160ms ease",
        fontFamily: "inherit"
      }}>
      <div>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22, color: "var(--ink)", lineHeight: 1.1, letterSpacing: "-0.01em" }}>{c.fi}</div>
        <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 2 }}>{c.region}</div>
      </div>
      <span style={{
        fontSize: 11.5, color: "var(--ink-soft)", background: "var(--accent-soft)",
        padding: "4px 8px", borderRadius: 6, fontVariantNumeric: "tabular-nums", fontWeight: 600
      }}>{formatCount(c.count)}</span>
    </button>);

}

/* ---------- Trust strip ---------- */
function TrustStrip({ total, hakuja, newThisWeek }) {
  const T = window.useT();
  return (
    <section id="trust" style={{
      padding: "32px 28px",
      margin: "48px 0",
      background: "var(--surface)",
      border: "1px solid var(--line)",
      borderRadius: 18,
      display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
      gap: 24
    }}>
      <TrustItem icon={<Icon.shield />} title={T("ts1_title")} body={T("ts1_body")} />
      <TrustItem icon={<Icon.bolt />} title={T("ts2_title")} body={`+${newThisWeek} ${T("ts2_body")}`} />
      <TrustItem icon={<Icon.pin />} title={T("ts3_title")} body={T("ts3_body")} />
      <TrustItem icon={<Icon.pulse />} title={T("ts4_title")} body={T("ts4_body")} />
    </section>);

}
function TrustItem({ icon, title, body }) {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <span style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 34, height: 34, borderRadius: 10,
        background: "var(--accent-soft)", color: "var(--accent)", flexShrink: 0
      }}>{icon}</span>
      <div>
        <div style={{ fontSize: 14, fontWeight: 700, color: "var(--ink)" }}>{title}</div>
        <div style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.45, marginTop: 2 }}>{body}</div>
      </div>
    </div>);

}

/* ---------- FAQ ---------- */
function FaqSection() {
  const T = window.useT();
  const items = [
  { q: T("faq_q1"), a: T("faq_a1") },
  { q: T("faq_q2"), a: T("faq_a2") },
  { q: T("faq_q3"), a: T("faq_a3") },
  { q: T("faq_q4"), a: T("faq_a4") },
  { q: T("faq_q5"), a: T("faq_a5") }];


  return (
    <section style={{ padding: "48px 0 24px" }} id="faq">
      <header style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{T("faq_eyebrow")}</div>
        <h2 className="serif" style={{ fontSize: 42, margin: "6px 0 0", color: "var(--ink)", letterSpacing: "-0.02em" }}>
          {T("faq_title_pre")} <i>{T("faq_title_em")}</i>
        </h2>
      </header>
      <div style={{
        background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 18,
        overflow: "hidden"
      }}>
        {items.map((it, i) => <FaqItem key={i} item={it} last={i === items.length - 1} />)}
      </div>
    </section>);

}
function FaqItem({ item, last }) {
  const [open, setOpen] = useStateA(false);
  return (
    <div style={{ borderBottom: last ? "none" : "1px solid var(--line)" }}>
      <button
        onClick={() => setOpen((o) => !o)}
        style={{
          width: "100%", background: "transparent", border: "none", cursor: "pointer",
          textAlign: "left", padding: "18px 22px",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
          fontFamily: "inherit"
        }}>
        <span style={{ fontSize: 16, fontWeight: 600, color: "var(--ink)" }}>{item.q}</span>
        <span style={{
          width: 26, height: 26, borderRadius: 999, border: "1px solid var(--line)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          color: "var(--ink-soft)", fontSize: 16, lineHeight: 1, flexShrink: 0,
          transition: "transform 200ms ease",
          transform: open ? "rotate(45deg)" : "rotate(0deg)"
        }}>+</span>
      </button>
      {open ?
      <div style={{ padding: "0 22px 20px 22px", color: "var(--ink-soft)", fontSize: 14.5, lineHeight: 1.55, maxWidth: 760 }}>
          {item.a}
        </div> :
      null}
    </div>);

}

/* ---------- Footer ---------- */
function Footer() {
  const T = window.useT();
  return (
    <footer style={{
      padding: "48px 0 64px", marginTop: 24,
      borderTop: "1px solid var(--line)",
      color: "var(--ink-soft)"
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 32 }}>
        <div>
          <BrandMark />
          <p style={{ fontSize: 13.5, lineHeight: 1.55, maxWidth: 320, marginTop: 12 }}>
            {T("footer_desc")}
          </p>
        </div>
        <FooterCol title={T("footer_col1")} items={[T("footer_c1_a"), T("footer_c1_b"), T("footer_c1_c"), T("footer_c1_d")]} />
        <FooterCol title={T("footer_col2")} items={[T("footer_c2_a"), T("footer_c2_b"), T("footer_c2_c"), T("footer_c2_d")]} />
        <FooterCol title={T("footer_col3")} items={[T("footer_c3_a"), T("footer_c3_b"), T("footer_c3_c"), T("footer_c3_d")]} />
      </div>
      <div style={{
        marginTop: 36, paddingTop: 18, borderTop: "1px solid var(--line)",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, fontSize: 12, color: "var(--muted)"
      }}>
        <span>{T("footer_copy")}</span>
        <span style={{ display: "inline-flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <a href="takedown.html" style={{ color: "var(--accent)", textDecoration: "none", fontWeight: 600 }}>{T("footer_takedown")}</a>
          <span>{T("footer_meta")}</span>
        </span>
      </div>
    </footer>);

}
function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 10 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {items.map((i) =>
        <li key={i}><a href="#" style={{ color: "var(--ink-soft)", textDecoration: "none", fontSize: 13.5 }}>{i}</a></li>
        )}
      </ul>
    </div>);

}

/* ---------- Tweaks UI ---------- */
function TweaksUi({ t, setTweak }) {
  const T = window.useT();
  const { TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label={T("tw_appearance")}>
        <TweakRadio
          label={T("tw_mode")}
          value={t.mode}
          options={[{ value: "light", label: T("nav_light") }, { value: "dark", label: T("nav_dark") }]}
          onChange={(v) => setTweak("mode", v)} />
        
        <TweakColor
          label={T("tw_palette")}
          value={t.palette}
          options={PALETTE_OPTIONS}
          onChange={(v) => setTweak("palette", v)} />
        
      </TweakSection>
      <TweakSection label={T("tw_presentation")}>
        <TweakRadio
          label={T("tw_surface")}
          value={t.surface || "solid"}
          options={[{ value: "solid", label: T("tw_solid") }, { value: "glass", label: T("tw_glass") }]}
          onChange={(v) => setTweak("surface", v)} />
        
        <TweakRadio
          label={T("tw_density")}
          value={t.density}
          options={[{ value: "comfy", label: T("tw_comfy") }, { value: "dense", label: T("tw_dense") }]}
          onChange={(v) => setTweak("density", v)} />
        
        <TweakToggle
          label={T("tw_trend")}
          value={t.showTrendBadges}
          onChange={(v) => setTweak("showTrendBadges", v)} />
        
      </TweakSection>
    </TweaksPanel>);

}

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