/* Feedback ORG — Sections A: Nav, Hero, Pain, Solution */

/* ====================== STICKY NAV ====================== */
function Nav() {
  const { Button, Logo } = window.FeedbackORGDesignSystem_591435;
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(30,29,33,0.78)' : 'rgba(30,29,33,0)',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--border)' : 'transparent'}`,
      transition: 'background var(--dur) var(--ease), border-color var(--dur) var(--ease)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px clamp(20px,5vw,72px)' }}>
        <a href="#" aria-label="Início" style={{ display: 'flex', lineHeight: 0 }}>
          <Logo variant="horizontal-white-green" height={30} basePath="." />
        </a>
        <Button variant="primary" size="sm" onClick={() => fbBus.open('contact', { src: 'nav' })}>Falar com especialista</Button>
      </div>
    </header>
  );
}

/* ====================== HERO (video) ====================== */
function VideoFrame() {
  return (
    <div onClick={() => fbBus.open('video')} role="button" tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter') fbBus.open('video'); }}
      style={{ position: 'relative', width: '100%', aspectRatio: '16/9', borderRadius: 'var(--radius-lg)', overflow: 'hidden', cursor: 'pointer',
        background: 'linear-gradient(160deg, #26252c 0%, #1b1a1f 100%)', border: '1px solid var(--border-strong)',
        boxShadow: 'var(--shadow-lg)' }}>
      {/* mock dashboard thumbnail frame behind the dark overlay */}
      <div aria-hidden style={{ position: 'absolute', inset: 0, padding: 22, opacity: 0.55 }}>
        <div style={{ height: '100%', borderRadius: 10, border: '1px solid var(--border)', background: '#211f26', display: 'grid', gridTemplateColumns: '34% 1fr', gap: 12, padding: 14 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ height: 10, width: '70%', background: '#3a3942', borderRadius: 4 }}></div>
            <div style={{ height: 60, background: 'rgba(206,216,72,0.16)', border: '1px solid rgba(206,216,72,0.3)', borderRadius: 8 }}></div>
            <div style={{ height: 10, width: '52%', background: '#34333b', borderRadius: 4 }}></div>
            <div style={{ height: 10, width: '64%', background: '#34333b', borderRadius: 4 }}></div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
            {[40, 64, 52, 78, 88, 60, 72].map((h, i) => (
              <div key={i} style={{ flex: 1, height: `${h}%`, background: i === 4 ? 'var(--accent)' : '#3c3b44', borderRadius: '4px 4px 0 0' }}></div>
            ))}
          </div>
        </div>
      </div>
      {/* dark overlay so play pops */}
      <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,19,24,0.45), rgba(20,19,24,0.7))' }}></div>
      {/* play */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
        <div className="fb-play-pulse" style={{ width: 78, height: 78, borderRadius: '50%', background: 'var(--accent)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="play" size={32} style={{ marginLeft: 4 }} strokeWidth={2.2} />
        </div>
        <span style={{ fontSize: 12.5, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--text)', background: 'rgba(0,0,0,0.4)', padding: '6px 12px', borderRadius: 'var(--radius-pill)', backdropFilter: 'blur(4px)' }}>Toque e veja como funciona</span>
      </div>
    </div>
  );
}

function Hero() {
  const { Button } = window.FeedbackORGDesignSystem_591435;
  return (
    <section id="topo" data-screen-label="hero" style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(48px,7vw,96px) clamp(20px,5vw,72px) clamp(56px,8vw,104px)' }}>
      {/* contour motif */}
      <div aria-hidden style={{ position: 'absolute', top: -220, right: -180, width: 640, height: 640, border: '1px solid var(--border)', borderRadius: '50%', opacity: 0.6 }}></div>
      <div aria-hidden style={{ position: 'absolute', top: -120, right: -60, width: 420, height: 420, border: '1px solid var(--border)', borderRadius: '50%', opacity: 0.4 }}></div>
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 0.95fr)', gap: 'clamp(32px, 5vw, 72px)', alignItems: 'center' }} className="hero-grid">
        <div>
          <Reveal><Eyebrow style={{ color: 'var(--text-muted)' }}>Clima<span style={{ color: 'var(--accent)' }}>·</span>Engajamento<span style={{ color: 'var(--accent)' }}>·</span>Desempenho<span style={{ color: 'var(--accent)' }}>·</span>NR01</Eyebrow></Reveal>
          <Reveal delay={80} as="h1" style={{ fontSize: 'clamp(2.5rem, 5.4vw, 4.4rem)', lineHeight: 1.02, marginTop: 22 }}>
            Sua rotatividade está alta. E está <span style={{ color: 'var(--accent)' }}>custando caro.</span>
          </Reveal>
          <Reveal delay={150} as="p" style={{ fontSize: 'clamp(1.05rem, 1.8vw, 1.3rem)', color: 'var(--text-muted)', maxWidth: 560, marginTop: 22, lineHeight: 1.5 }}>
            Não é mais um painel de RH. É a plataforma que te ajuda a agir com IA e gente de verdade ao seu lado.
          </Reveal>
          <Reveal delay={220} style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap', alignItems: 'center' }}>
            <Button variant="primary" size="lg" onClick={() => fbBus.open('contact', { src: 'hero' })}
              iconRight={<Icon name="arrow-right" size={18} strokeWidth={2.2} />}>Quero reduzir minha rotatividade</Button>
            <a href="#solucao" className="text-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 15, fontWeight: 600, color: 'var(--text)' }}>
              <Icon name="play-circle" size={20} /> Ver como funciona
            </a>
          </Reveal>
        </div>
        <Reveal delay={180}><VideoFrame /></Reveal>
      </div>
    </section>
  );
}

/* ====================== PAIN (the 2x cost, explained) ====================== */
const CONTA = [
  { icon: 'user-search', title: 'Recrutar e selecionar', body: 'Vaga aberta, anúncio, entrevistas, tempo perdido.' },
  { icon: 'graduation-cap', title: 'Treinar e integrar', body: 'Semanas até a pessoa operar sozinha.' },
  { icon: 'trending-down', title: 'Produtividade perdida', body: 'A cadeira vazia somada à curva de aprendizado.' },
  { icon: 'users', title: 'Sobrecarga do time', body: 'Quem fica acumula, erra mais e pensa em sair também.' },
];

function ContaItem({ item, idx }) {
  return (
    <Reveal delay={300 + idx * 130}>
      <div className="fb-card-hover" style={{ display: 'flex', alignItems: 'flex-start', gap: 16, padding: '16px 18px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)', background: 'var(--fb-ink-soft)' }}
        onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'rgba(217,83,79,0.5)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--accent)', lineHeight: 1, marginTop: 2, flexShrink: 0 }}>+</span>
        <div className="icon-tile" style={{ width: 40, height: 40, flexShrink: 0, borderRadius: 'var(--radius)', background: 'var(--fb-ink)', border: '1px solid var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={item.icon} size={20} />
        </div>
        <div>
          <h3 style={{ fontSize: 16.5 }}>{item.title}</h3>
          <p style={{ color: 'var(--text-muted)', fontSize: 13.5, marginTop: 4, lineHeight: 1.5 }}>{item.body}</p>
        </div>
      </div>
    </Reveal>
  );
}

function Pain() {
  const [ref, inView] = useInView();
  const n = useCountUp(2, inView);
  return (
    <Section id="dor">
      <Reveal as="h2" style={{ fontSize: 'clamp(1.9rem, 4vw, 3rem)', maxWidth: 880, lineHeight: 1.08 }}>
        Perder um colaborador custa até <span style={{ color: 'var(--accent)' }}>2x o salário anual</span> dele.
      </Reveal>
      <Reveal delay={80} as="p" style={{ fontSize: 'clamp(1.05rem, 1.8vw, 1.3rem)', color: 'var(--text-muted)', maxWidth: 620, marginTop: 18, lineHeight: 1.5 }}>
        Rotatividade não é problema apenas de RH. É dinheiro saindo do seu caixa.
      </Reveal>

      <div className="dor-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.85fr) minmax(0,1.15fr)', gap: 'clamp(20px, 4vw, 44px)', marginTop: 48, alignItems: 'start' }}>
        {/* the number — gravity center */}
        <Reveal>
          <div ref={ref} style={{ background: 'linear-gradient(165deg, #232128 0%, #161519 100%)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-lg)', padding: 'clamp(30px, 4vw, 44px)', position: 'relative', overflow: 'hidden' }}>
            <div aria-hidden style={{ position: 'absolute', bottom: -110, left: -70, width: 300, height: 300, border: '1px solid var(--border)', borderRadius: '50%', opacity: 0.5 }}></div>
            <div style={{ position: 'relative' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(5rem, 13vw, 9rem)', color: 'var(--accent)', letterSpacing: '-0.04em', lineHeight: 0.85, display: 'block' }}>
                {n.toFixed(0)}x
              </span>
              <p style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.3rem, 2.6vw, 1.9rem)', color: 'var(--text)', marginTop: 18, letterSpacing: '-0.01em' }}>
                o salário anual
              </p>
              <p style={{ fontSize: 'clamp(1rem, 1.6vw, 1.15rem)', color: 'var(--text-muted)', marginTop: 6, lineHeight: 1.4 }}>
                é o que custa repor quem sai.
              </p>
              <p style={{ fontSize: 12.5, color: 'var(--text-dim)', marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--border)' }}>Fonte: Gallup · Robert Half</p>
            </div>
          </div>
        </Reveal>

        {/* the account that forms the 2x */}
        <div>
          <Reveal as="div" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--text-muted)', marginBottom: 18 }}>
            A conta que forma esse 2x
          </Reveal>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {CONTA.map((item, i) => <ContaItem key={item.title} item={item} idx={i} />)}
          </div>
        </div>
      </div>

      <Reveal delay={120} style={{ marginTop: 40 }}>
        <CTAButton src="dor">Quero parar de perder dinheiro</CTAButton>
      </Reveal>
    </Section>
  );
}

/* ====================== SOLUTION (cycle) ====================== */
const CYCLE = [
  { icon: 'clipboard-list', title: 'Pesquisa', body: 'Clima, pulso, onboarding, desligamento, desempenho.' },
  { icon: 'bar-chart-3', title: 'Análise', body: 'Vira indicador, NPS interno e gráfico claro.' },
  { icon: 'target', title: 'Plano de ação', body: 'A IA sugere como copiloto. Você decide.' },
  { icon: 'refresh-cw', title: 'Evolução', body: 'Reavalia e prova o resultado em números.' },
];

function CycleStep({ step, idx, last }) {
  return (
    <React.Fragment>
      <Reveal delay={idx * 110} style={{ flex: '1 1 200px', minWidth: 180 }}>
        <div className="fb-card-hover" style={{ background: 'var(--fb-ink-soft)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', padding: '26px 22px', height: '100%' }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--accent)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = 'var(--border)'; }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <IconTile name={step.icon} size={46} icon={24} />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, color: 'var(--border-strong)' }}>0{idx + 1}</span>
          </div>
          <h3 style={{ fontSize: 19, marginTop: 18 }}>{step.title}</h3>
          <p style={{ color: 'var(--text-muted)', fontSize: 14.5, marginTop: 8, lineHeight: 1.5 }}>{step.body}</p>
        </div>
      </Reveal>
      {!last && (
        <Reveal delay={idx * 110 + 55} className="cycle-arrow" style={{ display: 'flex', alignItems: 'center', color: 'var(--accent)', flex: '0 0 auto' }}>
          <Icon name="arrow-right" size={24} strokeWidth={2} />
        </Reveal>
      )}
    </React.Fragment>
  );
}

function Solution() {
  return (
    <Section id="solucao">
      <Reveal><Eyebrow>A solução</Eyebrow></Reveal>
      <Reveal delay={70} as="h2" style={{ fontSize: 'clamp(1.9rem, 4vw, 3rem)', marginTop: 16, maxWidth: 680 }}>
        Você escuta, entende e age. O ano inteiro.
      </Reveal>
      <div className="cycle-row" style={{ display: 'flex', alignItems: 'stretch', gap: 14, marginTop: 44, flexWrap: 'wrap' }}>
        <CycleStep step={CYCLE[0]} idx={0} last={false} />

        <Reveal delay={140} style={{ flex: '0 1 280px', minWidth: 240 }}>
          <div className="bridge-card" style={{
            background: 'var(--fb-ink)',
            border: '1px dashed var(--border-strong)',
            borderRadius: 'var(--radius-md)',
            padding: '22px 20px',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            gap: 18,
            transition: 'border-color var(--dur) var(--ease)',
          }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.borderStyle = 'solid'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.borderStyle = 'dashed'; }}>
            <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--accent)' }}>
              Como chega ao time
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {[
                { icon: 'qr-code', title: 'QR Code', body: 'No crachá ou mural' },
                { icon: 'message-circle', title: 'WhatsApp', body: 'Link direto no chat' },
                { icon: 'mail', title: 'E-mail', body: 'Convite individual' },
              ].map((c) => (
                <div key={c.title} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
                  <div className="icon-tile" style={{
                    width: 36, height: 36, borderRadius: 'var(--radius-sm)',
                    background: 'var(--fb-ink-soft)', border: '1px solid var(--border-strong)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon name={c.icon} size={18} />
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13.5, lineHeight: 1.1 }}>{c.title}</div>
                  <div style={{ color: 'var(--text-muted)', fontSize: 11.5, lineHeight: 1.35 }}>{c.body}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        <Reveal delay={180} className="cycle-arrow" style={{ display: 'flex', alignItems: 'center', color: 'var(--accent)', flex: '0 0 auto' }}>
          <Icon name="arrow-right" size={24} strokeWidth={2} />
        </Reveal>

        <CycleStep step={CYCLE[1]} idx={1} last={false} />
        <CycleStep step={CYCLE[2]} idx={2} last={true} />
      </div>
      {/* performance wide card */}
      <div className="evolu-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(220px, 1fr) minmax(0, 2fr)',
        gap: 14,
        marginTop: 22,
        alignItems: 'stretch',
      }}>
        <CycleStep step={CYCLE[3]} idx={3} last={true} />

        <Reveal delay={180}>
          <div className="fb-card-hover" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 'clamp(18px, 3vw, 30px)', alignItems: 'center',
            background: 'linear-gradient(110deg, var(--fb-ink-soft), #232128)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', padding: 'clamp(26px,4vw,36px)', height: '100%' }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
            <IconTile name="line-chart" size={56} icon={30} />
            <div>
              <h3 style={{ fontSize: 'clamp(1.3rem, 2.4vw, 1.75rem)' }}>Desenvolva sua equipe.</h3>
              <p style={{ color: 'var(--text-muted)', fontSize: 15.5, marginTop: 8, lineHeight: 1.5, maxWidth: 620 }}>
                Avaliações 180/270/360, Nine Box e PDI gerado por IA. A ponte entre parar de perder e fazer crescer.
              </p>
            </div>
          </div>
        </Reveal>
      </div>
      <Reveal delay={180} style={{ marginTop: 36 }}>
        <CTAButton src="solucao">Quero ver isso na minha empresa</CTAButton>
      </Reveal>
    </Section>
  );
}

Object.assign(window, { Nav, Hero, Pain, Solution });