function PaymentMethodCard({icon,label,subtitle,selected,onClick}){
return React.createElement('button',{type:'button',onClick,style:{
display:'flex',alignItems:'center',gap:14,width:'100%',textAlign:'left',cursor:'pointer',
background:selected?'var(--surface-tint-navy)':'#fff',
border:'1.5px solid '+(selected?'var(--brand-primary)':'var(--border-default)'),
borderRadius:'var(--radius-md)',padding:'16px 18px',
transition:'border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)'}},
React.createElement('div',{style:{width:20,height:20,borderRadius:'50%',border:'2px solid '+(selected?'var(--brand-primary)':'var(--border-strong)'),display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}},
selected&&React.createElement('div',{style:{width:10,height:10,borderRadius:'50%',background:'var(--brand-primary)'}})),
React.createElement('div',{style:{width:38,height:38,borderRadius:'var(--radius-sm)',background:'var(--surface-tint-orange)',color:'var(--color-orange-600)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}},icon),
React.createElement('div',{style:{flex:1}},
React.createElement('div',{style:{fontFamily:'var(--font-display)',fontWeight:600,fontSize:15,color:'var(--text-primary)'}},label),
React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:13,color:'var(--text-muted)',marginTop:2}},subtitle)
));
}

function Paiement({go,cart,orderInfo,setLastOrder,clearCart,cancelled}){
const {SectionHeader,Breadcrumbs,Card,Button,Alert} = window.IDHDesignSystem_6f4674;
const {PAYMENT_METHODS,processPayment} = window.IDHPayment;
function Icon({name,size=20}){const pascal=name.replace(/(^\w|-\w)/g,c=>c.replace('-','').toUpperCase());const nodes=window.lucide&&window.lucide.icons[pascal];const inner=nodes?nodes.map(([tag,attrs])=>'<'+tag+' '+Object.entries(attrs).map(([k,v])=>k+'="'+v+'"').join(' ')+'/>').join(''):'';const svg='<svg xmlns="http://www.w3.org/2000/svg" width="'+size+'" height="'+size+'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'+inner+'</svg>';return React.createElement('span',{style:{display:'inline-flex',width:size,height:size},dangerouslySetInnerHTML:{__html:svg}});}
const total = cart.reduce((s,it)=>s+it.price*it.qty,0);
const [selected,setSelected] = React.useState(PAYMENT_METHODS[0].id);
const [processing,setProcessing] = React.useState(false);
const [error,setError] = React.useState(cancelled?'Le paiement en ligne a été annulé. Vous pouvez réessayer ou choisir un autre mode de paiement.':null);

const breadcrumbItems = [{href:'accueil',label:'Accueil'},{href:'boutique',label:'Mon Panier'},{href:'commande',label:'Commande'},{href:'paiement',label:'Paiement'}];

if(cart.length===0){
return React.createElement('div',{style:{maxWidth:1240,margin:'0 auto',padding:'32px 32px 80px'}},
React.createElement(Breadcrumbs,{items:breadcrumbItems,onNavigate:go}),
React.createElement(Card,{padding:'48px'},
React.createElement('div',{style:{textAlign:'center',color:'var(--text-muted)',fontFamily:'var(--font-body)'}},
'Votre panier est vide.',
React.createElement('div',{style:{marginTop:16}},React.createElement(Button,{variant:'primary',onClick:()=>go('catalogue')},'Parcourir le catalogue'))
)
)
);
}
if(!orderInfo.name||!orderInfo.address){
return React.createElement('div',{style:{maxWidth:1240,margin:'0 auto',padding:'32px 32px 80px'}},
React.createElement(Breadcrumbs,{items:breadcrumbItems,onNavigate:go}),
React.createElement(Card,{padding:'48px'},
React.createElement('div',{style:{textAlign:'center',color:'var(--text-muted)',fontFamily:'var(--font-body)'}},
'Merci de renseigner d’abord vos informations de livraison.',
React.createElement('div',{style:{marginTop:16}},React.createElement(Button,{variant:'primary',onClick:()=>go('commande')},'Renseigner mes informations'))
)
)
);
}

const method = PAYMENT_METHODS.find(m=>m.id===selected);

function confirmOrder(){
setProcessing(true);
setError(null);
processPayment(selected,{cart,total,orderInfo}).then(function(result){
if(result.redirect){
// The order is already saved server-side (status "Paiement à vérifier"). Save the
// receipt now so it's ready in localStorage when PayDunya redirects back here — App.jsx
// clears the cart only once that return actually happens (see App.jsx).
setLastOrder({...orderInfo,cart,total,reference:result.reference,methodLabel:method.label,status:'paiement_a_verifier',statusLabel:'Paiement à vérifier',emailSent:false});
window.location.href = result.redirectUrl;
return;
}
setLastOrder({...orderInfo,cart,total,reference:result.reference,methodLabel:method.label,status:result.status,statusLabel:result.statusLabel,emailSent:result.emailSent});
clearCart();
go('confirmation');
}).catch(function(err){
setProcessing(false);
setError(err.message||'Une erreur est survenue, réessayez.');
});
}

const methodCards = PAYMENT_METHODS.map(function(m){
return React.createElement(PaymentMethodCard,{
key:m.id,
icon:React.createElement(Icon,{name:m.icon}),
label:m.label,
subtitle:m.subtitle,
selected:selected===m.id,
onClick:function(){setSelected(m.id);}
});
});

const paydunyaInfo = (method&&method.provider==='paydunya') ? React.createElement('div',{style:{
display:'flex',gap:12,alignItems:'flex-start',
background:'var(--surface-tint-navy)',border:'1px solid var(--border-default)',
borderRadius:'var(--radius-md)',padding:'16px 18px',marginTop:4
}},
React.createElement('div',{style:{width:34,height:34,borderRadius:'50%',background:'#fff',color:'var(--brand-primary)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}},React.createElement(Icon,{name:'shield-check',size:17})),
React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:13.5,color:'var(--text-secondary)',lineHeight:1.6}},
'Vous serez redirigé vers PayDunya pour régler en toute sécurité par carte, Orange Money, Wave ou MTN MoMo. Une fois le paiement effectué, vous revenez automatiquement sur le site.'
)
) : null;

const orderLines = cart.map(function(it){
return React.createElement('div',{key:it.ref,style:{display:'flex',justifyContent:'space-between',fontFamily:'var(--font-body)',fontSize:13.5,color:'var(--text-secondary)',marginBottom:8}},
React.createElement('span',null,it.qty,'× ',it.name),
React.createElement('span',null,(it.price*it.qty).toLocaleString('fr-FR'),' FCFA')
);
});

const summaryCard = React.createElement(Card,{padding:'24px',elevated:true},
React.createElement('div',{style:{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,marginBottom:18}},'Récapitulatif'),
orderLines,
React.createElement('div',{style:{display:'flex',justifyContent:'space-between',fontFamily:'var(--font-display)',fontWeight:700,fontSize:20,color:'var(--brand-primary)',borderTop:'1px solid var(--border-default)',paddingTop:16,marginTop:10,marginBottom:20}},
React.createElement('span',null,'Total'),
React.createElement('span',null,total.toLocaleString('fr-FR'),' FCFA')
),
React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:13,color:'var(--text-secondary)',lineHeight:1.7,marginBottom:18,paddingTop:14,borderTop:'1px solid var(--border-default)'}},
React.createElement('div',{style:{fontWeight:600,color:'var(--text-primary)'}},orderInfo.name),
orderInfo.phone,
React.createElement('br'),
orderInfo.address,', ',orderInfo.commune,
React.createElement('div',null,React.createElement('a',{href:'#',onClick:function(e){e.preventDefault();go('commande');},style:{color:'var(--text-link)',fontSize:12.5}},'Modifier'))
),
error&&React.createElement('div',{style:{marginBottom:16}},React.createElement(Alert,{tone:'warning'},error)),
React.createElement(Button,{variant:'primary',fullWidth:true,size:'lg',disabled:processing,onClick:confirmOrder},
processing?'Traitement en cours...':'Confirmer la commande'
)
);

return React.createElement('div',{style:{maxWidth:1240,margin:'0 auto',padding:'32px 32px 80px'}},
React.createElement(Breadcrumbs,{items:breadcrumbItems,onNavigate:go}),
React.createElement('div',{style:{marginTop:20}},React.createElement(SectionHeader,{eyebrow:'Étape 2 sur 2',title:'Choisissez votre mode de paiement',subtitle:'Paiement en ligne sécurisé via PayDunya, ou paiement à la livraison.'})),
React.createElement('div',{style:{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:32,marginTop:32,alignItems:'start'}},
React.createElement('div',{style:{display:'flex',flexDirection:'column',gap:10}},methodCards,paydunyaInfo),
summaryCard
)
);
}
window.Paiement = Paiement;