// Main app entry

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#D14B3D",
  "showStickyCTA": true,
  "showFloatSide": true,
  "showAlertBar": true,
  "density": "high"
}/*EDITMODE-END*/;

// プレースホルダーセクション(情報がまだないセクション用)
function PlaceholderBanner({ title, desc }) {
  return (
    <section style={{padding: "70px 24px", background: "#2C2620", borderTop: "2px dashed #D14B3D", borderBottom: "2px dashed #D14B3D", textAlign: "center", margin: "20px 0"}}>
      <div style={{maxWidth: 720, margin: "0 auto"}}>
        <div style={{display: "inline-block", background: "#D14B3D", color: "white", padding: "6px 14px", fontSize: 12, fontWeight: 900, letterSpacing: "0.08em", marginBottom: 20, borderRadius: 4}}>PROPOSAL</div>
        <h3 style={{fontFamily: "Zen Kaku Gothic New, sans-serif", fontSize: 24, fontWeight: 900, marginBottom: 16, color: "#2C3E5F", lineHeight: 1.5}}>
          [ ここに「{title}」セクションが入ります ]
        </h3>
        <p style={{fontSize: 14, color: "#D4CDB8", lineHeight: 1.9, marginBottom: 16}}>{desc}</p>
        <p style={{fontSize: 12, color: "#D4CDB8", lineHeight: 1.7}}>
          💡 ご提案サンプルのため、現在は空白です。<br/>
          御社の情報をヒアリングのうえ、このセクションを構築いたします。
        </p>
      </div>
    </section>
  );
}

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

  React.useEffect(() => {
    document.documentElement.style.setProperty("--red", t.primary);
  }, [t.primary]);

  return (
    <div data-screen-label="01 Roof Repair HP">
      {t.showAlertBar && <AlertBar />}
      <TopInfo />
      <Header />
      <GNav />
      <Hero />
      <TrustBar />
      <CampaignRow />
      {/* StatBand 削除：実績数(XXX棟など)が確認できないため */}
      <ReasonsSection />
      <ServicesSection linkTo="/service/" />
      <PlaceholderBanner title="施工事例" desc="御社の施工写真(ビフォーアフター)・工事内容・お客様のご感想を反映いたします。" />
      <FlowSection linkTo="/flow/" />
      <PlaceholderBanner title="お客様の声" desc="御社のお客様からのお声・Googleレビュー等を反映いたします。お客様への取材代行も承れます。" />
      <PlaceholderBanner title="代表挨拶" desc="代表者様のお写真・ご挨拶・お人柄が伝わるメッセージを反映いたします。撮影・取材代行も承れます。" />
      <AreaSection />
      <PlaceholderBanner title="よくある質問" desc="お問い合わせの多いご質問とその回答を、カテゴリ別に整理して反映いたします。" />
      <ContactSection />
      <Footer />

      {t.showStickyCTA && <StickyCTA />}
      {t.showFloatSide && <FloatSide />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="表示">
          <TweakToggle label="上部スクロール帯" value={t.showAlertBar} onChange={v => setTweak("showAlertBar", v)} />
          <TweakToggle label="下部固定CTA" value={t.showStickyCTA} onChange={v => setTweak("showStickyCTA", v)} />
          <TweakToggle label="右側フローティング" value={t.showFloatSide} onChange={v => setTweak("showFloatSide", v)} />
        </TweakSection>
        <TweakSection title="ブランドカラー">
          <TweakColor
            label="メインカラー"
            value={t.primary}
            onChange={v => setTweak("primary", v)}
            options={["#D14B3D", "#2C3E5F", "#4A5A3E", "#A03A30", "#1A2540"]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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