// Compact animated stat pill for the hero trust row — reuses the same
// real counters data + useCountUp hook as About's counter cards, just in
// a smaller inline form that fits the dark hero background.
function HeroStat({ item }) {
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setActive(true); io.disconnect(); } });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const value = window.useCountUp(item.value, active);
  return (
    <div className="hero-stat" ref={ref}>
      <svg className="hero-stat-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg>
      <span className="hero-stat-num">{value}{item.suffix}</span>
      <span className="hero-stat-label">{item.label}</span>
    </div>
  );
}

function Hero({ onNavigate, imageSide = 'Right' }) {
  const { Button } = window.ArnelBiscarraDesignSystem_2766cb;
  const roles = window.SITE_DATA.roles;
  // Reordered (not mutated — About's counters grid uses the original
  // order) so a 2-column grid stacks "Happy Clients" directly under
  // "Projects Completed": [Years, Projects, Coffee, Clients].
  const counters = [
    window.SITE_DATA.counters[0],
    window.SITE_DATA.counters[1],
    window.SITE_DATA.counters[3],
    window.SITE_DATA.counters[2],
  ];
  const reversed = imageSide === 'Left';
  const heroRef = React.useRef(null);
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    if (!window.initFluidHero || !canvasRef.current) return;
    const cleanup = window.initFluidHero(canvasRef.current, heroRef.current);
    return cleanup;
  }, []);

  return (
    <section id="top" className="hero container" data-screen-label="Hero" ref={heroRef}>
      <canvas ref={canvasRef} className="hero-fluid" aria-hidden="true"></canvas>
      <div className="hero-glow" aria-hidden="true">
        <div className="hero-glow-arc"></div>
        <div className="hero-glow-wash"></div>
      </div>
      <div className="hero-grid" style={reversed ? { gridTemplateColumns: '0.85fr 1.15fr' } : undefined}>
        {reversed && (
          <Reveal delay={120}>
            <div className="hero-portrait-wrap">
              <div className="hero-portrait-frame" data-parallax="0.07">
                <img src="assets/work/hero-portrait.png" alt="Arnel Biscarra portrait" style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
              </div>
            </div>
          </Reveal>
        )}
        <Reveal>
          <div className="eyebrow hero-eyebrow"><b>/</b> PORTFOLIO</div>
          <h1 className="hero-name">
            <window.AnimatedText text="ARNEL BISCARRA" accentFrom={6} stack repel repelRadius={110} repelStrength={16} />
          </h1>
          <div className="hero-roles">
            <window.Typewriter words={roles} />
          </div>
          <p className="hero-body">
            I create modern websites, powerful branding, creative marketing materials, and
            professional apparel designs that help businesses grow and stand out.
          </p>
          <div className="hero-actions">
            <Button variant="accent" arrow onClick={() => onNavigate('contact')}>Hire Me</Button>
            <Button variant="outline-white" onClick={() => onNavigate('work')}>View Portfolio</Button>
          </div>
          <div className="hero-trust-row">
            {counters.map((c) => <HeroStat key={c.label} item={c} />)}
          </div>
        </Reveal>
        {!reversed && (
          <Reveal delay={120}>
            <div className="hero-portrait-wrap">
              <div className="hero-portrait-frame" data-parallax="0.07">
                <img src="assets/work/hero-portrait.png" alt="Arnel Biscarra portrait" style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
              </div>
            </div>
          </Reveal>
        )}
      </div>
      <div className="scroll-indicator" aria-hidden="true">
        <span>SCROLL</span>
        <span className="scroll-line"></span>
      </div>
    </section>
  );
}

window.Hero = Hero;