// Scene 5: Shareability (23–28.5s)
// Camera pulls back to show the desktop app + a phone mirror.
// A "Mom" avatar appears, an edit ripples to the phone in real time.

function Scene5Share() {
  const { localTime, progress, duration } = useSprite();

  // Camera pulls back from Scene 4's zoomed view
  const camScale = interpolate([0, 0.8], [1.15, 0.78], Easing.easeInOutCubic)(localTime);
  const camTy = interpolate([0, 0.8], [-180, 30], Easing.easeInOutCubic)(localTime);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(180deg, ${TB.bgDeep} 0%, ${TB.bg} 100%)`,
      overflow: 'hidden',
    }}>
      {/* Subtle dot grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `radial-gradient(${TB.rail} 1.5px, transparent 1.5px)`,
        backgroundSize: '32px 32px',
        opacity: 0.5,
      }}/>

      {/* Desktop browser frame */}
      <div style={{
        position: 'absolute',
        left: 110, top: 130,
        width: 1180, height: 820,
        background: '#fff',
        borderRadius: 18,
        boxShadow: '0 30px 80px rgba(0,0,0,0.18), 0 8px 18px rgba(0,0,0,0.08)',
        transform: `scale(${camScale}) translateY(${camTy}px)`,
        transformOrigin: 'center top',
        overflow: 'hidden',
      }}>
        <BrowserChrome/>
        <div style={{ position: 'relative', height: 'calc(100% - 44px)', overflow: 'hidden' }}>
          <AppChrome localTime={1}/>
          <ScheduleRail nowMin={15*60+30}/>
        </div>
      </div>

      {/* Phone with same day */}
      <LocalSprite start={0.6} end={duration}>
        <PhoneMirror/>
      </LocalSprite>

      {/* Live edit ripple */}
      <LocalSprite start={2.2} end={4.4}>
        <LiveEditPulse/>
      </LocalSprite>

      {/* Caption */}
      <LocalSprite start={1.6} end={duration - 0.2}>
        <ShareCaption/>
      </LocalSprite>
    </div>
  );
}

function BrowserChrome() {
  return (
    <div style={{
      height: 44,
      background: '#f4f1ec',
      borderBottom: `1px solid ${TB.rail}`,
      display: 'flex', alignItems: 'center', padding: '0 16px', gap: 8,
    }}>
      <div style={{ display: 'flex', gap: 6 }}>
        <div style={{ width: 12, height: 12, borderRadius: 6, background: '#ff5f57' }}/>
        <div style={{ width: 12, height: 12, borderRadius: 6, background: '#febc2e' }}/>
        <div style={{ width: 12, height: 12, borderRadius: 6, background: '#28c840' }}/>
      </div>
      <div style={{
        flex: 1, marginLeft: 16,
        background: '#fff', height: 26, borderRadius: 7,
        display: 'flex', alignItems: 'center', padding: '0 12px',
        fontFamily: TB.mono, fontSize: 12, color: TB.muted,
        maxWidth: 380,
      }}>
        timeblind.app/share/alex
      </div>
    </div>
  );
}

function PhoneMirror() {
  const { localTime } = useSprite();
  const t = clamp(localTime / 0.6, 0, 1);
  const ease = Easing.easeOutBack(t);

  // Phone frame
  const phoneW = 360;
  const phoneH = 740;

  return (
    <div style={{
      position: 'absolute',
      right: 70, top: 170,
      width: phoneW, height: phoneH,
      transform: `translateX(${(1 - t) * 60}px) scale(${0.9 + 0.1 * ease}) rotate(${-3 + (1 - ease) * 6}deg)`,
      opacity: t,
      transformOrigin: 'center center',
    }}>
      {/* Phone bezel */}
      <div style={{
        position: 'absolute', inset: 0,
        background: '#1a1a1a',
        borderRadius: 48,
        boxShadow: '0 40px 80px rgba(0,0,0,0.35), 0 12px 24px rgba(0,0,0,0.18), inset 0 0 0 2px #2a2a2a',
        padding: 8,
      }}>
        {/* Screen */}
        <div style={{
          position: 'absolute', inset: 8,
          background: TB.bg,
          borderRadius: 40,
          overflow: 'hidden',
        }}>
          {/* Status bar */}
          <div style={{
            height: 44,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '14px 24px 0',
            fontFamily: TB.mono, fontSize: 13, fontWeight: 700, color: TB.fg,
          }}>
            <div>3:30</div>
            <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
              <div style={{ width: 16, height: 10, border: `1.5px solid ${TB.fg}`, borderRadius: 2 }}/>
            </div>
          </div>

          {/* Header */}
          <div style={{ padding: '12px 24px 8px' }}>
            <div style={{
              fontFamily: TB.mono, fontSize: 10, color: TB.orange,
              letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 700,
            }}>Mom's view</div>
            <div style={{
              fontFamily: TB.display, fontSize: 22, fontWeight: 800,
              color: TB.fg, letterSpacing: '-0.02em', marginTop: 2,
            }}>Alex · Tuesday</div>
          </div>

          {/* Mini blocks list */}
          <div style={{ padding: '8px 18px', display: 'flex', flexDirection: 'column', gap: 6 }}>
            {SCHEDULE.slice(2, 8).map((b, i) => {
              const isKids = b.id === 'kids';
              const isActive = b.id === 'kids';
              return (
                <div key={b.id} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '10px 12px',
                  background: b.color,
                  borderRadius: 10,
                  boxShadow: isActive ? `0 0 0 2px ${TB.orange}` : 'none',
                  position: 'relative',
                }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: 6,
                    background: 'rgba(0,0,0,0.18)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: '#fff', fontWeight: 800, fontSize: 12,
                  }}>{b.icon}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontFamily: TB.display, fontWeight: 700, fontSize: 13,
                      color: 'rgba(0,0,0,0.82)', whiteSpace: 'nowrap',
                      overflow: 'hidden', textOverflow: 'ellipsis',
                    }}>{b.title}</div>
                    <div style={{
                      fontFamily: TB.mono, fontSize: 10,
                      color: 'rgba(0,0,0,0.55)', fontWeight: 500, marginTop: 1,
                    }}>{fmtTime12(b.startMin)}</div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Notification toast (live edit) */}
          <LocalSprite start={1.6} end={4.0}>
            <LiveToast/>
          </LocalSprite>
        </div>

        {/* Notch */}
        <div style={{
          position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
          width: 110, height: 30, background: '#1a1a1a',
          borderRadius: '0 0 18px 18px',
        }}/>
      </div>
    </div>
  );
}

function LiveToast() {
  const { localTime, duration } = useSprite();
  const inT = clamp(localTime / 0.4, 0, 1);
  const outT = clamp((localTime - (duration - 0.4)) / 0.4, 0, 1);
  const o = Easing.easeOutBack(inT) * (1 - outT);
  const ty = (1 - inT) * 24;

  return (
    <div style={{
      position: 'absolute',
      left: 12, right: 12, bottom: 18,
      background: '#1f1d1a',
      color: TB.bg,
      padding: '12px 16px',
      borderRadius: 14,
      opacity: o,
      transform: `translateY(${ty}px)`,
      display: 'flex', alignItems: 'center', gap: 12,
      boxShadow: '0 12px 24px rgba(0,0,0,0.25)',
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: '50%', background: TB.lavender,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: TB.display, fontWeight: 800, fontSize: 12, color: '#3a1f5a',
      }}>AC</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: TB.display, fontSize: 12, fontWeight: 700 }}>
          Alex moved a block
        </div>
        <div style={{ fontFamily: TB.body, fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>
          Pick up kids → 3:30 pm
        </div>
      </div>
    </div>
  );
}

function LiveEditPulse() {
  const { localTime, duration } = useSprite();
  // Quick ripple animation
  const rippleT = clamp(localTime / 0.6, 0, 1);
  const ringScale = 1 + 6 * Easing.easeOutCubic(rippleT);
  const ringOpacity = 0.6 * (1 - rippleT);

  return (
    <div style={{
      position: 'absolute',
      // Approx position of the "kids" block on the desktop (within camera frame)
      // desktop frame top ~ 130 + chrome 44 + appchrome 76 + header... use absolute roughly
      left: 720, top: 740,
      width: 60, height: 60,
      pointerEvents: 'none',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: '50%',
        border: `3px solid ${TB.orange}`,
        transform: `scale(${ringScale})`,
        opacity: ringOpacity,
      }}/>
    </div>
  );
}

function ShareCaption() {
  const { localTime, duration } = useSprite();
  const inT = clamp(localTime / 0.4, 0, 1);
  const outT = clamp((localTime - (duration - 0.4)) / 0.4, 0, 1);
  const o = Easing.easeOutCubic(inT) * (1 - outT);

  return (
    <div style={{
      position: 'absolute',
      left: 60, bottom: 80,
      opacity: o,
      transform: `translateY(${(1 - inT) * 12}px)`,
    }}>
      <div style={{
        fontFamily: TB.mono, fontSize: 14, color: TB.orange,
        letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 700,
        marginBottom: 8,
      }}>Shareable</div>
      <div style={{
        fontFamily: TB.display, fontSize: 64, fontWeight: 800, color: TB.fg,
        letterSpacing: '-0.025em', lineHeight: 1.0, maxWidth: 720,
      }}>
        Your day, with<br/>the people in it.
      </div>
      <div style={{
        fontFamily: TB.body, fontSize: 18, color: TB.muted, fontWeight: 500,
        marginTop: 16, maxWidth: 540, lineHeight: 1.5,
      }}>
        Family, partners, support team — anyone you choose. Live, gentle, no app required.
      </div>
    </div>
  );
}

window.Scene5Share = Scene5Share;