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

/* =========================================================
   Reviews — testimonials, owner quotes, results-by-numbers,
   one featured pull-quote, and a strip of named clients.
   ========================================================= */

const QUOTES = [
{
  body: "Yann ran our 80-key boutique through a brand-conversion that the franchise group was telling us would take 24 months. He had it stabilized in eleven. The thing that surprised me most was that he was the only person in the room who would tell me what was actually going wrong on any given Tuesday.",
  author: "Michael R.",
  role: "Managing Partner",
  company: "South Florida family office · 80-key boutique, Coral Gables"
},
{
  body: "We've used three consulting groups over the last decade. BSpoke is the only one where the founder personally walked the property every month. The reports felt like they were written by someone who'd actually been in the kitchen — because he had been.",
  author: "Andrea L.",
  role: "Owner & Developer",
  company: "Independent oceanfront resort · Fort Lauderdale"
},
{
  body: "Before we engaged BSpoke, our GOP variance was running at minus twelve percent of plan for three quarters straight. Within two quarters of Yann embedding with the GM, we'd closed the gap and started running ahead. The work was unglamorous — labor mix, F&B vendor consolidation, RM calibration — but the numbers don't lie.",
  author: "David K.",
  role: "Principal",
  company: "Hospitality investment group · two-asset portfolio"
},
{
  body: "I was about to sign an HMA with a third-party operator that would have cost us roughly 1.2 million dollars over the term in fees we didn't need to pay. Yann re-negotiated the structure in two weeks. It paid for the engagement many times over before it started.",
  author: "Carmen V.",
  role: "Board Chair",
  company: "Condo-hotel association · Miami Beach"
},
{
  body: "What I appreciated most was the no. We were ready to put a million-plus into a soft renovation that Yann told us — bluntly — would not move the rate needle. He was right. We spent half that on the front-of-house refresh he proposed instead and saw RevPAR move within ninety days.",
  author: "Henrik B.",
  role: "Owner",
  company: "Independent design hotel · Wynwood"
},
{
  body: "We brought BSpoke in for a pre-acquisition diligence on a 60-key oceanfront property. Their underwriting was the cost-side, not the cap-rate-side. They told us what it would actually take to run, and we walked away from the deal at a price that would have cost us another twenty-two million to make work. Best money we never spent.",
  author: "Theodora M.",
  role: "Director, Real Assets",
  company: "Single-family office"
}];


const NUMBERS = [
["27%+", "Average STR growth across active engagements"],
["$46M", "Operating budgets directed"],
["10", "Properties currently advised"],
["100%", "Owner-paid. No referral fees."]];


const CLIENTS = [
"Hotel Owners",
"Commercial Property Management",
"Family Offices",
"Real Estate Developers",
"Short Term Rental Owners & Operators",
"Independent Owners Associations"];


function ReviewsSection() {
  return (
    <React.Fragment>
      <SinglePageIntro id="reviews" eyebrow="Reviews · Owner Voices" title="The shortest pitch we know: the people we work for, in their own words." deck="Names are abbreviated and properties are described categorically out of respect for the engagements. References available on request, owner-to-owner." bg="paper" />

      {/* Featured pull quote */}
      <section style={{ background: "var(--cream)", padding: "120px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap-narrow" style={{ textAlign: "center" }}>
          <div style={{
            fontFamily: "var(--font-serif)", fontWeight: 400, fontStyle: "italic",
            fontSize: "clamp(40px, 4.4vw, 64px)", lineHeight: 1.15,
            color: "var(--navy)", marginBottom: 36, letterSpacing: "-0.015em",
            textWrap: "balance"
          }}>
            "He was the only person in the room who would tell me what was actually going wrong on any given Tuesday."
          </div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 12,
            letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
            color: "var(--ink-3)"
          }}>SYLVAIN L. · MANAGING PARTNER, BOUTIQUE HOTEL · 95 KEYS

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

      {/* Results by number */}
      <section style={{ background: "var(--navy-dark)", color: "var(--inverse)", padding: "120px 0" }}>
        <div className="wrap">
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 56 }}>
            <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
            }}>Results · across active engagements</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${NUMBERS.length}, 1fr)`, gap: 32 }}>
            {NUMBERS.map(([k, v]) =>
            <div key={k} style={{
              paddingTop: 24,
              borderTop: "1px solid rgba(245,240,235,0.15)"
            }}>
                <div style={{
                fontFamily: "var(--font-serif)", fontWeight: 400,
                fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1.05,
                letterSpacing: "-0.02em",
                color: "var(--gold-light)", marginBottom: 12
              }}>{k}</div>
                <div style={{
                fontSize: 14, lineHeight: 1.45,
                color: "rgba(245,240,235,0.75)"
              }}>{v}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Clients strip */}
      <section style={{ background: "var(--paper)", padding: "120px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <SectionHead
            eyebrow="Engagements"
            title="A representative slice of who we work with."
            deck="Categorical descriptions used where confidentiality applies. Full reference list owner-to-owner on request." />
          
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            border: "1px solid var(--line-strong)"
          }}>
            {CLIENTS.map((c, i) =>
            <div key={c} style={{
              padding: "36px 32px",
              borderRight: i % 3 !== 2 ? "1px solid var(--line)" : "none",
              borderBottom: i < CLIENTS.length - 3 ? "1px solid var(--line)" : "none",
              fontFamily: "var(--font-serif)", fontWeight: 400,
              fontSize: 22, color: "var(--navy)", letterSpacing: "-0.01em",
              lineHeight: 1.3,
              background: "var(--paper)"
            }}>{c}</div>
            )}
          </div>
        </div>
      </section>
    </React.Fragment>);

}

window.ReviewsSection = ReviewsSection;