// store-screens.jsx — app screens for the marketing phone preview.
// Exports to window: Phone, ScreenPortfolio

// minimal premium phone frame
function Phone({ children, w = 300, dark = false }) {
  const h = w * 2.06;
  return (
    <div style={{ width: w, height: h, background: dark ? '#0A201F' : '#11100D', borderRadius: w * 0.13, padding: w * 0.028,
      boxShadow: '0 40px 90px -34px rgba(15,43,42,0.55)', position: 'relative' }}>
      <div style={{ width: '100%', height: '100%', borderRadius: w * 0.105, overflow: 'hidden', background: dark ? 'var(--teal-dark)' : 'var(--cream)', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: `${w * 0.038}px ${w * 0.06}px ${w * 0.02}px`, fontFamily: 'var(--mono)', fontSize: w * 0.036, color: dark ? '#9FCFC8' : 'var(--ink-2)' }}>
          <span>9:41</span>
          <span style={{ letterSpacing: '1.5px' }}>●●●  100%</span>
        </div>
        {children}
      </div>
      <div style={{ position: 'absolute', top: w * 0.05, left: '50%', transform: 'translateX(-50%)', width: w * 0.30, height: w * 0.045, background: dark ? '#0A201F' : '#11100D', borderRadius: w * 0.04 }}></div>
    </div>
  );
}

const cond = { fontFamily: 'var(--cond)', textTransform: 'uppercase', fontWeight: 700 };

function Bar({ dark }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 18px 12px' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <PlatMark s={18} line={dark ? 'var(--teal-light)' : 'var(--teal-deep)'} fill={dark ? 'var(--teal-light)' : 'var(--teal)'} accent="var(--gold)" />
        <span className="serif wm-grad" style={{ fontSize: 18, fontWeight: 900, fontStyle: 'italic', ...(dark ? { backgroundImage: 'linear-gradient(135deg,#2AADA3,#4DC8BE)' } : {}) }}>Plat</span>
      </span>
      <span style={{ fontFamily: 'var(--mono)', fontSize: 9, color: dark ? '#6AABA4' : 'var(--muted)' }}>MAY 2026</span>
    </div>
  );
}

// Portfolio screen
function ScreenPortfolio({ dark }) {
  const cardBg = dark ? 'var(--teal-card)' : 'var(--white)';
  const sub = dark ? '#6AABA4' : 'var(--muted)';
  const txt = dark ? '#fff' : 'var(--ink)';
  return (
    <div>
      <Bar dark={dark} />
      <PortfolioChart dark={dark} compact />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', background: cardBg, borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'var(--border)'}` }}>
        {[['Equity', '$412K', 'var(--gold-deep)'], ['Rent', '$6.4K', 'var(--teal-deep)'], ['Cash', '+$1,180', 'var(--teal-deep)']].map(([l, v, c], i) => (
          <div key={i} style={{ padding: '12px 12px', borderRight: i < 2 ? `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'var(--border)'}` : 'none' }}>
            <div style={{ ...cond, fontSize: 8, letterSpacing: '0.1em', color: sub }}>{l}</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: dark && c === 'var(--gold-deep)' ? 'var(--gold-light)' : dark && c === 'var(--teal-deep)' ? 'var(--teal-light)' : c, marginTop: 2 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ ...cond, fontSize: 9, letterSpacing: '0.16em', color: sub, padding: '14px 18px 6px' }}>Your Properties</div>
      {[['1842 Mayfair Dr', 'Single Family · Phoenix', '+$412/mo', '$148K', false],
        ['88 Lakeview Blvd', 'Duplex · Austin', '+$830/mo', '$204K', false],
        ['210 Ridgeline Ave', 'Single Family · Raleigh', '-$62/mo', '$60K', true]].map(([a, ty, cf, eq, neg], i) => (
        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '13px 18px', background: cardBg, borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.06)' : 'var(--border-2)'}` }}>
          <div><div style={{ fontSize: 12.5, fontWeight: 600, color: txt }}>{a}</div><div style={{ fontSize: 10, color: sub, marginTop: 1 }}>{ty}</div></div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: neg ? (dark ? 'var(--neg-dark)' : 'var(--neg)') : (dark ? 'var(--teal-light)' : 'var(--teal-deep)') }}>{cf}</div>
            <div style={{ fontSize: 10, color: sub }}>{eq} equity</div>
          </div>
        </div>
      ))}
      <div style={{ background: dark ? '#1E3A28' : 'var(--cream-2)', borderTop: '2px solid var(--gold)', padding: '12px 18px', display: 'flex', gap: 10 }}>
        <span style={{ ...cond, fontSize: 9, color: 'var(--gold-deep)', border: '1px solid var(--gold)', padding: '2px 6px', alignSelf: 'flex-start' }}>AI</span>
        <p style={{ fontSize: 10.5, fontWeight: 300, color: dark ? '#C0DED8' : 'var(--ink-2)', lineHeight: 1.55 }}><strong style={{ color: dark ? 'var(--gold-light)' : 'var(--gold-deep)', fontWeight: 600 }}>This month:</strong> Lakeview gained $1,180 in equity. Raleigh is cash-flow negative.</p>
      </div>
    </div>
  );
}

Object.assign(window, { Phone, ScreenPortfolio });