// ============================================================================
// Landing — supporting sections after the hero
// Trust band · Why us · How it works · Popular routes · FAQ · CTA · Footer
// ============================================================================

(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.LandingIcon;
  // All user-facing strings — set by landing/i18n.js based on window.LANG
  const STR = window.STR;

  // Helper for rendering markup-containing strings (translation strings may include <b>, <br/>, <em>, <span>).
  const Html = ({ as: Tag = 'span', html, ...rest }) =>
    React.createElement(Tag, { ...rest, dangerouslySetInnerHTML: { __html: html } });

  // Routes that rotate through the "Por qué" and "Proceso" cards.
  const ROTATING_ROUTES = STR.rotatingRoutes;

  // Hook: returns the currently-highlighted route, swapping every 3.5s.
  function useRotatingRoute() {
    const [idx, setIdx] = useState(0);
    useEffect(() => {
      const t = setInterval(() => setIdx(i => (i + 1) % ROTATING_ROUTES.length), 3500);
      return () => clearInterval(t);
    }, []);
    return { route: ROTATING_ROUTES[idx], idx };
  }

  // ----------------------------------------------------------------------
  // Video section ("Mira cómo movemos tu vida") — 50-sec brand video.
  // The <video> element is muted by default; clicking the poster unmutes
  // it and starts playback. Replace VIDEO_SRC + POSTER_SRC with your assets.
  // ----------------------------------------------------------------------
  // ⚠️ PLACEHOLDER paths — drop your 50-sec mp4 in /uploads/ and update via i18n.js.
  const VIDEO_SRC  = STR.video.videoSrc;
  const POSTER_SRC = STR.video.posterSrc;

  function VideoSection() {
    const [open, setOpen] = useState(false);
    const videoRef = useRef(null);
    const modalVideoRef = useRef(null);

    // Inline preview lifecycle: play when ≥25% in view, pause when out.
    // Plus pause-event recovery for production cases where the browser's
    // autoplay heuristic pauses the video (low MEI, slow CDN delay, etc.).
    //
    // The retry is THROTTLED — max 3 retries per session with a 2-second
    // cooldown between them — so we don't reintroduce the play/pause storm
    // from an earlier commit. After 3 failed attempts the code stops trying
    // and the user can start the video manually via the first-gesture
    // fallback in the landing HTML (or the modal play button).
    //
    // Guards on retry:
    //   - Skip if v.ended (loop=true means this shouldn't happen, but if
    //     the video genuinely finished, don't fight it)
    //   - Skip if !inView (intentional pause from IO scroll-away)
    //   - Skip after maxRetries (throttle the storm)
    //
    // Source: https://benfrain.com/automatically-play-and-pause-video-as-it-enters-and-leaves-the-viewport-screen/
    // + MDN Autoplay guide (use the autoplay attribute + recover gracefully).
    useEffect(() => {
      const v = videoRef.current;
      if (!v) return;
      let inView = false;
      let retries = 0;
      let lastRetryAt = 0;
      const MAX_RETRIES = 3;
      const COOLDOWN_MS = 2000;

      const tryPlay = () => {
        if (!inView || v.ended) return;
        if (!v.paused) return;
        const now = Date.now();
        if (now - lastRetryAt > COOLDOWN_MS) retries = 0; // reset after cooldown
        if (retries >= MAX_RETRIES) return;
        retries++;
        lastRetryAt = now;
        v.muted = true;
        v.play().catch(() => {});
      };

      const io = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          inView = entry.isIntersecting;
          if (inView) tryPlay();
          else if (!v.paused) { try { v.pause(); } catch {} }
        });
      }, { threshold: 0.25 });
      io.observe(v);

      // Pause-event recovery — when the browser pauses the video for
      // heuristic reasons (low MEI, slow first-byte, etc.) and the video
      // is still in view, re-assert play(). Throttled by tryPlay()'s
      // retry budget so we don't fight the browser indefinitely.
      const onPause = () => { setTimeout(tryPlay, 150); };
      v.addEventListener('pause', onPause);

      return () => {
        io.disconnect();
        v.removeEventListener('pause', onPause);
      };
    }, []);

    // Modal play is driven by useEffect-on-[open] (below), NOT by an
    // autoPlay attribute on the <video>. The autoPlay attribute races
    // with close()'s pause() and surfaces as
    //   Uncaught (in promise) AbortError: The play() request was
    //   interrupted by a call to pause()
    // in prod (browser denies autoplay on low-MEI domain → internally
    // pauses → our pending play() Promise rejects). Driving play() from
    // useEffect runs *after* React commits the modal DOM, so the click's
    // user-activation token is still fresh and play() is accepted.
    const play = () => setOpen(true);

    const close = () => {
      // Setting open=false unmounts the modal <video>, which implicitly
      // stops playback. Don't call v.pause() here — if play() is still
      // pending (CDN slow first byte) the pause() call interrupts it and
      // surfaces as Uncaught AbortError in the console. Unmount is clean.
      setOpen(false);
    };

    // ESC to close
    useEffect(() => {
      if (!open) return;
      const onKey = (e) => { if (e.key === 'Escape') close(); };
      document.addEventListener('keydown', onKey);
      // Prevent body scroll while modal open
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => {
        document.removeEventListener('keydown', onKey);
        document.body.style.overflow = prev;
      };
    }, [open]);

    // Drive modal video playback when the modal opens.
    //
    // DON'T set currentTime here. Per HTML5 spec, setting currentTime
    // triggers a seek which internally pauses the media — if play() is
    // pending at that moment (slow CDN first byte), the seek-induced
    // pause aborts the play() Promise with:
    //   Uncaught (in promise) AbortError: The play() request was
    //   interrupted by a call to pause()
    // The video is freshly mounted (open went false → true unmounts +
    // remounts the element), so currentTime is already 0 by default.
    // No seek needed.
    //
    // Try unmuted first so audio plays from the click. The poster click
    // that opened the modal is a user gesture — Chrome's autoplay policy
    // honours it and accepts an unmuted play() inside the same task. If
    // the browser still rejects (Save-Data, OS low-power, audio session
    // conflict, etc.), the .catch runs AFTER the first promise settles —
    // never concurrently — so we can safely retry muted without a
    // pending-play race. The previous comment warning against this
    // pattern was about a different shape that called play() twice
    // immediately (both pending at once); the sequential await-then-fall-
    // back here is the MDN-recommended approach.
    useEffect(() => {
      if (!open) return;
      const v = modalVideoRef.current;
      if (!v) return;
      v.muted = false;
      const p = v.play();
      if (p && typeof p.catch === 'function') {
        p.catch(() => {
          v.muted = true;
          const p2 = v.play();
          if (p2 && typeof p2.catch === 'function') p2.catch(() => {});
        });
      }
    }, [open]);

    return (
      <section className="vid-section" id="video">
        <div className="vid-section__inner">
          <div className="vid-section__copy reveal">
            <div className="vid-section__eyebrow-pill">
              <span className="vid-section__eyebrow-dot"/>
              {STR.video.eyebrow}
            </div>
            <h2 className="vid-section__title">
              {STR.video.titleLine1}<br/>
              <span className="vid-section__title-grad">{STR.video.titleLine2}</span>
            </h2>
            <Html as="p" className="vid-section__sub" html={STR.video.sub}/>

            <div className="vid-section__card">
              <div className="vid-section__bullets">
                {STR.video.bullets.map((b, i) => {
                  // Icon per bullet position
                  const icon = i === 0 ? (
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="3" y="3" width="18" height="18" rx="3"/>
                      <path d="M3 9 H21 M9 3 V9 M15 3 V9"/>
                      <path d="M7 14 L9 16 L13 12"/>
                    </svg>
                  ) : i === 1 ? (
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M21 8 L12 13 L3 8"/>
                      <path d="M3 8 L12 3 L21 8 V16 L12 21 L3 16 Z"/>
                      <path d="M12 13 V21"/>
                    </svg>
                  ) : (
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M3 10 L12 3 L21 10 V20 H3 Z"/>
                      <path d="M9 20 V14 H15 V20"/>
                      <path d="M9 17 L11 19 L15 14" stroke="#12b76a"/>
                    </svg>
                  );
                  return (
                    <div className="vid-section__bullet" key={i}>
                      <div className="vid-section__bullet-icon">{icon}</div>
                      <div>
                        <div className="vid-section__bullet-title">{b.title}</div>
                        <div className="vid-section__bullet-desc">{b.desc}</div>
                      </div>
                    </div>
                  );
                })}
              </div>

              <div className="vid-section__mini-stats">
                {STR.video.miniStats.map((s, i) => (
                  <div className="vid-section__mini-stat" key={i}>
                    <div className="vid-section__mini-stat-num">{s.num}{s.suffix && <span>{s.suffix}</span>}</div>
                    <div className="vid-section__mini-stat-lab">{s.label}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="reveal d2">
            {/* Preview poster — clicking opens the vertical-video modal */}
            <div className="vid-section__player" onClick={play} role="button" tabIndex={0}
              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') play(); }}>
              {/* Background preview frame: mute looping low-volume preview.
                  Originally seeked to second 5 in onLoadedMetadata to skip
                  the title card — but that seek triggers an HTML5 spec-
                  defined pause, which aborts the autoplay attribute's
                  pending play() Promise on prod's slow CDN (works locally
                  because byte-ranges resolve instantly, masking the race).
                  Per https://developer.chrome.com/blog/play-request-was-interrupted
                  any post-play state mutation must wait for the play
                  Promise to fulfill. We just drop the seek — the video
                  loops anyway, so the title card flashes once and then
                  the rest of the 50s loop plays normally. */}
              <video
                ref={videoRef}
                className="vid-section__video"
                muted loop playsInline preload="auto" autoPlay
                poster={POSTER_SRC}>
                <source src={VIDEO_SRC} type="video/mp4"/>
              </video>
              <div className="vid-section__poster">
                <button type="button" className="vid-section__play" aria-label={STR.video.playLabel}>
                  <div className="vid-section__play-icon"/>
                </button>
                <div className="vid-section__chrome">
                  <span className="vid-section__chrome-dot"/>
                  {STR.video.chrome}
                </div>
                <div className="vid-section__duration">{STR.video.duration}</div>
              </div>
            </div>
          </div>
        </div>

        {/* ----- Modal: vertical video lightbox ----- */}
        {open && (
          <div className="vmodal" onClick={close} role="dialog" aria-modal="true">
            <button type="button" className="vmodal__close" onClick={close} aria-label={STR.video.closeLabel}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M6 6 L18 18 M18 6 L6 18"/>
              </svg>
            </button>
            <div className="vmodal__stage" onClick={(e) => e.stopPropagation()}>
              <video
                ref={modalVideoRef}
                className="vmodal__video"
                controls playsInline preload="auto"
                onEnded={close}>
                <source src={VIDEO_SRC} type="video/mp4"/>
              </video>
            </div>
            <div className="vmodal__caption">
              {STR.video.modalCaption}
            </div>
          </div>
        )}
      </section>
    );
  }
  // ----------------------------------------------------------------------
  // Sticky Quote Bar — follows user as they scroll past the calculator.
  // Reads window.__ABGS_QUOTE_STATE (written by QuoteCalculator) and listens
  // for 'abgs:quote-update' events. Auto-hides when in hero or footer.
  // ----------------------------------------------------------------------
  function StickyQuoteBar() {
    const [visible, setVisible] = useState(false);
    const [dismissed, setDismissed] = useState(false);
    const [state, setState] = useState(() => window.__ABGS_QUOTE_STATE || null);

    useEffect(() => {
      const onScroll = () => {
        const heroEl = document.getElementById('top');
        const footerEl = document.getElementById('footer-root');
        const heroBottom = heroEl ? heroEl.getBoundingClientRect().bottom : 0;
        const footerTop = footerEl ? footerEl.getBoundingClientRect().top : Infinity;
        const visibleNow = heroBottom < 80 && footerTop > window.innerHeight + 40;
        setVisible(visibleNow);
      };
      const onState = (e) => setState({ ...(e.detail || {}) });
      window.addEventListener('scroll', onScroll, { passive: true });
      window.addEventListener('abgs:quote-update', onState);
      onScroll();
      // Read any state that already exists
      if (window.__ABGS_QUOTE_STATE) setState(window.__ABGS_QUOTE_STATE);
      return () => {
        window.removeEventListener('scroll', onScroll);
        window.removeEventListener('abgs:quote-update', onState);
      };
    }, []);

    const scrollToCalc = () => {
      const el = document.getElementById('top');
      if (el) {
        const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    };

    if (dismissed) return null;

    const hasState  = state && state.originCity && state.destCity;
    const hasPrice  = state && state.total;

    return (
      <div className={`stickybar ${visible ? 'is-visible' : ''}`}>
        <div className="stickybar__inner">
          <div className="stickybar__lane">
            <div className="stickybar__lane-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 17 L21 17 L19 21 H5 Z"/><path d="M5 17 V11 H19 V17"/>
                <path d="M12 7 V11 M9 7 H15"/>
              </svg>
            </div>
            <div className="stickybar__lane-text">
              <div className="stickybar__lane-label">
                {hasPrice ? STR.sticky.labelReady : STR.sticky.labelDefault}
              </div>
              <div className="stickybar__lane-route">
                {hasState ? (
                  <>
                    <span>{state.originCity}</span>
                    <svg width="12" height="8" viewBox="0 0 12 8" fill="none"
                      style={{ margin: '0 6px', opacity: 0.55 }}>
                      <path d="M0 4 H10 M7 1 L10 4 L7 7" stroke="currentColor"
                        strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    <span>{state.destCity}</span>
                  </>
                ) : (
                  <span style={{ color: '#94A3B8' }}>{STR.sticky.emptyHint}</span>
                )}
              </div>
            </div>
          </div>

          {hasState && (
            <div className="stickybar__chips">
              <span className="stickybar__chip">{state.sizeLabel}</span>
              {state.vehicle && <span className="stickybar__chip">{STR.sticky.autoChip}</span>}
            </div>
          )}

          {hasPrice && (
            <div className="stickybar__price">
              <div className="stickybar__price-label">{STR.sticky.priceLabel}</div>
              <div className="stickybar__price-val">
                ${state.total.toLocaleString('en-US')}
                <span className="stickybar__price-usd">USD</span>
              </div>
            </div>
          )}

          <button className="stickybar__cta" onClick={scrollToCalc}>
            {hasPrice ? (<>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="5" y="11" width="14" height="10" rx="1.5"/>
                <path d="M8 11 V7 a4 4 0 0 1 8 0 V11"/>
              </svg>
              {STR.sticky.ctaLock}
            </>) : hasState ? (<>
              {STR.sticky.ctaContinue}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12 H19 M13 6 L19 12 L13 18"/>
              </svg>
            </>) : (<>
              {STR.sticky.ctaCalc}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12 H19 M13 6 L19 12 L13 18"/>
              </svg>
            </>)}
          </button>

          <button className="stickybar__dismiss" onClick={() => setDismissed(true)} aria-label={STR.sticky.dismissLabel}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M6 6 L18 18 M18 6 L6 18"/>
            </svg>
          </button>
        </div>
      </div>
    );
  }

  function TrustBand() {
    const certIcons = [
      // NVOCC
      <svg viewBox="0 0 32 32" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8">
        <rect x="3" y="9" width="26" height="16" rx="2"/>
        <path d="M9 9 V25 M15 9 V25 M21 9 V25"/>
        <path d="M11 5 L21 5 L23 9 L9 9 Z"/>
      </svg>,
      // C-TPAT
      <svg viewBox="0 0 32 32" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round">
        <path d="M16 3 L28 8 V16 c0 6.5 -4.5 11 -12 14 c-7.5 -3 -12 -7.5 -12 -14 V8 Z"/>
        <path d="M10 16 L14 20 L22 12"/>
      </svg>,
      // FMC
      <svg viewBox="0 0 32 32" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round">
        <path d="M16 4 L28 12 V28 H4 V12 Z"/>
        <path d="M12 28 V18 H20 V28"/>
        <circle cx="16" cy="12" r="1.5"/>
      </svg>,
    ];
    return (
      <section className="trust-band">
        <div className="trust-band__inner">
          <div className="trust-band__left reveal">
            <div className="trust-band__label">{STR.trust.label}</div>
            <div className="trust-band__certs">
              {STR.trust.certs.map((c, i) => (
                <CertBadge key={i} mark={certIcons[i]} name={c.name} desc={c.desc}/>
              ))}
            </div>
          </div>

          <div className="trust-band__stats reveal d2">
            {STR.trust.stats.map((s, i) => (
              <Stat key={i} num={s.num} plus={s.plus} suffix={s.suffix} label={s.label}/>
            ))}
          </div>
        </div>
      </section>
    );
  }
  function CertBadge({ mark, name, desc }) {
    return (
      <div className="cert-badge">
        <div className="cert-badge__mark">{mark}</div>
        <div className="cert-badge__text">
          <div className="cert-badge__name">{name}</div>
          <div className="cert-badge__desc">{desc}</div>
        </div>
      </div>
    );
  }
  function Stat({ num, plus, suffix, label }) {
    return (
      <div>
        <div className="tb-stat__num">
          <em>{num}</em>{suffix || ''}{plus && <span style={{ color: '#60A5FA' }}>+</span>}
        </div>
        <div className="tb-stat__label">{label}</div>
      </div>
    );
  }

  // ----------------------------------------------------------------------
  // Why us — bento grid with live, animated demos per card
  // ----------------------------------------------------------------------
  function WhyUs() {
    const { route, idx } = useRotatingRoute();
    return (
      <section className="section why">
        <div className="section__inner">
          <div className="why__head reveal">
            <div className="section__eyebrow">{STR.why.eyebrow}</div>
            <Html as="h2" className="why__title" html={STR.why.titleHtml}/>
            <Html as="p" className="why__sub" html={STR.why.subHtml}/>
          </div>

          <div className="bento">
            {/* CARD 1 — Big dark hero: instant price */}
            <div className="bento__card bento__card--hero reveal d1">
              <div className="bento__card-meta">
                <span className="bento__card-lane">{STR.why.card1Lane}</span>
                <span className="bento__card-stat">
                  <span className="bento__card-stat-dot"/>
                  {STR.why.card1Stat}
                </span>
              </div>
              <Html as="h3" className="bento__card-title" html={STR.why.card1TitleHtml}/>
              <p className="bento__card-desc">{STR.why.card1Desc}</p>
              <div className="bento__price-demo">
                <div className="bento__price-demo-row">
                  <div className="bento__price-demo-step">
                    <div className="bento__price-demo-step-num">01</div>
                    <div className="bento__price-demo-step-label">{STR.why.card1Step1Lab}</div>
                    <div className="bento__price-demo-step-val" key={`bento-in-${idx}`}>
                      <span style={{ marginRight: 6 }}>{route.of}</span>
                      {route.o} → <span style={{ margin: '0 4px' }}>{route.df}</span>{route.d}
                    </div>
                  </div>
                  <div className="bento__price-demo-arrow">
                    <svg width="20" height="12" viewBox="0 0 20 12" fill="none">
                      <path d="M0 6 H17 M13 1 L18 6 L13 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </div>
                  <div className="bento__price-demo-step bento__price-demo-step--result">
                    <div className="bento__price-demo-step-num">02</div>
                    <div className="bento__price-demo-step-label">{STR.why.card1Step2Lab}</div>
                    <div className="bento__price-demo-step-val" key={`bento-pr-${idx}`}>
                      <span className="bento__price-demo-amount">${route.price.toLocaleString('en-US')}</span>
                      <span className="bento__price-demo-usd">USD</span>
                    </div>
                  </div>
                </div>
                <div className="bento__price-demo-bar">
                  <div className="bento__price-demo-bar-fill"/>
                  <Html as="div" className="bento__price-demo-bar-label"
                    html={window.tpl(STR.why.card1TransitLabHtml, { days: route.days })}/>
                </div>
              </div>
            </div>

            {/* CARD 2 — Tall light: 186 countries */}
            <div className="bento__card bento__card--tall reveal d2">
              <div className="bento__card-meta">
                <span className="bento__card-lane" style={{ color: '#1846B0' }}>{STR.why.card2Lane}</span>
                <span className="bento__card-stat" style={{ color: '#027A48' }}>
                  <span className="bento__card-stat-dot" style={{ background: '#12b76a' }}/>
                  {STR.why.card2Stat}
                </span>
              </div>
              <h3 className="bento__card-title" style={{ color: '#0B1220' }}>
                <span className="bento__big-num">{STR.why.card2TitleNum}</span><br/>
                <Html as="span" html={STR.why.card2TitleHtml}
                  style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}/>
              </h3>
              <div className="bento__globe">
                <GlobeVisual/>
              </div>
              <div className="bento__regions">
                {STR.why.card2Regions.map((r, i) => (
                  <div className="bento__region" key={i}>
                    <div className="bento__region-name">{r.name}</div>
                    <div className="bento__region-bar"><div style={{ width: `${r.pct}%` }}/></div>
                    <div className="bento__region-num">{r.num}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* CARD 3 — Customs / llave en mano */}
            <div className="bento__card bento__card--customs reveal d3">
              <div className="bento__card-meta">
                <span className="bento__card-lane" style={{ color: '#1846B0' }}>{STR.why.card3Lane}</span>
              </div>
              <Html as="h3" className="bento__card-title" html={STR.why.card3TitleHtml}
                style={{ color: '#0B1220', fontSize: 24 }}/>
              <p className="bento__card-desc" style={{ color: '#475467' }}>{STR.why.card3Desc}</p>
              <div className="bento__customs">
                <div className="bento__stamp bento__stamp--origin">
                  <div className="bento__stamp-circle">
                    <svg width="100%" height="100%" viewBox="0 0 100 100" fill="none">
                      <defs>
                        <path id="bento-arc-1" d="M 50,50 m -38,0 a 38,38 0 1,1 76,0 a 38,38 0 1,1 -76,0"/>
                      </defs>
                      <text fill="#B42318" fontSize="9" fontWeight="700" letterSpacing="2.2px"
                        fontFamily="JetBrains Mono, monospace">
                        <textPath href="#bento-arc-1" startOffset="0%">
                          {STR.why.card3StampOriginArc}
                        </textPath>
                      </text>
                    </svg>
                    <div className="bento__stamp-center">
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M4 12 L10 18 L20 6"/>
                      </svg>
                      <div className="bento__stamp-label">{STR.why.card3StampOriginLabel}</div>
                    </div>
                  </div>
                </div>
                <div className="bento__customs-arrow">
                  <svg width="40" height="14" viewBox="0 0 40 14" fill="none">
                    <path d="M0 7 H35 M30 2 L37 7 L30 12" stroke="#98A2B3" strokeWidth="1.3" strokeDasharray="3 3" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <div className="bento__stamp bento__stamp--dest">
                  <div className="bento__stamp-circle">
                    <svg width="100%" height="100%" viewBox="0 0 100 100" fill="none">
                      <defs>
                        <path id="bento-arc-2" d="M 50,50 m -38,0 a 38,38 0 1,1 76,0 a 38,38 0 1,1 -76,0"/>
                      </defs>
                      <text fill="#027A48" fontSize="9" fontWeight="700" letterSpacing="2.2px"
                        fontFamily="JetBrains Mono, monospace">
                        <textPath href="#bento-arc-2" startOffset="0%">
                          {STR.why.card3StampDestArc}
                        </textPath>
                      </text>
                    </svg>
                    <div className="bento__stamp-center" style={{ color: '#12b76a' }}>
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M4 12 L10 18 L20 6"/>
                      </svg>
                      <div className="bento__stamp-label">{STR.why.card3StampDestLabel}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* CARD 4 — Tracking 24/7 (dark) */}
            <div className="bento__card bento__card--tracking reveal d4">
              <div className="bento__card-meta">
                <span className="bento__card-lane">{STR.why.card4Lane}</span>
                <span className="bento__card-stat">
                  <span className="bento__card-stat-dot"/>
                  {STR.why.card4Stat}
                </span>
              </div>
              <h3 className="bento__card-title" style={{ fontSize: 26 }}>
                {STR.why.card4Title}
              </h3>
              <div className="bento__timeline">
                {STR.why.card4Timeline.map((t, i) => (
                  <div key={i} className={`bento__timeline-row${t.state ? ' bento__timeline-row--' + t.state : ''}`}>
                    <div className="bento__timeline-dot"/>
                    <div className="bento__timeline-content">
                      <div className="bento__timeline-title">{t.title}</div>
                      <div className="bento__timeline-meta">{t.meta}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="bento__channels">
                <div className="bento__channel">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.4-2.4-1.4-.9-.8-1.5-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0s-.5.1-.7.4c-.3.3-1 .9-1 2.3 0 1.4 1 2.7 1.1 2.9.1.2 2 3 4.8 4.2 1.7.7 2.4.8 3.2.7.5-.1 1.6-.7 1.8-1.3.2-.6.2-1.1.2-1.3 0-.1-.2-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
                  </svg>
                  {STR.why.card4Channels[0]}
                </div>
                <div className="bento__channel">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="5" width="18" height="14" rx="2"/>
                    <path d="M3 7 L12 13 L21 7"/>
                  </svg>
                  {STR.why.card4Channels[1]}
                </div>
                <div className="bento__channel">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="6" y="2" width="12" height="20" rx="2"/>
                    <path d="M11 18 H13"/>
                  </svg>
                  {STR.why.card4Channels[2]}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Mini globe visualization — uses a pre-rendered animated 3D globe video.
  function GlobeVisual() {
    return (
      <video
        autoPlay muted loop playsInline preload="auto">
        <source src="../uploads/grok-dd652046-d473-4e66-a1ba-3f4d78fac838-720p.mp4" type="video/mp4"/>
      </video>
    );
  }

  // ----------------------------------------------------------------------

  // ----------------------------------------------------------------------
  // How it works — 4-step storyboard with rich custom visuals per step
  // ----------------------------------------------------------------------
  function HowItWorks() {
    const { route, idx } = useRotatingRoute();
    return (
      <section className="section proc">
        <div className="section__inner">
          <div className="proc__head reveal">
            <div className="section__eyebrow proc__eyebrow">{STR.proc.eyebrow}</div>
            <Html as="h2" className="proc__title" html={STR.proc.titleHtml}/>
            <p className="proc__sub">{STR.proc.sub}</p>
          </div>

          {/* Connecting rail behind cards */}
          <div className="proc__grid">
            <div className="proc__rail" aria-hidden="true"/>

            {/* Step 1 — Calcula tu precio */}
            <div className="proc__step reveal d1">
              <div className="proc__step-head">
                <div className="proc__step-num">01</div>
                <div className="proc__step-time">
                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <circle cx="6" cy="6" r="5"/><path d="M6 3 V6 L8 7"/>
                  </svg>
                  {STR.proc.steps[0].time}
                </div>
              </div>

              <div className="proc__visual proc__visual--calc">
                <div className="proc__visual-chrome">
                  <span className="proc__visual-dot proc__visual-dot--red"/>
                  <span className="proc__visual-dot proc__visual-dot--yellow"/>
                  <span className="proc__visual-dot proc__visual-dot--green"/>
                  <span className="proc__visual-title">{STR.proc.steps[0].calcChrome}</span>
                </div>
                <div className="proc__visual-body">
                  <div className="proc__calc-field" key={`proc-o-${idx}`}>
                    <span className="proc__calc-flag">{route.of}</span>
                    <span>{route.o}</span>
                  </div>
                  <div className="proc__calc-arrow">
                    <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
                      <path d="M0 5 H11 M8 1 L12 5 L8 9" stroke="#94A3B8" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </div>
                  <div className="proc__calc-field" key={`proc-d-${idx}`}>
                    <span className="proc__calc-flag">{route.df}</span>
                    <span>{route.d}</span>
                  </div>
                  <div className="proc__calc-result" key={`proc-pr-${idx}`}>
                    <div className="proc__calc-result-label">{STR.proc.steps[0].calcResultLab}</div>
                    <div className="proc__calc-result-val">
                      ${route.price.toLocaleString('en-US')} <span className="proc__calc-result-usd">USD</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="proc__step-content">
                <h3 className="proc__step-title">{STR.proc.steps[0].title}</h3>
                <p className="proc__step-desc">{STR.proc.steps[0].desc}</p>
              </div>
            </div>

            {/* Step 2 — Visita virtual */}
            <div className="proc__step reveal d2">
              <div className="proc__step-head">
                <div className="proc__step-num">02</div>
                <div className="proc__step-time">
                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <circle cx="6" cy="6" r="5"/><path d="M6 3 V6 L8 7"/>
                  </svg>
                  {STR.proc.steps[1].time}
                </div>
              </div>

              <div className="proc__visual proc__visual--call">
                <div className="proc__call-bg">
                  <svg viewBox="0 0 200 120" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
                    <defs>
                      <linearGradient id="proc-call-sky" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#FED7AA"/>
                        <stop offset="100%" stopColor="#FBBF24"/>
                      </linearGradient>
                    </defs>
                    <rect width="200" height="120" fill="url(#proc-call-sky)"/>
                    {/* Simple house silhouette */}
                    <path d="M40 90 L40 65 L80 35 L120 65 L120 90 Z M120 90 L160 90 L160 70 L140 70 L140 60 L120 60" fill="#92400E" opacity="0.55"/>
                    <rect x="60" y="72" width="14" height="18" fill="#451A03" opacity="0.7"/>
                    <rect x="90" y="60" width="14" height="14" fill="#451A03" opacity="0.6"/>
                    {/* Sun */}
                    <circle cx="160" cy="30" r="10" fill="#FBBF24" opacity="0.85"/>
                  </svg>
                </div>
                <div className="proc__call-overlay">
                  {/* AR scan boxes pulsing */}
                  <div className="proc__call-box" style={{ top: '32%', left: '18%', width: '22%', height: '28%' }}>
                    <span className="proc__call-tag">{STR.proc.steps[1].callTagSala}</span>
                  </div>
                  <div className="proc__call-box" style={{ top: '24%', left: '46%', width: '18%', height: '20%' }}>
                    <span className="proc__call-tag">{STR.proc.steps[1].callTagHab}</span>
                  </div>
                </div>
                {/* Caller card bottom right */}
                <div className="proc__call-self">
                  <div className="proc__call-self-avatar">A</div>
                  <div className="proc__call-self-rec">
                    <span className="proc__call-self-rec-dot"/>
                    <span>{STR.proc.steps[1].callRec}</span>
                  </div>
                </div>
                <div className="proc__call-chip">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                    <rect x="3" y="6" width="14" height="12" rx="2"/><path d="M17 10 L21 7 V17 L17 14 Z"/>
                  </svg>
                  {STR.proc.steps[1].callChip}
                </div>
              </div>

              <div className="proc__step-content">
                <h3 className="proc__step-title">{STR.proc.steps[1].title}</h3>
                <p className="proc__step-desc">{STR.proc.steps[1].desc}</p>
              </div>
            </div>

            {/* Step 3 — Empaque profesional */}
            <div className="proc__step reveal d3">
              <div className="proc__step-head">
                <div className="proc__step-num">03</div>
                <div className="proc__step-time">
                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <circle cx="6" cy="6" r="5"/><path d="M6 3 V6 L8 7"/>
                  </svg>
                  {STR.proc.steps[2].time}
                </div>
              </div>

              <div className="proc__visual proc__visual--pack">
                <div className="proc__pack-stack">
                  <div className="proc__pack-box proc__pack-box--3">
                    <span className="proc__pack-tag">{STR.proc.steps[2].packTags[0]}</span>
                    <div className="proc__pack-qr">
                      <QrPattern/>
                    </div>
                  </div>
                  <div className="proc__pack-box proc__pack-box--2">
                    <span className="proc__pack-tag">{STR.proc.steps[2].packTags[1]}</span>
                    <div className="proc__pack-qr">
                      <QrPattern/>
                    </div>
                  </div>
                  <div className="proc__pack-box proc__pack-box--1">
                    <span className="proc__pack-tag">{STR.proc.steps[2].packTags[2]}</span>
                    <div className="proc__pack-qr">
                      <QrPattern/>
                    </div>
                  </div>
                </div>
                <div className="proc__pack-meter">
                  <div className="proc__pack-meter-track">
                    <div className="proc__pack-meter-fill" style={{ width: '68%' }}/>
                  </div>
                  <div className="proc__pack-meter-meta">
                    <span>{STR.proc.steps[2].packMeter}</span>
                    <span style={{ color: '#6EE7B7' }}>● {STR.proc.steps[2].packStatus}</span>
                  </div>
                </div>
              </div>

              <div className="proc__step-content">
                <h3 className="proc__step-title">{STR.proc.steps[2].title}</h3>
                <p className="proc__step-desc">{STR.proc.steps[2].desc}</p>
              </div>
            </div>

            {/* Step 4 — Tránsito + entrega */}
            <div className="proc__step reveal d4">
              <div className="proc__step-head">
                <div className="proc__step-num">04</div>
                <div className="proc__step-time">
                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <circle cx="6" cy="6" r="5"/><path d="M6 3 V6 L8 7"/>
                  </svg>
                  {STR.proc.steps[3].time}
                </div>
              </div>

              <div className="proc__visual proc__visual--ship">
                <div className="proc__ship-head">
                  <span className="proc__ship-head-live">
                    <span className="proc__ship-head-live-dot"/>
                    {STR.proc.steps[3].shipLive}
                  </span>
                  <span className="proc__ship-head-id">{STR.proc.steps[3].shipContainer}</span>
                </div>

                <svg className="proc__ship-map" viewBox="0 0 280 130" width="100%" height="100%" fill="none" preserveAspectRatio="xMidYMid meet">
                  <defs>
                    <linearGradient id="proc-ship-route" x1="0" y1="0" x2="1" y2="0">
                      <stop offset="0%" stopColor="#60A5FA"/>
                      <stop offset="100%" stopColor="#34D399"/>
                    </linearGradient>
                    <pattern id="proc-ship-grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(147,197,253,0.05)" strokeWidth="0.3"/>
                    </pattern>
                  </defs>

                  {/* Faint coordinate grid */}
                  <rect width="280" height="130" fill="url(#proc-ship-grid)"/>

                  {/* Ambient waypoint dots */}
                  <circle cx="90" cy="42" r="0.8" fill="rgba(147,197,253,0.25)"/>
                  <circle cx="190" cy="38" r="0.8" fill="rgba(147,197,253,0.25)"/>
                  <circle cx="140" cy="105" r="0.8" fill="rgba(147,197,253,0.2)"/>
                  <circle cx="240" cy="100" r="0.8" fill="rgba(147,197,253,0.2)"/>
                  <circle cx="40" cy="100" r="0.8" fill="rgba(147,197,253,0.2)"/>

                  {/* Route base */}
                  <path d="M 36 80 Q 140 30 244 70" stroke="rgba(96,165,250,0.18)" strokeWidth="1.2" fill="none"/>
                  {/* Completed portion (0→64%) */}
                  <path d="M 36 80 Q 140 30 244 70"
                    stroke="url(#proc-ship-route)" strokeWidth="1.8" fill="none"
                    strokeDasharray="240"
                    strokeDashoffset="86"
                    strokeLinecap="round"/>
                  {/* Animated travel pulse */}
                  <path d="M 36 80 Q 140 30 244 70"
                    stroke="rgba(255,255,255,0.4)" strokeWidth="1.8" fill="none"
                    strokeDasharray="6 240"
                    strokeLinecap="round"
                    style={{ animation: 'proc-ship-trail 3.2s linear infinite' }}/>

                  {/* Origin marker */}
                  <circle cx="36" cy="80" r="6" fill="rgba(96,165,250,0.18)"/>
                  <circle cx="36" cy="80" r="3.2" fill="#60A5FA"/>
                  <circle cx="36" cy="80" r="1.4" fill="#0B1E3F"/>

                  {/* Destination marker */}
                  <circle cx="244" cy="70" r="6" fill="rgba(52,211,153,0.18)"/>
                  <circle cx="244" cy="70" r="3.2" fill="#34D399"/>
                  <circle cx="244" cy="70" r="1.4" fill="#0B1E3F"/>

                  {/* Vessel at 64% along the curve.
                      Quadratic Bezier at t=0.64 from (36,80) via (140,30) to (244,70):
                      x = (1-t)²·36 + 2(1-t)t·140 + t²·244 ≈ 164
                      y = (1-t)²·80 + 2(1-t)t·30 + t²·70 ≈ 51 */}
                  <g transform="translate(164, 51)">
                    {/* Vessel halo */}
                    <circle cx="0" cy="0" r="10" fill="rgba(96,165,250,0.18)">
                      <animate attributeName="r" values="10;13;10" dur="2.4s" repeatCount="indefinite"/>
                      <animate attributeName="opacity" values="0.5;0;0.5" dur="2.4s" repeatCount="indefinite"/>
                    </circle>
                    {/* Vessel — simple, well-proportioned cargo ship glyph (stroke) */}
                    <g stroke="#E0E7FF" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" fill="none">
                      {/* Hull */}
                      <path d="M -8 1.5 L 8 1.5 L 6.5 3.8 L -6.5 3.8 Z" fill="#1E57D6" stroke="#1E57D6"/>
                      {/* Deck */}
                      <path d="M -8 1.5 L 8 1.5"/>
                      {/* Containers — neutral, no rainbow */}
                      <rect x="-6" y="-2.4" width="3.2" height="3.6" fill="#E0E7FF" stroke="none"/>
                      <rect x="-2.2" y="-2.4" width="3.2" height="3.6" fill="#A5B4FC" stroke="none"/>
                      <rect x="1.6" y="-2.4" width="3.2" height="3.6" fill="#E0E7FF" stroke="none"/>
                      {/* Bridge */}
                      <rect x="5" y="-4" width="1.6" height="2" fill="#E0E7FF" stroke="none"/>
                    </g>
                  </g>

                  {/* Origin label */}
                  <g fontFamily="JetBrains Mono, monospace" fontWeight="700" letterSpacing="0.5">
                    <text x="36" y="98" fontSize="6.5" fill="#93C5FD" textAnchor="middle">{STR.proc.steps[3].shipOriginLabel}</text>
                    <text x="36" y="107" fontSize="4.2" fill="rgba(147,197,253,0.55)" textAnchor="middle" fontWeight="500">{STR.proc.steps[3].shipOriginDate}</text>
                  </g>

                  {/* Destination label */}
                  <g fontFamily="JetBrains Mono, monospace" fontWeight="700" letterSpacing="0.5">
                    <text x="244" y="88" fontSize="6.5" fill="#6EE7B7" textAnchor="middle">{STR.proc.steps[3].shipDestLabel}</text>
                    <text x="244" y="97" fontSize="4.2" fill="rgba(110,231,183,0.55)" textAnchor="middle" fontWeight="500">{STR.proc.steps[3].shipDestEta}</text>
                  </g>

                  {/* Vessel coord readout */}
                  <text x="164" y="63" fontSize="3.8" fontFamily="JetBrains Mono, monospace" fontWeight="500" fill="rgba(224,231,255,0.6)" textAnchor="middle" letterSpacing="0.3">
                    {STR.proc.steps[3].shipCoords}
                  </text>
                </svg>

                <div className="proc__ship-progress">
                  <div className="proc__ship-progress-label">
                    <span>{STR.proc.steps[3].shipDayProgress}</span>
                    <span style={{ color: '#6EE7B7' }}>{STR.proc.steps[3].shipPctComplete}</span>
                  </div>
                  <div className="proc__ship-progress-bar">
                    <div className="proc__ship-progress-fill" style={{ width: '64%' }}/>
                  </div>
                </div>
              </div>

              <div className="proc__step-content">
                <h3 className="proc__step-title">{STR.proc.steps[3].title}</h3>
                <p className="proc__step-desc">{STR.proc.steps[3].desc}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Simple decorative QR pattern (deterministic per render)
  function QrPattern() {
    return (
      <svg viewBox="0 0 12 12" width="100%" height="100%">
        <rect x="0" y="0" width="12" height="12" fill="#fff"/>
        {/* Position markers */}
        <rect x="0.5" y="0.5" width="3" height="3" fill="#0B1220"/>
        <rect x="1.3" y="1.3" width="1.4" height="1.4" fill="#fff"/>
        <rect x="8.5" y="0.5" width="3" height="3" fill="#0B1220"/>
        <rect x="9.3" y="1.3" width="1.4" height="1.4" fill="#fff"/>
        <rect x="0.5" y="8.5" width="3" height="3" fill="#0B1220"/>
        <rect x="1.3" y="9.3" width="1.4" height="1.4" fill="#fff"/>
        {/* Data dots */}
        {[
          [4,1],[5,1],[7,1],[4,2],[6,2],[5,3],[7,3],
          [1,4],[3,4],[5,4],[7,4],[8,4],[10,4],[11,4],
          [2,5],[4,5],[6,5],[9,5],[11,5],
          [1,6],[3,6],[5,6],[7,6],[8,6],[10,6],
          [4,7],[6,7],[8,7],[9,7],[11,7],
          [5,8],[7,8],[10,8],
          [4,9],[6,9],[7,9],[9,9],[11,9],
          [5,10],[7,10],[8,10],[10,10],
          [4,11],[6,11],[9,11],[11,11],
        ].map(([x, y], i) => (
          <rect key={i} x={x} y={y} width="1" height="1" fill="#0B1220"/>
        ))}
      </svg>
    );
  }

  // ----------------------------------------------------------------------

  // ----------------------------------------------------------------------
  // Popular routes — quick price preview cards
  // ----------------------------------------------------------------------
  function PopularRoutes() {
    const routes = [
      { from: 'Miami, FL', to: 'Bogotá', country: 'Colombia',         flag: '🇨🇴', price: 1847, transit: '18–22 días', size: '1 habitación' },
      { from: 'Miami, FL', to: 'Caracas', country: 'Venezuela',       flag: '🇻🇪', price: 2110, transit: '15–20 días', size: '1 habitación' },
      { from: 'Miami, FL', to: 'Santo Domingo', country: 'Rep. Dom.', flag: '🇩🇴', price: 1290, transit: '8–12 días',  size: '1 habitación' },
      { from: 'Miami, FL', to: 'Madrid', country: 'España',           flag: '🇪🇸', price: 2680, transit: '22–28 días', size: '1 habitación' },
      { from: 'Miami, FL', to: 'CDMX', country: 'México',             flag: '🇲🇽', price: 1180, transit: '9–14 días',  size: '1 habitación' },
      { from: 'Miami, FL', to: 'Buenos Aires', country: 'Argentina',  flag: '🇦🇷', price: 2940, transit: '26–32 días', size: '1 habitación' },
    ];

    const scrollToCalc = () => {
      const el = document.getElementById('top');
      if (el) {
        const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    };

    return (
      <section className="section">
        <div className="section__inner">
          <div className="section__head reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', maxWidth: 'none', gap: 32 }}>
            <div style={{ maxWidth: 600 }}>
              <div className="section__eyebrow">Rutas populares</div>
              <h2 className="section__title">Precios desde Miami<br/>a destinos frecuentes.</h2>
              <p className="section__sub">
                Estimaciones para mudanza de <b>1 habitación · ~14 m³</b>, puerta a puerta, todo incluido.
                Calcula el precio exacto de la tuya arriba.
              </p>
            </div>
            <button onClick={scrollToCalc} style={{
              padding: '12px 18px', borderRadius: 10, border: '1px solid #D0D5DD',
              background: '#fff', cursor: 'pointer', fontSize: 13.5, fontWeight: 600,
              color: '#0B1220', display: 'inline-flex', alignItems: 'center', gap: 8,
              whiteSpace: 'nowrap',
            }}>
              <Icon name="arrowRight" size={14}/> Calcular mi ruta
            </button>
          </div>

          <div className="routes-grid">
            {routes.map((r, i) => (
              <div key={i} className={`route-card reveal d${(i%4)+1}`} onClick={scrollToCalc}>
                <div className="route-card__lane">
                  <span className="route-card__flag">🇺🇸</span>
                  <span className="route-card__lane-text">{r.from.split(',')[0]}</span>
                  <svg width="16" height="10" viewBox="0 0 16 10" fill="none" style={{ color: '#98A2B3' }}>
                    <path d="M0 5 H14 M10 1 L14 5 L10 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span className="route-card__flag">{r.flag}</span>
                  <span className="route-card__lane-text">{r.to}</span>
                  <span className="route-card__arrow" style={{ marginLeft: 'auto' }}>
                    <Icon name="arrowRight" size={16}/>
                  </span>
                </div>
                <div className="route-card__price">
                  <span className="route-card__price-from">Desde</span>
                  <span className="route-card__price-amount">${r.price.toLocaleString('en-US')}</span>
                  <span className="route-card__price-usd">USD</span>
                </div>
                <div style={{ fontSize: 12, color: '#667085' }}>{r.size}</div>
                <div className="route-card__meta">
                  <span className="route-card__meta-item">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="6" cy="6" r="5"/><path d="M6 3 V6 L8 7"/></svg>
                    {r.transit}
                  </span>
                  <span className="route-card__meta-item">
                    <Icon name="container" size={12}/>
                    Door-to-door
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ----------------------------------------------------------------------
  // FAQ — categorized single-column accordion
  // ----------------------------------------------------------------------
  function FAQ() {
    const items = STR.faq.items;
    const cats = STR.faq.cats;
    const grouped = cats.map(c => ({ cat: c, items: items.filter(i => i.cat === c) }));

    const [open, setOpen] = useState(0);

    let runIdx = 0;
    return (
      <section className="section faq-section">
        <div className="section__inner">
          <div className="faq__head reveal">
            <div className="section__eyebrow faq__eyebrow">{STR.faq.eyebrow}</div>
            <Html as="h2" className="faq__title" html={STR.faq.titleHtml}/>
            <p className="faq__sub">{STR.faq.sub}</p>
          </div>

          <div className="faq__layout">
            {grouped.map((group) => (
              <div key={group.cat} className="faq__group reveal">
                <div className="faq__group-label">
                  <span className="faq__group-dot"/>
                  {group.cat}
                </div>
                <div className="faq__items">
                  {group.items.map((it) => {
                    const myIdx = runIdx++;
                    const isOpen = open === myIdx;
                    return (
                      <div key={myIdx} className={`faq-item ${isOpen ? 'is-open' : ''}`}>
                        <button className="faq-item__btn" onClick={() => setOpen(isOpen ? -1 : myIdx)}>
                          <span className="faq-item__q">{it.q}</span>
                          <span className="faq-item__icon">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                              <path d="M12 5 V19 M5 12 H19"/>
                            </svg>
                          </span>
                        </button>
                        <div className="faq-item__panel">
                          <div className="faq-item__a">{it.a}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>

          {/* Bottom CTA */}
          <div className="faq__bottom reveal">
            <div className="faq__bottom-text">
              <div className="faq__bottom-title">{STR.faq.bottomTitle}</div>
              <div className="faq__bottom-desc">{STR.faq.bottomDesc}</div>
            </div>
            <a href={`https://wa.me/13056352525?text=${encodeURIComponent(STR.faq.bottomWaMsg)}`}
              target="_blank" rel="noopener" className="faq__bottom-cta">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.4-2.4-1.4-.9-.8-1.5-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0s-.5.1-.7.4c-.3.3-1 .9-1 2.3 0 1.4 1 2.7 1.1 2.9.1.2 2 3 4.8 4.2 1.7.7 2.4.8 3.2.7.5-.1 1.6-.7 1.8-1.3.2-.6.2-1.1.2-1.3 0-.1-.2-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
              {STR.faq.bottomCta}
            </a>
          </div>
        </div>
      </section>
    );
  }

  // ----------------------------------------------------------------------
  // Final CTA strip — slim, modern
  // ----------------------------------------------------------------------
  function CtaStrip() {
    const scrollToCalc = () => {
      const el = document.getElementById('top');
      if (el) {
        const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    };
    return (
      <section className="cta-strip">
        <div className="cta-strip__inner">
          <div className="cta-strip__pill">
            <span className="cta-strip__pill-dot"/>
            {STR.cta.pill}
          </div>
          <Html as="h3" className="cta-strip__title" html={STR.cta.titleHtml}/>
          <p className="cta-strip__sub">{STR.cta.sub}</p>
          <button className="cta-strip__btn" onClick={scrollToCalc}>
            {STR.cta.btn}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12 H19 M13 6 L19 12 L13 18"/>
            </svg>
          </button>
        </div>
      </section>
    );
  }

  // ----------------------------------------------------------------------
  // Footer — modern, slim, real logo + linked pages
  // ----------------------------------------------------------------------
  function LandingFooter() {
    return (
      <footer className="footer">
        <div className="footer__inner">
          <div className="footer__top">

            <div className="footer__brand">
              <a href="/" className="footer__brand-link">
                <img src="../assets/abgs-logo.png" alt="AB Group Shipping"
                  width="36" height="36" className="footer__brand-logo"/>
                <div>
                  <div className="footer__brand-name">ABGS</div>
                  <div className="footer__brand-tag">AB Group Shipping</div>
                </div>
              </a>
              <p className="footer__brand-desc">{STR.footer.brandDesc}</p>
              <div className="footer__brand-social">
                <a href="https://wa.me/13056352525" target="_blank" rel="noopener" aria-label="WhatsApp">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.4-2.4-1.4-.9-.8-1.5-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0s-.5.1-.7.4c-.3.3-1 .9-1 2.3 0 1.4 1 2.7 1.1 2.9.1.2 2 3 4.8 4.2 1.7.7 2.4.8 3.2.7.5-.1 1.6-.7 1.8-1.3.2-.6.2-1.1.2-1.3 0-.1-.2-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
                  </svg>
                </a>
                <a href="https://www.linkedin.com/" target="_blank" rel="noopener" aria-label="LinkedIn">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.34 18V10H5.67v8h2.67zM7 8.86a1.54 1.54 0 1 0 0-3.08 1.54 1.54 0 0 0 0 3.08zM18.34 18v-4.4c0-2.5-1.34-3.66-3.12-3.66a2.7 2.7 0 0 0-2.45 1.35V10h-2.67v8h2.67v-4.4c0-1.04.2-2.04 1.49-2.04 1.27 0 1.29 1.18 1.29 2.1V18h2.79z"/>
                  </svg>
                </a>
                <a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Instagram">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <rect x="3" y="3" width="18" height="18" rx="5"/>
                    <circle cx="12" cy="12" r="4"/>
                    <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
                  </svg>
                </a>
              </div>
            </div>

            <div className="footer__col">
              <div className="footer__col-title">{STR.footer.colServices}</div>
              <div className="footer__links">
                {STR.footer.services.map((l, i) => (
                  <a key={i} href={l.href}>{l.label}</a>
                ))}
              </div>
            </div>

            <div className="footer__col">
              <div className="footer__col-title">{STR.footer.colCompany}</div>
              <div className="footer__links">
                {STR.footer.company.map((l, i) => (
                  <a key={i} href={l.href}>{l.label}</a>
                ))}
              </div>
            </div>

            <div className="footer__col">
              <div className="footer__col-title">{STR.footer.colContact}</div>
              <div className="footer__contact">
                <a href="tel:+13056352525" className="footer__contact-row">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M3 5 a2 2 0 0 1 2 -2 h2 l2 5 l-2 2 a14 14 0 0 0 7 7 l2 -2 l5 2 v2 a2 2 0 0 1 -2 2 a18 18 0 0 1 -16 -16 Z"/>
                  </svg>
                  <span>{STR.header.phone}</span>
                </a>
                <a href="https://wa.me/13056352525" className="footer__contact-row" target="_blank" rel="noopener">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="#25D366">
                    <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.4-2.4-1.4-.9-.8-1.5-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0s-.5.1-.7.4c-.3.3-1 .9-1 2.3 0 1.4 1 2.7 1.1 2.9.1.2 2 3 4.8 4.2 1.7.7 2.4.8 3.2.7.5-.1 1.6-.7 1.8-1.3.2-.6.2-1.1.2-1.3 0-.1-.2-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
                  </svg>
                  <span>{STR.footer.waLabel}</span>
                </a>
                <a href="mailto:info@abgroupshipping.com" className="footer__contact-row">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="5" width="18" height="14" rx="2"/>
                    <path d="M3 7 L12 13 L21 7"/>
                  </svg>
                  <span>info@abgroupshipping.com</span>
                </a>
                <div className="footer__contact-row">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 22 s-7 -7 -7 -13 a7 7 0 1 1 14 0 c0 6 -7 13 -7 13 Z"/>
                    <circle cx="12" cy="9" r="2.5"/>
                  </svg>
                  <span>6124 NW 74 Ave · Miami, FL 33166</span>
                </div>
              </div>
            </div>
          </div>

          <div className="footer__bottom">
            <div className="footer__bottom-left">
              <span>{STR.footer.copy}</span>
              <span className="footer__sep">·</span>
              <span>{STR.footer.legalCerts}</span>
            </div>
            <div className="footer__legal">
              {STR.footer.legal.map((l, i) => (
                <a key={i} href={l.href}>{l.label}</a>
              ))}
            </div>
          </div>
        </div>
      </footer>
    );
  }

  // expose
  window.LandingStickyQuoteBar = StickyQuoteBar;
  window.LandingTrustBand   = TrustBand;
  window.LandingVideoSection = VideoSection;
  window.LandingWhyUs       = WhyUs;
  window.LandingHowItWorks  = HowItWorks;
  window.LandingPopularRoutes = PopularRoutes;
  window.LandingFAQ         = FAQ;
  window.LandingCtaStrip    = CtaStrip;
  window.LandingFooter      = LandingFooter;
})();