/* eslint-disable */
// Book a Blueprint / Contact page, based on the current site's "Get Started" page.

function ContactScreen({ go, t }) {
  return (
    <div data-screen-label="13 Book a Blueprint">
      {/* HERO, big navy slab */}
      <section className="contact-hero">
        <div className="container">
          <Crumbs items={["Intelligence Assist", "Contact"]} />
          <h1 className="contact-hero-title">
            Get started on your <em>AI journey.</em>
          </h1>
        </div>
        {/* base graphic decoration */}
        <div aria-hidden className="contact-hero-bg" />
      </section>

      {/* INTRO */}
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 32 }}>
        <div className="container container--narrow" style={{ textAlign: "center" }}>
          <Eyebrow plain>Get in touch &amp; start your AI journey</Eyebrow>
          <h2 className="h-section" style={{ marginTop: 14, fontSize: 40 }}>
            Discover your AI opportunities.
          </h2>
          <p className="lede" style={{ marginTop: 22, marginLeft: "auto", marginRight: "auto" }}>Every business is different, and so is the right starting point. Book a 30-minute scoping call with our founder to talk through where you are, what's blocking you, and which engagement shape fits.



          </p>
        </div>
      </section>

      {/* BOOKING WIDGET */}
      <section className="section section--white" id="booking" style={{ paddingTop: 24, paddingBottom: 96 }}>
        <div className="container">
          <BookingWidget go={go} />
        </div>
      </section>

      {/* BOOST YOUR BUSINESS, blue band */}
      <section className="section section--tight" style={{ background: "var(--ia-blue)", color: "#fff", padding: "72px 0" }}>
        <div className="container">
          <div className="contact-band">
            <div>
              <Eyebrow style={{ color: "var(--ia-light-blue)" }}>Why book a call</Eyebrow>
              <h2 className="h-section" style={{ color: "#fff", maxWidth: "16ch", marginTop: 10 }}>
                Boost your business with AI today.
              </h2>
            </div>
            <ul className="contact-band-list">
              <li><span className="contact-band-dot" /> Expert guidance from a team with 20+ years of combined experience</li>
              <li><span className="contact-band-dot" /> Tailored solutions for your unique business goals, not generic advice</li>
              <li><span className="contact-band-dot" /> A proven track record across Australian SMBs in 14 industries</li>
            </ul>
          </div>
        </div>
      </section>

      {/* FAQ, pricing & onboarding */}
      <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container">
          <PageFAQ
            pageId="contact"
            go={go}
            eyebrow="Before you book"
            title="Pricing & process, answered."
          />
        </div>
      </section>

      {/* PREFER EMAIL, small alternative contact strip */}
      <section className="section section--white" style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="container">
          <div className="alt-contact">
            <div>
              <Eyebrow>Not the call type?</Eyebrow>
              <h3 className="h-card" style={{ fontSize: 22, marginTop: 10 }}>
                Other ways to start a conversation.
              </h3>
            </div>
            <div className="alt-contact-list">
              <a href="mailto:info@intelligenceassist.com.au" className="alt-contact-row">
                <div className="alt-contact-ic"><Icon name="mail" size={18} color="var(--ia-blue)" /></div>
                <div className="alt-contact-body">
                  <span className="alt-contact-lbl">Email</span>
                  <span className="alt-contact-val">info@intelligenceassist.com.au</span>
                </div>
                <Icon name="arrow-right" size={14} color="#9BA0AE" />
              </a>
              <a href="tel:1300059625" className="alt-contact-row">
                <div className="alt-contact-ic"><Icon name="phone" size={18} color="var(--ia-blue)" /></div>
                <div className="alt-contact-body">
                  <span className="alt-contact-lbl">Phone</span>
                  <span className="alt-contact-val">1300 059 625</span>
                </div>
                <Icon name="arrow-right" size={14} color="#9BA0AE" />
              </a>
              <button onClick={() => go("blueprint")} className="alt-contact-row">
                <div className="alt-contact-ic"><Icon name="compass" size={18} color="var(--ia-blue)" /></div>
                <div className="alt-contact-body">
                  <span className="alt-contact-lbl">Read first</span>
                  <span className="alt-contact-val">What's an AI Blueprint, exactly?</span>
                </div>
                <Icon name="arrow-right" size={14} color="#9BA0AE" />
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>);

}

// ---------- Booking (live Calendly integration) ----------
// The one place to change the scheduling link.
const CALENDLY_URL = "https://calendly.com/d/ct2y-ykq-m99/30-minute-connect-janey-arsh";
const CALENDLY_SCRIPT = "https://assets.calendly.com/assets/external/widget.js";

// Loads Calendly's widget.js once per page. Returns "loading" | "ready" | "failed",
// so a blocked script or an offline machine can fall back to a plain link rather
// than leaving an empty box on the page.
function useCalendlyScript() {
  const [state, setState] = React.useState(() => (window.Calendly ? "ready" : "loading"));
  React.useEffect(() => {
    if (window.Calendly) { setState("ready"); return; }
    let el = document.querySelector(`script[data-calendly="1"]`);
    if (!el) {
      el = document.createElement("script");
      el.src = CALENDLY_SCRIPT;
      el.async = true;
      el.dataset.calendly = "1";
      document.head.appendChild(el);
    }
    // widget.js defines window.Calendly synchronously on load.
    const ok = () => setState(window.Calendly ? "ready" : "failed");
    const bad = () => setState("failed");
    el.addEventListener("load", ok);
    el.addEventListener("error", bad);
    return () => { el.removeEventListener("load", ok); el.removeEventListener("error", bad); };
  }, []);
  return state;
}

// The real scheduler, embedded inline. Calendly renders its own confirmation
// (with the add-to-calendar links) inside the iframe once a time is picked, so
// this deliberately doesn't try to draw a confirmation of its own.
function CalendlyEmbed({ url = CALENDLY_URL, hideDetails = true }) {
  const mount = React.useRef(null);
  const status = useCalendlyScript();
  const [height, setHeight] = React.useState(720);

  // Calendly posts its content height as the visitor moves through the flow;
  // following it keeps the iframe from growing an inner scrollbar.
  React.useEffect(() => {
    const onMsg = (e) => {
      if (typeof e.origin === "string" && !e.origin.includes("calendly.com")) return;
      const d = e.data;
      if (d && d.event === "calendly.page_height" && d.payload && d.payload.height) {
        const h = parseInt(d.payload.height, 10);
        if (Number.isFinite(h)) setHeight(Math.max(560, h));
      }
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, []);

  React.useEffect(() => {
    if (status !== "ready" || !mount.current) return;
    mount.current.innerHTML = "";
    const params = new URLSearchParams({
      embed_domain: window.location.hostname || "localhost",
      embed_type: "Inline",
      hide_gdpr_banner: "1",
      primary_color: "0119B7", // --ia-blue, so Calendly's buttons match the site
    });
    // The aside already carries the duration/format, so Calendly's duplicate
    // header is hidden by default. Pass hideDetails={false} to show it instead.
    if (hideDetails) params.set("hide_event_type_details", "1");
    window.Calendly.initInlineWidget({
      url: `${url}?${params.toString()}`,
      parentElement: mount.current,
    });
  }, [status, url, hideDetails]);

  if (status === "failed") {
    return (
      <div className="booking-fallback">
        <Icon name="calendar-x" size={22} color="#9BA0AE" />
        <p>The booking calendar couldn't load. It may be blocked, or you may be offline.</p>
        <Button variant="primary" onClick={() => window.open(url, "_blank", "noopener")}>
          Open the calendar on Calendly <Icon name="external-link" size={14} className="arrow" />
        </Button>
      </div>);
  }

  return (
    <div className="booking-embed" style={{ height }}>
      {status === "loading" &&
        <div className="booking-embed-loading">Loading available times…</div>}
      <div ref={mount} className="booking-embed-host" />
    </div>);
}

function BookingWidget({ eventName, blurb, host, url = CALENDLY_URL }) {
  const ev = eventName || "AI Blueprint scoping call";
  const evBlurb = blurb || "A 30-minute conversation about where you are, what's blocking you, and whether a Blueprint is the right next step.";
  const hostName = host === null ? null : host || "Janey Treleaven";

  return (
    <div className="booking-widget">
      {/* Left: Who you're meeting */}
      <aside className="booking-aside">
        <div className="booking-brand">
          <img src="assets/logos/ia-logo-h-blue.png" alt="Intelligence Assist" style={{ height: 28 }} />
        </div>
        {hostName &&
        <div className="booking-host">
          <div className="booking-host-avatar">
            <image-slot id="booking-host-avatar" placeholder="Host photo" shape="circle" fit="cover" />
          </div>
          <div>
            <div className="booking-host-name">{hostName}</div>
            <div className="booking-host-role"></div>
          </div>
        </div>
        }
        <hr className="divider" style={{ margin: "20px 0" }} />
        <h3 className="booking-event-name">{ev}</h3>
        <ul className="booking-event-meta">
          <li><Icon name="clock" size={14} color="#9BA0AE" /><span>30 minutes</span></li>
          <li><Icon name="video" size={14} color="#9BA0AE" /><span>Web conferencing details provided upon confirmation.
</span></li>
          <li><Icon name="globe" size={14} color="#9BA0AE" /><span>Australia/Sydney</span></li>
          <li><Icon name="dollar-sign" size={14} color="#9BA0AE" /><span>Free, no obligation</span></li>
        </ul>
        <p className="booking-event-blurb">{evBlurb}</p>
      </aside>

      {/* Right: the live Calendly scheduler */}
      <div className="booking-main booking-main--embed">
        <CalendlyEmbed url={url} />
      </div>
    </div>);

}

function BookingField({ label, value, onChange, type = "text", required, optional, placeholder }) {
  return (
    <label className="booking-field">
      <span className="booking-field-lbl">
        {label}{required && <span className="booking-req"> *</span>}{optional && <span className="booking-opt">(optional)</span>}
      </span>
      {type === "textarea" ?
      <textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        required={required}
        rows={3} /> :


      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        required={required} />

      }
    </label>);

}

Object.assign(window, { ContactScreen, BookingWidget, CalendlyEmbed, CALENDLY_URL });