/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useEffect, useRef, useState } from 'react';

// Interfaces para os tipos de dados do formulário e estados
interface FormData {
  nome: string;
  whatsapp: string;
  segmento: string;
  precisa: string;
  mensagem: string;
}

export default function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  
  // Custom Custom-Selects State
  const [selectSegmentoOpen, setSelectSegmentoOpen] = useState(false);
  const [selectPrecisaOpen, setSelectPrecisaOpen] = useState(false);
  
  // Form Values
  const [formData, setFormData] = useState<FormData>({
    nome: '',
    whatsapp: '',
    segmento: 'Selecione seu segmento',
    precisa: 'O que você precisa?',
    mensagem: ''
  });
  
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<'idle' | 'loading' | 'success'>('idle');
  const [activePackageTab, setActivePackageTab] = useState(0);

  // Refs de Animação e Canvas
  const threeContainerRef = useRef<HTMLDivElement>(null);
  const scrollIndicatorRef = useRef<HTMLDivElement>(null);
  const cursorDotRef = useRef<HTMLDivElement>(null);
  const cursorRingRef = useRef<HTMLDivElement>(null);
  const timelineSvgRef = useRef<SVGPathElement>(null);
  const testimonialsTrackRef = useRef<HTMLDivElement>(null);
  const floatingWidgetRef = useRef<HTMLAnchorElement>(null);

  // Carousel Drag State
  const isDraggingRef = useRef(false);
  const startXRef = useRef(0);
  const scrollLeftRef = useRef(0);
  const [carouselCursorText, setCarouselCursorText] = useState<'drag' | 'dragging' | ''>('');

  // Logo Error Fallback state
  const [logoError, setLogoError] = useState(false);

  // 1. Efeito para acompanhar o Scroll Global
  useEffect(() => {
    const handleScroll = () => {
      const scrollPos = window.scrollY;
      if (scrollPos > 80) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }

      // Desaparece indicador de scroll após 300px
      if (scrollIndicatorRef.current) {
        if (scrollPos > 300) {
          scrollIndicatorRef.current.style.opacity = '0';
          scrollIndicatorRef.current.style.pointerEvents = 'none';
        } else {
          scrollIndicatorRef.current.style.opacity = '1';
          scrollIndicatorRef.current.style.pointerEvents = 'auto';
        }
      }

      // Desaparece Widget do WhatsApp quando na seção #contato
      if (floatingWidgetRef.current) {
        const contatoSection = document.getElementById('contato');
        if (contatoSection) {
          const rect = contatoSection.getBoundingClientRect();
          if (rect.top <= window.innerHeight) {
            floatingWidgetRef.current.style.opacity = '0';
            floatingWidgetRef.current.style.pointerEvents = 'none';
          } else {
            floatingWidgetRef.current.style.opacity = '1';
            floatingWidgetRef.current.style.pointerEvents = 'auto';
          }
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 2. Custom Cursor Follower Logic (apenas desktops)
  useEffect(() => {
    const isMobile = window.innerWidth < 1024;
    if (isMobile) return;

    let targetX = 0;
    let targetY = 0;
    let currentRingX = 0;
    let currentRingY = 0;

    const onMouseMove = (e: MouseEvent) => {
      targetX = e.clientX;
      targetY = e.clientY;

      if (cursorDotRef.current) {
        cursorDotRef.current.style.left = `${targetX}px`;
        cursorDotRef.current.style.top = `${targetY}px`;
      }
    };

    const updateRingPosition = () => {
      // Lerp para o anel para lag inercial premium (fator 0.12)
      currentRingX += (targetX - currentRingX) * 0.12;
      currentRingY += (targetY - currentRingY) * 0.12;

      if (cursorRingRef.current) {
        cursorRingRef.current.style.left = `${currentRingX}px`;
        cursorRingRef.current.style.top = `${currentRingY}px`;
      }

      requestAnimationFrame(updateRingPosition);
    };

    window.addEventListener('mousemove', onMouseMove);
    const animFrame = requestAnimationFrame(updateRingPosition);

    // Eventos de Hover em botões e links
    const handleMouseOver = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      const isInteractive = target.closest('a, button, select, input, textarea, [role="button"], .platform-badge, .stack-card');
      const isCarousel = target.closest('.testi-carousel-outer');

      if (isInteractive) {
        if (cursorDotRef.current) {
          cursorDotRef.current.style.width = '0px';
          cursorDotRef.current.style.height = '0px';
        }
        if (cursorRingRef.current) {
          cursorRingRef.current.style.width = '64px';
          cursorRingRef.current.style.height = '64px';
          cursorRingRef.current.style.borderColor = 'var(--c-orange)';
          cursorRingRef.current.style.backgroundColor = 'rgba(232, 137, 26, 0.05)';
        }
      }

      if (isCarousel) {
        if (cursorRingRef.current) {
          cursorRingRef.current.style.width = '64px';
          cursorRingRef.current.style.height = '64px';
          cursorRingRef.current.style.backgroundColor = 'rgba(232, 137, 26, 0.1)';
          cursorRingRef.current.style.borderColor = 'var(--c-orange)';
        }
        setCarouselCursorText(isDraggingRef.current ? 'dragging' : 'drag');
      }
    };

    const handleMouseOut = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      const isInteractive = target.closest('a, button, select, input, textarea, [role="button"], .platform-badge, .stack-card');
      const isCarousel = target.closest('.testi-carousel-outer');

      if (isInteractive) {
        if (cursorDotRef.current) {
          cursorDotRef.current.style.width = '8px';
          cursorDotRef.current.style.height = '8px';
        }
        if (cursorRingRef.current) {
          cursorRingRef.current.style.width = '40px';
          cursorRingRef.current.style.height = '40px';
          cursorRingRef.current.style.borderColor = 'var(--c-white)';
          cursorRingRef.current.style.backgroundColor = 'transparent';
        }
      }

      if (isCarousel) {
        setCarouselCursorText('');
      }
    };

    window.addEventListener('mouseover', handleMouseOver);
    window.addEventListener('mouseout', handleMouseOut);

    return () => {
      window.removeEventListener('mousemove', onMouseMove);
      cancelAnimationFrame(animFrame);
      window.removeEventListener('mouseover', handleMouseOver);
      window.removeEventListener('mouseout', handleMouseOut);
    };
  }, []);

  // 3. Three.js - Inicialização da Cena 3D de Cuboides Listrados
  useEffect(() => {
    const isMobile = window.innerWidth < 768;
    const container = threeContainerRef.current;
    if (!container) return;

    // Verificar se Three existe globalmente
    const THREE = (window as any).THREE;
    if (!THREE) return;

    // Obter dimensões do container
    let width = container.clientWidth;
    let height = container.clientHeight;

    // Criar Cena, Câmera e Renderer, com alpha:true para fundo transparente
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100);
    camera.position.set(0, 0, 5);

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    container.appendChild(renderer.domElement);

    // Objeto Principal: Cuboides Longos e Finos (DNA de Listras)
    const stripeInstances = isMobile ? 24 : 45;
    const stripeGroup = new THREE.Group();
    const stripes: any[] = [];

    for (let i = 0; i < stripeInstances; i++) {
      // largura aleatória entre 1.5 e 3.2
      const stWidth = 1.6 + Math.random() * 1.6;
      const geom = new THREE.BoxGeometry(stWidth, 0.065, 0.065);
      const mat = new THREE.MeshStandardMaterial({
        color: 0xE8891A,
        metalness: 0.35,
        roughness: 0.55
      });
      const mesh = new THREE.Mesh(geom, mat);

      // Dispostos em grade 3D esparsa com profundidade Z variável
      const x = (Math.random() - 0.5) * 3.4;
      const y = (Math.random() - 0.5) * 3.4;
      const z = (Math.random() - 0.5) * 0.8; // Z var ±0.4
      mesh.position.set(x, y, z);

      // Meta dados da animação individual
      mesh.userData = {
        speed: 1.2 + Math.random() * 1.6,
        offset: Math.random() * Math.PI * 2,
        startY: y
      };

      stripeGroup.add(mesh);
      stripes.push(mesh);
    }
    scene.add(stripeGroup);

    // Partículas de Fundo Estrelares (desligadas no mobile para desempenho superior)
    let stars: any;
    if (!isMobile) {
      const pointsGeom = new THREE.BufferGeometry();
      const numStars = 800;
      const positions = new Float32Array(numStars * 3);

      for (let i = 0; i < numStars * 3; i += 3) {
        // Distribuídas aleatoriamente em esfera de raio 8
        const u = Math.random();
        const v = Math.random();
        const theta = u * 2 * Math.PI;
        const phi = Math.acos(2 * v - 1);
        const r = 8 * Math.cbrt(Math.random());

        positions[i] = r * Math.sin(phi) * Math.cos(theta);
        positions[i + 1] = r * Math.sin(phi) * Math.sin(theta);
        positions[i + 2] = r * Math.cos(phi);
      }

      pointsGeom.setAttribute('position', new THREE.BufferAttribute(positions, 3));
      const pointsMat = new THREE.PointsMaterial({
        color: 0xffffff,
        size: 0.012,
        transparent: true,
        opacity: 0.55
      });
      stars = new THREE.Points(pointsGeom, pointsMat);
      scene.add(stars);
    }

    // Iluminação
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.45);
    scene.add(ambientLight);

    const pointLightOrange = new THREE.PointLight(0xE8891A, 2.5, 12);
    pointLightOrange.position.set(2.5, 3.5, 4);
    scene.add(pointLightOrange);

    const pointLightContrastBlue = new THREE.PointLight(0x1A2A4A, 1.2, 8);
    pointLightContrastBlue.position.set(-3.5, -2, 2.5);
    scene.add(pointLightContrastBlue);

    // Mouse tilt mapping
    let mouseX = 0;
    let mouseY = 0;

    const handleMouseMoveTilt = (e: MouseEvent) => {
      mouseX = (e.clientX / window.innerWidth) - 0.5;
      mouseY = (e.clientY / window.innerHeight) - 0.5;
    };

    window.addEventListener('mousemove', handleMouseMoveTilt);

    // Loop de Animação Principal
    const clock = new THREE.Clock();
    let animId: number;

    const animate = () => {
      animId = requestAnimationFrame(animate);
      const time = clock.getElapsedTime();

      // Oscilação de câmera respiratória sutil
      camera.position.x = Math.sin(time * 0.3) * 0.15;

      // Ondulação orgânica coletiva nos cuboides
      stripes.forEach((stripe) => {
        stripe.position.y = stripe.userData.startY + Math.sin(time * stripe.userData.speed + stripe.userData.offset) * 0.04;
      });

      // Rotação lenta de estrelas de fundo
      if (stars) {
        stars.rotation.y += 0.0003;
        stars.rotation.x += 0.00015;
      }

      // Mouse interactive tilt (fator lerp 0.05)
      const targetRotationX = mouseY * 0.14; // max ~8 graus de inclinação
      const targetRotationY = mouseX * 0.14;

      stripeGroup.rotation.x += (targetRotationX - stripeGroup.rotation.x) * 0.05;
      stripeGroup.rotation.y += (targetRotationY - stripeGroup.rotation.y) * 0.05;

      renderer.render(scene, camera);
    };

    animate();

    // Redimensionamento
    const handleResize = () => {
      if (!container) return;
      width = container.clientWidth;
      height = container.clientHeight;
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
      renderer.setSize(width, height);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('mousemove', handleMouseMoveTilt);
      window.removeEventListener('resize', handleResize);
      cancelAnimationFrame(animId);
      if (container && renderer.domElement) {
        container.removeChild(renderer.domElement);
      }
    };
  }, []);

  // 4. GSAP & Lenis Smooth Scroll Engine Setup
  useEffect(() => {
    // Declarar globais GSAP e Lenis
    const gsap = (window as any).gsap;
    const ScrollTrigger = (window as any).ScrollTrigger;
    const Lenis = (window as any).Lenis;

    if (!gsap || !ScrollTrigger || !Lenis) return;

    // Registrar plugin ScrollTrigger
    gsap.registerPlugin(ScrollTrigger);

    // Inicializar Lenis Smooth Scroll
    const lenis = new Lenis({
      duration: 1.4,
      easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      direction: 'vertical',
      smooth: true,
      smoothTouch: false,
    });

    function raf(time: number) {
      lenis.raf(time);
      ScrollTrigger.update();
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);

    // ANIMANDO PRÉ-LOADER (2.2 segundos)
    const loaderTl = gsap.timeline({
      onComplete: () => {
        // Habilitar rolagem na página pós-carregamento
        document.body.style.overflowY = 'auto';
      }
    });

    // Desabilitar rolagem inicialmente no loader
    document.body.style.overflowY = 'hidden';

    // Barra de progresso laranja esticando
    loaderTl.to('.loader-progress-bar', {
      width: '100%',
      duration: 1.8,
      ease: 'power2.inOut'
    });

    // Stagger clippath nas listras do logo (efeito de "desenho" da esquerda para a direita)
    loaderTl.fromTo('.loader-logo-strip', {
      clipPath: 'inset(0 100% 0 0)'
    }, {
      clipPath: 'inset(0 0% 0 0)',
      stagger: 0.08,
      duration: 0.6,
      ease: 'power3.out'
    }, 0.2); // inicia junto com o preenchimento

    // Escala final do loader e Wipe Vertikal
    loaderTl.to('.loader-logo-container', {
      scale: 1.03,
      duration: 0.2,
      ease: 'power1.inOut'
    });
    loaderTl.to('.loader-logo-container', {
      scale: 1,
      duration: 0.2,
      ease: 'power1.inOut'
    });

    // Wipe vertical da tela do loader usando clip-path inset
    loaderTl.to('#loader', {
      clipPath: 'inset(0 0 100% 0)',
      duration: 0.6,
      ease: 'power4.inOut'
    }, '+=0.1');

    // Revelação dos Elementos do Hero
    loaderTl.fromTo('.hero-eyebrow', {
      opacity: 0,
      y: 12
    }, {
      opacity: 1,
      y: 0,
      duration: 0.6,
      ease: 'power2.out'
    }, '-=0.1');

    // Split-line effect para a headline do Hero (staggered entries)
    loaderTl.fromTo('.headline-line', {
      y: '120%',
      opacity: 0
    }, {
      y: '0%',
      opacity: 1,
      stagger: 0.12,
      duration: 1.2,
      ease: 'power4.out'
    }, '-=0.5');

    loaderTl.fromTo('.hero-subtext', {
      opacity: 0,
      y: 20
    }, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      ease: 'power2.out'
    }, '-=0.8');

    loaderTl.fromTo('.hero-ctas', {
      opacity: 0,
      y: 20
    }, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      ease: 'power2.out'
    }, '-=0.6');

    // ANIMAÇÕES DE TRANSREVELAÇÃO POR SCROLL
    // Parágrafos e blocos Globais
    gsap.utils.toArray('.reveal-on-scroll').forEach((el: any) => {
      gsap.fromTo(el, {
        opacity: 0,
        y: 24
      }, {
        opacity: 1,
        y: 0,
        duration: 0.8,
        ease: 'power2.out',
        scrollTrigger: {
          trigger: el,
          start: 'top 85%',
          toggleActions: 'play none none none'
        }
      });
    });

    // Cards de Serviços: Staggered Fade Up
    gsap.fromTo('.service-card', {
      opacity: 0,
      y: 60
    }, {
      opacity: 1,
      y: 0,
      stagger: 0.08,
      duration: 0.8,
      ease: 'power2.out',
      scrollTrigger: {
        trigger: '.services-grid',
        start: 'top 80%',
        toggleActions: 'play none none none'
      }
    });

    // Ativar Glow da Borda do card de serviços quando visível no centro da tela
    gsap.utils.toArray('.service-card').forEach((card: any) => {
      gsap.to(card, {
        borderColor: 'rgba(232, 137, 26, 0.25)', // Var glow ativo sutil
        duration: 0.4,
        scrollTrigger: {
          trigger: card,
          start: 'top 65%',
          end: 'bottom 45%',
          toggleActions: 'play reverse play reverse'
        }
      });
    });

    // LINHA DO TEMPO: Desenhar SVG Line conforme rola
    const timelineSvg = timelineSvgRef.current;
    if (timelineSvg) {
      // Obter comprimento do path e atribuir a dasharray/offset
      const len = timelineSvg.getTotalLength();
      timelineSvg.style.strokeDasharray = `${len}`;
      timelineSvg.style.strokeDashoffset = `${len}`;

      gsap.to(timelineSvg, {
        strokeDashoffset: 0,
        ease: 'none',
        scrollTrigger: {
          trigger: '.timeline-container',
          start: 'top 60%',
          end: 'bottom 40%',
          scrub: 1.2,
          onUpdate: (self: any) => {
            // Ativação dos nós da timeline de acordo com o progresso
            const steps = document.querySelectorAll('.timeline-step');
            const progress = self.progress;
            
            steps.forEach((step: any, index: number) => {
              const stepTriggerThreshold = (index) / (steps.length - 1);
              if (progress >= stepTriggerThreshold * 0.95) {
                step.classList.add('active');
              } else {
                step.classList.remove('active');
              }
            });
          }
        }
      });
    }

    // Parallax de Texto no Background da seção METRICS ("CRESCIMENTO")
    gsap.fromTo('.parallax-bg-text', {
      y: '20%'
    }, {
      y: '-20%',
      ease: 'none',
      scrollTrigger: {
        trigger: '.parallax-split-section',
        start: 'top bottom',
        end: 'bottom top',
        scrub: true
      }
    });

    // Efeito Parallax de velocidade alterada no Marquee em scroll
    gsap.to('.marquee-track-1', {
      x: '-=150',
      scrollTrigger: {
        trigger: '.marquee-container',
        start: 'top bottom',
        end: 'bottom top',
        scrub: true
      }
    });

    gsap.to('.marquee-track-2', {
      x: '+=80',
      scrollTrigger: {
        trigger: '.marquee-container',
        start: 'top bottom',
        end: 'bottom top',
        scrub: true
      }
    });

    // CONTADOR DE NÚMEROS (CountUp manual com ScrollTrigger)
    const metricsValues = document.querySelectorAll('.countup-value');
    metricsValues.forEach((item: any) => {
      const targetValStr = item.getAttribute('data-target') || '0';
      const isPercentage = targetValStr.includes('%');
      const isPlus = targetValStr.includes('+');
      const targetNum = parseInt(targetValStr.replace(/[^0-9]/g, ''), 10);

      const obj = { val: 0 };
      gsap.to(obj, {
        val: targetNum,
        scrollTrigger: {
          trigger: '.parallax-split-section',
          start: 'top 75%'
        },
        duration: 2.2,
        ease: 'power2.out',
        onUpdate: () => {
          let output = Math.floor(obj.val).toString();
          if (isPlus) output = `+${output}`;
          if (isPercentage) output = `${output}%`;
          // Tratar métricas específicas
          if (targetValStr.includes('ANOS')) output = `+${Math.floor(obj.val)} ANOS`;
          if (targetValStr.includes('CANAIS')) output = `${Math.floor(obj.val)} CANAIS`;
          if (targetValStr.includes('RESULTADO')) output = `${Math.floor(obj.val)}% RESULTADO`;
          if (targetValStr.includes('VISÃO')) output = `${Math.floor(obj.val)}° VISÃO`;
          
          item.textContent = output;
        }
      });
    });

    return () => {
      // Destruir todas as rotas e instâncias no descarregamento
      ScrollTrigger.getAll().forEach((t: any) => t.kill());
    };
  }, []);

  // 5. Interação Manual com tilt 3D nos Badges das Plataformas
  const handleBadgeMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const badge = e.currentTarget as HTMLDivElement;
    const rect = badge.getBoundingClientRect();
    
    // Calcular as coordenadas X e Y relativas dentro da pill
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // Converter para valores percentuais (-50% a 50%)
    const pctX = (x / rect.width) - 0.5;
    const pctY = (y / rect.top) - 0.5;

    // Atribuir as variáveis CSS para o Specular Glow que segue o ponteiro
    badge.style.setProperty('--shine-x', `${(x / rect.width) * 100}%`);
    badge.style.setProperty('--shine-y', `${(y / rect.height) * 100}%`);

    // Calcular rotações suaves (limite de 12 graus)
    const rotateX = pctY * -12;
    const rotateY = pctX * 12;

    // Aplicar transformações 3D aceleradas
    badge.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(6px) scale(1.03)`;
    badge.style.transition = 'transform 0.05s ease';
  };

  const handleBadgeMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
    const badge = e.currentTarget as HTMLDivElement;
    
    // Reset suave das rotações com transition lerp de volta ao estado plano
    badge.style.transform = 'rotateX(0deg) rotateY(0deg) translateZ(0px) scale(1)';
    badge.style.transition = 'transform 0.38s cubic-bezier(0.25, 1, 0.5, 1)';
  };

  // 6. Testimonials Carousel Draggable Swipe Logic
  const handleCarouselMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
    isDraggingRef.current = true;
    startXRef.current = e.pageX - (testimonialsTrackRef.current?.offsetLeft || 0);
    scrollLeftRef.current = testimonialsTrackRef.current ? getScrollX(testimonialsTrackRef.current) : 0;
    setCarouselCursorText('dragging');

    // Aplicar leve scale down 0.97 aos cards do carrossel ao arrastar (profundidade de interface)
    const cards = testimonialsTrackRef.current?.querySelectorAll('.testi-node-card');
    cards?.forEach((card: any) => {
      card.style.transform = 'scale(0.97)';
      card.style.transition = 'transform 0.3s ease';
    });
  };

  const handleCarouselMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!isDraggingRef.current || !testimonialsTrackRef.current) return;
    e.preventDefault();

    const x = e.pageX - (testimonialsTrackRef.current.offsetLeft || 0);
    const walk = (x - startXRef.current) * 1.5; // multiplicador de fricção de scroll
    testimonialsTrackRef.current.style.transform = `translateX(${scrollLeftRef.current + walk}px)`;
  };

  const handleCarouselMouseUpOrLeave = () => {
    if (!isDraggingRef.current) return;
    isDraggingRef.current = false;
    setCarouselCursorText('drag');

    // Restaurar escala normal dos cards
    const cards = testimonialsTrackRef.current?.querySelectorAll('.testi-node-card');
    cards?.forEach((card: any) => {
      card.style.transform = 'scale(1)';
    });

    // Snap opcional ao card mais próximo
    if (testimonialsTrackRef.current) {
      const currentTranslate = getScrollX(testimonialsTrackRef.current);
      
      // Limites de scroll
      const containerWidth = testimonialsTrackRef.current.parentElement?.clientWidth || window.innerWidth;
      const trackWidth = testimonialsTrackRef.current.scrollWidth;
      const maxTranslate = -(trackWidth - containerWidth + 48);

      let targetTranslate = Math.round(currentTranslate / 384) * 384; // largura de card (360) + gap (24) = 384
      if (targetTranslate > 0) targetTranslate = 0;
      if (targetTranslate < maxTranslate) targetTranslate = maxTranslate;

      testimonialsTrackRef.current.style.transform = `translateX(${targetTranslate}px)`;
      testimonialsTrackRef.current.style.transition = 'transform 0.4s cubic-bezier(0.25, 1, 0.5, 1)';
    }
  };

  // Funções Auxiliares para ler posições matriciais do Translate do CSS
  const getScrollX = (el: HTMLElement) => {
    const style = window.getComputedStyle(el);
    const matrix = new WebKitCSSMatrix(style.transform);
    return matrix.m41;
  };

  const handleFormInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      ...{ [name]: value }
    }));
  };

  const triggerEmailRedirect = (data: FormData) => {
    const subject = `Novo Lead de Diagnóstico - ${data.nome}`;
    const baseText = `Olá Huyus Growth!

Gostaria de solicitar um diagnóstico gratuito para a minha empresa:

• Nome: ${data.nome}
• WhatsApp: ${data.whatsapp}
• Segmento: ${data.segmento}
• Canal desejado: ${data.precisa}

Comentários adicionais:
"${data.mensagem}"`;

    const mailtoUrl = `mailto:contato@huyus.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(baseText)}`;
    window.location.href = mailtoUrl;
  };

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Validação básica
    if (!formData.nome || !formData.whatsapp) {
      alert('Por favor, preencha os campos obrigatórios (Nome e WhatsApp).');
      return;
    }

    setIsSubmitting(true);
    setSubmitStatus('loading');

    // Simulação de submissão fake com loading de 1s para feedback visual interativo
    setTimeout(() => {
      setIsSubmitting(false);
      setSubmitStatus('success');
      
      // Abre o gerenciador de e-mail com os dados preenchidos
      triggerEmailRedirect(formData);

      // Limpa formulário após sucesso
      setTimeout(() => {
        setSubmitStatus('idle');
        setFormData({
          nome: '',
          whatsapp: '',
          segmento: 'Selecione seu segmento',
          precisa: 'O que você precisa?',
          mensagem: ''
        });
      }, 3000);
    }, 1200);
  };

  return (
    <>
      {/* 0. TELA DE PRÉ-LOADER (2.2 segundos) */}
      <div id="loader" id-attr="loader-root">
        <div className="loader-logo-container" id="loader-logo-wrap">
          {logoError ? (
            <div id="loader-fallback-text" className="font-display text-4xl font-black text-orange-500">HUYUS</div>
          ) : (
            <svg viewBox="0 0 500 120" className="huyus-svg-logo loader-logo-strip" onError={() => setLogoError(true)}>
              <text x="250" y="85" fontFamily="'Barlow Condensed', sans-serif" fontWeight="900" fontSize="96" fill="#E8891A" letterSpacing="0.05em" textAnchor="middle">HUYUS</text>
              <g fill="#080808">
                <rect x="0" y="8" width="500" height="3" />
                <rect x="0" y="18" width="500" height="3" />
                <rect x="0" y="28" width="500" height="3" />
                <rect x="0" y="38" width="500" height="3" />
                <rect x="0" y="48" width="500" height="3" />
                <rect x="0" y="58" width="500" height="3" />
                <rect x="0" y="68" width="500" height="3" />
                <rect x="0" y="78" width="500" height="3" />
                <rect x="0" y="88" width="500" height="3" />
                <rect x="0" y="98" width="500" height="3" />
                <rect x="0" y="108" width="500" height="3" />
              </g>
            </svg>
          )}
        </div>
        <div className="loader-progress-track">
          <div className="loader-progress-bar"></div>
        </div>
      </div>

      {/* CURSOR PERSONADO ATIVO APENAS GIGANTE */}
      <div id="cursor-dot" ref={cursorDotRef}></div>
      <div id="cursor-ring" ref={cursorRingRef}>
        {carouselCursorText}
      </div>

      {/* 1. NAVEGAÇÃO SUPERIOR */}
      <header className={scrolled ? 'scrolled' : ''} id="site-header">
        <nav className="nav-container">
          <a href="#" className="logo-wrapper" id="nav-logo-link">
            {logoError ? (
              <span className="font-display text-2xl font-black tracking-widest text-[#E8891A]">HUYUS</span>
            ) : (
              <svg viewBox="0 0 200 60" className="logo-img logo-fallback-nav" onError={() => setLogoError(true)}>
                <text x="100" y="42" fontFamily="'Barlow Condensed', sans-serif" fontWeight="900" fontSize="42" fill="#E8891A" letterSpacing="0.05em" textAnchor="middle">HUYUS</text>
                <g fill="#080808">
                  <rect x="0" y="6" width="200" height="1.5" />
                  <rect x="0" y="12" width="200" height="1.5" />
                  <rect x="0" y="18" width="200" height="1.5" />
                  <rect x="0" y="24" width="200" height="1.5" />
                  <rect x="0" y="30" width="200" height="1.5" />
                  <rect x="0" y="36" width="200" height="1.5" />
                  <rect x="0" y="42" width="200" height="1.5" />
                  <rect x="0" y="48" width="200" height="1.5" />
                </g>
              </svg>
            )}
          </a>

          <div className="nav-links">
            <a href="#">Home</a>
            <a href="#servicos">Serviços</a>
            <a href="#como-funciona">Como Funciona</a>
            <a href="#contato">Contato</a>
          </div>

          <a href="#contato" className="btn-diagnostico">
            Diagnóstico Grátis
          </a>

          <button 
            className={`hamburger ${menuOpen ? 'active' : ''}`}
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Abrir menu móvel"
            id="mobile-nav-toggle"
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </nav>
      </header>

      {/* NAVIGATION MOBILE OVERLAY */}
      <div className={`mobile-menu-overlay ${menuOpen ? 'open' : ''}`} id="mobile-menu-container">
        <div className="mobile-links">
          <a href="#" onClick={() => setMenuOpen(false)}>Home</a>
          <a href="#servicos" onClick={() => setMenuOpen(false)}>Serviços</a>
          <a href="#como-funciona" onClick={() => setMenuOpen(false)}>Como Funciona</a>
          <a href="#contato" onClick={() => setMenuOpen(false)}>Contato</a>
          <a 
            href="#contato" 
            className="mobile-cta"
            onClick={() => setMenuOpen(false)}
          >
            Diagnóstico Grátis
          </a>
        </div>
      </div>

      {/* 2. HERO — CENA PRINCIPAL COM THREEJS */}
      <section className="hero-section" id="hero">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[480px] h-[480px] bg-[#E8891A]/10 blur-[130px] rounded-full pointer-events-none z-0"></div>
        <div className="absolute inset-0 bg-gradient-to-l from-[#E8891A]/5 to-transparent pointer-events-none z-0"></div>
        <div className="hero-grid relative z-10">
          {/* COLUNA ESQUERDA - INFRAESTRUTURA DE TEXTO */}
          <div className="hero-text-col">
            <span className="hero-eyebrow">HUYUS GROWTH · SOLUÇÕES DIGITAIS</span>
            
            <div className="hero-headline font-display">
              <div style={{ overflow: 'hidden' }}>
                <span className="headline-line block">SEU NEGÓCIO</span>
              </div>
              <div style={{ overflow: 'hidden' }}>
                <span className="headline-line block">VENDENDO</span>
              </div>
              <div style={{ overflow: 'hidden' }}>
                <span className="headline-line block orange-word relative inline-block">
                  MAIS.
                  <div className="absolute bottom-1 left-0 w-full h-[6px] bg-[#E8891A] opacity-40 rounded-sm"></div>
                </span>
              </div>
            </div>

            <p className="hero-subtext">
              Tráfego pago, marketplaces, automações e presença digital — tudo integrado para quem quer crescer de verdade, sem atalho e sem enrolação.
            </p>

            <div className="hero-ctas">
              <a href="#contato" className="hero-btn-primary">
                → Quero um diagnóstico grátis
              </a>
              <a href="#servicos" className="hero-btn-secondary">
                Ver serviços
                <svg className="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                  <polyline points="12 5 19 12 12 19"></polyline>
                </svg>
              </a>
            </div>
          </div>

          {/* COLUNA DIREITA - INTERAÇÃO DA MÁQUINA 3D */}
          <div className="canvas-col">
            <div id="three-canvas-container" ref={threeContainerRef}></div>
          </div>
        </div>

        {/* INDICADOR DE ROLAGEM */}
        <div id="scroll-indicator" ref={scrollIndicatorRef}>
          <span>SCROLL</span>
          <div className="scroll-line-container">
            <div className="scroll-line-indicator"></div>
          </div>
        </div>
      </section>

      {/* 3. MARQUEE STRIP (ENTRE HERO E SERVIÇOS) */}
      <div className="marquee-container" id="marquee">
        <div className="marquee-track marquee-track-1">
          <div className="marquee-text">
            <span>TRÁFEGO PAGO</span> <span className="marquee-sep">·</span>
            <span>MARKETPLACES</span> <span className="marquee-sep">·</span>
            <span>AUTOMAÇÃO IA</span> <span className="marquee-sep">·</span>
            <span>ERP BLING</span> <span className="marquee-sep">·</span>
            <span>META ADS</span> <span className="marquee-sep">·</span>
            <span>GOOGLE ADS</span> <span className="marquee-sep">·</span>
            <span>WHATSAPP BOT</span> <span className="marquee-sep">·</span>
            <span>LANDING PAGES</span> <span className="marquee-sep">·</span>
            <span>SHOPEE</span> <span className="marquee-sep">·</span>
            <span>MERCADO LIVRE</span> <span className="marquee-sep">·</span>
            <span>AMAZON</span> <span className="marquee-sep">·</span>
          </div>
          <div className="marquee-text">
            <span>TRÁFEGO PAGO</span> <span className="marquee-sep">·</span>
            <span>MARKETPLACES</span> <span className="marquee-sep">·</span>
            <span>AUTOMAÇÃO IA</span> <span className="marquee-sep">·</span>
            <span>ERP BLING</span> <span className="marquee-sep">·</span>
            <span>META ADS</span> <span className="marquee-sep">·</span>
            <span>GOOGLE ADS</span> <span className="marquee-sep">·</span>
            <span>WHATSAPP BOT</span> <span className="marquee-sep">·</span>
            <span>LANDING PAGES</span> <span className="marquee-sep">·</span>
            <span>SHOPEE</span> <span className="marquee-sep">·</span>
            <span>MERCADO LIVRE</span> <span className="marquee-sep">·</span>
            <span>AMAZON</span> <span className="marquee-sep">·</span>
          </div>
        </div>
        
        <div className="marquee-track marquee-track-2">
          <div className="marquee-text">
            <span>MERCADO LIVRE</span> <span className="marquee-sep">·</span>
            <span>AUTOMAÇÃO IA</span> <span className="marquee-sep">·</span>
            <span>WHATSAPP BOT</span> <span className="marquee-sep">·</span>
            <span>TRÁFEGO PAGO</span> <span className="marquee-sep">·</span>
            <span>METAS & METRICAS</span> <span className="marquee-sep">·</span>
            <span>GOOGLE ADS</span> <span className="marquee-sep">·</span>
            <span>ERP BLING</span> <span className="marquee-sep">·</span>
            <span>SHOPEE</span> <span className="marquee-sep">·</span>
            <span>GROWTH DIGITAL</span> <span className="marquee-sep">·</span>
          </div>
          <div className="marquee-text">
            <span>MERCADO LIVRE</span> <span className="marquee-sep">·</span>
            <span>AUTOMAÇÃO IA</span> <span className="marquee-sep">·</span>
            <span>WHATSAPP BOT</span> <span className="marquee-sep">·</span>
            <span>TRÁFEGO PAGO</span> <span className="marquee-sep">·</span>
            <span>METAS & METRICAS</span> <span className="marquee-sep">·</span>
            <span>GOOGLE ADS</span> <span className="marquee-sep">·</span>
            <span>ERP BLING</span> <span className="marquee-sep">·</span>
            <span>SHOPEE</span> <span className="marquee-sep">·</span>
            <span>GROWTH DIGITAL</span> <span className="marquee-sep">·</span>
          </div>
        </div>
      </div>

      {/* 4. SEÇÃO DO GRID DE SERVIÇOS */}
      <section className="section-wrapper relative overflow-hidden" id="servicos">
        <div className="absolute left-1/4 top-1/2 -translate-y-1/2 w-96 h-96 bg-[#E8891A]/5 blur-[130px] rounded-full pointer-events-none z-0"></div>
        <div className="relative z-10">
          <span className="eyebrow">O QUE FAZEMOS</span>
          <h2 className="section-title">
            SERVIÇOS QUE<br />
            GERAM <span className="highlight">RESULTADO.</span>
          </h2>

        <div className="services-grid">
          {/* Card 1 */}
          <div className="service-card" id="card-service-1">
            <div className="service-card-top-bar"></div>
            <div className="service-icon-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <polygon points="10 8 16 12 10 16 10 8"/>
              </svg>
            </div>
            <h3 className="service-title">Tráfego Pago</h3>
            <span className="service-subtitle">Meta Ads · Google Ads</span>
            <p className="service-desc">
              Campanhas gerenciadas do zero: estratégia, criativo, segmentação e otimização contínua para o melhor custo por resultado.
            </p>
            <div className="service-card-bg-glow"></div>
          </div>

          {/* Card 2 */}
          <div className="service-card" id="card-service-2">
            <div className="service-card-top-bar"></div>
            <div className="service-icon-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="7" height="9"/>
                <rect x="14" y="3" width="7" height="5"/>
                <rect x="14" y="12" width="7" height="9"/>
                <rect x="3" y="16" width="7" height="5"/>
              </svg>
            </div>
            <h3 className="service-title">Gestão de Marketplaces</h3>
            <span className="service-subtitle">ML · Shopee · Amazon</span>
            <p className="service-desc">
              Criação, otimização e operação completa. SEO de produto, precificação dinâmica e anúncios internos gerenciados profissionalmente.
            </p>
            <div className="service-card-bg-glow"></div>
          </div>

          {/* Card 3 */}
          <div className="service-card" id="card-service-3">
            <div className="service-card-top-bar"></div>
            <div className="service-icon-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
              </svg>
            </div>
            <h3 className="service-title">Automações &amp; Agentes IA</h3>
            <span className="service-subtitle">N8N · Evolution API</span>
            <p className="service-desc">
              Fluxos automáticos, assistentes integrados inteligentes de IA no WhatsApp e conexões completas de banco de dados. Seu negócio no piloto automático.
            </p>
            <div className="service-card-bg-glow"></div>
          </div>

          {/* Card 4 */}
          <div className="service-card" id="card-service-4">
            <div className="service-card-top-bar"></div>
            <div className="service-icon-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
                <line x1="12" y1="22.08" x2="12" y2="12"/>
              </svg>
            </div>
            <h3 className="service-title">ERP &amp; Logística</h3>
            <span className="service-subtitle">Bling ERP · NF-e · Estoque</span>
            <p className="service-desc">
              Implantação, configuração avançada e operação técnica de Bling ERP. Integrações fiscais, fluxo de faturamento e depósitos.
            </p>
            <div className="service-card-bg-glow"></div>
          </div>

          {/* Card 5 */}
          <div className="service-card" id="card-service-5">
            <div className="service-card-top-bar"></div>
            <div className="service-icon-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
              </svg>
            </div>
            <h3 className="service-title">Agente IA no WhatsApp</h3>
            <span className="service-subtitle">Atendimento 24/7 Ativo</span>
            <p className="service-desc">
              Qualificação avançada de leads frios, agendamentos, fechamento inteligente de carrinhos e suporte automatizado. Vendedor que nunca dorme.
            </p>
            <div className="service-card-bg-glow"></div>
          </div>

          {/* Card 6 */}
          <div className="service-card" id="card-service-6">
            <div className="service-card-top-bar"></div>
            <div className="service-icon-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
                <line x1="8" y1="21" x2="16" y2="21"/>
                <line x1="12" y1="17" x2="12" y2="21"/>
              </svg>
            </div>
            <h3 className="service-title">Sites &amp; Landing Pages</h3>
            <span className="service-subtitle">Foco em Alta Conversão</span>
            <p className="service-desc">
              Desenvolvimento nativo customizado estruturado para performance máxima. Carregamento ultraveloz, responsividade total e SEO impecável.
            </p>
            <div className="service-card-bg-glow"></div>
          </div>
        </div>
        </div>
      </section>

      {/* 5. COMO FUNCIONA (LINHA DO TEMPO PROGRAMÁTICA) */}
      <section className="timeline-section" id="como-funciona">
        <div className="timeline-headline-container">
          <span className="eyebrow">DIRETRIZ CLARA</span>
          <h2 className="section-title">PROCESSO SEM ENROLAÇÃO.</h2>
        </div>

        <div className="timeline-container">
          {/* Linha horizontal para animação DrawSVG simulada */}
          <svg className="timeline-svg-wrapper">
            <line x1="0" y1="2" x2="100%" y2="2" className="timeline-line-bg" />
            <path d="M 0 2 L 2000 2" className="timeline-line-active" ref={timelineSvgRef} />
          </svg>

          <div className="timeline-grid">
            {/* Step 1 */}
            <div className="timeline-step">
              <div className="timeline-number">01</div>
              <div className="timeline-node">
                <div className="timeline-node-inner"></div>
              </div>
              <h3 className="timeline-step-title">DIAGNÓSTICO</h3>
              <p className="timeline-step-desc">
                Análise direta e minuciosa dos gargalos, canais inativos e arquitetura comercial atual do seu negócio digital.
              </p>
            </div>

            {/* Step 2 */}
            <div className="timeline-step">
              <div className="timeline-number">02</div>
              <div className="timeline-node">
                <div className="timeline-node-inner"></div>
              </div>
              <h3 className="timeline-step-title">ESTRATÉGIA</h3>
              <p className="timeline-step-desc">
                Modelagem do plano tático sob medida: canais de expansão prioritários, verba de tração e canais de automação.
              </p>
            </div>

            {/* Step 3 */}
            <div className="timeline-step">
              <div className="timeline-number">03</div>
              <div className="timeline-node">
                <div className="timeline-node-inner"></div>
              </div>
              <h3 className="timeline-step-title">EXECUÇÃO</h3>
              <p className="timeline-step-desc">
                Criação técnica, codificação de fluxos de IA, configuração dos setups de anúncios e subida das páginas originais.
              </p>
            </div>

            {/* Step 4 */}
            <div className="timeline-step">
              <div className="timeline-number">04</div>
              <div className="timeline-node">
                <div className="timeline-node-inner"></div>
              </div>
              <h3 className="timeline-step-title">ESCALA</h3>
              <p className="timeline-step-desc">
                Análise contínua de margem, campanhas escaladas progressivamente, e automações assumindo o atendimento redundante.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 6. PLATAFORMAS (BADGES COM INTERAÇÃO DE INCLINAÇÃO 3D REAL) */}
      <section className="section-wrapper" id="plataformas">
        <div className="text-center" style={{ textAlign: 'center', marginBottom: '40px' }}>
          <span className="eyebrow" style={{ display: 'inline-block' }}>INTEGRAÇÃO COMPLETA</span>
          <h2 className="section-title" style={{ marginBottom: '8px' }}>OPERAMOS ONDE VOCÊ VENDE.</h2>
          <p className="reveal-on-scroll" style={{ color: 'var(--c-muted-lt)', maxWidth: '580px', margin: '0 auto', fontSize: '15px', fontWeight: 300, lineHeight: 1.6 }}>
            Trabalhamos de forma integrada com as tecnologias líderes do e-commerce mundial, conectando anúncios, estoque, CRM e sistemas fiscais.
          </p>
        </div>

        <div className="platforms-grid">
          {[
            'Mercado Livre', 'Shopee', 'Amazon', 'Magazine Luiza', 
            'B2W / Americanas', 'Casas Bahia', 'Meta Ads', 'Google Ads', 
            'Bling ERP', 'N8N', 'Evolution API', 'WhatsApp Business', 
            'FastAPI', 'Supabase', 'React', 'Claude AI'
          ].map((item, index) => (
            <div 
              key={index} 
              className="platform-badge interactive-element"
              onMouseMove={handleBadgeMouseMove}
              onMouseLeave={handleBadgeMouseLeave}
            >
              {item}
            </div>
          ))}
        </div>
      </section>

      {/* 7. PACOTES PERSONALIZADOS DE PROPOSTA */}
      <section className="packages-section" id="proposta">
        <div className="absolute right-0 top-1/3 -translate-y-1/2 w-96 h-96 bg-[#E8891A]/5 blur-[120px] rounded-full pointer-events-none z-0"></div>
        <div className="absolute left-10 bottom-10 w-80 h-80 bg-[#E8891A]/5 blur-[120px] rounded-full pointer-events-none z-0"></div>
        <div className="section-wrapper relative z-10">
          <div className="packages-grid">
            {/* Coluna Texto */}
            <div className="packages-info-col">
              <span className="eyebrow">A REALIDADE DO SEU NEGÓCIO</span>
              <h2 className="section-title" style={{ marginBottom: '24px' }}>
                NADA DE PACOTE<br />
                <span className="highlight">ENGESSADO.</span>
              </h2>
              <p className="reveal-on-scroll" style={{ color: 'var(--c-muted-lt)', fontStyle: 'italic', fontSize: '16px', lineHeight: 1.7, fontWeight: 300 }}>
                &ldquo;Cada negócio tem uma realidade diferente. Na conversa inicial mapeamos seus objetivos principais, gargalos e maturidade digital atual — e montamos a estratégia exata que faz sentido para o seu momento atual.&rdquo;
              </p>

              <div className="packages-bullets">
                <div className="package-bullet">
                  <span className="package-bullet-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </span>
                  <span className="package-bullet-text">Diagnóstico sem custo na primeira conversa comercial</span>
                </div>
                <div className="package-bullet">
                  <span className="package-bullet-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </span>
                  <span className="package-bullet-text">Estratégia sob medida montada para o seu ERP, Ads e equipe</span>
                </div>
                <div className="package-bullet">
                  <span className="package-bullet-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </span>
                  <span className="package-bullet-text">Sem contrato de carência abusivo ou multa de rescisão</span>
                </div>
              </div>

              <a href="#contato" className="hero-btn-primary btn-package-cta">
                → Quero minha proposta
              </a>
            </div>

            {/* Coluna Stacking de Perfis */}
            <div className="packages-stack-col">
              {/* Tabs Selector at the top of the stack */}
              <div className="package-tabs" style={{ display: 'flex', gap: '8px', marginBottom: '20px', justifyContent: 'flex-start' }}>
                <button 
                  type="button" 
                  className={`btn-tab-select ${activePackageTab === 0 ? 'active' : ''}`}
                  style={{
                    backgroundColor: activePackageTab === 0 ? 'var(--c-orange)' : 'transparent',
                    color: activePackageTab === 0 ? '#000' : '#888',
                    border: '1px solid ' + (activePackageTab === 0 ? 'var(--c-orange)' : '#222'),
                    padding: '8px 16px',
                    fontSize: '11px',
                    fontWeight: 900,
                    textTransform: 'uppercase',
                    letterSpacing: '0.05em',
                    borderRadius: '2px',
                    cursor: 'pointer',
                    transition: 'all 0.2s ease'
                  }}
                  onClick={() => setActivePackageTab(0)}
                >
                  Starter
                </button>
                <button 
                  type="button" 
                  className={`btn-tab-select ${activePackageTab === 1 ? 'active' : ''}`}
                  style={{
                    backgroundColor: activePackageTab === 1 ? 'var(--c-orange)' : 'transparent',
                    color: activePackageTab === 1 ? '#000' : '#888',
                    border: '1px solid ' + (activePackageTab === 1 ? 'var(--c-orange)' : '#222'),
                    padding: '8px 16px',
                    fontSize: '11px',
                    fontWeight: 900,
                    textTransform: 'uppercase',
                    letterSpacing: '0.05em',
                    borderRadius: '2px',
                    cursor: 'pointer',
                    transition: 'all 0.2s ease'
                  }}
                  onClick={() => setActivePackageTab(1)}
                >
                  Scaling
                </button>
                <button 
                  type="button" 
                  className={`btn-tab-select ${activePackageTab === 2 ? 'active' : ''}`}
                  style={{
                    backgroundColor: activePackageTab === 2 ? 'var(--c-orange)' : 'transparent',
                    color: activePackageTab === 2 ? '#000' : '#888',
                    border: '1px solid ' + (activePackageTab === 2 ? 'var(--c-orange)' : '#222'),
                    padding: '8px 16px',
                    fontSize: '11px',
                    fontWeight: 900,
                    textTransform: 'uppercase',
                    letterSpacing: '0.05em',
                    borderRadius: '2px',
                    cursor: 'pointer',
                    transition: 'all 0.2s ease'
                  }}
                  onClick={() => setActivePackageTab(2)}
                >
                  Automação
                </button>
              </div>

              <div className="relative-deck-container" style={{ position: 'relative', height: '340px' }}>
                {/* Card 🚀 */}
                <div 
                  className="stack-card interactive-element"
                  onClick={() => setActivePackageTab(0)}
                  style={activePackageTab === 0 ? {
                    zIndex: 10,
                    opacity: 1,
                    transform: 'translate3d(0, 0, 0) scale(1)',
                    borderColor: 'var(--c-orange)',
                    boxShadow: '0 15px 40px rgba(232, 137, 26, 0.15)'
                  } : activePackageTab === 1 ? {
                    zIndex: 1,
                    opacity: 0.3,
                    transform: 'translate3d(20px, 30px, 0) scale(0.92)'
                  } : { // active === 2
                    zIndex: 5,
                    opacity: 0.6,
                    transform: 'translate3d(10px, 15px, 0) scale(0.96)'
                  }}
                >
                  <div className="stack-card-emoji">🚀</div>
                  <h3 className="stack-card-label">Client Starter</h3>
                  <p className="stack-card-desc">
                    Ideal para validação e criação da estrutura fundacional. Ativação de primeiro canal contínuo de tração e tráfego mapeado de conversão inicial.
                  </p>
                </div>

                {/* Card 📈 */}
                <div 
                  className="stack-card interactive-element"
                  onClick={() => setActivePackageTab(1)}
                  style={activePackageTab === 1 ? {
                    zIndex: 10,
                    opacity: 1,
                    transform: 'translate3d(0, 0, 0) scale(1)',
                    borderColor: 'var(--c-orange)',
                    boxShadow: '0 15px 40px rgba(232, 137, 26, 0.15)'
                  } : activePackageTab === 2 ? {
                    zIndex: 1,
                    opacity: 0.3,
                    transform: 'translate3d(20px, 30px, 0) scale(0.92)'
                  } : { // active === 0
                    zIndex: 5,
                    opacity: 0.6,
                    transform: 'translate3d(10px, 15px, 0) scale(0.96)'
                  }}
                >
                  <div className="stack-card-emoji">📈</div>
                  <h3 className="stack-card-label font-display">Client Scaling</h3>
                  <p className="stack-card-desc">
                    Expansão de canais multi-marketplaces, SEO avançado, minerações sistemáticas de dados de margem e campanhas unificadas em canais paralelos.
                  </p>
                </div>

                {/* Card 🤖 */}
                <div 
                  className="stack-card interactive-element"
                  onClick={() => setActivePackageTab(2)}
                  style={activePackageTab === 2 ? {
                    zIndex: 10,
                    opacity: 1,
                    transform: 'translate3d(0, 0, 0) scale(1)',
                    borderColor: 'var(--c-orange)',
                    boxShadow: '0 15px 40px rgba(232, 137, 26, 0.15)'
                  } : activePackageTab === 0 ? {
                    zIndex: 1,
                    opacity: 0.3,
                    transform: 'translate3d(20px, 30px, 0) scale(0.92)'
                  } : { // active === 1
                    zIndex: 5,
                    opacity: 0.6,
                    transform: 'translate3d(10px, 15px, 0) scale(0.96)'
                  }}
                >
                  <div className="stack-card-emoji">🤖</div>
                  <h3 className="stack-card-label">Atendimento Automático</h3>
                  <p className="stack-card-desc">
                    Soluções integradas com inteligência artificial, conexões internas por n8n com Bling ERP, agentes prontos de atendimento recurrentes 24 horas por dia.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 8. IMPACTO VISUAL PARALLAX SPLIT */}
      <section className="parallax-split-section" id="impacto">
        <div className="parallax-bg-text">CRESCIMENTO</div>
        
        <div className="parallax-metrics-grid">
          <div className="metric-card">
            <div className="metric-value countup-value" data-target="4 ANOS">+4 ANOS</div>
            <div className="metric-label">De Experiência</div>
          </div>
          <div className="metric-card">
            <div className="metric-value countup-value" data-target="7 CANAIS">7 CANAIS</div>
            <div className="metric-label">De Atuação Ativa</div>
          </div>
          <div className="metric-card">
            <div className="metric-value countup-value" data-target="100% RESULTADO">100%</div>
            <div className="metric-label">Transparência</div>
          </div>
          <div className="metric-card">
            <div className="metric-value countup-value" data-target="360° VISÃO">360°</div>
            <div className="metric-label">Visão Digital</div>
          </div>
        </div>
      </section>



      {/* 10. CTA BANNER - FULL WIDTH */}
      <section className="cta-banner-section" id="banner-crescimento">
        <div className="cta-banner-bg-grid"></div>
        <div className="cta-banner-inner">
          <h2 className="cta-banner-headline">PRONTO PARA CRESCER?</h2>
          <p className="cta-banner-subtext">Conversa objetiva de 15 minutos. Sem pitch comercial. Sem compromisso.</p>
          <div className="cta-banner-buttons">
            <a href="https://wa.me/5511921450506" target="_blank" rel="noreferrer" className="btn-banner-wa">
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.453L0 24zm6.59-4.846c1.6.95 3.1 1.448 4.7 1.45 5.56 0 10.082-4.524 10.085-10.093.001-2.7-1.047-5.234-2.95-7.14C16.58 1.447 14.05 1.4 11.4 1.4h-.057C5.78 1.4 1.258 5.926 1.255 11.5c-.001 1.748.455 3.456 1.324 4.962L1.6 22.3l6.047-1.586zM18.15 15c-.246-.123-1.46-.72-1.686-.803-.227-.082-.393-.122-.557.125-.165.247-.64.803-.784.966-.144.163-.29.18-.536.058-.246-.123-1.04-.383-1.98-1.22-.733-.654-1.23-1.463-1.373-1.71-.143-.246-.015-.38.107-.502.11-.11.246-.288.37-.432.122-.144.164-.247.246-.41.082-.166.04-.31-.02-.433-.062-.123-.556-1.34-.763-1.835-.2-.486-.422-.42-.577-.42-.148 0-.32 0-.493 0c-.173 0-.455.065-.693.303-.238.238-.91.89-.91 2.17 0 1.277.928 2.513 1.058 2.686.13.173 1.82 2.783 4.417 3.903.62.267 1.1.427 1.478.547.62.2 1.19.17 1.64.1.5-.078 1.46-.597 1.67-1.173.2-.577.2-1.072.14-1.173-.06-.1-.22-.163-.47-.285z"/>
              </svg>
              <span>Chamar no WhatsApp</span>
            </a>
            <a href="#contato" className="btn-banner-form">
              E-mail de Contato
            </a>
          </div>
        </div>
      </section>

      {/* 11. CONTATO & FORMULÁRIO DE CAPTAÇÃO */}
      <section className="section-wrapper relative overflow-hidden" id="contato">
        <div className="absolute -left-20 top-1/2 -translate-y-1/2 w-80 h-80 bg-[#E8891A]/5 blur-[120px] rounded-full pointer-events-none z-0"></div>
        <div className="absolute -right-20 top-1/3 w-80 h-80 bg-[#E8891A]/5 blur-[120px] rounded-full pointer-events-none z-0"></div>
        <div className="contact-grid relative z-10">
          {/* Coluna Dados */}
          <div className="contact-info-col">
            <span className="eyebrow">AGENDE SUA CONVERSA</span>
            <h2 className="section-title" style={{ marginBottom: '20px' }}>VAMOS CONVERSAR?</h2>
            
            <p className="contact-sub-text">
              Uma breve avaliação técnica gratuita de 15 minutos para analisar como organizar seus marketplaces, tração fiscal no Bling e escalabilidade de anúncios.
            </p>

            <a href="https://wa.me/5511921450506" target="_blank" rel="noreferrer" className="btn-contact-wa">
              <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
                <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.453L0 24zm6.59-4.846c1.6.95 3.1 1.448 4.7 1.45 5.56 0 10.082-4.524 10.085-10.093.001-2.7-1.047-5.234-2.95-7.14C16.58 1.447 14.05 1.4 11.4 1.4h-.057C5.78 1.4 1.258 5.926 1.255 11.5c-.001 1.748.455 3.456 1.324 4.962L1.6 22.3l6.047-1.586zM18.15 15c-.246-.123-1.46-.72-1.686-.803-.227-.082-.393-.122-.557.125-.165.247-.64.803-.784.966-.144.163-.29.18-.536.058-.246-.123-1.04-.383-1.98-1.22-.733-.654-1.23-1.463-1.373-1.71-.143-.246-.015-.38.107-.502.11-.11.246-.288.37-.432.122-.144.164-.247.246-.41.082-.166.04-.31-.02-.433-.062-.123-.556-1.34-.763-1.835-.2-.486-.422-.42-.577-.42-.148 0-.32 0-.493 0c-.173 0-.455.065-.693.303-.238.238-.91.89-.91 2.17 0 1.277.928 2.513 1.058 2.686.13.173 1.82 2.783 4.417 3.903.62.267 1.1.427 1.478.547.62.2 1.19.17 1.64.1.5-.078 1.46-.597 1.67-1.173.2-.577.2-1.072.14-1.173-.06-.1-.22-.163-.47-.285z"/>
              </svg>
              <span>Chamar agora no WhatsApp</span>
            </a>

            <div className="contact-divider">OU</div>

            <div className="contact-loc-row">
              <span className="contact-loc-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                  <circle cx="12" cy="10" r="3"></circle>
                </svg>
              </span>
              <span>Sediada em Bragança Paulista, SP — Atendimento Digital Sob Demanda</span>
            </div>
          </div>

          {/* Coluna Formulário */}
          <div className="form-panel shadow-2xl">
            <form onSubmit={handleFormSubmit}>
              {/* Campo Nome */}
              <div className="form-group-float">
                <input 
                  type="text" 
                  name="nome" 
                  id="form-nome"
                  className="form-input-field"
                  placeholder=" "
                  value={formData.nome}
                  onChange={handleFormInputChange}
                  required
                />
                <label className="form-floating-label" htmlFor="form-nome">Nome Completo *</label>
              </div>

              {/* Campo WhatsApp */}
              <div className="form-group-float">
                <input 
                  type="tel" 
                  name="whatsapp" 
                  id="form-whatsapp"
                  className="form-input-field"
                  placeholder=" "
                  value={formData.whatsapp}
                  onChange={handleFormInputChange}
                  required
                />
                <label className="form-floating-label" htmlFor="form-whatsapp">WhatsApp (com DDD) *</label>
              </div>

              {/* Custom SELECT Segmento */}
              <div className="custom-select-box" id="form-select-seg">
                <span className="custom-select-label">Seu Segmento</span>
                <div 
                  className="custom-select-trigger"
                  onClick={() => setSelectSegmentoOpen(!selectSegmentoOpen)}
                >
                  <span>{formData.segmento}</span>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </div>
                {selectSegmentoOpen && (
                  <div className="custom-select-dropdown">
                    {[
                      'Fabricante / Indústria',
                      'Distribuidor Atacadista',
                      'E-commerce / Lojista',
                      'Infoprodutos / Serviços',
                      'Outro segmento comercial'
                    ].map((opt) => (
                      <div 
                        key={opt}
                        className="custom-select-option"
                        onClick={() => {
                          setFormData((prev) => ({ ...prev, segmento: opt }));
                          setSelectSegmentoOpen(false);
                        }}
                      >
                        {opt}
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Custom SELECT Necessidade */}
              <div className="custom-select-box" id="form-select-nec">
                <span className="custom-select-label">Do que você precisa?</span>
                <div 
                  className="custom-select-trigger"
                  onClick={() => setSelectPrecisaOpen(!selectPrecisaOpen)}
                >
                  <span>{formData.precisa}</span>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </div>
                {selectPrecisaOpen && (
                  <div className="custom-select-dropdown">
                    {[
                      'Tráfego Pago (Ads)',
                      'Integração e Organização de ERP',
                      'Automação Inteligente de WhatsApp / IA',
                      'Gestão Avançada de Marketplaces',
                      'Preciso de uma Solução 360°'
                    ].map((opt) => (
                      <div 
                        key={opt}
                        className="custom-select-option"
                        onClick={() => {
                          setFormData((prev) => ({ ...prev, precisa: opt }));
                          setSelectPrecisaOpen(false);
                        }}
                      >
                        {opt}
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Mensagem Livre */}
              <div className="form-group-float">
                <textarea 
                  name="mensagem" 
                  id="form-mensagem"
                  className="form-input-field" 
                  rows={3}
                  placeholder=" "
                  value={formData.mensagem}
                  onChange={handleFormInputChange}
                  style={{ resize: 'none', overflowY: 'hidden' }}
                ></textarea>
                <label className="form-floating-label" htmlFor="form-mensagem">Informações Adicionais (Mensagem)</label>
              </div>

              <button 
                type="submit" 
                className="btn-form-submit" 
                disabled={isSubmitting}
                id="submit-contact-btn"
              >
                {submitStatus === 'loading' && <div className="submit-spinner"></div>}
                {submitStatus === 'success' && <span>✓ Mensagem enviada!</span>}
                {submitStatus === 'idle' && <span>Enviar mensagem →</span>}
              </button>
            </form>
          </div>
        </div>
      </section>

      {/* 12. RODAPÉ INSTITUCIONAL */}
      <footer>
        <div className="footer-inner">
          <div className="footer-col footer-logo-panel">
            {logoError ? (
              <span className="font-display text-2xl font-black tracking-widest text-[#E8891A] mb-4">HUYUS</span>
            ) : (
              <svg viewBox="0 0 200 60" className="footer-logo-img logo-img" onError={() => setLogoError(true)}>
                <text x="100" y="42" fontFamily="'Barlow Condensed', sans-serif" fontWeight="900" fontSize="42" fill="#E8891A" letterSpacing="0.05em" textAnchor="middle">HUYUS</text>
                <g fill="#080808">
                  <rect x="0" y="6" width="200" height="1.5" />
                  <rect x="0" y="12" width="200" height="1.5" />
                  <rect x="0" y="18" width="200" height="1.5" />
                  <rect x="0" y="24" width="200" height="1.5" />
                  <rect x="0" y="30" width="200" height="1.5" />
                  <rect x="0" y="36" width="200" height="1.5" />
                  <rect x="0" y="42" width="200" height="1.5" />
                  <rect x="0" y="48" width="200" height="1.5" />
                </g>
              </svg>
            )}
            <p className="footer-tagline">
              Huyus Growth Soluções Digitais — E-commerce estruturado e marketing focado em margem real.
            </p>
            <span className="footer-copyright">&copy; 2026 Huyus Growth. Todos os direitos reservados.</span>
          </div>

          <div className="footer-col">
            <h4 className="footer-title">NAVEGAÇÃO</h4>
            <div className="footer-links">
              <a href="#">Home</a>
              <a href="#servicos">Serviços</a>
              <a href="#como-funciona">Como Funciona</a>
              <a href="#contato">Proposta Personalizada</a>
            </div>
          </div>

          <div className="footer-col">
            <h4 className="footer-title font-display">EMPRESA</h4>
            <p className="cnpj-info mb-4">
              Huyus Growth Soluções Digitais LTDA<br />
              Sede Administrativa: Bragança Paulista, SP
            </p>
            <p className="cnpj-info" style={{ color: 'var(--c-muted-lt)' }}>
              Parcerias locais qualificadas na região de Campinas, Jundiaí e Vale do Paraíba.
            </p>
          </div>
        </div>
      </footer>

      {/* 13. BOTÃO WHATSAPP FLUTUANTE DE SUPORTE */}
      <a 
        href="https://wa.me/5511921450506" 
        target="_blank" 
        rel="noreferrer" 
        id="floating-wa-widget"
        ref={floatingWidgetRef}
        aria-label="Falar pelo WhatsApp"
      >
        <svg width="28" height="28" fill="#FFFFFF" viewBox="0 0 24 24">
          <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.453L0 24zm6.59-4.846c1.6.95 3.1 1.448 4.7 1.45 5.56 0 10.082-4.524 10.085-10.093.001-2.7-1.047-5.234-2.95-7.14C16.58 1.447 14.05 1.4 11.4 1.4h-.057C5.78 1.4 1.258 5.926 1.255 11.5c-.001 1.748.455 3.456 1.324 4.962L1.6 22.3l6.047-1.586zM18.15 15c-.246-.123-1.46-.72-1.686-.803-.227-.082-.393-.122-.557.125-.165.247-.64.803-.784.966-.144.163-.29.18-.536.058-.246-.123-1.04-.383-1.98-1.22-.733-.654-1.23-1.463-1.373-1.71-.143-.246-.015-.38.107-.502.11-.11.246-.288.37-.432.122-.144.164-.247.246-.41.082-.166.04-.31-.02-.433-.062-.123-.556-1.34-.763-1.835-.2-.486-.422-.42-.577-.42-.148 0-.32 0-.493 0c-.173 0-.455.065-.693.303-.238.238-.91.89-.91 2.17 0 1.277.928 2.513 1.058 2.686.13.173 1.82 2.783 4.417 3.903.62.267 1.1.427 1.478.547.62.2 1.19.17 1.64.1.5-.078 1.46-.597 1.67-1.173.2-.577.2-1.072.14-1.173-.06-.1-.22-.163-.47-.285z"/>
        </svg>
        <span className="wa-widget-tooltip">Falar no WhatsApp</span>
      </a>
    </>
  );
}