/* Live phone preview — renders the Guest landing using the in-progress brand. */

function Phone({ palette, name, tagline, items, scale = 1 }) {
  const bg     = palette?.bg     || '#0b0805';
  const gold   = palette?.gold   || '#c8923a';
  const tx     = palette?.tx     || '#f0e8d8';
  const mu     = palette?.mu     || '#a09070';
  const s1     = palette?.s1     || '#15110a';
  const line   = palette?.line   || 'rgba(245,223,160,0.10)';

  const featured = (items || []).slice(0, 3);

  return (
    <div className="phone" style={{ transform: `scale(${scale})`, transformOrigin: 'top center' }}>
      <div className="phone-inner" style={{ background: bg, color: tx, fontFamily: 'var(--serif)' }}>
        {/* Status bar spacer */}
        <div style={{ height: 44 }} />

        {/* Header */}
        <div style={{
          padding: '20px 18px 14px',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          textAlign: 'center', borderBottom: `1px solid ${line}`,
        }}>
          <div style={{
            fontSize: 9, letterSpacing: '0.3em', textTransform: 'uppercase',
            color: gold, fontFamily: 'var(--sans)', fontWeight: 500,
          }}>
            {tagline || '— · —'}
          </div>
          <div style={{
            fontSize: 20, lineHeight: 1.1, marginTop: 8,
            letterSpacing: '-0.01em', fontStyle: 'italic',
            maxWidth: '100%',
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }} title={name || 'Mi Restaurante'}>
            {name || 'Mi Restaurante'}
          </div>
          <div style={{
            fontSize: 9, marginTop: 6, color: mu, fontFamily: 'var(--sans)',
            letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            Menú · Mesa 12
          </div>
        </div>

        {/* Featured carousel hint */}
        <div style={{ padding: '14px 18px 6px' }}>
          <div style={{
            fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: gold, fontFamily: 'var(--sans)', marginBottom: 10,
          }}>
            Especialidades
          </div>
        </div>

        {/* Item cards */}
        <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {featured.length === 0 && (
            <>
              <PreviewCardSkeleton tx={tx} mu={mu} s1={s1} line={line} />
              <PreviewCardSkeleton tx={tx} mu={mu} s1={s1} line={line} />
              <PreviewCardSkeleton tx={tx} mu={mu} s1={s1} line={line} />
            </>
          )}
          {featured.map(item => (
            <PreviewCard key={item.id} item={item} tx={tx} mu={mu} gold={gold} s1={s1} line={line} />
          ))}
        </div>

        {/* Bottom CTA */}
        <div style={{
          position: 'absolute', bottom: 14, left: 14, right: 14,
          padding: '10px 14px',
          background: s1, border: `1px solid ${line}`, borderRadius: 14,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--sans)',
        }}>
          <div>
            <div style={{ fontSize: 10, color: mu, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
              Tu pedido
            </div>
            <div style={{ fontSize: 15, color: tx, fontWeight: 500, marginTop: 2 }}>0 platos · $0</div>
          </div>
          <div style={{
            background: gold, color: bg, padding: '8px 14px',
            borderRadius: 999, fontSize: 12, fontWeight: 600,
          }}>
            Ordenar
          </div>
        </div>
      </div>
    </div>
  );
}

function PreviewCard({ item, tx, mu, gold, line, s1 }) {
  return (
    <div style={{
      background: s1, border: `1px solid ${line}`, borderRadius: 12,
      padding: '12px 14px', fontFamily: 'var(--sans)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10 }}>
        <div style={{
          fontFamily: 'var(--serif)', fontStyle: 'italic',
          fontSize: 15, color: tx, lineHeight: 1.15, flex: 1,
        }}>
          {typeof item.name === 'object' ? (item.name.es || item.name.en || '') : (item.name || '')}
        </div>
        <div style={{ color: gold, fontSize: 13, fontWeight: 600 }}>
          ${item.price}
        </div>
      </div>
      {(item.description || item.desc) && (
        <div style={{
          fontSize: 11, color: mu, marginTop: 6, lineHeight: 1.35,
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
        }}>
          {(() => { const d = item.description || item.desc; return typeof d === 'object' ? (d.es || d.en || '') : (d || ''); })()}
        </div>
      )}
    </div>
  );
}

function PreviewCardSkeleton({ tx, mu, s1, line }) {
  return (
    <div style={{
      background: s1, border: `1px solid ${line}`, borderRadius: 12,
      padding: '12px 14px',
    }}>
      <div className="pulse" style={{ height: 12, width: '60%', background: line, borderRadius: 6 }} />
      <div className="pulse" style={{ height: 8, width: '90%', background: line, borderRadius: 6, marginTop: 8 }} />
      <div className="pulse" style={{ height: 8, width: '40%', background: line, borderRadius: 6, marginTop: 4 }} />
    </div>
  );
}

window.FactoryPhone = Phone;