// SHIFT — traditional inbox vs Scrub cards (the "aha" comparison)

function Shift() {
  return (
    <section className="rs-section" style={{
      position: 'relative', padding: '120px 0',
      background: 'var(--bg-cream)',
      color: 'var(--ink-cream)',
      overflow: 'hidden'
    }}>
      {/* faint grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(var(--hair-lt) 1px, transparent 1px), linear-gradient(90deg, var(--hair-lt) 1px, transparent 1px)`,
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
        opacity: 0.6,
        pointerEvents: 'none'
      }} />

      <div className="rs-container" style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ marginBottom: 60 }}>
          <Reveal>
            <SectionMark num="01" label="The Shift" />
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{
              fontFamily: 'var(--serif)', fontWeight: 400,
              fontSize: 'clamp(2.4rem, 5.5vw, 4.6rem)', lineHeight: 1,
              letterSpacing: '-0.03em',
              margin: '24px 0 16px',
              maxWidth: 900,
              textWrap: 'balance'
            }}>
              Your inbox has 2,847 emails.<br />
              You need <span className="italic" style={{ color: 'var(--accent)' }}>four</span>.
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{
              maxWidth: 540, fontSize: 17, lineHeight: 1.65,
              color: 'var(--ink-cream-mute)', fontWeight: 300, margin: 0
            }}>Every important thing surfaces as a card. Everything else stays out of your way.


            </p>
          </Reveal>
        </div>

        <div className="rs-shift-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 100px 1fr', gap: 0,
          alignItems: 'stretch', paddingTop: 48
        }}>
          {/* BEFORE */}
          <Reveal delay={300} className="rs-shift-before" style={{ paddingRight: 32 }}>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em',
              color: 'var(--ink-cream-faint)', marginBottom: 20
            }}>
              BEFORE — LIST OF EMAILS
            </div>
            <div className="rs-shift-before-list" style={{
              background: 'rgba(0,0,0,0.03)',
              border: '1px solid var(--hair-lt)',
              borderRadius: 14, padding: 18, height: 380, overflow: 'hidden',
              position: 'relative'
            }}>
              {[
              ['HDFC Bank', 'Your credit card statement…', '14 Apr'],
              ['LinkedIn', '5 new opportunities for you', '14 Apr'],
              ['Amazon.in', 'Order #402-9381 has shipped', '13 Apr'],
              ['Swiggy', 'It\'s biryani o\'clock 🍛', '13 Apr'],
              ['Anika Mehta', 'Re: contract review — needs your', '13 Apr'],
              ['Notion', 'Weekly digest from your team', '12 Apr'],
              ['Zomato Pro', 'Free delivery on every order!', '12 Apr'],
              ['ICICI Direct', 'Statement of holdings — Mar', '12 Apr'],
              ['Substack', 'New from 14 writers you follow', '11 Apr'],
              ['Glassdoor', 'Companies hiring near you', '11 Apr']].
              map(([from, subj, date], i) =>
              <div key={i} style={{
                display: 'flex', gap: 10, alignItems: 'center',
                padding: '8px 0', borderBottom: '1px solid var(--hair-lt)',
                opacity: 0.6
              }}>
                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ink-cream-mute)', flexShrink: 0 }} />
                  <div style={{ minWidth: 90, fontSize: 12, fontWeight: 500, color: 'var(--ink-cream)' }}>{from}</div>
                  <div style={{ flex: 1, fontSize: 12, color: 'var(--ink-cream-mute)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{subj}</div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-cream-faint)' }}>{date}</div>
                </div>
              )}
              <div style={{
                position: 'absolute', inset: 'auto 0 0 0', height: 100,
                background: 'linear-gradient(to bottom, transparent, var(--bg-cream))',
                display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
                padding: 20
              }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-cream-faint)' }}>2,837 more →</span>
              </div>
            </div>
            <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink-cream-faint)' }}>
              <span>chronological dump</span>
              <span className="mono">~47 min/day spent reading</span>
            </div>
          </Reveal>

          {/* DIVIDER with animated flow */}
          <div className="rs-shift-divider" style={{
            width: 100, position: 'relative',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <svg width="100" height="380" viewBox="0 0 100 380" style={{ overflow: 'visible' }}>
              <defs>
                <linearGradient id="shiftFlowG" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%" stopColor="rgba(232,112,90,0)" />
                  <stop offset="50%" stopColor="rgba(232,112,90,0.85)" />
                  <stop offset="100%" stopColor="rgba(232,112,90,0)" />
                </linearGradient>
              </defs>
              {(() => {
                // Center is at y=190 (height 380 / 2). Lines route from left endpoints,
                // bend toward the SCRUB pill at center, and emerge to right endpoints.
                // Above center: bow upward (control y < endpoint y). Below center: bow downward.
                const CY = 190;
                const lefts =  [60, 130, 250, 320];
                const rights = [60, 130, 250, 320];
                return lefts.map((yL, i) => {
                  const yR = rights[i];
                  // Concavity: lines above center bow up (lower y); lines below center bow down (higher y).
                  const above = yL < CY;
                  const bow = above ? -28 : 28;
                  const cy = ((yL + yR) / 2) + bow;
                  const path = `M 0 ${yL} Q 50 ${cy}, 100 ${yR}`;
                  return (
                    <g key={i}>
                      <path d={path} fill="none" stroke="url(#shiftFlowG)" strokeWidth="1.4" opacity="0.55" />
                      <circle r="2.4" fill="var(--accent)" opacity="0.95">
                        <animateMotion dur={`${3.2 + i * 0.3}s`} repeatCount="indefinite" path={path} />
                      </circle>
                    </g>
                  );
                });
              })()}
            </svg>
            <div style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
              fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em',
              color: 'var(--accent)', whiteSpace: 'nowrap',
              background: 'var(--bg-cream)', padding: '4px 10px', borderRadius: 4,
              border: '1px solid rgba(232,112,90,0.35)',
              boxShadow: '0 6px 18px rgba(232,112,90,0.18)'
            }}>SCRUB</div>
          </div>

          {/* AFTER */}
          <Reveal delay={500} className="rs-shift-after" style={{ paddingLeft: 32 }}>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em',
              color: 'var(--accent)', marginBottom: 20
            }}>
              AFTER — TODAY · 4 CARDS
            </div>
            <div className="rs-shift-after-list" style={{ display: 'flex', flexDirection: 'column', gap: 10, height: 380 }}>
              {[
              { k: 'PAYMENT DUE', t: '₹4,820', s: 'HDFC Credit Card · due 17 May', a: 'Pay now', c: 'var(--accent)' },
              { k: 'FLIGHT', t: 'DEL → BLR', s: 'Tue 14 May · 6:45 am · T3 G14', a: 'Check in', c: '#5567A8' },
              { k: 'REPLY NEEDED', t: 'Anika Mehta', s: 'contract review · overdue 2d', a: 'Quick reply', c: 'var(--accent-deep)' },
              { k: 'PARCEL', t: 'Amazon · 2 items', s: 'out for delivery · today', a: 'Track', c: '#5C8A6F' }].
              map((c, i) =>
              <div key={i} className="shift-after-card" style={{
                background: 'white',
                border: '1px solid var(--hair-lt)',
                borderRadius: 12, padding: '14px 16px',
                display: 'flex', alignItems: 'center', gap: 14,
                boxShadow: '0 4px 18px rgba(0,0,0,0.04)',
                flex: 1,
                animation: `shiftCardFloat 6.4s ease-in-out infinite`,
                animationDelay: `${i * 0.6}s`,
                willChange: 'transform'
              }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.18em', color: c.c, marginBottom: 4 }}>{c.k}</div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1, marginBottom: 4 }}>{c.t}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-cream-mute)' }}>{c.s}</div>
                  </div>
                  <button style={{
                  padding: '7px 12px', fontSize: 11.5, fontWeight: 500,
                  background: `${c.c}14`, color: c.c,
                  border: `1px solid ${c.c}30`, borderRadius: 8
                }}>{c.a} →</button>
                </div>
              )}
            </div>
            <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--accent-deep)', fontWeight: 500 }}>
              <span>action-first</span>
              <span className="mono">~3 min/day</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

window.Shift = Shift;