/* Book — the Vibe Check booking page. Expectations, qualification, Calendly. */

function BookExpectations() {
  return (
    <Section>
      <div className="gw-wrap gw-grid gw-grid--result">
        <div className="gw-measure">
          <FitHeading level={2} max={72} style={{ margin: 0 }} lines={["What a Vibe Check actually is."]} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 23, lineHeight: 1.5, color: "var(--ink-1)", maxWidth: "48ch", margin: "32px 0 40px" }}>
            20 minutes on a call. You bring the thing you cannot get onto the page. We work out whether the missing piece is the position, the writing or both.
          </p>
          <div>
            {[["It is not a pitch", "If neither offer fits, I will say so and tell you what would."],
              ["Bring the messy version", "The half-formed idea, the post you abandoned, the client conversation you keep having."],
              ["You leave with a read", "Even if we never work together, you leave knowing which problem you actually have."]].map(([t, b]) => (
              <div key={t} style={{ borderTop: "var(--border-hair)", padding: "22px 0" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 26, marginBottom: 8 }}>{t}</div>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.58, color: "var(--ink-2)", margin: 0, maxWidth: "46ch" }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{ borderTop: "var(--border-slab)", paddingTop: 28 }}>
            <Kicker>This is a good fit if</Kicker>
            <ul style={{ listStyle: "none", margin: "22px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {["You are senior in your field and the work speaks for itself in the room.",
                "Referrals carry you, and you would rather they did not have to.",
                "You have several credible services and no memorable position.",
                "You have tried posting consistently and it quietly stopped."].map((t) => (
                <li key={t} style={{ display: "flex", gap: 12, fontFamily: "var(--font-typewriter)", fontSize: 15, lineHeight: 1.5, color: "var(--ink-1)" }}>
                  <span style={{ color: "var(--crimson)" }}>&mdash;</span><span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ borderTop: "var(--border-rule)", paddingTop: 24, marginTop: 40 }}>
            <Kicker>Less good if</Kicker>
            <ul style={{ listStyle: "none", margin: "22px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {["You want volume posting at the lowest possible price.",
                "You want the work signed off by a committee.",
                "You are looking for follower growth rather than buyers."].map((t) => (
                <li key={t} style={{ display: "flex", gap: 12, fontFamily: "var(--font-typewriter)", fontSize: 15, lineHeight: 1.5, color: "var(--ink-3)" }}>
                  <span style={{ color: "var(--ink-4)" }}>&mdash;</span><span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <MarginNote style={{ marginTop: 32 }}>no deck. no discovery framework. a conversation.</MarginNote>
        </div>
      </div>
    </Section>
  );
}

/* Calendly is loaded only after the visitor asks for it, per the performance
   rules: no third-party script on first paint. */
function BookCalendar() {
  const [loaded, setLoaded] = React.useState(false);
  return (
    <Section tint="var(--paper-1)" id="calendar">
      <div className="gw-wrap">
        <div className="gw-kicker">Pick a time</div>
        <FitHeading level={2} max={64} className="gw-h2--sm" style={{ margin: "28px 0 32px" }} lines={["20 minutes, no preparation needed."]} />
        <div style={{ border: "var(--border-ink)", background: "var(--paper-0)", minHeight: 520, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
          {loaded ? (
            <iframe src="https://calendly.com/sarratheghost/vibe-check?hide_gdpr_banner=1&background_color=fbf8f2&text_color=14110e&primary_color=c2303c"
              title="Book a Vibe Check" style={{ width: "100%", height: 640, border: 0 }} />
          ) : (
            <div style={{ textAlign: "center", maxWidth: "42ch" }}>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 20, lineHeight: 1.5, color: "var(--ink-2)", margin: "0 0 28px" }}>
                The calendar loads when you ask for it, so it does not slow the page down for anyone reading.
              </p>
              <EditorialButton href="https://calendly.com/sarratheghost/vibe-check" onClick={(e) => { e.preventDefault(); setLoaded(true); }}>Load the calendar</EditorialButton>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-3)", marginTop: 24, display: "flex", flexDirection: "column", gap: 8, alignItems: "center" }}>
                <a href="https://calendly.com/sarratheghost/vibe-check" target="_blank" rel="noopener">Open the calendar in a new tab</a>
                <a href="mailto:sarra@theghost.rocks">Or email sarra@theghost.rocks</a>
              </div>
            </div>
          )}
        </div>
      </div>
    </Section>
  );
}

function BookFaq() {
  const items = [
    { q: "How long is the call?", a: "20 minutes. If it runs over because the conversation is good, that is fine." },
    { q: "Do I need to prepare anything?", a: "No. Bring the thing you keep failing to write, or the sentence about your work you cannot finish. That is enough to start." },
    { q: "Will you try to sell me something?", a: "I will tell you which of the 2 offers fits, or that neither does. Positioning and ghostwriting are the only things I do, so there is nothing else to push." },
    { q: "What happens afterwards?", a: "You get a short written read of what I heard, whether or not we work together." },
  ];
  return (
    <Section>
      <div className="gw-wrap">
        <div className="gw-kicker">Before you book</div>
        <div style={{ marginTop: 36 }}><FAQ items={items} /></div>
      </div>
    </Section>
  );
}

function Book() {
  return (
    <div className="ghost-web" style={{ background: "var(--paper-0)" }}>
      <Header />
      <PageHero kicker="Book a Vibe Check"
        headline={["Bring the thing you cannot", <>get onto the <span style={{ color: "var(--crimson)" }}>page.</span></>]}
        lead="20 minutes. We work out whether the missing piece is the position, the writing or both."
        action="Pick a time" href="#calendar"
        art={<ArtefactSlot className="gw-hero-art" ratio="4 / 5" position="38% 50%"
          src="assets/photos/typewriter-desk.png"
          alt="A typewriter under a desk lamp with a redacted page in the carriage, a dictaphone and a stack of bound drafts" />} />
      <BookExpectations />
      <BookCalendar />
      <BookFaq />
      <Footer />
    </div>
  );
}

Object.assign(window, { Book });
