// Hero — poster-style layout: full uncropped photo, three text zones (top headline, lower-left title, lower-right body+CTAs)
const HERO_IMG = "assets/photos/banner-hero.jpg";
const HERO_VIDEO_ID = "LPiRbOxjH-M";
const HERO_AWARDS = [2020, 2021, 2022, 2023, 2024, 2025, 2026];

function Hero() {
  const [videoOpen, setVideoOpen] = React.useState(false);

  const headline = `"More than just a rafting trip — it's a Bay of Fundy bucket list experience!"`;
  const body = "A truly unique Tidal Bore rafting experience! Shubie River Wranglers have been the river's premier rafting outfitter since 2013! Join us in experiencing the Bay of Fundy tides on the historic Shubenacadie River. See you soon!";

  const awardsRow = (
    <div className="hero-awards" aria-label="Tripadvisor Travellers' Choice Best of the Best, 2020 to 2026">
      {HERO_AWARDS.map((y) => (
        <img
          key={y}
          src={`assets/awards/${y}.${y === 2022 ? "png" : "webp"}`}
          alt={`Tripadvisor Travellers' Choice Best of the Best ${y}`}
        />
      ))}
    </div>
  );

  const titleBlock = (
    <div className="hero-title">
      <span>Tidal Bore</span>
      <span>Rafting</span>
      <span className="hero-title-accent">Nova Scotia</span>
    </div>
  );

  const ctaRow = (
    <div className="hero-ctas">
      <button type="button" className="btn hero-btn-outline" onClick={() => setVideoOpen(true)}>
        <span className="hero-play"><IconPlay size={11} /></span>
        Watch Video
      </button>
      <a href="#book" className="btn hero-btn-primary">
        Book Now <IconArrow size={16} />
      </a>
    </div>
  );

  return (
    <section id="top" className="hero-v2">
      {/* Photo (uncropped — sets the section height) */}
      <img className="hero-photo" src={HERO_IMG} alt="River Wranglers guide briefing a group of guests on the Shubenacadie tidal flats." />

      {/* Very light gradient — just enough to keep top + bottom edges legible */}
      <div className="hero-tint" aria-hidden="true" />

      {/* DESKTOP overlay — three text zones */}
      <div className="hero-overlay">
        <div className="hero-headline-zone">
          <h1 className="hero-headline">{headline}</h1>
        </div>

        <div className="hero-left-zone">
          {awardsRow}
          {titleBlock}
        </div>

        <div className="hero-right-zone">
          <p className="hero-body">{body}</p>
          {ctaRow}
        </div>
      </div>

      {/* MOBILE stacked content (single column, below the photo) */}
      <div className="hero-stack">
        <p className="hero-headline">{headline}</p>
        {awardsRow}
        {titleBlock}
        <p className="hero-body">{body}</p>
        {ctaRow}
      </div>

      {/* Video modal */}
      {videoOpen && (
        <div onClick={() => setVideoOpen(false)} style={{
          position: "fixed", inset: 0, zIndex: 200,
          background: "rgba(0,0,0,0.92)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20,
        }}>
          <div onClick={(e) => e.stopPropagation()} style={{
            width: "100%", maxWidth: 1100, aspectRatio: "16/9",
            background: "#000", border: "1px solid rgba(255,255,255,0.12)",
            position: "relative",
          }}>
            <button onClick={() => setVideoOpen(false)} aria-label="Close" style={{
              position: "absolute", top: -42, right: 0, color: "#fff",
            }}>
              <IconClose size={26} />
            </button>
            <iframe
              src={`https://www.youtube.com/embed/${HERO_VIDEO_ID}?autoplay=1&rel=0&modestbranding=1`}
              title="Shubie River Wranglers — Tidal Bore Rafting"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              style={{ width: "100%", height: "100%", border: 0, display: "block" }}
            />
          </div>
        </div>
      )}

      <style>{`
        .hero-v2 {
          position: relative;
          background: var(--bone);
          overflow: hidden;
        }
        .hero-photo {
          display: block;
          width: 100%;
          height: auto;
        }
        .hero-tint {
          position: absolute; inset: 0; pointer-events: none;
          background:
            linear-gradient(180deg,
              rgba(0,0,0,0.55) 0%,
              rgba(0,0,0,0.35) 4%,
              rgba(0,0,0,0) 10%,
              rgba(0,0,0,0) 55%,
              rgba(0,0,0,0.35) 78%,
              rgba(0,0,0,0.65) 100%);
        }

        /* ---- Shared type ---- */
        .hero-headline {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 800;
          text-transform: uppercase;
          color: #000;
          letter-spacing: -0.005em;
          line-height: 1.15;
          margin: 0;
          text-shadow: none;
        }

        .hero-awards {
          display: flex; align-items: center; gap: 8px;
          flex-wrap: wrap;
        }
        .hero-awards img {
          display: block;
          height: 48px; width: auto;
          filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
        }

        .hero-title {
          display: flex; flex-direction: column;
          font-family: var(--font-display);
          font-weight: 800;
          color: #fff;
          letter-spacing: -0.02em;
          text-transform: uppercase;
          line-height: 0.95;
          text-shadow: 0 1px 4px rgba(0,0,0,0.4);
        }
        .hero-title-accent { color: var(--red); }

        .hero-body {
          color: #fff;
          line-height: 1.55;
          margin: 0;
          font-family: var(--font-body);
          text-shadow: 0 1px 3px rgba(0,0,0,0.4);
        }

        .hero-ctas {
          display: inline-flex; align-items: center; gap: 12px;
          flex-wrap: wrap;
        }
        .hero-btn-primary {
          background: var(--red); color: #fff;
          box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 12px 28px -12px rgba(219,0,1,0.6);
        }
        .hero-btn-primary:hover { background: var(--red-deep); }
        .hero-btn-outline {
          background: rgba(255,255,255,0.18);
          backdrop-filter: blur(2px);
          color: #fff;
          border: 1.5px solid rgba(255,255,255,0.95);
          text-shadow: 0 1px 4px rgba(0,0,0,0.5);
          box-shadow: 0 8px 22px -14px rgba(0,0,0,0.4);
        }
        .hero-btn-outline:hover { background: rgba(255,255,255,0.32); }
        .hero-play {
          width: 22px; height: 22px; border-radius: 999px;
          background: var(--red); color: #fff;
          display: inline-flex; align-items: center; justify-content: center;
          box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        }

        /* ---- DESKTOP layout (absolute zones over photo) ---- */
        .hero-overlay { display: none; }
        .hero-stack {
          padding: 28px 20px 44px;
          display: flex; flex-direction: column; gap: 22px;
          align-items: flex-start;
          background: var(--bone);
        }
        .hero-stack .hero-headline { font-size: clamp(18px, 4.6vw, 26px); max-width: 100%; }
        .hero-stack .hero-title    { font-size: clamp(40px, 11vw, 60px); }
        .hero-stack .hero-body     { font-size: 15.5px; max-width: 56ch; }

        @media (min-width: 880px) {
          .hero-overlay { display: block; position: absolute; inset: 0; }
          .hero-stack { display: none; }

          .hero-headline-zone {
            position: absolute;
            top: clamp(150px, 18%, 240px);
            left: 0; right: 0;
            padding: 0 7%;
            text-align: center;
            display: flex; justify-content: center;
          }
          .hero-headline {
            font-size: clamp(15px, 1.9vw, 28px);
            max-width: 1180px;
          }

          .hero-left-zone {
            position: absolute;
            left: 4%;
            bottom: 6%;
            max-width: 52%;
            display: flex; flex-direction: column; gap: 22px;
          }
          .hero-left-zone .hero-title {
            font-size: clamp(42px, 6vw, 96px);
          }

          .hero-right-zone {
            position: absolute;
            right: 4%;
            bottom: 6%;
            max-width: 38%;
            min-width: 320px;
            display: flex; flex-direction: column; gap: 22px;
            text-align: left;
          }
          .hero-right-zone .hero-body {
            font-size: clamp(15px, 1.3vw, 19px);
            max-width: 480px;
          }
        }

        @media (min-width: 1280px) {
          .hero-headline-zone { top: clamp(160px, 18%, 260px); }
          .hero-left-zone { left: 5%; bottom: 7%; }
          .hero-right-zone { right: 5%; bottom: 7%; }
          .hero-awards img { height: 56px; }
          .hero-right-zone .hero-body { font-size: clamp(16px, 1.25vw, 20px); }
        }

        @media (min-width: 1600px) {
          .hero-awards img { height: 64px; }
        }
      `}</style>
    </section>
  );
}

/* Kept for use by other sections (TrustBar/reviews) */
function Stars({ value = 5, size = 14, color = "#F5A623" }) {
  return (
    <div style={{ display: "inline-flex", gap: 2, color }}>
      {[0,1,2,3,4].map(i => <IconStar key={i} size={size} style={{ opacity: i < value ? 1 : 0.25 }} />)}
    </div>
  );
}

Object.assign(window, { Hero, Stars });