function ProductShowcase() {
  const { useState, useEffect, useRef } = React;
  const { t } = window.useT();
  const stats = [2].map((i) => ({
    value: t(`showcase.stat${i}.value`),
    unit: t(`showcase.stat${i}.unit`),
    label: t(`showcase.stat${i}.label`),
  }));

  const heroRef = useRef(null);
  const startedRef = useRef(false);
  const [animatedValue, setAnimatedValue] = useState(1500);
  const [isCounting, setIsCounting] = useState(false);

  useEffect(() => {
    if (!heroRef.current) return;
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reducedMotion) {
      setAnimatedValue(0);
      return;
    }
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !startedRef.current) {
        startedRef.current = true;
        setIsCounting(true);
        const startVal = 1500;
        const duration = 2800;
        const t0 = performance.now();
        const step = (now) => {
          const elapsed = now - t0;
          const p = Math.min(elapsed / duration, 1);
          const eased = 1 - Math.pow(1 - p, 5);
          setAnimatedValue(Math.round(startVal * (1 - eased)));
          if (p < 1) {
            requestAnimationFrame(step);
          } else {
            setAnimatedValue(0);
            setIsCounting(false);
          }
        };
        requestAnimationFrame(step);
        observer.disconnect();
      }
    }, { threshold: 0.7 });
    observer.observe(heroRef.current);
    return () => observer.disconnect();
  }, []);
  const mvRef = React.useRef(null);
  React.useEffect(() => {
    const mv = mvRef.current;
    if (!mv) return;

    // Inject dark cursor into model-viewer shadow DOM
    const injectCursor = () => {
      if (!mv.shadowRoot) return;
      const style = document.createElement('style');
      style.textContent = `:host, canvas, div { cursor: default !important; }`;
      mv.shadowRoot.appendChild(style);
    };
    // model-viewer may not be upgraded yet, wait for it
    if (mv.shadowRoot) {
      injectCursor();
    } else {
      customElements.whenDefined('model-viewer').then(injectCursor);
    }

    // Gentle rocking animation ±15° until user interacts
    let raf;
    let t0 = null;
    let hasInteracted = false;
    const BASE = 165, AMP = 15, SPEED = 0.55; // ~11s full cycle

    const rock = (ts) => {
      if (hasInteracted) return;
      if (!t0) t0 = ts;
      const az = BASE + AMP * Math.sin((ts - t0) / 1000 * SPEED);
      mv.setAttribute('camera-orbit', `${az.toFixed(2)}deg 75deg auto`);
      raf = requestAnimationFrame(rock);
    };
    raf = requestAnimationFrame(rock);

    const onInteract = (e) => {
      if (e.detail.source !== 'user-interaction') return;
      hasInteracted = true;
      cancelAnimationFrame(raf);
      mv.removeEventListener('camera-change', onInteract);
    };
    mv.addEventListener('camera-change', onInteract);

    return () => {
      cancelAnimationFrame(raf);
      mv.removeEventListener('camera-change', onInteract);
    };
  }, []);

  return (
    <section className="product-showcase" id="product">
      <div className="showcase-bg" aria-hidden="true">
        <div className="showcase-blob showcase-blob--1"/>
        <div className="showcase-blob showcase-blob--2"/>
        <div className="showcase-blob showcase-blob--3"/>
        <div className="showcase-blob showcase-blob--4"/>
      </div>
      <div className="showcase-grid--split">
        <div className="showcase-copy">
          <h2 className="showcase-headline">
            <span>{t('showcase.headline.l1')}</span>
            <span>{t('showcase.headline.l2')}</span>
            <span>{t('showcase.headline.l3')}</span>
            <span>{t('showcase.headline.l4')}</span>
          </h2>
        </div>
        <div className="showcase-product showcase-product--split">
          <model-viewer
            ref={mvRef}
            src="assets/dentson-product.glb?v=2"
            alt={t('showcase.alt')}
            class="showcase-model-viewer"
            camera-controls=""
            touch-action="pan-y"
            rotation-per-second="8deg"
            interaction-prompt="none"
            shadow-intensity="1"
            exposure="0.38"
            environment-image="neutral"
            loading="lazy"
            disable-zoom=""
            disable-pan=""
            field-of-view="7deg"
            min-field-of-view="7deg"
            max-field-of-view="7deg"
            camera-orbit="165deg 75deg auto"
          />
        </div>
      </div>
      <div className="showcase-bottom">
        <a href="/waitlist/" className="btn showcase-cta">{t('hero.cta')}</a>
      </div>
    </section>
  );
}

window.ProductShowcase = ProductShowcase;