// Marketing site — assembly + Light/Dark + layout variation switcher.
const { useState, useLayoutEffect } = React;

function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 70;
  window.scrollTo({ top: y, behavior: "smooth" });
}

function Switcher({ theme, setTheme }) {
  const seg = (active) => ({
    padding: "11px 16px", minHeight: 40, boxSizing: "border-box", borderRadius: 999, border: "none", cursor: "pointer",
    fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 700,
    background: active ? "var(--green)" : "transparent",
    color: active ? "#fff" : "var(--text-secondary)", transition: "all .16s ease",
  });
  const group = { display: "inline-flex", gap: 3, background: "var(--bg-surface)", border: "1px solid var(--line)", borderRadius: 999, padding: 3 };
  return (
    <div style={{ position: "fixed", right: 16, bottom: 16, zIndex: 90, display: "flex", gap: 8, alignItems: "center", padding: 8, borderRadius: 999, background: "color-mix(in srgb, var(--bg-app) 80%, transparent)", backdropFilter: "blur(10px)", boxShadow: "var(--shadow-card)", border: "1px solid var(--line)" }}>
      <div style={group}>
        <button style={seg(theme === "light")} onClick={() => setTheme("light")}>라이트</button>
        <button style={seg(theme === "dark")} onClick={() => setTheme("dark")}>다크</button>
      </div>
    </div>
  );
}

function SiteApp() {
  const [theme, setTheme] = useState("light");
  const [layout, setLayout] = useState("left");
  useLayoutEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  // 흐름: 공개 마케팅사이트 → 로그인(신디자인) → (로그인 후) 홈허브
  const cta = () => { window.location.href = "/v2/login?mode=signup"; };  // 신규 → 회원가입 탭
  const login = () => { window.location.href = "/v2/login"; };           // 기존 회원 → 로그인 탭

  return (
    <div data-theme={theme} style={{ minHeight: "100vh", background: "radial-gradient(circle at 50% -4%, color-mix(in srgb, var(--green) 9%, transparent), transparent 40%), var(--bg-app)", color: "var(--text-primary)", transition: "background .35s ease, color .35s ease" }}>
      <Switcher theme={theme} setTheme={setTheme} />
      <Nav onCta={cta} onLogin={login} />
      <Hero layout={layout} onCta={cta} onDemo={() => scrollToId("tools")} />
      <Band />
      <Stats />
      <Tools />
      <Media />
      <About />
      <PricingTeaser onPricing={() => scrollToId("pricing")} />
      <CTA onCta={cta} />
      <Footer />
    </div>
  );
}

window.SiteApp = SiteApp;