// Hero — full-bleed photo, glowing brand medallion, headline. Composes Button, StatBlock.
const { Button, StatBlock } = window.BluePhoenixDesignSystem_f91d3d;

function Hero({ onBook, title, titleAccent, subtitle }) {
  const [video, setVideo] = React.useState(false);
  const [videoSrc, setVideoSrc] = React.useState(null);
  const openVideo = () => {
    setVideo(true);
    if (!videoSrc) fetch("assets/run-video.mp4").then(r => r.blob()).then(b => setVideoSrc(URL.createObjectURL(b))).catch(() => setVideoSrc("assets/run-video.mp4"));
  };
  return (
    <section className="bp-hero" style={{ position: "relative", minHeight: 680, display: "flex", flexDirection: "column", justifyContent: "flex-end", overflow: "hidden" }}>
      <img src={window.BP_ASSETS.marlin} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(rgba(4,10,18,.42) 0%, rgba(4,10,18,.55) 45%, rgba(4,10,18,.95) 100%)" }} />
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(80% 60% at 25% 30%, rgba(31,182,212,.16), transparent 62%)" }} />
      <div className="bp-hero-inner" style={{ position: "relative", zIndex: 2, padding: "0 48px 44px", maxWidth: 1200, margin: "0 auto", width: "100%", boxSizing: "border-box" }}>
        <div className="bp-eyebrow" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", color: "var(--bp-cyan-300)", marginBottom: 16 }}>· Cabo San Lucas · Est. Offshore Charters ·</div>
        <h1 className="bp-hero-title" style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", color: "var(--bp-foam)", fontSize: "clamp(3rem,7vw,6rem)", lineHeight: .92, letterSpacing: ".01em", margin: "0 0 18px", maxWidth: 900, textShadow: "0 4px 30px rgba(4,10,18,.6)" }}>
          {title || "Chase Giants Off"}<br/><span style={{ color: "var(--bp-cyan-400)" }}>{titleAccent || "Los Cabos"}</span>
        </h1>
        <p className="bp-hero-sub" style={{ fontSize: 22, fontWeight: 500, color: "var(--bp-foam)", maxWidth: 620, margin: "0 0 28px", lineHeight: 1.45, textShadow: "0 2px 18px rgba(4,10,18,.55)" }}>
          {subtitle || "Tight lines and bent rods with Cabo's best sport fishing crew. Every fish tells a story. You decide how it ends. Keep or Catch and Release."}
        </p>
        <div className="bp-hero-ctas" style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" onClick={onBook}>Book Your Charter</Button>
          <Button variant="secondary" size="lg" onDark onClick={openVideo} className="bp-shimmer" style={{ color: "var(--on-deep-strong)", position: "relative", overflow: "visible" }}>Watch The Run</Button>
        </div>
        <div className="bp-hero-stats" style={{ display: "flex", gap: 48, marginTop: 40, borderTop: "1px solid var(--border-subtle)", paddingTop: 26 }}>
          <StatBlock value={<span className="bp-stat-big" style={{ fontSize: "clamp(1.6rem,2.8vw,2.2rem)", color: "var(--bp-cyan-400)" }}>20</span>} unit={<span style={{ color: "var(--bp-cyan-400)" }}>yrs</span>} label={<span style={{ fontSize: 13, color: "var(--bp-cyan-400)" }}>On The Water</span>} />
          <StatBlock value={<span className="bp-stat-big" style={{ fontSize: "clamp(1.6rem,2.8vw,2.2rem)", color: "var(--bp-cyan-400)" }}>Marlin · Wahoo · Tuna · Dorado</span>} label={<span style={{ fontSize: 13, color: "var(--bp-cyan-400)" }}>Most Popular Catches</span>} />
        </div>
      </div>
      {video && (
        <div onClick={() => setVideo(false)} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(4,10,18,.88)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
          <div onClick={e => e.stopPropagation()} style={{ position: "relative", width: "min(400px,90vw)" }}>
            {videoSrc ? <video src={videoSrc} controls autoPlay playsInline onLoadedMetadata={e => { e.currentTarget.currentTime = 39; }} style={{ width: "100%", maxHeight: "70vh", objectFit: "contain", display: "block", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", background: "#000" }}></video> : <div style={{ width: "100%", height: "50vh", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--radius-md)", background: "#000", color: "var(--bp-fog, #cbd8e2)", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13, letterSpacing: ".14em", textTransform: "uppercase" }}>Loading…</div>}
            <button type="button" onClick={() => setVideo(false)} aria-label="Close video" style={{ position: "absolute", top: -14, right: -14, width: 36, height: 36, borderRadius: 99, border: "1px solid var(--border-on-deep)", background: "var(--bp-ink, #0a1826)", color: "#fff", fontSize: 18, cursor: "pointer", lineHeight: 1 }}>×</button>
          </div>
        </div>
      )}
    </section>
  );
}
window.Hero = Hero;