// ============================================================
// Dhobify landing v2 — How it works, Features, Pricing, Reviews, Vendor band
// Depends on _lib.jsx
// ============================================================

const {
  DHB_T: T2, DHB_MAX: MAX2, DHB_PADD: PADD2, DHB_PADM: PADM2, DHB_STORE: STORE2,
  dhbTrack: track2,
  useReducedMotion: useRM2, useMobile: useMobile2, useScrollY: useY2, useReveal: useReveal2,
  IcCheck: IcCheck2, IcCamera: IcCamera2, IcClock: IcClock2, IcLoc: IcLoc2, IcRupee: IcRupee2,
  IcStar: IcStar2, IcArrow: IcArrow2, IcShield: IcShield2, IcZap: IcZap2, IcShirt: IcShirt2, IcSparkle: IcSparkle2,
  IcApple: IcApple2, IcGoogle: IcGoogle2,
  DhbMark: Mark2, DhbWordmark: Word2,
  DhbButton: Btn2, DhbStoreBadge: Badge2, DhbEyebrow: Eb2, DhbHeadline: H2, DhbHighlight: Hl2,
  DhbReveal: Rv2, DhbContainer: Cont2, DhbDotGrid: Dot2, DhbAvatar: Av2, DhbStars: Stars2,
  DhbCountText: Count2
} = window;

// ============================================================
// HOW IT WORKS — scroll-driven journey line
// A dotted path draws itself as you scroll; a dot (your laundry)
// travels along it and lights each step up in turn.
// ============================================================
const HOW_STEPS = [
{ n: '01', title: 'Pick your dhobi', body: 'See verified neighborhood dhobis with real ratings.',
  color: T2.blue, iconColor: T2.blue, wash: 'rgba(61,90,254,.08)', glow: 'rgba(61,90,254,.45)', icon: 'pick' },
{ n: '02', title: 'Schedule a pickup', body: '30-second booking. Hand over your bag at your door.',
  color: T2.yellow, iconColor: '#B45309', wash: 'rgba(255,212,59,.16)', glow: 'rgba(214,158,8,.4)', icon: 'time' },
{ n: '03', title: 'Track every stage', body: 'Photo proof at pickup, in-wash status, out-for-delivery alerts.',
  color: T2.green, iconColor: '#047857', wash: 'rgba(16,185,129,.10)', glow: 'rgba(16,185,129,.4)', icon: 'track' },
{ n: '04', title: 'Pay when delivered', body: 'UPI, card, or cash — at your door, only when you have your laundry.',
  color: T2.violet, iconColor: T2.violet, wash: 'rgba(124,58,237,.08)', glow: 'rgba(124,58,237,.4)', icon: 'pay' }];


function StepIcon({ kind, color = T2.ink }) {
  if (kind === 'pick') return <IcShield2 size={22} stroke={color} weight={2.2} />;
  if (kind === 'time') return <IcClock2 size={22} stroke={color} weight={2.2} />;
  if (kind === 'track') return <IcCamera2 size={22} stroke={color} weight={2.2} />;
  if (kind === 'pay') return <IcRupee2 size={22} stroke={color} weight={2.2} />;
  return null;
}

// Each card closes with a tiny slice of the real app — the moment that step
// describes. Shared chrome here, content per step below.
function StepSnippet({ children }) {
  return (
    <div style={{
      marginTop: 'auto',
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '9px 12px', borderRadius: 12,
      background: T2.bg, border: `1px solid ${T2.borderSoft}`,
      fontSize: 11.5, fontWeight: 700, color: T2.ink,
      whiteSpace: 'nowrap', overflow: 'hidden'
    }}>{children}</div>);
}

function StepMini({ kind }) {
  if (kind === 'pick') return (
    <StepSnippet>
      <Av2 name="Ramesh Sharma" size={24} seed={0} />
      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>Sai Laundry</span>
      <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        <Stars2 value={5} size={9} />
        <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11 }}>4.9</span>
      </span>
    </StepSnippet>);
  if (kind === 'time') return (
    <StepSnippet>
      <IcClock2 size={14} stroke={T2.slate} weight={2.4} />
      <span>Today · 6–7 PM</span>
      <span style={{
        marginLeft: 'auto', padding: '2px 8px', borderRadius: 999,
        background: 'rgba(255,212,59,.25)', color: '#92400E', fontSize: 10, fontWeight: 800
      }}>FREE</span>
    </StepSnippet>);
  if (kind === 'track') return (
    <StepSnippet>
      <span style={{ position: 'relative', width: 8, height: 8, flex: '0 0 auto' }}>
        <span style={{ position: 'absolute', inset: 0, borderRadius: 4, background: T2.green }} />
      </span>
      <span>Picked up · photo proof</span>
      <IcCheck2 size={13} stroke={T2.green} weight={3.2} style={{ marginLeft: 'auto' }} />
    </StepSnippet>);
  if (kind === 'pay') return (
    <StepSnippet>
      <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 13, fontWeight: 800 }}>₹360</span>
      <span style={{ color: T2.slate, fontWeight: 600 }}>after delivery</span>
      <span style={{
        marginLeft: 'auto', padding: '2px 8px', borderRadius: 999,
        background: T2.greenSoft, color: '#047857', fontSize: 10, fontWeight: 800,
        display: 'inline-flex', alignItems: 'center', gap: 3
      }}>UPI ✓</span>
    </StepSnippet>);
  return null;
}

// The wavy rail above the step cards (desktop only). Node x-positions sit at
// the center of each grid column (12.5% / 37.5% / 62.5% / 87.5% of 1000).
const RAIL_D = 'M 125 56 Q 250 18 375 46 Q 500 74 625 40 Q 750 14 875 50';
const RAIL_NODES = [{ x: 125, y: 56 }, { x: 375, y: 46 }, { x: 625, y: 40 }, { x: 875, y: 50 }];

function JourneyRail({ progress, activeStep }) {
  const pathRef = React.useRef(null);
  const [len, setLen] = React.useState(0);
  React.useEffect(() => {
    if (pathRef.current) setLen(pathRef.current.getTotalLength());
  }, []);
  // Dot position along the path for the current progress.
  let dot = RAIL_NODES[0];
  if (pathRef.current && len > 0) {
    const p = pathRef.current.getPointAtLength(len * Math.min(1, Math.max(0, progress)));
    dot = { x: p.x, y: p.y };
  }
  return (
    <svg viewBox="0 0 1000 90" preserveAspectRatio="none" aria-hidden style={{
      width: '100%', height: 90, display: 'block', overflow: 'visible'
    }}>
      {/* Base: dotted route still to travel */}
      <path d={RAIL_D} fill="none" stroke={T2.border} strokeWidth="2.5"
        strokeDasharray="1 9" strokeLinecap="round" />
      {/* Progress: solid travelled segment */}
      <path ref={pathRef} d={RAIL_D} fill="none" stroke={T2.blue} strokeWidth="3"
        strokeLinecap="round"
        strokeDasharray={len || 1}
        strokeDashoffset={len ? len * (1 - Math.min(1, Math.max(0, progress))) : len || 1} />
      {/* Step nodes */}
      {RAIL_NODES.map((n, i) =>
      <g key={i}>
          <circle cx={n.x} cy={n.y} r="11"
          fill={activeStep >= i ? T2.blue : '#fff'}
          stroke={activeStep >= i ? T2.blue : T2.border} strokeWidth="2.5"
          style={{ transition: 'fill .3s ease, stroke .3s ease' }} />
          {activeStep >= i &&
        <path d={`M ${n.x - 4.5} ${n.y} l 3.2 3.4 l 6 -6.4`} fill="none"
          stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />}
        </g>
      )}
      {/* The travelling dot — your laundry on its way */}
      <g style={{ transform: `translate(${dot.x}px, ${dot.y}px)` }}>
        <circle r="16" fill="rgba(61,90,254,.16)" />
        <circle r="8" fill="#fff" stroke={T2.blue} strokeWidth="3" />
        <circle r="3" fill={T2.blue} />
      </g>
    </svg>);

}

function DhbHowItWorks({ mobile }) {
  const reduced = useRM2();
  const wrapRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);
  const [activeStep, setActiveStep] = React.useState(-1);
  const stepRef = React.useRef(-1);

  // Scroll-scrub via GSAP ScrollTrigger when available; otherwise the rail
  // renders fully drawn (same for reduced motion).
  React.useEffect(() => {
    if (mobile) return;
    const gsap = window.gsap;
    const ST = window.ScrollTrigger;
    if (!gsap || !ST || reduced) {
      setProgress(1); setActiveStep(3);
      return;
    }
    gsap.registerPlugin(ST);
    const st = ST.create({
      trigger: wrapRef.current,
      start: 'top 78%',
      end: 'bottom 45%',
      scrub: 0.5,
      onUpdate: (self) => {
        setProgress(self.progress);
        // 4 steps light up at 0 / 1/3 / 2/3 / 1 of the rail.
        const step = Math.min(3, Math.floor(self.progress * 3 + 0.04));
        if (step !== stepRef.current) {
          stepRef.current = step;
          setActiveStep(step);
        }
      }
    });
    return () => st.kill();
  }, [mobile, reduced]);

  const allActive = mobile || reduced;

  return (
    <section id="how" data-screen-label="how" data-dhb-zone="#FCFBF6" style={{
      paddingTop: mobile ? 56 : 96,
      paddingBottom: mobile ? 56 : 96
    }}>
      <Cont2 mobile={mobile}>
        <Rv2><Eb2>How it works</Eb2></Rv2>
        <Rv2 delay={80}>
          <H2 level={2} mobile={mobile} style={{ marginTop: 14, maxWidth: 760 }}>
            From bag to fresh in <Hl2 color={T2.yellow}>three taps</Hl2>.
          </H2>
        </Rv2>

        <div ref={wrapRef} style={{ marginTop: mobile ? 32 : 28 }}>
          {!mobile && <JourneyRail progress={progress} activeStep={activeStep} />}
          <div style={{
            marginTop: mobile ? 0 : 18,
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr' : 'repeat(4, 1fr)',
            gap: mobile ? 14 : 20
          }}>
            {HOW_STEPS.map((s, i) => {
              const active = allActive || activeStep >= i;
              const onYellow = s.color === T2.yellow;
              return (
                <Rv2 key={s.n} delay={i * 80}>
                  <article style={{
                    background: T2.surface,
                    borderRadius: 22, padding: 22,
                    border: `1px solid ${active ? 'transparent' : T2.border}`,
                    boxShadow: active ?
                    `0 0 0 1.5px ${s.color}, 0 1px 0 rgba(15,23,42,.02), 0 24px 44px -26px ${s.glow}` :
                    '0 1px 0 rgba(15,23,42,.02), 0 16px 32px -28px rgba(15,23,42,.18)',
                    height: '100%', minHeight: 268,
                    display: 'flex', flexDirection: 'column', gap: 14,
                    position: 'relative', overflow: 'hidden',
                    transition: 'transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, opacity .35s ease, border-color .35s ease',
                    transform: active ? 'translateY(-4px)' : 'translateY(0)',
                    opacity: active ? 1 : .65
                  }}>
                    {/* Per-step color wash bleeding from the top corner */}
                    <div aria-hidden style={{
                      position: 'absolute', top: -70, right: -70,
                      width: 210, height: 210, borderRadius: '50%',
                      background: `radial-gradient(circle, ${s.wash} 0%, rgba(255,255,255,0) 70%)`,
                      opacity: active ? 1 : .4,
                      transition: 'opacity .35s ease',
                      pointerEvents: 'none'
                    }} />
                    {/* Ghost numeral watermark */}
                    <div aria-hidden style={{
                      position: 'absolute', top: -18, right: 6,
                      fontFamily: '"JetBrains Mono", ui-monospace, monospace',
                      fontSize: 96, fontWeight: 700, lineHeight: 1,
                      letterSpacing: -6, color: s.color,
                      opacity: active ? .1 : .055,
                      transition: 'opacity .35s ease',
                      pointerEvents: 'none', userSelect: 'none'
                    }}>{s.n}</div>

                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, position: 'relative' }}>
                      <div style={{
                        width: 52, height: 52, borderRadius: 26,
                        background: active ? s.color : T2.surface,
                        color: active ? (onYellow ? T2.ink : '#fff') : T2.slate,
                        border: active ? '1px solid transparent' : `1px solid ${T2.border}`,
                        display: 'grid', placeItems: 'center',
                        fontFamily: '"JetBrains Mono", ui-monospace, monospace',
                        fontWeight: 700, fontSize: 17, letterSpacing: -.5,
                        boxShadow: active ? `0 10px 22px -10px ${s.color}` : 'none',
                        transition: 'background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease',
                        flex: '0 0 auto'
                      }}>{s.n}</div>
                      <div style={{
                        width: 44, height: 44, borderRadius: 14,
                        background: s.wash, display: 'grid', placeItems: 'center',
                        animation: active && !allActive ? 'dhbPopIn .45s cubic-bezier(.34,1.56,.64,1) both' : 'none'
                      }}>
                        <StepIcon kind={s.icon} color={s.iconColor} />
                      </div>
                    </div>
                    <div style={{ position: 'relative' }}>
                      <div style={{
                        fontSize: 19, fontWeight: 800, color: T2.ink,
                        letterSpacing: -.4, lineHeight: 1.2
                      }}>{s.title}</div>
                      <p style={{
                        margin: '8px 0 0', fontSize: 14.5, lineHeight: 1.55,
                        color: T2.slate, fontWeight: 500, textWrap: 'pretty'
                      }}>{s.body}</p>
                    </div>
                    <StepMini kind={s.icon} />
                  </article>
                </Rv2>);
            })}
          </div>
        </div>
      </Cont2>
    </section>);

}

// ============================================================
// FEATURE DEEP-DIVE — alternating asymmetric rows
// Every mock plays its own micro-story when scrolled into view.
// ============================================================
function PhotoProofMock() {
  const [ref, visible] = useReveal2({ threshold: 0.45 });
  const reduced = useRM2();
  const play = visible && !reduced;
  const done = visible; // final state for reduced motion / post-play
  return (
    <div ref={ref} style={{
      background: T2.surface, borderRadius: 22,
      border: `1px solid ${T2.border}`, padding: 16,
      boxShadow: '0 24px 48px -28px rgba(15,23,42,.18)'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <IcCamera2 size={16} stroke={T2.blue} />
          <span style={{ fontSize: 12, fontWeight: 800, color: T2.ink, letterSpacing: .4 }}>PHOTO PROOF</span>
        </div>
        <span style={{ fontSize: 12, fontWeight: 700, color: T2.slate, fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
          6:21 PM · Order #DH-2207
        </span>
      </div>
      <div style={{
        height: 240, borderRadius: 14, overflow: 'hidden', position: 'relative',
        background: '#E2E8F0'
      }}>
        <img
          src="landing-v2/img/feature-photo-proof.jpg"
          alt="Photo proof of a laundry bag full of clothes captured at pickup"
          loading="lazy"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center',
            display: 'block',
            // Slow Ken Burns push-in once the shot is "taken"
            transform: play ? 'scale(1.07)' : 'scale(1)',
            transition: 'transform 7s ease-out'
          }} />

        {/* Subtle vignette so the overlay chips stay readable */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(15,23,42,.15) 0%, rgba(15,23,42,0) 30%, rgba(15,23,42,0) 60%, rgba(15,23,42,.45) 100%)'
        }} />
        <div style={{
          position: 'absolute', left: 12, bottom: 12,
          background: 'rgba(15,23,42,.78)', color: '#fff',
          padding: '5px 12px', borderRadius: 999,
          fontSize: 11, fontWeight: 700, letterSpacing: .3,
          fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          opacity: done ? 1 : 0,
          transform: done ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity .4s ease .7s, transform .4s ease .7s'
        }}>12 items · ₹360 · counted with you</div>
        <div style={{
          position: 'absolute', right: 12, top: 12,
          background: 'rgba(255,255,255,.9)', color: T2.ink,
          padding: '4px 8px', borderRadius: 8,
          fontSize: 10, fontWeight: 800, letterSpacing: .3,
          display: 'inline-flex', alignItems: 'center', gap: 4,
          opacity: done ? 1 : 0,
          animation: play ? 'dhbStamp .55s cubic-bezier(.34,1.56,.64,1) .35s both' : 'none'
        }}><span style={{ width: 6, height: 6, borderRadius: 3, background: T2.green }} /> CAPTURED</div>
        {/* Shutter flash */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0, background: '#fff',
          opacity: 0, pointerEvents: 'none',
          animation: play ? 'dhbFlash .55s ease .1s both' : 'none'
        }} />
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
        {[1, 2, 3, 4].map((i) =>
        <div key={i} style={{
          flex: '1 1 0', height: 6, borderRadius: 3,
          background: T2.border, overflow: 'hidden'
        }}>
            {i === 1 &&
          <div style={{
            width: '100%', height: '100%', background: T2.blue, borderRadius: 3,
            transform: done ? 'scaleX(1)' : 'scaleX(0)', transformOrigin: 'left',
            transition: 'transform .7s cubic-bezier(.16,1,.3,1) .9s'
          }} />}
          </div>
        )}
      </div>
      <div style={{ display: 'flex', gap: 14, marginTop: 10, fontSize: 11, fontWeight: 700, color: T2.slate }}>
        <span>Pickup</span>
        <span style={{ color: T2.slateLight }}>Sorting</span>
        <span style={{ color: T2.slateLight }}>Drying</span>
        <span style={{ color: T2.slateLight }}>Delivery</span>
      </div>
    </div>);

}

const TL_STAGES = [
{ label: 'Order placed', time: '5:42 PM' },
{ label: 'Dhobi assigned', time: '5:44 PM' },
{ label: 'On the way', time: '5:58 PM' },
{ label: 'Picked up', time: '6:21 PM' },
{ label: 'Washing', time: 'Tomorrow' },
{ label: 'Out for delivery', time: '—' },
{ label: 'Delivered', time: '—' }];

function TimelineMock() {
  const [ref, visible] = useReveal2({ threshold: 0.45 });
  const reduced = useRM2();
  // tick = index of the currently-active stage; stages before it are done.
  const FINAL = 3;
  const [tick, setTick] = React.useState(-1);
  React.useEffect(() => {
    if (!visible) return;
    if (reduced) { setTick(FINAL); return; }
    if (tick < FINAL) {
      const t = setTimeout(() => setTick((n) => n + 1), tick < 0 ? 250 : 480);
      return () => clearTimeout(t);
    }
  }, [visible, tick, reduced]);

  return (
    <div ref={ref} style={{
      background: T2.surface, borderRadius: 22,
      border: `1px solid ${T2.border}`, padding: 22,
      boxShadow: '0 24px 48px -28px rgba(15,23,42,.18)'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, color: T2.slate, letterSpacing: .5, textTransform: 'uppercase' }}>Order #DH-2207</div>
          <div style={{ fontSize: 16, fontWeight: 800, color: T2.ink, letterSpacing: -.3, marginTop: 2 }}>
            {Math.max(0, tick + 1)} of 7 stages complete
          </div>
        </div>
        <span style={{
          padding: '5px 10px', borderRadius: 999,
          background: T2.greenSoft, color: '#047857',
          fontSize: 11, fontWeight: 800, letterSpacing: .4,
          display: 'inline-flex', alignItems: 'center', gap: 5
        }}><span style={{ width: 6, height: 6, borderRadius: 3, background: T2.green }} /> LIVE</span>
      </div>
      <div>
        {TL_STAGES.map((s, i) => {
          const isLast = i === TL_STAGES.length - 1;
          const done = i < tick;
          const active = i === tick;
          const future = !done && !active;
          const dot = done ? T2.green : active ? T2.blue : T2.border;
          return (
            <div key={s.label} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: '0 0 auto' }}>
                <div style={{
                  width: 18, height: 18, borderRadius: 9,
                  background: dot, display: 'grid', placeItems: 'center',
                  boxShadow: active ? `0 0 0 4px ${T2.blueWash}` : 'none',
                  marginTop: 3, position: 'relative',
                  transition: 'background .3s ease, box-shadow .3s ease'
                }}>
                  {active &&
                  <span aria-hidden style={{
                    position: 'absolute', inset: -4, borderRadius: 13,
                    background: 'rgba(61,90,254,.18)',
                    animation: 'dhbPulseHalo 1.4s ease-out infinite'
                  }} />}
                  {done && <IcCheck2 size={11} stroke="#fff" weight={3.2} />}
                  {active && <span style={{ width: 6, height: 6, borderRadius: 3, background: '#fff' }} />}
                </div>
                {!isLast &&
                <div style={{ width: 2, flex: 1, minHeight: 18, background: T2.border, marginTop: 2, position: 'relative', overflow: 'hidden' }}>
                  <span style={{
                    position: 'absolute', left: 0, right: 0, top: 0,
                    height: done ? '100%' : '0%',
                    background: T2.green,
                    transition: 'height .4s ease'
                  }} />
                </div>}
              </div>
              <div style={{ flex: 1, paddingBottom: isLast ? 0 : 12 }}>
                <div style={{
                  fontSize: 14, fontWeight: active ? 800 : 700,
                  color: future ? T2.slateLight : T2.ink, letterSpacing: -.1,
                  transition: 'color .3s ease'
                }}>
                  {s.label}
                </div>
                <div style={{
                  fontSize: 12, fontWeight: 600,
                  color: future ? T2.slateLight : T2.slate,
                  marginTop: 1, fontFamily: '"JetBrains Mono", ui-monospace, monospace',
                  transition: 'color .3s ease'
                }}>
                  {s.time}
                </div>
              </div>
            </div>);

        })}
      </div>
    </div>);

}

function PriceTableMock() {
  const [ref, visible] = useReveal2({ threshold: 0.45 });
  const rows = [
  { item: 'Shirt', price: 15, kind: 'Wash & iron' },
  { item: 'Trouser', price: 18, kind: 'Wash & iron' },
  { item: 'Saree', price: 40, kind: 'Hand wash' },
  { item: 'Bedsheet (single)', price: 30, kind: 'Wash & fold' },
  { item: 'Suit (2-piece)', price: 140, kind: 'Dry clean' },
  { item: 'Kurta', price: 22, kind: 'Wash & iron' }];

  return (
    <div ref={ref} style={{
      background: T2.surface, borderRadius: 22,
      border: `1px solid ${T2.border}`, padding: 22,
      boxShadow: '0 24px 48px -28px rgba(15,23,42,.18)'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, color: T2.slate, letterSpacing: .5, textTransform: 'uppercase' }}>Sai Laundry · Baner</div>
          <div style={{ fontSize: 16, fontWeight: 800, color: T2.ink, letterSpacing: -.3, marginTop: 2 }}>Their prices, not ours</div>
        </div>
        <span style={{
          padding: '5px 10px', borderRadius: 999,
          background: T2.blueWash, color: T2.blueDeep,
          fontSize: 11, fontWeight: 800, letterSpacing: .4,
          animation: visible ? 'dhbWiggle .7s ease 1s both' : 'none'
        }}>NO MARKUP</span>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
        <tbody>
          {rows.map((r, i) =>
          <tr key={r.item} style={{
            borderTop: i === 0 ? 'none' : `1px solid ${T2.borderSoft}`,
            opacity: visible ? 1 : 0,
            transition: `opacity .45s ease ${i * 90}ms`
          }}>
              <td style={{ padding: '10px 0', fontWeight: 700, color: T2.ink }}>{r.item}</td>
              <td style={{ padding: '10px 0', fontWeight: 500, color: T2.slate, fontSize: 12 }}>{r.kind}</td>
              <td style={{ padding: '10px 0', textAlign: 'right', fontWeight: 800, color: T2.ink, fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
                <Count2 value={r.price} prefix="₹" duration={700 + i * 120} />
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>);

}

function PaymentMock() {
  const [ref, visible] = useReveal2({ threshold: 0.45 });
  const reduced = useRM2();
  const play = visible && !reduced;
  return (
    <div ref={ref} style={{
      background: T2.surface, borderRadius: 22,
      border: `1px solid ${T2.border}`, padding: 22,
      boxShadow: '0 24px 48px -28px rgba(15,23,42,.18)'
    }}>
      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: T2.slate, letterSpacing: .5, textTransform: 'uppercase' }}>Pay on delivery</div>
        <div style={{ fontSize: 16, fontWeight: 800, color: T2.ink, letterSpacing: -.3, marginTop: 2 }}>You hold the money until you hold the laundry</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '14px 0', borderTop: `1px solid ${T2.borderSoft}`, borderBottom: `1px solid ${T2.borderSoft}` }}>
        <span style={{ fontSize: 13, fontWeight: 600, color: T2.slate }}>Total due now</span>
        <span style={{ fontSize: 28, fontWeight: 800, color: T2.ink, letterSpacing: -1, fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
          <Count2 value={120} prefix="₹" duration={900} />
        </span>
      </div>
      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
        { label: 'UPI · Any app', sub: 'GPay · PhonePe · Paytm · BHIM', glyph: 'upi', selected: true },
        { label: 'Cash', sub: 'Pay the dhobi directly', glyph: 'cash' },
        { label: 'Card', sub: 'Visa · Mastercard · Rupay', glyph: 'card' }].
        map((m, i) =>
        <div key={m.label} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '10px 14px', borderRadius: 12,
          background: m.selected ? T2.blueWash : T2.bg,
          border: `1px solid ${m.selected ? T2.blue : T2.border}`,
          transform: m.selected && play ? 'scale(1.02)' : 'scale(1)',
          transition: 'transform .35s cubic-bezier(.34,1.56,.64,1) .9s'
        }}>
            <div style={{
            width: 34, height: 34, borderRadius: 10,
            background: T2.surface, display: 'grid', placeItems: 'center',
            fontFamily: '"JetBrains Mono", ui-monospace, monospace',
            fontWeight: 800, fontSize: 11, color: m.selected ? T2.blueDeep : T2.ink,
            border: `1px solid ${m.selected ? T2.blue : T2.border}`,
            letterSpacing: -.3
          }}>{m.glyph === 'upi' ? 'UPI' : m.glyph === 'cash' ? '₹' : 'V/M'}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 800, color: T2.ink, letterSpacing: -.2 }}>{m.label}</div>
              <div style={{ fontSize: 11, fontWeight: 600, color: T2.slate, marginTop: 1 }}>{m.sub}</div>
            </div>
            <div style={{
            width: 18, height: 18, borderRadius: 9,
            border: `2px solid ${m.selected ? T2.blue : T2.border}`,
            background: m.selected ? T2.blue : 'transparent',
            display: 'grid', placeItems: 'center'
          }}>{m.selected &&
            <span style={{
              width: 6, height: 6, borderRadius: 3, background: '#fff',
              animation: play ? 'dhbPopIn .4s cubic-bezier(.34,1.56,.64,1) 1s both' : 'none'
            }} />}</div>
          </div>
        )}
      </div>
    </div>);

}

const FEATURES = [
{
  eyebrow: 'PHOTO PROOF',
  title: 'Photo proof at every step.',
  body: 'Every pickup, every delivery, every dispute — settled with a photo. No more "I gave you 12 shirts" arguments. The app counts with you.',
  bullets: ['Counted-with-you pickup', 'Geo-tagged & time-stamped', 'Replay any past order'],
  mock: PhotoProofMock
},
{
  eyebrow: 'LIVE TRACKING',
  title: 'Live tracking, status by status.',
  body: 'Know exactly where your laundry is. No more WhatsApp "where is my order?". Seven statuses, push notifications on each.',
  bullets: ['7 status checkpoints', 'Push when on the way back', 'Both sides see the same'],
  mock: TimelineMock
},
{
  eyebrow: 'PER-ITEM PRICING',
  title: 'Per-item pricing, set by your dhobi.',
  body: '₹15 a shirt. ₹40 a saree. No markup, no surge, no minimum order. Your dhobi sets the prices — Dhobify just shows them clearly.',
  bullets: ['No platform charge', 'No surge pricing', 'See prices before you book'],
  mock: PriceTableMock
},
{
  eyebrow: 'PAY ON DELIVERY',
  title: 'Pay only when delivered.',
  body: 'We never hold your money. You pay at the door — UPI, card, or cash — only after you have your fresh laundry.',
  bullets: ['UPI, card, or cash', 'No prepay, ever', 'Auto-receipt on the spot'],
  mock: PaymentMock
}];


function DhbFeatures({ mobile }) {
  return (
    <section data-screen-label="features" style={{
      paddingTop: mobile ? 48 : 80,
      paddingBottom: mobile ? 48 : 80,
      background: T2.surface,
      borderTop: `1px solid ${T2.border}`,
      borderBottom: `1px solid ${T2.border}`
    }}>
      <Cont2 mobile={mobile}>
        <Rv2><Eb2>What you get</Eb2></Rv2>
        <Rv2 delay={80}>
          <H2 level={2} mobile={mobile} style={{ marginTop: 14, maxWidth: 760 }}>
            Four small things that<br />make laundry feel solved.
          </H2>
        </Rv2>
        <div style={{ marginTop: mobile ? 40 : 64, display: 'flex', flexDirection: 'column', gap: mobile ? 48 : 96 }}>
          {FEATURES.map((f, i) => {
            const right = i % 2 === 1;
            const Mock = f.mock;
            return (
              <Rv2 key={f.title} distance={24}>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
                  gap: mobile ? 24 : 64,
                  alignItems: 'center'
                }}>
                  {/* Copy */}
                  <div style={{ order: mobile ? 0 : right ? 2 : 0 }}>
                    <Eb2>{f.eyebrow}</Eb2>
                    <h3 style={{
                      margin: '14px 0 0',
                      fontSize: mobile ? 28 : 36, fontWeight: 800,
                      letterSpacing: '-0.025em', lineHeight: 1.1,
                      color: T2.ink, textWrap: 'balance'
                    }}>{f.title}</h3>
                    <p style={{
                      margin: '14px 0 0',
                      fontSize: mobile ? 16 : 17, lineHeight: 1.55,
                      color: T2.slate, fontWeight: 500, maxWidth: 520,
                      textWrap: 'pretty'
                    }}>{f.body}</p>
                    <ul style={{
                      margin: '20px 0 0', padding: 0, listStyle: 'none',
                      display: 'flex', flexDirection: 'column', gap: 8
                    }}>
                      {f.bullets.map((b) =>
                      <li key={b} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 600, color: T2.ink }}>
                          <span style={{
                          width: 18, height: 18, borderRadius: 9,
                          background: T2.greenSoft, display: 'grid', placeItems: 'center',
                          flex: '0 0 auto'
                        }}><IcCheck2 size={11} stroke="#047857" weight={3.2} /></span>
                          {b}
                        </li>
                      )}
                    </ul>
                  </div>
                  {/* Mock */}
                  <div style={{ order: 1, position: 'relative' }}>
                    <div aria-hidden style={{
                      position: 'absolute', inset: -32,
                      background: `radial-gradient(circle at 50% 50%, ${T2.blueWash} 0%, transparent 70%)`,
                      borderRadius: '50%',
                      zIndex: 0, filter: 'blur(8px)'
                    }} />
                    <div style={{ position: 'relative', zIndex: 1 }}>
                      <Mock />
                    </div>
                  </div>
                </div>
              </Rv2>);

          })}
        </div>
      </Cont2>
    </section>);

}

// ============================================================
// PRICING TRANSPARENCY
// ============================================================
function PriceCell({ c, mobile }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: T2.surface,
        border: `1px solid ${hover ? T2.blue : T2.border}`,
        borderRadius: 20, padding: 22,
        display: 'flex', flexDirection: 'column', gap: 10,
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ?
        `0 0 0 3px ${T2.blueWash}, 0 24px 48px -22px rgba(61,90,254,.35)` :
        '0 1px 0 rgba(15,23,42,.02), 0 12px 28px -22px rgba(15,23,42,.18)',
        transition: 'transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease'
      }}>
      <div style={{
        width: 40, height: 40, borderRadius: 12,
        background: T2.blueWash, display: 'grid', placeItems: 'center',
        transform: hover ? 'scale(1.1) rotate(-4deg)' : 'scale(1)',
        transition: 'transform .25s cubic-bezier(.34,1.56,.64,1)'
      }}>{c.icon}</div>
      <div style={{
        fontSize: 32, fontWeight: 800,
        fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        letterSpacing: -1, color: T2.ink
      }}>
        <Count2 value={c.price} prefix="₹" duration={800} />
        <span style={{ fontSize: 13, color: T2.slate, fontWeight: 600, fontFamily: 'inherit', marginLeft: 4 }}>from</span>
      </div>
      <div>
        <div style={{ fontSize: 15, fontWeight: 800, color: T2.ink, letterSpacing: -.2 }}>{c.title}</div>
        <div style={{ fontSize: 12, fontWeight: 600, color: T2.slate, marginTop: 1 }}>{c.unit}</div>
      </div>
    </div>);

}

function DhbPricing({ mobile }) {
  const [chipRef, chipVis] = useReveal2();
  const cells = [
  { title: 'Wash & fold', price: 12, unit: 'per piece', icon: <IcShirt2 size={20} stroke={T2.blue} /> },
  { title: 'Iron only', price: 6, unit: 'per piece', icon: <IcZap2 size={20} stroke={T2.blue} /> },
  { title: 'Dry clean', price: 40, unit: 'per piece', icon: <IcSparkle2 size={20} stroke={T2.blue} /> }];

  return (
    <section id="pricing" data-screen-label="pricing" data-dhb-zone="#F5F8FF" style={{
      paddingTop: mobile ? 56 : 96,
      paddingBottom: mobile ? 56 : 96
    }}>
      <Cont2 mobile={mobile}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1.1fr',
          gap: mobile ? 32 : 56,
          alignItems: 'center'
        }}>
          <div>
            <Rv2><Eb2>Pricing</Eb2></Rv2>
            <Rv2 delay={80}>
              <H2 level={2} mobile={mobile} style={{ marginTop: 14 }}>
                What you pay = what<br />
                your <Hl2 active={chipVis} drawDelay={350}>dhobi charges</Hl2>.
              </H2>
            </Rv2>
            <Rv2 delay={140}>
              <p style={{
                margin: '18px 0 0',
                fontSize: mobile ? 16 : 17, lineHeight: 1.55,
                color: T2.slate, fontWeight: 500, maxWidth: 520,
                textWrap: 'pretty'
              }}>
                Your dhobi keeps 100% of what you pay — Dhobify takes 0% commission.
                We make money from a flat monthly subscription dhobis pay for the app,
                not from your laundry bill. No surge. No hidden fees. No "platform charge".
              </p>
            </Rv2>
            <Rv2 delay={200}>
              <div ref={chipRef} style={{
                marginTop: 24,
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '12px 16px', borderRadius: 14,
                background: T2.bg, border: `1px solid ${T2.border}`,
                fontSize: 13, fontWeight: 600, color: T2.slate,
                animation: chipVis ? 'dhbWiggle .7s ease .9s both' : 'none'
              }}>
                <IcShield2 size={16} stroke={T2.green} weight={2.4} />
                Exact prices vary per dhobi — see them in the app.
              </div>
            </Rv2>
          </div>
          <Rv2 delay={150}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
              gap: 12
            }}>
              {cells.map((c) =>
              <PriceCell key={c.title} c={c} mobile={mobile} />
              )}
            </div>
          </Rv2>
        </div>
      </Cont2>
    </section>);

}

// ============================================================
// REVIEWS — marquee with a scrapbook scatter
// ============================================================
const REVIEWS = [
{ name: 'Sushil', area: 'Baner', platform: 'apple', rating: 5, text: 'Picked up 3 saree blouses and an office shirt at 9 PM. Got them back next afternoon, ironed properly. Photo proof was a nice touch — no counting fights.' },
{ name: 'Priya', area: 'Balewadi', platform: 'google', rating: 5, text: 'My usual dhobi in the gully gets the work — Dhobify just makes booking him a 30-second job instead of three WhatsApp messages.' },
{ name: 'Rohan', area: 'Baner Road', platform: 'apple', rating: 5, text: 'Paid via UPI when the bag landed at my door. Exact rate I would have paid in cash. No "convenience fee" nonsense.' },
{ name: 'Ananya', area: 'Aundh', platform: 'apple', rating: 4, text: 'Pickup was 40 mins instead of the 30 they promised. But the live status was honest about it — no fake ETAs. Came back perfectly washed.' },
{ name: 'Karthik', area: 'Hinjewadi', platform: 'google', rating: 5, text: 'Finally a laundry app that does not feel like ordering pizza. They actually walked me through how my dhobi prices stuff. Refreshing.' },
{ name: 'Neha', area: 'Pashan', platform: 'google', rating: 5, text: 'Had a dry-clean emergency for a suit. Dhobi confirmed before accepting. Came back in 24 hours. Cheaper than the mall shop, too.' },
{ name: 'Vikram', area: 'Baner', platform: 'apple', rating: 5, text: 'Tried Dhobify because the WhatsApp group for my building wouldn\'t shut up about it. Now I am the annoying one in the group.' },
{ name: 'Sneha', area: 'Balewadi Phata', platform: 'google', rating: 5, text: 'Live tracking told me my bag was 3 minutes away. I had time to put pants on before opening the door. 10/10.' }];


function ReviewCard({ r, mobile, idx = 0 }) {
  // Scrapbook scatter: a deterministic per-card rotation + vertical nudge.
  const rot = ((idx * 7) % 5 - 2) * (mobile ? 0.3 : 0.55);
  const ty = ((idx * 11) % 7 - 3) * (mobile ? 0.6 : 1);
  return (
    <div className="dhb-review-card" style={{
      width: mobile ? 280 : 340, flex: '0 0 auto',
      background: T2.surface,
      border: `1px solid ${T2.border}`,
      borderRadius: 18, padding: mobile ? 16 : 20,
      display: 'flex', flexDirection: 'column', gap: 12,
      boxShadow: '0 1px 0 rgba(15,23,42,.02)',
      transform: `rotate(${rot}deg) translateY(${ty}px)`
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Stars2 value={r.rating} size={14} />
        {r.platform === 'apple' ?
        <IcApple2 size={16} fill={T2.ink} /> :
        <IcGoogle2 size={16} />}
      </div>
      <p style={{
        margin: 0, fontSize: 14.5, lineHeight: 1.55,
        color: T2.ink, fontWeight: 500, textWrap: 'pretty'
      }}>"{r.text}"</p>
      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Av2 name={r.name} size={32} seed={r.area.length} />
        <div>
          <div style={{ fontSize: 13, fontWeight: 800, color: T2.ink, letterSpacing: -.1 }}>{r.name}</div>
          <div style={{ fontSize: 11, fontWeight: 600, color: T2.slate }}>{r.area} · Pune</div>
        </div>
      </div>
    </div>);

}

function DhbReviews({ mobile }) {
  const reduced = useRM2();
  // Two rows scrolling in opposite directions for visual interest.
  const half = Math.ceil(REVIEWS.length / 2);
  const rowA = REVIEWS.slice(0, half);
  const rowB = REVIEWS.slice(half).concat(REVIEWS.slice(0, half));
  // Duplicate for seamless loop.
  return (
    <section data-screen-label="reviews" data-dhb-zone="#F8FAFC" style={{
      paddingTop: mobile ? 56 : 96,
      paddingBottom: mobile ? 56 : 96,
      position: 'relative', overflow: 'hidden'
    }}>
      <Cont2 mobile={mobile}>
        <Rv2><Eb2>Residents love it</Eb2></Rv2>
        <Rv2 delay={80}>
          <H2 level={2} mobile={mobile} style={{ marginTop: 14, maxWidth: 720 }}>
            Real reviews from real Punekars.
          </H2>
        </Rv2>
      </Cont2>
      <div style={{ marginTop: mobile ? 32 : 48, position: 'relative' }}>
        {/* fade masks — narrower on mobile so cards aren't swallowed */}
        <div aria-hidden style={{
          position: 'absolute', left: 0, top: 0, bottom: 0,
          width: mobile ? 40 : 120,
          background: `linear-gradient(to right, ${T2.bg}, transparent)`, zIndex: 2, pointerEvents: 'none'
        }} />
        <div aria-hidden style={{
          position: 'absolute', right: 0, top: 0, bottom: 0,
          width: mobile ? 40 : 120,
          background: `linear-gradient(to left, ${T2.bg}, transparent)`, zIndex: 2, pointerEvents: 'none'
        }} />
        <div className="dhb-marquee-track" style={{
          display: 'flex', gap: mobile ? 12 : 16,
          width: 'max-content',
          animation: reduced ? 'none' : 'dhbMarquee 60s linear infinite',
          paddingLeft: 16, paddingTop: 6, paddingBottom: 6
        }}>
          {/* Loop copies are aria-hidden so screen readers hear each review once */}
          {[...rowA, ...rowA, ...rowA].map((r, i) =>
          <div key={`a${i}`} aria-hidden={i >= rowA.length} style={{ display: 'contents' }}>
            <ReviewCard r={r} mobile={mobile} idx={i} />
          </div>
          )}
        </div>
        <div className="dhb-marquee-track" style={{
          display: 'flex', gap: mobile ? 12 : 16,
          width: 'max-content',
          animation: reduced ? 'none' : 'dhbMarqueeRev 70s linear infinite',
          paddingLeft: 16, marginTop: mobile ? 12 : 16,
          paddingTop: 6, paddingBottom: 6
        }}>
          {[...rowB, ...rowB].map((r, i) =>
          <div key={`b${i}`} aria-hidden={i >= rowB.length} style={{ display: 'contents' }}>
            <ReviewCard r={r} mobile={mobile} idx={i + 3} />
          </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// VENDOR RECRUITMENT BAND — dark slate
// ============================================================
function DarkStat2({ label, value, delta, mono }) {
  return (
    <div style={{
      background: 'rgba(255,255,255,.04)',
      border: '1px solid rgba(255,255,255,.08)',
      borderRadius: 14, padding: 14
    }}>
      <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,.55)', letterSpacing: .5, textTransform: 'uppercase' }}>{label}</div>
      <div style={{
        fontSize: 26, fontWeight: 800, color: '#fff',
        letterSpacing: -.6, marginTop: 4,
        fontVariantNumeric: 'tabular-nums',
        fontFamily: mono ? '"JetBrains Mono", ui-monospace, monospace' : 'inherit'
      }}>{value}</div>
      <div style={{ fontSize: 11, fontWeight: 700, color: T2.yellow, marginTop: 2 }}>{delta}</div>
    </div>);

}

function ClotheslineDecor({ play = true }) {
  return (
    <svg viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice" aria-hidden style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      opacity: 0.06, pointerEvents: 'none'
    }}>
      <defs>
        <linearGradient id="dhbCordG" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor="#fff" stopOpacity="0" />
          <stop offset=".25" stopColor="#fff" stopOpacity="1" />
          <stop offset=".75" stopColor="#fff" stopOpacity="1" />
          <stop offset="1" stopColor="#fff" stopOpacity="0" />
        </linearGradient>
      </defs>
      {[60, 200].map((y) =>
      <g key={y}>
          <path d={`M-20 ${y} Q 600 ${y + 60} 1220 ${y}`} stroke="url(#dhbCordG)" strokeWidth="1.5" fill="none" />
          {[120, 240, 360, 480, 600, 720, 840, 960, 1080].map((x, j) => {
          const sag = Math.sin(x / 1200 * Math.PI) * 60;
          const cy = y + sag;
          const w = 36 + j % 3 * 10;
          const h = 56 + j % 4 * 10;
          return (
            // Each garment sways around its clothespin (the top of the group).
            <g key={x} style={{
              transformBox: 'fill-box', transformOrigin: '50% 0%',
              animation: `dhbSway ${3.6 + j % 4 * 0.9}s ease-in-out ${-(j * 0.7 + y * 0.01)}s infinite alternate`,
              animationPlayState: play ? 'running' : 'paused'
            }}>
                <line x1={x} y1={cy} x2={x} y2={cy + 6} stroke="#fff" strokeWidth="1.2" />
                <rect x={x - w / 2} y={cy + 6} width={w} height={h} rx="4" fill="#fff" />
              </g>);

        })}
        </g>
      )}
    </svg>);

}

function DhbVendorBand({ mobile }) {
  const reduced = useRM2();
  const [secRef2, secVis2] = window.useInView ? window.useInView({ threshold: 0.05 }) : [null, true];
  return (
    <section ref={secRef2} id="vendors" data-screen-label="vendors" style={{
      background: T2.ink, color: '#fff',
      padding: mobile ? `64px ${PADM2}px` : `96px ${PADD2}px`,
      position: 'relative', overflow: 'hidden'
    }}>
      <ClotheslineDecor play={secVis2 && !reduced} />
      <div aria-hidden style={{
        position: 'absolute', right: '-15%', top: '-30%',
        width: 600, height: 600, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(255,212,59,.18) 0%, rgba(255,212,59,0) 70%)',
        filter: 'blur(40px)', pointerEvents: 'none',
        animation: 'dhbAuroraB 36s ease-in-out infinite alternate',
        animationPlayState: secVis2 && !reduced ? 'running' : 'paused'
      }} />
      <div style={{
        maxWidth: MAX2, margin: '0 auto', position: 'relative',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.2fr 1fr',
        gap: mobile ? 32 : 56,
        alignItems: 'center'
      }}>
        <div>
          <Rv2>
            <Eb2 color={T2.yellow}>For Dhobis</Eb2>
          </Rv2>
          <Rv2 delay={80}>
            <h2 style={{
              margin: '14px 0 0',
              fontSize: mobile ? 32 : 48, fontWeight: 800,
              letterSpacing: '-0.025em', lineHeight: 1.05,
              color: '#fff', textWrap: 'balance'
            }}>
              Run a laundry shop in Pune?<br />
              <span style={{ color: 'rgba(255,255,255,.6)' }}>Join 127+ dhobis already on Dhobify.</span>
            </h2>
          </Rv2>
          <Rv2 delay={140}>
            <ul style={{
              margin: '28px 0 0', padding: 0, listStyle: 'none',
              display: 'flex', flexDirection: 'column', gap: 12
            }}>
              {[
              'New customers nearby, without WhatsApp chaos.',
              'Set your own prices. 0% commission — every rupee is yours.',
              'Manage walk-in orders too: photo proof, tracking, customer khata. Free.'].
              map((b) =>
              <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: mobile ? 16 : 17, color: 'rgba(255,255,255,.85)', fontWeight: 500 }}>
                  <span style={{
                  width: 22, height: 22, borderRadius: 11,
                  background: 'rgba(255,212,59,.15)', display: 'grid', placeItems: 'center',
                  flex: '0 0 auto'
                }}><IcCheck2 size={13} stroke={T2.yellow} weight={3.2} /></span>
                  {b}
                </li>
              )}
            </ul>
          </Rv2>
          <Rv2 delay={200}>
            <div style={{ marginTop: 32, display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href={STORE2.vendor.apple} target="_blank" rel="noreferrer"
              onClick={() => track2('vendor_cta_click', { placement: 'vendor_band', platform: 'apple' })}
              style={{ textDecoration: 'none' }}>
                <Badge2 variant="apple" onDark />
              </a>
              <a href={STORE2.vendor.google} target="_blank" rel="noreferrer"
              onClick={() => track2('vendor_cta_click', { placement: 'vendor_band', platform: 'google' })}
              style={{ textDecoration: 'none' }}>
                <Badge2 variant="google" onDark />
              </a>
              <a href="https://wa.me/919272346508?text=Hi%20Dhobify%2C%20I%20run%20a%20laundry%20shop%20in%20Pune%20and%20want%20to%20become%20a%20partner."
              target="_blank" rel="noreferrer"
              onClick={() => track2('support_link_click', { placement: 'vendor_band', channel: 'whatsapp' })}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 14, fontWeight: 700, color: 'rgba(255,255,255,.85)',
                textDecoration: 'underline', textUnderlineOffset: 3, marginLeft: 8
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="#25D366" aria-hidden="true">
                  <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.74.46 3.42 1.31 4.91L2 22l5.34-1.4a9.88 9.88 0 004.7 1.2h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.86 9.86 0 0012.04 2zm0 18.05a8.15 8.15 0 01-4.15-1.14l-.3-.18-3.17.83.85-3.09-.19-.32a8.13 8.13 0 01-1.25-4.34c0-4.5 3.67-8.16 8.17-8.16 2.18 0 4.23.85 5.77 2.39a8.12 8.12 0 012.39 5.78c0 4.5-3.66 8.13-8.16 8.23zm4.47-6.1c-.24-.12-1.45-.72-1.67-.8-.22-.08-.39-.12-.55.12-.16.25-.63.8-.78.96-.14.16-.28.18-.53.06-.24-.12-1.04-.38-1.97-1.22-.73-.65-1.22-1.46-1.36-1.7-.14-.25-.02-.38.11-.5.11-.11.25-.28.37-.42.13-.14.16-.24.25-.4.08-.16.04-.3-.02-.42-.06-.12-.55-1.33-.76-1.82-.2-.48-.4-.42-.55-.42-.14-.01-.31-.01-.47-.01a.91.91 0 00-.66.31c-.22.25-.86.84-.86 2.05 0 1.21.88 2.38 1 2.54.12.16 1.74 2.66 4.22 3.73.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.45-.59 1.66-1.17.21-.57.21-1.07.14-1.17-.06-.1-.22-.16-.46-.28z" />
                </svg>
                WhatsApp us
              </a>
            </div>
          </Rv2>
        </div>
        {!mobile &&
        <Rv2 delay={200} distance={20}>
            <div style={{
            background: 'rgba(255,255,255,.04)',
            border: '1px solid rgba(255,255,255,.1)',
            borderRadius: 22, padding: 22,
            backdropFilter: 'blur(8px)'
          }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <Mark2 size={36} />
                <div>
                  <div style={{ fontSize: 14, fontWeight: 800, color: '#fff', letterSpacing: -.2 }}>Vendor dashboard</div>
                  <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,.5)', letterSpacing: .6, textTransform: 'uppercase' }}>Sai Laundry · This week</div>
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <DarkStat2 label="New bookings" value={<Count2 value={14} duration={800} />} delta="+3 today" mono />
                <DarkStat2 label="Earnings" value={<Count2 value={4820} prefix="₹" duration={1100} />} delta="UPI · settled" mono />
                <DarkStat2 label="Pickups done" value={<Count2 value={11} duration={800} />} delta="100% on time" mono />
                <DarkStat2 label="Repeat rate" value={<Count2 value={68} suffix="%" duration={1000} />} delta="+27% vs avg" mono />
              </div>
            </div>
          </Rv2>
        }
      </div>
    </section>);

}

// --- export ---------------------------------------------------------
Object.assign(window, {
  DhbHowItWorks, DhbFeatures, DhbPricing, DhbReviews, DhbVendorBand
});