/* global React */

/* =========================================================
   BSpoke — Case Studies, About, Insights, CTA, Footer
   ========================================================= */

const CASE_STUDIES = [
{
  sector: "Luxury STR Portfolio",
  location: "South Florida",
  title: "Repositioned a 14-villa portfolio from soft launch to disciplined operation.",
  metrics: [["+27%", "YoY revenue"], ["+12.4 pts", "GOP margin"], ["6 mo", "to stabilize"]],
  image: "VILLA COURTYARD · POOLSIDE"
},
{
  sector: "Independent Hotel",
  location: "Miami Beach",
  title: "Owner's representation through a 92-key reflag and operational overhaul.",
  metrics: [["89 keys", "repositioned"], ["On-time", "opening"], ["+18%", "ADR Y1"]],
  image: "BOUTIQUE HOTEL ENTRANCE"
},
{
  sector: "Condo-Hotel Association",
  location: "Coral Gables",
  title: "Tightened reserve discipline and vendor governance across an 18-community footprint.",
  metrics: [["$46M+", "Budgets directed"], ["18", "Communities"], ["Board-ready", "Reporting"]],
  image: "RESIDENTIAL TOWER LOBBY"
}];


function CaseStudiesSection({ accent = "navy" }) {
  return (
    <section id="case-studies" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div className="section-head">
          <span className="rule-gold" />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 40, flexWrap: "wrap" }}>
            <h2 style={{
              fontSize: "clamp(34px, 4vw, 56px)",
              lineHeight: 1.05,
              letterSpacing: "-0.025em",
              color: "var(--navy)",
              maxWidth: 720
            }}>
              Selected engagements.
            </h2>
            <a href="contact.html" className="arrow-link">Discuss your asset</a>
          </div>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
          gap: 32
        }}>
          {CASE_STUDIES.map((c, i) =>
          <article key={i} style={{
            display: "flex", flexDirection: "column"
          }}>
              <div className="ph" data-label={c.image} style={{
              aspectRatio: "4 / 5",
              marginBottom: 24,
              background: i === 0 ?
              `linear-gradient(180deg, rgba(17,30,60,0.15), rgba(17,30,60,0.4)),
                     repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 16px),
                     linear-gradient(180deg, #B59A6E 0%, #6B5237 100%)` :
              i === 1 ?
              `linear-gradient(180deg, rgba(17,30,60,0.2), rgba(17,30,60,0.5)),
                     repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 16px),
                     linear-gradient(180deg, #2E4870 0%, #0E1A36 100%)` :
              `linear-gradient(180deg, rgba(17,30,60,0.15), rgba(17,30,60,0.4)),
                     repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 16px),
                     linear-gradient(180deg, #C4B49A 0%, #6E5F47 100%)`
            }} />
              <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
              color: "var(--ink-3)", marginBottom: 14
            }}>
                <span style={{ color: "var(--gold)", fontWeight: 600 }}>{c.sector}</span>
                <span>{c.location}</span>
              </div>
              <h3 style={{
              fontSize: 22, lineHeight: 1.25, letterSpacing: "-0.015em",
              color: "var(--navy)", marginBottom: 22, fontWeight: 600,
              minHeight: 84
            }}>{c.title}</h3>
              <div style={{
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
              gap: 16, paddingTop: 18, borderTop: "1px solid var(--line)"
            }}>
                {c.metrics.map(([k, v], j) =>
              <div key={j}>
                    <div style={{
                  fontSize: 22, fontWeight: 600, color: "var(--navy)",
                  letterSpacing: "-0.02em", marginBottom: 4,
                  fontFamily: "var(--font-sans)"
                }}>{k}</div>
                    <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 12,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  color: "var(--ink-3)"
                }}>{v}</div>
                  </div>
              )}
              </div>
            </article>
          )}
        </div>
        <p style={{
          marginTop: 56, fontSize: 13, color: "var(--ink-3)",
          fontFamily: "var(--font-mono)", letterSpacing: "0.02em",
          textTransform: "uppercase"
        }}>
          Client names withheld by mutual agreement. Engagement details available under NDA.
        </p>
      </div>
    </section>);

}

/* ---------- About / Founder teaser ---------- */
function AboutSection({ tone = "cream" }) {
  return (
    <section id="about" style={{
      background: tone === "navy" ? "var(--navy-dark)" : "var(--cream)",
      color: tone === "navy" ? "var(--inverse)" : "var(--ink)"
    }}>
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 56 }}>
          <span className="rule-gold" />
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "0.85fr 1fr", gap: 80,
          alignItems: "start"
        }}>
          <div>
            <div className="ph" data-label="YANN CRINE · FOUNDER & PRINCIPAL · PORTRAIT" style={{
              aspectRatio: "4 / 5",
              borderRadius: 2,
              background: `
                linear-gradient(180deg, rgba(17,30,60,0.1), rgba(17,30,60,0.35)),
                repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 16px),
                linear-gradient(160deg, #4C5870 0%, #1F2A44 100%)
              `
            }} />
            <div style={{
              marginTop: 20,
              display: "flex", alignItems: "center", gap: 14,
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
              color: tone === "navy" ? "rgba(245,240,235,0.6)" : "var(--ink-3)"
            }}>
              <span className="rule-gold" style={{ width: 32 }} />
              <span>Yann Crine · Founder &amp; Principal</span>
            </div>
          </div>
          <div>
            <h2 style={{
              fontSize: "clamp(34px, 4vw, 56px)",
              lineHeight: 1.05,
              letterSpacing: "-0.025em",
              color: tone === "navy" ? "var(--inverse)" : "var(--navy)",
              marginBottom: 36
            }}>
              You're not hiring a firm.<br />
              <span style={{ color: tone === "navy" ? "var(--gold-light)" : "var(--gold)" }}>
                You're hiring Yann Crine.
              </span>
            </h2>
            <p style={{
              fontSize: 19, lineHeight: 1.65,
              color: tone === "navy" ? "rgba(245,240,235,0.8)" : "var(--ink-2)",
              marginBottom: 32, maxWidth: 620
            }}>
              Every engagement is led personally by Yann Crine — Founder and Managing Principal of BSpoke. With over 25 years of hands‑on experience across hotel operations, luxury residential advisory, and capital project oversight in Europe and the United States, Yann brings senior‑level expertise directly to every client relationship.
            </p>
            <div style={{
              borderTop: tone === "navy" ? "1px solid rgba(245,240,235,0.18)" : "1px solid var(--line)",
              paddingTop: 28, marginTop: 8, maxWidth: 620
            }}>
              <p style={{
                fontSize: 22, lineHeight: 1.4, fontWeight: 500,
                color: tone === "navy" ? "var(--inverse)" : "var(--navy)",
                letterSpacing: "-0.012em"
              }}>
                No junior consultants. No delegation. Just experienced, accountable advisory from day one.
              </p>
            </div>
            <div style={{ marginTop: 36, display: "flex", gap: 28, alignItems: "center" }}>
              <a href="contact.html" className="arrow-link" style={{
                color: tone === "navy" ? "var(--inverse)" : "var(--navy)",
                fontSize: 15
              }}>Meet Yann</a>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 12,
                letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                color: tone === "navy" ? "rgba(245,240,235,0.5)" : "var(--ink-3)"
              }}>Europe · United States · South Florida</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Insights / Blog list ---------- */
const POSTS = [
{
  date: "2026 · 05 · 12",
  category: "Operator's Notebook",
  title: "What a good Asset Diagnostic actually looks like — and why most don't.",
  deck: "A 4-week diagnostic should leave an owner with three things: clarity on what's broken, a prioritized list of what to fix first, and a defensible cost-of-inaction number.",
  read: "9 min read"
},
{
  date: "2026 · 04 · 28",
  category: "Owner-Side Reading",
  title: "The hidden tax of management agreements that aren't written for owners.",
  deck: "Most management agreements protect the manager. A handful of clauses, drafted differently, can shift the economics of an asset by 200–400 bps a year.",
  read: "7 min read"
},
{
  date: "2026 · 04 · 11",
  category: "Capital Projects",
  title: "On‑time openings are a discipline, not a miracle.",
  deck: "Pre-opening operational readiness — staffing, systems, vendor onboarding — should be on a critical path months before opening day. It rarely is.",
  read: "6 min read"
},
{
  date: "2026 · 03 · 29",
  category: "STR & Residences",
  title: "What HNW owners should expect from a luxury residence operator (and almost never get).",
  deck: "Hospitality-grade reporting, transparent pricing, vendor governance. The bar is not high. It is simply not being met.",
  read: "5 min read"
}];


function InsightsSection({ layout = "reading" }) {
  return (
    <section id="insights" style={{ background: "#FFFFFF" }}>
      <div className="wrap">
        <div className="section-head">
          <span className="rule-gold" />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 40, flexWrap: "wrap" }}>
            <h2 style={{
              fontSize: "clamp(34px, 4vw, 56px)",
              lineHeight: 1.05,
              letterSpacing: "-0.025em",
              color: "var(--navy)",
              maxWidth: 720
            }}>
              The Operator's Notebook.
            </h2>
            <a href="blog.html" className="arrow-link">All articles</a>
          </div>
          <p className="deck" style={{ maxWidth: 600 }}>
            Field notes on owner‑side hospitality — diagnostics, capital projects, vendor governance, and the operational discipline a luxury asset deserves.
          </p>
        </div>

        {/* Featured + reading list hybrid */}
        <div style={{
          display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 64,
          paddingTop: 24,
          borderTop: "1px solid var(--line)"
        }}>
          {/* Featured */}
          <article style={{ paddingTop: 32 }}>
            <div className="ph" data-label="EDITORIAL HEADER IMAGE · DIAGNOSTIC NOTEBOOK" style={{
              aspectRatio: "16 / 10",
              marginBottom: 24,
              background: `
                linear-gradient(180deg, rgba(17,30,60,0.12), rgba(17,30,60,0.32)),
                repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 16px),
                linear-gradient(160deg, #D4C4A8 0%, #8A7457 100%)
              `
            }} />
            <div style={{
              display: "flex", gap: 16, alignItems: "center",
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
              color: "var(--ink-3)", marginBottom: 16
            }}>
              <span style={{ color: "var(--gold)", fontWeight: 600 }}>{POSTS[0].category}</span>
              <span>·</span>
              <span>{POSTS[0].date}</span>
              <span>·</span>
              <span>{POSTS[0].read}</span>
            </div>
            <h3 style={{
              fontSize: 32, lineHeight: 1.15, letterSpacing: "-0.022em",
              color: "var(--navy)", marginBottom: 18, fontWeight: 600
            }}>{POSTS[0].title}</h3>
            <p style={{
              fontSize: 17, lineHeight: 1.6, color: "var(--ink-2)",
              marginBottom: 24, maxWidth: 540
            }}>{POSTS[0].deck}</p>
            <a href="blog.html" className="arrow-link">Read the piece</a>
          </article>

          {/* Reading list */}
          <div style={{ paddingTop: 32 }}>
            {POSTS.slice(1).map((p, i) =>
            <article key={i} style={{
              display: "grid", gridTemplateColumns: "120px 1fr",
              gap: 24, padding: "28px 0",
              borderTop: i === 0 ? "none" : "1px solid var(--line)"
            }}>
                <div>
                  <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 12,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  color: "var(--gold)", fontWeight: 600, marginBottom: 6
                }}>{p.category}</div>
                  <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 12,
                  color: "var(--ink-3)", letterSpacing: "0.04em"
                }}>{p.date}</div>
                  <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 12,
                  color: "var(--ink-3)", letterSpacing: "0.04em",
                  marginTop: 4
                }}>{p.read}</div>
                </div>
                <div>
                  <h4 style={{
                  fontSize: 20, lineHeight: 1.3, letterSpacing: "-0.015em",
                  color: "var(--navy)", marginBottom: 10, fontWeight: 600
                }}>
                    <a href="blog.html" style={{
                    borderBottom: "1px solid transparent",
                    transition: "border-color 200ms ease"
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = "var(--gold)"}
                  onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = "transparent"}>
                    {p.title}</a>
                  </h4>
                  <p style={{
                  fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)",
                  maxWidth: 480
                }}>{p.deck}</p>
                </div>
              </article>
            )}
          </div>
        </div>

        {/* Upload-your-articles hint */}
        <div style={{
          marginTop: 56, padding: "20px 24px",
          background: "var(--cream)",
          border: "1px dashed var(--line-strong)",
          borderRadius: 4,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 32
        }}>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 12,
            letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
            color: "var(--ink-3)"
          }}>

          </span>
          <a href="contact.html" className="arrow-link" style={{ fontSize: 13 }}>Subscribe to the notebook</a>
        </div>
      </div>
    </section>);

}

/* ---------- Closing CTA ---------- */
function ClosingCTA() {
  return (
    <section id="contact" style={{
      background: "var(--navy-dark)",
      color: "var(--inverse)",
      padding: "160px 0",
      position: "relative",
      overflow: "hidden"
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `
          radial-gradient(ellipse at 80% 30%, rgba(184,150,62,0.16) 0%, transparent 55%),
          radial-gradient(ellipse at 20% 80%, rgba(125,189,186,0.10) 0%, transparent 60%)
        `,
        pointerEvents: "none"
      }} />
      <div className="wrap-narrow" style={{ position: "relative", textAlign: "center" }}>
        <span className="rule-gold" style={{ background: "var(--gold-light)", margin: "0 auto 32px" }} />
        <h2 style={{
          fontSize: "clamp(40px, 5vw, 72px)",
          lineHeight: 1.05,
          letterSpacing: "-0.03em",
          color: "var(--inverse)",
          marginBottom: 28, fontWeight: 500
        }}>
          Your asset deserves <br />
          <em style={{
            fontFamily: "var(--font-serif)", fontWeight: 400, fontStyle: "italic"
          }}>an advocate.</em>
        </h2>
        <p style={{
          fontSize: 19, lineHeight: 1.55,
          color: "rgba(245,240,235,0.78)",
          maxWidth: 580, margin: "0 auto 44px"
        }}>
          Start with a conversation. No obligations, no pitch — just a direct assessment of where your asset stands and what it would take to perform.
        </p>
        <a href={window.BSPOKE_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-gold" style={{ padding: "18px 36px", fontSize: 13 }}>
          Schedule a Conversation
        </a>
        <p style={{
          marginTop: 28,
          fontFamily: "var(--font-mono)", fontSize: 12,
          letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
          color: "rgba(245,240,235,0.5)"
        }}>NO COMMITMENT REQUIRED 
RESPONSE WITHIN 24 HOURS
        </p>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer style={{
      background: "#0B142A",
      color: "rgba(245,240,235,0.65)",
      padding: "64px 0 32px",
      borderTop: "1px solid rgba(184,150,62,0.4)"
    }}>
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48,
          marginBottom: 56
        }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <img src="assets/bspoke-logo.png" alt=""
              style={{ width: 34, height: 34, filter: "brightness(0) invert(0.95)" }} />
              <span style={{ fontSize: 18, fontWeight: 600, color: "var(--inverse)" }}>
                BSpoke <span style={{ fontWeight: 400, opacity: 0.65 }}>Hospitality & Asset Group LLC</span>
              </span>
            </div>
            <p style={{
              fontSize: 14, lineHeight: 1.6, maxWidth: 360
            }}>
              Owner-side hospitality advisory for independent hotel owners, developers, and family offices across South Florida.
            </p>
          </div>
          {[
          ["Navigate", [
          ["Home", "index.html"],
          ["Services", "services.html"],
          ["About", "about.html"],
          ["Why Us", "why-us.html"],
          ["Reviews", "reviews.html"],
          ["Blog", "blog.html"]]],

          ["Engage", [
          ["Asset Management", "services.html#asset-management"],
          ["Operations Advisory", "services.html#operations"],
          ["Pre-Opening", "services.html#pre-opening"],
          ["Owner Representation", "services.html#owner-rep"],
          ["Underwriting", "services.html#underwriting"]]],

          ["Contact", [
          ["Aventura, Florida", "#contact"],
          ["info@bspokehospitality.com", "mailto:info@bspokehospitality.com"],
          ["+1 (786) 531-8870", "tel:+17865318870"],
          ["Schedule a Call", window.BSPOKE_CALENDAR_URL || "#contact"]]]].

          map(([title, items]) =>
          <div key={title}>
              <div style={{
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
              color: "var(--gold-light)", fontWeight: 600, marginBottom: 18
            }}>{title}</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {items.map(([label, href]) =>
              <li key={label} style={{ fontSize: 14 }}>
                    <a href={href} style={{ color: "rgba(245,240,235,0.7)" }}>{label}</a>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div style={{
          paddingTop: 28, borderTop: "1px solid rgba(245,240,235,0.1)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontFamily: "var(--font-mono)", fontSize: 12,
          letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
          color: "rgba(245,240,235,0.45)"
        }}>
          <span>© 2026 BSpoke Hospitality &amp; Asset Group LLC</span>
          <span>Site design · Reimagined 2026</span>
        </div>
      </div>
    </footer>);

}

window.BSPCaseStudies = CaseStudiesSection;
window.BSPAbout = AboutSection;
window.BSPInsights = InsightsSection;
window.BSPCTA = ClosingCTA;
window.BSPFooter = Footer;