/* global React, ReactDOM, Header, Hero, Supervisor, Ranking, AboutFactoring, TwoVsThree, RecommendByNeed, WhyUs, Testimonials, SelectionCriteria, FAQ, Glossary, FinalCTA, Footer, FloatingCTA, useTweaks, TweaksPanel, TweakSection, TweakRadio */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "tableDensity": "detailed"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    // 画像なしのテキストリンクにオレンジボタン用クラスを自動付与
    document.querySelectorAll('.btn-row-wrap a, .solo-btn-wrap a').forEach(a => {
      const hasVisibleImg = a.querySelector('img:not([width="1"])');
      if (!hasVisibleImg) a.classList.add('text-btn');
    });
    // 全アフィリエイトリンクを別ウィンドウで開く
    const selectors = '.company-name-link a, .btn-row-wrap a, .solo-name a, .solo-btn-wrap a, .need-affiliate-btn a';
    document.querySelectorAll(selectors).forEach(a => {
      a.setAttribute('target', '_blank');
      a.setAttribute('rel', 'nofollow noopener noreferrer');
    });
  }, []);

  return (
    <React.Fragment>
      <Header/>
      <Hero layout={tweaks.heroLayout}/>
      <Supervisor/>
      <Ranking/>
      <SelectionCriteria/>
      <Testimonials/>
      <AboutFactoring/>
      <TwoVsThree/>
      <RecommendByNeed/>
      <WhyUs/>
      <FAQ/>
      <Glossary/>
      <FinalCTA/>
      <Footer/>
      <FloatingCTA/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="ヒーローレイアウト">
          <TweakRadio
            value={tweaks.heroLayout}
            onChange={(v) => setTweak("heroLayout", v)}
            options={[
              { value: "split", label: "分割（写真あり）" },
              { value: "centered", label: "中央寄せ" },
            ]}
          />
        </TweakSection>
        <TweakSection title="比較表の密度">
          <TweakRadio
            value={tweaks.tableDensity}
            onChange={(v) => {
              setTweak("tableDensity", v);
              // also flip the in-section toggle
              const btn = document.querySelector(`.density-toggle button:${v === "compact" ? "last-child" : "first-child"}`);
              btn && btn.click();
            }}
            options={[
              { value: "detailed", label: "詳細" },
              { value: "compact", label: "コンパクト" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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