/* global React, Icon, Button, Reveal, useInView, useCountUp, formatThousands */

const HERO_STATS = [
  { num: "8",     plus: true,  lbl: "Years of professional experience" },
  { num: "100",   plus: true,  lbl: "Analytics dashboards delivered" },
  { num: "9,500", plus: true,  lbl: "Users using my applications" },
  { num: "15",    plus: true,  lbl: "Corporate trainings delivered" },
  { num: "25",    plus: false, lbl: "Enterprise projects shipped" },
];

function HeroStatNum({ value, plus }) {
  // Parse "6,500" or "8" — animate the integer.
  const numeric = parseInt(String(value).replace(/,/g, ""), 10);
  const [ref, inView] = useInView({ threshold: 0.3 });
  const animated = useCountUp(numeric, { active: inView, duration: 1600 });
  return (
    <div className="hero-stat-num" ref={ref}>
      {formatThousands(animated)}
      {plus && <span className="plus">+</span>}
    </div>
  );
}

function Hero({ onCTA }) {
  return (
    <section id="top" className="hero">
      <div className="container">
        <div className="hero-grid">
          {/* ---------- LEFT: copy ---------- */}
          <div className="hero-copy">
            <Reveal delay={0}>
              <span className="pill pill--lime">
                <span className="pill-dot" />
                Available for projects · Q2–Q3 2026
              </span>
            </Reveal>

            <Reveal delay={80}>
              <h1 className="hero-title">
                Smarter decisions,<br />
                powered by <span className="grad">data &amp; AI.</span>
              </h1>
            </Reveal>

            <Reveal delay={160}>
              <div className="hero-sub-tagline">
                <span>Data Analytics</span>
                <span className="dot" />
                <span>AI</span>
                <span className="dot" />
                <span>Automation</span>
                <span className="dot" />
                <span>Digital Product</span>
              </div>
            </Reveal>

            <Reveal delay={220}>
              <p className="hero-desc">
                I'm <strong>Dhany Indraswara</strong> — helping businesses, teams,
                and professionals make smarter decisions through data analytics,
                business intelligence, AI workflows, automation systems, and
                digital products.
              </p>
            </Reveal>

            <Reveal delay={280}>
              <div className="hero-cta-row">
                <Button variant="primary" size="lg" as="a" href="#projects" arrow>
                  Explore portfolio
                </Button>
                <Button variant="secondary" size="lg" onClick={onCTA}>
                  Work with me
                </Button>
              </div>
            </Reveal>

            <Reveal delay={340}>
              <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>
            </Reveal>
          </div>

          {/* ---------- RIGHT: portrait + floating cards ---------- */}
          <div className="hero-visual">
            <div className="deco-ring deco-ring--lg" />
            <div className="deco-ring deco-ring--md" />

            <div className="portrait-ring">
              <div className="portrait-inner">
                <img
                  className="portrait-photo"
                  src="assets/dhany-portrait.jpg"
                  alt="Dhany Indraswara"
                />
              </div>
            </div>

            <div className="float-tile float-tile--a">
              <div className="float-tile-icon">
                <Icon name="bar-chart-3" size={20} />
              </div>
              <div>
                <div className="float-tile-num">100+</div>
                <div className="float-tile-lbl">Dashboards built</div>
              </div>
            </div>

            <div className="float-tile float-tile--b">
              <div className="float-tile-icon float-tile-icon--lime">
                <Icon name="sparkles" size={20} />
              </div>
              <div>
                <div className="float-tile-num">8+ yrs</div>
                <div className="float-tile-lbl">Enterprise data</div>
              </div>
            </div>

            <div className="float-tile float-tile--c">
              <div className="float-tile-icon float-tile-icon--mint">
                <Icon name="megaphone" size={20} />
              </div>
              <div>
                <div className="float-tile-num">85K+</div>
                <div className="float-tile-lbl">Followers · creator</div>
              </div>
            </div>
          </div>
        </div>

        {/* ---------- STATS BAR ---------- */}
        <Reveal delay={420}>
          <div className="hero-stats glass-card">
            {HERO_STATS.map((s, i) => (
              <div key={i}>
                <HeroStatNum value={s.num} plus={s.plus} />
                <div className="hero-stat-lbl">{s.lbl}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Hero = Hero;