function BranchDiagram({branches}){
const nodeY = [46,124,202];
const nodesSvg = branches.map(function(b,i){
const label = b.title;
return `
<g class="idh-diagram-node idh-node-${i+1}">
<circle cx="560" cy="${nodeY[i]}" r="34" fill="${b.soon?'var(--color-gray-100)':'var(--surface-tint-orange)'}" stroke="${b.soon?'var(--border-strong)':'var(--brand-accent)'}" stroke-width="2"/>
</g>
<foreignObject x="605" y="${nodeY[i]-20}" width="270" height="46">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family:Poppins,sans-serif;font-weight:700;font-size:14px;line-height:1.25;color:var(--text-primary);">${label}</div>
</foreignObject>
<text x="608" y="${nodeY[i]+32}" font-family="Inter, sans-serif" font-size="12" fill="var(--text-muted)">${b.soon?'Bientôt disponible':'Actif'}</text>
`;
}).join('');
const linesSvg = nodeY.map(function(y,i){
return `<path class="idh-diagram-line idh-line-${i+1}" d="M124 124 C 260 124, 420 ${y}, 526 ${y}" fill="none" stroke="var(--border-strong)" stroke-width="2.5"/>`;
}).join('');
const svg = `
<svg viewBox="0 0 900 250" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
${linesSvg}
<circle cx="124" cy="124" r="52" fill="var(--brand-primary)"/>
<circle cx="124" cy="124" r="52" fill="none" stroke="var(--brand-accent)" stroke-width="2" opacity="0.6"/>
<text x="124" y="119" text-anchor="middle" font-family="Poppins, sans-serif" font-weight="800" font-size="18" fill="#fff">IDH</text>
<text x="124" y="137" text-anchor="middle" font-family="Inter, sans-serif" font-size="10" fill="var(--color-navy-300)">HOLDING</text>
${nodesSvg}
</svg>`.trim();
return React.createElement('div',{style:{lineHeight:0},dangerouslySetInnerHTML:{__html:svg}});
}

function Home({go,addToCart,openProduct}){
const {SectionHeader,CategoryCard,StatBlock,Card,Button,Alert,Badge} = window.IDHDesignSystem_6f4674;
const {branches,cartridges} = window.IDH_DATA;
const {Reveal} = window;
function Icon({name,size=22}){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 trustItems = [
{icon:'map-pin',title:'Une adresse, un vrai bureau',text:'Plateau, Immeuble SIDAM, Rue Gaoussou Ouattara — Abidjan.'},
{icon:'phone-call',title:'Une équipe joignable',text:'+225 07 09 34 33 33, par téléphone ou WhatsApp.'},
{icon:'message-circle',title:'WhatsApp 7j/7',text:'Une question, un devis, un dépannage — on vous répond rapidement, tous les jours.'},
{icon:'truck',title:'Livraison fiable',text:'Abidjan sous 24h, et vers l’intérieur du pays sur devis.'}
];

const whyItems = [
{icon:'user-check',title:'Interlocuteur unique',text:'Un seul contact pour vos consommables, votre matériel informatique et, bientôt, vos besoins électriques.'},
{icon:'shield-check',title:'Sérieux & fiabilité',text:'Des produits d’origine, des engagements tenus, et une équipe qui répond présent après la vente.'},
{icon:'map-pin',title:'Proximité Abidjan',text:'Un bureau physique au Plateau, une équipe locale, une livraison pensée pour la ville et ses environs.'},
{icon:'trending-up',title:'Vision de croissance',text:'Une holding qui structure ses activités pour accompagner ses clients sur la durée, pas seulement sur une commande.'}
];

const visionItems = [
{icon:'headset',title:'Services & maintenance informatique',text:'Infogérance, support technique et gestion des réseaux d’entreprise.'},
{icon:'sun',title:'Énergie solaire',text:'Solutions de secours et de continuité énergétique pour locaux professionnels.'},
{icon:'camera',title:'Sécurité électronique',text:'Vidéosurveillance et contrôle d’accès pour sites d’entreprise.'},
{icon:'wifi',title:'Télécoms & connectivité entreprise',text:'Internet professionnel et téléphonie IP pour structures et administrations.'}
];

return React.createElement('div',null,

// 1. HERO — institutional presentation
React.createElement(Reveal,{style:{background:'var(--gradient-navy-hero)',color:'#fff',padding:'92px 32px 76px',position:'relative',overflow:'hidden'}},
React.createElement('div',{style:{position:'absolute',width:520,height:520,borderRadius:'50%',background:'radial-gradient(circle,rgba(240,83,10,0.35) 0%,rgba(240,83,10,0) 70%)',top:-160,right:-120,pointerEvents:'none'}}),
React.createElement('div',{style:{position:'absolute',width:380,height:380,borderRadius:'50%',background:'radial-gradient(circle,rgba(143,163,209,0.25) 0%,rgba(143,163,209,0) 70%)',bottom:-140,left:'38%',pointerEvents:'none'}}),
React.createElement('div',{style:{maxWidth:1240,margin:'0 auto',display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:48,alignItems:'center',position:'relative'}},
React.createElement('div',null,
React.createElement('img',{src:'assets/logo-white.png',style:{height:34,marginBottom:22}}),
React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:13,fontWeight:700,color:'var(--color-orange-400)',textTransform:'uppercase',letterSpacing:'var(--tracking-wide)',marginBottom:14}},'International Djayi Holding'),
React.createElement('h1',{className:'idh-hero-title',style:{fontFamily:'var(--font-display)',fontWeight:800,fontSize:42,lineHeight:1.12,letterSpacing:'var(--tracking-tight)',margin:0,whiteSpace:'nowrap'}},'Fourniture ',React.createElement('span',{style:{color:'var(--color-orange-400)'}},'–'),' Innovation ',React.createElement('span',{style:{color:'var(--color-orange-400)'}},'–'),' Performance'),
React.createElement('p',{style:{fontFamily:'var(--font-body)',fontSize:17,color:'var(--text-on-navy-muted)',marginTop:20,lineHeight:1.7,maxWidth:520}},'International Djayi Holding est un groupe ivoirien structuré en trois branches d’activité, au service des entreprises et administrations d’Abidjan : fourniture de consommables, matériel informatique, et bientôt l’électricité. Une seule holding, un interlocuteur unique, un engagement de sérieux.'),
React.createElement('div',{style:{display:'flex',gap:14,marginTop:32,flexWrap:'wrap'}},
React.createElement(Button,{variant:'primary',size:'lg',onClick:()=>go('catalogue')},'Découvrir la boutique'),
React.createElement(Button,{variant:'outlineOnNavy',size:'lg',onClick:()=>go('contact')},'Nous contacter'))),
React.createElement('div',{style:{height:340}},React.createElement(window.IllustrationHero,null)))),

// 2. BRANCHES — network diagram + full business-segment breakdown (à la holding informatique)
React.createElement(Reveal,{style:{maxWidth:1240,margin:'0 auto',padding:'88px 32px 72px'}},
React.createElement(SectionHeader,{eyebrow:'Nos branches',title:'Trois métiers, un seul partenaire',subtitle:'Une holding structurée en divisions métier claires — chacune avec son propre périmètre, ses propres offres, et le même engagement de sérieux.'}),
React.createElement('div',{style:{marginTop:28,marginBottom:8,maxWidth:900,height:230}},React.createElement(BranchDiagram,{branches})),
React.createElement('div',{style:{display:'flex',flexDirection:'column',gap:20,marginTop:40}},
branches.map(function(b,i){

const iconBox = React.createElement('div',{style:{width:56,height:56,borderRadius:'var(--radius-md)',background:b.soon?'#fff':'var(--brand-primary)',color:b.soon?'var(--text-muted)':'#fff',display:'flex',alignItems:'center',justifyContent:'center'}},
React.createElement(Icon,{name:b.icon,size:26})
);

const titleBlock = React.createElement('div',null,
React.createElement(Badge,{tone:b.soon?'neutral':'success'},b.soon?'Bientôt':'Branche active'),
React.createElement('div',{style:{fontFamily:'var(--font-display)',fontWeight:800,fontSize:20,color:'var(--text-primary)',marginTop:10,lineHeight:1.2}},b.title)
);

const statBlock = b.stat ? React.createElement('div',{style:{marginTop:'auto',paddingTop:16,borderTop:'1px solid var(--border-default)'}},
React.createElement('div',{style:{fontFamily:'var(--font-display)',fontWeight:800,fontSize:26,color:b.soon?'var(--text-muted)':'var(--brand-primary)'}},b.stat.value),
React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:12,color:'var(--text-muted)',marginTop:2}},b.stat.label)
) : null;

const sidebar = React.createElement('div',{style:{padding:'32px 28px',background:b.soon?'var(--surface-muted)':'var(--surface-tint-navy)',borderRadius:'var(--radius-lg) 0 0 var(--radius-lg)',display:'flex',flexDirection:'column',gap:16}},
iconBox,titleBlock,statBlock
);

const offeringRows = (b.offerings||[]).map(function(o){
const bullet = React.createElement('span',{style:{color:b.soon?'var(--text-muted)':'var(--status-success-fg)',flexShrink:0,marginTop:1}},
React.createElement(Icon,{name:'check-circle-2',size:15})
);
const label = React.createElement('span',null,o);
return React.createElement('div',{key:o,style:{display:'flex',gap:8,alignItems:'flex-start',fontFamily:'var(--font-body)',fontSize:13.5,color:'var(--text-secondary)'}},
bullet,label
);
});
const offeringsGrid = React.createElement('div',{style:{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px 24px',marginTop:22}},offeringRows);

const ctaBlock = b.cta ? React.createElement('div',{style:{marginTop:24}},
React.createElement(Button,{variant:'secondary',onClick:function(){go(b.cta);}},'Découvrir cette branche')
) : null;

const content = React.createElement('div',{style:{padding:'32px 32px 32px 28px'}},
React.createElement('div',{style:{fontFamily:'var(--font-display)',fontWeight:600,fontSize:15,color:'var(--brand-accent)',marginBottom:10}},b.subtitle),
React.createElement('p',{style:{fontFamily:'var(--font-body)',fontSize:14.5,color:'var(--text-secondary)',lineHeight:1.7,margin:0,maxWidth:640}},b.description),
offeringsGrid,
ctaBlock
);

const row = React.createElement('div',{style:{display:'grid',gridTemplateColumns:'260px 1fr',gap:0}},sidebar,content);

return React.createElement(Reveal,{key:b.id,delay:i*100},
React.createElement(Card,{padding:'0',elevated:false},row)
);
}))),

// 2b. POURQUOI IDH — 4 short institutional differentiators
React.createElement(Reveal,{style:{maxWidth:1240,margin:'0 auto',padding:'8px 32px 72px'}},
React.createElement(SectionHeader,{eyebrow:'Pourquoi IDH',title:'Un partenaire, pas juste un fournisseur',align:'center'}),
React.createElement('div',{style:{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:24,marginTop:36}},
whyItems.map(w=>React.createElement(Card,{key:w.title,padding:'26px 22px'},
React.createElement('div',{style:{width:44,height:44,borderRadius:'var(--radius-md)',background:'var(--surface-tint-orange)',color:'var(--color-orange-600)',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:16}},React.createElement(Icon,{name:w.icon,size:21})),
React.createElement('div',{style:{fontFamily:'var(--font-display)',fontWeight:700,fontSize:15.5,color:'var(--text-primary)',marginBottom:8}},w.title),
React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:13.5,color:'var(--text-secondary)',lineHeight:1.6}},w.text)
)))),

// 2c. VISION & AMBITIONS — future business lines, clearly teased as not-yet-active
React.createElement(Reveal,{style:{background:'var(--surface-muted)',padding:'80px 32px'}},
React.createElement('div',{style:{maxWidth:1240,margin:'0 auto'}},
React.createElement(SectionHeader,{eyebrow:'Vision & Ambitions',title:'Une holding qui pense sa croissance sur la durée',subtitle:'Au-delà de ses branches actives, IDH étudie de nouveaux métiers pour rester l’interlocuteur unique de ses clients, à mesure que leurs besoins évoluent.'}),
React.createElement('div',{style:{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:20,marginTop:36}},
visionItems.map(v=>React.createElement(Card,{key:v.title,padding:'24px 20px'},
React.createElement('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:14}},
React.createElement('div',{style:{width:44,height:44,borderRadius:'var(--radius-md)',background:'#fff',color:'var(--text-muted)',border:'1px solid var(--border-default)',display:'flex',alignItems:'center',justifyContent:'center'}},React.createElement(Icon,{name:v.icon,size:21})),
React.createElement(Badge,{tone:'navy'},'À venir')
),
React.createElement('div',{style:{fontFamily:'var(--font-display)',fontWeight:700,fontSize:15,color:'var(--text-primary)',marginBottom:6}},v.title),
React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:13,color:'var(--text-secondary)',lineHeight:1.6}},v.text)
))),
React.createElement('div',{style:{textAlign:'center',marginTop:32,fontFamily:'var(--font-body)',fontSize:13.5,color:'var(--text-muted)',fontStyle:'italic'}},'Ces métiers sont à l’étude et seront annoncés progressivement au fil de la croissance du groupe.'))),

// 3. À PROPOS — trust section
React.createElement(Reveal,{style:{background:'var(--surface-tint-navy)',padding:'80px 32px'}},
React.createElement('div',{style:{maxWidth:1240,margin:'0 auto',display:'grid',gridTemplateColumns:'0.95fr 1.05fr',gap:48,alignItems:'center'}},
React.createElement('div',{style:{height:300}},React.createElement(window.IllustrationContact,null)),
React.createElement('div',null,
React.createElement(SectionHeader,{eyebrow:'À propos d’IDH',title:'Une entreprise sérieuse, une équipe disponible',subtitle:'IDH n’est pas une simple boutique en ligne : c’est une holding avec pignon sur rue, une équipe joignable, et un engagement de service sur la durée.'}),
React.createElement('div',{style:{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,marginTop:28}},
trustItems.map(t=>React.createElement('div',{key:t.title,style:{display:'flex',gap:12,alignItems:'flex-start'}},
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}},React.createElement(Icon,{name:t.icon,size:18})),
React.createElement('div',null,
React.createElement('div',{style:{fontFamily:'var(--font-display)',fontWeight:700,fontSize:14.5,color:'var(--text-primary)'}},t.title),
React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:13,color:'var(--text-secondary)',marginTop:3,lineHeight:1.5}},t.text)))))))),

// 4. CATALOGUE PREVIEW — only after the institutional story
React.createElement(Reveal,{style:{background:'var(--gradient-tint-orange)',padding:'72px 32px',borderTop:'1px solid var(--border-default)',borderBottom:'1px solid var(--border-default)'}},
React.createElement('div',{style:{maxWidth:1240,margin:'0 auto'}},
React.createElement(SectionHeader,{eyebrow:'Cartouches populaires',title:'Envie de parcourir la boutique ? Voici quelques références demandées'}),
React.createElement('div',{style:{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:18,marginTop:32}},
cartridges.slice(0,4).map(p=>React.createElement(window.IDHDesignSystem_6f4674.ProductCard,{key:p.ref,image:React.createElement(window.ProductImage,{icon:p.icon,photo:p.photo&&('assets/products/'+p.photo)}),brand:p.brand,name:p.name,sku:p.ref,price:p.price,stock:p.stock,onAdd:()=>addToCart(p),onOpen:()=>openProduct(p)}))),
React.createElement('div',{style:{textAlign:'center',marginTop:32}},React.createElement(Button,{variant:'secondary',onClick:()=>go('catalogue')},'Voir tout le catalogue')))),

React.createElement(Reveal,{style:{maxWidth:1240,margin:'0 auto',padding:'56px 32px 72px'}},
React.createElement(Alert,{tone:'info'},'La branche Électricité arrive bientôt — équipements et installations électriques pour entreprises.')));
}
window.Home = Home;
