// Hero phone — renders the REAL app screens (My Tracker, CPT Lookup, Analyze)
// at native 393px width, scaled to fit the device frame, cycling between them.
// Depends on window: RVU, PhoneShell, TabBar, DashboardV5, CPTV1, AnalyzeLoading.

const NATIVE_W = 393;
const VIEW_W = 320;
const SCALE = VIEW_W / NATIVE_W;
const VIEW_H = 560;        // visible screen content height (before tab bar)
const TABBAR_NATIVE = 58;  // approx natural tab-bar height at native scale

const SCREENS = [
  { id: 'tracker', tab: 'Tracker',   Comp: () => <DashboardV5/> },
  { id: 'lookup',  tab: 'CPTLookup', Comp: () => <CPTV1/> },
  { id: 'analyze', tab: 'Analyze',   Comp: () => <AnalyzeLoading/> },
];

function HeroPhoneApp() {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI(n => (n + 1) % SCREENS.length), 4200);
    return () => clearInterval(id);
  }, []);
  const activeTab = SCREENS[i].tab;

  return (
    <div style={{
      width: VIEW_W, background: RVU.bg,
      display: 'flex', flexDirection: 'column',
      fontFamily: RVU.fontUI,
    }}>
      {/* Screen viewport — crops the tall native screen */}
      <div style={{ position: 'relative', height: VIEW_H, overflow: 'hidden' }}>
        {SCREENS.map((s, idx) => (
          <div key={s.id} style={{
            position: 'absolute', inset: 0,
            opacity: idx === i ? 1 : 0,
            transition: 'opacity 0.6s ease',
            pointerEvents: 'none',
          }}>
            <div style={{ width: NATIVE_W, transform: `scale(${SCALE})`, transformOrigin: 'top left' }}>
              <s.Comp/>
            </div>
          </div>
        ))}
        {/* subtle fade so the crop edge doesn't look hard */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, height: 28,
          background: `linear-gradient(to bottom, ${RVU.bg}00, ${RVU.bg})`,
          pointerEvents: 'none',
        }}/>
      </div>

      {/* Persistent tab bar (reflects the active screen) */}
      <div style={{ height: TABBAR_NATIVE * SCALE, overflow: 'hidden' }}>
        <div style={{ width: NATIVE_W, transform: `scale(${SCALE})`, transformOrigin: 'top left' }}>
          <TabBar active={activeTab}/>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('phone-app-root')).render(<HeroPhoneApp/>);