// ============================================================
// Dhobify landing v2 — Header, Hero, Verified Dhobis
// Depends on _lib.jsx (window globals)
// ============================================================

const {
  DHB_T, DHB_MAX, DHB_PADD, DHB_PADM, DHB_STORE,
  dhbTrack,
  useReducedMotion, useMobile, useScrollY, useReveal, useCountUp, useInView, useTilt,
  IcCheck, IcCamera, IcClock, IcLoc, IcStar, IcArrow, IcMenu, IcX, IcShield, IcSparkle,
  DhbMark, DhbWordmark,
  DhbButton, DhbStoreBadge, DhbEyebrow, DhbHeadline, DhbHighlight,
  DhbReveal, DhbContainer, DhbDotGrid, DhbAvatar, DhbStars, DhbOdometer
} = window;

// ============================================================
// HEADER
// ============================================================
function DhbHeader({ mobile }) {
  const y = useScrollY();
  const past = y > 40;
  const [open, setOpen] = React.useState(false);

  // Lock scroll while mobile menu open
  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {document.body.style.overflow = '';};
  }, [open]);

  const px = mobile ? DHB_PADM : DHB_PADD;
  return (
    <React.Fragment>
      <header style={{
        position: 'sticky', top: 0, zIndex: 60,
        background: past ? 'rgba(248,250,252,0.85)' : 'rgba(248,250,252,0)',
        backdropFilter: past ? 'blur(12px) saturate(180%)' : 'blur(0)',
        WebkitBackdropFilter: past ? 'blur(12px) saturate(180%)' : 'blur(0)',
        borderBottom: past ? `1px solid ${DHB_T.border}` : '1px solid transparent',
        transition: 'background .2s ease, border-color .2s ease, backdrop-filter .2s ease'
      }}>
        <div style={{
          maxWidth: DHB_MAX, margin: '0 auto',
          height: mobile ? 64 : 72,
          padding: `0 ${px}px`,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 12
        }}>
          <a href="/" aria-label="Dhobify home" style={{
            display: 'flex', alignItems: 'center', gap: 10,
            textDecoration: 'none'
          }}>
            <DhbMark size={34} />
            <DhbWordmark size={mobile ? 20 : 22} />
          </a>
          {mobile ?
          <button aria-label="Open menu" onClick={() => setOpen(true)} style={{
            width: 44, height: 44, borderRadius: 12,
            border: `1px solid ${DHB_T.border}`,
            background: DHB_T.surface, color: DHB_T.ink,
            display: 'grid', placeItems: 'center', cursor: 'pointer'
          }}>
              <IcMenu size={22} />
            </button> :

          <nav style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
              <a href="#vendors" style={navLinkStyle}>For vendors</a>
              <a href="#faq" style={navLinkStyle}>FAQ</a>
              <a href="/support" style={navLinkStyle}>Support</a>
              <DhbButton
              href={DHB_STORE.resident.apple}
              target="_blank" rel="noreferrer"
              size="md"
              onClick={() => dhbTrack('install_click', { platform: 'apple', placement: 'header' })}>
              Open the App</DhbButton>
            </nav>
          }
        </div>
      </header>
      {/* Mobile fullscreen menu */}
      {mobile &&
      <div style={{
        position: 'fixed', inset: 0, zIndex: 80,
        pointerEvents: open ? 'auto' : 'none'
      }}>
          <div onClick={() => setOpen(false)} style={{
          position: 'absolute', inset: 0,
          background: 'rgba(15,23,42,.4)',
          opacity: open ? 1 : 0,
          transition: 'opacity .25s ease'
        }} />
          <aside style={{
          position: 'absolute', right: 0, top: 0, bottom: 0,
          width: 'min(86vw, 360px)',
          background: DHB_T.surface,
          transform: open ? 'translateX(0)' : 'translateX(100%)',
          transition: 'transform .25s cubic-bezier(.16,1,.3,1)',
          display: 'flex', flexDirection: 'column',
          padding: '20px 24px 32px',
          boxShadow: '-20px 0 40px -20px rgba(15,23,42,.25)'
        }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 32 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <DhbMark size={32} />
                <DhbWordmark size={20} />
              </div>
              <button aria-label="Close menu" onClick={() => setOpen(false)} style={{
              width: 40, height: 40, borderRadius: 12,
              border: `1px solid ${DHB_T.border}`,
              background: DHB_T.bg, color: DHB_T.ink,
              display: 'grid', placeItems: 'center', cursor: 'pointer'
            }}><IcX size={20} /></button>
            </div>
            <nav style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <a href="#vendors" onClick={() => setOpen(false)} style={mobileNavLink}>For vendors</a>
              <a href="#how" onClick={() => setOpen(false)} style={mobileNavLink}>How it works</a>
              <a href="#faq" onClick={() => setOpen(false)} style={mobileNavLink}>FAQ</a>
              <a href="/support" onClick={() => setOpen(false)} style={mobileNavLink}>Support</a>
            </nav>
            <div style={{ flex: 1 }} />
            <DhbButton
            href={DHB_STORE.resident.apple}
            target="_blank" rel="noreferrer"
            size="lg"
            style={{ width: '100%' }}
            onClick={() => {setOpen(false);dhbTrack('install_click', { platform: 'apple', placement: 'mobile_menu' });}}>
            Open the App</DhbButton>
            <div style={{ marginTop: 14, fontSize: 12, color: DHB_T.slateLight, fontWeight: 600, textAlign: 'center' }}>
              Available on iOS &amp; Android
            </div>
          </aside>
        </div>
      }
    </React.Fragment>);

}
const navLinkStyle = {
  color: DHB_T.slate, fontSize: 14, fontWeight: 600,
  textDecoration: 'none', letterSpacing: -.1
};
const mobileNavLink = {
  padding: '14px 0',
  fontSize: 20, fontWeight: 700,
  color: DHB_T.ink, letterSpacing: -.5,
  textDecoration: 'none',
  borderBottom: `1px solid ${DHB_T.borderSoft}`
};

// ============================================================
// HERO PHONE — living product demo
// Plays the real order lifecycle on a loop: pick a dhobi → book →
// live tracking ticks → photo proof → delivered → 5-star rating.
// Falls back to the static dhobi-picker when reduced-motion is on
// or the phone is offscreen.
// ============================================================
const DEMO_VENDORS = [
{ name: 'Sai Laundry', person: 'Ramesh Sharma', area: 'Baner', rating: 4.9, orders: 312, eta: '25 min' },
{ name: 'Mauli Dhobi', person: 'Sushil Pawar', area: 'Baner West', rating: 4.8, orders: 248, eta: '32 min' },
{ name: 'Aishwarya Wash', person: 'Anita Kulkarni', area: 'Balewadi', rating: 4.7, orders: 184, eta: '40 min' }];

// phase → how long it holds before advancing (ms)
const DEMO_SCRIPT = [
['list', 2600], ['select', 900], ['press', 750],
['tracking', 2900], ['proof', 2600], ['delivered', 1900],
['rating', 3200], ['reset', 650]];

const DEMO_STAGES = [
'Order placed', 'Dhobi assigned', 'On the way',
'Picked up', 'Washing', 'Out for delivery', 'Delivered'];

function HeroPhone() {
  const reduced = useReducedMotion();
  const [ref, inView] = useInView({ threshold: 0.35 });
  const animate = inView && !reduced;

  const [step, setStep] = React.useState(0);          // index into DEMO_SCRIPT
  const [tick, setTick] = React.useState(0);          // timeline stages done
  const phase = DEMO_SCRIPT[step][0];

  // Advance the script while animating; freeze (and rewind) otherwise.
  React.useEffect(() => {
    if (!animate) { setStep(0); setTick(0); return; }
    const t = setTimeout(() => {
      setStep((s) => {
        const next = (s + 1) % DEMO_SCRIPT.length;
        if (next === 0) setTick(0);
        return next;
      });
    }, DEMO_SCRIPT[step][1]);
    return () => clearTimeout(t);
  }, [step, animate]);

  // Tick the tracking timeline: 4 stages during `tracking`, the rest by `delivered`.
  React.useEffect(() => {
    if (!animate) return;
    if (phase === 'tracking' && tick < 4) {
      const t = setTimeout(() => setTick((n) => n + 1), tick === 0 ? 350 : 560);
      return () => clearTimeout(t);
    }
    if ((phase === 'delivered' || phase === 'rating') && tick < 7) {
      const t = setTimeout(() => setTick((n) => n + 1), 380);
      return () => clearTimeout(t);
    }
  }, [phase, tick, animate]);

  const onTrackScreen = phase === 'tracking' || phase === 'proof' || phase === 'delivered' || phase === 'rating';
  const selected = phase === 'select' || phase === 'press';

  return (
    <div ref={ref} style={{
      width: 320, height: 640,
      borderRadius: 44,
      background: '#0F172A',
      padding: 8,
      boxShadow: '0 40px 80px -30px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06)',
      position: 'relative'
    }}>
      {/* Inner screen */}
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 36, overflow: 'hidden',
        background: DHB_T.bg,
        position: 'relative',
        display: 'flex', flexDirection: 'column',
        fontFamily: '"Plus Jakarta Sans", system-ui, sans-serif',
        color: DHB_T.ink,
        opacity: phase === 'reset' ? 0 : 1,
        transition: 'opacity .5s ease'
      }}>
        {/* Dynamic island */}
        <div style={{
          position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
          width: 92, height: 26, borderRadius: 14, background: '#0B1220', zIndex: 10
        }} />
        {/* Status bar */}
        <div style={{
          height: 44, padding: '0 26px 0 22px', flex: '0 0 auto',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontSize: 13, fontWeight: 700
        }}>
          <span style={{ fontFamily: '"Plus Jakarta Sans", system-ui', fontVariantNumeric: 'tabular-nums' }}>9:41</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ fontSize: 11, fontWeight: 700 }}>5G</span>
            <span style={{ width: 18, height: 10, borderRadius: 2.5, border: `1.4px solid ${DHB_T.ink}`, position: 'relative', display: 'inline-block' }}>
              <span style={{ position: 'absolute', inset: 1.5, background: DHB_T.ink, borderRadius: 1 }} />
            </span>
          </div>
        </div>

        {/* Swappable screens */}
        <div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
          <PhoneScreenList
            visible={!onTrackScreen}
            selected={selected}
            pressing={phase === 'press'} />
          <PhoneScreenTrack
            visible={onTrackScreen}
            phase={phase}
            tick={tick} />
        </div>
      </div>
    </div>);

}

// Screen A — the dhobi picker (the app's home screen)
function PhoneScreenList({ visible, selected, pressing }) {
  return (
    <div aria-hidden={!visible} style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      transform: visible ? 'translateX(0)' : 'translateX(-26%)',
      opacity: visible ? 1 : 0,
      transition: 'transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease',
      pointerEvents: 'none'
    }}>
      {/* App header */}
      <div style={{ padding: '6px 18px 4px' }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: DHB_T.slate, letterSpacing: 0.5, textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <IcLoc size={12} stroke={DHB_T.blue} /> Baner, Pune
        </div>
        <div style={{ fontSize: 22, fontWeight: 800, color: DHB_T.ink, letterSpacing: -0.6, lineHeight: 1.15, marginTop: 2 }}>
          Your nearby dhobis
        </div>
      </div>

      {/* Filter pills */}
      <div style={{ display: 'flex', gap: 8, padding: '12px 18px 0', overflow: 'hidden' }}>
        {['Wash & fold', 'Iron', 'Dry clean', 'Saree'].map((f, i) =>
        <div key={f} style={{
          padding: '6px 12px', borderRadius: 999,
          fontSize: 11, fontWeight: 700,
          background: i === 0 ? DHB_T.ink : DHB_T.surface,
          color: i === 0 ? '#fff' : DHB_T.ink,
          border: `1px solid ${i === 0 ? DHB_T.ink : DHB_T.border}`,
          whiteSpace: 'nowrap'
        }}>{f}</div>
        )}
      </div>

      {/* Vendor cards */}
      <div style={{ padding: '14px 18px 18px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {DEMO_VENDORS.map((v, i) => {
          const isTarget = i === 0;
          const lit = isTarget && selected;
          return (
            <div key={v.name} style={{
              background: lit ? DHB_T.blueWash : DHB_T.surface, borderRadius: 18,
              border: `1px solid ${isTarget ? DHB_T.blue : DHB_T.border}`,
              padding: 12,
              display: 'flex', gap: 12, alignItems: 'center',
              boxShadow: lit ?
              `0 0 0 3px ${DHB_T.blueWash}, 0 12px 26px -12px rgba(61,90,254,.45)` :
              isTarget ? '0 8px 20px -14px rgba(61,90,254,.25)' : 'none',
              transform: lit ? 'scale(1.03)' : 'scale(1)',
              transition: 'transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease'
            }}>
              <DhbAvatar name={v.person} size={48} seed={i} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 14, fontWeight: 800, color: DHB_T.ink, letterSpacing: -.2 }}>{v.name}</span>
                  <IcShield size={11} stroke={DHB_T.blue} weight={2.4} />
                </div>
                <div style={{ fontSize: 11, color: DHB_T.slate, fontWeight: 600, marginTop: 2 }}>
                  {v.person} · {v.area}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 5, fontSize: 11, fontWeight: 700, color: DHB_T.slate }}>
                  <DhbStars value={v.rating} size={10} />
                  <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>{v.rating}</span>
                  <span style={{ width: 3, height: 3, borderRadius: 2, background: DHB_T.slateLight }} />
                  <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>{v.orders} orders</span>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
                <span style={{
                fontSize: 10, fontWeight: 700, color: DHB_T.green,
                background: DHB_T.greenSoft, padding: '2px 7px', borderRadius: 999,
                fontFamily: '"JetBrains Mono", ui-monospace, monospace'
              }}>{v.eta}</span>
              </div>
            </div>);
        })}
      </div>

      {/* Sticky bottom Book button */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '12px 18px 24px',
        background: 'linear-gradient(to top, rgba(248,250,252,1) 60%, rgba(248,250,252,0) 100%)'
      }}>
        <div style={{
          width: '100%', height: 50, borderRadius: 14,
          background: pressing ? DHB_T.blueDeep : DHB_T.blue, color: '#fff',
          display: 'grid', placeItems: 'center',
          fontSize: 15, fontWeight: 800, letterSpacing: -.2,
          boxShadow: '0 10px 24px -10px rgba(61,90,254,.55)',
          transform: pressing ? 'scale(.96)' : 'scale(1)',
          transition: 'transform .2s ease, background .2s ease'
        }}>{pressing ? 'Booking…' : 'Book Sai Laundry · ₹0 now'}</div>
      </div>
    </div>);

}

// Screen B — live order tracking with photo proof + rating finale
function PhoneScreenTrack({ visible, phase, tick }) {
  const showProof = phase === 'proof' || phase === 'delivered' || phase === 'rating';
  const showRating = phase === 'rating';
  const delivered = tick >= 7;
  return (
    <div aria-hidden={!visible} style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      transform: visible ? 'translateX(0)' : 'translateX(100%)',
      opacity: visible ? 1 : 0,
      transition: 'transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease',
      pointerEvents: 'none'
    }}>
      {/* Header */}
      <div style={{ padding: '6px 18px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, color: DHB_T.slate, letterSpacing: 0.5, textTransform: 'uppercase' }}>
            Order #DH-2208
          </div>
          <div style={{ fontSize: 20, fontWeight: 800, color: DHB_T.ink, letterSpacing: -0.5, lineHeight: 1.15, marginTop: 2 }}>
            {delivered ? 'Delivered ✓' : 'Sai Laundry'}
          </div>
        </div>
        <span style={{
          padding: '5px 10px', borderRadius: 999,
          background: delivered ? DHB_T.greenSoft : DHB_T.blueWash,
          color: delivered ? '#047857' : DHB_T.blueDeep,
          fontSize: 10, fontWeight: 800, letterSpacing: .4,
          display: 'inline-flex', alignItems: 'center', gap: 5
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: delivered ? DHB_T.green : DHB_T.blue }} />
          {delivered ? 'DONE' : 'LIVE'}
        </span>
      </div>

      {/* Timeline */}
      <div style={{ padding: '2px 18px 0', flex: 1, minHeight: 0 }}>
        {DEMO_STAGES.map((label, i) => {
          const done = tick > i;
          const active = tick === i;
          const isLast = i === DEMO_STAGES.length - 1;
          return (
            <div key={label} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: '0 0 auto' }}>
                <div style={{
                  width: 17, height: 17, borderRadius: 9,
                  background: done ? DHB_T.green : active ? DHB_T.blue : DHB_T.border,
                  display: 'grid', placeItems: 'center', marginTop: 2, position: 'relative',
                  transition: 'background .3s ease'
                }}>
                  {active && <span style={{
                    position: 'absolute', inset: -4, borderRadius: 12,
                    background: 'rgba(61,90,254,.22)',
                    animation: 'dhbPulseHalo 1.3s ease-out infinite'
                  }} />}
                  {done && <IcCheck size={10} stroke="#fff" weight={3.4} />}
                  {active && <span style={{ width: 5, height: 5, borderRadius: 3, background: '#fff' }} />}
                </div>
                {!isLast &&
                <div style={{ width: 2, height: 16, background: DHB_T.border, marginTop: 2, position: 'relative', overflow: 'hidden' }}>
                  <span style={{
                    position: 'absolute', left: 0, right: 0, top: 0,
                    height: done ? '100%' : '0%',
                    background: DHB_T.green,
                    transition: 'height .35s ease'
                  }} />
                </div>}
              </div>
              <div style={{ paddingBottom: isLast ? 0 : 7 }}>
                <div style={{
                  fontSize: 13, fontWeight: active ? 800 : 700,
                  color: done || active ? DHB_T.ink : DHB_T.slateLight,
                  letterSpacing: -.1, transition: 'color .3s ease'
                }}>{label}</div>
              </div>
            </div>);
        })}
      </div>

      {/* Photo-proof card stamps in over the lower screen */}
      <div style={{
        position: 'absolute', left: 14, right: 14, bottom: 16,
        display: showProof ? 'block' : 'none'
      }}>
        {!showRating ?
        <div style={{
          background: DHB_T.surface, borderRadius: 16,
          border: `1px solid ${DHB_T.border}`, padding: 12,
          boxShadow: '0 18px 40px -18px rgba(15,23,42,.35)',
          animation: 'dhbPopIn .5s cubic-bezier(.34,1.56,.64,1) both'
        }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
              width: 38, height: 38, borderRadius: 12,
              background: DHB_T.greenSoft, display: 'grid', placeItems: 'center', flex: '0 0 auto'
            }}>
                <IcCamera size={19} stroke={DHB_T.green} weight={2.4} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 800, color: DHB_T.ink }}>Photo proof captured</div>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: DHB_T.slate, fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
                  12 items · ₹360 · counted with you
                </div>
              </div>
              <span style={{
              padding: '4px 8px', borderRadius: 8,
              background: DHB_T.ink, color: '#fff',
              fontSize: 9, fontWeight: 800, letterSpacing: .6,
              animation: 'dhbStamp .55s cubic-bezier(.34,1.56,.64,1) .35s both'
            }}>CAPTURED</span>
            </div>
          </div> :

        <div style={{
          background: DHB_T.surface, borderRadius: 16,
          border: `1px solid ${DHB_T.border}`, padding: 14,
          boxShadow: '0 18px 40px -18px rgba(15,23,42,.35)',
          animation: 'dhbPopIn .5s cubic-bezier(.34,1.56,.64,1) both',
          textAlign: 'center'
        }}>
            <div style={{ fontSize: 13, fontWeight: 800, color: DHB_T.ink }}>How was Sai Laundry?</div>
            <div style={{ marginTop: 8 }}>
              <DhbStars value={5} size={22} pop />
            </div>
            <div style={{
            marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '5px 12px', borderRadius: 999,
            background: DHB_T.greenSoft, color: '#047857',
            fontSize: 11, fontWeight: 800,
            fontFamily: '"JetBrains Mono", ui-monospace, monospace',
            animation: 'dhbStamp .55s cubic-bezier(.34,1.56,.64,1) .7s both'
          }}>
              <IcCheck size={12} stroke="#047857" weight={3} /> ₹360 paid · UPI
            </div>
          </div>
        }
      </div>

      {/* Camera flash on proof capture */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, background: '#fff',
        opacity: 0, pointerEvents: 'none',
        animation: phase === 'proof' ? 'dhbFlash .6s ease both' : 'none'
      }} />
    </div>);

}

// ============================================================
// HERO DECOR — aurora blobs + rising soap bubbles
// ============================================================
function HeroAurora({ mobile, play }) {
  const blobs = [
  { w: mobile ? 420 : 640, top: mobile ? 160 : 40,  right: mobile ? '-35%' : '4%',
    grad: 'radial-gradient(circle, rgba(61,90,254,0.20) 0%, rgba(61,90,254,0) 70%)',
    anim: 'dhbAuroraA 26s ease-in-out infinite alternate' },
  { w: mobile ? 320 : 520, top: mobile ? 380 : 320, right: mobile ? '40%' : '34%',
    grad: 'radial-gradient(circle, rgba(124,58,237,0.10) 0%, rgba(124,58,237,0) 70%)',
    anim: 'dhbAuroraB 34s ease-in-out infinite alternate' },
  { w: mobile ? 260 : 420, top: mobile ? -60 : -120, right: mobile ? '-10%' : '38%',
    grad: 'radial-gradient(circle, rgba(255,212,59,0.14) 0%, rgba(255,212,59,0) 70%)',
    anim: 'dhbAuroraC 30s ease-in-out infinite alternate' }];

  return (
    <React.Fragment>
      {blobs.map((b, i) =>
      <div key={i} aria-hidden style={{
        position: 'absolute',
        top: b.top, right: b.right,
        width: b.w, height: b.w,
        background: b.grad,
        filter: 'blur(42px)',
        animation: b.anim,
        animationPlayState: play ? 'running' : 'paused',
        willChange: 'transform',
        pointerEvents: 'none', zIndex: 0
      }} />
      )}
    </React.Fragment>);

}

// Deterministic bubble field — no Math.random so SSR/re-renders stay stable.
const BUBBLES = [
{ left: '6%',  size: 14, dur: 19, delay: 0,   sway: 18, o: .38 },
{ left: '16%', size: 8,  dur: 24, delay: 6,   sway: -12, o: .3 },
{ left: '30%', size: 18, dur: 22, delay: 11,  sway: 22, o: .34 },
{ left: '46%', size: 10, dur: 26, delay: 3,   sway: -16, o: .28 },
{ left: '60%', size: 13, dur: 20, delay: 14,  sway: 14, o: .36 },
{ left: '74%', size: 7,  dur: 25, delay: 8,   sway: -20, o: .3 },
{ left: '86%', size: 16, dur: 21, delay: 17,  sway: 16, o: .4 },
{ left: '93%', size: 9,  dur: 27, delay: 5,   sway: -10, o: .26 }];

function HeroBubbles({ mobile, play }) {
  const items = mobile ? BUBBLES.slice(0, 4) : BUBBLES;
  return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
      {items.map((b, i) =>
      <span key={i} style={{
        position: 'absolute', bottom: -24, left: b.left,
        width: b.size, height: b.size, borderRadius: '50%',
        background: 'radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0%, rgba(199,210,254,.5) 28%, rgba(61,90,254,.12) 100%)',
        boxShadow: 'inset 0 0 4px rgba(61,90,254,.25)',
        '--dhb-bubble-sway': `${b.sway}px`,
        '--dhb-bubble-o': b.o,
        animation: `dhbBubble ${b.dur}s linear ${b.delay}s infinite`,
        animationPlayState: play ? 'running' : 'paused',
        willChange: 'transform, opacity'
      }} />
      )}
    </div>);

}

// ============================================================
// HERO SECTION
// ============================================================
// One word of the staggered H1: clips its own rise-up animation.
function HeroWord({ children, order, on }) {
  return (
    <span style={{
      display: 'inline-block', overflow: 'hidden', verticalAlign: 'top',
      paddingBottom: '.12em', marginBottom: '-.12em'
    }}>
      <span style={{
        display: 'inline-block',
        transform: on ? 'translateY(0)' : 'translateY(115%)',
        transition: `transform .8s cubic-bezier(.16,1,.3,1) ${130 + order * 70}ms`
      }}>{children}</span>
    </span>);

}

function DhbHero({ mobile }) {
  const reduced = useReducedMotion();
  const y = useScrollY();
  const px = mobile ? DHB_PADM : DHB_PADD;

  // Section-level visibility gate so hero decor stops burning cycles offscreen.
  const [secRef, secInView] = useInView({ threshold: 0.05 });
  const playDecor = secInView && !reduced;

  // Headline choreography triggers on mount (hero is above the fold).
  const [wordsOn, setWordsOn] = React.useState(false);
  React.useEffect(() => {
    if (reduced) { setWordsOn(true); return; }
    const id = requestAnimationFrame(() => setWordsOn(true));
    return () => cancelAnimationFrame(id);
  }, [reduced]);

  // Float cards pop in after the phone lands.
  const [cardsIn, setCardsIn] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setCardsIn(true), reduced ? 0 : 750);
    return () => clearTimeout(t);
  }, [reduced]);

  // Pointer-follow tilt on the phone cluster (desktop only).
  const tilt = useTilt({ maxX: 3.4, maxY: 6 });
  const tiltHandlers = !mobile && !reduced ?
  { onMouseMove: tilt.onMouseMove, onMouseLeave: tilt.onMouseLeave } : {};

  const words1 = ['Skip', 'the', 'call.'];
  const words2 = ['Book', 'your', 'dhobi'];

  return (
    <section ref={secRef} data-screen-label="hero" data-dhb-zone="#F5F7FF" style={{
      position: 'relative', overflow: 'hidden',
      paddingTop: mobile ? 24 : 56,
      paddingBottom: mobile ? 56 : 96
    }}>
      {/* Dot grid background */}
      <DhbDotGrid opacity={0.05} />
      <HeroAurora mobile={mobile} play={playDecor} />
      <HeroBubbles mobile={mobile} play={playDecor} />

      <div style={{
        position: 'relative', zIndex: 1,
        maxWidth: DHB_MAX, margin: '0 auto', padding: `0 ${px}px`,
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.15fr 1fr',
        alignItems: 'center', gap: mobile ? 40 : 56
      }}>
        {/* LEFT — copy */}
        <div>
          <DhbReveal delay={0}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 999,
              background: DHB_T.blueWash, color: DHB_T.blueDeep,
              fontSize: 12, fontWeight: 800, letterSpacing: 0.4,
              marginBottom: mobile ? 18 : 22,
              border: `1px solid rgba(61,90,254,.12)`
            }}>
              <span style={{ position: 'relative', width: 8, height: 8 }}>
                <span style={{
                  position: 'absolute', inset: 0, borderRadius: 4, background: DHB_T.blue,
                  animation: reduced ? 'none' : 'dhbPulse 1.6s ease-out infinite'
                }} />
                <span style={{ position: 'absolute', inset: 1, borderRadius: 3, background: DHB_T.blue }} />
              </span>
              LIVE IN PUNE · MAY 2026
            </div>
          </DhbReveal>

          <DhbHeadline level={1} mobile={mobile}>
            {words1.map((w, i) =>
            <React.Fragment key={w}>
                <HeroWord order={i} on={wordsOn}>{w}</HeroWord>
                {i < words1.length - 1 && ' '}
              </React.Fragment>
            )}<br />
            {words2.map((w, i) =>
            <React.Fragment key={w}>
                <HeroWord order={i + 3} on={wordsOn}>{w}</HeroWord>
                {i < words2.length - 1 && ' '}
              </React.Fragment>
            )}<br />
            <HeroWord order={6} on={wordsOn}>in</HeroWord>{' '}
            <HeroWord order={7} on={wordsOn}>
              <DhbHighlight active={wordsOn} drawDelay={1050}>30 seconds</DhbHighlight>.
            </HeroWord>
          </DhbHeadline>

          <DhbReveal delay={160}>
            <p style={{
              margin: mobile ? '18px 0 0' : '22px 0 0',
              fontSize: mobile ? 17 : 20,
              lineHeight: 1.5, color: DHB_T.slate,
              fontWeight: 500, maxWidth: 520,
              textWrap: 'pretty'
            }}>
              Photo proof on every pickup. Live tracking. Pay via UPI when delivered.
            </p>
          </DhbReveal>

          <DhbReveal delay={240}>
            <div style={{
              marginTop: mobile ? 28 : 36,
              display: 'flex', alignItems: 'center', gap: 12,
              flexWrap: 'wrap'
            }}>
              <a href={DHB_STORE.resident.apple}
              target="_blank" rel="noreferrer"
              onClick={() => dhbTrack('install_click', { platform: 'ios', placement: 'hero' })}
              style={{ textDecoration: 'none' }}>
                <DhbStoreBadge variant="apple" />
              </a>
              <a href={DHB_STORE.resident.google}
              target="_blank" rel="noreferrer"
              onClick={() => dhbTrack('install_click', { platform: 'android', placement: 'hero' })}
              style={{ textDecoration: 'none' }}>
                <DhbStoreBadge variant="google" />
              </a>
            </div>
          </DhbReveal>

          <DhbReveal delay={320}>
            <a href="#vendors"
            onClick={() => dhbTrack('vendor_cta_click', { placement: 'hero_link' })}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              marginTop: mobile ? 16 : 20,
              color: DHB_T.slate, fontSize: 14, fontWeight: 700,
              textDecoration: 'none', letterSpacing: -.1
            }}>I run a laundry shop → <span style={{ marginLeft: -2, color: DHB_T.blue }}>join Dhobify</span></a>
          </DhbReveal>

          <DhbReveal delay={400}>
            <div style={{
              marginTop: mobile ? 28 : 40,
              display: 'flex',
              alignItems: mobile ? 'flex-start' : 'center',
              flexDirection: mobile ? 'column' : 'row',
              gap: mobile ? 10 : 14, flexWrap: 'wrap',
              fontSize: 13, color: DHB_T.slate, fontWeight: 600
            }}>
              {['No prepay', 'Same prices as your dhobi', 'UPI on delivery'].map((t, i) =>
              <React.Fragment key={t}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                    <IcCheck size={14} stroke={DHB_T.green} weight={3} /> {t}
                  </span>
                  {!mobile && i < 2 && <span style={{ width: 3, height: 3, borderRadius: 2, background: DHB_T.border }} />}
                </React.Fragment>
              )}
            </div>
          </DhbReveal>
        </div>

        {/* RIGHT — phone + floating cards */}
        <DhbReveal delay={150} distance={0} style={{
          position: 'relative',
          display: 'flex', alignItems: 'center',
          justifyContent: mobile ? 'center' : 'flex-end',
          minHeight: mobile ? 600 : 680
        }}>
          <div {...tiltHandlers} style={{ perspective: 1100 }}>
            <div ref={tilt.ref} style={{
              position: 'relative',
              transform: 'perspective(1100px)',
              transformStyle: 'preserve-3d',
              transition: 'transform .3s ease-out',
              willChange: 'transform'
            }}>
              <div style={{
                position: 'relative',
                transform: mobile ? 'scale(.86)' : 'scale(1)',
                transformOrigin: 'center',
                animation: reduced ? 'none' : 'dhbHeroPhone 800ms cubic-bezier(.16,1,.3,1) both'
              }}>
                <HeroPhone />
                {/* Floating card: photo proof */}
                <FloatCard
                  in={cardsIn} order={0}
                  parallax={y * -0.05}
                  compact={mobile}
                  style={mobile ? { top: 150, left: -16 } : { top: 36, right: -54 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{
                      width: mobile ? 28 : 36, height: mobile ? 28 : 36, borderRadius: 10,
                      background: DHB_T.greenSoft, color: '#047857',
                      display: 'grid', placeItems: 'center'
                    }}>
                      <IcCamera size={mobile ? 14 : 18} stroke={DHB_T.green} weight={2.4} />
                    </div>
                    <div>
                      <div style={{ fontSize: mobile ? 11 : 12, fontWeight: 800, color: DHB_T.ink }}>Photo proof captured</div>
                      {!mobile && <div style={{ fontSize: 10, fontWeight: 700, color: DHB_T.slate, fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>12 items · ₹360</div>}
                    </div>
                  </div>
                </FloatCard>
                {/* Floating card: rating (desktop only) */}
                <FloatCard
                  in={cardsIn} order={1}
                  parallax={y * 0.07}
                  hidden={mobile}
                  style={{ bottom: 130, left: -68 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <DhbAvatar name="Sushil Pawar" size={36} seed={1} />
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 800, color: DHB_T.ink }}>Sushil rated 5 stars</div>
                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, marginTop: 1 }}>
                        <DhbStars value={5} size={9} />
                        <span style={{ fontSize: 10, fontWeight: 700, color: DHB_T.slate }}>· 2 min ago</span>
                      </div>
                    </div>
                  </div>
                </FloatCard>
                {/* Floating card: live status */}
                <FloatCard
                  in={cardsIn} order={2}
                  parallax={y * -0.09}
                  compact={mobile}
                  style={mobile ? { bottom: 104, right: -14 } : { top: 280, right: -90 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ position: 'relative', width: 10, height: 10 }}>
                      <span style={{
                        position: 'absolute', inset: -4, borderRadius: 10,
                        background: 'rgba(16,185,129,.25)',
                        animation: reduced ? 'none' : 'dhbPulseHalo 1.4s ease-out infinite'
                      }} />
                      <span style={{ position: 'absolute', inset: 0, borderRadius: 5, background: DHB_T.green }} />
                    </div>
                    <div>
                      <div style={{ fontSize: mobile ? 11 : 12, fontWeight: 800, color: DHB_T.ink }}>Ramesh is on the way</div>
                      {!mobile && <div style={{ fontSize: 10, fontWeight: 700, color: DHB_T.slate, fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>ETA 6 min</div>}
                    </div>
                  </div>
                </FloatCard>
              </div>
            </div>
          </div>
        </DhbReveal>
      </div>
    </section>);

}

function FloatCard({ children, style, hidden, in: isIn = true, order = 0, parallax = 0, compact = false }) {
  const reduced = useReducedMotion();
  if (hidden) return null;
  const shown = isIn || reduced;
  return (
    <div style={{
      position: 'absolute',
      // Outer layer: entrance spring + scroll parallax (depth illusion)
      transform: shown ?
      `translateY(${reduced ? 0 : parallax.toFixed(1)}px) scale(${compact ? .92 : 1})` :
      `translateY(14px) scale(.6)`,
      opacity: shown ? 1 : 0,
      transition: `transform .6s cubic-bezier(.34,1.56,.64,1) ${order * 200}ms, opacity .45s ease ${order * 200}ms`,
      willChange: 'transform',
      zIndex: 2,
      ...style
    }}>
      <div style={{
        background: DHB_T.surface,
        border: `1px solid ${DHB_T.border}`,
        borderRadius: 14,
        padding: compact ? '8px 11px' : '10px 14px',
        boxShadow: '0 20px 40px -20px rgba(15,23,42,.18), 0 1px 0 rgba(255,255,255,.6) inset',
        animation: reduced ? 'none' : `${order % 2 ? 'dhbBobAlt' : 'dhbBob'} ${4.4 + order * 0.7}s ease-in-out ${order * 0.8}s infinite`
      }}>{children}</div>
    </div>);

}

// ============================================================
// VERIFIED DHOBIS
// Carousel: 3 visible on desktop, drag/swipe + nav arrows + auto-rotate
// ============================================================
const DHB_DHOBIS = [
{ name: 'Ramesh Sharma', shop: 'Sai Laundry', area: 'Baner', rating: 4.9, orders: 312, services: ['Wash & fold', 'Iron', 'Dry clean'], joined: 'Jan 2026' },
{ name: 'Sushil Pawar', shop: 'Mauli Dhobi', area: 'Baner West', rating: 4.8, orders: 248, services: ['Wash & fold', 'Saree care'], joined: 'Feb 2026' },
{ name: 'Anita Kulkarni', shop: 'Aishwarya Wash', area: 'Balewadi', rating: 4.8, orders: 184, services: ['Iron', 'Wash & fold'], joined: 'Feb 2026' },
{ name: 'Vikas Bhosale', shop: 'Shree Laundry', area: 'Baner', rating: 4.7, orders: 156, services: ['Dry clean', 'Suit care'], joined: 'Mar 2026' },
{ name: 'Manoj Gawde', shop: 'Crystal Dhobi', area: 'Aundh', rating: 4.9, orders: 142, services: ['Wash & fold', 'Iron'], joined: 'Mar 2026' },
{ name: 'Prakash Jadhav', shop: 'Royal Wash', area: 'Balewadi Phata', rating: 4.7, orders: 128, services: ['Iron', 'Saree care'], joined: 'Apr 2026' },
{ name: 'Sandip Kale', shop: 'Krishna Laundry', area: 'Baner', rating: 4.8, orders: 96, services: ['Wash & fold', 'Dry clean'], joined: 'Apr 2026' }];


function DhbStatTile({ label, value, mono = true }) {
  return (
    <div style={{
      padding: '14px 18px',
      borderRadius: 14, background: DHB_T.surface,
      border: `1px solid ${DHB_T.border}`,
      flex: '1 1 0', minWidth: 0
    }}>
      <div style={{
        fontSize: 28, fontWeight: 800, color: DHB_T.ink,
        letterSpacing: -.8,
        fontFamily: mono ? '"JetBrains Mono", ui-monospace, monospace' : 'inherit',
        fontVariantNumeric: 'tabular-nums',
        lineHeight: 1.1,
        overflow: 'hidden'
      }}><DhbOdometer text={value} /></div>
      <div style={{ fontSize: 12, fontWeight: 700, color: DHB_T.slate, marginTop: 4, letterSpacing: .2 }}>{label}</div>
    </div>);

}

function VerifiedDhobiCard({ d, seed }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: DHB_T.surface,
        border: `1px solid ${hover ? DHB_T.blue : DHB_T.border}`,
        borderRadius: 24,
        padding: 22,
        transition: 'transform .2s ease, box-shadow .2s ease, border-color .2s ease',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ?
        '0 24px 48px -24px rgba(61,90,254,.25)' :
        '0 1px 0 rgba(15,23,42,.02), 0 12px 28px -22px rgba(15,23,42,.18)',
        height: '100%',
        display: 'flex', flexDirection: 'column', gap: 16,
        position: 'relative', overflow: 'hidden'
      }}>
      {/* Shine sweep across the card face on hover */}
      {hover &&
      <span aria-hidden style={{
        position: 'absolute', top: 0, bottom: 0, left: 0, width: '45%',
        background: 'linear-gradient(105deg, rgba(61,90,254,0) 0%, rgba(61,90,254,.06) 50%, rgba(61,90,254,0) 100%)',
        animation: 'dhbShine .8s ease both',
        pointerEvents: 'none'
      }} />}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <DhbAvatar name={d.name} size={64} seed={seed} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 17, fontWeight: 800, color: DHB_T.ink, letterSpacing: -.3 }}>{d.name}</span>
            <span title="Verified by Dhobify" style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 18, height: 18, borderRadius: 9, background: DHB_T.blue,
              transform: hover ? 'scale(1.18)' : 'scale(1)',
              transition: 'transform .25s cubic-bezier(.34,1.56,.64,1)'
            }}><IcCheck size={11} stroke="#fff" weight={3.2} /></span>
          </div>
          <div style={{ fontSize: 13, color: DHB_T.slate, fontWeight: 600, marginTop: 2, letterSpacing: -.1 }}>
            {d.shop} · {d.area}
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <DhbStars value={Math.round(d.rating)} size={14} />
        <span style={{ fontSize: 13, fontWeight: 800, color: DHB_T.ink, fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
          {d.rating.toFixed(1)}
        </span>
        <span style={{ width: 3, height: 3, borderRadius: 2, background: DHB_T.border }} />
        <span style={{ fontSize: 13, fontWeight: 700, color: DHB_T.slate, fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
          {d.orders} orders
        </span>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {d.services.map((s) =>
        <span key={s} style={{
          padding: '4px 10px', borderRadius: 999,
          background: DHB_T.bg, color: DHB_T.ink,
          border: `1px solid ${DHB_T.border}`,
          fontSize: 11, fontWeight: 700
        }}>{s}</span>
        )}
      </div>
      <div style={{ flex: 1 }} />
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingTop: 12, borderTop: `1px dashed ${DHB_T.border}`,
        fontSize: 11, fontWeight: 700, color: DHB_T.slate, letterSpacing: .3, textTransform: 'uppercase'
      }}>
        <span>Joined {d.joined}</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: DHB_T.blue }}>
          <IcShield size={11} stroke={DHB_T.blue} weight={2.4} /> Verified
        </span>
      </div>
    </article>);

}

function DhbVerified({ mobile }) {
  const reduced = useReducedMotion();
  const px = mobile ? DHB_PADM : DHB_PADD;
  const perView = mobile ? 1 : 3;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const maxIdx = Math.max(0, DHB_DHOBIS.length - perView);

  // Drag/swipe state — dx in px while the pointer is down.
  const [dx, setDx] = React.useState(0);
  const [dragging, setDragging] = React.useState(false);
  const dragStart = React.useRef(null);

  const onPointerDown = (e) => {
    dragStart.current = { x: e.clientX, id: e.pointerId };
    setDragging(true);
    setPaused(true);
    if (e.currentTarget.setPointerCapture) {
      try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
    }
  };
  const onPointerMove = (e) => {
    if (!dragging || dragStart.current == null) return;
    setDx(e.clientX - dragStart.current.x);
  };
  const endDrag = () => {
    if (!dragging) return;
    setDragging(false);
    dragStart.current = null;
    setDx((d) => {
      if (d < -70) setIdx((i) => Math.min(maxIdx, i + 1));
      else if (d > 70) setIdx((i) => Math.max(0, i - 1));
      return 0;
    });
  };

  // Auto-rotate every 6s, pause on hover/drag.
  React.useEffect(() => {
    if (paused || reduced) return;
    const t = setInterval(() => {
      setIdx((i) => i >= maxIdx ? 0 : i + 1);
    }, 6000);
    return () => clearInterval(t);
  }, [paused, reduced, maxIdx]);

  // Stat values. There is no public stats endpoint yet — when the backend
  // grows one, fetch it here. (The old relative `/api/v1/stats` fetch could
  // never succeed on the static domain and only produced a console 404.)
  const stats = { dhobis: 127, orders: 4800, rating: 4.7 };

  return (
    <section data-screen-label="verified" data-dhb-zone="#F8FAFC" style={{
      paddingTop: mobile ? 56 : 96,
      paddingBottom: mobile ? 56 : 96,
      position: 'relative'
    }}>
      <DhbContainer mobile={mobile}>
        <DhbReveal>
          <DhbEyebrow>Verified Dhobis</DhbEyebrow>
        </DhbReveal>
        <div style={{
          marginTop: 14,
          display: 'flex', alignItems: 'flex-end',
          justifyContent: 'space-between', gap: 32,
          flexDirection: mobile ? 'column' : 'row'
        }}>
          <DhbReveal delay={80}>
            <DhbHeadline level={2} mobile={mobile} style={{ maxWidth: 720 }}>
              Pune's most trusted dhobis.<br />
              <span style={{ color: DHB_T.slate }}>All verified by us.</span>
            </DhbHeadline>
          </DhbReveal>
          <DhbReveal delay={140}>
            <p style={{
              margin: 0, color: DHB_T.slate, fontSize: 16, fontWeight: 500,
              lineHeight: 1.5, maxWidth: 360, textWrap: 'pretty'
            }}>
              We meet every dhobi in person. Check their shop. Verify their bank details.
              Only then they get listed.
            </p>
          </DhbReveal>
        </div>

        {/* Stat tiles — 2x2 on mobile, single row on desktop */}
        <DhbReveal delay={200}>
          <div style={{
            marginTop: mobile ? 28 : 40,
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr 1fr' : 'repeat(4, 1fr)',
            gap: 12
          }}>
            <DhbStatTile label="Verified dhobis" value={`${stats.dhobis.toLocaleString('en-IN')}+`} />
            <DhbStatTile label="Orders delivered" value={`${stats.orders.toLocaleString('en-IN')}+`} />
            <DhbStatTile label="Average rating" value={`${stats.rating.toFixed(1)} ★`} mono={false} />
            <DhbStatTile label="On-time pickup" value="97%" />
          </div>
        </DhbReveal>

        {/* Carousel */}
        <DhbReveal delay={260}>
          <div
            onMouseEnter={() => setPaused(true)}
            onMouseLeave={() => { setPaused(false); endDrag(); }}
            style={{ marginTop: mobile ? 28 : 36, position: 'relative' }}>
            <div
              onPointerDown={onPointerDown}
              onPointerMove={onPointerMove}
              onPointerUp={endDrag}
              onPointerCancel={endDrag}
              style={{
                overflow: 'hidden',
                margin: mobile ? `0 -${px}px` : '0',
                padding: mobile ? `8px ${px}px` : '8px',
                cursor: dragging ? 'grabbing' : 'grab',
                touchAction: 'pan-y'
              }}>
              <div style={{
                display: 'flex', gap: 20,
                transition: dragging || reduced ? 'none' : 'transform .5s cubic-bezier(.16,1,.3,1)',
                transform: `translateX(calc(-${idx} * (${100 / perView}% + ${20 * (perView - 1) / perView}px) + ${dx}px))`
              }}>
                {DHB_DHOBIS.map((d, i) =>
                <div key={d.name} style={{
                  flex: `0 0 calc(${100 / perView}% - ${20 * (perView - 1) / perView}px)`,
                  minWidth: 0,
                  userSelect: 'none'
                }}>
                    <VerifiedDhobiCard d={d} seed={i} />
                  </div>
                )}
              </div>
            </div>

            {/* Controls — page dots on all screens, arrow buttons desktop only */}
            <div style={{
              marginTop: mobile ? 18 : 24,
              display: 'flex', alignItems: 'center',
              justifyContent: mobile ? 'center' : 'space-between',
              gap: 16
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                {Array.from({ length: maxIdx + 1 }).map((_, i) =>
                <button key={i} onClick={() => setIdx(i)} aria-label={`Go to page ${i + 1}`} style={{
                  width: i === idx ? 28 : 8, height: 8, borderRadius: 4,
                  background: i === idx ? DHB_T.blue : DHB_T.border,
                  border: 'none', cursor: 'pointer', padding: 0,
                  transition: 'all .2s ease'
                }} />
                )}
              </div>
              {!mobile &&
              <div style={{ display: 'flex', gap: 8 }}>
                <CarouselNav dir={-1} disabled={idx === 0} onClick={() => setIdx((i) => Math.max(0, i - 1))} />
                <CarouselNav dir={1} disabled={idx >= maxIdx} onClick={() => setIdx((i) => Math.min(maxIdx, i + 1))} />
              </div>
              }
            </div>
          </div>
        </DhbReveal>
      </DhbContainer>
    </section>);

}
function CarouselNav({ dir, onClick, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} aria-label={dir < 0 ? 'Previous' : 'Next'} style={{
      width: 44, height: 44, borderRadius: 22,
      background: DHB_T.surface,
      border: `1px solid ${DHB_T.border}`,
      color: disabled ? DHB_T.slateLight : DHB_T.ink,
      display: 'grid', placeItems: 'center',
      cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? .5 : 1,
      transition: 'background .15s ease, transform .15s ease'
    }}
    onMouseEnter={(e) => {if (!disabled) e.currentTarget.style.background = DHB_T.bg;}}
    onMouseLeave={(e) => {e.currentTarget.style.background = DHB_T.surface;}}>
      <IcArrow size={18} style={{ transform: dir < 0 ? 'rotate(180deg)' : 'none' }} />
    </button>);

}

// --- export ---------------------------------------------------------
Object.assign(window, {
  DhbHeader, DhbHero, DhbVerified
});