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

/* =========================================================
   Blog section — single-page latest-posts list.

   To add a weekly post, add an entry to BLOG_POSTS (top of
   array = newest). For now the post titles are display-only —
   when the blog is wired to a CMS later, swap the placeholder
   `#blog` href on each card for the real post URL.
   ========================================================= */

const BLOG_POSTS = [
  {
    slug: "soft-rebrand-traps",
    category: "Brand & Operator",
    title: "Three soft-rebrand traps owners walk into — and the questions that surface them.",
    deck: "Brand reps are not lying when they pitch a refresh. They're just optimizing for a different objective than yours. Here is how to tell the difference inside one conversation.",
    author: "Yann Crine",
    date: "May 12, 2026",
    readTime: "9 min read",
    featured: true,
  },
  {
    slug: "gop-variance-recovery",
    category: "Operations",
    title: "The first thirty days of a GOP variance recovery.",
    deck: "If you're sitting on three quarters of negative variance to plan, the problem is rarely the GM. Here is the diagnostic order we use, and why it almost always starts with the labor matrix.",
    author: "Yann Crine",
    date: "May 5, 2026",
    readTime: "7 min read",
  },
  {
    slug: "underwriting-cost-side",
    category: "Underwriting",
    title: "Underwrite the hotel from the cost side, not the cap rate.",
    deck: "Brokers underwrite hotels the way they underwrite office buildings. That is why the deals that look great on the IC memo are the ones that bleed in year two.",
    author: "Yann Crine",
    date: "April 28, 2026",
    readTime: "11 min read",
  },
  {
    slug: "hma-renegotiation",
    category: "Owner Representation",
    title: "Renegotiating an HMA without burning the operator.",
    deck: "Most owner reps lose the relationship the day they ask for less fee. That's because they negotiated against the operator instead of against the operator's incentives.",
    author: "Yann Crine",
    date: "April 21, 2026",
    readTime: "8 min read",
  },
  {
    slug: "condo-hotel-board",
    category: "Condo-Hotel",
    title: "When the HOA inherits the hotel: a four-meeting playbook for the new board.",
    deck: "Condo-hotel boards are operating businesses, whether they signed up for that or not. A short read on the first four meetings to run before the operator dictates the agenda.",
    author: "Yann Crine",
    date: "April 14, 2026",
    readTime: "10 min read",
  },
  {
    slug: "pre-opening-stabilization",
    category: "Pre-Opening",
    title: "Why most independent hotels stabilize in month eighteen — and how to compress it to nine.",
    deck: "Eighteen-month ramps are an industry consensus, not a law of physics. Most of the slip happens in three places, all of them addressable before the first guest arrives.",
    author: "Yann Crine",
    date: "April 7, 2026",
    readTime: "12 min read",
  },
];

/* ---------- Index page ---------- */
function BlogSection() {
  const featured = BLOG_POSTS.find((p) => p.featured) || BLOG_POSTS[0];
  const rest = BLOG_POSTS.filter((p) => p !== featured);

  return (
    <React.Fragment>
      <SinglePageIntro id="blog" eyebrow="The Operator's Notebook · Field Notes from BSpoke" title="Short essays on owning, operating, and underwriting hotels." deck="Written by people who have done all three." bg="cream" />

      {/* Featured post */}
      <section style={{ background: "var(--paper)", padding: "120px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <a href={"#blog"} style={{
            display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 64,
            alignItems: "center",
          }}>
            <div className="ph" data-label={`FEATURED · ${featured.category.toUpperCase()} · PHOTOGRAPHY PLACEHOLDER`}
              style={{ aspectRatio: "4 / 3", borderRadius: 2 }} />
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
                <span className="rule-gold" />
                <span className="eyebrow">Latest · {featured.category}</span>
              </div>
              <h2 style={{
                fontFamily: "var(--font-serif)", fontWeight: 400,
                fontSize: "clamp(32px, 3.4vw, 48px)", lineHeight: 1.1,
                letterSpacing: "-0.015em", color: "var(--navy)", marginBottom: 24,
              }}>{featured.title}</h2>
              <p style={{
                fontSize: 19, lineHeight: 1.6, color: "var(--ink-2)",
                marginBottom: 32, maxWidth: 540,
              }}>{featured.deck}</p>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 11,
                letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                color: "var(--ink-3)", marginBottom: 28,
              }}>
                {featured.author} · {featured.date} · {featured.readTime}
              </div>
              <span className="arrow-link">Read the piece</span>
            </div>
          </a>
        </div>
      </section>

      {/* Rest of posts */}
      <section style={{ background: "var(--cream)", padding: "140px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <SectionHead
            eyebrow="The archive"
            title="Recent essays."
          />
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            border: "1px solid var(--line-strong)",
          }}>
            {rest.map((p, i) => (
              <a key={p.slug} href={"#blog"} style={{
                padding: 40,
                display: "flex", flexDirection: "column", gap: 18,
                background: "var(--paper)",
                borderRight: (i % 3) !== 2 ? "1px solid var(--line)" : "none",
                borderBottom: i < rest.length - 3 ? "1px solid var(--line)" : "none",
                transition: "background 220ms ease",
                minHeight: 320,
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--cream-warm)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "var(--paper)"}
              >
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  color: "var(--gold)", fontWeight: 600,
                }}>{p.category}</div>
                <h3 style={{
                  fontFamily: "var(--font-serif)", fontWeight: 400,
                  fontSize: 26, lineHeight: 1.2, letterSpacing: "-0.01em",
                  color: "var(--navy)", marginBottom: 4,
                }}>{p.title}</h3>
                <p style={{
                  fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)",
                  marginBottom: "auto",
                }}>{p.deck}</p>
                <div style={{
                  paddingTop: 18, borderTop: "1px solid var(--line)",
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  color: "var(--ink-3)",
                }}>
                  {p.date} · {p.readTime}
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.BlogSection = BlogSection;