// J Renee Studios — Inquire page sections
// Three sections: Hero (typography-only), Form (GHL embed on beige), What to Expect (white)

// ---------- 1. HERO (typography-only) ----------
function IqHero() {
  return (
    <section data-screen-label="01 Inquire Hero" style={{
      background: J_WHITE,
      padding: "72px 48px 56px",
      borderBottom: `1px solid ${J_BEIGE}`,
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
          <JGoldRule width={36} />
          <JEyebrow>Inquire</JEyebrow>
          <JGoldRule width={36} />
        </div>
        <h1 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: J_INK,
          fontSize: "clamp(36px, 4.6vw, 64px)", lineHeight: 1.02,
          letterSpacing: "-0.01em", margin: "0 0 20px 0", textWrap: "balance",
        }}>
          Tell me your <em style={{ fontStyle: "italic", color: J_GOLD }}>story</em>.
        </h1>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300,
          fontSize: "clamp(15px, 1.15vw, 17px)", lineHeight: 1.65,
          color: "#3a3530", maxWidth: 620, margin: "0 auto", textWrap: "pretty",
        }}>
          This goes straight to me — Jennifer. I respond to every inquiry personally,
          usually within an hour during the day.
        </p>
      </div>
    </section>
  );
}

// ---------- 2. FORM (GHL iframe embed) ----------
// The GHL helper script is loaded *after* the iframe mounts so it can
// successfully resize and post messages to the embedded form.
function IqForm() {
  React.useEffect(() => {
    const SRC = "https://link.clicktolaunch.co/js/form_embed.js";
    if (document.querySelector(`script[src="${SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = SRC;
    s.async = true;
    document.body.appendChild(s);
  }, []);

  return (
    <section data-screen-label="02 Inquire Form" style={{
      background: J_BEIGE, padding: "64px 48px 100px",
    }}>
      <div style={{ maxWidth: 720, margin: "0 auto" }}>

        {/* GoHighLevel — MAIN intake form */}
        <div className="iq-ghl-form" style={{
          background: J_WHITE,
          padding: "16px",
          border: `1px solid rgba(26,26,26,0.06)`,
        }}>
          <iframe
            src="https://link.clicktolaunch.co/widget/form/oWDObcjU3C66i5oyHQu8"
            style={{ width: "100%", height: 2017, border: "none", borderRadius: 4, display: "block" }}
            id="inline-oWDObcjU3C66i5oyHQu8"
            data-layout="{'id':'INLINE'}"
            data-trigger-type="alwaysShow"
            data-trigger-value=""
            data-activation-type="alwaysActivated"
            data-activation-value=""
            data-deactivation-type="neverDeactivate"
            data-deactivation-value=""
            data-form-name="MAIN intake form"
            data-height="2017"
            data-layout-iframe-id="inline-oWDObcjU3C66i5oyHQu8"
            data-form-id="oWDObcjU3C66i5oyHQu8"
            title="MAIN intake form"
          />
        </div>

        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 13,
          lineHeight: 1.7, color: J_GREY, textAlign: "center", margin: "48px 0 0 0",
          letterSpacing: "0.02em",
        }}>
          Prefer to write a note instead?{" "}
          <a href="mailto:jennifer@jreneestudios.com" style={{ color: J_INK, textDecoration: "underline", textUnderlineOffset: 4 }}>
            jennifer@jreneestudios.com
          </a>
        </p>
      </div>
    </section>
  );
}

// ---------- 3. WHAT TO EXPECT ----------
function IqExpect() {
  const pillars = [
    {
      number: "01",
      title: "Within 24 hours",
      body: "You'll hear from me directly — usually by text first, since most women find that easier than scheduling a call right away.",
    },
    {
      number: "02",
      title: "A short consultation",
      body: "We'll have a real conversation about what you're hoping for. No pressure, no commitment.",
    },
    {
      number: "03",
      title: "Booking",
      body: "If we're a good fit, we lock in your date and start planning.",
    },
  ];
  return (
    <section data-screen-label="03 What To Expect" style={{
      background: J_WHITE, padding: "160px 48px 180px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>

        <div style={{ textAlign: "center", marginBottom: 96 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 32 }}>
            <JGoldRule width={48} />
            <JEyebrow>What to Expect</JEyebrow>
            <JGoldRule width={48} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: J_INK,
            fontSize: "clamp(40px, 5.6vw, 80px)", lineHeight: 1.04,
            letterSpacing: "-0.01em", margin: 0, textWrap: "balance",
          }}>
            After you hit <em style={{ fontStyle: "italic", color: J_GOLD }}>submit</em>.
          </h2>
        </div>

        <div className="iq-pillars" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 72,
        }}>
          {pillars.map(p => (
            <div key={p.number}>
              <div style={{ height: 1, width: 56, background: J_GOLD, marginBottom: 32 }} />
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
                letterSpacing: "0.42em", color: J_GOLD, marginBottom: 18,
              }}>
                {p.number} · <span style={{ color: J_GREY }}>{p.title}</span>
              </div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: J_INK,
                fontSize: "clamp(24px, 2vw, 30px)", lineHeight: 1.2,
                letterSpacing: "-0.005em", margin: "0 0 20px 0", textWrap: "balance",
              }}>
                {p.title}.
              </h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15.5,
                lineHeight: 1.75, color: "#3a3530", margin: 0, textWrap: "pretty",
              }}>
                {p.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  IqHero, IqForm, IqExpect,
});
