const {Button, Icon, SectionHeading, StatBlock, ServiceCard, Card, Tag, Dialog} = window.SuperiorNitrogenServiceDesignSystem_483eb9;

function Hero({t}) {
  const w=useViewport();
  const isMobile=w<=760;
  const px=w<=480?20:w<=980?28:50;
  return (
    <section id="top" style={{position:'relative',minHeight:isMobile?520:600,display:'flex',alignItems:'center'}}>
      <img src="./assets/photos/field-03.jpg" alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
      <div style={{position:'absolute',inset:0,background:'var(--scrim-side)'}}/>
      <div style={{position:'relative',maxWidth:'var(--max-width)',margin:'0 auto',padding:isMobile?`72px ${px}px`:`104px ${px}px`,width:'100%'}}>
        <span className="sns-eyebrow" style={{color:'var(--orange-500)'}}>{t.heroEyebrow}</span>
        <h1 style={{fontSize:isMobile?'clamp(30px,9vw,44px)':'var(--fs-display-1)',lineHeight:isMobile?1.1:'var(--lh-display-1)',letterSpacing:'var(--ls-display-1)',fontWeight:800,color:'var(--white)',maxWidth:1200,margin:'16px 0 20px'}}>{t.heroTitle}</h1>
        <p style={{fontSize:isMobile?15:'var(--fs-body-lg)',lineHeight:'var(--lh-body-lg)',color:'rgba(255,255,255,.86)',maxWidth:620}}>{t.heroLede}</p>
        <div style={{display:'flex',gap:16,marginTop:32,flexWrap:'wrap'}}>
          <Button size={isMobile?'md':'lg'} onClick={()=>scrollToId('contact')} iconRight={<Icon name="arrow-right" size={18}/>}>{t.cta}</Button>
          <Button size={isMobile?'md':'lg'} variant="outlineInverse" onClick={()=>scrollToId('services')}>{t.heroSecondary}</Button>
        </div>
      </div>
    </section>
  );
}

function StatBand({t}) {
  const ref=React.useRef(null);
  const w=useViewport();
  const isMobile=w<=760;
  const px=w<=480?20:w<=980?28:50;
  const [started,setStarted]=React.useState(false);
  const [vals,setVals]=React.useState(()=>t.stats.map(()=>0));

  React.useEffect(()=>{ setStarted(false); setVals(t.stats.map(()=>0)); },[t]);

  React.useEffect(()=>{
    const el=ref.current;
    if(!el||started) return;
    const io=new IntersectionObserver((entries)=>{
      entries.forEach(entry=>{ if(entry.isIntersecting){ setStarted(true); io.disconnect(); } });
    },{threshold:.4});
    io.observe(el);
    return ()=>io.disconnect();
  },[started,t]);

  React.useEffect(()=>{
    if(!started) return;
    const targets=t.stats.map(([v])=>parseInt(v,10));
    const duration=1400;
    const start=performance.now();
    let raf;
    const tick=(now)=>{
      const p=Math.min(1,(now-start)/duration);
      const eased=1-Math.pow(1-p,3);
      setVals(targets.map(n=>Math.round(n*eased)));
      if(p<1) raf=requestAnimationFrame(tick);
    };
    raf=requestAnimationFrame(tick);
    return ()=>cancelAnimationFrame(raf);
  },[started,t]);

  return (
    <section ref={ref} style={{background:'var(--navy-900)',padding:'40px 0 32px'}}>
      <div style={{maxWidth:'var(--max-width)',margin:'0 auto',padding:`0 ${px}px`}}>
        <div style={{display:'grid',gridTemplateColumns:isMobile?'repeat(2,1fr)':'repeat(4,1fr)',gap:32,rowGap:isMobile?28:32}}>
          {t.stats.map(([v,u,l],i)=>(<StatBlock key={l} value={String(vals[i])} unit={u} label={l} onDark/>))}
        </div>
        <p style={{marginTop:24,fontSize:12,color:'rgba(255,255,255,.45)'}}>{t.statsNote}</p>
      </div>
    </section>
  );
}

function Services({t}) {
  const w=useViewport();
  const isMobile=w<=760;
  const isTablet=w<=1024;
  const px=w<=480?20:w<=980?28:50;
  const [openIdx,setOpenIdx]=React.useState(null);
  const svc=openIdx!=null?t.services[openIdx]:null;
  const imgs=window.SNS_SERVICE_IMAGES||[];
  return (
    <section id="services" style={{padding:'var(--section-y) 0'}}>
      <div style={{maxWidth:'var(--max-width)',margin:'0 auto',padding:`0 ${px}px`,minHeight:isMobile||isTablet?'auto':'65vh',display:'flex',flexDirection:'column',justifyContent:'center'}}>
        <SectionHeading eyebrow={t.servicesEyebrow} title={t.servicesTitle} lede={t.servicesLede}/>
        <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':isTablet?'repeat(2,1fr)':'repeat(3,1fr)',gap:20,marginTop:40}}>
          {t.services.map(([icon,title,body],i)=>(
            <ServiceCard key={title} icon={icon} title={title} onClick={()=>setOpenIdx(i)} style={{cursor:'pointer'}}>{body}</ServiceCard>
          ))}
        </div>
      </div>
      {svc && (
        <div style={{position:'fixed',inset:0,zIndex:60}}>
          <Dialog eyebrow={t.servicesEyebrow} title={svc[1]} width={620} onClose={()=>setOpenIdx(null)}
            footer={<><Button variant="outline" size="sm" onClick={()=>setOpenIdx(null)}>{t.cancel}</Button><Button size="sm" onClick={()=>{setOpenIdx(null);scrollToId('contact')}} iconRight={<Icon name="arrow-right" size={16}/>}>{t.cta}</Button></>}>
            <div style={{display:'flex',flexDirection:'column',gap:20}}>
              <div style={{height:220,borderRadius:'var(--radius-md)',overflow:'hidden'}}>
                <img src={'./assets/'+imgs[openIdx]} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
              <p style={{fontSize:16,lineHeight:1.7,color:'var(--text-body)'}}>{svc[3]}</p>
            </div>
          </Dialog>
        </div>
      )}
    </section>
  );
}

function About({t}) {
  const w=useViewport();
  const isTablet=w<=1024;
  const px=w<=480?20:w<=980?28:50;
  return (
    <section id="about" style={{background:'var(--surface-subtle)',padding:'var(--section-y-tight) 0'}}>
      <div style={{maxWidth:'var(--max-width)',margin:'0 auto',padding:`0 ${px}px`,display:'grid',gridTemplateColumns:isTablet?'1fr':'1.15fr 1fr',gap:isTablet?36:64,alignItems:'center'}}>
        <div style={{order:isTablet?2:1}}>
          <SectionHeading eyebrow={t.aboutEyebrow} title={t.aboutTitle}/>
          <div style={{display:'flex',flexDirection:'column',gap:16,marginTop:24,maxWidth:'var(--text-measure)'}}>
            <p style={{fontSize:'var(--fs-body-lg)',lineHeight:'var(--lh-body-lg)',color:'var(--text-strong)'}}>{t.aboutP1}</p>
            <p style={{fontSize:16,lineHeight:1.7}}>{t.aboutP2}</p>
            <p style={{fontSize:16,lineHeight:1.7}}>{t.aboutP3}</p>
          </div>
        </div>
        <div style={{height:isTablet?280:400,borderRadius:'var(--radius-lg)',overflow:'hidden',order:isTablet?1:2}}>
          <img src="./assets/photos/field-05.jpg" alt="Superior Nitrogen Service truck and crew on site" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        </div>
      </div>
    </section>
  );
}

function Coverage({t}) {
  const w=useViewport();
  const px=w<=480?20:w<=980?28:50;
  return (
    <section style={{position:'relative',padding:'var(--section-y-tight) 0'}}>
      <img src="./assets/photos/IMG_7386.jpg" alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
      <div style={{position:'absolute',inset:0,background:'var(--scrim-side)'}}/>
      <div style={{position:'relative',maxWidth:'var(--max-width)',margin:'0 auto',padding:`32px ${px}px`}}>
        <SectionHeading onDark eyebrow={t.coverageEyebrow} title={t.coverageTitle} style={{maxWidth:720}}/>
        <div style={{display:'flex',flexWrap:'wrap',gap:8,marginTop:28}}>
          {t.tags.map(x=>(<Tag key={x} tone="onDark">{x}</Tag>))}
        </div>
      </div>
    </section>
  );
}

function News({t}) {
  const w=useViewport();
  const isTablet=w<=1024;
  const px=w<=480?20:w<=980?28:50;
  const imgs=window.SNS_NEWS_IMAGES||[];
  return (
    <section id="news" style={{padding:'var(--section-y-tight) 0'}}>
      <div style={{maxWidth:'var(--max-width)',margin:'0 auto',padding:`0 ${px}px`}}>
        <SectionHeading eyebrow={t.newsEyebrow} title={t.newsTitle} lede={t.newsBody}/>
        <div style={{display:'grid',gridTemplateColumns:isTablet?'1fr':'repeat(2,1fr)',gap:20,marginTop:32}}>
          {t.newsItems.map((n,i)=>(
            <Card key={n.url} tone="subtle" padding={0} style={{display:'flex',flexDirection:'column',overflow:'hidden'}}>
              <div style={{height:180,overflow:'hidden',flex:'0 0 auto'}}>
                <img src={'./assets/'+imgs[i]} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
              <div style={{display:'flex',flexDirection:'column',gap:10,padding:'var(--space-6)'}}>
                <span style={{display:'inline-flex',alignItems:'center',gap:8,fontSize:12,color:'var(--text-muted)',fontFamily:'var(--font-display)',fontWeight:700,letterSpacing:'.06em',textTransform:'uppercase'}}><Icon name="calendar" size={14} color="var(--text-muted)"/>{n.date} · {n.source}</span>
                <strong style={{fontFamily:'var(--font-display)',fontSize:18,lineHeight:1.35,color:'var(--text-strong)'}}>{n.title}</strong>
                <p style={{fontSize:14,lineHeight:1.6,color:'var(--text-body)'}}>{n.summary}</p>
                <a href={n.url} target="_blank" rel="noopener noreferrer" style={{border:'none',display:'inline-flex',alignItems:'center',gap:6,marginTop:4,fontFamily:'var(--font-display)',fontSize:13,fontWeight:700,letterSpacing:'.04em',textTransform:'uppercase',color:'var(--orange-600)'}}>{t.newsReadMore}<Icon name="arrow-up-right" size={14} color="var(--orange-600)"/></a>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {Hero, StatBand, Services, About, Coverage, News});