const COLORS={'Milky White':'var(--grey-300)','Black':'var(--charcoal-900)','Yellow':'var(--pigment-ochre)','Red':'var(--accent-primary)','Blue':'var(--pigment-royal-blue)','Green':'var(--pigment-green)','Orange':'var(--pigment-orange)','Violet':'var(--pigment-deep-blue)'};
const SPARKS=[['Milky White','8','22','68 ± 2%'],['Black','8-9','90','41 ± 2%'],['Yellow','8','23','40 ± 2%'],['Red','8','55','43 ± 2%'],['Blue','9-10','18','49 ± 2%'],['Green','8','25','52 ± 2%'],['Orange','8','24','50 ± 2%'],['Violet','8-9','36','34 ± 2%']];
const FLARES=[['Milky White','8','22','60 ± 2%'],['Black','8-9','90','33 ± 2%'],['Yellow','8','23','32 ± 2%'],['Red','8','55','35 ± 2%'],['Blue','9-10','18','41 ± 2%'],['Green','8','25','44 ± 2%'],['Orange','8','24','42 ± 2%'],['Violet','8-9','36','26 ± 2%']];
const INK_APPS=['BOPP Tape','Flexible Packaging','Pharmaceutical','Corrugated Box & Paper','Extrusion & Lamination','Poly Printing','Labels & Stickers'];
const INKS=[
{cat:'BOPP Tape inks',name:'Tapepack BOPP ink',method:'Rotogravure',app:'Reverse Printing',substrate:'BOPP Film',reducers:'Ethyl Acetate, Toluene',base:'Vinyl base',desc:'Ideal for high-quality reverse printing on BOPP films.'},
{cat:'Extrusion inks',name:'GR Xtop Inks',method:'Rotogravure',app:'Reverse Printing',substrate:'Specialised BOPP Tape (High Temp & Extrusion)',reducers:'Ethyl Acetate, Toluene',base:'Vinyl base',desc:'Engineered for extreme conditions, perfect for high temperature and extrusion applications.'},
{cat:'Polyester printing ink',name:'Esterlam Liquid Printing Ink',method:'Rotogravure',app:'Reverse Printing',substrate:'Polyester (Untreated/Corona-treated/Chemically treated)',reducers:'MEK, Toluene',base:'Vinyl base',desc:'High-performance lamination ink for superior bonding on various polyester films.'},
{cat:'POLY printing inks',name:'Micro Gloss Ink',method:'Flexographic & Rotogravure',app:'Reverse Printing',substrate:'Treated PP & PE, Polyester, Treated OPP, Pearlescent BOPP',reducers:'(Flexo) IPA, (Gravure) Toluene',base:'Polyamide base',desc:'Achieve brilliant gloss and robust performance on a wide range of films.'},
{cat:'POLY printing inks',name:'Poplam Ink',method:'Rotogravure',app:'Reverse Printing',substrate:'BOPP Film, Polyester',reducers:'Ethyl Acetate, Toluene',base:'',desc:'Reliable lamination grade ink for excellent results on BOPP film and polyester.'},
{cat:'Paper printing ink',name:'Hydro-i-kraft',method:'Flexographic',app:'Surface Printing',substrate:'Paper (Coated & Uncoated), Kraft Paper, Non-woven',reducers:'Water, IPA',base:'Water base',desc:'Eco-friendly water-based solution for crisp surface printing on paper and non-woven materials.'},
{cat:'Paper printing ink',name:'Microlabel Ink',method:'Flexographic',app:'Surface Printing',substrate:'Paper (Coated & Uncoated)',reducers:'Water, IPA',base:'Water base',desc:'Specialised water-based ink for precise watermarking and high-quality label printing.'},
{cat:'Al foil printing ink',name:'Pharmatemp Ink',method:'Rotogravure',app:'Surface Printing',substrate:'Aluminium Foil, Paper (Coated & Uncoated) — Medical Purposes',reducers:'Ethyl Alcohol',base:'NC base',desc:'Heat-resistant ink designed for demanding medical packaging on foils and papers.'},
{cat:'Eco-friendly ink',name:'Gecko Ink',method:'Flexographic & Rotogravure',app:'Surface Printing',substrate:'PE, Coex OPP, BOPP, Paper, Metalized Film',reducers:'(Flexo) Ethanol, (Gravure) Ethyl Acetate',base:'NC base',desc:'Environmentally conscious ink offering superior surface print quality across multiple substrates.'},
{cat:'Specialised ink',name:'Fantasy Ink',method:'Flexographic & Rotogravure',app:'Surface & Reverse Printing',substrate:'BOPP Film, LD, HDPE, Polyester (Untreated)',reducers:'(Gravure) Ethyl Acetate & Toluene, (Flexo) IPA & NBA',base:'Polyamide base',desc:'Versatile ink for exceptional performance in both surface and reverse printing applications.'},
{cat:'Others — Poly Lamination Adhesives',name:'Micro-Flex',method:'',app:'',substrate:'',reducers:'',base:'Solvent base',desc:'High-performance solvent-based adhesives for robust and durable lamination.'},
{cat:'Others — Metallic Pastes',name:'Gold & Silver Pastes',method:'',app:'',substrate:'',reducers:'',base:'Solvent base',desc:'Premium solvent-based metallic pastes for striking visual effects and enhanced product appeal. Available in small packaging.'}
];
function InkCard({p}){
const [open,setOpen]=React.useState(false);
return (
<div onClick={(e)=>{e.stopPropagation();setOpen(o=>!o);}} style={{border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:open?20:'14px 20px',background:'#fff',cursor:'pointer'}}>
<div style={{fontFamily:'var(--font-body)',fontWeight:700,fontSize:'var(--text-caption)',color:'var(--text-tertiary)',textTransform:'uppercase',letterSpacing:'.05em',marginBottom:4}}>{p.cat}</div>
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:10}}>
<div style={{display:'flex',alignItems:'center',gap:10,flexWrap:'wrap'}}>
<h4 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-heading-sm)',color:'var(--text-primary)',margin:0}}>{p.name}</h4>
{p.base&&<span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--pigment-royal-blue)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-pill)',padding:'2px 10px'}}>{p.base}</span>}
</div>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{flexShrink:0,color:'var(--text-tertiary)',transform:open?'rotate(180deg)':'none',transition:'transform .15s ease-out'}}><path d="M6 9l6 6 6-6"></path></svg>
</div>
{open&&(<>
<p style={{color:'var(--text-secondary)',lineHeight:'var(--lh-snug)',fontSize:'var(--text-body-sm)',marginTop:10,marginBottom:p.method?14:0}}>{p.desc}</p>
{p.method&&(<div style={{fontFamily:'var(--font-mono)',fontSize:12.5,color:'var(--text-primary)',display:'grid',gridTemplateColumns:'auto 1fr',gap:'4px 12px'}}>
<span style={{color:'var(--text-tertiary)'}}>Method</span><span>{p.method}</span>
<span style={{color:'var(--text-tertiary)'}}>Application</span><span>{p.app}</span>
<span style={{color:'var(--text-tertiary)'}}>Substrate</span><span>{p.substrate}</span>
<span style={{color:'var(--text-tertiary)'}}>Reducers</span><span>{p.reducers}</span>
</div>)}
</>)}
</div>
);
}
function SpecTable({rows}){
const isMobile=window.useIsMobile();
return (
<div style={{border:isMobile?'none':'1px solid var(--border-subtle)',borderRadius:isMobile?0:'var(--radius-lg)',overflow:isMobile?'auto':'hidden',background:'#fff'}}>
<div style={{minWidth:isMobile?520:'auto'}}>
<div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr',padding:'12px 18px',background:'var(--surface-sunken)',fontFamily:'var(--font-mono)',fontSize:11,textTransform:'uppercase',letterSpacing:'.06em',color:'var(--text-tertiary)'}}>
<div>Product</div><div>pH</div><div>Viscosity (sec)</div><div>Solid %</div>
</div>
{rows.map(([name,ph,visc,solid])=>(
<div key={name} style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr',padding:'12px 18px',borderTop:'1px solid var(--border-subtle)',fontFamily:'var(--font-mono)',fontSize:14,color:'var(--text-primary)',alignItems:'center'}}>
<div style={{display:'flex',alignItems:'center',gap:10}}><span style={{width:10,height:10,borderRadius:'50%',background:COLORS[name],flexShrink:0}}></span>{name}</div>
<div>{ph}</div><div>{visc}</div><div>{solid}</div>
</div>
))}
</div>
</div>
);
}
function VerticalBanner({variant}){
const isMobile=window.useIsMobile();
const lastWord=variant==='paste'?'coated':'printed';
const caption=variant==='paste'?'Click to see inks':'Click to see pastes';
if(isMobile)return (<div style={{padding:'12px 0',fontFamily:'var(--font-body)',fontWeight:600,color:'var(--text-secondary)'}}>{caption}</div>);
return (
<div style={{height:'100%',minHeight:420}}>
<div style={{display:'flex',flexDirection:'column',alignItems:'flex-start',gap:4,position:'sticky',top:180,paddingTop:45}}>
<div style={{fontFamily:'var(--font-body)',fontWeight:600,fontSize:'var(--text-caption)',color:'var(--text-primary)',textAlign:'left',width:'100%',marginTop:12,order:1}}>{caption}</div>
{['More','per','kg.','Less','per',lastWord,'metre.'].map((w,i)=>(<span key={i} style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:'var(--text-display-md)',lineHeight:'var(--lh-tight)',color:w==='Less'?'var(--pigment-crimson)':'var(--text-primary)',whiteSpace:'nowrap',textDecoration:w==='Less'?'underline':'none',order:0}}>{w}</span>))}
</div>
</div>
);
}
function MiniStat({label,value}){
return (
<div style={{border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-md)',padding:'6px 8px',background:'var(--surface-card)',textAlign:'center'}}>
<div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text-tertiary)',textTransform:'uppercase',letterSpacing:'.04em',lineHeight:1.2,marginBottom:3,overflowWrap:'break-word'}}>{label}</div>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:12,color:'var(--text-primary)',lineHeight:1.2,overflowWrap:'break-word'}}>{value}</div>
</div>
);
}
function MobilePasteSelector(){
const {Card}=window.PolychemDesignSystem_373bbb;
const [brand,setBrand]=React.useState('flares');
const [pasteName,setPasteName]=React.useState('Milky White');
const rows=brand==='flares'?FLARES:SPARKS;
const row=rows.find(r=>r[0]===pasteName)||rows[0];
return (
<div style={{marginTop:24}} onClick={e=>e.stopPropagation()}>
<div style={{display:'flex',gap:10}}>
<div onClick={()=>setBrand('flares')} style={{flex:1,border:brand==='flares'?'2px solid var(--accent-primary)':'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:14,background:'#fff',cursor:'pointer'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:'var(--text-body-lg)',color:'var(--accent-primary)'}}>FLARES</div>
<div style={{color:'var(--text-secondary)',fontSize:12,lineHeight:'var(--lh-snug)',marginTop:4}}>New, cost-conscious pigment paste range.</div>
</div>
<div onClick={()=>setBrand('sparks')} style={{flex:1,border:brand==='sparks'?'2px solid var(--accent-primary)':'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:14,background:'#fff',cursor:'pointer'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:'var(--text-body-lg)',color:'var(--text-primary)'}}>SPARKS</div>
<div style={{color:'var(--text-secondary)',fontSize:12,lineHeight:'var(--lh-snug)',marginTop:4}}>Our top-most brand, trusted by thousands.</div>
</div>
</div>
<div style={{display:'flex',flexWrap:'wrap',gap:8,marginTop:16}}>
{rows.map(([name])=>(
<div key={name} onClick={()=>setPasteName(name)} style={{display:'flex',alignItems:'center',gap:6,padding:'8px 12px',borderRadius:'var(--radius-pill)',border:pasteName===name?'2px solid var(--accent-primary)':'1px solid var(--border-subtle)',background:'#fff',fontSize:13,color:'var(--text-primary)',cursor:'pointer'}}>
<span style={{width:9,height:9,borderRadius:'50%',background:COLORS[name],flexShrink:0}}></span>{name}
</div>
))}
</div>
<div style={{marginTop:16,border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:12,background:'#fff'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13,color:'var(--text-primary)',marginBottom:8}}>{brand==='flares'?'FLARES':'SPARKS'} — {pasteName}</div>
<div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:6}}>
<MiniStat label="pH" value={row[1]} /><MiniStat label="Viscosity (sec)" value={row[2]} /><MiniStat label="Solid %" value={row[3]} />
</div>
</div>
<div style={{marginTop:12,border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:12,background:'var(--surface-sunken)'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13,color:'var(--text-primary)',marginBottom:4}}>Brown — customizable</div>
<div style={{color:'var(--text-secondary)',fontSize:11.5,lineHeight:'var(--lh-snug)',marginBottom:8}}>Matched to your sample, available on both brands.</div>
<div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:6}}>
<MiniStat label="pH" value="8.5" /><MiniStat label="Viscosity (sec)" value="min. 25" /><MiniStat label="Solid %" value="60 ± 2%" />
</div>
</div>
<p style={{opacity:0.4,color:'var(--text-secondary)',fontSize:13,lineHeight:'var(--lh-relaxed)',marginTop:24,textAlign:'center'}}>More per kg. Less per coated area.</p>
</div>
);
}
function Products(){
const {Tag,Card}=window.PolychemDesignSystem_373bbb;
const isMobile=window.useIsMobile();
const isNarrow=window.useIsNarrowDesktop();
const [active,setActive]=React.useState(null);
const pasteOn=active==='paste',inksOn=active==='inks';
const pasteStyle={flex:pasteOn?2.4:(inksOn?0.7:1),opacity:inksOn?0.4:1,transition:'flex .35s ease-out,opacity .35s ease-out',cursor:'pointer',minWidth:0};
const inksStyle={flex:inksOn?2.4:(pasteOn?0.7:1),opacity:pasteOn?0.4:1,transition:'flex .35s ease-out,opacity .35s ease-out',cursor:'pointer',minWidth:0};
return (
<div>
<div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:isMobile?'48px 20px 40px':'80px 32px 48px'}}>
<Tag accent="red">Our Range</Tag>
<h1 style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:'var(--text-display-lg)',lineHeight:'var(--lh-tight)',margin:'16px 0 20px',color:'var(--text-primary)'}}>Pigment pastes and printing inks, engineered for your process.</h1>
<p style={{color:'var(--text-secondary)',fontSize:'var(--text-body-lg)',lineHeight:'var(--lh-relaxed)',maxWidth:640}}>Select a product line to see the full technical specification.</p>
</div>

<div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:isMobile?'0 20px 48px':'0 32px 64px',display:'flex',flexDirection:isMobile?'column':'row',gap:24,alignItems:'stretch'}}>
<div style={pasteStyle} onClick={()=>setActive(pasteOn?null:'paste')}>
<div style={{border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:pasteOn?'40px':'32px',background:pasteOn?'#fff':'var(--surface-sunken)',height:'100%'}}>
{!(!pasteOn&&inksOn)&&<h2 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:pasteOn?'var(--text-display-md)':'var(--text-heading-lg)',color:'var(--text-primary)',marginBottom:pasteOn?28:8,transition:'font-size .35s ease-out'}}>Pigment Pastes</h2>}
{!pasteOn&&!inksOn&&<p style={{color:'var(--text-secondary)',lineHeight:'var(--lh-relaxed)'}}>Two brands, one consistency standard — click to see specs.</p>}
{!pasteOn&&inksOn&&<VerticalBanner variant="inks"/>}
{pasteOn&&(isMobile?<MobilePasteSelector/>:<div style={{marginTop:24,display:'flex',flexDirection:'column',gap:36}}>
<div style={{border:'2px solid var(--accent-primary)',borderRadius:'var(--radius-lg)',padding:24,background:'var(--surface-sunken)',position:'relative'}}>
<div style={{position:'absolute',top:-12,left:24,background:'var(--accent-primary)',color:'#fff',fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-caption)',padding:'4px 12px',borderRadius:'var(--radius-pill)',textTransform:'uppercase',letterSpacing:'.05em'}}>New brand</div>
<h3 style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:'var(--text-heading-lg)',color:'var(--accent-primary)',margin:'8px 0 8px'}}>FLARES</h3>
<p style={{color:'var(--text-secondary)',lineHeight:'var(--lh-relaxed)',marginBottom:20,maxWidth:560}}>Our newest pigment paste range. Same raw material. Same viscosity control. Formulated for the cost conscious customer.<br/></p>
<SpecTable rows={FLARES} />
</div>
<div>
<h3 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-heading-md)',color:'var(--text-primary)',margin:'0 0 8px'}}>SPARKS</h3>
<p style={{color:'var(--text-secondary)',lineHeight:'var(--lh-relaxed)',marginBottom:20,maxWidth:560}}>Our top-most pigment paste brand, trusted by thousands of customers.</p>
<SpecTable rows={SPARKS} />
</div>
<div style={{background:'var(--surface-sunken)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:24}}>
<h4 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-body-lg)',color:'var(--text-primary)',marginBottom:8}}>Brown — customizable</h4>
<p style={{color:'var(--text-secondary)',lineHeight:'var(--lh-relaxed)',marginBottom:16,maxWidth:560}}>Manufactured to each customer's sample, available across both Sparks and Flares. Specification may vary as per your sample.</p>
<div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16,maxWidth:420}}>
<Card title="pH">8.5</Card><Card title="Viscosity (sec)">min. 25</Card><Card title="Solid %">60 ± 2%</Card>
</div>
</div>
</div>)}
</div>
</div>
<div style={inksStyle} onClick={()=>setActive(inksOn?null:'inks')}>
<div style={{border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:inksOn?'40px':'32px',background:inksOn?'#fff':'var(--surface-sunken)',height:'100%'}}>
{!(!inksOn&&pasteOn)&&<h2 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:inksOn?'var(--text-display-md)':'var(--text-heading-lg)',color:'var(--text-primary)',marginBottom:inksOn?28:8,transition:'font-size .35s ease-out'}}>Printing Inks</h2>}
{!inksOn&&!pasteOn&&<p style={{color:'var(--text-secondary)',lineHeight:'var(--lh-relaxed)'}}>Flexo and gravure inks — click to see the range.</p>}
{!inksOn&&pasteOn&&<VerticalBanner variant="paste"/>}
{inksOn&&(<div style={{marginTop:24,display:'flex',flexDirection:'column',gap:16}}>
<p style={{color:'var(--text-secondary)',lineHeight:'var(--lh-relaxed)',marginBottom:4}}>Distributed in partnership with hubergroup — a full range of gravure and flexographic inks for the tape and packaging industry.</p>
{INKS.map(p=>(<InkCard key={p.name} p={p} />))}
<div style={{marginTop:8}}>
<h4 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-body-sm)',color:'var(--text-tertiary)',textTransform:'uppercase',letterSpacing:'.05em',marginBottom:12}}>Printed onto</h4>
<div style={{display:'flex',flexWrap:'wrap',gap:10}}>
{INK_APPS.map(a=>(<Tag key={a} accent="blue">{a}</Tag>))}
</div>
</div>
</div>)}
</div>
</div>
</div>

{!pasteOn&&!inksOn&&(<div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:isMobile?'32px 20px 56px':'40px 32px 80px'}}>
<div style={{border:isMobile?'none':'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:isMobile?'0':'48px',background:isMobile?'transparent':'var(--surface-sunken)',boxShadow:isMobile?'none':'var(--shadow-lg)'}}>
<Tag accent="red">Cost in use</Tag>
<h2 style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:isNarrow?'var(--text-heading-sm)':'var(--text-heading-lg)',lineHeight:isNarrow?'var(--lh-snug)':'var(--lh-tight)',color:'var(--text-primary)',margin:'16px 0 12px'}}>More per kg. Less per printed metre.</h2>
<p style={{color:'var(--text-secondary)',maxWidth:680,lineHeight:isNarrow?'var(--lh-snug)':'var(--lh-relaxed)',fontSize:isNarrow?13:'var(--text-body-lg)'}}>Our pastes carry a higher solids percentage than commodity alternatives, so a smaller dose provides more opacity and pigmentation per square-meter. Priced higher per kilogram, the cost per sqm coated or printed comes out lower — with fewer rejections from batch-to-batch drift.<br/>Ask for a trial batch and run the dosage math yourself.</p>
</div>
</div>)}
</div>
);
}
window.Products=Products;