// ============================================================
// HomeTestimonialsMobile — mobile-only ("Built on long-term performance")
// Ported verbatim from the design deliverable testimonials-mobile.html:
// a swipeable client-testimonial carousel with arrows, dots, and a compact
// horizontal client selector. Vanilla-JS logic preserved, run inside a
// useEffect scoped to the component root (no global ids / no document-wide
// side effects beyond the scroll-reveal, which is scoped to this section).
// Rendered (≤900px) by the GI-MOBILE-SWAP-V1 wrapper in app.html, replacing
// the desktop <TestimonialsVersionC />. Brand CSS vars come from the
// site-wide colors_and_type.css. The standalone's full-bleed body background
// (#EEF0ED) becomes the .tm-band wrapper background here.
// ============================================================
const HomeTestimonialsMobile = () => {
  const rootRef = React.useRef(null);

  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;

    // Content sourced verbatim from the live home-page testimonials data.
    var QUOTES = [
      { hero: '“Financial modelling translated directly into operating results.”',
        body: 'Green Integrations delivered a detailed financial model and system design that aligned with our production demands. The project was executed on time and performed as expected.',
        name: 'Robert Engel',  org: 'Cober Solutions',  sector: 'Print manufacturer · ON' },
      { hero: '“Reliable execution and long-term service support.”',
        body: 'Projects were completed efficiently, and ongoing support has remained strong. The team continues to deliver consistent service across multiple engagements.',
        name: 'Keith Lawless', org: 'Air Transat', sector: 'Aviation · ON' },
      { hero: '“Consistent delivery across multiple projects.”',
        body: 'We selected Green Integrations for their depth of analysis. Over several projects, they have consistently delivered strong results and remained a reliable partner.',
        name: 'Luigi De Serio', org: 'Axiom', sector: 'Manufacturing · ON' },
      { hero: '“Responsive and aligned with operational constraints.”',
        body: 'Green Integrations worked within our site requirements and timelines, delivering a professional and responsive experience from assessment through execution.',
        name: 'John Blanchard', org: 'Markland', sector: 'Commercial Real Estate · ON' },
      { hero: '“Delivered on schedule with minimal operational disruption.”',
        body: 'The team worked safely, efficiently, and around our operations. Execution was clean, organized, and aligned with the project timeline.',
        name: 'Mike Book', org: 'Richmond Steel', sector: 'Industrial · ON' },
      { hero: '“Clear guidance across multiple system options.”',
        body: 'Green Integrations presented multiple system approaches and worked with us to evaluate each against our operational requirements and budget. The process provided clarity on the right technology and path forward.',
        name: 'David Sliwin', org: 'Athletic Knit', sector: 'Sports apparel manufacturer · ON' },
    ];

    var track = root.querySelector('.tm-track');
    var dotsWrap = root.querySelector('.tm-dots');
    var selWrap = root.querySelector('.tm-selector');
    var prevBtn = root.querySelector('.tm-prev');
    var nextBtn = root.querySelector('.tm-next');
    var index = 0;

    function esc(s) {
      return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    // Build slides
    QUOTES.forEach(function (q, i) {
      var slide = document.createElement('div');
      slide.className = 'tm-slide';
      slide.setAttribute('role', 'group');
      slide.setAttribute('aria-roledescription', 'slide');
      slide.setAttribute('aria-label', (i + 1) + ' of ' + QUOTES.length + ' — ' + q.org);
      slide.innerHTML =
        '<article class="tm-card">' +
          '<div class="tm-label">Client testimonial</div>' +
          '<h3 class="tm-quote">' + esc(q.hero) + '</h3>' +
          '<p class="tm-body">' + esc(q.body) + '</p>' +
          '<div class="tm-attr">' +
            '<div class="tm-name">' + esc(q.name) + '</div>' +
            '<div class="tm-org">' + esc(q.org) + '</div>' +
            '<div class="tm-sector">' + esc(q.sector) + '</div>' +
          '</div>' +
        '</article>';
      track.appendChild(slide);

      // Dot
      var dot = document.createElement('button');
      dot.className = 'tm-dot';
      dot.type = 'button';
      dot.setAttribute('role', 'tab');
      dot.setAttribute('aria-label', q.org);
      dot.addEventListener('click', function () { go(i); });
      dotsWrap.appendChild(dot);

      // Selector chip
      var chip = document.createElement('button');
      chip.className = 'tm-chip';
      chip.type = 'button';
      chip.setAttribute('role', 'tab');
      chip.innerHTML =
        '<div class="tm-chip-org">' + esc(q.org) + '</div>' +
        '<div class="tm-chip-name">' + esc(q.name) + '</div>';
      chip.addEventListener('click', function () { go(i); });
      selWrap.appendChild(chip);
    });

    var dots = Array.prototype.slice.call(dotsWrap.children);
    var chips = Array.prototype.slice.call(selWrap.children);

    function render(animate) {
      if (!animate) track.classList.add('is-dragging');
      track.style.transform = 'translateX(' + (-index * 100) + '%)';
      if (!animate) { track.offsetHeight; track.classList.remove('is-dragging'); }
      dots.forEach(function (d, i) {
        d.classList.toggle('is-active', i === index);
        d.setAttribute('aria-selected', i === index ? 'true' : 'false');
      });
      chips.forEach(function (c, i) {
        c.classList.toggle('is-active', i === index);
        c.setAttribute('aria-selected', i === index ? 'true' : 'false');
      });
      // keep active chip in view
      var active = chips[index];
      if (active) {
        var l = active.offsetLeft, r = l + active.offsetWidth;
        var vl = selWrap.scrollLeft, vr = vl + selWrap.clientWidth;
        if (l < vl) selWrap.scrollTo({ left: l - 16, behavior: 'smooth' });
        else if (r > vr) selWrap.scrollTo({ left: r - selWrap.clientWidth + 16, behavior: 'smooth' });
      }
    }

    function go(i) {
      index = (i + QUOTES.length) % QUOTES.length;
      render(true);
    }

    prevBtn.addEventListener('click', function () { go(index - 1); });
    nextBtn.addEventListener('click', function () { go(index + 1); });

    function onKey(e) {
      if (e.key === 'ArrowLeft') go(index - 1);
      else if (e.key === 'ArrowRight') go(index + 1);
    }
    document.addEventListener('keydown', onKey);

    // ---------- Swipe ----------
    var startX = 0, startY = 0, dx = 0, dragging = false, decided = false, horiz = false;
    var vp = track.parentElement;

    function onTouchStart(e) {
      if (e.touches.length !== 1) return;
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
      dx = 0; dragging = true; decided = false; horiz = false;
    }
    function onTouchMove(e) {
      if (!dragging) return;
      var x = e.touches[0].clientX, y = e.touches[0].clientY;
      dx = x - startX;
      var dy = y - startY;
      if (!decided) {
        if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
          decided = true;
          horiz = Math.abs(dx) > Math.abs(dy);
        }
      }
      if (horiz) {
        e.preventDefault();
        track.classList.add('is-dragging');
        var pct = (dx / vp.clientWidth) * 100;
        // resistance at the ends
        if ((index === 0 && dx > 0) || (index === QUOTES.length - 1 && dx < 0)) pct *= 0.35;
        track.style.transform = 'translateX(' + (-index * 100 + pct) + '%)';
      }
    }
    function onTouchEnd() {
      if (!dragging) return;
      dragging = false;
      track.classList.remove('is-dragging');
      if (horiz && Math.abs(dx) > vp.clientWidth * 0.18) {
        go(dx < 0 ? index + 1 : index - 1);
      } else {
        render(true);
      }
    }
    vp.addEventListener('touchstart', onTouchStart, { passive: true });
    vp.addEventListener('touchmove', onTouchMove, { passive: false });
    vp.addEventListener('touchend', onTouchEnd);

    // initial
    render(false);
    function onResize() { render(false); }
    window.addEventListener('resize', onResize);

    // entrance reveal — opt into the hidden start-state only now that JS runs.
    // Scoped to this section's root rather than document.body.
    root.classList.add('reveal-ready');
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); }
      });
    }, { threshold: 0.12 });
    root.querySelectorAll('[data-reveal]').forEach(function (el) { io.observe(el); });

    return () => {
      document.removeEventListener('keydown', onKey);
      window.removeEventListener('resize', onResize);
      io.disconnect();
    };
  }, []);

  return (
    <>
    <div className="tm-band" ref={rootRef}>
      <section className="tm" aria-roledescription="testimonials" data-screen-label="Testimonials (mobile)">
        {/* Intro */}
        <header data-reveal>
          <div className="tm-eyebrow gi-eyebrow">Long-term partnerships</div>
          <h2 className="tm-title">Built on long-term performance.</h2>
          <p className="tm-sub">End-to-end delivery, strong financial outcomes, and partnerships that extend beyond commissioning.</p>
        </header>

        {/* Carousel */}
        <div className="tm-carousel" data-reveal>
          <div className="tm-viewport" aria-roledescription="carousel" aria-label="Client testimonials">
            <div className="tm-track"></div>
          </div>

          <div className="tm-controls">
            <button className="tm-arrow tm-prev" type="button" aria-label="Previous testimonial">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
            <div className="tm-dots" role="tablist" aria-label="Choose testimonial"></div>
            <button className="tm-arrow tm-next" type="button" aria-label="Next testimonial">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
            </button>
          </div>

          {/* Compact client selector */}
          <div className="tm-selector" role="tablist" aria-label="Clients"></div>
        </div>
      </section>
    </div>

    <style>{`
      .tm-band { background: #EEF0ED; }
      .tm-band, .tm-band * { box-sizing: border-box; }

      .tm {
        max-width: 460px;
        margin: 0 auto;
        padding: 64px 24px 72px;
      }

      .tm-eyebrow { color: var(--gi-color-green); margin-bottom: 18px; }
      .tm-title {
        font: var(--fw-medium) 34px/38px var(--ff-sans);
        letter-spacing: -0.026em;
        color: var(--gi-deep-ink);
        margin: 0;
        text-wrap: balance;
      }
      .tm-sub {
        font: var(--fw-regular) 16px/26px var(--ff-sans);
        color: var(--gi-slate);
        margin: 18px 0 0;
        text-wrap: pretty;
      }

      .tm-carousel { margin-top: 44px; }
      .tm-viewport { overflow: hidden; touch-action: pan-y; }
      .tm-track {
        display: flex;
        align-items: stretch;
        transition: transform 420ms cubic-bezier(0.2, 0, 0, 1);
        will-change: transform;
      }
      .tm-track.is-dragging { transition: none; }

      .tm-slide {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        display: flex;
      }
      .tm-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--gi-paper-white);
        border: 1px solid rgba(15, 33, 51, 0.10);
        box-shadow: 0 2px 4px rgba(15,33,51,0.04), 0 14px 40px -18px rgba(15,33,51,0.16);
        padding: 34px 28px 32px;
      }
      .tm-label {
        font-family: var(--ff-mono);
        font-size: 11px;
        line-height: 16px;
        font-weight: var(--fw-medium);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gi-sage-accent);
        margin-bottom: 22px;
      }
      .tm-quote {
        font: var(--fw-medium) 27px/34px var(--ff-sans);
        letter-spacing: -0.02em;
        color: var(--gi-deep-ink);
        margin: 0 0 22px;
        text-wrap: balance;
      }
      .tm-body {
        font: var(--fw-regular) 16px/26px var(--ff-sans);
        color: var(--gi-slate);
        margin: 0;
        text-wrap: pretty;
        flex: 1;
      }
      .tm-attr {
        margin-top: 32px;
        padding-top: 22px;
        border-top: 1px solid rgba(15, 33, 51, 0.14);
      }
      .tm-name {
        font: var(--fw-medium) 20px/26px var(--ff-sans);
        letter-spacing: -0.01em;
        color: var(--gi-deep-ink);
      }
      .tm-org {
        font: var(--fw-regular) 15px/22px var(--ff-sans);
        color: var(--gi-slate);
        margin-top: 4px;
      }
      .tm-sector {
        font-family: var(--ff-mono);
        font-size: 11px;
        line-height: 16px;
        font-weight: var(--fw-medium);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gi-sage-accent);
        margin-top: 12px;
      }

      .tm-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;
      }
      .tm-arrow {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid rgba(15, 33, 51, 0.18);
        border-radius: var(--r-2);
        color: var(--gi-deep-ink);
        cursor: pointer;
        transition: border-color var(--dur-base) var(--ease-standard),
                    background var(--dur-base) var(--ease-standard),
                    opacity var(--dur-base) var(--ease-standard);
      }
      .tm-arrow:hover { border-color: var(--gi-soft-green); }
      .tm-arrow:active { background: rgba(15, 33, 51, 0.04); }
      .tm-arrow svg { width: 18px; height: 18px; display: block; }

      .tm-dots { display: flex; align-items: center; gap: 9px; }
      .tm-dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: rgba(15, 33, 51, 0.20);
        cursor: pointer;
        transition: width var(--dur-base) var(--ease-standard),
                    background var(--dur-base) var(--ease-standard);
      }
      .tm-dot.is-active { width: 22px; background: var(--gi-soft-green); }

      .tm-selector {
        display: flex;
        gap: 10px;
        margin-top: 28px;
        padding-bottom: 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .tm-selector::-webkit-scrollbar { display: none; }
      .tm-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
        text-align: left;
        background: transparent;
        border: 1px solid rgba(15, 33, 51, 0.14);
        border-radius: var(--r-2);
        padding: 13px 16px;
        cursor: pointer;
        transition: border-color var(--dur-base) var(--ease-standard),
                    background var(--dur-base) var(--ease-standard);
      }
      .tm-chip.is-active { background: var(--gi-paper-white); border-color: var(--gi-soft-green); }
      .tm-chip-org {
        font: var(--fw-medium) 14px/19px var(--ff-sans);
        color: var(--gi-deep-ink);
        white-space: nowrap;
      }
      .tm-chip-name {
        font: var(--fw-regular) 12.5px/17px var(--ff-sans);
        color: var(--gi-slate);
        margin-top: 2px;
        white-space: nowrap;
      }

      /* entrance reveal — start-state applies only after JS adds .reveal-ready */
      @media (prefers-reduced-motion: no-preference) {
        .tm-band.reveal-ready [data-reveal] {
          opacity: 0;
          transform: translateY(14px);
          transition: opacity 480ms var(--ease-standard), transform 480ms var(--ease-standard);
        }
        .tm-band.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
        .tm-band.reveal-ready [data-reveal]:nth-child(2) { transition-delay: 70ms; }
      }

      @media (max-width: 360px) {
        .tm { padding: 56px 20px 64px; }
        .tm-title { font-size: 31px; line-height: 36px; }
        .tm-quote { font-size: 25px; line-height: 32px; }
        .tm-card { padding: 30px 24px 28px; }
      }
    `}</style>
    </>
  );
};

Object.assign(window, { HomeTestimonialsMobile });