// App composition and one-place submit handler.

const {
  Hero,
  Worry,
  Concept,
  FeatureCards,
  Steps,
  SetSection,
  MidCTA,
  MonitorConditions,
  MonitorForm,
  FinalCTA,
  Footer
} = window;

const GOOGLE_FORM_ACTION = "https://docs.google.com/forms/d/e/1FAIpQLSe0tgjwWG2ahiNwu_tuDAn7Sp2vJIKYEBDE-Dk0RyFzkM0GKg/formResponse";
const GOOGLE_FORM_ENTRIES = {
  name: "entry.154317109",
  age: "entry.2060817092",
  email: "entry.782155402",
  saunaFrequency: "entry.422527243",
  hairLength: "entry.849928835",
  hairHistory: "entry.1636399527",
  hairConcerns: "entry.200858573",
  publicUse: "entry.574272121",
  priceTrial3: "entry.1701082402",
  priceTrial10: "entry.936621979",
  priceSet: "entry.1340659622",
  instagram: "entry.1277254781",
  agreements: "entry.1177175626"
};

const appendGoogleFormValue = (formData, entryName, value) => {
  if (!entryName || value === undefined || value === null || value === "") return;
  if (Array.isArray(value)) {
    value.forEach((item) => appendGoogleFormValue(formData, entryName, item));
    return;
  }
  formData.append(entryName, value);
};

const submitMonitorApplication = async (payload) => {
  // Googleフォーム以外へ変更する場合は、この関数だけを差し替えます。
  // 自動応募を減らすため、honeypotの確認は外部送信前に残してください。
  if (payload.companyName) {
    return { ok: false, message: "送信内容を確認してください。" };
  }

  const formData = new FormData();
  Object.entries(GOOGLE_FORM_ENTRIES).forEach(([key, entryName]) => {
    appendGoogleFormValue(formData, entryName, payload[key]);
  });

  try {
    await fetch(GOOGLE_FORM_ACTION, {
      method: "POST",
      mode: "no-cors",
      body: formData
    });
    return { ok: true };
  } catch (error) {
    console.error("Google Form submit failed", error);
    return {
      ok: false,
      message: "送信できませんでした。時間をおいてもう一度お試しください。"
    };
  }
};

const App = () => {
  const formRef = React.useRef(null);
  const scrollToForm = () => {
    const top = formRef.current ? formRef.current.getBoundingClientRect().top + window.scrollY - 18 : 0;
    window.scrollTo({ top, behavior: "smooth" });
  };

  return (
    <div className="page">
      <Hero onCta={scrollToForm} />
      <Worry />
      <Concept />
      <FeatureCards />
      <Steps />
      <SetSection />
      <MidCTA onCta={scrollToForm} />
      <MonitorConditions />
      <div ref={formRef}>
        <MonitorForm onSubmit={submitMonitorApplication} />
      </div>
      <FinalCTA onCta={scrollToForm} />
      <Footer />
    </div>
  );
};

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