/* Hero — dark VSL with WhatsApp phone mockup + ethereal animated shadow bg */

function mapRange(value, fromLow, fromHigh, toLow, toHigh) {
  if (fromLow === fromHigh) return toLow;
  return toLow + (value - fromLow) / (fromHigh - fromLow) * (toHigh - toLow);
}

function EtherealShadow({
  color = 'var(--lime)',
  animationScale = 60,
  animationSpeed = 35,
  noiseOpacity = 0.08,
  noiseScale = 1.4,
  opacity = 0.22,
  fixed = false
}) {
  const reactId = React.useId();
  const id = `ether-${reactId.replace(/:/g, '')}`;
  const feColorMatrixRef = React.useRef(null);
  const feTurbRef = React.useRef(null);
  const animationEnabled = animationScale > 0;
  const displacementScale = mapRange(animationScale, 1, 100, 20, 100);
  const animationDuration = mapRange(animationSpeed, 1, 100, 1000, 50);

  React.useEffect(() => {
    if (!animationEnabled) return;
    let raf;
    const start = performance.now();
    const cycleSec = animationDuration / 25;
    const baseFreqX = mapRange(animationScale, 0, 100, 0.001, 0.0005);
    const baseFreqY = mapRange(animationScale, 0, 100, 0.004, 0.002);
    const tick = (now) => {
      const elapsed = (now - start) / 1000;
      const v = elapsed / cycleSec * 360 % 360;
      if (feColorMatrixRef.current) {
        feColorMatrixRef.current.setAttribute('values', String(v));
      }
      if (feTurbRef.current) {
        // Wave-like motion: oscillate baseFrequency to make the shape breathe
        const wave = Math.sin(elapsed / (cycleSec * 0.8)) * 0.4 + 1;
        feTurbRef.current.setAttribute(
          'baseFrequency',
          `${baseFreqX * wave},${baseFreqY * wave}`
        );
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [animationEnabled, animationDuration, animationScale]);

  const wrapStyle = fixed ? {
    position: 'fixed', inset: 0, overflow: 'hidden',
    pointerEvents: 'none', zIndex: 0
  } : {
    position: 'absolute', inset: 0, overflow: 'hidden',
    pointerEvents: 'none', zIndex: 0
  };

  return (
    <div style={wrapStyle} aria-hidden="true">
      <div className="ether-wave" style={{
        position: 'absolute',
        inset: -displacementScale,
        filter: animationEnabled ? `url(#${id})` : 'none'
      }}>
        {animationEnabled &&
        <svg style={{ position: 'absolute', width: 0, height: 0 }}>
            <defs>
              <filter id={id}>
                <feTurbulence
                ref={feTurbRef}
                result="undulation"
                numOctaves="2"
                baseFrequency={`${mapRange(animationScale, 0, 100, 0.001, 0.0005)},${mapRange(animationScale, 0, 100, 0.004, 0.002)}`}
                seed="0"
                type="turbulence" />
              
                <feColorMatrix
                ref={feColorMatrixRef}
                in="undulation"
                type="hueRotate"
                values="180" />
              
                <feColorMatrix
                in="dist"
                result="circulation"
                type="matrix"
                values="4 0 0 0 1  4 0 0 0 1  4 0 0 0 1  1 0 0 0 0" />
              
                <feDisplacementMap
                in="SourceGraphic"
                in2="circulation"
                scale={displacementScale}
                result="dist" />
              
                <feDisplacementMap
                in="dist"
                in2="undulation"
                scale={displacementScale}
                result="output" />
              
              </filter>
            </defs>
          </svg>
        }
        <div className="ether-mask" style={{
          backgroundColor: color,
          maskImage: `url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png')`,
          WebkitMaskImage: `url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png')`,
          maskSize: 'cover',
          WebkitMaskSize: 'cover',
          maskRepeat: 'no-repeat',
          WebkitMaskRepeat: 'no-repeat',
          maskPosition: 'center',
          WebkitMaskPosition: 'center',
          width: '100%',
          height: '100%',
          opacity
        }} />
      </div>
      {noiseOpacity > 0 &&
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url('https://framerusercontent.com/images/g0QcWrxr87K0ufOxIUFBakwYA8.png')`,
        backgroundSize: `${noiseScale * 200}px`,
        backgroundRepeat: 'repeat',
        opacity: noiseOpacity / 2,
        mixBlendMode: 'overlay',
        pointerEvents: 'none'
      }} />
      }
    </div>);

}

window.EtherealShadow = EtherealShadow;

function ProofStack() {
  return (
    <div className="proof-stack">
      <div className="proof-card proof-1">
        <div className="proof-eyebrow">vidas transformadas</div>
        <div className="proof-num">+5K</div>
        <div className="proof-avatars">
          <div className="pa" style={{ background: 'oklch(0.86 0.10 130)' }}>JM</div>
          <div className="pa" style={{ background: 'oklch(0.84 0.10 30)' }}>AS</div>
          <div className="pa" style={{ background: 'oklch(0.82 0.08 200)' }}>CR</div>
          <div className="pa" style={{ background: 'oklch(0.88 0.08 80)' }}>BL</div>
          <div className="pa" style={{ background: 'color-mix(in oklab, var(--lime) 30%, var(--surface))', color: 'var(--lime)' }}>+</div>
        </div>
      </div>

      <div className="proof-card proof-2">
        <div className="proof-eyebrow">avaliação média</div>
        <div className="proof-row">
          <div className="proof-num small">4.9</div>
          <div className="proof-stars">★ ★ ★ ★ ★</div>
        </div>
        <div className="proof-foot">de 1.247 reviews dos últimos desafios</div>
      </div>

      <div className="proof-card proof-3 accent">
        <div className="proof-eyebrow dark">resultado típico em 7 dias</div>
        <div className="proof-num xl">4 kg<span className="aster">*</span></div>
        <div className="proof-foot dark">na semana da Copa · 01 → 08 jun</div>
      </div>

      <svg className="proof-curves" viewBox="0 0 400 600" preserveAspectRatio="none" aria-hidden="true">
        <path d="M 50 80 Q 200 120 320 60" stroke="var(--lime)" strokeWidth="1.2" fill="none" strokeDasharray="3 6" opacity="0.5" />
        <path d="M 80 300 Q 250 260 380 360" stroke="var(--lime)" strokeWidth="1.2" fill="none" strokeDasharray="2 5" opacity="0.4" />
      </svg>
    </div>);

}

function Hero() {
  return (
    <header className="hero hero-v3" id="top">
      <div className="hv3-stage">
        <div className="hv3-bgword" aria-hidden="true">
          <span>COPA</span>
          <span>SHAPE</span>
        </div>
        <div className="hv3-vignette" aria-hidden="true" />

        <div className="wrap hv3-grid">

          {/* ── LEFT TOP: headline ── */}
          <div className="hv3-content">
            <img src="assets/logo.png" alt="Copa no Shape" style={{maxWidth: 200, width: '100%', margin: '0 auto 8px', display: 'block'}} />

            <div className="hv3-badge">
              <span className="hv3-badge-dot" />
              <span>Grupo de Emagrecimento Oficial</span>
            </div>

            <h1 className="hv3-tagline" style={{textTransform: 'uppercase'}}>
              7 dias para perder até <span style={{color: '#FFD200'}}>4 KG</span> e aproveitar os eventos sociais sem culpa.
            </h1>

            <p className="hv3-sub" style={{ color: "rgb(255, 255, 255)", fontSize: "18px", fontWeight: "400", textAlign: "center", margin: "0 0 4px" }}>Curta com margem, porque a gente te ensina a conter os danos.
            </p>

            <div className="hv3-strap" style={{color: '#FFD200', textTransform: 'uppercase'}}>Emagrecimento sem terrorismo e com resultado.</div>

            <div className="hv3-date">
              <svg className="hv3-date-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="16" y1="2" x2="16" y2="6"></line>
                <line x1="8" y1="2" x2="8" y2="6"></line>
                <line x1="3" y1="10" x2="21" y2="10"></line>
              </svg>
              <span>Grupo online de <strong>1 de junho a 8 de junho</strong></span>
            </div>
          </div>

          {/* ── LEFT BOTTOM: CTAs (vem após a foto no mobile) ── */}
          <div className="hv3-cta">
            <div className="hv3-trust">
              <span className="hv3-trust-count">+5.000 alunos</span>
              <span className="hv3-trust-sep">·</span>
              <span className="hv3-trust-stars">★★★★★</span>
              <span className="hv3-trust-rating">avaliação 4.9</span>
            </div>

            <div className="hv3-lotes-label">ESCOLHA SEU LOTE</div>
            <div className="hv3-lotes">
              <div className="hv3-lote">
                <div className="hv3-lote-name">LOTE ZERO</div>
                <div className="hv3-lote-price">R$57,00</div>
                <div className="hv3-lote-meta">Indisponível</div>
              </div>
              <div className="hv3-lote active">
                <div className="hv3-lote-name">LOTE 1</div>
                <div className="hv3-lote-price">R$77,00</div>
                <div className="hv3-lote-meta">Disponível agora</div>
              </div>
              <div className="hv3-lote">
                <div className="hv3-lote-name">LOTE 2</div>
                <div className="hv3-lote-price">R$97,00</div>
                <div className="hv3-lote-meta">Indisponível</div>
              </div>
            </div>

            <div className="hv3-cta-row">
              <a href="#inscricao" className="btn btn-primary hv3-btn-primary">
                QUERO ENTRAR NO DESAFIO →
              </a>
            </div>

            <div className="hv3-foot">
              <div className="hv3-foot-guarantee">
                Garantia de 7 dias — se não gostar, devolvemos 100%
              </div>
            </div>
          </div>

          {/* ── MIDDLE: couple photo ── */}
          <div className="hv3-photo-slot">
            <div className="hv3-bgword hv3-bgword-photo" aria-hidden="true">
              <span>COPA</span>
              <span>SHAPE</span>
            </div>
            <img
              src="assets/CASAL.png"
              alt="André Teles e Layane Carine"
              className="hv3-casal" />
          </div>

          {/* ── RIGHT: floating badges over the photo ── */}
          <div className="hv3-stats">
            <div className="hv3-stat hv3-stat-1">
              <div className="hv3-stat-num">4 kg<sup>*</sup></div>
              <div className="hv3-stat-text">
                <strong>em 7 dias</strong>
              </div>
            </div>
            <div className="hv3-stat hv3-stat-2">
              <div className="hv3-stat-live">
                <span className="hv3-live-pulse" />
                Ao vivo
              </div>
              <div className="hv3-stat-text">
                <strong>WhatsApp · todo dia</strong>
              </div>
            </div>
          </div>

        </div>
      </div>
    </header>);

}

window.Hero = Hero;