// App entry — composes everything, manages sticky CTA, hosts TweaksPanel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "density": "regular",
  "stickyCta": true,
  "showBadges": true,
  "chatStyle": "rich",
  "palette": ["#1fba68", "#2f7be5", "#ff8a3d"]
}/*EDITMODE-END*/;

function StickyCTA({ show }) {
  return (
    <div className={`sticky-cta ${show ? 'show' : ''}`} aria-hidden={!show}>
      <a href="https://lin.ee/tCd8Occ" target="_blank" rel="noopener noreferrer" className="btn btn-line">
        <LogoLine size={22} /> LINEで申し込む
      </a>
      <a href="https://lin.ee/tCd8Occ" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
        <LogoLine size={22} /> LINEで問い合わせ
      </a>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [stickyShow, setStickyShow] = React.useState(false);

  // Sticky CTA appears after scrolling past the hero
  React.useEffect(() => {
    const onScroll = () => {
      setStickyShow(window.scrollY > 480);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Apply density
  React.useEffect(() => {
    document.body.setAttribute('data-density', t.density);
  }, [t.density]);

  // Apply accent palette
  React.useEffect(() => {
    const root = document.documentElement;
    const map = {
      green:  { green: '#1fba68', greenInk: '#0e8a48', greenSoft: '#e7f7ef' },
      teal:   { green: '#0ea5a3', greenInk: '#0a807e', greenSoft: '#daf2f1' },
      indigo: { green: '#5469d4', greenInk: '#3c4ea8', greenSoft: '#e7eafa' },
    };
    const c = map[t.accent] || map.green;
    root.style.setProperty('--c-green', c.green);
    root.style.setProperty('--c-green-ink', c.greenInk);
    root.style.setProperty('--c-green-soft', c.greenSoft);
  }, [t.accent]);

  return (
    <>
      <NavBar />
      <Hero />
      <PainSection />
      <ServiceSection />
      <FeaturesSection />
      <BenefitsSection />
      <CompareSection />
      <StepsSection />
      <FAQSection />
      <FinalCTASection />
      <Footer />

      {t.stickyCta && <StickyCTA show={stickyShow} />}

      <TweaksPanel title="LP Tweaks">
        <TweakSection label="トーン" />
        <TweakRadio  label="アクセント"
                     value={t.accent}
                     options={[
                       { value: 'green',  label: 'グリーン' },
                       { value: 'teal',   label: 'ティール' },
                       { value: 'indigo', label: 'インディゴ' },
                     ]}
                     onChange={(v) => setTweak('accent', v)} />
        <TweakRadio  label="余白の密度"
                     value={t.density}
                     options={[
                       { value: 'compact', label: 'コンパクト' },
                       { value: 'regular', label: 'レギュラー' },
                       { value: 'comfy',   label: 'ゆったり' },
                     ]}
                     onChange={(v) => setTweak('density', v)} />

        <TweakSection label="表示" />
        <TweakToggle label="固定CTAバー"  value={t.stickyCta}
                     onChange={(v) => setTweak('stickyCta', v)} />
        <TweakToggle label="連携バッジ"    value={t.showBadges}
                     onChange={(v) => setTweak('showBadges', v)} />
      </TweaksPanel>

      {/* Show/hide the floating hero badges via Tweaks */}
      <style>{!t.showBadges ? `.hero-badge { display: none !important; }` : ``}</style>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);