function BranchDiagram({branches}){ const nodeY = [46,124,202]; const nodesSvg = branches.map(function(b,i){ const label = b.title; return `
${label}
 ${b.soon?'Bientôt disponible':'Actif'} `; }).join(''); const linesSvg = nodeY.map(function(y,i){ return ``; }).join(''); const svg = ` ${linesSvg} IDH HOLDING ${nodesSvg} `.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=''+inner+'';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;