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

/* =========================================================
   Why Us — differentiation. Comparison vs alternatives,
   what we won't do, what makes an engagement work.
   ========================================================= */

const COMPARISON = [
  {
    label: "Whose interests they serve",
    bspoke: "Yours, exclusively. We are paid by the owner, period.",
    brand:  "Their brand standards and royalty stream.",
    operator: "Their management fee and incentive structure.",
    consult:  "Whoever signed the engagement letter — usually not the owner.",
  },
  {
    label: "How they're compensated",
    bspoke: "Flat or retainer. No deal-based fees, no referrals.",
    brand:  "Percentage of revenue, royalty fees, marketing levies.",
    operator: "Base fee (% of revenue) + incentive (% of GOP).",
    consult:  "Hourly or project; bigger deck wins more billable hours.",
  },
  {
    label: "Who shows up to the property",
    bspoke: "Founder + senior advisor. Same two faces, every visit.",
    brand:  "Rotating regional reps. Quarterly at best.",
    operator: "GM and corporate, but they live there — and answer to corporate.",
    consult:  "Senior on the pitch, juniors on the work.",
  },
  {
    label: "What they're optimizing for",
    bspoke: "Asset value at the end of your hold period.",
    brand:  "Brand consistency and royalty maximization.",
    operator: "GOP this quarter (because that's the incentive trigger).",
    consult:  "The next engagement.",
  },
  {
    label: "Engagement length",
    bspoke: "8 weeks to 5+ years. We stay as long as the work needs us.",
    brand:  "10–20 year licensing agreement (locked in).",
    operator: "5–10 year HMA, often hard to exit.",
    consult:  "8–12 weeks, then they're gone.",
  },
];

const WONTS = [
  ["Take operator referral fees.", "Not from brands. Not from PMS vendors. Not from designers. Not ever."],
  ["Sell you a deck and disappear.", "Every engagement is structured around an outcome the owner can audit, not a binder on a shelf."],
  ["Compete with your operator.", "If you have a good operator, we make them better. If you don't, we say so and help you find one."],
  ["Accept work outside our circle.", "We don't take engagements where we can't show up in person within 90 minutes."],
  ["Hide behind 'industry standard.'", "Every recommendation is reasoned from your asset's economics, not a benchmark deck."],
];

function WhyUsSection() {
  return (
    <React.Fragment>
      <SinglePageIntro id="why-us" eyebrow="Why BSpoke · Differentiation" title="The operator's seat at the owner's table." deck="Most advisory firms have never run a property. Most operators are paid to disagree with you. Brands are paid to standardize you. BSpoke is the one chair in the room that's paid to think like you." bg="navy" />

      {/* Comparison table */}
      <section style={{ background: "var(--paper)", padding: "140px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <SectionHead
            eyebrow="The four chairs at every owner's table"
            title="And whose interests each one is paid to defend."
            deck="A reductive but useful map. Every voice your asset hears has incentives. Here is how they line up — and where we sit."
          />

          <div style={{
            border: "1px solid var(--line-strong)",
            background: "var(--paper)",
            overflow: "hidden",
            marginTop: 24,
          }}>
            {/* Header row */}
            <div style={{
              display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr 1fr",
              background: "var(--navy-dark)", color: "var(--inverse)",
            }}>
              {[
                ["", null],
                ["BSpoke", true],
                ["Brand", false],
                ["3rd-party Operator", false],
                ["Big-4 Consultant", false],
              ].map(([label, isUs], i) => (
                <div key={i} style={{
                  padding: "24px 24px",
                  fontFamily: "var(--font-mono)", fontSize: 12,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  fontWeight: 600,
                  background: isUs ? "rgba(184,150,62,0.18)" : "transparent",
                  color: isUs ? "var(--gold-light)" : (label ? "rgba(245,240,235,0.78)" : "transparent"),
                  borderRight: i < 4 ? "1px solid rgba(245,240,235,0.10)" : "none",
                }}>{label}</div>
              ))}
            </div>

            {/* Body rows */}
            {COMPARISON.map((row, idx) => (
              <div key={row.label} style={{
                display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr 1fr",
                borderTop: idx === 0 ? "none" : "1px solid var(--line)",
              }}>
                <div style={{
                  padding: 24, background: "var(--cream)",
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  color: "var(--ink-2)", fontWeight: 600,
                  borderRight: "1px solid var(--line)",
                }}>{row.label}</div>
                <div style={{
                  padding: 24, background: "rgba(184,150,62,0.06)",
                  borderRight: "1px solid var(--line)",
                  fontSize: 15, lineHeight: 1.5, color: "var(--navy)", fontWeight: 500,
                }}>{row.bspoke}</div>
                <div style={{
                  padding: 24, borderRight: "1px solid var(--line)",
                  fontSize: 14, lineHeight: 1.5, color: "var(--ink-2)",
                }}>{row.brand}</div>
                <div style={{
                  padding: 24, borderRight: "1px solid var(--line)",
                  fontSize: 14, lineHeight: 1.5, color: "var(--ink-2)",
                }}>{row.operator}</div>
                <div style={{
                  padding: 24,
                  fontSize: 14, lineHeight: 1.5, color: "var(--ink-2)",
                }}>{row.consult}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What we won't do */}
      <section style={{ background: "var(--cream)", padding: "140px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <SectionHead
            eyebrow="The short list of things we won't do"
            title="Discipline is a feature."
            deck="Most advisory firms are defined by what they're willing to take on. We're defined by what we turn down."
          />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "32px 64px", marginTop: 16 }}>
            {WONTS.map(([h, b], i) => (
              <div key={h} style={{
                paddingTop: 24, borderTop: "1px solid var(--line-strong)",
                display: "flex", gap: 24, alignItems: "flex-start",
              }}>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 13,
                  letterSpacing: "var(--tracking-label)", color: "var(--gold)", fontWeight: 600,
                  paddingTop: 4,
                }}>{String(i + 1).padStart(2, "0")}</div>
                <div>
                  <h3 style={{
                    fontFamily: "var(--font-serif)", fontWeight: 400,
                    fontSize: 24, lineHeight: 1.2, letterSpacing: "-0.012em",
                    color: "var(--navy)", marginBottom: 12,
                  }}>{h}</h3>
                  <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)" }}>{b}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Right-fit / wrong-fit */}
      <section style={{ background: "var(--paper)", padding: "140px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <SectionHead
            eyebrow="Right fit · Wrong fit"
            title="We work better when both sides are honest about it."
            deck="A short read on whether a conversation with BSpoke would be a good use of your time."
          />

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
            <div style={{
              background: "var(--cream)", padding: 40, border: "1px solid var(--line-strong)",
            }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 12,
                letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                color: "var(--gold)", fontWeight: 600, marginBottom: 24,
              }}>Right fit</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 18 }}>
                {[
                  "You own an independent or boutique-flagged hotel in South Florida.",
                  "You're a family office or developer with one or two hotel assets in the portfolio — not enough to justify a full-time in-house team.",
                  "You're holding the asset for 5+ years and care about value at exit, not just this quarter.",
                  "You suspect your operator or brand isn't optimizing for your interests, but you don't have the operating literacy to prove it.",
                  "You want a single, accountable voice in the room — not a 12-person consulting team.",
                ].map((x) => (
                  <li key={x} style={{
                    fontSize: 16, lineHeight: 1.55, color: "var(--ink)",
                    paddingLeft: 24, position: "relative",
                  }}>
                    <span style={{
                      position: "absolute", left: 0, top: 9,
                      width: 12, height: 1.5, background: "var(--gold)",
                    }} />
                    {x}
                  </li>
                ))}
              </ul>
            </div>

            <div style={{
              background: "var(--paper)", padding: 40, border: "1px solid var(--line)",
            }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 12,
                letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                color: "var(--ink-3)", fontWeight: 600, marginBottom: 24,
              }}>Probably not the right fit</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 18 }}>
                {[
                  "You own a flagged hotel in a 20-year HMA and have no intent or ability to revisit the agreement.",
                  "You're flipping the asset within 18 months and need a story rather than a result.",
                  "You're looking for a service-level agreement with KPIs and a procurement team to manage us through. (We are too small and too senior for that workflow.)",
                  "You want an advisor whose first move is a 60-slide opening deck. Ours is a site visit.",
                  "You believe brand consistency is the highest value an asset can offer. We do not ; operations, pricing, labor discipline and revenue strategy drive asset value. ",
                ].map((x) => (
                  <li key={x} style={{
                    fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)",
                    paddingLeft: 24, position: "relative",
                  }}>
                    <span style={{
                      position: "absolute", left: 0, top: 9,
                      width: 12, height: 1, background: "var(--line-strong)",
                    }} />
                    {x}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.WhyUsSection = WhyUsSection;