// WhatsApp message — iPhone mock; matches eatcookjoy-uae.com theme
function WAHeader({ name, sub }) {
  return (
    <div style={{
      display:'flex',alignItems:'center',gap:10,padding:'8px 12px 8px 6px',
      background:'#075E54',color:'#fff',fontFamily:'-apple-system,system-ui',
    }}>
      <svg width="22" height="22" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
      <div style={{
        width:36,height:36,borderRadius:999,background:'#F26A1F',color:'#fff',
        display:'flex',alignItems:'center',justifyContent:'center',
        fontFamily:'"Fraunces",Georgia,serif',fontWeight:600,fontSize:16,
      }}>e</div>
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontSize:16,fontWeight:600,lineHeight:1.1}}>{name}</div>
        <div style={{fontSize:12,color:'rgba(255,255,255,0.75)',marginTop:2}}>{sub}</div>
      </div>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff" style={{opacity:0.9}}><path d="M17 10.5V7a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h12a1 1 0 001-1v-3.5l4 4v-11l-4 4z"/></svg>
    </div>
  );
}

function WABubble({ children, time='9:14 AM', tail=false }) {
  return (
    <div style={{
      alignSelf:'flex-start',maxWidth:320,position:'relative',background:'#fff',
      borderRadius:8,borderTopLeftRadius:tail?0:8,padding:'8px 10px 6px',
      marginBottom:4,boxShadow:'0 1px 0.5px rgba(0,0,0,0.13)',
      fontFamily:'-apple-system,system-ui',
    }}>
      <div style={{fontSize:14.5,color:'#111B21',lineHeight:1.4}}>{children}</div>
      <div style={{fontSize:10.5,color:'#667781',textAlign:'right',marginTop:2}}>{time} ✓✓</div>
    </div>
  );
}

function WALinkPreview() {
  const c = window.ECJ.color;
  return (
    <div style={{
      alignSelf:'flex-start',width:320,background:'#fff',borderRadius:8,
      overflow:'hidden',padding:4,marginBottom:4,
      boxShadow:'0 1px 0.5px rgba(0,0,0,0.13)',fontFamily:'-apple-system,system-ui',
    }}>
      <div style={{background:c.bg,borderRadius:6,overflow:'hidden'}}>
        <div style={{
          height:140,background:`linear-gradient(135deg, ${c.primary} 0%, ${c.accent} 100%)`,
          position:'relative',display:'flex',alignItems:'flex-end',padding:14,
        }}>
          <div style={{position:'absolute',top:18,right:18,width:70,height:70,borderRadius:999,background:'rgba(255,255,255,0.18)',border:'1.5px solid rgba(255,255,255,0.4)'}}/>
          <div style={{position:'absolute',top:32,right:32,width:42,height:42,borderRadius:999,background:c.bg}}/>
          <div style={{
            fontFamily:c.serif||window.ECJ.font.serif,fontSize:22,color:'#fff',
            fontWeight:600,letterSpacing:-0.4,lineHeight:1.05,
            textShadow:'0 2px 8px rgba(0,0,0,0.15)',
          }}>Cook for UAE<br/>families.</div>
        </div>
        <div style={{padding:'10px 12px 12px'}}>
          <div style={{fontSize:14,fontWeight:600,color:c.ink,lineHeight:1.3}}>EatCookJoy UAE — Founding Chef Cohort</div>
          <div style={{fontSize:12.5,color:c.char,marginTop:4,lineHeight:1.4}}>50 founding chefs, 7 Emirates, 0% platform fee Year 1. Apply in 5 min.</div>
          <div style={{fontSize:11.5,color:c.mute,marginTop:6}}>eatcookjoy-uae.com/chefs</div>
        </div>
      </div>
      <div style={{fontSize:10.5,color:'#667781',textAlign:'right',marginTop:4,marginRight:4}}>9:14 AM ✓✓</div>
    </div>
  );
}

function WhatsAppMockup() {
  const c = window.ECJ.color;
  const bg = `radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 1px, transparent 1.5px),radial-gradient(circle at 70% 70%, rgba(0,0,0,0.02) 1px, transparent 1.5px),#ECE5DD`;
  return (
    <window.IOSDevice width={390} height={780}>
      <div style={{height:'100%',display:'flex',flexDirection:'column'}}>
        <div style={{height:44}}/>
        <WAHeader name="EatCookJoy UAE" sub="Business · online"/>
        <div style={{flex:1,background:bg,backgroundSize:'24px 24px,32px 32px,auto',display:'flex',flexDirection:'column'}}>
          <div style={{display:'flex',justifyContent:'center',padding:'12px 0'}}>
            <div style={{background:'rgba(225,245,254,0.92)',color:'#54656F',fontSize:12,padding:'5px 12px',borderRadius:8,fontFamily:'-apple-system,system-ui',boxShadow:'0 1px 0.5px rgba(0,0,0,0.13)'}}>TODAY</div>
          </div>
          <div style={{display:'flex',justifyContent:'center',padding:'0 16px 12px'}}>
            <div style={{background:'#FFF3C4',color:'#5C4400',fontSize:11.5,padding:'8px 12px',borderRadius:8,textAlign:'center',fontFamily:'-apple-system,system-ui',maxWidth:320,lineHeight:1.4,boxShadow:'0 1px 0.5px rgba(0,0,0,0.13)'}}>
              🔒 End-to-end encrypted. <span style={{textDecoration:'underline'}}>EatCookJoy UAE</span> is a verified business.
            </div>
          </div>
          <div style={{display:'flex',flexDirection:'column',padding:'0 10px'}}>
            <WABubble tail>
              <div style={{fontWeight:700,color:c.primary,marginBottom:4}}>Chef — we're live in the UAE 🇦🇪</div>
              We're recruiting <strong>50 founding chefs</strong> across Dubai, Abu Dhabi, Sharjah &amp; all 7 Emirates. Cook in family kitchens — your menu, your rate (from AED 450/session), your hours.
            </WABubble>
            <WALinkPreview/>
            <WABubble time="9:15 AM">
              <div style={{fontWeight:700,marginBottom:6,color:c.ink}}>How to join:</div>
              <div style={{lineHeight:1.5}}>
                <span style={{color:c.primary,fontWeight:700}}>1.</span> Apply → <span style={{color:'#027EB5',textDecoration:'underline'}}>eatcookjoy-uae.com/chefs</span><br/>
                <span style={{color:c.primary,fontWeight:700}}>2.</span> 90-min paid trial cook<br/>
                <span style={{color:c.primary,fontWeight:700}}>3.</span> First family booking in 14 days
              </div>
            </WABubble>
            <WABubble time="9:15 AM">
              Founding perks: <strong>0% platform fee Year 1</strong>, featured profile, weekly bookings within your area.
            </WABubble>
            <WABubble time="9:16 AM">
              Closes <strong>Fri 8 May</strong>. Reply <strong>YES</strong> for the form, or tap the link. — Zainab, founder
            </WABubble>
          </div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'8px 8px 10px',background:'#F0F0F0'}}>
          <div style={{flex:1,background:'#fff',borderRadius:22,padding:'10px 14px',display:'flex',alignItems:'center',gap:10,fontSize:14,color:'#999',fontFamily:'-apple-system,system-ui'}}>
            <span style={{fontSize:18}}>😊</span><span style={{flex:1}}>Message</span><span style={{fontSize:16}}>📎</span>
          </div>
          <div style={{width:40,height:40,borderRadius:999,background:'#075E54',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontSize:18}}>🎤</div>
        </div>
      </div>
    </window.IOSDevice>
  );
}

window.WhatsAppMockup = WhatsAppMockup;