// Educational mini-screens for the "How to Use" preview section.
// Each shows ONE specific action being performed, with hands-on UI elements.

const HOW_ROOT = { width: '100%', height: '100%', background: '#FBF7EE', padding: '50px 16px 20px', display: 'flex', flexDirection: 'column', fontSize: 11, color: '#1B1F1D', overflow: 'hidden', position: 'relative' };
const TOP_BAR = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, fontWeight: 700, padding: '0 4px 8px' };
const STATUS = { display: 'flex', gap: 4, alignItems: 'center', fontSize: 10 };

// 1. CREATE A LIST
function HowCreateList({ t }) {
  return (
    <div style={HOW_ROOT}>
      <div style={TOP_BAR}><span>9:41</span><span style={STATUS}>● ● ▮</span></div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <div style={{ width: 24, height: 24, borderRadius: 8, border: '1px solid rgba(28,38,35,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>×</div>
        <div style={{ flex: 1, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#8A8F8C', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{t.howCreateStep || 'Yeni Liste'}</div>
      </div>
      <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 26, lineHeight: 1.05 }}>{t.howCreateTitle}</div>
      <div style={{ fontSize: 10, color: '#8A8F8C', marginTop: 4 }}>{t.howCreateSub}</div>

      <div style={{ marginTop: 18, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#8A8F8C', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{t.howFieldName}</div>
      <div style={{ background: '#fff', border: '2px solid #2C5650', borderRadius: 12, padding: '12px 14px', marginTop: 6, fontFamily: "'Instrument Serif', serif", fontSize: 18, position: 'relative' }}>
        Melis'in Doğum Günü 🎂
        <div style={{ position: 'absolute', right: 14, top: '50%', width: 2, height: 18, background: '#2C5650', transform: 'translateY(-50%)', animation: 'blink 1s steps(1) infinite' }}></div>
      </div>

      <div style={{ marginTop: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#8A8F8C', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{t.howFieldDate}</div>
      <div style={{ background: '#fff', border: '1px solid rgba(28,38,35,0.08)', borderRadius: 12, padding: '12px 14px', marginTop: 6, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: 13, fontWeight: 600 }}>14 Mart 2026</span>
        <span style={{ fontSize: 14 }}>📅</span>
      </div>

      <div style={{ marginTop: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#8A8F8C', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{t.howFieldFriends}</div>
      <div style={{ display: 'flex', gap: 6, marginTop: 6, flexWrap: 'wrap' }}>
        {[{n:'Melis',src:AVATAR.melis},{n:'Zeynep',src:AVATAR.zeynep},{n:'Arda',src:AVATAR.arda}].map((p,i) => (
          <div key={i} style={{ background: '#F6F0E4', borderRadius: 999, padding: '4px 10px 4px 4px', display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 600 }}>
            <img src={p.src} alt="" style={{ width: 20, height: 20, borderRadius: 10, objectFit: 'cover' }} />{p.n}
          </div>
        ))}
        <div style={{ background: '#fff', border: '1px dashed rgba(28,38,35,0.2)', borderRadius: 999, padding: '4px 12px', fontSize: 11, color: '#8A8F8C' }}>+ {t.add}</div>
      </div>

      <div style={{ flex: 1 }}></div>
      <div style={{ background: '#2C5650', color: '#F6F0E4', textAlign: 'center', padding: '14px', borderRadius: 999, fontSize: 13, fontWeight: 700, marginTop: 18, boxShadow: '0 10px 24px -8px rgba(44,86,80,0.5)' }}>{t.howCreateBtn}</div>
    </div>
  );
}

// 2. PASTE A LINK
function HowAddItem({ t }) {
  return (
    <div style={HOW_ROOT}>
      <div style={TOP_BAR}><span>9:41</span><span style={STATUS}>● ● ▮</span></div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <div style={{ width: 24, height: 24, borderRadius: 8, border: '1px solid rgba(28,38,35,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>←</div>
        <div style={{ flex: 1, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#8A8F8C', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{t.howAddStep || 'Ürün Ekle'}</div>
      </div>
      <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24, lineHeight: 1.05 }}>{t.howAddTitle}</div>
      <div style={{ fontSize: 10, color: '#8A8F8C', marginTop: 4 }}>{t.howAddSub}</div>

      <div style={{ marginTop: 18, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#8A8F8C', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{t.howAddField}</div>
      <div style={{ background: '#fff', border: '1px solid rgba(28,38,35,0.08)', borderRadius: 12, padding: '10px 12px', marginTop: 6, display: 'flex', alignItems: 'center', gap: 8, fontFamily: "'JetBrains Mono', monospace", fontSize: 10 }}>
        <span style={{ color: '#8A8F8C' }}>🔗</span>
        <span style={{ flex: 1, color: '#2C5650', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>zara.com/tr/red-vanilla-edp</span>
        <span style={{ background: '#F6F0E4', padding: '2px 8px', borderRadius: 6, fontSize: 9 }}>{t.howPaste}</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 10, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#2C5650' }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: '#2C5650', animation: 'pulse 1.2s infinite' }}></span>
        {t.howFetching}
      </div>

      <div style={{ background: '#fff', borderRadius: 14, padding: 14, marginTop: 12, border: '1px solid rgba(28,38,35,0.06)', boxShadow: '0 8px 20px -10px rgba(28,38,35,0.15)' }}>
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ width: 64, height: 64, borderRadius: 10, overflow: 'hidden', flexShrink: 0 }}><img src={PRODUCT.perfume} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#8A8F8C' }}>ZARA · {t.perfume}</div>
            <div style={{ fontSize: 12, fontWeight: 700, marginTop: 2 }}>Zara Red Vanilla EDP</div>
            <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 20, marginTop: 4 }}>₺790</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
          <div style={{ flex: 1, background: '#F6F0E4', padding: '6px 8px', borderRadius: 8, fontSize: 9, textAlign: 'center', color: '#2C5650', fontWeight: 600 }}>{t.howAddNote}</div>
        </div>
      </div>

      <div style={{ flex: 1 }}></div>
      <div style={{ background: '#2C5650', color: '#F6F0E4', textAlign: 'center', padding: '14px', borderRadius: 999, fontSize: 13, fontWeight: 700, marginTop: 12, boxShadow: '0 10px 24px -8px rgba(44,86,80,0.5)' }}>+ {t.howAddBtn}</div>
    </div>
  );
}

// 3. SHARE WITH FRIENDS
function HowShare({ t }) {
  return (
    <div style={HOW_ROOT}>
      <div style={TOP_BAR}><span>9:41</span><span style={STATUS}>● ● ▮</span></div>
      <div style={{ filter: 'blur(0.5px)', opacity: 0.4 }}>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22 }}>Melis'in Doğum Günü</div>
        <div style={{ background: '#fff', borderRadius: 12, padding: 10, marginTop: 12, display: 'flex', gap: 10, border: '1px solid rgba(28,38,35,0.06)' }}>
          <div style={{ width: 36, height: 36, borderRadius: 8, overflow: 'hidden' }}><img src={PRODUCT.vase} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10, fontWeight: 700 }}>Seramik Vazo</div>
            <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 14 }}>₺450</div>
          </div>
        </div>
      </div>

      <div style={{ position: 'absolute', left: 12, right: 12, bottom: 12, background: '#fff', borderRadius: 20, padding: 18, boxShadow: '0 20px 40px -10px rgba(28,38,35,0.25)', border: '1px solid rgba(28,38,35,0.06)' }}>
        <div style={{ width: 36, height: 4, background: 'rgba(28,38,35,0.15)', borderRadius: 2, margin: '0 auto 14px' }}></div>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 18, marginBottom: 4 }}>{t.howShareTitle}</div>
        <div style={{ fontSize: 10, color: '#8A8F8C', marginBottom: 14 }}>{t.howShareSub}</div>

        <div style={{ background: '#F6F0E4', borderRadius: 10, padding: '8px 12px', fontFamily: "'JetBrains Mono', monospace", fontSize: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#2C5650' }}>sectimben.app/l/melis-bday</span>
          <span style={{ background: '#fff', padding: '4px 8px', borderRadius: 6, fontWeight: 700 }}>{t.howCopy}</span>
        </div>

        <div style={{ display: 'flex', gap: 10, marginTop: 14, justifyContent: 'space-between' }}>
          {[
            { ic: '💬', l: 'WhatsApp', bg: '#25D366' },
            { ic: '✉', l: 'Mail', bg: '#F2A076' },
            { ic: '✦', l: 'Instagram', bg: '#E1306C' },
            { ic: '⋯', l: t.howMore, bg: '#2C5650' },
          ].map((s,i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center' }}>
              <div style={{ width: 44, height: 44, borderRadius: 14, background: s.bg, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, margin: '0 auto' }}>{s.ic}</div>
              <div style={{ fontSize: 9, marginTop: 6, fontWeight: 600 }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 6, marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(28,38,35,0.08)', alignItems: 'center' }}>
          <div style={{ display: 'flex' }}>
            {[AVATAR.melis, AVATAR.zeynep, AVATAR.arda].map((s,i) => (
              <img key={i} src={s} alt="" style={{ width: 22, height: 22, borderRadius: 11, border: '2px solid #fff', marginLeft: i ? -8 : 0, objectFit: 'cover' }} />
            ))}
          </div>
          <div style={{ fontSize: 10, color: '#8A8F8C', flex: 1 }}>{t.howShareFriends}</div>
        </div>
      </div>
    </div>
  );
}

// 4. MARK AS BOUGHT
function HowMarkStatus({ t }) {
  return (
    <div style={HOW_ROOT}>
      <div style={TOP_BAR}><span>9:41</span><span style={STATUS}>● ● ▮</span></div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <div style={{ width: 24, height: 24, borderRadius: 8, border: '1px solid rgba(28,38,35,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>←</div>
        <div style={{ flex: 1, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#8A8F8C', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{t.howMarkStep || 'Ürün Detayı'}</div>
      </div>

      <div style={{ aspectRatio: '1.3', borderRadius: 16, overflow: 'hidden', background: '#F6F0E4' }}>
        <img src={PRODUCT.vase} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      </div>
      <div style={{ marginTop: 12 }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#8A8F8C', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Karaca · {t.beige}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 4 }}>
          <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22, lineHeight: 1.1 }}>{t.ceramicVase}</div>
          <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22, color: '#2C5650' }}>₺450</div>
        </div>
      </div>

      <div style={{ marginTop: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#8A8F8C', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{t.howMarkField}</div>
      <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
        <div style={{ flex: 1, padding: '10px', borderRadius: 12, border: '1px solid rgba(28,38,35,0.08)', fontSize: 10, textAlign: 'center', fontWeight: 600, color: '#8A8F8C' }}>{t.available}</div>
        <div style={{ flex: 1, padding: '10px', borderRadius: 12, border: '1px solid rgba(28,38,35,0.08)', fontSize: 10, textAlign: 'center', fontWeight: 600, color: '#F2A076', background: 'rgba(242,160,118,0.1)' }}>{t.reserve}</div>
        <div style={{ flex: 1, padding: '10px', borderRadius: 12, fontSize: 10, textAlign: 'center', fontWeight: 700, color: '#F6F0E4', background: '#2C5650', boxShadow: '0 6px 14px -4px rgba(44,86,80,0.4)' }}>✓ {t.bought}</div>
      </div>

      <div style={{ background: '#FCE2CC', borderRadius: 12, padding: '10px 12px', marginTop: 14, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
        <div style={{ fontSize: 16 }}>🤫</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 700 }}>{t.howSecretTitle}</div>
          <div style={{ fontSize: 9, color: '#1B1F1D', marginTop: 2, lineHeight: 1.4 }}>{t.howSecretSub}</div>
        </div>
      </div>

      <div style={{ flex: 1 }}></div>
      <div style={{ background: '#2C5650', color: '#F6F0E4', textAlign: 'center', padding: '12px', borderRadius: 999, fontSize: 12, fontWeight: 700, marginTop: 14 }}>{t.howMarkBtn}</div>
    </div>
  );
}

Object.assign(window, { HowCreateList, HowAddItem, HowShare, HowMarkStatus });