// BITS — Google Play marketing tiles (1080×1920 each)
// Static HTML phone mockups (no React app inside) — reliable for html-to-image capture.

const TILES = [
  { id:1, bg:'linear-gradient(160deg, #FF4D8D 0%, #FF6FA8 50%, #E0356F 100%)', title:'אף יום הולדת', title2:'לא נשכח שוב 🎉', sub:'תזכורות חמות לכל בני המשפחה', accent:'#FFD23F', screen:'home' },
  { id:2, bg:'linear-gradient(160deg, #FFE066 0%, #FFD23F 50%, #F0B400 100%)', title:'כל המשפחה', title2:'במקום אחד 👨‍👩‍👧‍👦', sub:'הקימו משפחה תוך 30 שניות', accent:'#FF4D8D', textColor:'#2A1B2E', screen:'create' },
  { id:3, bg:'linear-gradient(160deg, #4DD0E1 0%, #26C6DA 50%, #00ACC1 100%)', title:'מי החוגג', title2:'הבא? 🎂', sub:'ספירה לאחור לכל יום הולדת', accent:'#FFD23F', screen:'dashboard' },
  { id:4, bg:'linear-gradient(160deg, #FF6FA8 0%, #FF4D8D 50%, #C026D3 100%)', title:'שלחו אהבה', title2:'בלחיצה 💌', sub:'הודעות, אימוג׳ים ותבניות מוכנות', accent:'#FFD23F', screen:'message' },
  { id:5, bg:'linear-gradient(160deg, #FFD23F 0%, #FF8FB3 50%, #FF4D8D 100%)', title:'פרחים, עוגות', title2:'ומתנות 🎁', sub:'הזמינו ישירות מהאפליקציה', accent:'#4DD0E1', textColor:'#2A1B2E', screen:'gift' },
  { id:6, bg:'linear-gradient(160deg, #4DD0E1 0%, #FFD23F 100%)', title:'נהלו את', title2:'המשפחה 👑', sub:'הוסיפו, הסירו, מנו מנהלים', accent:'#FF4D8D', textColor:'#2A1B2E', screen:'settings' },
  { id:7, bg:'linear-gradient(160deg, #2A1B2E 0%, #4D2B5C 50%, #E0356F 100%)', title:'אבטחה', title2:'מקסימלית 🔐', sub:'אימות OTP בן 6 ספרות', accent:'#FFD23F', screen:'verify' },
  { id:8, bg:'linear-gradient(160deg, #FFE0EC 0%, #FFD23F 50%, #4DD0E1 100%)', title:'התחברו', title2:'למשפחה 💖', sub:'מספר טלפון אחד — שתי משפחות', accent:'#FF4D8D', textColor:'#2A1B2E', screen:'join' },
];

const PINK = '#FF4D8D', PINK_DEEP='#E0356F', PINK_SOFT='#FFE0EC', YEL='#FFD23F', CYAN='#4DD0E1', INK='#2A1B2E';

// ─── Static phone shell ───────────────────────────────────────────
function PhoneShell({ children }) {
  return (
    <div style={{
      width: 720, height: 1300,
      background: '#fff',
      border: '10px solid #1a1a1a',
      boxShadow: 'inset 0 0 0 2px #333',
      position: 'relative',
      fontFamily: "'Heebo', system-ui, sans-serif",
    }}>
      {/* Status bar */}
      <div style={{
        height: 70, padding:'0 36px',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        fontSize: 24, fontWeight:700, color:'#1a1a1a',
        position:'relative', zIndex:5, background:'transparent',
      }}>
        <div style={{display:'flex', gap:10, alignItems:'center'}}>
          <div style={{width:24, height:14, border:'2px solid #1a1a1a', borderRadius:3, position:'relative'}}>
            <div style={{position:'absolute', inset:1, background:'#1a1a1a', borderRadius:1, width:'70%'}}/>
          </div>
          <span style={{fontSize:18}}>▲ ▼</span>
        </div>
        {/* Camera punchhole */}
        <div style={{position:'absolute', top:18, left:'50%', transform:'translateX(-50%)', width:22, height:22, background:'#1a1a1a', borderRadius:'50%'}}/>
        <div>9:30</div>
      </div>
      <div style={{height: 1300 - 70 - 20, position:'relative', overflow:'hidden'}}>{children}</div>
      {/* Nav handle */}
      <div style={{position:'absolute', bottom:8, left:'50%', transform:'translateX(-50%)', width:200, height:6, background:'#1a1a1a', borderRadius:6}}/>
    </div>
  );
}

// ─── Screens ──────────────────────────────────────────────────────

function ScrHome() {
  return (
    <div style={{height:'100%', background:`linear-gradient(180deg, ${PINK_SOFT} 0%, #fff 50%)`, padding:'40px 36px', position:'relative', direction:'rtl'}}>
      {/* Confetti dots */}
      {[[60,90,YEL],[180,140,CYAN],[80,400,PINK],[420,380,YEL],[140,720,CYAN]].map(([t,l,c],i)=>(
        <div key={i} style={{position:'absolute', top:t, left:l, width:18, height:18, borderRadius:i%2?4:'50%', background:c, opacity:.6}}/>
      ))}
      <div style={{display:'grid', placeItems:'center', height:'100%', textAlign:'center'}}>
        <div>
          <div style={{fontSize:130, marginBottom:24}}>🎂</div>
          <div style={{fontSize:64, fontWeight:900, color:INK, letterSpacing:'-.03em'}}>BITS</div>
          <div style={{fontSize:26, fontWeight:600, color:'#5a4a5e', marginTop:18, lineHeight:1.4, padding:'0 20px'}}>אף יום הולדת לא נשכח שוב — תזכורות חמות לכל המשפחה 🎉</div>
          <div style={{marginTop:48, display:'flex', flexDirection:'column', gap:18}}>
            <div style={{padding:'24px 32px', background:PINK, color:'#fff', borderRadius:20, fontSize:28, fontWeight:700, boxShadow:`0 8px 20px ${PINK}55`}}>הקמת משפחה חדשה</div>
            <div style={{padding:'24px 32px', background:'#fff', color:PINK, border:`3px solid ${PINK}`, borderRadius:20, fontSize:28, fontWeight:700}}>כניסה למשפחה קיימת</div>
          </div>
          <div style={{marginTop:36, fontSize:18, color:'#9080a0'}}>נבנה באהבה ב־BITS</div>
        </div>
      </div>
    </div>
  );
}

function ScrCreate() {
  return (
    <div style={{height:'100%', background:'#fff', padding:'40px 36px', direction:'rtl'}}>
      <div style={{fontSize:38, fontWeight:900, color:INK, letterSpacing:'-.02em'}}>הקמת משפחה</div>
      <div style={{fontSize:22, color:'#7a6a7e', marginTop:8, marginBottom:36}}>שם המשפחה והמנהל הראשון</div>
      <div style={{display:'flex', flexDirection:'column', gap:24}}>
        <div>
          <div style={{fontSize:22, fontWeight:700, color:INK, marginBottom:10}}>שם המשפחה</div>
          <div style={{padding:'24px 24px', background:'#F7F4FA', border:'2px solid #E5DEEC', borderRadius:18, fontSize:26, color:INK, fontWeight:600}}>משפחת כהן</div>
        </div>
        <div>
          <div style={{fontSize:22, fontWeight:700, color:INK, marginBottom:10}}>טלפון המנהל</div>
          <div style={{padding:'24px 24px', background:'#F7F4FA', border:`2px solid ${PINK}`, borderRadius:18, fontSize:26, color:INK, fontWeight:600, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <span>050-1234567</span>
            <span style={{fontSize:24}}>📱</span>
          </div>
        </div>
        <div style={{background:PINK_SOFT, borderRadius:18, padding:'22px 24px', display:'flex', gap:14, alignItems:'flex-start', marginTop:8}}>
          <div style={{fontSize:32}}>👑</div>
          <div>
            <div style={{fontSize:20, fontWeight:800, color:PINK_DEEP, marginBottom:4}}>המנהל הראשון</div>
            <div style={{fontSize:18, color:'#5a4a5e', lineHeight:1.5}}>אתם הופכים למנהל הראשי. תוכלו להוסיף עוד מנהלים בהמשך.</div>
          </div>
        </div>
      </div>
      <div style={{marginTop:48, padding:'26px', background:PINK, color:'#fff', borderRadius:20, fontSize:28, fontWeight:800, textAlign:'center', boxShadow:`0 10px 24px ${PINK}55`}}>המשך לאימות ←</div>
    </div>
  );
}

function ScrDashboard() {
  const upcoming = [
    {name:'דניאל כהן', date:'12 נוב׳', days:3, age:8, color:PINK},
    {name:'נועה לוי', date:'15 נוב׳', days:6, age:34, color:YEL},
    {name:'רון כהן', date:'21 נוב׳', days:12, age:12, color:CYAN},
    {name:'סבתא רחל', date:'28 נוב׳', days:19, age:72, color:'#A78BFA'},
  ];
  return (
    <div style={{height:'100%', background:'#FAF7FB', direction:'rtl', overflow:'hidden'}}>
      {/* Header */}
      <div style={{padding:'32px 36px 24px', background:`linear-gradient(135deg, ${PINK} 0%, ${PINK_DEEP} 100%)`, color:'#fff', position:'relative', overflow:'hidden'}}>
        {[[20,400,16],[60,580,10],[140,440,12]].map(([t,l,s],i)=>(<div key={i} style={{position:'absolute', top:t, left:l, width:s, height:s, background:'rgba(255,255,255,.3)', borderRadius:'50%'}}/>))}
        <div style={{fontSize:20, fontWeight:600, opacity:.9}}>שלום מיכל 👋</div>
        <div style={{fontSize:36, fontWeight:900, marginTop:6, letterSpacing:'-.02em'}}>משפחת כהן</div>
        <div style={{marginTop:24, padding:'20px 24px', background:'rgba(255,255,255,.18)', borderRadius:18, backdropFilter:'blur(10px)', border:'1.5px solid rgba(255,255,255,.25)'}}>
          <div style={{fontSize:18, opacity:.9}}>החוגג הבא</div>
          <div style={{display:'flex', alignItems:'baseline', gap:12, marginTop:6}}>
            <div style={{fontSize:48, fontWeight:900, color:YEL}}>3</div>
            <div style={{fontSize:22, fontWeight:700}}>ימים — דניאל כהן 🎂</div>
          </div>
        </div>
      </div>
      {/* Upcoming list */}
      <div style={{padding:'28px 28px 0', overflow:'hidden'}}>
        <div style={{fontSize:22, fontWeight:800, color:INK, marginBottom:16, padding:'0 8px'}}>ימי הולדת קרובים</div>
        <div style={{display:'flex', flexDirection:'column', gap:14}}>
          {upcoming.map((p,i)=>(
            <div key={i} style={{background:'#fff', borderRadius:18, padding:'18px 20px', display:'flex', gap:14, alignItems:'center', boxShadow:'0 2px 8px rgba(0,0,0,.05)'}}>
              <div style={{width:56, height:56, borderRadius:'50%', background:p.color, color:'#fff', display:'grid', placeItems:'center', fontSize:24, fontWeight:900, flexShrink:0}}>{p.name[0]}</div>
              <div style={{flex:1}}>
                <div style={{fontSize:22, fontWeight:800, color:INK}}>{p.name}</div>
                <div style={{fontSize:16, color:'#7a6a7e', marginTop:2}}>{p.date} • גיל {p.age}</div>
              </div>
              <div style={{textAlign:'center'}}>
                <div style={{fontSize:30, fontWeight:900, color:p.color, lineHeight:1}}>{p.days}</div>
                <div style={{fontSize:14, color:'#9080a0'}}>ימים</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ScrMessage() {
  return (
    <div style={{height:'100%', background:'#fff', direction:'rtl', display:'flex', flexDirection:'column'}}>
      <div style={{padding:'28px 36px', background:`linear-gradient(135deg, ${PINK} 0%, ${PINK_DEEP} 100%)`, color:'#fff'}}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <div style={{width:60, height:60, borderRadius:'50%', background:YEL, color:INK, display:'grid', placeItems:'center', fontSize:26, fontWeight:900}}>ד</div>
          <div>
            <div style={{fontSize:24, fontWeight:800}}>דניאל כהן 🎂</div>
            <div style={{fontSize:16, opacity:.85}}>חוגג היום • גיל 8</div>
          </div>
        </div>
      </div>
      <div style={{flex:1, padding:'28px 24px', background:PINK_SOFT, overflow:'hidden'}}>
        <div style={{display:'flex', flexDirection:'column', gap:14}}>
          {/* Received-style chip */}
          <div style={{alignSelf:'flex-end', maxWidth:'85%', background:'#fff', padding:'18px 22px', borderRadius:'22px 22px 22px 6px', boxShadow:'0 2px 8px rgba(0,0,0,.05)'}}>
            <div style={{fontSize:22, color:INK, fontWeight:600, lineHeight:1.4}}>יום הולדת שמח דני! 🎉🎂<br/>שתזכה לשנה מלאה שמחה</div>
          </div>
          <div style={{alignSelf:'flex-end', maxWidth:'70%', background:PINK, color:'#fff', padding:'18px 22px', borderRadius:'22px 22px 22px 6px'}}>
            <div style={{fontSize:22, fontWeight:700}}>אוהב אותך, סבא ❤️</div>
          </div>
        </div>
        {/* Templates */}
        <div style={{marginTop:32}}>
          <div style={{fontSize:18, fontWeight:800, color:INK, marginBottom:12}}>תבניות מוכנות</div>
          <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
            {['🎂 ברכה חמה','🎁 שיר מצחיק','💐 רגש','🎉 קצר וקולע'].map((t,i)=>(
              <div key={i} style={{padding:'12px 18px', background:'#fff', border:`2px solid ${PINK}33`, borderRadius:14, fontSize:18, fontWeight:700, color:INK}}>{t}</div>
            ))}
          </div>
        </div>
      </div>
      {/* Composer */}
      <div style={{padding:'18px 24px', background:'#fff', borderTop:'1px solid #eee', display:'flex', gap:12, alignItems:'center'}}>
        <div style={{flex:1, padding:'16px 20px', background:'#F7F4FA', borderRadius:24, fontSize:20, color:'#9080a0'}}>כתבו ברכה...</div>
        <div style={{width:56, height:56, borderRadius:'50%', background:PINK, color:'#fff', display:'grid', placeItems:'center', fontSize:24, transform:'scaleX(-1)'}}>➤</div>
      </div>
    </div>
  );
}

function ScrGift() {
  const gifts = [
    {emoji:'💐', label:'פרחים', price:'149₪', color:'#FF6FA8'},
    {emoji:'🎂', label:'עוגות', price:'89₪', color:YEL},
    {emoji:'🎁', label:'מתנות', price:'מ־49₪', color:CYAN},
    {emoji:'🍫', label:'מארזי שוקולד', price:'69₪', color:'#A78BFA'},
  ];
  return (
    <div style={{height:'100%', background:'#FAF7FB', direction:'rtl', overflow:'hidden'}}>
      <div style={{padding:'32px 36px 20px'}}>
        <div style={{fontSize:36, fontWeight:900, color:INK, letterSpacing:'-.02em'}}>מה לשלוח?</div>
        <div style={{fontSize:20, color:'#7a6a7e', marginTop:6}}>משלוח עד הבית באותו יום</div>
      </div>
      <div style={{padding:'0 28px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
        {gifts.map((g,i)=>(
          <div key={i} style={{background:'#fff', borderRadius:22, padding:'24px 20px', boxShadow:'0 4px 12px rgba(0,0,0,.06)', position:'relative', overflow:'hidden'}}>
            <div style={{position:'absolute', top:-30, left:-30, width:100, height:100, borderRadius:'50%', background:g.color, opacity:.18}}/>
            <div style={{fontSize:72, marginBottom:8}}>{g.emoji}</div>
            <div style={{fontSize:24, fontWeight:800, color:INK}}>{g.label}</div>
            <div style={{fontSize:18, color:g.color, fontWeight:800, marginTop:4}}>{g.price}</div>
            <div style={{marginTop:14, padding:'10px 14px', background:g.color+'1f', color:g.color, borderRadius:12, fontSize:16, fontWeight:800, textAlign:'center'}}>הזמינו עכשיו</div>
          </div>
        ))}
      </div>
      <div style={{margin:'28px 28px 0', padding:'22px 24px', background:`linear-gradient(135deg, ${YEL} 0%, ${PINK} 100%)`, borderRadius:20, color:'#fff', display:'flex', alignItems:'center', gap:16}}>
        <div style={{fontSize:42}}>🚚</div>
        <div>
          <div style={{fontSize:22, fontWeight:900}}>משלוח חינם מעל 199₪</div>
          <div style={{fontSize:16, opacity:.95, marginTop:2}}>בכל הארץ — באותו היום</div>
        </div>
      </div>
    </div>
  );
}

function ScrSettings() {
  const members = [
    {name:'מיכל כהן', role:'מנהלת', color:PINK, icon:'👑'},
    {name:'דוד כהן', role:'מנהל', color:YEL, icon:'👑'},
    {name:'דניאל כהן', role:'חבר', color:CYAN, icon:'🎂'},
    {name:'רון כהן', role:'חבר', color:'#A78BFA', icon:''},
    {name:'סבתא רחל', role:'חבר', color:'#FF8FB3', icon:''},
  ];
  return (
    <div style={{height:'100%', background:'#FAF7FB', direction:'rtl', overflow:'hidden'}}>
      <div style={{padding:'32px 36px 20px', background:'#fff', borderBottom:'1px solid #eee'}}>
        <div style={{fontSize:34, fontWeight:900, color:INK, letterSpacing:'-.02em'}}>משפחת כהן</div>
        <div style={{fontSize:18, color:'#7a6a7e', marginTop:6}}>5 בני משפחה • 2 מנהלים</div>
      </div>
      <div style={{padding:'24px 28px'}}>
        <div style={{fontSize:20, fontWeight:800, color:INK, marginBottom:14, padding:'0 6px'}}>בני המשפחה</div>
        <div style={{background:'#fff', borderRadius:20, overflow:'hidden', boxShadow:'0 2px 8px rgba(0,0,0,.05)'}}>
          {members.map((m,i)=>(
            <div key={i} style={{padding:'18px 22px', display:'flex', gap:14, alignItems:'center', borderBottom:i<members.length-1?'1px solid #f0e8f4':'none'}}>
              <div style={{width:52, height:52, borderRadius:'50%', background:m.color, color:'#fff', display:'grid', placeItems:'center', fontSize:22, fontWeight:900, flexShrink:0}}>{m.name[0]}</div>
              <div style={{flex:1}}>
                <div style={{fontSize:22, fontWeight:800, color:INK, display:'flex', gap:8, alignItems:'center'}}>{m.name} {m.icon && <span style={{fontSize:18}}>{m.icon}</span>}</div>
                <div style={{fontSize:16, color:'#9080a0'}}>{m.role}</div>
              </div>
              <div style={{fontSize:22, color:'#c0b0d0'}}>⋯</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:20, padding:'20px', background:'#fff', border:`2.5px dashed ${PINK}`, borderRadius:18, color:PINK, fontSize:22, fontWeight:800, textAlign:'center'}}>+ הוסף בן משפחה</div>
      </div>
    </div>
  );
}

function ScrVerify() {
  const digits = ['4','7','2','9','_','_'];
  return (
    <div style={{height:'100%', background:'#fff', padding:'48px 36px', direction:'rtl', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center'}}>
      <div style={{width:120, height:120, borderRadius:32, background:`linear-gradient(135deg, ${PINK} 0%, ${PINK_DEEP} 100%)`, display:'grid', placeItems:'center', fontSize:60, color:'#fff', marginTop:24, boxShadow:`0 12px 32px ${PINK}44`}}>🔐</div>
      <div style={{fontSize:38, fontWeight:900, color:INK, marginTop:32, letterSpacing:'-.02em'}}>אימות מכשיר</div>
      <div style={{fontSize:20, color:'#7a6a7e', marginTop:12, lineHeight:1.5, padding:'0 20px'}}>שלחנו קוד בן 6 ספרות אל<br/><span style={{color:INK, fontWeight:800, direction:'ltr', display:'inline-block'}}>050-1234567</span></div>
      <div style={{display:'flex', gap:12, marginTop:48, direction:'ltr'}}>
        {digits.map((d,i)=>(
          <div key={i} style={{
            width:80, height:96,
            borderRadius:18,
            border: d!=='_' ? `2.5px solid ${PINK}` : '2.5px solid #E5DEEC',
            background: d!=='_' ? PINK_SOFT : '#fff',
            display:'grid', placeItems:'center',
            fontSize:42, fontWeight:900, color: d!=='_' ? PINK_DEEP : '#c0b0d0',
          }}>{d==='_' ? '' : d}</div>
        ))}
      </div>
      <div style={{marginTop:36, fontSize:20, color:PINK, fontWeight:700}}>שליחה חוזרת בעוד 0:23</div>
      <div style={{flex:1}}/>
      <div style={{padding:'22px', background:'#F7F4FA', borderRadius:18, fontSize:18, color:'#7a6a7e', marginBottom:24, lineHeight:1.5}}>
        🔒 הקוד תקף ל־5 דקות. אל תשתפו אותו עם אף אחד.
      </div>
    </div>
  );
}

function ScrJoin() {
  return (
    <div style={{height:'100%', background:`linear-gradient(180deg, ${CYAN}22 0%, #fff 60%)`, padding:'40px 36px', direction:'rtl'}}>
      <div style={{fontSize:36, fontWeight:900, color:INK, letterSpacing:'-.02em'}}>הצטרפות למשפחה</div>
      <div style={{fontSize:20, color:'#7a6a7e', marginTop:8}}>הזינו את מספר הטלפון שלכם</div>

      <div style={{marginTop:36, padding:'24px', background:'#fff', borderRadius:20, boxShadow:'0 4px 16px rgba(0,0,0,.06)'}}>
        <div style={{fontSize:20, fontWeight:700, color:INK, marginBottom:12}}>מספר טלפון</div>
        <div style={{padding:'22px 24px', background:'#F7F4FA', border:`2.5px solid ${CYAN}`, borderRadius:16, fontSize:28, color:INK, fontWeight:700, display:'flex', justifyContent:'space-between', alignItems:'center', direction:'ltr'}}>
          <span style={{fontSize:22, color:'#9080a0'}}>+972</span>
          <span>50 234 5678</span>
        </div>
      </div>

      <div style={{marginTop:24, padding:'24px', background:`linear-gradient(135deg, ${YEL}33, ${PINK}22)`, borderRadius:20, border:`2px solid ${YEL}66`}}>
        <div style={{display:'flex', gap:14, alignItems:'flex-start'}}>
          <div style={{fontSize:36}}>💖</div>
          <div>
            <div style={{fontSize:22, fontWeight:900, color:INK}}>נמצאה משפחה!</div>
            <div style={{fontSize:18, color:'#5a4a5e', marginTop:6, lineHeight:1.5}}>המספר שלך משויך ל<b style={{color:PINK_DEEP}}>משפחת לוי</b> כ<b>חבר</b>. נבקש אישור ממנהל לפני ההצטרפות.</div>
          </div>
        </div>
      </div>

      <div style={{marginTop:32, padding:'26px', background:CYAN, color:'#fff', borderRadius:20, fontSize:26, fontWeight:800, textAlign:'center', boxShadow:`0 10px 24px ${CYAN}55`}}>שליחת בקשת הצטרפות</div>
      <div style={{marginTop:14, padding:'22px', background:'transparent', border:`2.5px solid ${PINK}`, color:PINK, borderRadius:20, fontSize:22, fontWeight:700, textAlign:'center'}}>אין לי משפחה — הקם חדשה</div>
    </div>
  );
}

const SCREENS = { home:ScrHome, create:ScrCreate, dashboard:ScrDashboard, message:ScrMessage, gift:ScrGift, settings:ScrSettings, verify:ScrVerify, join:ScrJoin };

// ─── Tile composition ─────────────────────────────────────────────
function PlayTile({ tile }) {
  const textColor = tile.textColor || '#FFFFFF';
  const Screen = SCREENS[tile.screen] || ScrHome;
  return (
    <div style={{
      width: 1080, height: 1920,
      background: tile.bg,
      position: 'relative',
      overflow: 'hidden',
      fontFamily: "'Heebo', system-ui, sans-serif",
      direction: 'rtl',
    }}>
      <DecoShapes accent={tile.accent}/>
      {/* Headline */}
      <div style={{position:'absolute', top:110, left:60, right:60, textAlign:'center', zIndex:4}}>
        <div style={{fontSize:96, fontWeight:900, color:textColor, letterSpacing:'-.04em', lineHeight:1.02, textShadow: tile.textColor ? 'none' : '0 4px 24px rgba(0,0,0,.22)'}}>{tile.title}</div>
        <div style={{fontSize:96, fontWeight:900, color:tile.accent, letterSpacing:'-.04em', lineHeight:1.02, marginTop:8, textShadow:'0 4px 24px rgba(0,0,0,.18)'}}>{tile.title2}</div>
        <div style={{fontSize:36, fontWeight:600, color:textColor, opacity:.92, marginTop:36, letterSpacing:'-.01em'}}>{tile.sub}</div>
      </div>
      {/* Phone */}
      <div style={{position:'absolute', bottom:80, left:'50%', marginLeft:-360, zIndex:3, filter:'drop-shadow(0 30px 60px rgba(0,0,0,.35))'}}>
        <PhoneShell><Screen/></PhoneShell>
      </div>
      {/* BITS badge */}
      <div style={{position:'absolute', bottom:50, right:60, zIndex:5, display:'flex', alignItems:'center', gap:14, background:'rgba(255,255,255,.18)', backdropFilter:'blur(8px)', padding:'14px 22px', borderRadius:28, border:'1.5px solid rgba(255,255,255,.3)'}}>
        <div style={{width:56, height:56, borderRadius:14, background:PINK, display:'grid', placeItems:'center', fontSize:30}}>🎂</div>
        <div>
          <div style={{fontSize:28, fontWeight:900, color:textColor, letterSpacing:'-.02em', lineHeight:1}}>BITS</div>
          <div style={{fontSize:14, fontWeight:600, color:textColor, opacity:.85}}>תזכורת ימי הולדת</div>
        </div>
      </div>
    </div>
  );
}

function DecoShapes({ accent }) {
  const shapes = [
    {top:60, left:80, size:80, opacity:.25, rot:-15},
    {top:280, left:940, size:60, opacity:.35, rot:25},
    {top:480, left:60, size:40, opacity:.3, rot:0},
    {top:720, left:980, size:100, opacity:.15, rot:-30},
    {top:1200, left:40, size:70, opacity:.2, rot:15},
  ];
  return (
    <>
      {shapes.map((s,i)=>(
        <div key={i} style={{position:'absolute', top:s.top, left:s.left, width:s.size, height:s.size, borderRadius:i%2===0?'50%':'20%', background:i%2===0?'#FFFFFF':accent, opacity:s.opacity, transform:`rotate(${s.rot}deg)`}}/>
      ))}
      {Array.from({length:24}).map((_,i)=>{
        const colors = ['#FFD23F','#FF4D8D','#4DD0E1','#FFFFFF',accent];
        const c = colors[i%colors.length];
        const top = (i*73)%1900, left=(i*137)%1080;
        return <div key={'c'+i} style={{position:'absolute', top, left, width:14, height:14, borderRadius:i%3===0?'50%':'4px', background:c, opacity:.35, transform:`rotate(${i*47}deg)`}}/>;
      })}
    </>
  );
}


Object.assign(window, {
  BITS_TILES: TILES,
  BITS_SCREENS: SCREENS,
  PhoneShell, DecoShapes,
  BITS_COLORS: { PINK, PINK_DEEP, PINK_SOFT, YEL, CYAN, INK },
});