/* global React */

function Hero({ fieldIntensity = 1 }) {
  const mailto = 'mailto:management@mirconsulting.ca?subject=Working%20with%20Mir%20Consulting';
  return (
    <section id="top" style={{position:'relative', overflow:'hidden', minHeight:'92vh', display:'flex', alignItems:'center', paddingTop:140, paddingBottom:72}}>
      {fieldIntensity > 0 && <HeroCanvas intensity={fieldIntensity} />}
      {/* Floating orbs (brand motif) */}
      <div className="drift" style={{position:'absolute', top:-80, left:'10%', width:560, height:560, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(239,141,136,0.15), transparent 65%)', pointerEvents:'none', filter:'blur(54px)'}}/>
      <div className="drift-2" style={{position:'absolute', bottom:-120, right:'8%', width:600, height:600, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(214,138,89,0.12), transparent 65%)', pointerEvents:'none', filter:'blur(54px)'}}/>

      <div style={{position:'relative', maxWidth:1080, margin:'0 auto', padding:'0 32px', textAlign:'center', width:'100%'}}>
        <h1 style={{
          fontSize:'clamp(42px, 5.2vw, 76px)', fontWeight:700, letterSpacing:'-0.042em',
          lineHeight:1.06, margin:'0 auto', maxWidth:1000,
        }}>
          <span style={{display:'block'}}>
            <span className="hl-word" style={{animationDelay:'0.10s'}}>We</span>
            <span className="hl-word" style={{animationDelay:'0.16s'}}>build</span>
            <span className="hl-word" style={{animationDelay:'0.22s'}}>AI</span>
            <span className="hl-word" style={{animationDelay:'0.28s'}}>that</span>
          </span>
          <span style={{display:'block'}}>
            <span className="hl-word nb serif-italic" style={{fontWeight:400, color:'var(--cothon-sand)', letterSpacing:'-0.02em', animationDelay:'0.36s'}}>earns</span>
            <span className="hl-word nb serif-italic" style={{fontWeight:400, color:'var(--cothon-sand)', letterSpacing:'-0.02em', animationDelay:'0.42s'}}>its</span>
            <span className="hl-word nb serif-italic" style={{fontWeight:400, color:'var(--cothon-sand)', letterSpacing:'-0.02em', animationDelay:'0.48s'}}>place</span>
          </span>
          <span style={{display:'block'}}>
            <span className="hl-word" style={{animationDelay:'0.54s'}}>in</span>
            <span className="hl-word" style={{animationDelay:'0.60s'}}>your</span>
            <span className="hl-word nb" style={{animationDelay:'0.66s'}}><Gradient>business.</Gradient></span>
          </span>
        </h1>

        <p className="hero-enter" style={{fontSize:'clamp(17px, 1.6vw, 20px)', color:'var(--cothon-sand)', lineHeight:1.55, maxWidth:660, margin:'34px auto 0', animationDelay:'0.82s'}}>
          Mir Consulting designs, builds, and ships custom AI chatbots, workflow
          automation, and full products like Cothon, that move real metrics.
          Not pilots that die in a slide deck.
        </p>

        <div className="hero-enter" style={{display:'flex', gap:14, alignItems:'center', justifyContent:'center', flexWrap:'wrap', marginTop:38, animationDelay:'0.95s'}}>
          <CTAButton href={mailto}>Book an intro call</CTAButton>
          <CTAButton variant="outline" icon={false} href="#work">
            <span style={{display:'inline-flex', alignItems:'center', gap:9}}>
              <span style={{width:24, height:24, borderRadius:9999, border:'1px solid var(--cothon-navy-border)', display:'inline-flex', alignItems:'center', justifyContent:'center'}}>
                <svg width="9" height="9" viewBox="0 0 12 12" fill="currentColor"><polygon points="2,1 11,6 2,11"/></svg>
              </span>
              See what we've built
            </span>
          </CTAButton>
        </div>

        {/* Capability strip */}
        <div className="hero-caps hero-enter" style={{display:'flex', gap:10, justifyContent:'center', flexWrap:'wrap', marginTop:44, animationDelay:'1.08s'}}>
          {[
            { I: MessageSq, t:'Custom AI chatbots' },
            { I: Workflow,  t:'AI integration & automation' },
            { I: Layers,    t:'Custom AI products' },
          ].map(({I,t}, i) => (
            <div key={t} style={{
              display:'inline-flex', alignItems:'center', gap:9,
              padding:'9px 15px', borderRadius:9999,
              background:'rgba(16,49,90,0.5)', border:'1px solid var(--cothon-navy-border)',
              fontSize:13, color:'var(--cothon-cream)',
              backdropFilter:'blur(8px)', WebkitBackdropFilter:'blur(8px)',
            }}>
              <I size={15} color="var(--cothon-coral)"/> {t}
            </div>
          ))}
        </div>

        {/* Proof bar */}
        <div className="hero-proof" style={{
          display:'inline-flex', alignItems:'center', gap:0, marginTop:54,
          borderRadius:14, border:'1px solid var(--cothon-navy-border)',
          background:'rgba(16,49,90,0.45)', overflow:'hidden',
          backdropFilter:'blur(8px)', WebkitBackdropFilter:'blur(8px)',
        }}>
          {[
            { to:60, suffix:'%', label:'faster proposals' },
            { to:3,  suffix:'x', label:'more projects' },
            { to:85, suffix:'%', label:'time saved' },
          ].map((s, i) => (
            <React.Fragment key={i}>
              {i>0 && <span style={{width:1, alignSelf:'stretch', background:'var(--cothon-navy-border)'}}/>}
              <HeroStat {...s} />
            </React.Fragment>
          ))}
        </div>
        <div style={{fontSize:11.5, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.06em', marginTop:14}}>
          MEASURED OUTCOMES FROM OUR WORK WITH SAWA ENERGY
        </div>
      </div>
    </section>
  );
}

function HeroStat({ to, suffix, label }) {
  const [ref, seen] = useInView();
  return (
    <div ref={ref} style={{padding:'16px 26px', textAlign:'center'}}>
      <div style={{fontSize:30, fontWeight:700, letterSpacing:'-0.03em', lineHeight:1, fontVariantNumeric:'tabular-nums'}}>
        <Gradient>{seen ? <CountUp to={to} suffix={suffix} duration={1400} /> : `0${suffix}`}</Gradient>
      </div>
      <div style={{fontSize:12, color:'var(--cothon-sand)', marginTop:7, letterSpacing:'0.02em', whiteSpace:'nowrap'}}>{label}</div>
    </div>
  );
}

Object.assign(window, { Hero });