// Operação Brasil — full-bleed hero
const { Button: HeroButton, Badge: HeroBadge } =
  window.OperaOBrasilDesignSystem_ac060f;

function Hero() {
  return (
    <section id="top" style={{
      position: "relative", isolation: "isolate", overflow: "hidden",
      minHeight: "min(92vh, 900px)", display: "grid", alignItems: "center",
      padding: "clamp(40px, 6vw, 96px) clamp(20px, 4vw, 62px)",
    }}>
      {/* background image + protection */}
      <div aria-hidden="true" className="hero-depth-plane" style={{
        position: "absolute", inset: 0, zIndex: -2,
        background: "var(--grad-protect-left), url('../../assets/landing-page/route-01-operacao-brasil-premium.png') center/cover no-repeat",
      }} />
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: -1,
        background: "url('../../assets/textures/sparkling-aged-gold.png') center/cover no-repeat",
        mixBlendMode: "screen", opacity: 0.22, pointerEvents: "none",
      }} />

      <div className="hero-content-shell" style={{ width: "100%", maxWidth: "1200px", margin: "0 auto" }}>
        <div className="hero-status" style={{
          display: "inline-flex", alignItems: "center", gap: "13px",
          padding: "9px 8px 9px 15px", position: "relative",
          background: "rgba(0,0,0,0.34)", border: "1px solid var(--border-soft)",
          borderRadius: "var(--radius-sm)", backdropFilter: "blur(2px)",
        }}>
          <span aria-hidden="true" className="hero-corner hero-corner-tl" />
          <span aria-hidden="true" className="hero-corner hero-corner-br" />
          <span aria-hidden="true" className="hero-status-dot" style={{
            width: "8px", height: "8px", borderRadius: "50%", flex: "none",
            background: "var(--olive-500)", boxShadow: "0 0 0 4px rgba(89,102,41,0.22)",
            animation: "hero-pulse 2.4s ease-in-out infinite",
          }} />
          <span className="hero-status-name" style={{
            fontFamily: "var(--font-mono)", fontSize: "0.74rem", fontWeight: 900,
            letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-gold)",
          }}>Operação ativa</span>
          <span aria-hidden="true" className="hero-status-separator" style={{ width: "1px", height: "16px", background: "var(--border-soft)" }} />
          <span className="hero-status-scope" style={{
            fontFamily: "var(--font-mono)", fontSize: "0.74rem", fontWeight: 700,
            letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)",
          }}>Nacional</span>
          <span className="hero-status-badge"><HeroBadge tone="olive" solid>.38 TPC</HeroBadge></span>
        </div>
        <h1 style={{
          margin: "22px 0 0", maxWidth: "16ch",
          fontFamily: "var(--font-display)", fontWeight: 900, textTransform: "uppercase",
          fontSize: "var(--text-hero)", lineHeight: "var(--leading-display)",
          color: "var(--text-strong)", textShadow: "var(--text-shadow-hero)", textWrap: "balance",
        }}>
          Operação <em style={{ display: "block", color: "var(--gold-300)", fontStyle: "italic" }}>Brasil</em>
        </h1>
        <p style={{
          maxWidth: "640px", margin: "28px 0 0",
          color: "var(--text-body)", fontSize: "var(--text-lead)", lineHeight: "var(--leading-body)",
        }}>
          Uma operação nacional com seleção especial de equipamentos e condições exclusivas,
          conectando você diretamente às lojas participantes.
        </p>
        <div className="finance-rail" aria-label="Condições de parcelamento">
          <div className="finance-rail-desktop-reference">
            <img src="../../assets/landing-page/faixa-condicoes-desktop.png" alt="Condição da operação: 12 vezes sem juros ou até 21 vezes com juros." />
            <a className="finance-rail-hit finance-rail-hit-primary" href="#cadastro" aria-label="Consultar oportunidades" />
            <a className="finance-rail-hit finance-rail-hit-secondary" href="#como" aria-label="Ver os passos" />
          </div>
          <div className="finance-rail-live">
            <span className="finance-rail-corner finance-rail-corner-tl" aria-hidden="true" />
            <span className="finance-rail-corner finance-rail-corner-tr" aria-hidden="true" />
            <span className="finance-rail-corner finance-rail-corner-bl" aria-hidden="true" />
            <span className="finance-rail-corner finance-rail-corner-br" aria-hidden="true" />
            <div className="finance-rail-intro">
              <svg className="finance-rail-reticle" viewBox="0 0 100 100" aria-hidden="true" focusable="false" shapeRendering="geometricPrecision">
                <defs>
                  <filter id="reticle-texture" x="-20%" y="-20%" width="140%" height="140%">
                    <feTurbulence type="fractalNoise" baseFrequency=".72" numOctaves="2" seed="7" result="grain" />
                    <feComposite in="grain" in2="SourceAlpha" operator="in" result="grainShape" />
                    <feColorMatrix in="grainShape" type="matrix" values="1 0 0 0 .55 0 1 0 0 .38 0 0 1 0 .05 0 0 0 .2 0" result="goldGrain" />
                    <feBlend in="SourceGraphic" in2="goldGrain" mode="screen" />
                  </filter>
                </defs>
                <g filter="url(#reticle-texture)">
                <circle className="reticle-ring reticle-ring-outer" cx="50" cy="50" r="29" />
                <circle className="reticle-ring reticle-ring-inner" cx="50" cy="50" r="17" />
                <path className="reticle-crosshair" d="M50 3V32 M50 68V97 M3 50H32 M68 50H97" />
                <circle className="reticle-center" cx="50" cy="50" r="4" />
                <circle className="reticle-core" cx="50" cy="50" r="1.8" />
                </g>
              </svg>
              <span className="finance-rail-intro-copy">
                <span>Condição</span>
                <strong>do programa</strong>
              </span>
            </div>
            <div className="finance-option finance-option-primary">
              <strong>12×</strong>
              <b>Sem juros</b>
            </div>
            <span className="finance-option-divider" aria-hidden="true"><span className="finance-option-divider-label">ou</span></span>
            <div className="finance-option finance-option-secondary">
              <strong><em>Até</em> 21×</strong>
              <b>Com juros</b>
            </div>
            <span className="finance-rail-diagonal" aria-hidden="true" />
            <div className="finance-rail-actions">
              <HeroButton as="a" href="#cadastro" size="lg">Consultar oportunidades</HeroButton>
              <HeroButton as="a" href="#como" variant="secondary" size="lg">Ver os passos</HeroButton>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;