// Main App with Tweaks
// uses globals: Nav, Hero, TrustBar, Pain, Features, Walkthrough, Pricing, FAQ, FinalCTA, Footer
// and Tweaks helpers from tweaks-panel.jsx

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "darkHero": false,
  "fontScale": 1.0,
  "tagline": "讓你的客人，在 LINE 上完成預約付款",
  "showLineMockup": true,
  "showPricing": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Cursor glow — hero & pain sections
  React.useEffect(() => {
    const glow = document.createElement('div');
    glow.className = 'cursor-glow';
    document.body.appendChild(glow);

    let animId;

    const onMove = (e) => {
      cancelAnimationFrame(animId);
      animId = requestAnimationFrame(() => {
        glow.style.left = e.clientX + 'px';
        glow.style.top  = e.clientY + 'px';
      });
    };

    const onEnter = () => {
      glow.classList.add('is-active');
      window.addEventListener('mousemove', onMove);
    };

    const onLeave = () => {
      glow.classList.remove('is-active');
      window.removeEventListener('mousemove', onMove);
    };

    const targets = document.querySelectorAll('.hero, #pain');
    targets.forEach(el => {
      el.addEventListener('mouseenter', onEnter);
      el.addEventListener('mouseleave', onLeave);
    });

    return () => {
      targets.forEach(el => {
        el.removeEventListener('mouseenter', onEnter);
        el.removeEventListener('mouseleave', onLeave);
      });
      window.removeEventListener('mousemove', onMove);
      cancelAnimationFrame(animId);
      glow.remove();
    };
  }, []);

  // Scroll reveal
  React.useEffect(() => {
    const io = new IntersectionObserver(
      entries => entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          io.unobserve(e.target);
        }
      }),
      { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
    );
    document.querySelectorAll('.reveal:not(.is-visible)').forEach(el => io.observe(el));
    return () => io.disconnect();
  });

  return (
    <div style={{ fontSize: `${t.fontScale * 100}%` }}>
      <Nav />
      <Hero tagline={t.tagline} dark={t.darkHero} lineMockup={t.showLineMockup} />
      <Pain />
      <Features />
      <SiteShowcase />
      <Walkthrough />
      {t.showPricing && <Pricing />}
      <FAQ />
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="主視覺" />
        <TweakRadio
          label="Hero 主色"
          value={t.darkHero ? "深綠底" : "白底"}
          options={["白底", "深綠底"]}
          onChange={(v) => setTweak("darkHero", v === "深綠底")}
        />
        <TweakToggle
          label="顯示 LINE 預覽（Hero）"
          value={t.showLineMockup}
          onChange={(v) => setTweak("showLineMockup", v)}
        />
        <TweakText
          label="Hero 標語"
          value={t.tagline}
          onChange={(v) => setTweak("tagline", v)}
        />

        <TweakSection label="排版" />
        <TweakSlider
          label="字體大小"
          value={t.fontScale}
          min={0.85}
          max={1.2}
          step={0.05}
          onChange={(v) => setTweak("fontScale", v)}
        />

        <TweakSection label="區塊" />
        <TweakToggle
          label="顯示方案價格區"
          value={t.showPricing}
          onChange={(v) => setTweak("showPricing", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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