// Hero.jsx — Leandro Rafael Website
const Hero = ({ onNav }) => {
  const [photoError, setPhotoError] = React.useState(false);
  const canvasRef = React.useRef(null);

  // ── Shader: animated particle mesh in navy tones ──
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let W, H, particles, animId;
    let mouse = { x: 0.5, y: 0.5 };

    const resize = () => {
      W = canvas.width = canvas.offsetWidth;
      H = canvas.height = canvas.offsetHeight;
    };
    resize();
    window.addEventListener('resize', resize);
    canvas.addEventListener('mousemove', e => {
      const r = canvas.getBoundingClientRect();
      mouse.x = (e.clientX - r.left) / W;
      mouse.y = (e.clientY - r.top) / H;
    });

    // Create floating orbs
    const palette = [
      'rgba(45,84,122,',   // navy-light
      'rgba(26,58,92,',    // navy-mid
      'rgba(11,36,71,',    // navy
      'rgba(201,169,97,',  // gold (sparse)
    ];
    particles = Array.from({ length: 18 }, (_, i) => ({
      x: Math.random(), y: Math.random(),
      r: 80 + Math.random() * 180,
      vx: (Math.random() - 0.5) * 0.0002,
      vy: (Math.random() - 0.5) * 0.0002,
      color: palette[i < 15 ? Math.floor(Math.random() * 3) : 3],
      alpha: 0.08 + Math.random() * 0.12,
      phase: Math.random() * Math.PI * 2,
    }));

    const draw = (t) => {
      ctx.clearRect(0, 0, W, H);

      // Base fill
      ctx.fillStyle = '#0B2447';
      ctx.fillRect(0, 0, W, H);

      // Orbs
      particles.forEach(p => {
        p.x += p.vx + (mouse.x - 0.5) * 0.00015;
        p.y += p.vy + (mouse.y - 0.5) * 0.00012;
        p.phase += 0.005;
        // Wrap
        if (p.x < -0.2) p.x = 1.2;
        if (p.x > 1.2) p.x = -0.2;
        if (p.y < -0.2) p.y = 1.2;
        if (p.y > 1.2) p.y = -0.2;

        const pulse = p.alpha + Math.sin(p.phase) * 0.04;
        const grd = ctx.createRadialGradient(
          p.x * W, p.y * H, 0,
          p.x * W, p.y * H, p.r
        );
        grd.addColorStop(0, p.color + Math.min(pulse, 0.28) + ')');
        grd.addColorStop(1, p.color + '0)');
        ctx.beginPath();
        ctx.arc(p.x * W, p.y * H, p.r, 0, Math.PI * 2);
        ctx.fillStyle = grd;
        ctx.fill();
      });

      // Subtle grid overlay
      ctx.strokeStyle = 'rgba(201,169,97,0.04)';
      ctx.lineWidth = 0.5;
      const step = 80;
      for (let x = 0; x < W; x += step) {
        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
      }
      for (let y = 0; y < H; y += step) {
        ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
      }

      animId = requestAnimationFrame(draw);
    };
    animId = requestAnimationFrame(draw);

    return () => {
      cancelAnimationFrame(animId);
      window.removeEventListener('resize', resize);
    };
  }, []);

  return React.createElement('section', {
    id: 'hero',
    'data-screen-label': '01 Hero',
    style: {
      background: '#0B2447',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      overflow: 'hidden',
      paddingTop: 68,
    }
  },
    // Canvas shader background
    React.createElement('canvas', {
      ref: canvasRef,
      style: {
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        pointerEvents: 'none', zIndex: 0,
      }
    }),

    // Gold left accent
    React.createElement('div', {
      style: { position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: '#C9A961', opacity: 0.6, zIndex: 1 }
    }),
    // LR watermark
    React.createElement('img', {
      src: 'assets/logo.png', alt: '',
      style: { position: 'absolute', right: -40, bottom: -40, width: 440, opacity: 0.04, pointerEvents: 'none', userSelect: 'none', zIndex: 1 }
    }),

    // Main hero grid
    React.createElement('div', {
      style: {
        maxWidth: 1280, margin: '0 auto', padding: '72px 40px 64px',
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        gap: 64, alignItems: 'center', width: '100%',
        position: 'relative', zIndex: 2, flex: 1,
      },
      className: 'hero-grid'
    },
      // Left: text
      React.createElement('div', null,
        React.createElement('div', {
          className: 'hero-anim',
          style: {
            fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 500,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            color: '#C9A961', marginBottom: 24, animationDelay: '100ms'
          }
        }, 'Executivo de Finanças, Contabilidade e Transformação Digital'),

        React.createElement('h1', {
          className: 'hero-anim',
          style: {
            fontFamily: "'Playfair Display', serif",
            fontSize: 'clamp(36px, 4.5vw, 64px)', fontWeight: 700,
            lineHeight: 1.1, letterSpacing: '-0.02em',
            color: '#F7F5F0', marginBottom: 28,
            animationDelay: '220ms',
          }
        }, 'Finanças corporativas com método, estratégia, execução e tecnologia.'),

        React.createElement('p', {
          className: 'hero-anim',
          style: {
            fontFamily: "'Inter', sans-serif", fontSize: 19,
            lineHeight: 1.7, color: 'rgba(247,245,240,0.75)',
            maxWidth: 500, marginBottom: 44,
            animationDelay: '340ms',
          }
        }, 'Executivo de finanças e contabilidade, especialista em transformação digital e IA aplicada. FP&A, Controladoria, reestruturação e governança em médias e grandes empresas. Professor de Administração e Finanças na FGV Educação Executiva e conselheiro de PMEs.'),

        React.createElement('div', { className: 'hero-anim', style: { display: 'flex', gap: 16, flexWrap: 'wrap', animationDelay: '440ms' } },
          React.createElement('button', {
            onClick: () => onNav('contato'),
            style: {
              fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 500,
              letterSpacing: '0.04em', background: '#C9A961', color: '#0B2447',
              border: 'none', padding: '14px 32px', borderRadius: 2, cursor: 'pointer',
              transition: 'background 200ms',
            },
            onMouseEnter: e => e.target.style.background = '#DFC080',
            onMouseLeave: e => e.target.style.background = '#C9A961',
          }, 'Falar comigo'),
          React.createElement('button', {
            onClick: () => onNav('cases'),
            style: {
              fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 500,
              letterSpacing: '0.04em', background: 'transparent', color: '#F7F5F0',
              border: '1px solid rgba(247,245,240,0.3)', padding: '14px 32px',
              borderRadius: 2, cursor: 'pointer', transition: 'border-color 200ms',
            },
            onMouseEnter: e => e.target.style.borderColor = 'rgba(247,245,240,0.7)',
            onMouseLeave: e => e.target.style.borderColor = 'rgba(247,245,240,0.3)',
          }, 'Ver cases')
        )
      ),

      // Right: photo
      React.createElement('div', {
        className: 'hero-photo',
        style: {
          position: 'relative', maxHeight: 580,
          aspectRatio: '3/4', overflow: 'hidden',
          background: '#1A3A5C',
        }
      },
        !photoError && React.createElement('img', {
          src: 'assets/foto3.webp',
          alt: 'Leandro Rafael — executivo de finanças corporativas, postura frontal com braços cruzados',
          style: { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' },
          onError: () => setPhotoError(true),
        }),
        photoError && React.createElement('div', {
          style: { position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: '#1A3A5C' }
        },
          React.createElement('img', { src: 'assets/logo.png', alt: '', style: { width: 64, opacity: 0.1, marginBottom: 12 } })
        ),
        React.createElement('div', { style: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 3, background: '#C9A961' } })
      )
    ),

    // Credential bar
    React.createElement('div', {
      style: {
        borderTop: '1px solid rgba(201,169,97,0.15)',
        padding: '20px 40px',
        position: 'relative', zIndex: 2,
        maxWidth: 1280, margin: '0 auto', width: '100%',
      }
    },
      React.createElement('div', { style: { display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center' } },
        React.createElement('span', {
          style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(247,245,240,0.25)', flexShrink: 0 }
        }, 'Formação'),
        ...['FGV EAESP, Mestre em Administração', 'Insper APF', 'Harvard CORe', 'MIT', 'Technion — Israel', 'PUC-Chile'].map((cred, i) =>
          React.createElement(React.Fragment, { key: cred },
            i > 0 && React.createElement('span', { style: { color: 'rgba(201,169,97,0.3)', fontSize: 10 } }, '·'),
            React.createElement('span', { style: { fontFamily: "'Inter',sans-serif", fontSize: 12, color: 'rgba(247,245,240,0.45)', letterSpacing: '0.02em' } }, cred)
          )
        )
      )
    ),

    // Metrics strip
    React.createElement('div', {
      style: { background: 'rgba(0,0,0,0.25)', borderTop: '1px solid rgba(201,169,97,0.12)', position: 'relative', zIndex: 2 }
    },
      React.createElement('div', {
        style: { maxWidth: 1280, margin: '0 auto', padding: '28px 40px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1 },
        className: 'metrics-grid'
      },
        ...[
          { n: 'R$ 18M+', l: 'em valor entregue' },
          { n: 'EBITDA +3,5pp', l: 'em projeto recente' },
          { n: 'OPEX -20%', l: 'redução de despesas' },
          { n: 'Fechamento -58%', l: 'no ciclo contábil' },
        ].map(({ n, l }, i) =>
          React.createElement('div', {
            key: n,
            className: 'hero-anim',
            style: { padding: '0 32px', borderLeft: i > 0 ? '1px solid rgba(201,169,97,0.15)' : 'none', animationDelay: `${600 + i * 100}ms` }
          },
            React.createElement('div', { style: { fontFamily: "'Playfair Display', serif", fontSize: 22, fontWeight: 700, color: '#C9A961', lineHeight: 1, marginBottom: 4 } }, n),
            React.createElement('div', { style: { fontFamily: "'Inter', sans-serif", fontSize: 12, color: 'rgba(247,245,240,0.45)', letterSpacing: '0.02em' } }, l)
          )
        )
      )
    )
  );
};

Object.assign(window, { Hero });