/* UbiLog LP – top-level app with Tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ctaLabel": "無料で試す",
  "heroSub": "スマホ生体認証で1台で完結する、次世代の勤怠管理。\n導入コスト0円、最短3分でスタート。",
  "accent": "#f59e0b",
  "showJiima": true
}/*EDITMODE-END*/;

function App() {
  const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { tweaks: TWEAK_DEFAULTS, setTweak: () => {} };
  const tweaks = t.tweaks || TWEAK_DEFAULTS;
  const setTweak = t.setTweak || (() => {});

  // Apply accent color to root via CSS variable
  React.useEffect(() => {
    document.documentElement.style.setProperty("--gold", tweaks.accent);
    // Recompute glow alpha-ish vars from hex
    const c = tweaks.accent;
    document.documentElement.style.setProperty("--gold-soft", hexToRgba(c, 0.14));
    document.documentElement.style.setProperty("--gold-glow", hexToRgba(c, 0.45));
  }, [tweaks.accent]);

  const onCTA = () => {
    const el = document.getElementById("cta");
    if (el) el.scrollTo ? el.scrollTo({ top: 0, behavior:"smooth" }) : null;
    window.scrollTo({ top: document.getElementById("cta").offsetTop - 40, behavior:"smooth" });
  };

  // Simple reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach(e => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(entries => {
      entries.forEach(en => {
        if (en.isIntersecting) {
          en.target.classList.add("in");
          io.unobserve(en.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  }, []);

  const Tweaks = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakText = window.TweakText;
  const TweakColor = window.TweakColor;
  const TweakToggle = window.TweakToggle;

  return (
    <div className="bg-root bg-grain">
      <Nav ctaLabel={tweaks.ctaLabel} onCTA={onCTA}/>
      <Hero
        tagline="その指で、全てを打刻。"
        sub={tweaks.heroSub}
        ctaLabel={tweaks.ctaLabel}
        onCTA={onCTA}
      />
      <Problem/>
      <Features/>
      <Methods/>
      <Dashboard/>
      <Stats/>
      <Pricing/>
      <AISection/>
      <FAQ/>
      <FinalCTA ctaLabel={tweaks.ctaLabel} onCTA={onCTA}/>
      <Footer/>

      {Tweaks && (
        <Tweaks title="Tweaks">
          <TweakSection title="コピー">
            <TweakText label="CTAボタン文言" value={tweaks.ctaLabel} onChange={v => setTweak("ctaLabel", v)} />
            <TweakText label="Heroサブテキスト" value={tweaks.heroSub} onChange={v => setTweak("heroSub", v)} multiline />
          </TweakSection>
          <TweakSection title="ビジュアル">
            <TweakColor
              label="アクセント"
              value={tweaks.accent}
              onChange={v => setTweak("accent", v)}
              options={["#f59e0b", "#7C9CFF", "#5EEAD4", "#FFC979"]}
            />
            <TweakToggle label="JIIMA バッジを表示" value={tweaks.showJiima} onChange={v => setTweak("showJiima", v)} />
          </TweakSection>
        </Tweaks>
      )}
    </div>
  );
}

function hexToRgba(hex, a) {
  const m = hex.replace("#","").match(/.{1,2}/g);
  if (!m || m.length < 3) return `rgba(245,158,11,${a})`;
  const [r,g,b] = m.slice(0,3).map(x => parseInt(x,16));
  return `rgba(${r},${g},${b},${a})`;
}

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