function WebsiteHero() {
  const label = {
    fontFamily: 'Helvetica, Arial, sans-serif',
    fontWeight: 400,
    fontSize: 12,
    letterSpacing: '.12em',
    textTransform: 'uppercase',
    color: '#5A5A57',
    margin: 0,
    lineHeight: 1.8,
  };

  const [hov, setHov] = React.useState(-1);
  const { isMobile, isPhone } = useViewport();
  const roles = ['Art Direction', 'Creative Marketing Direction', 'Creative AI', 'Branding Strategy'];

  /* ── mouse-glow effect ── */
  const glowRef = React.useRef(null);
  const mousePos = React.useRef({ x: 0.5, y: 0.5 });
  const targetPos = React.useRef({ x: 0.5, y: 0.5 });

  React.useEffect(() => {
    const section = sectionRef.current;
    const glow = glowRef.current;
    if (!section || !glow || isMobile) return;
    const lerp = (a, b, t) => a + (b - a) * t;
    const onMove = (e) => {
      const r = section.getBoundingClientRect();
      targetPos.current = {
        x: (e.clientX - r.left) / r.width,
        y: (e.clientY - r.top) / r.height,
      };
    };
    section.addEventListener('mousemove', onMove);
    let raf;
    const tick = () => {
      const m = mousePos.current;
      const t = targetPos.current;
      m.x = lerp(m.x, t.x, 0.045);
      m.y = lerp(m.y, t.y, 0.045);
      const px = (m.x * 100).toFixed(2);
      const py = (m.y * 100).toFixed(2);
      glow.style.background = [
        `radial-gradient(ellipse 65% 55% at ${px}% ${py}%, rgba(210,162,96,0.09) 0%, rgba(180,130,70,0.04) 40%, transparent 72%)`,
        `radial-gradient(circle 22% at ${px}% ${py}%, rgba(240,210,150,0.05) 0%, transparent 60%)`,
      ].join(', ');
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { section.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
  }, [isMobile]);

  const NAME = 'LUCAS QUEIROZ';
  const items = NAME.split('');
  const lineRef = React.useRef(null);
  const innersRef = React.useRef([]);
  const sectionRef = React.useRef(null);
  const [nameSize, setNameSize] = React.useState(null);

  /* ── fit name to 100% of available width, single line ── */
  React.useEffect(() => {
    const el = lineRef.current;
    if (!el) return;
    function fit() {
      const parent = el.parentElement;
      if (!parent) return;
      const avail = parent.clientWidth;
      if (!avail) return;
      // measure imperatively at a known size, then commit via state so a
      // later re-render (e.g. role hover) can't reset fontSize to the clamp
      el.style.fontSize = '120px';
      let w = el.scrollWidth;
      if (!w) return;
      let size = 120 * avail / w;
      el.style.fontSize = size + 'px';
      w = el.scrollWidth;
      size = size * avail / w;
      setNameSize(size + 'px');
    }
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(el.parentElement);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(fit);
    [120, 400, 900, 1600].forEach((t) => setTimeout(fit, t));
    window.addEventListener('resize', fit);
    return () => { ro.disconnect(); window.removeEventListener('resize', fit); };
  }, []);

  /* ── entrance rise + scroll-driven disappear (letters sliding up & out) ── */
  React.useEffect(() => {
    const inners = innersRef.current.filter(Boolean);
    if (!inners.length) return;
    const EASE = 'cubic-bezier(.19,1,.22,1)';

    inners.forEach((s, i) => {
      s.style.transform = 'translateY(112%)';
      s.style.transition = 'transform 1s ' + EASE;
      s.style.transitionDelay = (0.15 + i * 0.03) + 's';
    });
    requestAnimationFrame(() => requestAnimationFrame(() => {
      inners.forEach((s) => { s.style.transform = 'translateY(0)'; });
    }));

    const section = sectionRef.current;
    let entranceDone = false, raf = 0;
    const dt = setTimeout(() => {
      entranceDone = true;
      inners.forEach((s) => {
        s.style.transition = 'transform .12s linear, opacity .12s linear';
        s.style.transitionDelay = '0s';
      });
    }, 1500);

    const N = inners.length;
    const STAG = 0.55;
    // rect-driven (works regardless of scroll container): as the hero
    // scrolls up, letters slide up & fade out, staggered left-to-right
    function loop() {
      if (entranceDone && section) {
        const r = section.getBoundingClientRect();
        const vh = window.innerHeight || 1;
        const progress = Math.min(Math.max(-r.top / (vh * 0.72), 0), 1);
        for (let i = 0; i < N; i++) {
          const frac = N > 1 ? i / (N - 1) : 0;
          let cp = (progress - frac * STAG) / (1 - STAG);
          cp = Math.min(Math.max(cp, 0), 1);
          inners[i].style.transform = 'translateY(' + (-cp * 1.15).toFixed(3) + 'em)';
          inners[i].style.opacity = (1 - cp).toFixed(3);
        }
      }
      raf = requestAnimationFrame(loop);
    }
    raf = requestAnimationFrame(loop);
    return () => { clearTimeout(dt); cancelAnimationFrame(raf); };
  }, []);

  const maskStyle = {
    display: 'inline-block',
    overflow: 'hidden',
    lineHeight: 0.92,
    paddingBottom: '0.16em',
    marginBottom: '-0.16em',
    verticalAlign: 'bottom',
  };
  const innerStyle = { display: 'inline-block', willChange: 'transform, opacity' };

  let k = 0;
  const nameNodes = items.map((ch, idx) => {
    if (ch === ' ') return <span key={idx} aria-hidden="true" style={{display: 'inline-block', width: '0.24em'}}></span>;
    const myK = k++;
    return (
      <span key={idx} style={maskStyle}>
        <span ref={(el) => { innersRef.current[myK] = el; }} style={innerStyle}>{ch}</span>
      </span>
    );
  });

  return (
    <section ref={sectionRef} id="inicio" data-reveal-group data-stagger="0.12" data-delay="0.1" style={{
      background: '#111110',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      padding: isMobile ? '26px 20px 34px' : '40px 56px 52px',
      boxSizing: 'border-box',
      position: 'relative',
      overflow: 'hidden',
      isolation: 'isolate',
    }}>

      {/* Mouse-glow layer — behind everything via z-index:-1 */}
      <div ref={glowRef} aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        pointerEvents: 'none',
        zIndex: -1,
        transition: 'none',
      }}></div>

      {/* Decorative slow-rotating rings */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: '6%', top: '30%', marginTop: -160,
        width: 320, height: 320,
        border: '1px dashed rgba(255,255,255,0.05)',
        borderRadius: '50%',
        animation: 'heroRingRotate 60s linear infinite',
        pointerEvents: 'none',
      }}></div>
      <div aria-hidden="true" style={{
        position: 'absolute', right: 'calc(6% - 48px)', top: '30%', marginTop: -208,
        width: 416, height: 416,
        border: '1px solid rgba(255,255,255,0.022)',
        borderRadius: '50%',
        animation: 'heroRingRotate 90s linear infinite reverse',
        pointerEvents: 'none',
      }}></div>

      {/* ── TOP ROW ── */}
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
      }}>
        <img
          src="assets/logo-icon-light.png"
          alt="LSQ"
          data-reveal="scale"
          style={{height: isPhone ? 112 : 168, width: 'auto'}}
        />
        <img
          src="assets/wordmark-light.png"
          alt="Marketing & Creative Consulting"
          data-reveal
          style={{width: isPhone ? 112 : 168, height: 'auto', alignSelf: 'flex-start'}}
        />
      </div>

      {/* ── CENTER : NAME + ROLES ── */}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        flex: 1,
        paddingTop: 'clamp(20px, 4vh, 48px)',
      }}>
        <p data-reveal style={{...label, color: '#5A5A57', marginBottom: 'clamp(10px, 2vh, 22px)'}}>
          Portfolio — 2026
        </p>

        {/* Full-width single-line name */}
        <h1 style={{margin: 0, width: '100%'}}>
          <span ref={lineRef} aria-label={NAME} style={{
            display: 'inline-flex',
            alignItems: 'flex-end',
            whiteSpace: 'nowrap',
            fontFamily: 'HelveticaCompressed, "Arial Narrow", Arial, sans-serif',
            fontWeight: 700,
            lineHeight: 0.92,
            letterSpacing: '-0.015em',
            textTransform: 'uppercase',
            color: '#E3DDD8',
            fontSize: nameSize || 'clamp(56px, 13vw, 240px)',
          }}>{nameNodes}</span>
        </h1>

        {/* Roles — generous gap below the name */}
        <div data-reveal style={{
          display: 'flex',
          alignItems: 'center',
          gap: 'clamp(14px, 1.8vw, 30px)',
          marginTop: isMobile ? 'clamp(26px, 5vh, 48px)' : 'clamp(40px, 8vh, 104px)',
          flexWrap: 'wrap',
        }}>
          {roles.map((r, i) => (
            <React.Fragment key={r}>
              {i > 0 && !isPhone && <span aria-hidden="true" style={{
                width: 1, height: 15, background: '#2C2C2A', display: 'inline-block',
              }}></span>}
              <span style={{
                  fontFamily: 'Helvetica, Arial, sans-serif',
                  fontWeight: 700,
                  fontSize: 'clamp(12px, 1.05vw, 15px)',
                  letterSpacing: '.15em',
                  textTransform: 'uppercase',
                  color: '#8A8A86',
                  whiteSpace: 'nowrap',
                }}
              >
                {r}
              </span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* ── BOTTOM : line + contact ── */}
      <div style={{position: 'relative'}}>
        {/* Scroll cue — centered, visible on the first screen */}
        {!isMobile && (
          <div
            role="button"
            aria-label="Scroll to portfolio"
            onClick={() => { const el = document.getElementById('portfolio'); if (el) window.scrollTo({ top: el.offsetTop, behavior: 'smooth' }); }}
            style={{
              position: 'absolute', left: '50%', bottom: 0,
              transform: 'translateX(-50%)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9,
              animation: 'scrollBob 2s ease-in-out infinite',
              cursor: 'pointer',
            }}
          >
            <span style={{
              fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400,
              fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', color: '#5A5A57',
            }}>Scroll</span>
            <svg width="22" height="30" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{display: 'block'}}>
              <line x1="12" y1="0" x2="12" y2="24" stroke="#5A5A57" strokeWidth="1.2"/>
              <polyline points="5,18 12,26 19,18" stroke="#5A5A57" strokeWidth="1.2" fill="none" strokeLinejoin="round" strokeLinecap="round"/>
            </svg>
          </div>
        )}
        <div aria-hidden="true" style={{
          position: 'relative', height: 1,
          background: '#2C2C2A',
          transformOrigin: 'left center',
          animation: 'lineGrow 1.8s 0.6s cubic-bezier(.19,1,.22,1) both',
        }}></div>

        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-end',
          paddingTop: 22,
          gap: 24,
        }}>
          <div data-reveal style={{display: 'flex', flexDirection: 'column', gap: 6}}>
            <a href="mailto:lucasqueiroz@gmail.com" style={{...label, textDecoration: 'none', color: '#E3DDD8'}}>
              lucasqueiroz@gmail.com
            </a>
            <a href="https://wa.me/5511975514667?text=Quero%20trabalhar%20com%20a%20LSQ." target="_blank" style={{...label, textDecoration: 'none', color: '#5A5A57'}}>+55 11 97551 4667</a>
          </div>

          <div data-reveal style={{display: 'flex', flexDirection: 'column', gap: 6, textAlign: 'right'}}>
            <p style={{...label, color: '#E3DDD8'}}>Marketing Consulting</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WebsiteHero });