/* zylo-phone-demo-pixel.jsx — Google Pixel demo of the Zylo app */
const {useState:usePDState,useEffect:usePDEffect} = React;

const PD_V = '#5B3FB5';
const PD_VL = '#C8B8FF';

function PDZyloMark({size=28,color='#fff'}){
  return(
    <svg width={size} height={size*100/96} viewBox="0 0 96 100">
      <path d="M 10,10 L 72,10 L 84,22 L 30,22 L 30,56 L 10,56 Z" fill={color}/>
      <path d="M 38,64 L 86,64 L 86,90 L 38,90 Z" fill={color}/>
    </svg>
  );
}

function PDSplash(){
  return(
    <div style={{position:'absolute',inset:0,background:'#08080C',display:'flex',
      flexDirection:'column',alignItems:'center',justifyContent:'center',gap:18}}>
      <div style={{animation:'zpop .6s cubic-bezier(.22,1,.36,1)'}}>
        <PDZyloMark size={56}/>
      </div>
      <div style={{fontFamily:"'Archivo',sans-serif",fontWeight:800,fontSize:30,color:'#fff'}}>zylo</div>
    </div>
  );
}

function PDHome(){
  const [credits,setCredits] = usePDState(1842);
  usePDEffect(()=>{
    const t = setInterval(()=>setCredits(c=>c+1), 220);
    return ()=>clearInterval(t);
  },[]);
  return(
    <div style={{position:'absolute',inset:0,background:'#08080C',color:'#fff',
      display:'flex',flexDirection:'column',padding:'58px 20px 20px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:22}}>
        <div style={{fontFamily:"'Archivo',sans-serif",fontWeight:800,fontSize:20}}>Hi, Aarav</div>
        <div style={{width:34,height:34,borderRadius:'50%',background:'rgba(200,184,255,.15)'}}></div>
      </div>
      <div style={{display:'flex',flexDirection:'column',alignItems:'center',margin:'6px 0 20px'}}>
        <div style={{position:'relative',width:150,height:150,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{position:'absolute',inset:0,borderRadius:'50%',
            background:`radial-gradient(circle at 35% 30%, ${PD_VL}, ${PD_V} 70%)`,
            boxShadow:`0 0 46px 6px rgba(200,184,255,.45)`,
            animation:'orbPulse 2.6s ease-in-out infinite'}}></div>
          <div style={{position:'relative',textAlign:'center'}}>
            <div style={{fontFamily:"'Anton',sans-serif",fontSize:34,color:'#fff'}}>{credits.toLocaleString()}</div>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,color:'rgba(255,255,255,.85)',letterSpacing:'.1em',marginTop:2}}>CREDITS</div>
          </div>
        </div>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,color:PD_VL,letterSpacing:'.12em',marginTop:12}}>● EARNING — TIME VERIFIED</div>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:10,flex:1}}>
        {[
          {t:'zylo Now',s:'8% off at Kirana stores nearby'},
          {t:'zylo Eats',s:'35% saved on your last order'},
          {t:'zylo Elite',s:'2 referrals earned you 10 pts'},
        ].map((c,i)=>(
          <div key={i} style={{background:'rgba(255,255,255,.05)',border:'1px solid rgba(255,255,255,.08)',
            borderRadius:14,padding:'12px 14px',animation:`zfade .5s ${i*.15+.3}s both`}}>
            <div style={{fontFamily:"'Archivo',sans-serif",fontWeight:700,fontSize:13,color:'#fff'}}>{c.t}</div>
            <div style={{fontFamily:"'Inter',sans-serif",fontSize:12,color:'rgba(255,255,255,.55)',marginTop:2}}>{c.s}</div>
          </div>
        ))}
      </div>
      <div style={{display:'flex',justifyContent:'space-around',paddingTop:14,borderTop:'1px solid rgba(255,255,255,.08)'}}>
        {['Home','Eats','Now','Shop','Elite'].map((t,i)=>(
          <div key={t} style={{textAlign:'center'}}>
            <div style={{width:6,height:6,borderRadius:'50%',background:i===0?PD_VL:'rgba(255,255,255,.25)',margin:'0 auto 4px'}}></div>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,color:i===0?PD_VL:'rgba(255,255,255,.4)'}}>{t}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PDCheckout(){
  const [applied,setApplied] = usePDState(false);
  usePDEffect(()=>{
    const t = setTimeout(()=>setApplied(true), 700);
    return ()=>clearTimeout(t);
  },[]);
  const total = 480, discount = applied?96:0;
  return(
    <div style={{position:'absolute',inset:0,background:'#F2F2F0',color:'#08080C',
      display:'flex',flexDirection:'column',padding:'58px 20px 20px'}}>
      <div style={{fontFamily:"'Archivo',sans-serif",fontWeight:800,fontSize:19,marginBottom:18}}>Checkout — zylo Eats</div>
      <div style={{background:'#fff',borderRadius:16,padding:16,border:'1px solid rgba(8,8,12,.08)',marginBottom:14}}>
        {[['Butter Chicken Combo','₹320'],['Garlic Naan ×2','₹80'],['Delivery','₹80']].map(([n,p],i)=>(
          <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'7px 0',
            fontFamily:"'Inter',sans-serif",fontSize:13,color:'rgba(8,8,12,.7)'}}>
            <span>{n}</span><span>{p}</span>
          </div>
        ))}
      </div>
      <div style={{background:applied?'rgba(91,63,181,.1)':'rgba(91,63,181,.05)',borderRadius:16,padding:16,
        border:`1px solid rgba(91,63,181,${applied?.3:.15})`,transition:'all .5s',marginBottom:14}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <div style={{fontFamily:"'Archivo',sans-serif",fontWeight:700,fontSize:13,color:PD_V}}>Zylo Credits applied</div>
          <div style={{fontFamily:"'Anton',sans-serif",fontSize:20,color:PD_V,opacity:applied?1:0,transition:'opacity .4s'}}>−₹{discount}</div>
        </div>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,color:'rgba(91,63,181,.7)',letterSpacing:'.06em',marginTop:4}}>
          {applied?'20% SAVED · 960 CREDITS USED':'APPLYING CREDITS…'}
        </div>
      </div>
      <div style={{marginTop:'auto'}}>
        <div style={{display:'flex',justifyContent:'space-between',fontFamily:"'Archivo',sans-serif",fontWeight:800,fontSize:20,marginBottom:14}}>
          <span>Total</span><span>₹{total-discount}</span>
        </div>
        <div style={{background:PD_V,color:'#fff',textAlign:'center',padding:'14px',borderRadius:999,
          fontFamily:"'Archivo',sans-serif",fontWeight:700,fontSize:15}}>Pay &amp; Confirm</div>
      </div>
    </div>
  );
}

const PD_SCREENS = [PDSplash, PDHome, PDCheckout];

function PixelDemo(){
  const [screen,setScreen] = usePDState(0);
  usePDEffect(()=>{
    const durations = [1400, 5000, 4200];
    let idx = 0, timer;
    const advance = ()=>{
      timer = setTimeout(()=>{
        idx = (idx+1) % PD_SCREENS.length;
        setScreen(idx);
        advance();
      }, durations[idx]);
    };
    advance();
    return ()=>clearTimeout(timer);
  },[]);
  const Screen = PD_SCREENS[screen];
  return (
    <div className="pixel-chassis">
      <div className="pixel-buttons">
        <div className="px-btn px-power"></div>
        <div className="px-btn px-vol"></div>
      </div>
      <div className="pixel-screen-mask">
        <div style={{transform:'scale(0.66)',transformOrigin:'top left',width:'151.5%',height:'151.5%'}}>
          <window.AndroidDevice dark width={412} height={892}>
            <div style={{position:'relative',width:'100%',height:'100%',overflow:'hidden'}}>
              <div key={screen} style={{position:'absolute',inset:0,animation:'zscreenIn .45s cubic-bezier(.22,1,.36,1)'}}>
                <Screen/>
              </div>
              <div style={{position:'absolute',inset:0,pointerEvents:'none',
                background:'linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.06) 55%, transparent 70%)',
                mixBlendMode:'overlay'}}></div>
            </div>
          </window.AndroidDevice>
        </div>
      </div>
    </div>
  );
}

if(!document.getElementById('zp-phone-kf')){
  const s=document.createElement('style'); s.id='zp-phone-kf';
  s.textContent = `
    @keyframes zpop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
    @keyframes zfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    @keyframes zscreenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    @keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
  `;
  document.head.appendChild(s);
}

/* Pixel chassis — polished aluminium frame, camera visor hint at top rear omitted (front view) */
if(!document.getElementById('zp-pixel-css')){
  const s=document.createElement('style'); s.id='zp-pixel-css';
  s.textContent = `
    .pixel-chassis{
      position:relative; width:288px; height:614px;
      border-radius:40px; padding:10px;
      background:linear-gradient(155deg,#3d3d44,#1c1c20 35%,#0c0c0e 65%,#33333a);
      box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.16),
        inset 0 2px 3px rgba(255,255,255,.3),
        inset 0 -2px 4px rgba(0,0,0,.6);
    }
    .pixel-screen-mask{
      width:100%; height:100%; border-radius:32px; overflow:hidden;
      background:#000; position:relative;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.9);
    }
    .pixel-buttons{ position:absolute; inset:0; pointer-events:none; z-index:5; }
    .px-btn{ position:absolute; background:linear-gradient(90deg,#1a1a1c,#3c3c40,#1a1a1c);
      border-radius:3px; box-shadow:0 1px 1px rgba(255,255,255,.15); }
    .px-power{ right:-3px; top:128px; width:5px; height:44px; }
    .px-vol{ right:-3px; top:186px; width:5px; height:78px; }
  `;
  document.head.appendChild(s);
}

const pixelRoot = document.getElementById('phone-root');
if(pixelRoot){ ReactDOM.createRoot(pixelRoot).render(<PixelDemo/>); }