// Hero
function AnimatedCounter({ to, suffix = '', duration = 1.6 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const seen = useRef(false);

  useEffect(() => {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting && !seen.current) {
          seen.current = true;
          const start = performance.now();
          const step = (now) => {
            const p = Math.min(1, (now - start) / (duration * 1000));
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(Math.round(to * eased));
            if (p < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [to, duration]);

  return <span ref={ref}>{val}{suffix}</span>;
}

function Hero() {
  return (
    <section id="inicio" style={{ paddingTop: 160, minHeight: '100vh' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }} className="hero-grid">
        <div>
          <Reveal delay={0}>
            <div className="label-tag">Quetzaltenango · Guatemala</div>
          </Reveal>
          <motion.h1
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.4, delay: 0.1 }}
            style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(56px, 9vw, 140px)',
              lineHeight: 0.95,
              margin: '28px 0 0',
              letterSpacing: '-0.02em',
            }}
          >
            <motion.span
              style={{ display: 'block', color: 'var(--white)' }}
              initial={{ y: 60, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.2, ease: [0.22,1,0.36,1] }}
            >Arte en</motion.span>
            <motion.span
              style={{ display: 'block', color: 'var(--ink-red-bright)', fontStyle: 'italic' }}
              initial={{ y: 60, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.45, ease: [0.22,1,0.36,1] }}
            >tu piel.</motion.span>
          </motion.h1>

          <motion.span
            className="divider"
            initial={{ scaleX: 0, transformOrigin: 'left' }}
            animate={{ scaleX: 1 }}
            transition={{ duration: 0.6, delay: 0.9 }}
            style={{ marginTop: 36, marginBottom: 20 }}
          />

          <Reveal delay={1}>
            <p className="italic-lead" style={{ fontSize: 22, color: 'var(--white)', opacity: 0.85 }}>
              Black &amp; Grey · Blackwork · Fineline
            </p>
          </Reveal>

          <Reveal delay={1.1}>
            <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.7, color: 'var(--gray)', maxWidth: 460 }}>
              Tatuador y piercer profesional desde 2018. Especialista en Black &amp; Grey,
              Blackwork y Fineline. Hype Tattoo Collective — Quetzaltenango, Guatemala.
            </p>
          </Reveal>

          <Reveal delay={1.25}>
            <div style={{ display: 'flex', gap: 16, marginTop: 36, flexWrap: 'wrap' }}>
              <motion.a
                href="#portafolio"
                className="btn btn-primary"
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.97 }}
              >Ver portafolio</motion.a>
              <motion.a
                href={waLink('Hola Edwin, quiero agendar una cita')}
                target="_blank" rel="noopener noreferrer"
                className="btn btn-ghost"
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.97 }}
              >Agendar cita <Icon.Arrow/></motion.a>
            </div>
          </Reveal>
        </div>

        {/* Right — featured image */}
        <Reveal delay={0.2}>
          <div
            className="corner-marks img-placeholder"
            style={{
              position: 'relative',
              aspectRatio: '4/5',
              clipPath: 'polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%)',
            }}
          >
            <span className="cm-a"/><span className="cm-b"/>
            <img
              src="assets/tattoo-01.png"
              alt="Tatuaje Black & Grey — serpiente en pantorrilla"
              loading="lazy"
              style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'contrast(1.05) brightness(0.95)' }}
            />
            <div style={{
              position: 'absolute', bottom: 24, left: 24,
              fontFamily: 'var(--font-accent)', fontSize: 12,
              letterSpacing: '0.3em', color: 'var(--white)',
              background: 'rgba(10,10,10,0.6)', padding: '8px 12px',
              backdropFilter: 'blur(6px)'
            }}>BLACK &amp; GREY · 2026</div>
          </div>
        </Reveal>
      </div>

      {/* Metrics */}
      <Reveal delay={0.3}>
        <div style={{
          marginTop: 80,
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 32,
          paddingTop: 32,
          borderTop: '1px solid rgba(139,0,0,0.25)',
        }} className="metrics-grid">
          {[
            { n: 6, s: '+', l: 'Años de experiencia' },
            { n: 500, s: '+', l: 'Tatuajes realizados' },
            { n: 3, s: '', l: 'Estilos dominados' },
            { n: null, s: '', l: 'Invictus Body Jewelry', special: true },
          ].map((m, i) => (
            <div key={i}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: m.special ? 28 : 'clamp(40px, 5vw, 72px)',
                color: 'var(--white)', lineHeight: 1,
                fontStyle: m.special ? 'italic' : 'normal',
              }}>
                {m.special ? 'Invictus' : <><AnimatedCounter to={m.n}/>{m.s}</>}
              </div>
              <div style={{
                fontFamily: 'var(--font-accent)', fontSize: 12,
                letterSpacing: '0.25em', color: 'var(--gray)',
                marginTop: 12, textTransform: 'uppercase'
              }}>{m.l}</div>
            </div>
          ))}
        </div>
      </Reveal>

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;