// Hero da home-v3 — desenvolve a campanha "Fique de olho / não tira o olho".
// Carregado apenas por home-v3.html; sobrescreve window.Hero.
// Autossuficiente (define seu próprio HeroMockup, como o hero-teste), reusa
// helpers globais: StartCTA, OSIcon, Icon.

// Plataformas onde o app está disponível.
const OS_PLATFORMS_V3 = [
  { key: 'windows', label: 'Windows', enabled: true },
  { key: 'ios', label: 'iOS', enabled: true },
  { key: 'android', label: 'Android', enabled: true },
  { key: 'web', label: 'Web', enabled: true },
];

function Hero() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 94, position: 'relative', overflow: 'hidden', background: 'var(--bg-warm)' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div className="hero-grid">
          {/* Título (esquerda-topo / mobile 1º) */}
          <div className="hero-title">
            <h1 className="fade-up" style={{
              fontSize: 'clamp(30px, 3.7vw, 49px)',
              fontWeight: 600,
              letterSpacing: '-0.035em',
              marginTop: 0,
              marginBottom: 0,
              lineHeight: 1.08,
              animationDelay: '0.1s',
            }}>
              Certas coisas não dá pra tirar o olho.<br />
              <em style={{
                fontStyle: 'normal',
                background: 'linear-gradient(180deg, var(--purple) 0%, var(--purple-deep) 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
              }}>Seu dinheiro</em> é uma delas.
            </h1>
          </div>

          {/* Mockup / animação (direita / mobile 2º) */}
          <div className="hero-art fade-up" style={{ animationDelay: '0.3s' }}>
            <HeroMockupV3 />
          </div>

          {/* Descrição + CTAs (esquerda-base / mobile 3º) */}
          <div className="hero-desc">
            <p className="lead fade-up" style={{ fontSize: 19, color: 'var(--ink-3)', animationDelay: '0.15s' }}>
              Cuidar do seu dinheiro pode caber na sua rotina. Com o Econome,
              fica fácil registrar, entender o mês e abrir espaço para os seus planos.
            </p>

            <div className="hero-ctas fade-up" style={{ marginTop: 22, animationDelay: '0.2s' }}>
              <StartCTA
                className="btn btn-primary btn-lg"
                arrow={false}
                webLabel="Começar meu teste grátis"
                playLabel="Baixar para Android"
                winLabel="Baixar para Windows"
              />
              <a href="#como-funciona" className="btn btn-outline btn-lg">
                Veja como funciona
              </a>
            </div>

            <div className="hero-os fade-up" style={{ marginTop: 28, animationDelay: '0.25s' }}>
              {OS_PLATFORMS_V3.filter(p => p.enabled).map(p => (
                <span key={p.key} className="hero-os-item"><OSIcon kind={p.key} size={19} /> {p.label}</span>
              ))}
            </div>
          </div>
        </div>

        <style>{`
          .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas: "title art" "desc art";
            column-gap: 40px;
            row-gap: 18px;
            align-items: center;
          }
          .hero-title { grid-area: title; align-self: end; text-align: left; }
          .hero-desc { grid-area: desc; align-self: start; text-align: left; }
          .hero-art { grid-area: art; display: flex; justify-content: center; align-items: center; }
          .hero-desc .lead { margin: 0; max-width: 520px; }
          .hero-trust {
            display: inline-flex; align-items: center; gap: 9px;
            margin: 16px 0 0; padding: 0;
            font-size: 15px; color: var(--ink-2); font-weight: 500;
          }
          .hero-trust strong { color: var(--ink); font-weight: 700; }
          .hero-trust-ic {
            display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px; border-radius: 999px;
            background: var(--green); flex: 0 0 auto;
            box-shadow: 0 4px 10px -3px rgba(80, 208, 128, 0.7);
          }
          .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
          .hero-os { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; justify-content: flex-start; font-size: 15.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.01em; }
          .hero-os-item { display: inline-flex; align-items: center; gap: 8px; }
          .hero-os-item svg { flex-shrink: 0; opacity: 0.85; }

          @media (max-width: 1080px) and (min-width: 961px) {
            .hero-grid { column-gap: 28px; }
          }

          @media (max-width: 960px) {
            .hero-grid {
              grid-template-columns: 1fr;
              grid-template-areas: "title" "art" "desc";
              row-gap: 16px;
            }
            .hero-title, .hero-desc { text-align: center; }
            .hero-title { align-self: auto; }
            .hero-desc { align-self: auto; }
            .hero-desc .lead { margin: 0 auto; }
            .hero-trust { justify-content: center; }
            .hero-ctas { justify-content: center; }
            .hero-os { justify-content: center; flex-wrap: nowrap; gap: 7px 13px; font-size: 13.5px; }
            .hero-os-item { gap: 6px; }
            .hero-os-item svg { width: 17px; height: 17px; }
          }
          @media (max-width: 400px) {
            .hero-os { gap: 6px 10px; font-size: 12.5px; }
            .hero-os-item svg { width: 15px; height: 15px; }
          }
        `}</style>
      </div>
    </section>
  );
}

// Composição estática (telefone + 3 cards flutuantes) que substitui o vídeo.
// Posições em % foram medidas por template matching contra as referências
// Desktop.png/Mobile.png de G:\Meu Drive\__econome\_landing-V3 (cada asset
// entra no tamanho nativo — a % é só a posição/escala relativa ao "stage").
// Desktop e mobile têm arranjos DIFERENTES (não é o mesmo layout recortado).
function HeroMockupV3() {
  return (
    <div className="hero-stage">
      <img src="assets/fone-degrade.png" alt="Tela do Econome: registrar um gasto em segundos" className="stage-phone" />

      <div className="stage-card-wrap card-de-olho fade-up" style={{ animationDelay: '0.35s' }}>
        <img src="assets/de-olho.png" alt="De olho nas finanças: pode gastar hoje R$ 444,17" className="stage-card float-a" />
      </div>

      <div className="stage-card-wrap card-grafico fade-up" style={{ animationDelay: '0.45s' }}>
        <img src="assets/grafico.png" alt="Gastos do mês, parceladas e recorrentes em %" className="stage-card float-b" />
      </div>

      <div className="stage-card-wrap card-por-dia fade-up" style={{ animationDelay: '0.55s' }}>
        <img src="assets/por-dia.png" alt="Gráfico de gastos por dia no mês" className="stage-card float-c" />
      </div>

      <style>{`
        .hero-stage {
          position: relative;
          width: clamp(420px, 42vw, 620px);
          aspect-ratio: 2040 / 1674;
        }
        .stage-phone {
          position: absolute;
          /* fone-degrade.png já vem com o fundo/fade pintado dentro da
             própria imagem (opaco, sem transparência) na cor var(--bg-warm)
             (#F7F5EF) — a seção precisa usar essa MESMA cor, senão aparece
             uma costura ao redor do telefone. Não precisa de mask em CSS. */
          left: 25.28%; top: 0; width: 47.19%; height: 100%;
          object-fit: contain;
          z-index: 1;
        }
        .stage-card-wrap { position: absolute; }
        .stage-card {
          display: block; width: 100%; height: auto;
          border-radius: 16px;
          box-shadow:
            0 20px 38px -14px rgba(112, 16, 176, 0.40),
            0 8px 18px -8px rgba(112, 16, 176, 0.28);
        }
        .card-de-olho { left: 64.90%; top: 39.55%; width: 35.10%; z-index: 3; }
        .card-por-dia { left: 56.96%; top: 73.83%; width: 35.10%; z-index: 3; }
        .card-grafico { left: 0%;     top: 43.37%; width: 35.10%; z-index: 2; }

        .float-a { animation: floatCard 6.5s ease-in-out infinite; }
        .float-b { animation: floatCard 7.5s ease-in-out infinite 0.4s; }
        .float-c { animation: floatCard 5.8s ease-in-out infinite 0.8s; }
        @keyframes floatCard {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-3.5%); }
        }
        @media (prefers-reduced-motion: reduce) {
          .float-a, .float-b, .float-c { animation: none; }
        }

        @media (max-width: 960px) {
          .hero-stage {
            width: min(88vw, 420px);
            aspect-ratio: 1362 / 1674;
          }
          .stage-phone { left: 0%; width: 70.68%; }
          .card-de-olho  { left: 47.43%; top: 18.87%; width: 52.57%; }
          .card-por-dia  { left: 47.14%; top: 74.07%; width: 52.57%; }
          .card-grafico  { left: 39.79%; top: 51.73%; width: 52.57%; }
        }
      `}</style>
    </div>
  );
}

window.Hero = Hero;