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

/* =========================================================
   Services — long-form detail page.
   Six service offerings, each with anchor, deliverables, and a
   placeholder photo. Reading order matches the homepage.
   ========================================================= */

const SERVICE_DETAILS = [
  {
    id: "asset-management",
    eyebrow: "01 · Asset Management",
    title: "Owner-side asset management for the long arc.",
    deck: "We sit on your side of the table — managing operators, brand reps, and capital partners with one objective: protect your asset and compound its value over the hold period.",
    deliverables: [
      "Monthly performance review (rooms, F&B, ancillary, CAM)",
      "Operator scorecard and budget challenge",
      "Capital plan and FF&E oversight",
      "Brand standards compliance and audits",
      "Investor reporting (board-ready packages)",
      "Monthly owner reporting within 10 business days",
    ],
    outcomes: [
      ["GOP variance closed", "−12% → +6%"],
      ["FF&E reserve discipline", "Restored to 4% of total revenue"],
      ["Monthly owner reporting", "Within 10 business days"],
    ],
    photoLabel: "Asset Review · Quarterly Owner Meeting",
    photo: "assets/photos/01-Asset-Management.jpeg",
  },
  {
    id: "operations",
    eyebrow: "02 · Operations Advisory",
    title: "When the property exists, but the result doesn't.",
    deck: "A short, focused diagnostic followed by a hands-on engagement to fix what's actually wrong — labor mix, revenue management, F&B P&L, guest journey, or all of the above.",
    deliverables: [
      "10-day on-property diagnostic",
      "GOP recovery plan with weekly milestones",
      "Department-level coaching (FOH, F&B, housekeeping)",
      "Revenue management calibration",
      "Embedded leadership during transitions",
    ],
    outcomes: [
      ["F&B contribution margin", "+14 pts in two quarters"],
      ["RevPAR vs comp set", "+9% in 6 months"],
      ["Guest-survey detractor rate", "−42%"],
    ],
    photoLabel: "Operations Walkthrough · Front-of-House",
    photo: "assets/photos/02-operations-advisory.jpeg",
  },
  {
    id: "pre-opening",
    eyebrow: "03 · Pre-Opening",
    title: "From entitlement to first guest.",
    deck: "Pre-opening is where most independent hotels lose 18 months of margin to oversight gaps. We build the playbook, hire the leadership, and stand up the systems before opening day.",
    deliverables: [
      "Pre-opening critical path (T-minus 18 months)",
      "Department-head recruitment and onboarding",
      "Technology stack selection (PMS, RMS, POS, CRM)",
      "Soft-opening protocol and ramp plan",
    ],
    outcomes: [
      ["Opening-year stabilized timeline", "Months 9–11 (industry: 18+)"],
      ["Pre-opening budget adherence", "Within 3%"],
      ["Year-1 RevPAR vs underwriting", "+11%"],
    ],
    photoLabel: "Pre-Opening · Team Onboarding",
    photo: "assets/photos/03-Pre-Opening.jpeg",
  },
  {
    id: "owner-rep",
    eyebrow: "04 · Owner Representation",
    title: "An advocate in every room.",
    deck: "Brand reps, third-party operators, GCs, designers — they have their own incentives. We represent yours in every meeting, every decision, every contract.",
    deliverables: [
      "Operator selection and HMA negotiation",
      "Brand-affiliation evaluation and conversion strategy",
      "Capital project oversight (renovations, repositionings)",
      "Insurance, tax-strategy, and entity structure liaison",
      "Quarterly board presence",
    ],
    outcomes: [
      ["HMA terms re-negotiated", "Saved ~$1.2M over 10-yr term"],
      ["Renovation overrun avoided", "$640K"],
      ["Owner board hours saved", "~6 hrs/month"],
    ],
    photoLabel: "Owners' Meeting",
    photo: "assets/photos/04-Owner-Representation.jpeg",
  },
  {
    id: "underwriting",
    eyebrow: "05 · Underwriting & Acquisitions",
    title: "Diligence the broker won't do for you.",
    deck: "Operator-grade underwriting on acquisition opportunities — built from the cost side, not the cap-rate side. We tell you what it will actually take to run.",
    deliverables: [
      "Bottoms-up operating pro forma",
      "STR/F&B mix sensitivity modeling",
      "Capital needs assessment (T-12 vs forward)",
      "On-property diligence (3-day site visit)",
      "Go/no-go memo with operating assumptions",
    ],
    outcomes: [
      ["Acquisitions advised", "$340M in 24 months"],
      ["Deals walked away from", "Saved buyer ~$22M in over-bid"],
      ["Post-close vs pro-forma year-1 GOP", "Within 4%"],
    ],
    photoLabel: "Underwriting · Ocean-Front Boutique",
    photo: "assets/photos/05-Underwriting-Acquisitions.jpeg",
  },
  {
    id: "condo-hotel",
    eyebrow: "06 · Condo-Hotel & HOA Advisory",
    title: "For boards navigating the operator equation.",
    deck: "South Florida is full of condo-hotel projects where the residence association inherits the operating headache. We bring operator literacy to the board table.",
    deliverables: [
      "Operator/license-agreement review",
      "Owner-occupancy vs rental-pool economics",
      "Board presentation on operator alternatives",
      "Vendor consolidation and CAM rationalization",
      "Reserve study integration with operating plan",
    ],
    outcomes: [
      ["CAM per-key reduction", "−18%"],
      ["Board confidence on operator vote", "Unanimous"],
      ["Vendor spend rationalized", "$420K/yr"],
    ],
    photoLabel: "Ocean-Front Condo-Hotel · Miami Beach",
    photo: "assets/photos/06-Condo-Hotel-HOA-Advisory.jpeg",
  },
];

function ServicesSection() {
  return (
    <React.Fragment>
      <SinglePageIntro id="services" eyebrow="Services · Owner-Side Hospitality Advisory" title="Six engagements. One question: what does this asset need?" deck="We don't sell packages. Every engagement begins with a direct read of the property — and ends with a concrete plan an owner can act on." bg="navy" />

      {/* Anchor strip — quick index of all six services */}
      <section style={{ background: "var(--paper)", padding: "48px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16,
          }}>
            {SERVICE_DETAILS.map((s) => (
              <a key={s.id} href={`#${s.id}`} style={{
                display: "flex", flexDirection: "column", gap: 6, padding: "12px 0",
                borderTop: "1px solid var(--gold)",
              }}>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  color: "var(--gold)", fontWeight: 600,
                }}>{s.eyebrow.split(" · ")[0]}</span>
                <span style={{
                  fontFamily: "var(--font-sans)", fontSize: 14,
                  fontWeight: 500, color: "var(--navy)",
                  letterSpacing: "-0.01em",
                }}>{s.eyebrow.split(" · ")[1]}</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Each service section */}
      {SERVICE_DETAILS.map((s, i) => (
        <section key={s.id} id={s.id} style={{
          background: i % 2 === 0 ? "var(--paper)" : "var(--cream)",
          padding: "120px 0",
          borderBottom: "1px solid var(--line)",
        }}>
          <div className="wrap" style={{
            display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "start",
          }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
                <span className="rule-gold" />
                <span className="eyebrow" style={{ color: "var(--ink-2)" }}>{s.eyebrow}</span>
              </div>
              <h2 style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 400, fontSize: "clamp(36px, 3.8vw, 54px)",
                lineHeight: 1.05, letterSpacing: "-0.015em",
                color: "var(--navy)", marginBottom: 28,
                maxWidth: 620,
              }}>{s.title}</h2>
              <p style={{
                fontSize: 19, lineHeight: 1.6, color: "var(--ink-2)",
                maxWidth: 560, marginBottom: 40,
              }}>{s.deck}</p>

              <div style={{ marginBottom: 40 }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>What's Included</div>
                <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 18 }}>
                  {s.deliverables.map((d) => (
                    <li key={d} 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)",
                      }} />
                      {d}
                    </li>
                  ))}
                </ul>
              </div>

              <a href={window.BSPOKE_CALENDAR_URL} target="_blank" rel="noopener" className="arrow-link">
                Discuss this engagement
              </a>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
              <img
                src={s.photo}
                alt={s.photoLabel}
                style={{
                  width: "100%", aspectRatio: "4 / 5", objectFit: "cover",
                  borderRadius: 2, display: "block",
                }}
              />
            </div>
          </div>
        </section>
      ))}
    </React.Fragment>
  );
}

window.ServicesSection = ServicesSection;