/* global React, PageHeader, PageShell */

/* =========================================================
   Contact — calendar CTA, direct contact details, and a
   simple message form. No CTA section at the bottom (this
   IS the CTA page).
   ========================================================= */

function ContactSection() {
  return (
    <React.Fragment>
      <SinglePageIntro id="contact" eyebrow="Contact · Start with a conversation" title="No obligation, no pitch. A direct read of where your asset stands." deck="We typically respond within one business day. The first conversation is a 30 -minute call directly with the founder." bg="navy" />

      {/* Primary CTA: schedule */}
      <section style={{ background: "var(--paper)", padding: "120px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 88, alignItems: "stretch"
          }}>
            {/* Left: schedule a call */}
            <div style={{
              background: "var(--navy-dark)", color: "var(--inverse)",
              padding: 56, position: "relative", overflow: "hidden"
            }}>
              <div style={{
                position: "absolute", inset: 0,
                background: "radial-gradient(ellipse at 90% 10%, rgba(184,150,62,0.20) 0%, transparent 60%)",
                pointerEvents: "none"
              }} />
              <div style={{ position: "relative" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
                  <span className="rule-gold" style={{ background: "var(--gold-light)" }} />
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 12,
                    letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                    color: "var(--gold-light)", fontWeight: 500
                  }}>Schedule a call · 30 minutes</span>
                </div>
                <h2 style={{
                  fontFamily: "var(--font-serif)", fontWeight: 400,
                  fontSize: "clamp(34px, 3.4vw, 48px)", lineHeight: 1.05,
                  letterSpacing: "-0.015em", color: "var(--inverse)", marginBottom: 24
                }}>Book directly on Yann's calendar.</h2>
                <p style={{
                  fontSize: 18, lineHeight: 1.6, color: "rgba(245,240,235,0.78)",
                  marginBottom: 36, maxWidth: 440
                }}>Pick a thirty-minute window that works for you. No assistant, no triage 

                </p>
                <a href={window.BSPOKE_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-gold" style={{
                  padding: "18px 32px", fontSize: 13
                }}>
                  Open the calendar
                </a>
                <div style={{
                  marginTop: 56, paddingTop: 32, borderTop: "1px solid rgba(245,240,235,0.15)",
                  display: "flex", flexDirection: "column", gap: 18
                }}>
                  {[
                  ["Typical agenda", "10 min context · 15 min Q&A · 5 min next steps"],
                  ["No deck on the call", "We read the property, not slides."],
                  ["Confidentiality", "Everything on the call is privileged. NDA on request."]].
                  map(([label, value]) =>
                  <div key={label}>
                      <div style={{
                      fontFamily: "var(--font-mono)", fontSize: 11,
                      letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                      color: "var(--gold-light)", fontWeight: 600, marginBottom: 6
                    }}>{label}</div>
                      <div style={{ fontSize: 15, color: "rgba(245,240,235,0.85)", lineHeight: 1.5 }}>{value}</div>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Right: direct contact card + map placeholder */}
            <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
              <div style={{
                background: "var(--cream)", padding: 40, border: "1px solid var(--line-strong)",
                display: "flex", flexDirection: "column", gap: 28
              }}>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 12,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  color: "var(--gold)", fontWeight: 600
                }}>Direct</div>
                {[
                ["Email", "info@bspokehospitality.com", "mailto:info@bspokehospitality.com"],
                ["Phone", "+1 (786) 531-8870", "tel:+17865318870"],
                ["Office", "Aventura, Florida", null],
                ["Hours", "Monday–Friday · 8:30 to 18:30 ET", null]].
                map(([label, value, href]) =>
                <div key={label} style={{
                  paddingBottom: 24, borderBottom: "1px solid var(--line)"
                }}>
                    <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                    color: "var(--ink-3)", marginBottom: 6
                  }}>{label}</div>
                    {href ?
                  <a href={href} style={{
                    fontFamily: "var(--font-serif)", fontWeight: 400,
                    fontSize: 22, color: "var(--navy)", letterSpacing: "-0.01em"
                  }}>{value}</a> :

                  <div style={{
                    fontFamily: "var(--font-serif)", fontWeight: 400,
                    fontSize: 22, color: "var(--navy)", letterSpacing: "-0.01em"
                  }}>{value}</div>
                  }
                  </div>
                )}
              </div>

              <div className="ph" data-label="AVENTURA OFFICE · MAP PLACEHOLDER" style={{ aspectRatio: "16 / 9" }} />
            </div>
          </div>
        </div>
      </section>

      {/* Branded form CTA — opens Notion form in new tab */}
      <section id="message" style={{ background: "var(--cream)", padding: "140px 0" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 88 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
                <span className="rule-gold" />
                <span className="eyebrow">Or send a note</span>
              </div>
              <h2 style={{
                fontFamily: "var(--font-serif)", fontWeight: 400,
                fontSize: "clamp(34px, 3.4vw, 48px)", lineHeight: 1.05,
                letterSpacing: "-0.015em", color: "var(--navy)", marginBottom: 24, maxWidth: 480
              }}>Tell us about the asset.</h2>
              <p style={{
                fontSize: 18, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: 440, marginBottom: 28
              }}>
                Six short questions about the property, what's on your mind, and the best way to reach you. We'll respond personally within one business day with a few clarifying questions and a suggested time to talk.
              </p>
              <p style={{
                fontFamily: "var(--font-mono)", fontSize: 11,
                letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                color: "var(--ink-3)"
              }}>Response within 24 hours · Confidential by default</p>
            </div>

            <div
              style={{
                background: "var(--paper)", padding: 48, border: "1px solid var(--line-strong)",
                display: "flex", flexDirection: "column", gap: 32, position: "relative"
              }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span className="rule-gold" />
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  color: "var(--gold)", fontWeight: 600
                }}>Contact form</span>
              </div>

              <div>
                <h3 style={{
                  fontFamily: "var(--font-serif)", fontWeight: 400,
                  fontSize: "clamp(26px, 2.4vw, 32px)", lineHeight: 1.15,
                  letterSpacing: "-0.01em", color: "var(--navy)", marginBottom: 16
                }}>Tell us how we can assist you.</h3>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: 520 }}>
                  Submissions are routed directly to the team and acknowledged by email. No marketing automation, no triage queue — we respond to every note.
                </p>
              </div>

              <div style={{
                display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px 24px",
                paddingTop: 24, paddingBottom: 8, borderTop: "1px solid var(--line)"
              }}>
                {[
                "Your name",
                "Email",
                "Company or role",
                "Property — location & size",
                "Engagement type",
                "What's prompting the conversation"].
                map((label) =>
                <div key={label} style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                    <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    color: "var(--gold)", fontWeight: 600, flexShrink: 0
                  }}>·</span>
                    <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 12,
                    letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                    color: "var(--ink-2)", lineHeight: 1.4
                  }}>{label}</span>
                  </div>
                )}
              </div>

              <a
                href="https://bspokehospitality.notion.site/ad4aa8fc16764bfd8d22d9eb1ab7adc5?pvs=105"
                target="_blank"
                rel="noopener"
                className="btn btn-gold"
                style={{
                  marginTop: 8, padding: "18px 32px", fontSize: 13,
                  alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 10
                }}>
                Open the contact form
                <span style={{ fontSize: 16, lineHeight: 1 }} aria-hidden="true">↗</span>
              </a>

              <p style={{
                fontFamily: "var(--font-mono)", fontSize: 11,
                letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                color: "var(--ink-3)", marginTop: -4
              }}>Opens in a new tab</p>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>);

}

window.ContactSection = ContactSection;