// Social proof: TripAdvisor + Google branded review carousels, FAQ accordion, blog teaser, final CTA, sticky bar.

/* ---------------------------------- REVIEWS DATA ---------------------------------- */
const TRIPADVISOR_URL = "https://www.tripadvisor.com/Attraction_Review-g4600890-d10664089-Reviews-Shubie_River_Wranglers-Shubenacadie_Southwest_Nova_Scotia_Nova_Scotia.html";
const GOOGLE_URL = "https://share.google/olvhWV8otIMD7AtR5";

const TA_REVIEWS = [
  { name: "Sarah M.",  where: "Toronto, ON",   rating: 5, date: "Aug 2025",
    title: "Best day of our trip to Nova Scotia",
    body: "Genuinely the most fun I've had on a vacation. The guides were hilarious, the wave was bigger than I imagined, and the mud sliding at the end was the cherry on top. Already planning to come back with friends." },
  { name: "Émilie B.", where: "Montréal, QC",  rating: 5, date: "Sep 2025",
    title: "Vaut absolument le détour",
    body: "An absolute must-do if you're in Nova Scotia. The Bay of Fundy tides really are something else, and riding the leading wave back up the river is just unreal. Guides were bilingual and warm." },
  { name: "Mark & Lisa W.", where: "London, UK", rating: 5, date: "Aug 2025",
    title: "Worth flying across the ocean for",
    body: "We made the trip from the UK specifically for the tidal bore and Shubie Wranglers did not disappoint. World-class adventure for a fraction of what it would cost in NZ or Costa Rica. Five stars all day." },
  { name: "Priya K.", where: "Calgary, AB", rating: 5, date: "Jul 2025",
    title: "First-timer, totally hooked",
    body: "I was nervous because I'd never rafted before. They walked us through everything, and once we were on the water all the nerves went away. Pure adrenaline. The hot showers afterward were a godsend." },
];

const G_REVIEWS = [
  { name: "Daniel R.", where: "Boston, MA",  rating: 5, date: "Jul 2025",
    title: "Expected fun — got a bucket-list day",
    body: "We brought our two teenagers and they're still talking about it weeks later. Felt safe the whole time but also genuinely thrilling. The Shubie River Wranglers crew know what they're doing." },
  { name: "Chen L.",   where: "Vancouver, BC", rating: 5, date: "Aug 2025",
    title: "Five stars across the board",
    body: "From booking online to driving home muddy and exhausted, every step was easy. The Zodiac was solid, the guides were clearly experienced, and the wave was massive. Highly recommend." },
  { name: "Ava T.",    where: "Halifax, NS", rating: 5, date: "Jun 2025",
    title: "A local's must-do",
    body: "I've lived in NS my whole life and finally got around to doing this. Embarrassing it took me so long. World-class right in our backyard — bring out-of-town family and they'll be talking about it for months." },
  { name: "Jorge & María", where: "Madrid, ES", rating: 5, date: "Jul 2025",
    title: "Una experiencia inolvidable",
    body: "We didn't expect Canada to deliver one of the wildest adventures of our trip but the tidal bore was unreal. Friendly guides, top-notch safety, and a wave that we will never forget." },
];

/* ---------------------------------- BRAND BLOCKS ---------------------------------- */
function TripAdvisorWordmark({ size = 22 }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <IconTripAdvisor size={size + 12} style={{ color: "#000" }} />
      <span style={{ fontFamily: "var(--font-ui)", fontWeight: 800, fontSize: size, letterSpacing: "-.01em", color: "#000" }}>
        Tripadvisor
      </span>
    </div>
  );
}
function GoogleWordmark({ size = 18 }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <IconGoogle size={size + 8} />
      <span style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: size, letterSpacing: "-.01em", color: "#202124" }}>
        Reviews
      </span>
    </div>
  );
}

/* TripAdvisor-style dot rating (5 green circles) */
function TADots({ value = 5, size = 14 }) {
  return (
    <div style={{ display: "inline-flex", gap: 3 }}>
      {[0,1,2,3,4].map(i => (
        <span key={i} style={{
          width: size, height: size, borderRadius: 99,
          background: i < value ? "#00AA6C" : "transparent",
          border: i < value ? "0" : `2px solid #00AA6C`,
          boxSizing: "border-box",
        }} />
      ))}
    </div>
  );
}

/* ---------------------------------- REVIEW CARD ---------------------------------- */
function ReviewCard({ r }) {
  const isTA = r.source === "tripadvisor";
  const accent = isTA ? "#00AA6C" : "#1A73E8";
  return (
    <article style={{
      flex: "0 0 auto",
      background: "var(--white)",
      border: "1px solid var(--line)",
      borderTop: `4px solid ${accent}`,
      padding: 22,
      display: "flex", flexDirection: "column", gap: 12,
      scrollSnapAlign: "start",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
        {isTA
          ? <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <IconTripAdvisor size={22} style={{ color: "#000" }} />
              <span style={{ fontFamily: "var(--font-ui)", fontWeight: 800, fontSize: 12, letterSpacing: "-.01em" }}>Tripadvisor</span>
            </div>
          : <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <IconGoogle size={16} />
              <span style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 12, color: "#202124" }}>Google</span>
            </div>
        }
        <span style={{ fontSize: 11, color: "rgba(11,11,14,0.5)" }}>{r.date}</span>
      </div>

      {isTA ? <TADots value={r.rating} size={12} /> : <Stars value={r.rating} size={13} />}

      <h4 className="display" style={{ fontSize: 19, margin: "2px 0 0", lineHeight: 1.1 }}>
        "{r.title}"
      </h4>
      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: "rgba(11,11,14,0.75)", display: "-webkit-box", WebkitLineClamp: 5, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
        {r.body}
      </p>

      <div style={{ marginTop: "auto", paddingTop: 14, borderTop: "1px solid var(--line-soft)", display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{
          width: 34, height: 34, borderRadius: 99, background: accent, color: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--font-ui)", fontWeight: 800, fontSize: 12,
        }}>{r.name.split(" ").map(w => w[0]).join("").slice(0, 2)}</div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.name}</div>
          <div style={{ fontSize: 11, color: "rgba(11,11,14,0.55)" }}>{r.where}</div>
        </div>
      </div>
    </article>
  );
}

/* ---------------------------------- TESTIMONIALS SECTION ---------------------------------- */
// Two separate carousels — one row of Tripadvisor reviews, one row of Google reviews.

function ReviewRow({ brand, reviews, count, url }) {
  const trackRef = React.useRef(null);
  const isTA = brand === "tripadvisor";
  const accent = isTA ? "#00AA6C" : "#1A73E8";
  const branded = reviews.map(r => ({ ...r, source: brand }));

  const scrollByCards = (dir) => {
    const t = trackRef.current; if (!t) return;
    const card = t.children[0]; if (!card) return;
    const gap = parseFloat(getComputedStyle(t).gap || "16");
    t.scrollBy({ left: dir * (card.offsetWidth + gap), behavior: "smooth" });
  };

  return (
    <div style={{ marginTop: 32 }}>
      {/* Row header */}
      <div style={{ display: "flex", flexWrap: "wrap", alignItems: "end", justifyContent: "space-between", gap: 16, marginBottom: 18 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          {isTA
            ? <IconTripAdvisor size={36} style={{ color: "#000" }} />
            : <IconGoogle size={28} />
          }
          <div>
            <div className="display" style={{ fontSize: 22, lineHeight: 1 }}>
              {isTA ? "Tripadvisor reviews" : "Google reviews"}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6 }}>
              {isTA ? <TADots value={5} size={12} /> : <Stars value={5} size={13} />}
              <span style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 13 }}>
                {isTA ? "5.0" : "4.9"}
              </span>
              <span style={{ fontSize: 12, color: "rgba(11,11,14,0.6)" }}>· {count} reviews</span>
            </div>
          </div>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href={url} target="_blank" rel="noopener noreferrer"
            className="btn btn-ghost btn-sm">
            Read all {count} <IconArrow size={12} />
          </a>
          <div style={{ display: "flex", gap: 6 }}>
            <button aria-label={`Previous ${brand} reviews`} onClick={() => scrollByCards(-1)}
              style={{ width: 38, height: 38, border: "1.5px solid var(--ink)", borderRadius: 2, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <IconArrow size={14} style={{ transform: "rotate(180deg)" }} />
            </button>
            <button aria-label={`Next ${brand} reviews`} onClick={() => scrollByCards(1)}
              style={{ width: 38, height: 38, background: accent, color: "#fff", borderRadius: 2, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <IconArrow size={14} />
            </button>
          </div>
        </div>
      </div>

      {/* Track */}
      <div ref={trackRef} className="reviews-track" style={{
        display: "flex",
        gap: 16,
        overflowX: "auto",
        scrollSnapType: "x mandatory",
        scrollbarWidth: "none",
        paddingBottom: 4,
      }}>
        {branded.map((r, idx) => <ReviewCard key={idx} r={r} />)}
      </div>
    </div>
  );
}

function Testimonials() {
  return (
    <section id="reviews" style={{ background: "var(--bone)", padding: "56px 0 96px" }}>
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", flexWrap: "wrap", gap: 20 }}>
          <div>
            <div className="eyebrow" style={{ color: "var(--red)" }}>Real reviews</div>
            <h2 className="display" style={{ fontSize: "clamp(28px, 4vw, 48px)", margin: "10px 0 0", lineHeight: 0.95 }}>
              Don't take<br/>our word for it.
            </h2>
          </div>
          <div style={{ maxWidth: 460, color: "rgba(11,11,14,0.7)", fontSize: 15, lineHeight: 1.55 }}>
            Over 1,300 5-star reviews across Tripadvisor and Google. Here's what
            guests have actually written, straight from the platforms.
          </div>
        </div>

        <ReviewRow brand="google" reviews={G_REVIEWS} count="935" url={GOOGLE_URL} />
        <ReviewRow brand="tripadvisor" reviews={TA_REVIEWS} count="374" url={TRIPADVISOR_URL} />
      </div>

      <style>{`
        .reviews-track::-webkit-scrollbar { display: none; }
        .reviews-track > article { width: calc(100% - 8px); }
        @media (min-width: 640px) {
          .reviews-track > article { width: calc(50% - 8px); }
        }
        @media (min-width: 960px) {
          .reviews-track > article { width: calc(33.333% - 12px); }
        }
        @media (min-width: 1200px) {
          .reviews-track > article { width: calc(25% - 12px); }
        }
      `}</style>
    </section>
  );
}

/* ---------------------------------- FAQ ---------------------------------- */
const FAQS = [
  { q: "What age do you need to be to go tidal bore rafting?",
    a: "We have rafters of all ages! Rafters must be at least 6 years old and, importantly, must fit safely in a life jacket. Adults must accompany any children under the age of 16. Our child rate applies to ages 12 and under." },
  { q: "Is tidal bore rafting safe?",
    a: "Rafting always carries the inherent risk of Mother Nature and moving water. That's why we train our guides to maneuver the river safely and confidently, always with your wellbeing in mind. Our clients' safety is our top priority and something we never take lightly — we want everyone to feel comfortable out on the river with us." },
  { q: "What should I wear and bring?",
    a: "The Shubenacadie is known for its waves — and its mud! Dress for the weather and wear clothes and footwear you don't mind getting dirty, as the river mud tends to stain. If you get cold easily, bring a hoodie or an extra layer. Bring a spare change of clothes and a towel for the showers after your trip. Every rafter is given a life jacket that must be worn at all times on the water. Rain gear is available on colder days, though it won't keep you dry once the waves hit!" },
  { q: "How many people fit in one boat?",
    a: "Our Zodiacs carry a maximum of 8 passengers — plus one awesome guide!" },
  { q: "What's the difference between tidal bore and white water rafting?",
    a: "Tidal bore rafting only happens on Nova Scotia's Shubenacadie River, where the incoming Bay of Fundy tide creates a powerful wave that travels upstream against the current. White water rafting runs downstream through rapids formed by rocks. Because the tidal bore rides over sandbars rather than sharp rocks, it's done safely without a helmet, and the waves are typically much larger — during extreme tides they can reach 12–15 feet." },
  { q: "What's your cancellation policy?",
    a: "All cancellations require written notice to shubiewranglers@gmail.com and are subject to a $5 per person fee. We require 72 hours' notice; cancellations after that are charged 50% of the invoice, and cancellations within 24 hours (or no-shows) are charged in full. Large groups of 8+ must give at least one week's notice. Reschedules within the cancellation window are charged the same, but the amount is applied as credit toward your new date." },
  { q: "Where are you and how do I get there?",
    a: "We're at 90 Phillips Rd, Green Oaks, Nova Scotia — about 45 minutes from Halifax. If you'd just like to watch, our lodge deck and the lower section of our property offer tidal bore viewing, and the Tidal Interpretive Centre across the river is only a one-minute drive." },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section" style={{ background: "var(--white)" }}>
      <div className="wrap">
        <div className="faq-grid">
          {/* LEFT — heading + CTA */}
          <aside className="faq-aside">
            <div className="eyebrow" style={{ color: "var(--red)" }}>FAQ</div>
            <h2 className="display" style={{ fontSize: "clamp(26px, 3.6vw, 44px)", margin: "10px 0 18px", lineHeight: 0.95 }}>
              Questions,<br/>before you book.
            </h2>
            <p style={{ fontSize: 16, color: "rgba(11,11,14,0.7)", margin: 0, maxWidth: 440 }}>
              Here are the questions first-timers always ask us — and the honest answers
              that usually calm everyone down.
            </p>

            <div className="faq-cta" style={{
              marginTop: 28,
              padding: 24,
              background: "var(--ink)", color: "var(--bone)",
              borderTop: "4px solid var(--red)",
            }}>
              <div className="narrow" style={{ fontSize: 11, color: "var(--red)", letterSpacing: ".22em" }}>
                STILL HAVE QUESTIONS?
              </div>
              <div className="display" style={{ fontSize: 26, margin: "8px 0 14px", color: "var(--bone)", lineHeight: 1 }}>
                Give us a call.
              </div>
              <p style={{ margin: "0 0 18px", fontSize: 13.5, color: "rgba(246,243,238,0.7)", lineHeight: 1.55 }}>
                We pick up the phone. Call us with anything — group bookings, dietary needs,
                accessibility, weather worries — and we'll help.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                <a href="tel:+19024562673" className="btn btn-ghost-dark btn-block" style={{ justifyContent: "flex-start" }}>
                  <IconPhone size={16} /> +1 902-456-2673
                </a>
                <a href="#book" className="btn btn-primary btn-block" style={{ justifyContent: "center" }}>
                  Book Now <IconArrow size={16} />
                </a>
              </div>
            </div>
          </aside>

          {/* RIGHT — questions */}
          <div className="faq-list">
            <div style={{ borderTop: "1px solid var(--ink)" }}>
              {FAQS.map((f, i) => {
                const isOpen = open === i;
                return (
                  <div key={i} style={{ borderBottom: "1px solid var(--ink)" }}>
                    <button
                      onClick={() => setOpen(isOpen ? -1 : i)}
                      aria-expanded={isOpen}
                      style={{
                        width: "100%", textAlign: "left",
                        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
                        padding: "22px 4px",
                      }}
                    >
                      <span className="display" style={{ fontSize: "clamp(15px, 1.4vw, 18px)", lineHeight: 1.05 }}>
                        {f.q}
                      </span>
                      <span style={{
                        flexShrink: 0,
                        width: 36, height: 36, borderRadius: 2,
                        background: isOpen ? "var(--red)" : "var(--ink)",
                        color: "#fff",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        transition: "background .2s ease",
                      }}>
                        {isOpen ? <IconMinus size={18} /> : <IconPlus size={18} />}
                      </span>
                    </button>
                    <div style={{
                      maxHeight: isOpen ? 360 : 0,
                      overflow: "hidden",
                      transition: "max-height .35s ease",
                    }}>
                      <p style={{
                        margin: 0, padding: "0 4px 24px",
                        fontSize: 15.5, lineHeight: 1.6,
                        color: "rgba(11,11,14,0.78)",
                        maxWidth: 680,
                      }}>{f.a}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .faq-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 40px;
          align-items: start;
        }
        .faq-aside { min-width: 0; }
        .faq-list { min-width: 0; }
        @media (min-width: 900px) {
          .faq-grid {
            grid-template-columns: minmax(280px, 360px) 1fr;
            gap: 64px;
          }
        }
      `}</style>
    </section>
  );
}

/* ---------------------------------- BLOG TEASER ---------------------------------- */
const POSTS = [
  { tag: "Guide",  title: "What is a tidal bore (and why is ours the biggest)?", read: "5 min read", img: PHOTOS.river },
  { tag: "Plan",   title: "2026 tide schedule: best dates & moon phases", read: "3 min read", img: PHOTOS.coast },
  { tag: "Story",  title: "First-timer? Here's what nobody tells you.",   read: "4 min read", img: PHOTOS.team },
];
function Blog() {
  return (
    <section style={{ background: "var(--bone)", padding: "56px 0 64px" }}>
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 36 }}>
          <div style={{ maxWidth: 620 }}>
            <div className="eyebrow" style={{ color: "var(--red)" }}>From the river</div>
            <h2 className="display" style={{ fontSize: "clamp(24px, 3.4vw, 40px)", margin: "8px 0 14px" }}>
              Read up before you raft.
            </h2>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: "rgba(11,11,14,0.7)" }}>
              Stories, tide-planning tips, and first-timer prep — written by the guides
              who ride this wave every day. A five-minute read can make a four-hour trip
              twice as fun.
            </p>
          </div>
          <a href="#" className="btn btn-ghost">All articles <IconArrow size={14} /></a>
        </div>

        <div style={{
          display: "grid", gap: 22,
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
        }}>
          {POSTS.map((p, i) => (
            <a key={i} href="#" className="lift" style={{
              display: "flex", flexDirection: "column",
              background: "var(--white)", border: "1px solid var(--line)",
              overflow: "hidden",
            }}>
              <div style={{
                aspectRatio: "16/10",
                background: `var(--ink) url(${p.img}) center/cover`,
              }} />
              <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span className="tag tag-dark">{p.tag}</span>
                  <span className="mono" style={{ fontSize: 12, color: "rgba(11,11,14,0.5)" }}>{p.read}</span>
                </div>
                <h3 className="display" style={{ fontSize: 22, margin: 0, lineHeight: 1.1 }}>{p.title}</h3>
                <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 8, color: "var(--red)", fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 13, letterSpacing: ".08em", textTransform: "uppercase" }}>
                  Read article <IconArrow size={14} />
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------- FINAL CTA ---------------------------------- */
function FinalCTA() {
  return (
    <section id="book" style={{ position: "relative", background: "var(--ink)", color: "var(--bone)", overflow: "hidden" }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        backgroundImage: `url(${PHOTOS.action3})`, backgroundSize: "cover", backgroundPosition: "center",
        opacity: 0.85, filter: "saturate(1) contrast(1.04)",
      }} />
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(11,11,14,0.35) 0%, rgba(11,11,14,0.55) 55%, rgba(11,11,14,0.88) 100%)",
      }} />
      <div className="wrap" style={{ position: "relative", padding: "100px 20px 100px", textAlign: "center" }}>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "7px 14px",
            background: "rgba(46, 204, 113, 0.14)",
            border: "1px solid rgba(46, 204, 113, 0.5)",
            borderRadius: 99,
            fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 12,
            letterSpacing: ".12em", textTransform: "uppercase",
            color: "#a7f3c5",
          }}>
            <span style={{
              width: 9, height: 9, borderRadius: 99,
              background: "#22C55E",
              boxShadow: "0 0 0 4px rgba(34, 197, 94, 0.25)",
              animation: "pulseDot 1.8s ease-in-out infinite",
            }} />
            2026 Season — Booking now open
          </span>
        </div>
        <h2 className="display" style={{
          fontSize: "clamp(32px, 5vw, 64px)",
          margin: "18px auto 24px",
          maxWidth: 1100,
          color: "var(--bone)",
          lineHeight: 0.95,
        }}>
          The tide<br/>
          <span style={{ color: "var(--red)" }}>isn't waiting.</span>
        </h2>
        <p style={{
          maxWidth: 620, margin: "0 auto 36px",
          fontSize: 17, color: "rgba(246,243,238,0.85)",
        }}>
          Our 2026 Tide Schedule is live — book your adventure today!
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 14, justifyContent: "center", alignItems: "center" }}>
          <a href="#" className="btn btn-primary btn-lg" style={{ fontSize: 16, padding: "20px 36px" }}>
            Book Now <IconArrow size={18} />
          </a>
          <a href="tel:+19024562673" className="btn btn-ghost-dark btn-lg">
            <IconPhone size={16} /> Call +1 902-456-2673
          </a>
        </div>
        <div style={{ marginTop: 36, display: "flex", flexWrap: "wrap", gap: 18, justifyContent: "center", color: "rgba(246,243,238,0.6)", fontSize: 13 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><IconShield size={14} style={{ color: "var(--red)" }} /> Free reschedule up to 48h</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><IconCheck size={14} style={{ color: "var(--red)" }} /> All gear included</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><IconAward size={14} style={{ color: "var(--red)" }} /> Best of the Best 2026</span>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------- STICKY MOBILE BAR ---------------------------------- */
// Wrapper uses className="show-sm" which is `display: none !important` at >=720px,
// so the inline `display: flex` is overridden — sticky bar appears on mobile only.
function StickyMobileBar() {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const check = () => setVisible(window.scrollY > 400);
    check();
    window.addEventListener("scroll", check, { passive: true });
    return () => window.removeEventListener("scroll", check);
  }, []);

  React.useEffect(() => {
    document.body.classList.toggle("has-sticky", visible);
  }, [visible]);

  return (
    <div className="show-sm sticky-book-bar" style={{
      position: "fixed", left: 0, right: 0, bottom: 0,
      zIndex: 40,
      background: "var(--ink)",
      borderTop: "1px solid var(--line-on-dark)",
      transform: visible ? "translateY(0)" : "translateY(110%)",
      transition: "transform .3s ease",
      padding: "10px 14px calc(10px + env(safe-area-inset-bottom))",
      display: "flex", alignItems: "center", gap: 10,
    }}>
      <a href="tel:+19024562673" aria-label="Call"
        style={{
          flexShrink: 0,
          width: 48, height: 48,
          background: "transparent", border: "1.5px solid rgba(255,255,255,0.4)",
          color: "var(--bone)",
          display: "flex", alignItems: "center", justifyContent: "center",
          borderRadius: 2,
        }}>
        <IconPhone size={18} />
      </a>
      <div style={{ flex: 1, color: "var(--bone)", minWidth: 0 }}>
        <div className="narrow" style={{ fontSize: 10, color: "rgba(255,255,255,0.55)", letterSpacing: ".18em" }}>
          2026 SEASON
        </div>
        <div style={{ fontFamily: "var(--font-ui)", fontWeight: 800, fontSize: 13, letterSpacing: ".02em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          Pick your tide
        </div>
      </div>
      <a href="#book" className="btn btn-primary" style={{ padding: "14px 18px", fontSize: 13 }}>
        Book Now <IconArrow size={14} />
      </a>
    </div>
  );
}

Object.assign(window, { Testimonials, FAQ, Blog, FinalCTA, StickyMobileBar });
