/* global React, PageHeader, PageShell, SectionHead */

/* =========================================================
   About — founder story, philosophy, locations, principles.
   ========================================================= */

function AboutSection() {
  return (
    <React.Fragment>
      <SinglePageIntro id="about" eyebrow="About · BSpoke Hospitality & Asset Group" title="Twenty-five years inside the rooms. Now on your side of the table." deck="BSpoke was founded by Yann Crine after two and a half decades operating luxury hotels in Europe, the Caribbean, and South Florida — to give independent owners the senior-level perspective they used to get from the brand, before the brand became the problem." bg="cream" />

      {/* Founder block */}
      <section style={{ background: "var(--paper)", padding: "140px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap" style={{
          display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 88, alignItems: "start"
        }}>
          <div style={{ position: "sticky", top: 120 }}>
            <div className="ph"
              style={{
                aspectRatio: "4 / 5", borderRadius: 2,
                backgroundImage: "url(assets/photos/yann-crine-profile-web.jpeg)",
                backgroundSize: "cover", backgroundPosition: "center",
              }}
              data-label=""
            />
            <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 8 }}>
              <div style={{
                fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: 26,
                color: "var(--navy)", letterSpacing: "-0.012em"
              }}>Yann Crine</div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 11,
                letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                color: "var(--ink-3)"
              }}>Founder & Principal</div>
            </div>
          </div>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
              <span className="rule-gold" />
              <span className="eyebrow">Founder · Yann Crine</span>
            </div>
            <h2 style={{
              fontFamily: "var(--font-serif)", fontWeight: 400,
              fontSize: "clamp(34px, 3.6vw, 50px)", lineHeight: 1.06,
              letterSpacing: "-0.015em", color: "var(--navy)", marginBottom: 36, maxWidth: 620
            }}>
              The work I do now is the work I wished my owners had access to twenty years ago.
            </h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 22, maxWidth: 620 }}>
              <p style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink-2)" }}>I started in the kitchen of a small Montreal restaurant and spent the next quarter-century in hospitality operating roles as a Manager or Director at the heart of the operations or, pre-opening across luxury independent and flagged properties in Mauritius, St. Barths, the French Alps and Miami.

              </p>
              <p style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink-2)" }}>
                The pattern was always the same. The owner trusted the operator. The operator was incentivized to maximize their fee, not the asset. Six months later the GOP slipped, the CapEx schedule slipped, the brand reps showed up with a "soft-rebranding" pitch — and nobody around the table was actually representing the owner.
              </p>
              <p style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink-2)" }}>
                BSpoke exists to fix that. We don't run hotels. We don't get paid by the brand. We work for the person who owns the building, and we bring twenty-five years of operating literacy to every decision that touches the asset.
              </p>
              <p className="pullquote" style={{
                fontFamily: "var(--font-serif)", fontWeight: 400, fontStyle: "italic",
                fontSize: 26, color: "var(--navy)", marginTop: 16
              }}>
                "The best operators I worked with all had one thing in common — they were never the smartest person in the room, just the most honest about what was actually broken."
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Principles */}
      <section style={{ background: "var(--cream)", padding: "140px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <SectionHead
            eyebrow="Operating principles"
            title="How we make decisions when the table is loud."
            deck="Five non-negotiables that show up in every engagement, every memo, every quarterly board meeting." />
          
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 32 }}>
            {[
            ["01", "Owner-first.", "Every recommendation passes one filter: does this serve the owner's hold-period objective? If not, it doesn't ship."],
            ["02", "Operator-literate.", "We've sat in every operating seat. We know which numbers the operator is hiding and which ones they're proud of."],
            ["03", "Quiet authority.", "We don't sell decks. We send memos. The work is in the work, not the storytelling around it."],
            ["04", "Independent of brand.", "We hold no franchise relationships. No referral fees. No conflicting compensation. Period."],
            ["05", "Long arc, not the deal.", "We turn down engagements that won't survive a five-year hold. The compound matters more than the close."]].
            map(([num, head, body]) =>
            <div key={num}>
                <div style={{
                fontFamily: "var(--font-mono)", fontSize: 13,
                letterSpacing: "var(--tracking-label)", color: "var(--gold)", fontWeight: 600,
                marginBottom: 18
              }}>{num}</div>
                <h3 style={{
                fontFamily: "var(--font-serif)", fontWeight: 400,
                fontSize: 22, lineHeight: 1.2, letterSpacing: "-0.012em",
                color: "var(--navy)", marginBottom: 14
              }}>{head}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)" }}>{body}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Locations / where we work */}
      <section style={{ background: "var(--paper)", padding: "140px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 88, alignItems: "start" }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
                <span className="rule-gold" />
                <span className="eyebrow">Where we work</span>
              </div>
              <h2 style={{
                fontFamily: "var(--font-serif)", fontWeight: 400,
                fontSize: "clamp(34px, 3.6vw, 50px)", lineHeight: 1.06,
                letterSpacing: "-0.015em", color: "var(--navy)", marginBottom: 32, maxWidth: 540
              }}>South Florida, deeply. Selectively beyond.</h2>
              <p style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink-2)", maxWidth: 520, marginBottom: 28 }}>
                We're based in Miami and most of our active engagements are within ninety minutes of the office — from South Beach to Palm Beach to the Keys. We selectively work outside the region when the founder personally knows the property or operator.
              </p>
              <p style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink-2)", maxWidth: 520 }}>Proximity matters. Asset management isn't a Zoom job. We walk the property regularly.

              </p>
            </div>
            <div className="ph"
              style={{
                aspectRatio: "4 / 3", borderRadius: 2,
                backgroundImage: "url(assets/photos/Map.jpeg)",
                backgroundSize: "cover", backgroundPosition: "center",
              }}
              data-label=""
            />
          </div>

          <div style={{
            marginTop: 80, paddingTop: 40, borderTop: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32
          }}>
            {[
            ["Office", "Aventura, FL"],
            ["Active markets", "Miami · Miami Beach · Fort Lauderdale · Palm Beach · The Keys"],
            ["Founded", "2021"],
            ["Currently advising", "10 properties"]].
            map(([label, value]) =>
            <div key={label}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>{label}</div>
                <div style={{ fontSize: 17, color: "var(--navy)", fontWeight: 500, lineHeight: 1.4 }}>{value}</div>
              </div>
            )}
          </div>
        </div>
      </section>
    </React.Fragment>);

}

window.AboutSection = AboutSection;