// Shared footer + trust band + b2b strip

const TrustBand = () => (
  <div className="trust-band">
    <div className="stat"><div className="n">2,400+</div><div className="l">Verified long-stay homes</div></div>
    <div className="stat"><div className="n">38</div><div className="l">Cities across Sweden</div></div>
    <div className="stat"><div className="n">180+</div><div className="l">Partner companies</div></div>
    <div className="stat"><div className="n">4.92</div><div className="l">Average guest rating</div></div>
  </div>
);

const B2BStrip = () => {
  const rootRef = React.useRef(null);
  const contentRef = React.useRef(null);

  React.useEffect(() => {
    const root = rootRef.current;
    const content = contentRef.current;
    if (!root || !content) return;
    const update = () => {
      const rect = root.getBoundingClientRect();
      const strip = root.querySelector('.b2b-strip');
      const stripH = strip ? strip.offsetHeight : 500;
      const scrollRange = root.offsetHeight - stripH;
      if (scrollRange <= 0) { content.style.transform = ''; return; }
      const progress = Math.max(0, Math.min(1, (window.innerHeight - stripH - rect.top) / scrollRange));
      const maxY = Math.max(0, stripH - 52 - 60 - content.offsetHeight);
      content.style.transform = `translateY(${progress * maxY}px)`;
    };
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update, { passive: true });
    update();
    return () => {
      window.removeEventListener('scroll', update);
      window.removeEventListener('resize', update);
    };
  }, []);

  return (
    <div className="b2b-scroll-root" ref={rootRef}>
      <div className="b2b-strip">
        <div className="b2b-overlay" />
        <div className="b2b-inner">
          <div className="b2b-left">
            <div className="b2b-content" ref={contentRef}>
              <a
                className="google-review-badge"
                href="https://www.google.com/search?sca_esv=33295543d8b8cd1e&q=Sweden+Longstay&si=AL3DRZGNtcdgKOqVhotcr-UG2kkYpwR2WO4qu3O00NmpwBmLndMFT7OjWJJKDknAKcKuJAbr_zoB89UjhfBG7jXiKmxq4ADKuS0JJuF0rlg-lH_sy0kY0nV2RQ2qjEQccnza9SUqiBYC&sa=X&ved=2ahUKEwiSjNfqroSUAxU9FxAIHUd9KWgQ_coHegQIMBAB"
                target="_blank" rel="noopener noreferrer"
                style={{ marginBottom: 24 }}
              >
                <span className="grb-logo">G</span>
                <span className="grb-stars">★★★★★</span>
                <span className="grb-text">5,0 · 15 recensioner på Google</span>
              </a>
              <h2 className="b2b-heading">
                Flytta ditt team.<br/>
                Vi fixar resten.
              </h2>
              <p className="b2b-sub">Ett kontrakt. Förhandlade priser. En gemensam faktura för alla bokningar ditt team gör — oavsett stad.</p>
            </div>
          </div>
          <div className="b2b-actions">
            <a className="b2b-btn b2b-btn--blue" href="kontakt.html">Prata med sälj</a>
            <a className="b2b-btn b2b-btn--primary" href="foretag.html">Öppna företagskonto</a>
          </div>
        </div>
      </div>
    </div>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="container footer-grid">
      <div>
        <a href="index.html" className="footer-logo">
          <img src="sketch/assets/logo.svg" alt="Sweden Longstay" height="56" />
        </a>
        <div className="brand-line">Monthly furnished homes across Sweden for professionals, families, and teams on the move.</div>
      </div>
      <div>
        <h4>Destinationer</h4>
        <ul>
          <li><a href="search.html?city=Stockholm">Stockholm</a></li>
          <li><a href="search.html?city=Göteborg">Göteborg</a></li>
          <li><a href="search.html?city=Malmö">Malmö</a></li>
          <li><a href="search.html?city=Västerås">Västerås</a></li>
          <li><a href="search.html?city=Boden">Boden</a></li>
          <li><a href="destinationer.html">Alla städer</a></li>
        </ul>
      </div>
      <div>
        <h4>Om oss</h4>
        <ul>
          <li><a href="om-oss.html">Om Sweden Longstay</a></li>
          <li><a href="foretag.html">För företag</a></li>
          <li><a href="fastighetsagare.html">Fastighetsägare</a></li>
          <li><a href="blogg.html">Blogg</a></li>
          <li><a href="erbjudanden.html">Erbjudanden</a></li>
        </ul>
      </div>
      <div>
        <h4>Support</h4>
        <ul>
          <li><a href="hjalp.html">Hjälpcenter</a></li>
          <li><a href="kontakt.html">Kontakt</a></li>
          <li><a href="boka.html">Boka boende</a></li>
          <li><a href="integritetspolicy.html">Integritetspolicy</a></li>
          <li><a href="allmanna-villkor.html">Allmänna villkor</a></li>
        </ul>
      </div>
    </div>
    <div className="container footer-bottom">
      <div>© 2026 Sweden Longstay AB · Organisationsnummer 559-XXX-XXXX</div>
      <div style={{ display: "flex", gap: 20 }}>
        <a href="integritetspolicy.html">Integritetspolicy</a>
        <a href="allmanna-villkor.html">Villkor</a>
      </div>
    </div>
    <FooterWordmark />
  </footer>
);

const FooterWordmark = () => {
  const wrapRef = React.useRef(null);
  const textRef = React.useRef(null);
  React.useEffect(() => {
    const fit = () => {
      const wrap = wrapRef.current;
      const el = textRef.current;
      if (!wrap || !el) return;
      const cs = getComputedStyle(wrap);
      const contentW = wrap.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
      el.style.fontSize = '100px';
      el.style.fontSize = (100 * contentW / el.scrollWidth) + 'px';
    };
    fit();
    document.fonts.ready.then(() => { fit(); requestAnimationFrame(fit); });
    window.addEventListener('resize', fit);
    return () => window.removeEventListener('resize', fit);
  }, []);
  return (
    <div className="footer-wordmark container" ref={wrapRef}>
      <span ref={textRef} className="footer-wordmark-text">SWEDEN LONGSTAY</span>
    </div>
  );
};

const FloatingContact = () => {
  const [open, setOpen] = React.useState(false);
  const waMsg = encodeURIComponent("Hej! Jag är intresserad av ett boende hos Sweden Longstay.");
  const waUrl = `https://wa.me/46739290815?text=${waMsg}`;
  return (
    <div className={"float-contact" + (open ? " open" : "")}>
      {open && (
        <div className="float-contact-menu">
          <a className="float-contact-item" href={waUrl} target="_blank" rel="noopener noreferrer">
            <span className="fci-icon fci-wa">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.555 4.122 1.528 5.855L0 24l6.341-1.508A11.95 11.95 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.894a9.887 9.887 0 01-5.044-1.38l-.361-.214-3.763.895.953-3.667-.235-.376A9.861 9.861 0 012.108 12C2.108 6.478 6.478 2.108 12 2.108S21.892 6.478 21.892 12 17.522 21.894 12 21.894z"/></svg>
            </span>
            <span className="fci-label">WhatsApp</span>
          </a>
          <a className="float-contact-item" href="tel:+46103303044">
            <span className="fci-icon fci-phone">
              <Icon name="phone" size={18} />
            </span>
            <span className="fci-label">Ring oss</span>
          </a>
          <a className="float-contact-item" href="mailto:info@swedenlongstay.se">
            <span className="fci-icon fci-mail">
              <Icon name="mail" size={18} />
            </span>
            <span className="fci-label">E-post</span>
          </a>
        </div>
      )}
      <button className="float-contact-btn" onClick={() => setOpen(o => !o)} aria-label="Kontakta oss">
        {open
          ? <Icon name="close" size={22} />
          : <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.555 4.122 1.528 5.855L0 24l6.341-1.508A11.95 11.95 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.894a9.887 9.887 0 01-5.044-1.38l-.361-.214-3.763.895.953-3.667-.235-.376A9.861 9.861 0 012.108 12C2.108 6.478 6.478 2.108 12 2.108S21.892 6.478 21.892 12 17.522 21.894 12 21.894z"/></svg>
        }
      </button>
    </div>
  );
};

Object.assign(window, { TrustBand, B2BStrip, Footer, FloatingContact });
