/* Sections — ported from src/components (Swiper replaced with lightweight equivalents) */
const { useState: uS, useEffect: uE, useRef: uR } = React;

function useReveal(threshold) {
  const ref = uR(null);
  const [v, setV] = uS(false);
  uE(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setV(true); }, { threshold });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, v];
}

/* ─── ProductShowcase — Discover Our Latest Creation ─── */
const PS_SLIDES = [
  {
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_33SVBpJFmKSSU8dzgpQzJHDdXyd/hf_20260614_195631_cdaa7713-6a34-4c0a-954a-339c3455a9d3.mp4',
    images: [
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-6.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-7.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-8.webp',
    ],
  },
  {
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_33SVBpJFmKSSU8dzgpQzJHDdXyd/hf_20260614_194710_1589ca6c-1c06-4f71-b758-43ba12131b8f.mp4',
    images: [
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/1.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/2.webp',
    ],
  },
  {
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_33SVBpJFmKSSU8dzgpQzJHDdXyd/hf_20260614_200537_01c3429a-2ca8-4728-a170-f752782ef817.mp4',
    images: [
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-1.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-1-1.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-5.webp',
    ],
  },
];

function ProductShowcaseBackup() {
  const [slide, setSlide] = uS(0);
  const [thumb, setThumb] = uS(0);
  const [ref, visible] = useReveal(0.08);
  const data = PS_SLIDES[slide];

  function go(dir) {
    setSlide(s => (s + dir + PS_SLIDES.length) % PS_SLIDES.length);
    setThumb(0);
  }

  return (
    <section ref={ref} style={{
      background: '#fff', padding: 'clamp(60px,8vw,100px) clamp(20px,6vw,80px) clamp(28px,4vw,48px)',
      position: 'relative', overflow: 'hidden', fontFamily: "'Poppins', sans-serif",
    }}>
      {/* large faint DOMS watermark top-right */}
      <span aria-hidden="true" style={{
        position: 'absolute', top: 'clamp(12px,3vw,40px)', right: 'clamp(8px,3vw,48px)', zIndex: 0,
        fontSize: 160, fontWeight: 900, lineHeight: 1,
        color: 'rgba(2,82,138,0.06)', letterSpacing: '-6px',
        userSelect: 'none', pointerEvents: 'none', whiteSpace: 'nowrap',
      }}>DOMS</span>

      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex', gap: 'clamp(40px,5vw,72px)', alignItems: 'center', flexWrap: 'wrap',
        position: 'relative', zIndex: 1,
        opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(24px)',
        transition: 'opacity 0.7s ease, transform 0.7s ease',
      }}>
        {/* LEFT 55% — video frame + overlapping product + thumbnails */}
        <div style={{ flex: '0 1 400px', minWidth: 0 }}>
          <div style={{ position: 'relative', padding: '30px 30px 0 30px', width: 'fit-content', maxWidth: '100%' }}>
            {/* yellow L-bracket — sized to portrait frame */}
            <div style={{ position: 'absolute', top: 0, left: 0, height: 8, width: '55%', background: '#FDC327', borderRadius: 2, zIndex: 3 }} />
            <div style={{ position: 'absolute', top: 0, left: 0, width: 8, height: '78%', background: '#FDC327', borderRadius: 2, zIndex: 3 }} />

            {/* video inside portrait 9:16 frame */}
            <div style={{ position: 'relative' }}>
              <div style={{
                position: 'relative', width: 340, height: 600, maxWidth: '100%',
                borderRadius: 14, overflow: 'hidden', background: '#EBF5FF',
                boxShadow: '0 18px 50px rgba(2,82,138,0.14)',
              }}>
                <video key={data.video} src={data.video}
                  autoPlay muted loop playsInline
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>

              {/* overlapping product image, bottom-right of frame */}
              <div style={{
                position: 'absolute', bottom: -22, right: -18, zIndex: 4,
                width: 'clamp(150px,26%,210px)', height: 'clamp(150px,26%,210px)',
                animation: 'doms-float 3s ease-in-out infinite',
              }}>
                {data.images.map((src, i) => (
                  <img key={src} src={src} alt="DOMS featured product"
                    style={{
                      position: 'absolute', inset: 0, width: '100%', height: '100%',
                      objectFit: 'contain', opacity: i === thumb ? 1 : 0,
                      transition: 'opacity 0.5s ease',
                      filter: 'drop-shadow(0 12px 24px rgba(0,0,0,0.18))',
                      pointerEvents: 'none',
                    }} />
                ))}
              </div>

              {/* slide arrows — right side, vertically centered */}
              <div style={{
                position: 'absolute', top: '50%', right: 14, transform: 'translateY(-50%)',
                display: 'flex', flexDirection: 'row', gap: 10, zIndex: 5,
              }}>
                {[-1, 1].map(dir => (
                  <button key={dir} onClick={() => go(dir)} aria-label={dir === -1 ? 'Previous slide' : 'Next slide'}
                    style={{
                      width: 42, height: 42, borderRadius: '50%', border: 'none', cursor: 'pointer',
                      background: '#02528A', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      boxShadow: '0 4px 14px rgba(2,82,138,0.35)', transition: 'background 0.2s, transform 0.2s',
                    }}
                    onMouseEnter={e => { e.currentTarget.style.background = '#013d6e'; e.currentTarget.style.transform = 'scale(1.08)'; }}
                    onMouseLeave={e => { e.currentTarget.style.background = '#02528A'; e.currentTarget.style.transform = 'none'; }}>
                    <svg width="15" height="15" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 14 14">
                      {dir === -1 ? <path d="M9 2L4 7l5 5" /> : <path d="M5 2l5 5-5 5" />}
                    </svg>
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* thumbnails */}
          <div style={{ display: 'flex', gap: 14, marginTop: 30, paddingLeft: 30 }}>
            {data.images.map((src, i) => (
              <button key={src} onClick={() => setThumb(i)} aria-label={`Product view ${i + 1}`}
                style={{
                  width: 88, height: 72, padding: 6, cursor: 'pointer',
                  border: `2px solid ${i === thumb ? '#02528A' : '#EBF5FF'}`,
                  borderRadius: 10, background: '#fff', overflow: 'hidden',
                  transition: 'border-color 0.2s',
                }}
                onMouseEnter={e => { if (i !== thumb) e.currentTarget.style.borderColor = '#FDC327'; }}
                onMouseLeave={e => { if (i !== thumb) e.currentTarget.style.borderColor = '#EBF5FF'; }}>
                <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
              </button>
            ))}
          </div>

          {/* slide indicator dots */}
          <div style={{ display: 'flex', gap: 10, marginTop: 22, paddingLeft: 30, alignItems: 'center' }}>
            {PS_SLIDES.map((_, i) => (
              <button key={i} onClick={() => { setSlide(i); setThumb(0); }} aria-label={`Go to slide ${i + 1}`}
                style={{
                  width: i === slide ? 26 : 10, height: 10, padding: 0, border: 'none', cursor: 'pointer',
                  borderRadius: 5, background: i === slide ? '#02528A' : '#cdddec',
                  transition: 'width 0.3s ease, background 0.3s ease',
                }} />
            ))}
          </div>
        </div>

        {/* RIGHT 45% — copy */}
        <div style={{ flex: '1 1 360px', minWidth: 0, position: 'relative' }}>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <p style={{ fontSize: 11, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#FDC327', marginBottom: 14 }}>
              Embrace the New
            </p>
            <h2 style={{ fontSize: 'clamp(32px,4vw,46px)', fontWeight: 900, color: '#02528A', lineHeight: 1.1, marginBottom: 20 }}>
              Discover Our<br />Latest Creation
            </h2>
            <p style={{ fontSize: 15, color: '#64748b', lineHeight: 1.8, maxWidth: 400, marginBottom: 32 }}>
              Explore DOMS' latest collection featuring innovative, fun, and thoughtfully
              designed products that inspire creativity and learning.
            </p>
            <a href="products.html#all" rel="noreferrer"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: '#02528A', color: '#fff', padding: '14px 28px',
                borderRadius: 8, fontSize: 15, fontWeight: 700, textDecoration: 'none',
                transition: 'background 0.2s, transform 0.2s',
              }}
              onMouseEnter={e => { e.currentTarget.style.background = '#013d6e'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#02528A'; e.currentTarget.style.transform = 'none'; }}>
              Explore Products →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── ProductShowcase v2 — Discover Our Latest Creation (editorial) ─── */
const NPS_SLIDES = [
  {
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_33SVBpJFmKSSU8dzgpQzJHDdXyd/hf_20260614_195631_cdaa7713-6a34-4c0a-954a-339c3455a9d3.mp4',
    images: [
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-6.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-7.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-8.webp',
    ],
    eyebrow: 'Writing Instruments',
    name: 'DOMS Inxon Ballpoint',
    highlight: 'Inxon',
    bullets: ['0.7mm needle tip for precision', 'Smooth vivid ink flow technology', 'Comfortable ergonomic grip'],
    link: 'products.html#product/doms-inxon-ballpoint-pens-10-pc-pack',
  },
  {
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_33SVBpJFmKSSU8dzgpQzJHDdXyd/hf_20260614_194710_1589ca6c-1c06-4f71-b758-43ba12131b8f.mp4',
    images: [
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/1.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/2.webp',
    ],
    eyebrow: 'Premium Pencils',
    name: 'DOMS Zillion Pencil',
    highlight: 'Zillion',
    bullets: ['X-Tra Super Dark graphite', 'Satin smooth writing finish', 'Includes sharpener and eraser'],
    link: 'products.html#cat/pencils-accessories',
  },
  {
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_33SVBpJFmKSSU8dzgpQzJHDdXyd/hf_20260614_200537_01c3429a-2ca8-4728-a170-f752782ef817.mp4',
    images: [
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-1.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-1-1.webp',
      'https://domsindia.com/wp-content/uploads/2025/06/Untitled-design-5.webp',
    ],
    eyebrow: 'Art Supplies',
    name: 'DOMS Aqua Colour Cakes',
    highlight: 'Aqua',
    bullets: ['12+6 refillable colour shades', 'Superior pigment quality', 'Includes premium brush'],
    link: 'products.html#cat/drawing-colouring',
  },
];
const NPS_PAD = n => String(n + 1).padStart(2, '0');

function NpsName({ name, word }) {
  const idx = word ? name.indexOf(word) : -1;
  if (idx < 0) return name;
  return (
    <>{name.slice(0, idx)}<span style={{ borderBottom: '3px solid #FDC327', paddingBottom: 2 }}>{word}</span>{name.slice(idx + word.length)}</>
  );
}

function ProductShowcase() {
  const [slide, setSlide] = uS(0);   // active slide (video + text)
  const [shown, setShown] = uS(0);   // slide whose text is currently rendered
  const [phase, setPhase] = uS('in');// 'in' | 'out'
  const [thumb, setThumb] = uS(0);   // overlap image index (per slide, independent)
  const [wipeN, setWipeN] = uS(0);   // increments per slide change to replay the shutter
  const [paused, setPaused] = uS(false); // visitor stopped auto-advance to watch the video
  const [isMob, setIsMob] = uS(typeof window !== 'undefined' && window.innerWidth <= 820);
  uE(() => {
    const onR = () => setIsMob(window.innerWidth <= 820);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  const [ref, visible] = useReveal(0.15);
  const vidRefs = uR([]);
  const data = NPS_SLIDES[shown];

  // text + video swap under cover of the shutter when the active slide changes
  uE(() => {
    if (slide === shown) return;
    setPhase('out');
    setWipeN(n => n + 1);
    const t = setTimeout(() => { setShown(slide); setThumb(0); setPhase('in'); }, 450);
    return () => clearTimeout(t);
  }, [slide]);

  // play only the shown video (from 0); pause the rest
  uE(() => {
    vidRefs.current.forEach((v, i) => {
      if (!v) return;
      if (i === shown) { try { v.currentTime = 0; } catch (e) {} const p = v.play(); if (p && p.catch) p.catch(() => {}); }
      else v.pause();
    });
  }, [shown]);

  // auto-advance every 6s (resets on slide change / visibility; halted when the visitor pauses)
  uE(() => {
    if (!visible || paused) return;
    const t = setTimeout(() => setSlide(s => (s + 1) % NPS_SLIDES.length), 6000);
    return () => clearTimeout(t);
  }, [slide, visible, paused]);

  const EASE = 'cubic-bezier(0.16,1,0.3,1)';
  const textStyle = phase === 'out'
    ? { opacity: 0, transform: 'translateY(-20px)', transition: 'opacity 0.3s ease-in, transform 0.3s ease-in' }
    : { animation: 'pt-text-in 0.5s ease-out 0.25s both' };
  // staggered entrance for right-panel elements (translateX), fires once on scroll-in
  const enter = delay => ({
    opacity: visible ? 1 : 0,
    transform: visible ? 'translateX(0)' : 'translateX(30px)',
    transition: `opacity 0.7s ${EASE} ${delay}s, transform 0.7s ${EASE} ${delay}s`,
  });

  return (
    <section ref={ref} id="discover-section" style={{
      background: '#F7FAFF', padding: isMob ? '30px 18px 34px' : 'clamp(48px,6vw,80px)', position: 'relative', overflow: 'hidden',
      fontFamily: "'Poppins', sans-serif", minHeight: isMob ? 0 : 760, borderLeft: '4px solid #02528A',
    }}>
      {/* DOMS watermark */}
      <span aria-hidden="true" style={{
        position: 'absolute', top: -20, right: -20, zIndex: 0,
        fontSize: 180, fontWeight: 900, lineHeight: 1, color: 'rgba(2,82,138,0.045)',
        letterSpacing: '-8px', userSelect: 'none', pointerEvents: 'none', whiteSpace: 'nowrap',
      }}>DOMS</span>

      {/* slide number */}
      <div style={{ position: 'absolute', top: 'clamp(28px,5vw,80px)', right: 'clamp(24px,5vw,80px)', zIndex: 55 }}>
        <span style={{ fontSize: 18, fontWeight: 900, color: '#FDC327', letterSpacing: '0.1em' }}>{NPS_PAD(slide)}</span>
        <span style={{ fontSize: 13, color: 'rgba(2,82,138,0.3)', letterSpacing: '0.1em' }}> — {NPS_PAD(NPS_SLIDES.length - 1)}</span>
      </div>

      <div style={{
        maxWidth: 1240, margin: '0 auto', position: 'relative', zIndex: 50,
        display: 'grid', gridTemplateColumns: isMob ? '1fr' : 'minmax(0,60%) minmax(0,40%)',
        gap: isMob ? 18 : 60, alignItems: 'center',
      }}>
        {/* ── LEFT 60% ── */}
        <div style={{
          position: 'relative',
          opacity: visible ? 1 : 0,
          transform: visible ? 'translateX(0)' : 'translateX(-40px)',
          transition: `opacity 0.8s ${EASE}, transform 0.8s ${EASE}`,
        }}>
          <div style={{ position: 'relative', width: 'fit-content', maxWidth: '100%', margin: isMob ? '0 auto' : undefined }}>
            {/* yellow L-bracket */}
            <div style={{ position: 'absolute', top: -16, left: -16, width: '55%', height: 12, background: '#FDC327', borderRadius: 2, zIndex: 2, pointerEvents: 'none' }} />
            <div style={{ position: 'absolute', top: -16, left: -16, width: 12, height: '75%', background: '#FDC327', borderRadius: 2, zIndex: 2, pointerEvents: 'none' }} />

            {/* video container (9:16) */}
            <div style={{ position: 'relative', zIndex: 1, borderRadius: 16, overflow: 'hidden', width: isMob ? 'min(178px,50vw)' : 'min(360px,100%)' }}>
              {NPS_SLIDES.map((s, i) => (
                <video key={s.video} src={s.video} ref={el => vidRefs.current[i] = el}
                  autoPlay={i === 0} muted loop playsInline preload="auto"
                  style={{
                    width: '100%', aspectRatio: '9 / 16', objectFit: 'cover', borderRadius: 16,
                    display: i === shown ? 'block' : 'none',
                  }} />
              ))}
            </div>

            {/* product overlap image with 3D tilt */}
            <div style={{
              position: 'absolute', bottom: -18, right: isMob ? -8 : -24, zIndex: 3,
              width: isMob ? 94 : 180, height: isMob ? 116 : 220, borderRadius: 14, background: '#fff', padding: 10,
              border: '2px solid rgba(2,82,138,0.08)',
              boxShadow: '0 20px 60px rgba(2,82,138,0.22)',
              transform: 'perspective(800px) rotateY(-8deg) rotateX(4deg)',
              transition: 'transform 0.4s ease',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'perspective(800px) rotateY(-4deg) rotateX(2deg) scale(1.03)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'perspective(800px) rotateY(-8deg) rotateX(4deg)'; }}>
              {NPS_SLIDES[shown].images.map((src, i) => (
                <img key={src} src={src} alt="DOMS product"
                  style={{
                    position: 'absolute', inset: 10, width: 'calc(100% - 20px)', height: 'calc(100% - 20px)',
                    objectFit: 'contain', opacity: i === thumb ? 1 : 0, transition: 'opacity 0.4s ease', pointerEvents: 'none',
                  }} />
              ))}
            </div>
          </div>

          {/* thumbnails — switch overlap image only */}
          <div style={{ display: 'flex', gap: 10, marginTop: isMob ? 22 : 48, justifyContent: isMob ? 'center' : 'flex-start' }}>
            {data.images.map((src, i) => (
              <button key={src} onClick={() => setThumb(i)} aria-label={`View ${i + 1}`}
                style={{
                  width: isMob ? 54 : 88, height: isMob ? 54 : 88, padding: isMob ? 6 : 8, cursor: 'pointer', borderRadius: 10,
                  border: `2px solid ${i === thumb ? '#02528A' : 'transparent'}`,
                  background: i === thumb ? '#fff' : '#EBF5FF',
                  boxShadow: i === thumb ? '0 4px 16px rgba(2,82,138,0.15)' : 'none',
                  transition: 'all 0.25s',
                }}>
                <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
              </button>
            ))}
          </div>
        </div>

        {/* ── RIGHT 40% ── */}
        <div style={{ display: 'flex', flexDirection: 'column', paddingLeft: isMob ? 0 : 20, alignItems: isMob ? 'center' : 'flex-start', textAlign: isMob ? 'center' : 'left' }}>
          <div key={shown} style={textStyle}>
            <p style={{ ...enter(0.1), display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, fontWeight: 800, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#FDC327', marginBottom: isMob ? 10 : 16 }}>
              <span style={{ width: 22, height: 3, background: '#FDC327', display: 'inline-block', flexShrink: 0 }} />
              {data.eyebrow}
            </p>
            <h2 style={{ ...enter(0.2), fontSize: isMob ? 'clamp(23px,6.4vw,28px)' : 'clamp(38px,4.4vw,52px)', fontWeight: 900, color: '#02528A', lineHeight: 1.05, letterSpacing: '-0.025em', marginBottom: isMob ? 12 : 20 }}>
              <NpsName name={data.name} word={data.highlight} />
            </h2>
            <div style={{ ...enter(0.3), display: 'flex', flexDirection: 'column', gap: isMob ? 8 : 12, marginBottom: isMob ? 20 : 32 }}>
              {data.bullets.map(b => (
                <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: isMob ? 13.5 : 15, color: '#64748b', lineHeight: 1.45 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FDC327', flexShrink: 0 }} />
                  {b}
                </div>
              ))}
            </div>
            <a href={NPS_SLIDES[shown].link || 'products.html#all'} rel="noreferrer"
              style={{
                ...enter(0.4),
                display: 'inline-flex', alignItems: 'center', gap: 8, width: 'fit-content',
                background: '#02528A', color: '#fff', borderRadius: 8, padding: isMob ? '12px 22px' : '14px 28px',
                fontSize: 14, fontWeight: 700, textDecoration: 'none', marginBottom: isMob ? 0 : 40,
                alignSelf: isMob ? 'center' : 'flex-start',
              }}
              onMouseEnter={e => { e.currentTarget.style.background = '#013a63'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 10px 28px rgba(2,82,138,0.28)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#02528A'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
              Explore Product →
            </a>
          </div>
        </div>
      </div>

      {/* progress bar + dots + stop control */}
      <div style={{
        position: 'absolute', bottom: 32, left: 'clamp(24px,5vw,80px)', right: 'clamp(24px,5vw,80px)',
        zIndex: 55, display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <button onClick={() => setPaused(p => !p)} aria-label={paused ? 'Resume auto-play' : 'Stop and watch the video'}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 7, flexShrink: 0, cursor: 'pointer',
            background: paused ? '#02528A' : 'transparent', color: paused ? '#fff' : '#02528A',
            border: '1.5px solid #02528A', borderRadius: 20, padding: '6px 14px',
            fontFamily: "'Poppins', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '0.02em',
            transition: 'all 0.2s',
          }}>
          {paused
            ? <svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><path d="M2 1.5l8 4.5-8 4.5z" /></svg>
            : <svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><rect x="2" y="1.5" width="3" height="9" rx="1" /><rect x="7" y="1.5" width="3" height="9" rx="1" /></svg>}
          {paused ? 'Play' : 'Stop'}
        </button>
        <div style={{ flex: 1, height: 3, background: 'rgba(2,82,138,0.1)', borderRadius: 2, overflow: 'hidden' }}>
          <div key={slide}
            style={{
              height: '100%', width: '100%', background: '#FDC327', borderRadius: 2,
              transformOrigin: 'left',
              animation: visible ? 'pt-progress 6s linear forwards' : 'none',
              animationPlayState: paused ? 'paused' : 'running',
            }} />
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {NPS_SLIDES.map((_, i) => (
            <button key={i} onClick={() => setSlide(i)} aria-label={`Go to slide ${i + 1}`}
              style={{
                width: i === slide ? 24 : 8, height: 8, padding: 0, border: 'none', cursor: 'pointer',
                borderRadius: i === slide ? 4 : '50%',
                background: i === slide ? '#FDC327' : 'rgba(2,82,138,0.2)',
                transition: 'all 0.3s',
              }} />
          ))}
        </div>
      </div>

      {/* full-section DOMS shutter — masks the whole section while the product swaps */}
      <div key={wipeN} aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 65, background: '#02528A',
        display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none',
        boxShadow: 'inset -8px 0 0 0 #FDC327',
        transform: wipeN === 0 ? 'translateX(-100%)' : undefined,
        animation: wipeN > 0 ? 'pt-shutter 1s cubic-bezier(0.7,0,0.3,1) both' : 'none',
      }}>
        <span style={{
          fontFamily: "'Poppins', sans-serif", fontWeight: 900, color: '#fff',
          fontSize: 'clamp(60px,11vw,150px)', letterSpacing: '-0.04em', lineHeight: 1,
          borderBottom: '6px solid #FDC327', paddingBottom: 6,
          animation: wipeN > 0 ? 'pt-shutter-word 1s ease both' : 'none',
        }}>DOMS</span>
      </div>
    </section>
  );
}

/* ─── About — Reaching New Heights ─── */
const ABT_STATS = [
  { to: 50,   suffix: '+',  label: 'Years' },
  { to: 50,   suffix: '+',  label: 'Countries' },
  { to: 1500, suffix: '+',  label: 'Products' },
  { to: 50,   suffix: 'M+', label: 'Customers' },
];
const ABT_STARS = Array.from({ length: 60 }, (_, i) => {
  const rnd = n => { const x = Math.sin((i + 1) * n) * 10000; return x - Math.floor(x); };
  return {
    top:  (rnd(12.9) * 88 + 3).toFixed(1) + '%',
    left: (rnd(78.2) * 94 + 3).toFixed(1) + '%',
    s:    +(rnd(3.7) * 2.2 + 1).toFixed(1),
    d:    +(rnd(5.1) * 4).toFixed(2),
    o:    +(rnd(9.3) * 0.5 + 0.35).toFixed(2),
  };
});
// ── "Reaching New Heights" ascent: each stat becomes a milestone on a climbing path ──
function abtSmooth(pts) {
  if (pts.length < 2) return '';
  let d = `M ${pts[0][0]} ${pts[0][1]}`;
  for (let i = 0; i < pts.length - 1; i++) {
    const p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || p2;
    const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
    const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
    d += ` C ${c1x.toFixed(2)} ${c1y.toFixed(2)}, ${c2x.toFixed(2)} ${c2y.toFixed(2)}, ${p2[0]} ${p2[1]}`;
  }
  return d;
}
const ABT_POS  = [[10, 86], [33, 64], [55, 42], [78, 20]]; // climb-zone %, bottom-left → top-right
const ABT_SIDE = ['r', 'l', 'l', 'l'];                      // which side the stat chip sits
const ABT_MILESTONES = ABT_STATS.map((s, i) => ({ ...s, x: ABT_POS[i][0], y: ABT_POS[i][1], side: ABT_SIDE[i] }));
const ABT_APEX  = [88, 7];
const ABT_TRAIL = abtSmooth([...ABT_POS, ABT_APEX]);
const ABT_STOPS = [[0, 97], ...ABT_POS, ABT_APEX]; // rocket rest points: base → each milestone → apex

function CountUp({ to, suffix, run }) {
  const [n, setN] = uS(0);
  uE(() => {
    if (!run) return;
    let raf, start;
    const dur = 1600;
    const tick = t => {
      if (!start) start = t;
      const p = Math.min((t - start) / dur, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(eased * to));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [run, to]);
  return <span>{n.toLocaleString()}{suffix}</span>;
}

const ABT_EASE = 'cubic-bezier(0.16,1,0.3,1)';

function About() {
  const [ref, v] = useReveal(0.18);
  const [stage, setStage] = uS(0); // 0=base, 1..4=reached milestone, 5=apex
  uE(() => {
    if (!v) { setStage(0); return; }
    let s = 0, tid;
    const tick = () => { s += 1; setStage(s); if (s < ABT_STOPS.length - 1) tid = setTimeout(tick, 600); };
    tid = setTimeout(tick, 650);
    return () => clearTimeout(tid);
  }, [v]);
  const rocket = ABT_STOPS[Math.min(stage, ABT_STOPS.length - 1)];

  const enter = delay => ({
    opacity: v ? 1 : 0,
    transform: v ? 'translateY(0)' : 'translateY(18px)',
    transition: `opacity 0.7s ${ABT_EASE} ${delay}s, transform 0.7s ${ABT_EASE} ${delay}s`,
  });
  return (
    <section ref={ref} style={{
      position: 'relative', overflow: 'hidden', fontFamily: "'Poppins', sans-serif",
      padding: 'clamp(48px,6vw,80px) clamp(22px,6vw,80px)',
      background: 'linear-gradient(158deg, #0c3f72 0%, #0a2a57 44%, #081634 100%)',
    }}>
      {/* daylight glow top-left → deep space bottom-right ("leaving the atmosphere") */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(46% 52% at 20% 15%, rgba(78,154,224,0.34), transparent 70%)', pointerEvents: 'none' }} />
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 95% at 92% 112%, rgba(4,9,28,0.72), transparent 55%)', pointerEvents: 'none' }} />

      {/* full-bleed star field */}
      {ABT_STARS.map((st, i) => (
        <span key={i} aria-hidden="true" style={{
          position: 'absolute', top: st.top, left: st.left, width: st.s, height: st.s, borderRadius: '50%',
          background: '#fff', boxShadow: st.s > 2.4 ? '0 0 6px rgba(255,255,255,0.8)' : 'none',
          animation: `abt-twinkle ${2.6 + (i % 5) * 0.5}s ease-in-out ${st.d}s infinite`, opacity: st.o,
        }} />
      ))}

      {/* rotating orbit rings, lower-left */}
      <div aria-hidden="true" style={{ position: 'absolute', bottom: -170, left: -170, width: 440, height: 440, pointerEvents: 'none', animation: 'abt-orbit 70s linear infinite' }}>
        <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: '1px dashed rgba(253,195,39,0.15)' }} />
        <div style={{ position: 'absolute', inset: 64, borderRadius: '50%', border: '1px dashed rgba(255,255,255,0.07)' }} />
      </div>

      {/* faint brand watermark */}
      <span aria-hidden="true" style={{
        position: 'absolute', bottom: -42, left: -12, zIndex: 0,
        fontSize: 190, fontWeight: 900, lineHeight: 1, color: 'rgba(255,255,255,0.035)',
        letterSpacing: '-9px', userSelect: 'none', pointerEvents: 'none', whiteSpace: 'nowrap',
      }}>DOMS</span>

      <div style={{ maxWidth: 1240, margin: '0 auto', position: 'relative', zIndex: 2, display: 'flex', alignItems: 'center', gap: 'clamp(36px,5vw,72px)', flexWrap: 'wrap', minHeight: 'clamp(440px,46vw,560px)' }}>
        {/* LEFT — copy, over the stars */}
        <div className="rkt-front" style={{ flex: '1 1 360px', minWidth: 0 }}>
          <p style={{ ...enter(0.05), display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, fontWeight: 800, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#FDC327', marginBottom: 16 }}>
            <span style={{ width: 22, height: 3, background: '#FDC327', display: 'inline-block', flexShrink: 0 }} />
            About DOMS
          </p>
          <h2 style={{ ...enter(0.13), fontSize: 'clamp(34px,4.8vw,54px)', fontWeight: 900, color: '#fff', lineHeight: 1.05, letterSpacing: '-0.02em', marginBottom: 20 }}>
            Reaching New{' '}
            <span style={{ position: 'relative', whiteSpace: 'nowrap' }}>
              Heights
              <span aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, bottom: 4, height: 6, background: '#FDC327', borderRadius: 3, zIndex: -1 }} />
            </span>
          </h2>
          <p style={{ ...enter(0.2), fontSize: 15, color: 'rgba(255,255,255,0.72)', lineHeight: 1.8, maxWidth: 430, marginBottom: 28 }}>
            A trusted partner around the globe, DOMS is a pioneer in stationery
            manufacturing catering to all your stationery needs.
          </p>
          <a href="about-us.html" rel="noreferrer"
            style={{
              ...enter(0.27), display: 'inline-flex', alignItems: 'center', gap: 8,
              background: '#FDC327', color: '#0a2550', borderRadius: 8, padding: '13px 28px',
              fontSize: 14, fontWeight: 800, textDecoration: 'none',
              transition: 'transform 0.2s, box-shadow 0.2s, background 0.2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 30px rgba(253,195,39,0.35)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
            Read Our Story →
          </a>
        </div>

        {/* RIGHT — the climb, living directly on the sky (no box) */}
        <div style={{ flex: '1 1 520px', minWidth: 0, position: 'relative', height: 'clamp(360px,40vw,468px)' }}>
          {/* trail */}
          <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 1, opacity: v ? 1 : 0, transition: 'opacity 0.8s ease 0.3s', overflow: 'visible' }}>
            <path d={ABT_TRAIL} fill="none" stroke="#FDC327" strokeWidth="6" strokeOpacity="0.13" strokeLinecap="round" vectorEffect="non-scaling-stroke" style={{ filter: 'blur(3px)' }} />
            <path d={ABT_TRAIL} fill="none" stroke="#FDC327" strokeWidth="2" strokeOpacity="0.68" strokeLinecap="round" strokeDasharray="0.4 4.4" vectorEffect="non-scaling-stroke" />
          </svg>

          {/* milestone nodes + stat chips */}
          {ABT_MILESTONES.map((m, i) => {
            const reached = stage >= i + 1;
            const isCurrent = stage === i + 1;
            return (
              <div key={m.label}>
                <div style={{ position: 'absolute', left: `${m.x}%`, top: `${m.y}%`, transform: 'translate(-50%,-50%)', zIndex: 2, pointerEvents: 'none' }}>
                  <span style={{
                    position: 'absolute', left: '50%', top: '50%', width: 34, height: 34, borderRadius: '50%',
                    transform: 'translate(-50%,-50%)', border: '1.5px solid #FDC327',
                    opacity: isCurrent ? 0.9 : 0, animation: isCurrent ? 'abt-pulse 2.2s ease-in-out infinite' : 'none',
                  }} />
                  <span style={{
                    display: 'block', width: reached ? 14 : 9, height: reached ? 14 : 9, borderRadius: '50%',
                    background: reached ? '#FDC327' : 'rgba(255,255,255,0.25)',
                    boxShadow: reached ? '0 0 16px rgba(253,195,39,0.85)' : 'none',
                    transition: 'all 0.45s cubic-bezier(0.16,1,0.3,1)',
                  }} />
                </div>
                <div style={{
                  position: 'absolute', left: `${m.x}%`, top: `${m.y}%`, zIndex: 3, pointerEvents: 'none',
                  transform: `${m.side === 'r' ? 'translate(24px,-50%)' : 'translate(calc(-100% - 24px),-50%)'} scale(${reached ? 1 : 0.8})`,
                  opacity: reached ? 1 : 0,
                  transition: `opacity 0.5s ease ${reached ? 0.1 : 0}s, transform 0.55s cubic-bezier(0.16,1,0.3,1)`,
                }}>
                  <div style={{
                    background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(253,195,39,0.4)',
                    borderRadius: 14, padding: '10px 16px', backdropFilter: 'blur(7px)', WebkitBackdropFilter: 'blur(7px)',
                    whiteSpace: 'nowrap', boxShadow: '0 10px 26px rgba(0,0,0,0.3)',
                  }}>
                    <div style={{ fontSize: 'clamp(24px,2.6vw,34px)', fontWeight: 900, color: '#fff', lineHeight: 1, letterSpacing: '-0.01em' }}>
                      <CountUp to={m.to} suffix={m.suffix} run={reached} />
                    </div>
                    <div style={{ fontSize: 11, fontWeight: 700, color: '#FDC327', marginTop: 6, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{m.label}</div>
                  </div>
                </div>
              </div>
            );
          })}

          {/* DOMMY — travels stop to stop up the trail */}
          <div style={{
            position: 'absolute', left: `${rocket[0]}%`, top: `${rocket[1]}%`, zIndex: 4,
            width: '40%', maxWidth: 220, transform: 'translate(-50%,-50%)',
            transition: `left 0.6s ${ABT_EASE}, top 0.6s ${ABT_EASE}`,
            opacity: v ? 1 : 0, pointerEvents: 'none',
          }}>
            <div style={{
              position: 'absolute', left: '50%', top: '54%', width: '150%', height: '150%',
              transform: 'translate(-50%,-50%)',
              background: 'radial-gradient(circle, rgba(253,195,39,0.5) 0%, rgba(253,195,39,0.14) 42%, transparent 70%)',
              filter: 'blur(10px)', animation: v ? 'abt-exhaust 2.2s ease-in-out infinite' : 'none', pointerEvents: 'none',
            }} />
            <img src="images/rocket-dommy-clean.png" alt="DOMMY the DOMS mascot piloting a rocket"
              style={{ position: 'relative', width: '100%', display: 'block', transform: 'rotate(-8deg)', animation: v ? 'abt-bob 3.4s ease-in-out infinite' : 'none', filter: 'drop-shadow(0 16px 30px rgba(0,0,0,0.45))' }} />
          </div>
        </div>
      </div>

      {/* corner caption, aligned to the content edge */}
      <span style={{
        position: 'absolute', bottom: 22, right: 'clamp(22px,6vw,80px)', zIndex: 2,
        fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.45)',
        opacity: v ? 1 : 0, transition: 'opacity 0.6s ease 0.9s',
      }}>Est. 1975 · Made in India</span>
    </section>
  );
}

/* ─── BestSellers — rotating "display case" carousel ─── */
const BS_PRODUCTS = [
  { name: 'Brush Pens',           detail: '12 super-soft brush tips + metallic & blender', img: 'images/product-brush-cut.png', href: 'products.html#product/doms-brush-pens' },
  { name: 'Wax Crayons',          detail: 'Smooth, bright & long-lasting colour',          img: 'images/product-wax-cut.png',   href: 'products.html#product/doms-wax-crayons' },
  { name: 'Inxon Ballpoint Pens', detail: 'Smooth-flow ink for effortless writing',        img: 'images/product-inxon-cut.png', href: 'products.html#product/doms-inxon-ballpoint-pens-10-pc-pack' },
  { name: 'Neon Pencil',          detail: 'Vivid neon shades for bold artwork',            img: 'images/product-neon-cut.png',  href: 'products.html#product/doms-neon-pencil' },
];
const BS_SPEED = 3000;

function BestSellers() {
  const [ref, v] = useReveal(0.08);
  const N = BS_PRODUCTS.length;
  const [active, setActive] = uS(0);
  const stageRef = uR(null);
  const itemsRef = uR([]);
  const posRef = uR(0);
  const targetRef = uR(0);
  const pausedRef = uR(false);
  const dragRef = uR(null);
  const movedRef = uR(0);

  const step = d => { targetRef.current = Math.round(targetRef.current) + d; };
  const goTo = i => {
    const f = Math.round(targetRef.current);
    let diff = i - (((f % N) + N) % N);
    if (diff > N / 2) diff -= N;
    if (diff < -N / 2) diff += N;
    targetRef.current = f + diff;
  };

  uE(() => {
    const mod = (n, m) => ((n % m) + m) % m;
    let raf, lastA = -1;
    const frame = () => {
      const now = performance.now();
      posRef.current += (targetRef.current - posRef.current) * 0.12;
      const pos = posRef.current;
      const stage = stageRef.current;
      const W = stage ? stage.clientWidth : 700;
      const RX = Math.min(360, W * 0.28);
      itemsRef.current.forEach((el, i) => {
        if (!el) return;
        const theta = ((i - pos) / N) * Math.PI * 2;
        const depth = Math.cos(theta);
        const dn = (depth + 1) / 2;            // 0 back → 1 front
        const x = Math.sin(theta) * RX;
        const bob = Math.sin(now / 700) * 4 * Math.max(0, depth);
        const y = -(1 - depth) * 30 + bob;
        const scale = 0.6 + dn * 0.4;
        const blur = (1 - dn) * 6.5;
        // depth blur only — the floor contact shadow is a flattened ellipse under each product
        el.style.transform = `translate(-50%,-50%) translateX(${x.toFixed(1)}px) translateY(${y.toFixed(1)}px) scale(${scale.toFixed(3)})`;
        el.style.filter = blur > 0.05 ? `blur(${blur.toFixed(2)}px)` : 'none';
        el.style.opacity = (0.3 + dn * 0.7).toFixed(2);
        el.style.zIndex = String(Math.round(depth * 100));
      });
      const a = mod(Math.round(pos), N);
      if (a !== lastA) { lastA = a; setActive(a); }
      raf = requestAnimationFrame(frame);
    };
    raf = requestAnimationFrame(frame);

    const id = setInterval(() => { if (!pausedRef.current && !dragRef.current) targetRef.current += 1; }, BS_SPEED);

    const stage = stageRef.current;
    const cx = e => (e.touches ? e.touches[0].clientX : e.clientX);
    const down = e => { dragRef.current = { x: cx(e), start: targetRef.current }; movedRef.current = 0; stage.style.cursor = 'grabbing'; };
    const move = e => {
      if (!dragRef.current) return;
      const dx = cx(e) - dragRef.current.x;
      movedRef.current = Math.abs(dx);
      targetRef.current = dragRef.current.start - dx / 200;
      posRef.current = targetRef.current;
    };
    const up = () => { if (!dragRef.current) return; targetRef.current = Math.round(targetRef.current); dragRef.current = null; stage.style.cursor = 'grab'; };
    stage.addEventListener('pointerdown', down);
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', up);
    return () => {
      cancelAnimationFrame(raf); clearInterval(id);
      stage.removeEventListener('pointerdown', down);
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerup', up);
    };
  }, []);

  const arrow = dir => (
    <button aria-label={dir < 0 ? 'Previous' : 'Next'} onClick={() => step(dir)}
      style={{
        position: 'absolute', top: '50%', [dir < 0 ? 'left' : 'right']: 'clamp(2px,3vw,28px)', transform: 'translateY(-50%)',
        zIndex: 120, width: 46, height: 46, borderRadius: '50%', border: '1px solid #e6edf4',
        background: '#ffffff', color: '#02528a', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 6px 18px rgba(20,45,85,0.14)',
        transition: 'background 0.2s, transform 0.2s, color 0.2s',
      }}
      onMouseEnter={e => { e.currentTarget.style.background = '#FDC327'; e.currentTarget.style.color = '#0a2550'; e.currentTarget.style.transform = 'translateY(-50%) scale(1.08)'; }}
      onMouseLeave={e => { e.currentTarget.style.background = '#ffffff'; e.currentTarget.style.color = '#02528a'; e.currentTarget.style.transform = 'translateY(-50%)'; }}>
      <svg width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
        {dir < 0 ? <path d="M15 5l-7 7 7 7" /> : <path d="M9 5l7 7-7 7" />}
      </svg>
    </button>
  );

  return (
    <section ref={ref} style={{ background: '#ffffff', position: 'relative', overflow: 'hidden', height: 'clamp(520px,72vh,624px)' }}>

      {/* STAGE — white CSS room (above the scroll-rocket so products stay in front of it) */}
      <div ref={stageRef}
        onMouseEnter={() => { pausedRef.current = true; }}
        onMouseLeave={() => { pausedRef.current = false; }}
        style={{ position: 'absolute', inset: 0, zIndex: 50, cursor: 'grab', userSelect: 'none', touchAction: 'pan-y' }}>

        {/* solid white bg — the floor/room is implied purely by the product shadows below */}
        {/* DOMS watermark on the wall */}
        <span aria-hidden="true" style={{ position: 'absolute', top: '23%', left: '50%', transform: 'translateX(-50%)', zIndex: 0, fontFamily: "'Barlow Condensed', sans-serif", fontSize: 'clamp(30px,3.8vw,48px)', fontWeight: 800, letterSpacing: '0.2em', color: 'rgba(20,45,85,0.05)', userSelect: 'none', whiteSpace: 'nowrap' }}>DOMS</span>

        {/* orbiting products — grounded by a flattened ellipse shadow on the floor */}
        {BS_PRODUCTS.map((p, i) => (
          <div key={p.name} ref={el => itemsRef.current[i] = el}
            onClick={() => { if (movedRef.current < 6) goTo(i); }}
            style={{ position: 'absolute', left: '50%', top: '44%', width: 'clamp(212px,25vw,292px)', willChange: 'transform, filter, opacity', cursor: 'pointer' }}>
            <div aria-hidden="true" style={{ position: 'absolute', left: '50%', bottom: '0%', width: '86%', height: '12%', transform: 'translateX(-50%)', background: 'radial-gradient(ellipse at center, rgba(16,36,64,0.38) 0%, rgba(16,36,64,0.16) 46%, transparent 74%)', filter: 'blur(5px)', borderRadius: '50%', zIndex: 0 }} />
            <img src={p.img} alt={p.name} draggable="false" style={{ position: 'relative', zIndex: 1, width: '100%', display: 'block' }} />
          </div>
        ))}

        {arrow(-1)}
        {arrow(1)}
      </div>

      {/* heading — overlaid on the top wall */}
      <div className="rkt-front" style={{ position: 'absolute', top: 'clamp(22px,4.5vh,46px)', left: 0, right: 0, textAlign: 'center', zIndex: 60, pointerEvents: 'none', opacity: v ? 1 : 0, transform: v ? 'none' : 'translateY(14px)', transition: 'opacity 0.6s, transform 0.6s' }}>
        <p style={{ fontSize: 12, color: '#7c8aa0', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.24em', margin: '0 0 5px' }}>Our Best Sellers</p>
        <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontSize: 'clamp(28px,3.8vw,44px)', fontWeight: 700, color: '#02528a', lineHeight: 1.02, margin: 0 }}>Tried, Tested &amp; Loved</h2>
      </div>

      {/* caption — overlaid on the floor / lower wall */}
      <div style={{ position: 'absolute', bottom: 'clamp(60px,10.5vh,94px)', left: 0, right: 0, textAlign: 'center', zIndex: 60, pointerEvents: 'none' }}>
        <h3 key={'n' + active} style={{ fontFamily: "'Barlow Condensed', sans-serif", fontSize: 'clamp(25px,3.2vw,34px)', fontWeight: 700, color: '#02528a', margin: 0, lineHeight: 1.08, animation: 'bs-fade 0.5s ease' }}>{BS_PRODUCTS[active].name}</h3>
        <p key={'d' + active} style={{ fontSize: 'clamp(13px,1.5vw,15px)', color: '#64748b', margin: '6px 0 0', animation: 'bs-fade 0.5s ease 0.04s both' }}>{BS_PRODUCTS[active].detail}</p>
        <a href={BS_PRODUCTS[active].href} rel="noreferrer"
          style={{ pointerEvents: 'auto', display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 13, background: '#FDC327', color: '#0a2550', borderRadius: 8, padding: '11px 26px', fontSize: 13.5, fontWeight: 800, textDecoration: 'none', boxShadow: '0 8px 22px rgba(0,20,45,0.32)', transition: 'transform 0.2s, box-shadow 0.2s' }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 28px rgba(253,195,39,0.4)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 8px 22px rgba(0,20,45,0.32)'; }}>
          Shop Now →
        </a>
      </div>

      {/* dots + view all — pinned to the very bottom */}
      <div style={{ position: 'absolute', bottom: 'clamp(14px,2.4vh,22px)', left: 0, right: 0, zIndex: 60, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10 }}>
          {BS_PRODUCTS.map((p, i) => (
            <button key={p.name} aria-label={p.name} onClick={() => goTo(i)}
              style={{ width: i === active ? 26 : 9, height: 9, borderRadius: 5, border: 'none', cursor: 'pointer', padding: 0, background: i === active ? '#FDC327' : '#cbd5e1', transition: 'all 0.35s cubic-bezier(0.16,1,0.3,1)' }} />
          ))}
        </div>
        <a href="products.html#all" rel="noreferrer"
          style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#02528a', fontSize: 12.5, fontWeight: 700, textDecoration: 'none', borderBottom: '1.5px solid rgba(253,195,39,0.7)', paddingBottom: 2, transition: 'color 0.2s' }}
          onMouseEnter={e => e.currentTarget.style.color = '#013a63'}
          onMouseLeave={e => e.currentTarget.style.color = '#02528a'}>
          View All Products →
        </a>
      </div>
    </section>
  );
}

/* ─── Collections ─── */
function hexA(hex, a) {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
}
const COL_CATS = [
  { name: 'Pens and writing instrument', img: 'images/pens.jpg',      href: 'products.html#cat/pens-writing-instruments', btnColor: '#7B5EA7' },
  { name: 'Pencils',                     img: 'images/pencil.jpg',    href: 'products.html#cat/pencils-accessories', btnColor: '#02528a' },
  { name: 'Drawing and colouring',       img: 'images/Art-Range.webp',href: 'products.html#cat/drawing-colouring', btnColor: '#E8192C' },
  { name: 'Books and paper stationery',  img: 'images/cat-3.webp',    href: 'products.html#cat/paper-stationery', btnColor: '#27AE60' },
];

/* Expanding category panels — hover to open, others collapse to a colored strip */
function CollectionPanels() {
  const [active, setActive] = uS(0);
  return (
    <div style={{ display: 'flex', gap: 12, height: 'clamp(300px,34vw,372px)' }}>
      {COL_CATS.map((c, i) => {
        const on = i === active;
        return (
          <div key={c.name} onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)}
            style={{ position: 'relative', flex: `${on ? 6 : 1} 1 0%`, minWidth: 0, borderRadius: 16, overflow: 'hidden', cursor: 'pointer', transition: 'flex-grow 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s', boxShadow: on ? '0 20px 44px rgba(20,40,70,0.24)' : '0 6px 16px rgba(20,40,70,0.12)' }}>
            <img src={c.img} alt={c.name} draggable="false"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.6s' }}
              onError={e => { e.currentTarget.style.display = 'none'; e.currentTarget.parentElement.style.background = c.btnColor; }} />
            {/* category color wash — strong on the collapsed strips, light when open */}
            <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: c.btnColor, opacity: on ? 0.1 : 0.62, transition: 'opacity 0.5s' }} />
            {/* bottom scrim for text legibility */}
            <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: `linear-gradient(to top, ${hexA(c.btnColor, 0.92)} 0%, ${hexA(c.btnColor, 0.2)} 42%, transparent 66%)`, opacity: on ? 1 : 0, transition: 'opacity 0.5s' }} />

            {/* collapsed: vertical category name */}
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: on ? 0 : 1, transition: 'opacity 0.35s', pointerEvents: 'none' }}>
              <span style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', color: '#fff', fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 'clamp(15px,1.9vw,21px)', letterSpacing: '0.06em', textShadow: '0 1px 8px rgba(0,0,0,0.35)', whiteSpace: 'nowrap' }}>{c.name}</span>
            </div>

            {/* expanded: name + explore */}
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 'clamp(16px,2vw,24px)', opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(12px)', transition: 'opacity 0.45s 0.12s, transform 0.45s 0.12s', pointerEvents: on ? 'auto' : 'none' }}>
              <h3 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontSize: 'clamp(21px,2.5vw,30px)', fontWeight: 700, color: '#fff', margin: '0 0 13px', lineHeight: 1.08, textShadow: '0 2px 12px rgba(0,0,0,0.32)' }}>{c.name}</h3>
              <a href={c.href} rel="noreferrer"
                style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#fff', color: c.btnColor, padding: '9px 20px', borderRadius: 7, fontSize: 13, fontWeight: 800, textDecoration: 'none', transition: 'transform 0.2s, box-shadow 0.2s' }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 20px rgba(0,0,0,0.25)'; }}
                onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
                Explore →
              </a>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function Collections() {
  const [ref, v] = useReveal(0.08);
  return (
    <section ref={ref} style={{ background: '#fff', padding: 'clamp(40px,5vw,56px) 20px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', gap: 48, flexWrap: 'wrap', alignItems: 'center' }}>
        <div className="rkt-front" style={{
          flex: '1 1 300px',
          opacity: v ? 1 : 0, transform: v ? 'none' : 'translateX(-20px)',
          transition: 'opacity 0.7s, transform 0.7s',
        }}>
          <p style={{ fontSize: 13, color: '#888', marginBottom: 4 }}>Explore</p>
          <h2 style={{
            fontFamily: "'Barlow Condensed', sans-serif",
            fontSize: 'clamp(32px, 5vw, 54px)', fontWeight: 700,
            color: '#02528a', marginBottom: 20, lineHeight: 1.05,
          }}>Collection</h2>

          {[
            'DOMS offers a vivid and diverse range of art and stationery products, designed to inspire creativity across age groups. Each product is crafted with a strong focus on quality, durability, and performance.',
            'The collection includes user-friendly tools that cater to both beginners and experienced users. Innovative designs and vibrant aesthetics make the products both functional and visually engaging.',
            'With a commitment to excellence, DOMS continues to set benchmarks in the world of stationery and creative supplies.',
          ].map((t, i) => (
            <p key={i} style={{ fontSize: 14, color: '#565656', lineHeight: 1.8, marginBottom: 12, maxWidth: 360 }}>{t}</p>
          ))}
        </div>

        <div className="rkt-front" style={{
          flex: '1 1 420px',
          opacity: v ? 1 : 0, transform: v ? 'none' : 'translateX(20px)',
          transition: 'opacity 0.7s 0.1s, transform 0.7s 0.1s',
        }}>
          <CollectionPanels />
        </div>
      </div>
    </section>
  );
}

/* ─── StarsSpeak (Swiper → state slider) ─── */
/* ─── StarsSpeak — native on-brand rating cards ─── */
const RATINGS = [
  {
    product: 'DOMS Super Soft Tip Pastel Shades Brush Pen Set — 12 Pastel Shades + 1 Silver + 1 Blender',
    blurb: 'Ideal for doodling, illustrations, calligraphy — for students & professionals.',
    rating: 4.4, count: '234', badge: '#1 Best Seller', badgeSub: 'in Pastels', badgeColor: '#C2571A',
  },
  {
    product: 'DOMS Neon Rubber-Tipped HB/2 Graphite Pencils — Box Pack of 10',
    blurb: 'Non-toxic, free sharpener inside the box, easy & smooth sharpening.',
    rating: 4.4, count: '1,194', badge: "Amazon's Choice", badgeSub: 'for "pencil"', badgeColor: '#1B2A41',
  },
];

function StarRow({ rating, size = 22 }) {
  return (
    <div style={{ display: 'inline-flex', gap: 2, position: 'relative' }} aria-label={`${rating} out of 5 stars`}>
      {[0, 1, 2, 3, 4].map(i => {
        const fill = Math.max(0, Math.min(1, rating - i));
        return (
          <span key={i} style={{ position: 'relative', width: size, height: size, display: 'inline-block' }}>
            <svg viewBox="0 0 24 24" width={size} height={size} style={{ position: 'absolute', inset: 0 }}><path d="M12 2l2.9 6.2 6.8.8-5 4.6 1.3 6.7L12 17.8 5.9 21.1l1.3-6.7-5-4.6 6.8-.8z" fill="#E2E5E9" /></svg>
            <span style={{ position: 'absolute', inset: 0, width: `${fill * 100}%`, overflow: 'hidden' }}>
              <svg viewBox="0 0 24 24" width={size} height={size}><path d="M12 2l2.9 6.2 6.8.8-5 4.6 1.3 6.7L12 17.8 5.9 21.1l1.3-6.7-5-4.6 6.8-.8z" fill="#FDC327" /></svg>
            </span>
          </span>
        );
      })}
    </div>
  );
}

function StarsSpeak() {
  const [ref, v] = useReveal(0.08);
  const [idx, setIdx] = uS(0);
  const [isMob, setIsMob] = uS(typeof window !== 'undefined' && window.innerWidth <= 700);
  uE(() => {
    const onR = () => setIsMob(window.innerWidth <= 700);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  uE(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % RATINGS.length), 5000);
    return () => clearInterval(t);
  }, []);

  return (
    <section ref={ref} style={{ background: '#E6E7E8', padding: 'clamp(54px,7vw,76px) 20px', position: 'relative', overflow: 'hidden' }}>
      <img src="images/testimonials_bg_left.webp" alt="" aria-hidden="true"
        style={{ position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)', height: '100%', objectFit: 'contain', opacity: 0.32, pointerEvents: 'none' }}
        onError={e => { e.currentTarget.style.display = 'none'; }}
      />
      <img src="images/testimonials_bg_left.webp" alt="" aria-hidden="true"
        style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%) scaleX(-1)', height: '100%', objectFit: 'contain', opacity: 0.32, pointerEvents: 'none' }}
        onError={e => { e.currentTarget.style.display = 'none'; }}
      />

      <div style={{ maxWidth: 760, margin: '0 auto', position: 'relative', zIndex: 50 }}>
        <div style={{
          textAlign: 'center', marginBottom: 'clamp(26px,3.5vw,38px)',
          opacity: v ? 1 : 0, transform: v ? 'none' : 'translateY(16px)',
          transition: 'opacity 0.6s, transform 0.6s',
        }}>
          <p style={{ fontSize: 13, color: '#888', fontWeight: 600, letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 6 }}>
            Stars Speak
          </p>
          <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontSize: 'clamp(26px, 4vw, 42px)', fontWeight: 700, color: '#02528a', margin: '0 0 18px' }}>Customer Ratings</h2>
          {/* aggregate trust line */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 'clamp(14px,2.4vw,26px)', flexWrap: 'wrap', justifyContent: 'center', background: '#fff', borderRadius: 100, padding: '11px 24px', boxShadow: '0 4px 18px rgba(20,40,70,0.08)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
              <span style={{ fontFamily: "'Barlow Condensed', sans-serif", fontSize: 28, fontWeight: 800, color: '#02528a', lineHeight: 1 }}>4.4</span>
              <StarRow rating={4.4} size={18} />
            </span>
            <span style={{ width: 1, height: 24, background: '#e2e5e9' }} />
            <span style={{ fontSize: 13.5, color: '#566', fontWeight: 600 }}>1,400+ ratings on Amazon</span>
          </div>
        </div>

        {/* rating card — desktop: fixed-height overlay crossfade; mobile: single auto-height card (no overflow) */}
        <div style={{ position: 'relative', opacity: v ? 1 : 0, transition: 'opacity 0.7s 0.15s' }}>
          <div style={{ position: 'relative', height: isMob ? 'auto' : 'clamp(248px,33vw,272px)' }}>
            {RATINGS.map((r, i) => (
              <article key={i} aria-hidden={i !== idx} style={{
                position: isMob ? 'relative' : 'absolute', inset: isMob ? undefined : 0,
                display: isMob ? (i === idx ? 'flex' : 'none') : 'flex',
                opacity: isMob ? 1 : (i === idx ? 1 : 0), pointerEvents: i === idx ? 'auto' : 'none',
                transition: isMob ? 'none' : 'opacity 0.5s', transform: isMob ? 'none' : (i === idx ? 'none' : 'scale(0.98)'),
                background: '#fff', borderRadius: 16, boxShadow: '0 10px 34px rgba(20,40,70,0.1)',
                padding: 'clamp(22px,3.2vw,34px)',
                flexDirection: 'column', justifyContent: 'center',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 18 }}>
                  <a href="https://www.amazon.in/s?k=DOMS" target="_blank" rel="noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, color: '#0a7d8c', fontWeight: 700, fontSize: 15, textDecoration: 'none' }}
                    onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
                    onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9h18M3 9l2-5h14l2 5M3 9v10a2 2 0 002 2h14a2 2 0 002-2V9" /></svg>
                    Visit the DOMS Store
                  </a>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
                    <span style={{ fontFamily: "'Barlow Condensed', sans-serif", fontSize: 24, fontWeight: 800, color: '#1b2a41', lineHeight: 1 }}>{r.rating}</span>
                    <StarRow rating={r.rating} size={20} />
                    <span style={{ fontSize: 14, color: '#0a7d8c', fontWeight: 600 }}>{r.count}</span>
                  </span>
                </div>
                <h3 style={{ fontSize: 'clamp(17px,2vw,21px)', fontWeight: 700, color: '#1f2733', lineHeight: 1.4, margin: '0 0 10px' }}>{r.product}</h3>
                <p style={{ fontSize: 14.5, color: '#647084', lineHeight: 1.7, margin: '0 0 20px' }}>{r.blurb}</p>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ position: 'relative', background: r.badgeColor, color: '#fff', fontSize: 13, fontWeight: 800, padding: '6px 13px', borderRadius: 4 }}>{r.badge}</span>
                  <span style={{ fontSize: 14, color: '#0a7d8c', fontWeight: 600 }}>{r.badgeSub}</span>
                </span>
              </article>
            ))}
          </div>

          {/* dots */}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 9, marginTop: 22 }}>
            {RATINGS.map((r, i) => (
              <button key={i} aria-label={`Rating ${i + 1}`} onClick={() => setIdx(i)}
                style={{ width: i === idx ? 26 : 9, height: 9, borderRadius: 5, border: 'none', cursor: 'pointer', padding: 0, background: i === idx ? '#02528a' : '#b7bfc9', transition: 'all 0.35s cubic-bezier(0.16,1,0.3,1)' }} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── QuoteSection ─── */
function QuoteSection() {
  const [ref, v] = useReveal(0.2);
  return (
    <section ref={ref} style={{ background: '#fff', padding: '64px 20px', textAlign: 'center', borderTop: '1px solid #ebebeb' }}>
      <div className="rkt-front" style={{
        maxWidth: 660, margin: '0 auto',
        opacity: v ? 1 : 0, transform: v ? 'none' : 'translateY(16px)',
        transition: 'opacity 0.7s, transform 0.7s',
      }}>
        <h2 style={{
          fontFamily: 'Georgia, serif',
          fontSize: 'clamp(18px, 2.5vw, 26px)',
          fontWeight: 400, fontStyle: 'italic',
          color: '#222', lineHeight: 1.5, marginBottom: 16,
        }}>
          &ldquo;Creativity flows when curiosity is stoked.&rdquo;
        </h2>
        <p style={{ fontSize: 13, color: '#888', fontWeight: 600, letterSpacing: '0.5px' }}>
          – Neil Blumenthal
        </p>
      </div>
    </section>
  );
}

/* ─── Footer ─── */
const F_COL1 = [
  ['Pencil & Accessories',          'products.html#cat/pencils-accessories'],
  ['Drawing & Colouring',           'products.html#cat/drawing-colouring'],
  ['Mathematical Drawing Instruments','products.html#cat/mathematical-drawing-instruments'],
  ['Paper Stationery',              'products.html#cat/paper-stationery'],
  ['Pen & Writing Instruments',     'products.html#cat/pens-writing-instruments'],
  ['Gifting',                       'products.html#cat/gifting'],
  ['Marker Pens',                   'products.html#cat/markers-highlighters'],
  ['Crafts & Hobbyist',             'products.html#cat/crafts-hobbyist'],
  ['Fine Art',                      'products.html#cat/fine-art'],
];
const F_QUICK = [
  ['About Us',          'about-us.html'],
  ['RR - FILA Group',   'rr-fila-group.html'],
  ['Infrastructure',    'infrastructure.html'],
  ['Privacy Policy',    'privacy-policy.html'],
  ['Terms & Conditions','terms-and-conditions.html'],
  ['Disclaimer',        'website-disclaimer.html'],
  ['Contact Us',        'contact-us.html'],
];
const F_SOCIAL = [
  { label: 'Instagram', href: 'https://www.instagram.com/domsindia/', d: 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z' },
  { label: 'YouTube', href: 'https://www.youtube.com/c/DOMSIndiaofficial', d: 'M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z' },
  { label: 'Facebook', href: 'https://www.facebook.com/domsindia/', d: 'M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z' },
  { label: 'LinkedIn', href: 'https://www.linkedin.com/company/doms-india/', d: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' },
];

function FLink({ href, label }) {
  return (
    <li style={{ marginBottom: 7 }}>
      <a href={href} rel="noreferrer"
        style={{ fontSize: 13, color: '#a8c4d8', textDecoration: 'none', transition: 'color 0.15s' }}
        onMouseEnter={e => e.currentTarget.style.color = '#FDC327'}
        onMouseLeave={e => e.currentTarget.style.color = '#a8c4d8'}>
        {label}
      </a>
    </li>
  );
}

/* footer link group: 3-row grid, fills column-by-column like the DOMS site */
function FGroup({ title, items }) {
  return (
    <div>
      <h3 style={{ color: '#FDC327', fontSize: 17, fontWeight: 700, margin: '0 0 18px' }}>{title}</h3>
      <div style={{ display: 'grid', gridTemplateRows: 'repeat(3, auto)', gridAutoFlow: 'column', columnGap: 'clamp(26px,3.4vw,60px)', rowGap: 13, alignContent: 'start' }}>
        {items.map(([label, href]) => (
          <a key={label} href={href} rel="noreferrer"
            style={{ fontSize: 14, color: '#cfe0ec', textDecoration: 'none', transition: 'color 0.15s', lineHeight: 1.35, maxWidth: 230 }}
            onMouseEnter={e => e.currentTarget.style.color = '#FDC327'}
            onMouseLeave={e => e.currentTarget.style.color = '#cfe0ec'}>
            {label}
          </a>
        ))}
      </div>
    </div>
  );
}

/* back-to-top — appears after scrolling, smooth scroll up */
function BackToTop() {
  const [show, setShow] = uS(false);
  uE(() => {
    const onScroll = () => setShow((window.scrollY || 0) > 600);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button aria-label="Back to top" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      style={{
        position: 'fixed', right: 22, bottom: 22, zIndex: 9000, width: 44, height: 44, borderRadius: '50%',
        border: 'none', cursor: 'pointer', background: '#FDC327', color: '#02528a',
        boxShadow: '0 8px 22px rgba(0,0,0,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        opacity: show ? 1 : 0, transform: show ? 'translateY(0)' : 'translateY(14px)',
        pointerEvents: show ? 'auto' : 'none', transition: 'opacity 0.3s, transform 0.3s, background 0.2s',
      }}
      onMouseEnter={e => e.currentTarget.style.background = '#ffd755'}
      onMouseLeave={e => e.currentTarget.style.background = '#FDC327'}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
    </button>
  );
}

/* manage-consent — small pill bottom-left; hover or click reveals the cookie card */
function ConsentManager() {
  const [open, setOpen] = uS(false);
  const timer = uR(null);
  const openNow = () => { if (timer.current) clearTimeout(timer.current); setOpen(true); };
  const closeSoon = () => { timer.current = setTimeout(() => setOpen(false), 260); };
  const btn = (label, bg, color, primary) => (
    <button onClick={() => setOpen(false)} style={{
      flex: 1, background: bg, color, border: primary ? 'none' : '1px solid #e2e6ea', borderRadius: 8,
      padding: '11px 0', fontSize: 13, fontWeight: 700, cursor: 'pointer', transition: 'filter 0.15s',
    }}
      onMouseEnter={e => e.currentTarget.style.filter = 'brightness(0.95)'}
      onMouseLeave={e => e.currentTarget.style.filter = 'none'}>{label}</button>
  );
  return (
    <div style={{ position: 'fixed', left: 18, bottom: 18, zIndex: 9000, fontFamily: "'Poppins', sans-serif" }}
      onMouseEnter={openNow} onMouseLeave={closeSoon}>
      <div role="dialog" aria-label="Consent for Cookies" style={{
        position: 'absolute', left: 0, bottom: 'calc(100% + 10px)', width: 'min(92vw, 366px)',
        background: '#fff', borderRadius: 12, boxShadow: '0 18px 50px rgba(0,0,0,0.3)', border: '1px solid #e5e7eb', padding: 20,
        opacity: open ? 1 : 0, transform: open ? 'translateY(0)' : 'translateY(12px)',
        pointerEvents: open ? 'auto' : 'none', transition: 'opacity 0.25s, transform 0.25s',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <h4 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: '#1f2733' }}>Consent for Cookies</h4>
          <button aria-label="Close" onClick={() => setOpen(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#6b7280', fontSize: 17, lineHeight: 1 }}>✕</button>
        </div>
        <p style={{ margin: '0 0 16px', fontSize: 12.5, color: '#5b6470', lineHeight: 1.6 }}>
          To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site.
        </p>
        <div style={{ display: 'flex', gap: 8 }}>
          {btn('Accept', '#02528a', '#fff', true)}
          {btn('Deny', '#eef1f4', '#1f2733', false)}
          {btn('Preferences', '#eef1f4', '#1f2733', false)}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginTop: 14 }}>
          {[['Cookie Policy', 'privacy-policy.html'], ['Privacy Policy', 'privacy-policy.html'], ['Terms and Conditions', 'terms-and-conditions.html']].map(([l, h]) => (
            <a key={l} href={h} target="_blank" rel="noreferrer" style={{ fontSize: 11.5, color: '#02528a', textDecoration: 'underline' }}>{l}</a>
          ))}
        </div>
      </div>
      <button onClick={() => setOpen(o => !o)} style={{
        background: '#fff', border: '1px solid #d7dde4', borderRadius: 8, padding: '8px 14px',
        fontSize: 12.5, fontWeight: 600, color: '#1f2733', cursor: 'pointer',
        boxShadow: '0 6px 18px rgba(0,0,0,0.16)', display: 'flex', alignItems: 'center', gap: 7,
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="#02528a"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></svg>
        Manage consent
      </button>
    </div>
  );
}

function Footer() {
  return (
    <>
      <footer style={{ position: 'relative', zIndex: 41 }}>
        <div style={{ background: '#02528a' }}>
          <div style={{ maxWidth: 1340, margin: '0 auto', padding: 'clamp(46px,5vw,64px) 24px clamp(40px,4vw,52px)', display: 'flex', gap: 'clamp(36px,5vw,72px)', flexWrap: 'wrap', alignItems: 'flex-start' }}>
            {/* brand + contact */}
            <div style={{ flex: '0 1 312px', minWidth: 250 }}>
              <img src="images/logo.webp" alt="DOMS Industries" style={{ height: 62, marginBottom: 8 }} />
              <p style={{ fontSize: 11, color: '#a8c4d8', fontWeight: 700, letterSpacing: '1.4px', textTransform: 'uppercase', margin: '0 0 22px' }}>
                Every Ambition Needs Preparation
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <img src="images/icon-phone.png" alt="" style={{ width: 16, marginTop: 2, flexShrink: 0 }} />
                  <div>
                    <p style={{ fontSize: 13.5, color: '#cfe0ec', lineHeight: 1.55, margin: 0 }}>+91 74348 88445/446</p>
                    <p style={{ fontSize: 13.5, color: '#cfe0ec', lineHeight: 1.55, margin: 0 }}>+91 75730 24744/844</p>
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <img src="images/icon-mail.png" alt="" style={{ width: 16, flexShrink: 0 }} />
                  <a href="mailto:info@domsindia.com" style={{ fontSize: 13.5, color: '#cfe0ec', textDecoration: 'none' }}>info@domsindia.com</a>
                </div>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <img src="images/icon-address.png" alt="" style={{ width: 15, marginTop: 2, flexShrink: 0 }} />
                  <p style={{ fontSize: 13.5, color: '#cfe0ec', lineHeight: 1.6, margin: 0 }}>
                    Plot No. 117, G.I.D.C., 52 Hector Expansion Area, Umbergaon – 396171, Dist. Valsad, Gujarat, India
                  </p>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
                {F_SOCIAL.map(s => (
                  <a key={s.label} href={s.href} target="_blank" rel="noreferrer" aria-label={s.label}
                    style={{ width: 34, height: 34, borderRadius: '50%', border: '1.5px solid rgba(255,255,255,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', transition: 'background 0.2s, color 0.2s, border-color 0.2s' }}
                    onMouseEnter={e => { e.currentTarget.style.background = '#FDC327'; e.currentTarget.style.color = '#02528a'; e.currentTarget.style.borderColor = '#FDC327'; }}
                    onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.45)'; }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d={s.d} /></svg>
                  </a>
                ))}
              </div>
            </div>

            {/* divider */}
            <div aria-hidden="true" style={{ alignSelf: 'stretch', width: 1, background: 'rgba(255,255,255,0.16)' }} />

            {/* link groups */}
            <div style={{ flex: '1 1 520px', display: 'flex', flexDirection: 'column', gap: 'clamp(30px,3.4vw,44px)' }}>
              <FGroup title="Products" items={F_COL1} />
              <FGroup title="Quick Links" items={F_QUICK} />
            </div>
          </div>
        </div>

        <div style={{ background: '#e6e7e8', padding: '13px 24px', textAlign: 'center' }}>
          <p style={{ fontSize: 12.5, color: '#333', fontWeight: 500, margin: 0 }}>
            © {new Date().getFullYear()} DOMS Industries Limited. DOMS® and all related trademarks are the property of DOMS Industries Limited.
          </p>
        </div>
      </footer>

      <BackToTop />
      <ConsentManager />
    </>
  );
}

/* ─── ProductTheatre — full-bleed cinematic video showcase ─── */
const PT_SLIDES = [
  {
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_33SVBpJFmKSSU8dzgpQzJHDdXyd/hf_20260614_195631_cdaa7713-6a34-4c0a-954a-339c3455a9d3.mp4',
    eyebrow: 'Writing Instruments',
    name: 'DOMS Inxon Ballpoint',
    tagline: '0.7mm needle tip for precision and flow. Smooth ink technology that writes beautifully every time.',
  },
  {
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_33SVBpJFmKSSU8dzgpQzJHDdXyd/hf_20260614_194710_1589ca6c-1c06-4f71-b758-43ba12131b8f.mp4',
    eyebrow: 'Premium Pencils',
    name: 'DOMS Zillion Pencil',
    tagline: 'X-Tra Super Dark graphite. Dream. Plan. Conquer. Built for beautiful handwriting.',
  },
  {
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_33SVBpJFmKSSU8dzgpQzJHDdXyd/hf_20260614_200537_01c3429a-2ca8-4728-a170-f752782ef817.mp4',
    eyebrow: 'Art Supplies',
    name: 'DOMS Aqua Colour Cakes',
    tagline: 'Refillable Aqua Colour Cakes. 12+6 brilliant shades. Everything a young artist needs.',
  },
];

function ProductTheatre() {
  const [active, setActive] = uS(0);
  const [ref, visible] = useReveal(0.25);
  const vidRefs = uR([]);
  const cur = PT_SLIDES[active];

  // auto-advance every 6s; resets when active changes (incl. dot clicks)
  uE(() => {
    const t = setTimeout(() => setActive(a => (a + 1) % PT_SLIDES.length), 6000);
    return () => clearTimeout(t);
  }, [active]);

  // play only the active video, pause (but keep preloaded) the rest
  uE(() => {
    vidRefs.current.forEach((v, i) => {
      if (!v) return;
      if (i === active) { const p = v.play(); if (p && p.catch) p.catch(() => {}); }
      else { v.pause(); }
    });
  }, [active]);

  const reveal = delay => ({
    opacity: visible ? 1 : 0,
    transform: visible ? 'translateY(0)' : 'translateY(40px)',
    transition: `opacity 0.8s ease-out ${delay}s, transform 0.8s ease-out ${delay}s`,
  });

  return (
    <section id="product-theatre" ref={ref} style={{
      background: '#000', minHeight: '100vh', position: 'relative', overflow: 'hidden',
      fontFamily: "'Poppins', sans-serif",
    }}>
      {/* preloaded videos — only active is visible & playing */}
      {PT_SLIDES.map((s, i) => (
        <video key={s.video} src={s.video} ref={el => vidRefs.current[i] = el}
          autoPlay={i === 0} muted loop playsInline preload="auto"
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', opacity: i === active ? 1 : 0,
            transition: 'opacity 1s ease',
          }} />
      ))}
      {/* readability scrim over video */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 5, pointerEvents: 'none',
        background: 'linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 42%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0) 100%)',
      }} />

      {/* content overlay */}
      <div style={{
        position: 'relative', zIndex: 10, width: '100%', minHeight: '100vh',
        display: 'flex', alignItems: 'center', padding: '0 clamp(24px,6vw,80px)',
      }}>
        <div style={{ width: '100%', maxWidth: 560 }}>
          <span style={{
            ...reveal(0),
            display: 'inline-block',
            background: 'rgba(253,195,39,0.15)', border: '1px solid #FDC327', color: '#FDC327',
            fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.2em',
            padding: '6px 16px', borderRadius: 20,
          }}>{cur.eyebrow}</span>

          <h2 style={{
            ...reveal(0.15),
            color: '#fff', fontSize: 'clamp(38px,6vw,64px)', fontWeight: 900,
            lineHeight: 1.05, letterSpacing: '-0.02em', margin: '16px 0',
          }}>{cur.name}</h2>

          <p style={{
            ...reveal(0.3),
            color: 'rgba(255,255,255,0.65)', fontSize: 18, lineHeight: 1.7,
            maxWidth: 420, marginBottom: 36,
          }}>{cur.tagline}</p>

          <a href="products.html#all" rel="noreferrer"
            style={{
              ...reveal(0.45),
              display: 'inline-block',
              background: '#FDC327', color: '#02528A',
              borderRadius: 8, padding: '14px 32px', fontSize: 15, fontWeight: 700,
              textDecoration: 'none', boxShadow: '0 0 0 rgba(253,195,39,0)',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 10px 30px rgba(253,195,39,0.3)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = visible ? 'translateY(0)' : 'translateY(40px)'; e.currentTarget.style.boxShadow = '0 0 0 rgba(253,195,39,0)'; }}>
            Explore Product →
          </a>
        </div>
      </div>

      {/* bottom-center dot indicators */}
      <div style={{
        position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)',
        zIndex: 10, display: 'flex', gap: 10, alignItems: 'center',
      }}>
        {PT_SLIDES.map((_, i) => (
          <button key={i} onClick={() => setActive(i)} aria-label={`Show ${PT_SLIDES[i].name}`}
            style={{
              width: i === active ? 28 : 8, height: 8, padding: 0, border: 'none', cursor: 'pointer',
              borderRadius: i === active ? 4 : '50%',
              background: i === active ? '#FDC327' : 'rgba(255,255,255,0.3)',
              transition: 'width 0.3s, background 0.3s, border-radius 0.3s',
            }} />
        ))}
      </div>
    </section>
  );
}

/* ─── DomsStrap — marquee ribbon: DOMMY rides the DOMS logo, different poses ─── */
const STRAP_DOMMIES = ['images/logo_with_catector-scaled.webp', 'images/dommy-surf.png', 'images/dommy-relax.png'];
function DomsStrap() {
  const half = STRAP_DOMMIES.map((src, i) => (
    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 'clamp(26px,4vw,54px)', paddingRight: 'clamp(26px,4vw,54px)', flexShrink: 0 }}>
      <img src={src} alt="" aria-hidden="true" draggable="false"
        style={{ height: 'clamp(74px,9.5vw,108px)', width: 'auto', objectFit: 'contain', flexShrink: 0 }}
        onError={e => { e.currentTarget.style.display = 'none'; }} />
      <span aria-hidden="true" style={{ color: '#FDC327', fontSize: 'clamp(15px,2vw,22px)', flexShrink: 0 }}>✦</span>
      <span style={{ fontFamily: "'Barlow Condensed', sans-serif", color: '#fff', fontWeight: 700, fontSize: 'clamp(18px,2.3vw,28px)', letterSpacing: '0.14em', textTransform: 'uppercase', whiteSpace: 'nowrap', flexShrink: 0 }}>Every Ambition Needs Preparation</span>
      <span aria-hidden="true" style={{ color: '#FDC327', fontSize: 'clamp(15px,2vw,22px)', flexShrink: 0 }}>✦</span>
    </div>
  ));
  return (
    <div aria-label="DOMS — Every Ambition Needs Preparation" style={{
      position: 'relative', overflow: 'hidden', background: '#02528a',
      borderTop: '4px solid #FDC327', borderBottom: '4px solid #FDC327',
      height: 'clamp(96px,12vw,132px)', display: 'flex', alignItems: 'center',
    }}>
      <div className="doms-strap-track" style={{ display: 'flex', alignItems: 'center', width: 'max-content', animation: 'doms-strap 30s linear infinite reverse', willChange: 'transform' }}>
        {half}{half}
      </div>
    </div>
  );
}

Object.assign(window, { ProductShowcase, ProductShowcaseBackup, ProductTheatre, About, BestSellers, Collections, DomsStrap, StarsSpeak, QuoteSection, Footer });