function Hero() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 64, position: 'relative', overflow: 'hidden' }}>
      {/* Soft purple glow background */}
      <div aria-hidden="true" style={{
        position: 'absolute',
        top: -300, right: -200,
        width: 800, height: 800,
        background: 'radial-gradient(circle, rgba(124, 58, 237, 0.10) 0%, transparent 60%)',
        pointerEvents: 'none',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute',
        top: 100, left: -300,
        width: 700, height: 700,
        background: 'radial-gradient(circle, rgba(34, 197, 94, 0.06) 0%, transparent 60%)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        {/* Headline area */}
        <div style={{ maxWidth: 880, margin: '0 auto 56px', textAlign: 'center' }}>
          <div className="eyebrow fade-up" style={{ animationDelay: '0.05s' }}>
            <span className="dot" />
            Controle financeiro consciente
          </div>

          <h1 className="fade-up" style={{
            fontSize: 'clamp(40px, 6.5vw, 76px)',
            fontWeight: 600,
            letterSpacing: '-0.035em',
            marginTop: 24,
            marginBottom: 24,
            lineHeight: 1.02,
            animationDelay: '0.1s',
          }}>
            Não espere o fim do mês para <em style={{
              fontStyle: 'normal',
              background: 'linear-gradient(180deg, var(--purple) 0%, var(--purple-deep) 100%)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>entender</em> seu dinheiro.
          </h1>

          <p className="lead fade-up" style={{
            fontSize: 20,
            maxWidth: 640,
            margin: '0 auto',
            color: 'var(--ink-3)',
            animationDelay: '0.15s',
          }}>
            Registre seus gastos na hora, acompanhe o mês em tempo real e entenda
            seus hábitos antes que o dinheiro acabe.
          </p>

          <div className="fade-up" style={{
            display: 'flex',
            gap: 12,
            justifyContent: 'center',
            marginTop: 36,
            flexWrap: 'wrap',
            animationDelay: '0.2s',
          }}>
            <a href="https://app.econome.com.br/register" className="btn btn-primary btn-lg">
              Criar minha conta
              <Icon.ArrowRight size={16} />
            </a>
            <a href="#como-funciona" className="btn btn-outline btn-lg">
              Conhecer o Econome
            </a>
          </div>

          <p className="mono fade-up" style={{
            fontSize: 12,
            color: 'var(--ink-4)',
            marginTop: 20,
            letterSpacing: '0.02em',
            animationDelay: '0.25s',
          }}>
            APP WEB RESPONSIVO · CELULAR · TABLET · COMPUTADOR
          </p>
        </div>

        {/* Mockup composition */}
        <HeroMockup />
      </div>
    </section>
  );
}

function HeroMockup() {
  return (
    <div className="fade-up" style={{
      position: 'relative',
      maxWidth: 1180,
      margin: '0 auto',
      animationDelay: '0.35s',
    }}>
      {/* Desktop dashboard back layer */}
      <div className="hero-desktop-mock" style={{
        position: 'relative',
        borderRadius: 20,
        overflow: 'hidden',
        boxShadow: '0 40px 80px -24px rgba(76, 29, 149, 0.25), 0 16px 32px -8px rgba(26, 22, 20, 0.08)',
        border: '1px solid var(--line)',
      }}>
        <BrowserChrome />
        <DesktopDashboard />
      </div>

      {/* Mobile fallback — switch entre dispositivos */}
      <div className="hero-mobile-showcase" style={{ display: 'none' }}>
        {/* Porquinho mascote em mobile (isolado) */}
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          marginBottom: 20,
          animation: 'fadeUp 0.6s ease-out both, floatY 6s ease-in-out 1s infinite',
        }}>
          <img
            src="assets/porquinho-iso.png"
            alt="Mascote Econome"
            style={{
              width: 180,
              height: 'auto',
              display: 'block',
              filter: 'drop-shadow(0 18px 24px rgba(112, 16, 176, 0.35)) drop-shadow(0 6px 12px rgba(26, 22, 20, 0.12))',
            }}
          />
        </div>
        <DeviceSwitcher />
      </div>

      {/* Floating mobile mockup */}
      <div className="hero-phone" style={{
        position: 'absolute',
        right: '4%',
        bottom: '-8%',
        width: 280,
        zIndex: 5,
      }}>
        <PhoneFrame>
          <PhoneAppContent />
        </PhoneFrame>
      </div>

      {/* Porquinho mascote flutuante (isolado, com sombra de chão) */}
      <div className="hero-pig" style={{
        position: 'absolute',
        left: '-2%',
        bottom: '-12%',
        width: 240,
        zIndex: 6,
        animation: 'fadeUp 0.7s ease-out 0.5s both',
      }}>
        <div style={{
          position: 'relative',
          animation: 'floatY 6s ease-in-out 1.2s infinite',
        }}>
          <img
            src="assets/porquinho-iso.png"
            alt="Mascote Econome"
            style={{
              width: '100%',
              height: 'auto',
              display: 'block',
              position: 'relative',
              zIndex: 2,
            }}
          />
          {/* Sombra de chão — fica fora do floatY pra ficar fixa */}
        </div>
        <div aria-hidden="true" style={{
          position: 'absolute',
          left: '12%',
          right: '12%',
          bottom: '-2%',
          height: 28,
          background: 'radial-gradient(ellipse at center, rgba(60, 10, 90, 0.4) 0%, rgba(60, 10, 90, 0.18) 40%, transparent 75%)',
          filter: 'blur(6px)',
          zIndex: 1,
          animation: 'shadowPulse 6s ease-in-out 1.2s infinite',
          transformOrigin: 'center',
        }} />
      </div>

      {/* Floating notification */}
      <div className="hero-notif" style={{
        position: 'absolute',
        left: '-2%',
        top: '20%',
        background: 'white',
        borderRadius: 14,
        padding: '12px 16px',
        boxShadow: '0 12px 32px -8px rgba(26, 22, 20, 0.18)',
        border: '1px solid var(--line)',
        display: 'flex',
        alignItems: 'center',
        gap: 12,
        animation: 'fadeUp 0.6s ease-out 0.6s both',
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: 'var(--green-tint)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.Check size={18} color="var(--green)" />
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--ink-3)' }}>Gasto registrado</div>
          <div className="mono" style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>R$ 47,80 · Mercado</div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1080px) {
          .hero-pig { width: 200px !important; left: -3% !important; bottom: -6% !important; }
        }
        @media (max-width: 880px) {
          .hero-phone { display: none; }
          .hero-notif { display: none; }
          .hero-pig { display: none !important; }
        }
        @media (max-width: 760px) {
          /* Mobile: substitui mockup desktop pelo switcher */
          .hero-desktop-mock { display: none !important; }
          .hero-mobile-showcase { display: block !important; }
        }
      `}</style>
    </div>
  );
}

function DeviceSwitcher() {
  const [device, setDevice] = React.useState('mobile');

  return (
    <div>
      {/* Caption */}
      <div style={{ textAlign: 'center', marginBottom: 16 }}>
        <p style={{ fontSize: 14, color: 'var(--ink-3)', marginBottom: 12 }}>
          Use no celular ou no computador — escolha para visualizar:
        </p>

        {/* Switch */}
        <div style={{
          display: 'inline-flex',
          background: 'var(--bg-elevated)',
          border: '1px solid var(--line)',
          borderRadius: 999,
          padding: 4,
          boxShadow: 'var(--shadow-sm)',
        }}>
          {[
            { id: 'mobile', label: 'Celular', icon: 'Phone' },
            { id: 'desktop', label: 'Computador', icon: 'Monitor' },
          ].map(d => (
            <button
              key={d.id}
              onClick={() => setDevice(d.id)}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 8,
                padding: '10px 18px',
                borderRadius: 999,
                fontSize: 14,
                fontWeight: 600,
                color: device === d.id ? 'white' : 'var(--ink-2)',
                background: device === d.id ? 'var(--ink)' : 'transparent',
                transition: 'all 0.2s',
                cursor: 'pointer',
              }}
            >
              <DeviceIcon kind={d.id} size={16} color={device === d.id ? 'white' : 'currentColor'} />
              {d.label}
            </button>
          ))}
        </div>
      </div>

      {/* Stage */}
      <div style={{
        position: 'relative',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        minHeight: 600,
        padding: '12px 0',
      }}>
        {device === 'mobile' && (
          <div style={{ width: 290, animation: 'fadeUp 0.4s ease-out' }}>
            <PhoneFrame>
              <PhoneAppContent />
            </PhoneFrame>
          </div>
        )}
        {device === 'desktop' && (
          <div style={{ width: '100%', animation: 'fadeUp 0.4s ease-out' }}>
            {/* Browser frame com mock em escala reduzida */}
            <div style={{
              borderRadius: 14,
              overflow: 'hidden',
              border: '1px solid var(--line)',
              boxShadow: '0 16px 32px -8px rgba(76, 29, 149, 0.18), 0 6px 12px -4px rgba(26, 22, 20, 0.08)',
              background: 'white',
            }}>
              <BrowserChrome />
              {/* Container que escala o dashboard interno para caber */}
              <div style={{
                position: 'relative',
                width: '100%',
                paddingBottom: '60%',
                background: 'var(--bg)',
                overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: 1100,
                  transformOrigin: 'top left',
                  transform: 'scale(var(--mock-scale))',
                }} className="desktop-mock-scaled">
                  <DesktopDashboard />
                </div>
              </div>
            </div>
            <p className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', textAlign: 'center', marginTop: 12, letterSpacing: '0.04em' }}>
              VISUALIZAÇÃO COMPACTA · APP ABRE EM TELA CHEIA NO COMPUTADOR
            </p>
          </div>
        )}
      </div>

      <style>{`
        .desktop-mock-scaled {
          --mock-scale: 0.32;
        }
        @media (min-width: 480px) {
          .desktop-mock-scaled { --mock-scale: 0.4; }
        }
        @media (min-width: 600px) {
          .desktop-mock-scaled { --mock-scale: 0.5; }
        }
      `}</style>
    </div>
  );
}

// Pequenos ícones dedicados ao switch
function DeviceIcon({ kind, size = 16, color = 'currentColor' }) {
  if (kind === 'mobile') {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <rect x="6" y="2" width="12" height="20" rx="3"/>
        <path d="M11 18h2"/>
      </svg>
    );
  }
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="20" height="13" rx="2"/>
      <path d="M8 21h8M12 17v4"/>
    </svg>
  );
}

function BrowserChrome() {
  return (
    <div style={{
      background: 'var(--bg-soft)',
      padding: '12px 16px',
      borderBottom: '1px solid var(--line)',
      display: 'flex',
      alignItems: 'center',
      gap: 12,
    }}>
      <div style={{ display: 'flex', gap: 6 }}>
        {['#FF5F57', '#FEBC2E', '#28C840'].map(c => (
          <div key={c} style={{ width: 11, height: 11, borderRadius: '50%', background: c, opacity: 0.85 }} />
        ))}
      </div>
      <div style={{
        flex: 1,
        background: 'white',
        borderRadius: 6,
        padding: '5px 12px',
        fontSize: 12,
        color: 'var(--ink-3)',
        fontFamily: "'Geist Mono', monospace",
        textAlign: 'center',
        maxWidth: 360,
        margin: '0 auto',
      }}>
        app.econome.com.br
      </div>
      <div style={{ width: 60 }} />
    </div>
  );
}

window.Hero = Hero;