/* global React, Halo, Eyebrow, Button, GlassCard, Icon, BrandIcon, useInView, useCountUp, formatThousands */

function HeroCombinedNumber() {
  const [ref, inView] = useInView({ threshold: 0.4 });
  const value = useCountUp(82400, { active: inView, duration: 2000 });
  return (
    <div className="hero-combined-num" ref={ref}>
      <span className="hero-combined-num-val">{formatThousands(value)}</span>
      <span className="hero-combined-plus">+</span>
    </div>
  );
}

function Hero({ onCTA }) {
  return (
    <section id="top" className="hero">
      <Halo variant="hero">
        <div className="container hero-grid">
          {/* Left: copy */}
          <div className="hero-copy">
            <span className="pill pill--lime">
              <span className="pill-dot" /> Open for collabs · Q2–Q3 2026
            </span>

            <h1 className="hero-title">
              Practical content.<br />
              <span className="hero-title-grad">Real reach.</span>
            </h1>

            <p className="hero-sub">
              I'm Dhany — an <strong>AI Developer &amp; Educator</strong> teaching Power BI,
              data analytics, and AI for productivity. Built for brands that want real reach
              with the right audience.
            </p>

            {/* Combined audience banner — front and center */}
            <div className="hero-combined">
              <div className="hero-combined-main">
                <span className="hero-combined-lbl">Combined audience</span>
                <HeroCombinedNumber />
                <span className="hero-combined-tag">followers across 5 platforms</span>
              </div>
              <div className="hero-combined-divider" />
              <div className="hero-combined-sub">
                <div>
                  <div className="hcs-n">3M<span>+</span></div>
                  <div className="hcs-l">Monthly impressions · all platforms</div>
                </div>
                <div>
                  <div className="hcs-n hcs-n--accent">14%</div>
                  <div className="hcs-l">Avg engagement</div>
                </div>
              </div>
            </div>

            <div className="hero-cta-row">
              <Button variant="primary" onClick={onCTA} icon={<Icon name="arrow-right" size={18} />}>
                Start a collaboration
              </Button>
              <Button variant="secondary" as="a" href="#collab">
                See collaboration options
              </Button>
            </div>

            <div className="hero-meta">
              <span><Icon name="map-pin" size={14} /> Jakarta, Indonesia</span>
              <span><Icon name="globe" size={14} /> English · Bahasa Indonesia</span>
              <span><Icon name="clock" size={14} /> Replies within 24h</span>
            </div>
          </div>

          {/* Right: portrait + floating stat tiles */}
          <div className="hero-visual">
            <div className="portrait-ring">
              <div className="portrait-inner">
                <img
                  className="portrait-photo"
                  src="../../assets/dhany-portrait.jpg"
                  alt="Dhany Indraswara speaking at an event"
                />
              </div>
            </div>

            {/* Orbiting tiles — gentle, ~38s per revolution */}
            <div className="portrait-orbit" aria-hidden="false">
              <a
                href="https://www.instagram.com/dhanyindraswara/"
                target="_blank"
                rel="noopener noreferrer"
                className="float-tile-link float-tile--a"
                aria-label="Open Instagram profile"
              >
                <GlassCard className="float-tile">
                  <div className="float-tile-icon" style={{ background: "#fff", padding: 6 }}>
                    <BrandIcon name="instagram" size={22} />
                  </div>
                  <div>
                    <div className="float-tile-num">35,500+</div>
                    <div className="float-tile-lbl">Instagram · primary</div>
                  </div>
                </GlassCard>
              </a>

              <a
                href="#reach"
                className="float-tile-link float-tile--b"
                aria-label="Jump to reach section"
              >
                <GlassCard className="float-tile">
                  <div className="float-tile-icon" style={{ background: "#D6FD91", color: "#1F1F1F" }}>
                    <Icon name="trending-up" size={18} />
                  </div>
                  <div>
                    <div className="float-tile-num">3M+</div>
                    <div className="float-tile-lbl">Monthly impressions</div>
                  </div>
                </GlassCard>
              </a>

              <a
                href="#audience"
                className="float-tile-link float-tile--c"
                aria-label="Jump to audience section"
              >
                <GlassCard className="float-tile">
                  <div className="float-tile-icon" style={{ background: "#D7E8FB", color: "#02A0C1" }}>
                    <Icon name="sparkles" size={18} />
                  </div>
                  <div>
                    <div className="float-tile-num">14%</div>
                    <div className="float-tile-lbl">Avg engagement</div>
                  </div>
                </GlassCard>
              </a>
            </div>
          </div>
        </div>
      </Halo>
    </section>
  );
}

window.Hero = Hero;