(function() {
  var useState  = React.useState;
  var useEffect = React.useEffect;
  var Icon      = window.CBIcon;

  /* Magnetic pull — buttons drift toward the cursor while hovered */
  function magnetMove(e) {
    var t = e.currentTarget, r = t.getBoundingClientRect();
    var x = e.clientX - r.left - r.width  / 2;
    var y = e.clientY - r.top  - r.height / 2;
    t.style.transform = 'translate(' + (x * 0.22) + 'px,' + (y * 0.22) + 'px)';
  }
  function magnetReset(e) {
    e.currentTarget.style.transform = '';
    document.body.classList.remove('hov');
  }

  function Hero() {
    var counts      = window.useCounter({ projects: 218, cities: 14, views: 840 });
    var _stats      = useState(null);  var stats = _stats[0], setStats = _stats[1];
    var _liveProjs  = useState([]);    var liveProjects = _liveProjs[0], setLiveProjects = _liveProjs[1];

    useEffect(function() {
      window.ApiClient && window.ApiClient.get('/projects/stats').then(function(d) {
        if (d) setStats(d);
      }).catch(function(){});
      window.ApiClient && window.ApiClient.get('/projects?status=live&limit=3&sort=-ar.views').then(function(d) {
        if (d && d.projects) setLiveProjects(d.projects);
      }).catch(function(){});
    }, []);

    var liveCount   = (stats && stats.liveCount) || counts.projects;
    var totalViews  = stats && stats.byStatus ? stats.byStatus.reduce(function(a,s){ return a+(s.totalViews||0); }, 0) : counts.views * 1000;
    var totalRaised = stats && stats.byStatus ? stats.byStatus.reduce(function(a,s){ return a+(s.totalRaised||0); }, 0) : 2100000;
    var topProject  = liveProjects[0];
    var processingP = liveProjects[1];

    var onSpotlight = function(e) {
      var r = e.currentTarget.getBoundingClientRect();
      e.currentTarget.style.setProperty('--sx', (e.clientX - r.left) + 'px');
      e.currentTarget.style.setProperty('--sy', (e.clientY - r.top) + 'px');
    };

    var TICKER_ITEMS = [
      { icon: 'circle-dot', color: 'var(--lime)',   text: liveCount + ' AR projects live now' },
      { icon: 'eye',        color: 'var(--cyan)',   text: Math.round(totalViews/1000) + 'K AR views this month' },
      { icon: 'coins',      color: 'var(--amber)',  text: '$' + Math.round(totalRaised/1000) + 'K community funded' },
      { icon: 'map-pin',    color: 'var(--violet)', text: counts.cities + ' cities active worldwide' },
      { icon: 'zap',        color: 'var(--rose)',   text: 'Photo to live AR in under 10 minutes' },
      { icon: 'users',      color: 'var(--lime)',   text: 'Citizens · businesses · governments' },
    ];
    var tickerRow = function(keyPrefix) {
      return TICKER_ITEMS.map(function(t, i) {
        return (
          <React.Fragment key={keyPrefix + i}>
            <span className="ticker-item">
              <Icon name={t.icon} size={13} style={{ color: t.color }} />{t.text}
            </span>
            <span className="ticker-sep" />
          </React.Fragment>
        );
      });
    };

    return (
      <React.Fragment>
      <section id="hero" onMouseMove={onSpotlight}>
        <div className="hero-grid" />
        <div className="hero-aurora" />
        <div className="hero-gradient-tl" />
        <div className="hero-gradient-br" />
        <div className="hero-gradient-c" />
        <div className="hero-spot" />
        <div className="hero-noise" />

        <div className="fc fc1" style={{ cursor:'none' }}
          onMouseEnter={function(){ document.body.classList.add('hov'); }}
          onMouseLeave={function(){ document.body.classList.remove('hov'); }}
          onClick={function(){ window.navigate('projects', { filter:'live' }); }}>
          <div className="fc-label"><Icon name="circle-dot" size={11} style={{ color:'var(--lime)' }} />Live in AR</div>
          <div className="fc-val"><span className="fc-dot" style={{ background:'var(--lime)', boxShadow:'0 0 7px var(--lime-glow)' }} />{topProject ? topProject.title : 'West Square'}</div>
          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginTop:4 }}>
            {topProject ? (topProject.ar&&topProject.ar.views||0).toLocaleString()+' views · $'+Math.round((topProject.funding&&topProject.funding.raised||0)/1000)+'K raised' : '31.8K views · $480K raised'}
          </div>
        </div>
        <div className="fc fc2" style={{ cursor:'none' }}
          onMouseEnter={function(){ document.body.classList.add('hov'); }}
          onMouseLeave={function(){ document.body.classList.remove('hov'); }}
          onClick={function(){ window.navigate('ar-demo'); }}>
          <div className="fc-label"><Icon name="zap" size={11} style={{ color:'var(--violet)' }} />AI Enhancing</div>
          <div className="fc-val"><span className="fc-dot" style={{ background:'var(--violet)', boxShadow:'0 0 7px var(--violet-glow)' }} />{processingP ? processingP.title : 'Harbor Center'}</div>
          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginTop:4 }}>Processing… 72% done</div>
        </div>
        <div className="fc fc3" style={{ cursor:'none' }}
          onMouseEnter={function(){ document.body.classList.add('hov'); }}
          onMouseLeave={function(){ document.body.classList.remove('hov'); }}
          onClick={function(){ window.navigate('funding'); }}>
          <div className="fc-label"><Icon name="coins" size={11} style={{ color:'var(--amber)' }} />Total Raised</div>
          <div className="fc-val" style={{ color:'var(--lime)' }}>${Math.round(totalRaised/1000)}K</div>
          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginTop:4 }}>Click to fund projects</div>
        </div>
        <div className="fc fc4" style={{ cursor:'none' }}
          onMouseEnter={function(){ document.body.classList.add('hov'); }}
          onMouseLeave={function(){ document.body.classList.remove('hov'); }}
          onClick={function(){ window.navigate('community'); }}>
          <div className="fc-label"><Icon name="eye" size={11} style={{ color:'var(--cyan)' }} />AR Views</div>
          <div className="fc-val">{Math.round(totalViews/1000)}K</div>
          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginTop:4 }}>Click to see community</div>
        </div>

        <div className="hero-eyebrow" style={{ position:'relative', zIndex:2 }}>
          <span className="hero-eyebrow-line" />
          Civic AR Platform · {counts.cities} Cities · Beta Open
          <span className="hero-eyebrow-line" />
        </div>

        <h1 className="hero-title" style={{ position:'relative', zIndex:2 }}>
          <span className="ht-mask"><span className="hero-title-top">YOUR CITY.</span></span>
          <span className="ht-mask"><span className="hero-title-bot">YOUR VISION.</span></span>
        </h1>

        <p className="hero-sub" style={{ position:'relative', zIndex:2 }}>
          Capture any city location. Describe your vision. Watch AI transform it into a live AR experience visible to everyone who walks past — before a single brick is laid.
        </p>

        <div className="hero-actions" style={{ position:'relative', zIndex:2 }}>
          <button className="btn btn-v"
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseMove={magnetMove}
            onMouseLeave={magnetReset}
            onClick={function(e){
              window.CBGame && window.CBGame.award('cta-submit', 10, 'Bold Move');
              window.CBConfetti && window.CBConfetti.burst({ x: e.clientX, y: e.clientY, count: 50, power: 9 });
              window.navigate('submit');
            }}>
            <Icon name="camera" size={15} /> Submit Your Idea
          </button>
          <button className="btn btn-o"
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseMove={magnetMove}
            onMouseLeave={magnetReset}
            onClick={function(){
              window.CBGame && window.CBGame.award('cta-explore', 10, 'Curious Mind');
              window.navigate('projects', { filter:'live' });
            }}>
            Explore Live AR <Icon name="arrow-right" size={15} />
          </button>
        </div>

        <div className="hero-stats" style={{ position:'relative', zIndex:2 }}>
          <div className="hs" style={{ cursor:'none' }}
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            onClick={function(){ window.navigate('projects'); }}>
            <div className="hs-num" style={{ color:'var(--violet)' }}>{liveCount}</div>
            <div className="hs-label">AR Projects Live</div>
          </div>
          <div className="hs" style={{ cursor:'none' }}
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            onClick={function(){ window.navigate('ar-demo'); }}>
            <div className="hs-num" style={{ color:'var(--lime)' }}>{Math.round(totalViews/1000)}K</div>
            <div className="hs-label">AR Views This Month</div>
          </div>
          <div className="hs">
            <div className="hs-num" style={{ color:'var(--cyan)' }}>{counts.cities}</div>
            <div className="hs-label">Cities Active</div>
          </div>
          <div className="hs" style={{ cursor:'none' }}
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            onClick={function(){ window.navigate('funding'); }}>
            <div className="hs-num" style={{ color:'var(--amber)' }}>${Math.round(totalRaised/100000)/10}M</div>
            <div className="hs-label">Community Funded</div>
          </div>
        </div>

        <div className="scroll-cue">
          <div className="scroll-cue-mouse" />
          <div className="scroll-cue-label">Scroll</div>
        </div>
      </section>

      <div className="ticker" aria-hidden="true">
        <div className="ticker-track">
          {tickerRow('a')}
          {tickerRow('b')}
        </div>
      </div>
      </React.Fragment>
    );
  }

  window.UserHero = Hero;
})();