/* global React */

/* =========================================================
   BSpoke — Core sections (Trust, Problem, WhatWeDo, WhoWeServe)
   ========================================================= */

/* ---------- Trust Signals strip ---------- */
function TrustSignals({ accent = "gold" }) {
  const accentColor = accent === "teal" ? "var(--teal-dark)" : "var(--gold)";
  const SIGNALS = [
  {
    icon: "building",
    stat: "25+ YEARS",
    copy: "Luxury hospitality operations — resorts, city hotels, and residential assets internationally and in the United States."
  },
  {
    icon: "chart",
    stat: "$46M+",
    copy: "Directed in residential association operating budgets as District Manager, KW Property Management & Consulting."
  },
  {
    icon: "trend",
    stat: "+27% YoY",
    copy: "Year-over-year revenue growth on STR engagements — including operational leadership at National Hotel Miami Beach."
  }];

  return (
    <section style={{
      background: "#FFFFFF",
      borderTop: `1px solid ${accentColor}`,
      padding: "56px 0"
    }}>
      <div className="wrap" style={{
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
        gap: 0
      }}>
        {SIGNALS.map((s, i) =>
        <div key={i} style={{
          padding: "8px 36px",
          borderLeft: i === 0 ? "none" : "1px solid var(--line)",
          display: "flex", flexDirection: "column", gap: 16
        }}>
            <Icon name={s.icon} color="var(--navy)" />
            <div style={{
            fontFamily: "var(--font-mono)", fontSize: 12,
            letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
            color: accentColor, fontWeight: 600
          }}>{s.stat}</div>
            <p style={{
            fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)",
            maxWidth: 320
          }}>{s.copy}</p>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- Lucide-style line icons (1.5px stroke) ---------- */
function Icon({ name, color = "currentColor", size = 28 }) {
  const props = {
    width: size, height: size,
    viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: 1.4,
    strokeLinecap: "round", strokeLinejoin: "round"
  };
  if (name === "building") return (
    <svg {...props}>
      <path d="M4 21V6l8-3v18M12 21h8V10l-8-3M8 9v0M8 13v0M8 17v0M16 13v0M16 17v0" />
    </svg>);

  if (name === "chart") return (
    <svg {...props}>
      <path d="M3 20h18M6 17V10M11 17V6M16 17V13M21 17V9" />
    </svg>);

  if (name === "trend") return (
    <svg {...props}>
      <path d="M3 17l6-6 4 4 8-9M14 6h7v7" />
    </svg>);

  if (name === "compass") return (
    <svg {...props}>
      <circle cx="12" cy="12" r="9" />
      <path d="M15.5 8.5l-2 5-5 2 2-5 5-2z" />
    </svg>);

  if (name === "key") return (
    <svg {...props}>
      <circle cx="8" cy="15" r="4" />
      <path d="M11 12l9-9M16 7l3 3M14 9l3 3" />
    </svg>);

  if (name === "shield") return (
    <svg {...props}>
      <path d="M12 3l8 3v5c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-3z" />
      <path d="M9 12l2 2 4-4" />
    </svg>);

  if (name === "home") return (
    <svg {...props}>
      <path d="M3 11l9-8 9 8M5 10v10h14V10" />
    </svg>);

  if (name === "users") return (
    <svg {...props}>
      <circle cx="9" cy="8" r="4" />
      <path d="M2 21v-2a5 5 0 015-5h4a5 5 0 015 5v2M17 11a4 4 0 000-8" />
      <path d="M22 21v-2a5 5 0 00-4-4.9" />
    </svg>);

  if (name === "arrow") return (
    <svg {...props}>
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>);

  return null;
}

/* ---------- Problem section ---------- */
function ProblemSection({ tone = "cream" }) {
  return (
    <section id="problem" style={{
      background: tone === "white" ? "#FFFFFF" : "var(--cream)"
    }}>
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "200px 1fr", gap: 80,
          maxWidth: 1080
        }}>
          <div>
            <span className="rule-gold" style={{ marginTop: 18 }} />
          </div>
          <div>
            <h2 style={{
              fontSize: "clamp(34px, 4vw, 56px)",
              lineHeight: 1.05,
              letterSpacing: "-0.025em",
              color: "var(--navy)",
              marginBottom: 36,
              maxWidth: 720
            }}>
              Your asset is underperforming.<br />
              <span style={{ color: "var(--ink-3)" }}>Here's why.</span>
            </h2>
            <p style={{
              fontSize: 19, lineHeight: 1.65, color: "var(--ink-2)",
              maxWidth: 680, marginBottom: 32
            }}>
              Most hospitality owners have strong assets and clear investment goals. What breaks down is the gap between ownership strategy and on‑the‑ground execution — fragmented oversight, unaccountable vendors, inconsistent management, and no one in the room whose only job is to protect your interests.
            </p>
            <div className="pullquote" style={{ marginTop: 48, maxWidth: 600 }}>BSpoke closes that gap.

            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- What We Do ---------- */
function WhatWeDoSection({ tone = "white" }) {
  return (
    <section id="approach" style={{
      background: tone === "cream" ? "var(--cream)" : "#FFFFFF"
    }}>
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "200px 1fr", gap: 80,
          maxWidth: 1080
        }}>
          <div>
            <span className="rule-gold" style={{ marginTop: 18 }} />
          </div>
          <div>
            <h2 style={{
              fontSize: "clamp(34px, 4vw, 56px)",
              lineHeight: 1.05,
              letterSpacing: "-0.025em",
              color: "var(--navy)",
              marginBottom: 36,
              maxWidth: 720
            }}>
              Owner-side advisory.<br />
              <span style={{ color: "var(--ink-3)" }}>Nothing else.</span>
            </h2>
            <div style={{
              fontSize: 22, lineHeight: 1.4, fontWeight: 600,
              color: "var(--navy)", marginBottom: 24, maxWidth: 640,
              letterSpacing: "-0.012em"
            }}>
              We don't manage properties. We don't take commissions.
            </div>
            <p style={{
              fontSize: 19, lineHeight: 1.65, color: "var(--ink-2)",
              maxWidth: 680
            }}>
              We sit on your side of the table — tracking performance, holding vendors accountable, and giving you the senior‑level oversight that turns underperforming assets into disciplined, profitable operations.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Who We Serve ---------- */
function WhoWeServeSection({ tone = "white" }) {
  const ICPS = [
  { tag: "Independent Operators", text: "Independent and boutique hotel owners (10–150 keys)", icon: "home" },
  { tag: "Developers", text: "Developers of hotel, condo-hotel, and branded residential projects", icon: "key" },
  { tag: "Family Offices", text: "Family offices and high-net-worth residential investors", icon: "shield" },
  { tag: "Associations", text: "Condominium associations and condo-hotel boards", icon: "users" }];

  return (
    <section id="clients" style={{
      background: tone === "cream" ? "var(--cream)" : "#FFFFFF"
    }}>
      <div className="wrap">
        <div className="section-head">
          <span className="rule-gold" />
          <h2 style={{
            fontSize: "clamp(34px, 4vw, 56px)",
            lineHeight: 1.05,
            letterSpacing: "-0.025em",
            color: "var(--navy)",
            maxWidth: 820
          }}>
            Built for independent owners.<br />
            <span style={{ color: "var(--ink-3)" }}>Not for brands.</span>
          </h2>
          <p className="deck" style={{ maxWidth: 620 }}>
            BSpoke is the partner for owners who aren't backed by a flag's management apparatus — and who refuse to accept its conflicts of interest as the cost of doing business.
          </p>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(2, 1fr)",
          gap: "36px 64px"
        }}>
          {ICPS.map((icp, i) =>
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "44px 1fr", gap: 20,
            paddingBottom: 28,
            borderBottom: i < 2 ? "1px solid var(--line)" : "none",
            paddingTop: i >= 2 ? 28 : 0
          }}>
              <div style={{
              width: 44, height: 44, borderRadius: "50%",
              background: "var(--cream)",
              border: "1px solid var(--gold)",
              display: "flex", alignItems: "center", justifyContent: "center",
              color: "var(--navy)"
            }}>
                <Icon name={icp.icon} size={20} color="var(--navy)" />
              </div>
              <div>
                <div style={{
                fontFamily: "var(--font-mono)", fontSize: 12,
                letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                color: "var(--gold)", fontWeight: 600, marginBottom: 8
              }}>{icp.tag}</div>
                <div style={{
                fontSize: 18, lineHeight: 1.45, color: "var(--ink)",
                fontWeight: 500
              }}>{icp.text}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

window.BSPTrust = TrustSignals;
window.BSPProblem = ProblemSection;
window.BSPWhatWeDo = WhatWeDoSection;
window.BSPWhoWeServe = WhoWeServeSection;
window.BSPIcon = Icon;