/* global React, SAMPLE, fmt, I, MiniMap, CardHybrid, CardEditorial, CardUtility, HeroImg, SourceBadge, VisibilityDot */
// Responsive frames — show how the system behaves at desktop / tablet / mobile.
// These are STATIC snapshots inside fixed-width frames; the live prototype is
// the desktop board.

function FrameDesktop({ items }) {
  return (
    <div style={{ width: 1280, height: 880, background: 'var(--paper)', overflow: 'hidden', fontFamily: 'var(--sans)' }}>
      <MiniTopBar w={1280} />
      <MiniFilterBar w={1280} />
      <div style={{ padding: '20px 32px' }}>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 24, fontWeight: 500, letterSpacing: -0.4, color: 'var(--ink)' }}>Your diary</div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 12, fontStyle: 'italic', color: 'var(--ink-3)', marginTop: 4 }}>9 homes you've thought about so far. Take your time.</div>
        <div style={{ marginTop: 16, columnCount: 4, columnGap: 18 }}>
          {items.slice(0, 9).map((p) => (
            <div key={p.id} style={{ breakInside: 'avoid', marginBottom: 18 }}>
              <CardHybrid p={p} w={280} mapPeek={p.id === 'p2'} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function FrameTablet({ items }) {
  return (
    <div style={{ width: 820, height: 1100, background: 'var(--paper)', overflow: 'hidden', fontFamily: 'var(--sans)' }}>
      <MiniTopBar w={820} compact />
      <MiniFilterBar w={820} compact />
      <div style={{ padding: '20px 24px' }}>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500, letterSpacing: -0.4, color: 'var(--ink)' }}>Your diary</div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 12, fontStyle: 'italic', color: 'var(--ink-3)', marginTop: 4 }}>9 homes saved.</div>
        <div style={{ marginTop: 14, columnCount: 3, columnGap: 16 }}>
          {items.slice(0, 7).map((p) => (
            <div key={p.id} style={{ breakInside: 'avoid', marginBottom: 16 }}>
              <CardHybrid p={p} w={236} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function FrameMobile({ items }) {
  return (
    <div style={{ width: 390, height: 844, background: 'var(--paper)', overflow: 'hidden', fontFamily: 'var(--sans)', position: 'relative' }}>
      {/* mobile header */}
      <div style={{
        padding: '14px 16px 10px',
        background: 'rgba(247,243,236,.92)', backdropFilter: 'blur(12px)',
        borderBottom: '1px solid var(--line-2)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 22, height: 22, borderRadius: 5, background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 13 }}>H</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 600, letterSpacing: -0.2 }}>House Hunt Diary</div>
          <div style={{ flex: 1 }} />
          <button style={{ width: 30, height: 30, borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{I.plus(15)}</button>
        </div>
        <div style={{ marginTop: 10, position: 'relative' }}>
          <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-3)' }}>{I.search(13)}</span>
          <div style={{
            padding: '7px 12px 7px 32px', borderRadius: 999,
            background: 'var(--paper-2)', border: '1px solid var(--line-2)',
            fontSize: 12.5, color: 'var(--ink-3)',
          }}>Search neighborhoods, notes...</div>
        </div>
      </div>
      {/* horizontal filter chips */}
      <div className="no-scrollbar" style={{ padding: '10px 16px', display: 'flex', gap: 6, overflowX: 'auto', borderBottom: '1px solid var(--line-2)' }}>
        {['All', 'Shortlisted', 'Favorites', 'Visited', 'Inner SE', 'NE', 'NW'].map((t, i) => (
          <span key={t} style={{
            padding: '5px 10px', borderRadius: 999,
            background: i === 0 ? 'var(--ink)' : 'var(--paper-2)',
            color: i === 0 ? 'var(--paper)' : 'var(--ink-2)',
            fontSize: 11.5, fontWeight: 500, whiteSpace: 'nowrap',
            border: i === 0 ? 'none' : '1px solid var(--line-2)',
          }}>{t}</span>
        ))}
      </div>
      {/* content */}
      <div style={{ padding: '14px 12px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {items.slice(0, 6).map((p) => <MobileCard key={p.id} p={p} />)}
        </div>
      </div>
      {/* fab */}
      <div style={{
        position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)',
        padding: '10px 18px', borderRadius: 999,
        background: 'var(--ink)', color: 'var(--paper)',
        fontSize: 13, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6,
        boxShadow: 'var(--shadow-3)',
      }}>{I.plus(13)} Save a home</div>
    </div>
  );
}

function MobileCard({ p }) {
  const h = Math.round(170 * (p.aspect || 1));
  return (
    <div>
      <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', boxShadow: 'var(--shadow-1)' }}>
        <div className="hhd-img-ph" style={{
          width: '100%', height: h,
          '--ph-bg': p.color, '--ph-label': '""',
        }} />
        {p.source !== 'private' && (
          <div style={{
            position: 'absolute', top: 6, left: 6,
            padding: '2px 6px', borderRadius: 999,
            background: 'rgba(247,243,236,.92)',
            fontSize: 9.5, fontWeight: 500, color: 'var(--ink-2)',
          }}>via {p.source}</div>
        )}
        {p.visibility === 'public' && (
          <div style={{
            position: 'absolute', top: 6, right: 6,
            width: 18, height: 18, borderRadius: 999,
            background: 'rgba(247,243,236,.92)',
            color: 'var(--accent-ink)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{I.globe(10)}</div>
        )}
      </div>
      <div style={{ padding: '6px 2px 0' }}>
        <div style={{
          fontFamily: 'var(--serif)', fontSize: 12.5, fontWeight: 500,
          color: 'var(--ink)', lineHeight: 1.25,
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
        }}>{p.title}</div>
        <div style={{
          marginTop: 2, fontFamily: 'var(--serif)', fontSize: 10.5, fontStyle: 'italic',
          color: 'var(--ink-3)',
        }}>{p.neighborhood}</div>
        <div style={{ marginTop: 4, display: 'flex', justifyContent: 'space-between', fontSize: 10.5 }}>
          <span style={{ fontWeight: 600, color: 'var(--ink)' }}>{fmt.price(p.price)}</span>
          <span style={{ color: 'var(--ink-3)' }}>{p.beds ? `${p.beds}bd` : '·'} {p.baths ? `${p.baths}ba` : ''}</span>
        </div>
      </div>
    </div>
  );
}

// Mini chrome bits used by Frame components
function MiniTopBar({ w, compact }) {
  return (
    <div style={{
      padding: compact ? '10px 24px' : '12px 32px', borderBottom: '1px solid var(--line-2)',
      display: 'flex', alignItems: 'center', gap: 16,
      background: 'rgba(247,243,236,.92)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 22, height: 22, borderRadius: 5, background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 13 }}>H</div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 14, fontWeight: 600 }}>House Hunt Diary</div>
      </div>
      {!compact && (
        <div style={{ display: 'flex', gap: 2, marginLeft: 8 }}>
          {['Diary', 'Visited', 'Public', 'Map'].map((n, i) => (
            <span key={n} style={{ padding: '4px 10px', borderRadius: 6, fontSize: 11.5, fontWeight: i === 0 ? 600 : 500, color: i === 0 ? 'var(--ink)' : 'var(--ink-3)', background: i === 0 ? 'var(--paper-3)' : 'transparent' }}>{n}</span>
          ))}
        </div>
      )}
      <div style={{ flex: 1 }} />
      <div style={{
        width: compact ? 200 : 280, padding: '6px 12px 6px 30px',
        position: 'relative',
        border: '1px solid var(--line-2)', borderRadius: 999,
        background: 'var(--paper-2)',
        fontSize: 11.5, color: 'var(--ink-3)',
      }}>
        <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }}>{I.search(12)}</span>
        Search neighborhoods, notes...
      </div>
      <span style={{ padding: '6px 12px', borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)', fontSize: 11.5, fontWeight: 500, display: 'inline-flex', gap: 5, alignItems: 'center' }}>{I.plus(11)} Save</span>
    </div>
  );
}

function MiniFilterBar({ w, compact }) {
  const tabs = compact
    ? ['All', 'Shortlist', 'Favorites', 'Visited']
    : ['All saves', 'Shortlisted', 'Favorites', 'Visited', 'Private', 'Public'];
  return (
    <div style={{
      padding: compact ? '8px 24px' : '8px 32px',
      borderBottom: '1px solid var(--line-2)',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      {tabs.map((t, i) => (
        <span key={t} style={{
          padding: '4px 8px', borderRadius: 5,
          fontSize: 11.5, fontWeight: i === 0 ? 600 : 500,
          color: i === 0 ? 'var(--ink)' : 'var(--ink-3)',
          background: i === 0 ? 'var(--paper-3)' : 'transparent',
        }}>{t}</span>
      ))}
      <span style={{ width: 1, height: 14, background: 'var(--line-2)' }} />
      <span style={{ fontSize: 11.5, color: 'var(--ink-3)', display: 'inline-flex', gap: 4, alignItems: 'center' }}>{I.pin(12)} All regions</span>
      <span style={{ flex: 1 }} />
      <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>9 homes · Recently saved</span>
    </div>
  );
}

Object.assign(window, { FrameDesktop, FrameTablet, FrameMobile });