/* global React, Icon, DashboardMockup */
const { useState: useS, useEffect: useE, useRef: useR } = React;

// ============================================
// HERO (home only — Nav now lives in layout.jsx)
// ============================================
function Hero({ variant = 'centered' }) {
  const heroRef = useR(null);
  const dashRef = useR(null);

  useE(() => {
    // Parallax tilt on scroll
    const onScroll = () => {
      if (!dashRef.current) return;
      const rect = dashRef.current.getBoundingClientRect();
      const progress = Math.max(0, Math.min(1, (window.innerHeight - rect.top) / window.innerHeight));
      const tilt = Math.max(0, 18 - progress * 22); // 18 → down to -4
      const y = Math.max(0, (1 - progress) * 40);
      dashRef.current.style.transform = `rotateX(${tilt}deg) rotateY(-2deg) translateY(${y}px) scale(0.96)`;
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero-wrap" ref={heroRef}>
      <div className="hero-grid-bg" />
      <div className="hero-glow" />
      <div className="noise" />

      <div className="container" style={{ position: 'relative', zIndex: 2, paddingTop: variant === 'split' ? 40 : 80, paddingBottom: 0 }}>
        {variant === 'split' ? <HeroSplit /> : <HeroCentered />}

        {/* Dashboard mockup in perspective */}
        <div className="dash-stage">
          <div ref={dashRef} className="dash-card" style={{ maxWidth: 1100, margin: '0 auto' }}>
            <DashboardMockup />
          </div>

          {/* Floating cards */}
          <div className="float-card" style={{ top: '10%', left: '2%', width: 220, animationDelay: '0s' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: '#25D36622', border: '1px solid #25D36655', display: 'grid', placeItems: 'center', color: '#25D366' }}>
                <Icon name="whatsapp" size={16} />
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)' }}>Nova mensagem</div>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'white' }}>Maria Santos</div>
              </div>
            </div>
            <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.7)', marginTop: 8, lineHeight: 1.45 }}>
              "Olá! Gostaria de um orçamento..."
            </div>
          </div>

          <div className="float-card" style={{ bottom: '18%', right: '2%', width: 240, animationDelay: '1.5s' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>SLA médio</div>
              <div style={{ fontSize: 10, color: '#10b981', fontWeight: 500 }}>↓ 24%</div>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: 'white', marginTop: 6 }}>1m 42s</div>
            <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 2, marginTop: 8, overflow: 'hidden' }}>
              <div style={{ width: '72%', height: '100%', background: 'linear-gradient(90deg, #3b5bdb, #5b7cf2)', borderRadius: 2 }}/>
            </div>
          </div>

          <div className="float-card" style={{ top: '40%', right: '-1%', width: 180, animationDelay: '3s', padding: '12px 14px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#10b981', boxShadow: '0 0 0 3px rgba(16,185,129,0.2)' }} />
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.8)' }}>Bot resolveu</div>
            </div>
            <div style={{ fontSize: 13, fontWeight: 500, color: 'white', marginTop: 4 }}>+142 conversas</div>
            <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>últimas 24h</div>
          </div>
        </div>
      </div>

      {/* Logos marquee */}
      <div style={{ marginTop: 100, paddingBottom: 60 }}>
        <div className="container text-center" style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, marginBottom: 28, letterSpacing: '0.04em' }}>
          Operações que confiam no TSA Connect Pro
        </div>
        <LogoMarquee />
      </div>
    </section>
  );
}

function HeroCentered() {
  return (
    <div className="text-center" style={{ maxWidth: 880, margin: '60px auto 0' }}>
      <div className="pill pill-dark reveal in" style={{ marginBottom: 24 }}>
        <Icon name="sparkles" size={14} color="#93adff"/>
        <span>Novo: BOT com IA generativa nativa</span>
        <span style={{ color: 'rgba(255,255,255,0.4)' }}>→</span>
      </div>
      <h1 className="display-1 reveal in" style={{ margin: 0 }}>
        A central de operação<br/>
        para empresas que <span style={{
          background: 'linear-gradient(120deg, #93adff, #5b7cf2 40%, #c7d4ff)',
          WebkitBackgroundClip: 'text',
          backgroundClip: 'text',
          color: 'transparent',
        }}>atendem em escala.</span>
      </h1>
      <p className="lead reveal in" style={{ margin: '24px auto 0', maxWidth: 640, color: 'rgba(255,255,255,0.7)' }}>
        WhatsApp, CRM, contratos, financeiro, automação e gestão de equipes em uma única plataforma
        modular, multi-tenant e preparada para operação white-label.
      </p>
      <div className="reveal in" style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
        <a href="#demo" className="btn btn-primary btn-lg">
          Solicitar demonstração
          <Icon name="arrow" size={16}/>
        </a>
        <a href="#modulos" className="btn btn-dark btn-lg">
          <Icon name="play" size={14}/> Ver plataforma
        </a>
      </div>
      <div className="reveal in" style={{ display: 'flex', gap: 32, justifyContent: 'center', marginTop: 32, fontSize: 13, color: 'rgba(255,255,255,0.55)', flexWrap: 'wrap' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="check" size={14} color="#5b7cf2"/> Onboarding em 7 dias</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="check" size={14} color="#5b7cf2"/> WhatsApp Cloud API oficial</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="check" size={14} color="#5b7cf2"/> LGPD + ISO 27001</span>
      </div>
    </div>
  );
}

function HeroSplit() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center', marginTop: 40 }}>
      <div>
        <div className="pill pill-dark" style={{ marginBottom: 20 }}>
          <Icon name="sparkles" size={14} color="#93adff"/>
          <span>Meta Tech Partner em aprovação</span>
        </div>
        <h1 className="display-1" style={{ margin: 0 }}>
          Uma plataforma. <br/>
          <span style={{ color: '#93adff' }}>Toda a operação.</span>
        </h1>
        <p className="lead" style={{ marginTop: 24, color: 'rgba(255,255,255,0.7)', maxWidth: 520 }}>
          Centralize atendimento, CRM, contratos, financeiro e automação em um único ambiente modular
          preparado para equipes que crescem todos os dias.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
          <a href="#demo" className="btn btn-primary btn-lg">Solicitar demonstração <Icon name="arrow" size={16}/></a>
          <a href="#modulos" className="btn btn-dark btn-lg"><Icon name="play" size={14}/> Ver plataforma</a>
        </div>
      </div>
      <WhatsAppDemo />
    </div>
  );
}

function WhatsAppDemo() {
  const [step, setStep] = useS(0);
  useE(() => {
    const t = setInterval(() => setStep((s) => (s + 1) % 4), 2200);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{ display: 'grid', placeItems: 'center' }}>
      <div className="wa-phone" style={{ transform: 'rotate(-3deg)' }}>
        <div style={{ fontSize: 11, color: '#667781', marginBottom: 12, textAlign: 'center' }}>Hoje</div>
        <div className="wa-bubble wa-in">Olá! Quero saber os planos <span className="wa-time">14:22</span></div>
        {step >= 1 && <div className="wa-bubble wa-out">Claro! Qual tipo de operação? <span className="wa-time">14:22</span></div>}
        {step >= 2 && <div className="wa-bubble wa-in">Suporte técnico, ~50 atendentes <span className="wa-time">14:23</span></div>}
        {step >= 3 && <div className="wa-bubble wa-out" style={{ background: '#d9fdd3' }}>Te passo para o comercial agora 👉 <span className="wa-time">14:23</span></div>}
        {step < 3 && <div className="wa-bubble wa-in" style={{ padding: '8px 14px' }}><div className="wa-typing"><span/><span/><span/></div></div>}
      </div>
    </div>
  );
}

function LogoMarquee() {
  const logos = ['ACME', 'NEXUS', 'ORION', 'VERTEX', 'CUMULUS', 'STRATA', 'HELIOS', 'KAIROS', 'ATLAS', 'NOVA', 'ARIA', 'FULCRUM'];
  const row = [...logos, ...logos];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row.map((l, i) => (
          <div key={i} style={{ color: 'rgba(255,255,255,0.35)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, letterSpacing: '0.12em' }}>{l}</div>
        ))}
      </div>
    </div>
  );
}

window.Hero = Hero;