// v8 "Bloom Dream" — live, SCROLLABLE phone trio. Each phone renders the real
// Daily Doula Today screen (RealToday) inside a scrollable frame with a sticky
// bottom tab bar. The focused phone scrolls; hover or the stage pill brings a
// stage forward. Not a video — a live, scrollable app screen, like v6.

function DreamLiveTrio({ stage, setStage, p }) {
  const phones = [
    { id:'ttc',        accent:'#D9A035' },
    { id:'pregnancy',  accent:'#D9582C' },
    { id:'postpartum', accent:'#7C9569' },
  ];
  const ring = ['ttc','pregnancy','postpartum'];
  const role = (id) => {
    if (id === stage) return 'front';
    const i = ring.indexOf(id), f = ring.indexOf(stage);
    return i === (f + 2) % 3 ? 'left' : 'right';
  };
  const label = stage === 'ttc' ? 'trying to conceive' : stage === 'postpartum' ? 'postpartum' : 'pregnancy';

  const W = 236;
  const screenW = W - 12, screenH = Math.round(screenW * (844/390));
  const bezelH = screenH + 12;
  const pos = {
    front: { x:0,    rot:0,  scale:1,    z:10, dim:0 },
    left:  { x:-150, rot:-9, scale:0.83, z:4,  dim:0.36 },
    right: { x:150,  rot:9,  scale:0.83, z:4,  dim:0.36 },
  };

  return (
    <div style={{ position:'relative', width:560, height:bezelH + 54, margin:'0 auto',
      display:'flex', alignItems:'flex-start', justifyContent:'center' }}>
      {phones.map((ph) => {
        const r = role(ph.id); const ps = pos[r]; const isFront = r === 'front';
        return (
          <div key={ph.id}
            onClick={() => { if (!isFront) setStage(ph.id); }}
            style={{ position:'absolute', top:14, left:'50%', cursor:isFront?'default':'pointer',
              transform:`translateX(-50%) translateX(${ps.x}px) rotate(${ps.rot}deg) scale(${ps.scale})`,
              zIndex:ps.z, transition:'transform 0.55s cubic-bezier(.2,.8,.2,1)' }}>
            {isFront && <div aria-hidden="true" style={{ position:'absolute', inset:-26, borderRadius:54,
              background:'radial-gradient(circle at 50% 38%, rgba(246,182,164,0.5), transparent 68%)', filter:'blur(12px)', zIndex:-1 }} />}
            <div style={{ width:W, height:bezelH, background:'#1C140E', borderRadius:38, padding:6,
              boxShadow: isFront ? '0 46px 84px -36px rgba(58,42,34,0.55), 0 14px 30px -12px rgba(58,42,34,0.3)'
                                 : '0 30px 56px -30px rgba(58,42,34,0.4)', position:'relative' }}>
              <div style={{ width:screenW, height:screenH, borderRadius:32, overflow:'hidden', position:'relative', background:'#F6EDDE' }}>
                {/* scroll area — only the front phone scrolls. RealToday is authored at
                    390px and zoomed to the phone width so proportions match the real app. */}
                <div className="ra-scroll" style={{ position:'absolute', inset:0, overflowY:isFront?'auto':'hidden',
                  overflowX:'hidden', WebkitOverflowScrolling:'touch' }}>
                  <div style={{ zoom: screenW / 390 }}>
                    {ph.id === 'postpartum'
                      ? <RealDella stage={ph.id} />
                      : <><RealToday stage={ph.id} /><div style={{ height: 70 }} /></>}
                  </div>
                </div>
                {/* sticky tab bar (Today phones only; Della has its own input bar) */}
                {ph.id !== 'postpartum' && <RATabBar stage={ph.id} />}
                {/* dim veil on back phones */}
                {ps.dim > 0 && <div aria-hidden="true" style={{ position:'absolute', inset:0, background:`rgba(120,80,60,${ps.dim})`, borderRadius:32, zIndex:30 }} />}
                {/* notch */}
                <div aria-hidden="true" style={{ position:'absolute', top:8, left:'50%', transform:'translateX(-50%)', width:58, height:5, borderRadius:3, background:'rgba(42,27,20,0.18)', zIndex:25 }} />
              </div>
              {isFront && <div aria-hidden="true" style={{ position:'absolute', inset:-2, borderRadius:40, border:`2px solid ${ph.accent}`, opacity:0.45, pointerEvents:'none' }} />}
            </div>
          </div>
        );
      })}
      <div style={{ position:'absolute', bottom:4, left:0, right:0, textAlign:'center',
        fontFamily:dreamFonts.mono, fontSize:9.5, letterSpacing:'0.2em', textTransform:'uppercase', color:p.inkMute }}>
        tap a pill to switch · <span style={{ color:p.ink }}>{label}</span>
      </div>
    </div>
  );
}

Object.assign(window, { DreamLiveTrio });