// PhoneMock.jsx — A simplified iPhone-shaped mockup of the customer app
// Used inside the landing for "screenshot reali". Self-contained, no dependencies.

function PhoneMock({ accent = '#C8841A', secondary = '#6B7F47', label = 'Cascina dei Lupi', screen = 'home' }) {
  const beige = '#F5EDD5';
  const white = '#FFFFFF';
  const sand = '#D4C5A9';
  const brown = '#5C3D0A';
  const text = '#2D2D2D';
  const FFD = "'Lora', Georgia, serif";
  const FFB = "'Nunito', sans-serif";

  return (
    <div style={{
      width: 280, height: 560,
      background: '#1a1a1a',
      borderRadius: 42,
      padding: 8,
      boxShadow: '0 30px 60px -20px rgba(92,61,10,0.35), 0 12px 30px -10px rgba(92,61,10,0.2)',
      position: 'relative',
    }}>
      {/* screen */}
      <div style={{
        width: '100%', height: '100%',
        background: beige,
        borderRadius: 34,
        overflow: 'hidden',
        position: 'relative',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* notch */}
        <div style={{
          position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
          width: 90, height: 22, background: '#1a1a1a', borderRadius: 12, zIndex: 5,
        }}/>
        {/* status bar */}
        <div style={{
          height: 38, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '0 22px', fontSize: 11, fontFamily: FFB, fontWeight: 600, color: brown,
        }}>
          <span>9:41</span>
          <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            <span style={{ fontSize: 9 }}>●●●</span>
            <span style={{ fontSize: 9 }}>📶</span>
          </span>
        </div>

        {screen === 'home' && (
          <div style={{ flex: 1, padding: '8px 18px 0', overflow: 'hidden' }}>
            {/* greeting */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
              <div>
                <div style={{ fontFamily: FFB, fontSize: 13, color: text, opacity: 0.7 }}>Ciao, Marco! 👋</div>
                <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 19, color: brown, marginTop: 2 }}>Prenota le tue uova</div>
              </div>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: accent, display: 'grid', placeItems: 'center',
                color: white, fontFamily: FFB, fontWeight: 700,
              }}>M</div>
            </div>

            {/* Card 1 */}
            <div style={{ background: white, border: `1px solid ${sand}`, borderRadius: 14, padding: 12, marginBottom: 10 }}>
              <div style={{ fontFamily: FFB, fontWeight: 700, fontSize: 9, letterSpacing: 1, color: accent }}>DATA DI RITIRO</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
                <span style={{ width: 16, height: 16, color: accent, fontSize: 14 }}>📅</span>
                <span style={{ fontFamily: FFB, fontSize: 13, color: text }}>Lunedì 12 maggio</span>
              </div>
            </div>

            {/* Card 2 */}
            <div style={{ background: white, border: `1px solid ${sand}`, borderRadius: 14, padding: 12, marginBottom: 10 }}>
              <div style={{ fontFamily: FFB, fontWeight: 700, fontSize: 9, letterSpacing: 1, color: accent }}>CONFEZIONI</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6 }}>
                <span style={{ fontFamily: FFB, fontSize: 11, color: secondary, fontWeight: 600 }}>12 disponibili</span>
                <div style={{
                  display: 'inline-flex', alignItems: 'center',
                  background: white, border: `1px solid ${sand}`,
                  borderRadius: 20, padding: 2,
                }}>
                  <div style={{ width: 22, height: 22, color: accent, display: 'grid', placeItems: 'center', fontWeight: 700 }}>−</div>
                  <span style={{ width: 24, textAlign: 'center', fontFamily: FFD, fontWeight: 700, fontSize: 14, color: brown }}>3</span>
                  <div style={{ width: 22, height: 22, color: accent, display: 'grid', placeItems: 'center', fontWeight: 700 }}>+</div>
                </div>
              </div>
            </div>

            {/* Card 3 */}
            <div style={{ background: white, border: `1px solid ${sand}`, borderRadius: 14, padding: 12, marginBottom: 12 }}>
              <div style={{ fontFamily: FFB, fontWeight: 700, fontSize: 9, letterSpacing: 1, color: accent }}>PUNTO DI RITIRO</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
                <span style={{ fontSize: 13 }}>📍</span>
                <span style={{ fontFamily: FFB, fontSize: 13, color: text }}>{label}</span>
              </div>
            </div>

            {/* CTA */}
            <button style={{
              width: '100%', height: 42, borderRadius: 22, border: 'none',
              background: accent, color: white,
              fontFamily: FFB, fontWeight: 700, fontSize: 13,
            }}>Prenota</button>
          </div>
        )}

        {screen === 'shop' && (
          <div style={{ flex: 1, padding: '8px 18px 0', overflow: 'hidden' }}>
            <div style={{ marginBottom: 14 }}>
              <div style={{ fontFamily: FFB, fontSize: 13, color: text, opacity: 0.7 }}>Bottega della cascina</div>
              <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 19, color: brown, marginTop: 2 }}>I nostri prodotti</div>
            </div>
            {[
              { name: 'Uova fresche', price: '4,50 €', meta: '6 pezzi', emoji: '🥚', stock: '12 disponibili' },
              { name: 'Miele millefiori', price: '8,00 €', meta: 'vasetto 500g', emoji: '🍯', stock: '5 disponibili' },
              { name: 'Olio EVO', price: '14,00 €', meta: 'bottiglia 750ml', emoji: '🫒', stock: '8 disponibili' },
              { name: 'Latte intero', price: '2,20 €', meta: 'bottiglia 1L', emoji: '🥛', stock: '3 disponibili' },
            ].map((p, i) => (
              <div key={i} style={{
                background: white, border: `1px solid ${sand}`, borderRadius: 14,
                padding: 10, marginBottom: 8,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 10,
                  background: beige, display: 'grid', placeItems: 'center', fontSize: 20,
                }}>{p.emoji}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: FFB, fontSize: 12, fontWeight: 700, color: text }}>{p.name}</div>
                  <div style={{ fontFamily: FFB, fontSize: 10, color: secondary, fontWeight: 600 }}>{p.stock}</div>
                </div>
                <div style={{ fontFamily: FFD, fontSize: 14, fontWeight: 700, color: brown }}>{p.price}</div>
              </div>
            ))}
          </div>
        )}

        {screen === 'pay' && (
          <div style={{ flex: 1, padding: '8px 18px 0', overflow: 'hidden' }}>
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontFamily: FFB, fontSize: 13, color: text, opacity: 0.7 }}>Riepilogo ordine</div>
              <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 19, color: brown, marginTop: 2 }}>Paga con sicurezza</div>
            </div>
            <div style={{ background: white, border: `1px solid ${sand}`, borderRadius: 14, padding: 12, marginBottom: 10 }}>
              {[
                ['🥚 6 uova fresche', '4,50 €'],
                ['🍯 1 vasetto miele', '8,00 €'],
                ['🫒 1 olio EVO', '14,00 €'],
              ].map(([n, p], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 2 ? `1px solid ${sand}` : 'none', fontFamily: FFB, fontSize: 12, color: text }}>
                  <span>{n}</span><span style={{ fontWeight: 700 }}>{p}</span>
                </div>
              ))}
              <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 10, fontFamily: FFB, fontSize: 13, color: brown, fontWeight: 700 }}>
                <span>Totale</span><span>26,50 €</span>
              </div>
            </div>
            <div style={{ background: white, border: `1px solid ${sand}`, borderRadius: 14, padding: 12, marginBottom: 12 }}>
              <div style={{ fontFamily: FFB, fontWeight: 700, fontSize: 9, letterSpacing: 1, color: accent }}>METODO DI PAGAMENTO</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
                <div style={{ width: 30, height: 20, background: brown, borderRadius: 4 }}></div>
                <span style={{ fontFamily: FFB, fontSize: 12, color: text }}>•••• 4242</span>
              </div>
            </div>
            <button style={{
              width: '100%', height: 42, borderRadius: 22, border: 'none',
              background: accent, color: white,
              fontFamily: FFB, fontWeight: 700, fontSize: 13,
            }}>Paga 26,50 €</button>
          </div>
        )}

        {/* bottom nav */}
        <div style={{
          height: 50, background: white,
          boxShadow: '0 -2px 12px rgba(92,61,10,0.06)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-around',
          fontFamily: FFB, fontSize: 9, fontWeight: 500,
        }}>
          {[
            { lbl: 'Prenota', glyph: '🥚', on: screen === 'home' },
            { lbl: 'Bottega', glyph: '🛒', on: screen === 'shop' },
            { lbl: 'Profilo', glyph: '👤', on: false },
          ].map((it, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, color: it.on ? accent : sand }}>
              <span style={{ fontSize: 16 }}>{it.glyph}</span>
              <span>{it.lbl}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.PhoneMock = PhoneMock;