const WHEEL_SEGMENTS=[
['var(--pigment-royal-blue)','Sound chemistry'],
['var(--pigment-deep-blue)','Matched to your sample.'],
['var(--pigment-green)','Stocked in Delhi.'],
['var(--pigment-emerald)','Unmatched quality'],
['var(--pigment-ochre)','Supports your needs'],
['var(--pigment-orange)','Made sustainably'],
['var(--pigment-vermillion)','More per kg,\nLess per meter.'],
['var(--accent-primary)','Order a trial, today!']
];
function WheelLabels({size,innerRatio}){
const n=WHEEL_SEGMENTS.length,cx=size/2,cy=size/2,rOuter=size/2-2,rInner=size*innerRatio,rMid=(rOuter+rInner)/2;
return WHEEL_SEGMENTS.map(([,text],i)=>{
const a=Math.PI+(i+0.5)/n*2*Math.PI;
const x=cx+rMid*Math.cos(a),y=cy+rMid*Math.sin(a);
return (
<div key={i} style={{position:'absolute',left:x,top:y,transform:'translate(-50%,-50%)',width:110,textAlign:'center',fontFamily:'var(--font-body)',fontWeight:600,fontSize:12,lineHeight:'var(--lh-snug, 1.25)',color:'var(--text-inverse)',pointerEvents:'none'}}>{text}</div>
);
});
}
function Home({setPage}){
const {Button,Tag,Card,StatCounter,SpectrumWheel}=window.PolychemDesignSystem_373bbb;
const isMobile=window.useIsMobile();
const isNarrow=window.useIsNarrowDesktop();
const wheelRef=React.useRef(null);
React.useEffect(()=>{
const el=wheelRef.current;
if(!el)return;
const mo=new MutationObserver(()=>{
const cap=el.querySelector('svg + div');
if(!cap)return;
const span=cap.querySelector('span');
if(!span)return;
const lh=parseFloat(getComputedStyle(span).lineHeight)||20;
const lines=Math.round(span.getBoundingClientRect().height/lh);
if(isMobile){
cap.style.setProperty('margin-top',lines<=1?'-4px':'-2px','important');
}else{
cap.style.paddingTop=lines<=1?'30px':'30px';
cap.style.setProperty('padding-top',lines<=1?'30px':'30px','important');
}
});
mo.observe(el,{subtree:true,childList:true,characterData:true});
let rafId=null,lastEl=null,manualAngle=0,hovering=false;
const getAngle=(svg)=>{
const m=getComputedStyle(svg).transform;
if(m&&m!=='none'){
const vals=m.match(/matrix\(([^)]+)\)/);
if(vals){
const p=vals[1].split(',').map(Number);
return Math.atan2(p[1],p[0])*180/Math.PI;
}
}
return 0;
};
const tick=(clientX,clientY,until)=>{
const now=performance.now();
const target=document.elementFromPoint(clientX,clientY);
if(target&&target.tagName==='path'&&target!==lastEl){
lastEl=target;
target.dispatchEvent(new MouseEvent('mouseover',{bubbles:true}));
}
if(hovering||now<until){
rafId=requestAnimationFrame(()=>tick(clientX,clientY,hovering?performance.now()+200:until));
}
};
const onEnter=()=>{
hovering=true;
const svg=el.querySelector('svg');
if(!svg)return;
manualAngle=getAngle(svg);
svg.style.animation='none';
svg.style.transform=`rotate(${manualAngle}deg)`;
};
const onLeave=()=>{
hovering=false;
const svg=el.querySelector('svg');
if(!svg)return;
const normalized=((manualAngle%360)+360)%360;
svg.style.animation='none';
svg.style.transform=`rotate(${normalized}deg)`;
void svg.offsetWidth;
svg.style.transition='none';
svg.style.animation=`polychem-wheel-spin 120s linear infinite`;
svg.style.animationDelay=`-${(normalized/360*120)}s`;
requestAnimationFrame(()=>{svg.style.transform='';});
};
const onWheel=(e)=>{
e.preventDefault();
const svg=el.querySelector('svg');
if(!svg)return;
manualAngle+=e.deltaY*0.06;
svg.style.transform=`rotate(${manualAngle}deg)`;
if(rafId)cancelAnimationFrame(rafId);
tick(e.clientX,e.clientY,performance.now()+200);
};
el.addEventListener('mouseenter',onEnter);
el.addEventListener('mouseleave',onLeave);
el.addEventListener('wheel',onWheel,{passive:false});
let lastPageScroll=window.scrollY,scrollTimeout=null;
const onPageScroll=()=>{
if(hovering)return;
const svg=el.querySelector('svg');
if(!svg)return;
if(!svg.dataset.scrollDriven){
manualAngle=getAngle(svg);
svg.style.animation='none';
svg.dataset.scrollDriven='1';
}
const cur=window.scrollY;
const delta=cur-lastPageScroll;
lastPageScroll=cur;
manualAngle+=delta*0.15;
svg.style.transform=`rotate(${manualAngle}deg)`;
clearTimeout(scrollTimeout);
scrollTimeout=setTimeout(()=>{
delete svg.dataset.scrollDriven;
onLeave();
},400);
};
window.addEventListener('scroll',onPageScroll,{passive:true});
window.addEventListener('touchmove',onPageScroll,{passive:true});
return ()=>{
el.removeEventListener('mouseenter',onEnter);
el.removeEventListener('mouseleave',onLeave);
el.removeEventListener('wheel',onWheel);
window.removeEventListener('scroll',onPageScroll);
window.removeEventListener('touchmove',onPageScroll);
clearTimeout(scrollTimeout);
mo.disconnect();
if(rafId)cancelAnimationFrame(rafId);
};
},[]);
const industries=[
['BOPP Tape Manufacturers','var(--pigment-royal-blue)','Our primary focus and our longest-standing partnership \u2014 India\u2019s BOPP tape manufacturers, supplied with pigment paste and printing inks of the highest grade.'],
['Corrugated / Kraft Paper / Non-woven Printers','var(--pigment-emerald)','Printing inks for every paper substrate, including non-woven \u2014 formulated to resolve the most common print-quality issues these processes face.'],['Extrusion / Lamination Printers','var(--pigment-ochre)','Inks that withstand the heat of the extrusion or lamination process, delivering the best print at the highest speed for the lowest cost.'],
['Pharma: Aluminium Foil / Paper-Poly Packaging Printers','var(--pigment-vermillion)','NC base \u2014 HR inks for pharma packaging and printing that deliver on flexo and gravure.'],['Poly Printers','var(--pigment-green)','Inks engineered for both treated and untreated poly substrates, running across flexo and gravure with solvent systems matched to each surface \u2014 built for consistent adhesion and colour, print after print.'],
];
return (
<div>
<div style={{background:'linear-gradient(180deg,#fff 60%,var(--surface-sunken))',position:'relative',overflow:'hidden'}}>
<div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:isMobile?'48px 20px 40px':'96px 32px 64px',display:'grid',gridTemplateColumns:isMobile?'1fr':'1.1fr 1fr',gap:48,alignItems:'center',position:'relative'}}>
<div style={{position:'relative',zIndex:1}}>
<Tag accent="red">Since 1998 — Delhi, India</Tag>
<h1 style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:'var(--text-display-xl)',lineHeight:'var(--lh-tight)',letterSpacing:'var(--ls-tight)',margin:'16px 0 12px',color:'var(--text-primary)'}}>The science of color, the art of perfection.</h1>
<p style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:20,color:'var(--accent-primary)',margin:'0 0 16px'}}>We make the colour. You print the pack.</p>
<p style={{fontFamily:'var(--font-body)',fontSize:isNarrow?13:'var(--text-body-lg)',color:'var(--text-secondary)',lineHeight:isNarrow?'var(--lh-snug)':'var(--lh-relaxed)',maxWidth:480,marginBottom:32}}>High-solids pigment pastes and printing inks for flexo and gravure — coating BOPP tape, corrugated, poly film, blister foil, and paper with colour that behaves the same, batch after batch.</p>
<div style={{display:'flex',gap:isMobile?10:16,flexWrap:isMobile?'nowrap':'wrap'}} className={isMobile?'hero-cta-row':undefined}>
{isMobile&&<style>{`.hero-cta-row{width:100%}.hero-cta-row>button{flex:1;width:100%}`}</style>}
<Button variant="primary" size={isMobile?'sm':'lg'} onClick={()=>setPage('contact')}>Request a Quote</Button>
<Button variant="secondary" size={isMobile?'sm':'lg'} onClick={()=>setPage('products')}>View Products</Button>
</div>
</div>
{!isMobile&&(<div ref={wheelRef} style={{position:'absolute',top:-28,height:'100%',right:-420,display:'flex',alignItems:'center',zIndex:0}} className="hero-wheel">
<style>{`.hero-wheel svg + div{left:calc(38% + 4vw - 2vw - 1.5vw) !important;position:absolute !important;top:46% !important;transform:translate(-50%,-50%) !important;right:auto !important;width:clamp(160px,16vw,260px) !important;text-align:right !important;font-size:clamp(14px,26px - 1.2vw,22px) !important;padding-top:6px !important}
@media (min-width:1600px){.hero-wheel svg + div{left:calc(38% + 4vw - 1.5vw) !important}}
.hero-wheel svg + div[data-active-index="0"],.hero-wheel svg + div[data-active-index="4"],.hero-wheel svg + div[data-active-index="6"]{margin-left:-10px}`}</style>
<div className="hero-wheel-blur" style={{position:'absolute',left:0,top:0,width:'46%',height:'100%',pointerEvents:'none',backdropFilter:'blur(6px)',WebkitBackdropFilter:'blur(6px)',display:'none'}}></div>
<style>{`@media (max-width:900px){.hero-wheel-blur{display:block !important}}`}</style>
<SpectrumWheel size={900} spin={true} full={true} innerRatio={0.36} />
</div>)}
</div>
</div>

<div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:isMobile?'32px 20px 48px':'48px 32px 80px',display:'grid',gridTemplateColumns:isMobile?'1fr':'repeat(3,1fr)',gap:isMobile?32:48,textAlign:'center'}}>
<StatCounter value={1998} label="Manufacturing since" />
<StatCounter value={200} suffix="+" label="Pigment pastes and inks matched every year" />
<StatCounter value={500} suffix="MTA" label="production capacity" />
</div>

{isMobile&&(<div style={{position:'relative',display:'flex',justifyContent:'center',padding:'0 20px 40px'}}>
<div ref={wheelRef} style={{position:'relative',width:320,height:'auto'}} className="hero-wheel">
<style>{`@media (max-width:768px){.hero-wheel svg + div{margin-top:-8px}}`}</style>
<SpectrumWheel size={320} spin={true} full={true} innerRatio={0.36} style={{height:'auto'}} />
</div>
</div>)}

<div style={{background:'var(--surface-sunken)',padding:isMobile?'48px 20px':'80px 32px'}}>
<div style={{maxWidth:'var(--container-max)',margin:'0 auto'}}>
<h2 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-heading-lg)',color:'var(--text-primary)',marginBottom:8}}>Businesses we serve</h2>
<p style={{color:'var(--text-secondary)',marginBottom:40,maxWidth:560,fontSize:isNarrow?13:'inherit',lineHeight:isNarrow?'var(--lh-snug)':'inherit'}}>One pigment paste and printing ink platform, engineered for the coloring demands of these industries.</p>
<div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'repeat(3,1fr)',gap:20}}>
{industries.map(([name,color,desc])=>(
<div key={name} style={{background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:24,position:'relative'}}>
<div style={{position:'absolute',top:0,left:0,right:0,height:3,background:color}}></div>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:isNarrow?14:'var(--text-heading-sm)',color:'var(--text-primary)',marginBottom:8}}>{name}</div>
{!isNarrow&&<div>{desc||`Consistent, high-vibrance pigment dispersions formulated for ${name.toLowerCase()} applications.`}</div>}
</div>
))}
<div style={{border:'2px solid var(--accent-primary)',borderRadius:'var(--radius-lg)',padding:24,background:'#fff',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'}}>Latest venture</div>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:isNarrow?14:'var(--text-heading-sm)',color:'var(--text-primary)',margin:'12px 0 8px'}}>Architectural Paint Manufacturers</div>
{!isNarrow&&<p style={{color:'var(--text-secondary)',lineHeight:'var(--lh-relaxed)',margin:0}}>High-performing, high lightfastness, ready-to-mix architectural paint pastes — for exterior, interior, and texture paints, acrylic emulsion, distemper, putty, and primer.</p>}
</div>
</div>
<p style={{color:'var(--text-secondary)',lineHeight:isNarrow?'var(--lh-snug)':'var(--lh-relaxed)',marginTop:24,maxWidth:760,fontSize:isNarrow?13:'inherit'}}>Medium, solvents, reducers, retarders, thickeners, and fast-drying agents for all of the above.</p>
</div>
</div>

<div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:isMobile?'32px 20px':'80px 32px',display:'grid',gridTemplateColumns:isMobile||isNarrow?'1fr':'1fr 1fr',gap:isMobile?24:64,alignItems:'center'}}>
<div>
<h2 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-heading-lg)',color:'var(--text-primary)',marginBottom:16}}>Why choose Polychem?</h2>
<div style={{display:isMobile||!isNarrow?'flex':'grid',gridTemplateColumns:isNarrow?'repeat(3,1fr)':undefined,flexDirection:isMobile||!isNarrow?'column':undefined,gap:20,columnGap:isNarrow?32:undefined}}>
{[['Unmatched Product Quality','Recognized in the industry for superior performance and reliability.'],
['Consistent Results','Rigorous quality control guarantees uniform products batch to batch.'],
['In-Depth Technical Knowledge','Extensive expertise across the printing and coating industry.'],
['Tailored Solutions','We work with you to meet your specific application requirements.'],
['Sustainable Solutions','Greener chemistry and responsible manufacturing, built into how we produce every batch.']].map(([t,d])=>(
<div key={t} style={{display:'flex',gap:12}}>
<div style={{width:4,background:'var(--accent-primary)',borderRadius:2,flexShrink:0}}></div>
<div><div style={{fontWeight:700,color:'var(--text-primary)',marginBottom:isNarrow?0:4}}>{t}</div>{!isNarrow&&<div style={{color:'var(--text-secondary)',fontSize:14,lineHeight:'var(--lh-relaxed)',maxWidth:isMobile?280:'none'}}>{d}</div>}</div>
</div>
))}
</div>
</div>
<img src="assets/home-factory.webp" alt="Factory / mixer / pigment paste photo" style={{width:'100%',height:isMobile?180:(isNarrow?260:420),display:'block',marginTop:isNarrow?32:0,objectFit:'cover',objectPosition:'50% 50%',borderRadius:'var(--radius-lg)'}}/>
</div>
</div>
);
}
window.Home=Home;