/* global React */

/* =========================================================
   BSpoke — Hero variants
   ========================================================= */

const HERO_HEADLINE = "Your Asset. Your Interests. Our Only Agenda.";
const HERO_DECK = "BSpoke delivers senior-level, owner-side hospitality advisory to independent hotel owners, developers, and family offices across South Florida.";

/* ---------- A: Editorial — cream, type-led, no photo ---------- */
function HeroEditorial() {
  return (
    <section id="top" style={{
      background: "var(--paper)",
      padding: "96px 0 120px",
      borderBottom: "1px solid var(--line)",
    }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 40 }}>
            <span className="rule-gold" />
            <span className="eyebrow">Owner-Side Hospitality Advisory</span>
          </div>
          <h1 style={{
            fontSize: "clamp(48px, 6.4vw, 92px)",
            lineHeight: 1.02,
            letterSpacing: "-0.035em",
            fontWeight: 500,
            color: "var(--navy)",
            maxWidth: 720,
          }}>
            Your Asset. <br />
            Your Interests. <br />
            <em style={{
              fontFamily: "var(--font-serif)",
              fontStyle: "italic",
              fontWeight: 400,
              color: "var(--navy)",
            }}>Our only agenda.</em>
          </h1>
        </div>
        <div style={{ paddingBottom: 18 }}>
          <p style={{
            fontSize: 19, lineHeight: 1.6, color: "var(--ink-2)",
            maxWidth: 460, marginBottom: 36,
          }}>{HERO_DECK}</p>
          <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
            <a href={window.BSPOKE_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-gold">Schedule a Conversation</a>
            <a href="services.html" className="arrow-link">Explore the work</a>
          </div>
          <div style={{
            marginTop: 56,
            paddingTop: 28,
            borderTop: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
          }}>
            {[
              ["25+", "Years luxury hospitality"],
              ["$46M+", "Operating budgets directed"],
              ["27%+", "STR revenue growth"],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 12,
                  letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                  color: "var(--ink-3)", marginBottom: 6,
                }}>{v}</div>
                <div style={{
                  fontSize: 28, fontWeight: 500, color: "var(--navy)",
                  letterSpacing: "-0.02em",
                }}>{k}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- B: Atmospheric — dimmed photo, lower-third text ---------- */
function HeroAtmospheric() {
  /* Hero photograph. Replace assets/photos/Hero.jpeg with a different file
     (or set heroVideo to an mp4/webm path) to swap the hero media. */
  const heroVideo = null; // e.g. "assets/hero-loop.mp4"

  return (
    <section id="top" style={{
      position: "relative",
      minHeight: 760,
      background: "var(--navy-dark)",
      overflow: "hidden",
      padding: 0,
      display: "flex",
      alignItems: "flex-end",
    }}>
      {/* Media layer: video OR hero photograph */}
      {heroVideo ? (
        <video
          src={heroVideo}
          autoPlay muted loop playsInline
          style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", zIndex: 0,
          }}
        />
      ) : (
        <img
          src="assets/photos/Hero.jpeg"
          alt=""
          style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", zIndex: 0, display: "block",
          }}
        />
      )}

      {/* Gradient overlay — transparent at top, navy at bottom — keeps the
          lower-third copy legible regardless of source image. */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 1,
        background: `
          linear-gradient(180deg,
            rgba(17, 30, 60, 0.05) 0%,
            rgba(17, 30, 60, 0.18) 35%,
            rgba(17, 30, 60, 0.72) 75%,
            rgba(14, 26, 54, 0.92) 100%),
          radial-gradient(ellipse at 80% 15%, rgba(184, 150, 62, 0.18) 0%, transparent 55%)
        `,
        pointerEvents: "none",
      }} />

      <div className="wrap" style={{ position: "relative", zIndex: 2, paddingTop: 220, paddingBottom: 80 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
          <span className="rule-gold" style={{ background: "var(--gold-light)" }} />
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 12,
            letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
            color: "var(--gold-light)", fontWeight: 500,
          }}>Owner-Side Hospitality Advisory · South Florida</span>
        </div>
        <h1 style={{
          fontFamily: "var(--font-serif)",
          fontSize: "clamp(48px, 6.6vw, 96px)",
          fontWeight: 400,
          lineHeight: 1.02,
          letterSpacing: "-0.02em",
          color: "var(--inverse)",
          maxWidth: 1080,
          marginBottom: 28,
        }}>
          Your Asset. Your Interests.<br />
          Our only agenda.
        </h1>
        <p style={{
          fontSize: 20, lineHeight: 1.55, color: "rgba(245,240,235,0.85)",
          maxWidth: 620, marginBottom: 44,
          fontWeight: 300,
        }}>{HERO_DECK}</p>
        <div style={{ display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap" }}>
          <a href={window.BSPOKE_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-gold">Schedule a Conversation</a>
          <a href="services.html" style={{
            fontSize: 14, fontWeight: 500, color: "var(--inverse)",
            display: "inline-flex", alignItems: "center", gap: 10,
          }}>
            Explore advisory services <span style={{ color: "var(--gold-light)" }}>→</span>
          </a>
        </div>
      </div>
      {/* Bottom meta strip */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 2,
        borderTop: "1px solid rgba(245,240,235,0.12)",
        background: "rgba(0,0,0,0.25)",
      }}>
        <div className="wrap" style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          height: 60, color: "rgba(245,240,235,0.75)",
          fontFamily: "var(--font-mono)", fontSize: 12,
          letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
        }}>
          <span>Miami · Coral Gables · Fort Lauderdale</span>
          <span>Founded by Yann Crine · 25+ years operating luxury hospitality</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- C: Split — type left, image right ---------- */
function HeroSplit() {
  return (
    <section id="top" style={{
      padding: 0,
      borderBottom: "1px solid var(--line)",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", minHeight: 720 }}>
        <div style={{
          background: "var(--paper)",
          padding: "120px 80px",
          display: "flex", flexDirection: "column", justifyContent: "center",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 36 }}>
            <span className="rule-gold" />
            <span className="eyebrow">Owner-Side Hospitality Advisory</span>
          </div>
          <h1 style={{
            fontSize: "clamp(44px, 5.6vw, 76px)",
            lineHeight: 1.02,
            letterSpacing: "-0.03em",
            fontWeight: 600,
            color: "var(--navy)",
            marginBottom: 28,
            maxWidth: 620,
          }}>
            Your Asset.<br />
            Your Interests.<br />
            <span style={{ color: "var(--gold)" }}>Our only agenda.</span>
          </h1>
          <p style={{
            fontSize: 18, lineHeight: 1.6, color: "var(--ink-2)",
            maxWidth: 520, marginBottom: 40,
          }}>{HERO_DECK}</p>
          <div style={{ display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap" }}>
            <a href={window.BSPOKE_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-gold">Schedule a Conversation</a>
            <a href="services.html" className="arrow-link">View services</a>
          </div>
        </div>
        <div className="ph" data-label="HERO PHOTOGRAPHY · LUXURY POOLSIDE · MIAMI BEACH RESORT" style={{
          background: `
            linear-gradient(180deg, rgba(17,30,60,0.05) 0%, rgba(17,30,60,0.25) 100%),
            repeating-linear-gradient(135deg, rgba(184,150,62,0.06) 0 1px, transparent 1px 16px),
            linear-gradient(160deg, #C19A6B 0%, #8B6F47 60%, #4A3825 100%)
          `,
        }} />
      </div>
    </section>
  );
}

/* ---------- D: Architectural — structured navy block ---------- */
function HeroArchitectural() {
  return (
    <section id="top" style={{
      background: "var(--navy-dark)",
      color: "var(--inverse)",
      padding: 0,
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Subtle gold diagonal accents */}
      <div style={{
        position: "absolute", inset: 0,
        background: `
          repeating-linear-gradient(135deg, rgba(184,150,62,0.04) 0 1px, transparent 1px 80px),
          radial-gradient(ellipse at 80% 20%, rgba(184,150,62,0.18) 0%, transparent 50%),
          radial-gradient(ellipse at 20% 90%, rgba(125,189,186,0.10) 0%, transparent 55%)
        `,
        pointerEvents: "none",
      }} />
      <div className="wrap" style={{
        position: "relative", display: "grid", gridTemplateColumns: "120px 1fr 280px",
        gap: 48, paddingTop: 140, paddingBottom: 120, minHeight: 760,
      }}>
        {/* Left rail — section index */}
        <div style={{
          borderRight: "1px solid rgba(245,240,235,0.12)",
          paddingRight: 24,
          display: "flex", flexDirection: "column", gap: 18,
          fontFamily: "var(--font-mono)", fontSize: 12,
          letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
          color: "rgba(245,240,235,0.55)",
        }}>
          <div style={{ color: "var(--gold-light)" }}>01<br />Hero</div>
          <div>02 Problem</div>
          <div>03 Approach</div>
          <div>04 Services</div>
          <div>05 Clients</div>
          <div>06 About</div>
          <div>07 Insights</div>
        </div>
        {/* Main column */}
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 36 }}>
            <span className="rule-gold" style={{ background: "var(--gold-light)" }} />
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
              color: "var(--gold-light)", fontWeight: 500,
            }}>Owner-Side Hospitality Advisory</span>
          </div>
          <h1 style={{
            fontSize: "clamp(48px, 6vw, 84px)",
            lineHeight: 1.02,
            letterSpacing: "-0.03em",
            fontWeight: 600,
            color: "var(--inverse)",
            marginBottom: 28,
            maxWidth: 820,
          }}>
            Your Asset. Your Interests. <span style={{ color: "var(--gold-light)" }}>Our only agenda.</span>
          </h1>
          <p style={{
            fontSize: 19, lineHeight: 1.6, color: "rgba(245,240,235,0.78)",
            maxWidth: 640, marginBottom: 44,
          }}>{HERO_DECK}</p>
          <div style={{ display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap" }}>
            <a href={window.BSPOKE_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-gold">Schedule a Conversation</a>
            <a href="services.html" style={{
              fontSize: 14, fontWeight: 500, color: "var(--inverse)",
              display: "inline-flex", alignItems: "center", gap: 10,
            }}>
              Explore services <span style={{ color: "var(--gold-light)" }}>→</span>
            </a>
          </div>
        </div>
        {/* Right rail — meta */}
        <div style={{
          borderLeft: "1px solid rgba(245,240,235,0.12)",
          paddingLeft: 24,
          display: "flex", flexDirection: "column", gap: 28,
          color: "rgba(245,240,235,0.78)",
          alignSelf: "end",
        }}>
          <div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
              color: "rgba(245,240,235,0.5)", marginBottom: 8,
            }}>Founded</div>
            <div style={{ fontSize: 17, fontWeight: 500 }}>2024 · Miami, FL</div>
          </div>
          <div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
              color: "rgba(245,240,235,0.5)", marginBottom: 8,
            }}>Principal</div>
            <div style={{ fontSize: 17, fontWeight: 500 }}>Yann Crine<br />25+ yrs hospitality</div>
          </div>
          <div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
              color: "rgba(245,240,235,0.5)", marginBottom: 8,
            }}>Focus</div>
            <div style={{ fontSize: 17, fontWeight: 500 }}>Independent hotels<br />Family offices<br />Condo-hotel boards</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant = "editorial" }) {
  if (variant === "atmospheric")   return <HeroAtmospheric />;
  if (variant === "split")         return <HeroSplit />;
  if (variant === "architectural") return <HeroArchitectural />;
  return <HeroEditorial />;
}

window.BSPHero = Hero;