/* Feedback ORG — Sections B: Differential, NR-01, Modules, Instagram, Final CTA, Social proof, Footer */

/* ====================== DIFFERENTIAL ====================== */
const PILLARS = [
  { icon: 'zap', title: 'IA copiloto', body: 'Dentro da plataforma, sugere o que olhar e quais planos tomar. Sugere, você decide.', pulse: true },
  { icon: 'compass', title: 'Você no controle', body: 'Vê os dados, vê a IA sugerindo, e decide o que fazer. A decisão é sempre sua.' },
  { icon: 'handshake', title: 'Gerente de Contas incluído', body: 'Seu Customer Success: ajuda a interpretar, a montar os planos e garante que você extraia resultado.' },
];

function DiffVisual() {
  const [ref, inView] = useInView();
  const [grown, setGrown] = useState(false);
  useEffect(() => { if (!inView) return; const t = setTimeout(() => setGrown(true), 1000); return () => clearTimeout(t); }, [inView]);
  const bars = [44, 58, 50, 70, 82, 76, 92];
  const nps = useCountUp(75, inView);
  const growth = useCountUp(38, inView);
  return (
    <div ref={ref} style={{ background: 'var(--fb-ink-soft)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 'clamp(22px, 3vw, 30px)', boxShadow: 'var(--shadow)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
        <span style={{ fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--text-muted)' }}>Seu painel · ao vivo</span>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)', animation: 'fb-blink 2.2s ease-in-out infinite' }}></span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
        {[['NPS interno', Math.round(nps), ''], ['Engajamento', `+${Math.round(growth)}`, '%']].map(([l, v, s]) => (
          <div key={l} style={{ background: 'var(--fb-ink)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '16px 18px' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 34, color: 'var(--accent)', letterSpacing: '-0.03em', lineHeight: 1 }}>{v}{s}</div>
            <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 6 }}>{l}</div>
          </div>
        ))}
      </div>
      {/* chart */}
      <div style={{ background: 'var(--fb-ink)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '18px 18px 14px' }}>
        <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginBottom: 14 }}>Evolução do clima · 7 ciclos</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 120 }}>
          {bars.map((h, i) => (
            <div key={i} style={{ flex: 1, height: inView ? `${h}%` : '4%', borderRadius: '4px 4px 0 0',
              background: i === bars.length - 1 ? 'var(--accent)' : '#3a3942',
              transition: grown ? 'none' : `height .9s var(--ease-out) ${i * 80}ms` }}></div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Differential() {
  return (
    <Section id="diferencial">
      <div className="diff-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'clamp(36px, 6vw, 80px)', alignItems: 'center' }}>
        <div>
          <Reveal><Eyebrow>Por que é diferente</Eyebrow></Reveal>
          <Reveal delay={70} as="h2" style={{ fontSize: 'clamp(1.9rem, 3.6vw, 2.9rem)', marginTop: 16, lineHeight: 1.1 }}>
            Você não fica sozinho com <span style={{ color: 'var(--accent)' }}>um painel.</span>
          </Reveal>
          <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {PILLARS.map((p, i) => (
              <Reveal key={p.title} delay={120 + i * 90}>
                <div className="fb-card-hover" style={{ display: 'flex', gap: 18, alignItems: 'flex-start', padding: '18px 20px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)', background: 'var(--fb-ink-soft)' }}
                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
                  <div className="icon-tile" style={{ width: 48, height: 48, flexShrink: 0, borderRadius: 'var(--radius)', background: 'var(--fb-ink)', border: '1px solid var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: p.pulse ? 'fb-blink 2.6s ease-in-out infinite' : 'none' }}>
                    <Icon name={p.icon} size={24} />
                  </div>
                  <div>
                    <h3 style={{ fontSize: 18 }}>{p.title}</h3>
                    <p style={{ color: 'var(--text-muted)', fontSize: 14.5, marginTop: 5, lineHeight: 1.5 }}>{p.body}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={420} style={{ marginTop: 28 }}>
            <CTAButton src="diferencial">Quero ver funcionando</CTAButton>
          </Reveal>
        </div>
        <Reveal delay={140}>
          <DiffVisual />
        </Reveal>
      </div>
    </Section>
  );
}

/* small CTA button wrapper using DS Button */
function CTAButton({ children, src, size = 'lg', variant = 'primary' }) {
  const { Button } = window.FeedbackORGDesignSystem_591435;
  return (
    <Button variant={variant} size={size} onClick={() => fbBus.open('contact', { src })}
      iconRight={<Icon name="arrow-right" size={18} strokeWidth={2.2} />}>{children}</Button>
  );
}

/* ====================== NR-01 (lime band) ====================== */
function NR01() {
  const { Button } = window.FeedbackORGDesignSystem_591435;
  return (
    <Section id="nr01" padY="clamp(40px,6vw,72px) clamp(20px,5vw,72px)">
      <Reveal>
        <div style={{ background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 'var(--radius-xl)', padding: 'clamp(36px, 5vw, 64px)', position: 'relative', overflow: 'hidden' }}>
          <div aria-hidden style={{ position: 'absolute', top: -120, right: -100, width: 360, height: 360, border: '1px solid rgba(30,29,33,0.18)', borderRadius: '50%' }}></div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 'clamp(24px,4vw,56px)', alignItems: 'center' }} className="nr-grid">
            <div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(30,29,33,0.1)', border: '1px solid rgba(30,29,33,0.2)', padding: '6px 13px', borderRadius: 'var(--radius-pill)', fontSize: 12.5, fontWeight: 700, letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>
                <Icon name="alert-triangle" size={15} strokeWidth={2.2} /> JÁ EM VIGOR
              </div>
              <h2 style={{ fontSize: 'clamp(1.8rem, 3.6vw, 2.9rem)', color: 'var(--accent-ink)', marginTop: 18, lineHeight: 1.08, maxWidth: 720 }}>
                A fiscalização da NR-01 já começou.
              </h2>
              <p style={{ fontSize: 'clamp(1rem, 1.7vw, 1.2rem)', color: 'rgba(30,29,33,0.82)', marginTop: 14, maxWidth: 640, lineHeight: 1.45, fontWeight: 500 }}>
                Empresas sem mapeamento de risco psicossocial podem ser autuadas. Vale para todo CLT.
              </p>
              <p style={{ fontSize: 'clamp(1rem, 1.7vw, 1.2rem)', color: 'var(--accent-ink)', marginTop: 10, maxWidth: 640, lineHeight: 1.45, fontWeight: 700 }}>
                O Feedback ORG mapeia, documenta e monitora.
              </p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
              <Button variant="solidDark" size="lg" onClick={() => fbBus.open('contact', { src: 'nr01' })}
                iconRight={<Icon name="shield-check" size={18} strokeWidth={2.2} />}>Quero adequar minha empresa</Button>
            </div>
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

/* ====================== MODULES ====================== */
const MODULES = [
  { icon: 'thermometer', name: 'Clima' },
  { icon: 'activity', name: 'Pulso' },
  { icon: 'user-plus', name: 'Onboarding' },
  { icon: 'log-out', name: 'Desligamento' },
  { icon: 'sparkles', name: 'Cultura' },
  { icon: 'line-chart', name: 'Análise de Desempenho', star: true },
  { icon: 'megaphone', name: 'Comunicação' },
  { icon: 'list-checks', name: 'Pesquisas Pontuais' },
  { icon: 'shield-check', name: 'NR\u201101', star: true },
];

function ModuleCard({ m, idx }) {
  return (
    <Reveal delay={idx * 60}>
      <div className="fb-card-hover" style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 16, padding: '20px 22px', borderRadius: 'var(--radius-md)',
        background: m.star ? 'linear-gradient(120deg, rgba(206,216,72,0.08), var(--fb-ink-soft))' : 'var(--fb-ink-soft)',
        border: `1px solid ${m.star ? 'rgba(206,216,72,0.45)' : 'var(--border)'}` }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = 'var(--accent)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = m.star ? 'rgba(206,216,72,0.45)' : 'var(--border)'; }}>
        <div className="icon-tile" style={{ width: 44, height: 44, flexShrink: 0, borderRadius: 'var(--radius)', background: 'var(--fb-ink)', border: '1px solid var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: m.star ? 'var(--accent)' : 'var(--text)', borderColor: m.star ? 'var(--accent)' : 'var(--border-strong)' }}>
          <Icon name={m.icon} size={22} />
        </div>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16.5, letterSpacing: '-0.01em' }}>{m.name}</span>
        {m.star && <span style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--accent-ink)', background: 'var(--accent)', padding: '3px 8px', borderRadius: 'var(--radius-pill)' }}>DESTAQUE</span>}
      </div>
    </Reveal>
  );
}

function Modules() {
  return (
    <Section id="modulos">
      <Reveal as="h2" style={{ fontSize: 'clamp(1.9rem, 4vw, 3rem)', maxWidth: 640 }}>Um módulo para cada momento.</Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 14, marginTop: 40 }}>
        {MODULES.map((m, i) => <ModuleCard key={m.name} m={m} idx={i} />)}
      </div>
      <Reveal delay={120} style={{ marginTop: 40 }}>
        <CTAButton src="modulos">Quero conhecer a plataforma</CTAButton>
      </Reveal>
    </Section>
  );
}

/* ====================== INSTAGRAM ====================== */
function Instagram() {
  const { Button } = window.FeedbackORGDesignSystem_591435;
  return (
    <Section id="instagram">
      <div className="insta-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.1fr)', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}>
        <div>
          <Reveal><Eyebrow style={{ color: 'var(--text-muted)' }}><Icon name="instagram" size={15} style={{ color: 'var(--accent)' }} /> @feedback.org</Eyebrow></Reveal>
          <Reveal delay={70} as="h2" style={{ fontSize: 'clamp(1.8rem, 3.6vw, 2.8rem)', marginTop: 16 }}>Acompanhe o Feedback ORG.</Reveal>
          <Reveal delay={130} as="p" style={{ color: 'var(--text-muted)', fontSize: 'clamp(1rem,1.7vw,1.2rem)', marginTop: 14, maxWidth: 420, lineHeight: 1.5 }}>
            Conteúdo sobre gente, gestão e resultado.
          </Reveal>
          <Reveal delay={190} style={{ marginTop: 26, display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <CTAButton src="instagram">Falar com especialista</CTAButton>
            <Button variant="secondary" size="lg" onClick={() => window.open('https://instagram.com/feedbackorganizacional', '_blank')}
              iconRight={<Icon name="external-link" size={17} />}>Ver no Instagram</Button>
          </Reveal>
        </div>
        <Reveal delay={150}>
          <div
            data-behold-id="olrG3IaE0UXaommrkFcM"
            style={{
              borderRadius: 'var(--radius-md)',
              overflow: 'hidden',
              minHeight: 320,
            }}
          />
        </Reveal>
      </div>
    </Section>
  );
}

/* ====================== FINAL CTA ====================== */
function FinalCTA() {
  return (
    <Section id="cta-final" padY="clamp(48px,7vw,96px) clamp(20px,5vw,72px)">
      <Reveal>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto', position: 'relative' }}>
          <div aria-hidden style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 520, height: 520, border: '1px solid var(--border)', borderRadius: '50%', opacity: 0.4, pointerEvents: 'none' }}></div>
          <h2 style={{ fontSize: 'clamp(2rem, 4.4vw, 3.3rem)', position: 'relative', lineHeight: 1.08 }}>
            Descubra onde você está <span style={{ color: 'var(--accent)' }}>perdendo gente.</span>
          </h2>
          <p style={{ color: 'var(--text-muted)', fontSize: 'clamp(1.05rem,1.8vw,1.3rem)', marginTop: 18, position: 'relative' }}>
            A IA sugere, nós apoiamos, você decide. Veja na prática.
          </p>
          <div style={{ marginTop: 34, display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <CTAButton src="cta-final">Falar com especialista</CTAButton>
          </div>
          <p style={{ color: 'var(--text-dim)', fontSize: 13.5, marginTop: 20, position: 'relative' }}>
            Resposta em até 1 dia útil · LGPD
          </p>
        </div>
      </Reveal>
    </Section>
  );
}

/* ====================== SOCIAL PROOF ====================== */
const BRAND_LOGOS = [
  'AmplaComunicacaoLogo.8f121c1e', 'ProxximaLogo_PNG.d7889d8d', 'AgenciaUM.be0bc652',
  'Midea_Logo.17d7074f', 'americanas.5a277de4', 'OracleLogo.b7bb459e',
  'BatuxLogo.753b1830', 'PepsiLogo.351131b5', 'BoticarioLogo.bd70dec0',
  'RedBull_Logo.8929a5e0', 'BrisanetLogo.a9defea0', 'saobraz.a69370dc',
  'CadersilLogo.e3cd5428', 'OrthoPauher.a62ef591', 'CasaComunicacao.57817787',
  'SEREducacional.aa26e07c', 'CondorLogo.ec7fa91f', 'ShoppingBahia.71386bdf',
  'DotPromo.b426d106', 'Tacaruna.ad29a4ed', 'EstaloLogo.b046db9c',
  'SpatenLogo.45642247', 'Even.93a99689', 'SicrediLogo_original.3e8d755b',
  'maizena.79b2ad13', 'Gaau.aea7b92a', 'matuta.0714765b', 'Gamboa_Branco.a84b0ad0',
];

function BrandMarquee() {
  const base = 'https://dilis.com.br/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F';
  const items = [...BRAND_LOGOS, ...BRAND_LOGOS];
  return (
    <div style={{ overflow: 'hidden', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', padding: '28px 0' }}>
      <div style={{
        display: 'flex', gap: 56, alignItems: 'center',
        width: 'max-content',
        animation: 'fb-marquee 50s linear infinite',
      }}>
        {items.map((slug, i) => (
          <img
            key={i}
            src={`${base}${slug}.png&w=256&q=100`}
            alt=""
            draggable={false}
            style={{ height: 28, width: 'auto', objectFit: 'contain', filter: 'grayscale(1) brightness(0.6)', opacity: 0.7, flexShrink: 0, userSelect: 'none' }}
          />
        ))}
      </div>
    </div>
  );
}

function SocialProof() {
  return (
    <Section id="quem" padY="clamp(40px,6vw,80px) clamp(20px,5vw,72px)" style={{ borderTop: '1px solid var(--border)', paddingLeft: 0, paddingRight: 0 }}>
      <div style={{ padding: '0 clamp(20px,5vw,72px)' }}>
        <Reveal as="h2" style={{ fontSize: 'clamp(1.6rem, 3vw, 2.3rem)', textAlign: 'center' }}>Quem está por trás.</Reveal>
        <Reveal delay={70} as="p" style={{ color: 'var(--text-muted)', fontSize: 'clamp(1rem,1.6vw,1.15rem)', marginTop: 14, textAlign: 'center', maxWidth: 620, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
          Desenvolvido pela <a href="https://dilis.com.br/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text)', fontWeight: 600, textDecoration: 'none', borderBottom: '1px solid var(--border-strong)', transition: 'border-color var(--dur) var(--ease), color var(--dur) var(--ease)' }} onMouseEnter={e => { e.currentTarget.style.color = 'var(--accent)'; e.currentTarget.style.borderColor = 'var(--accent)'; }} onMouseLeave={e => { e.currentTarget.style.color = 'var(--text)'; e.currentTarget.style.borderColor = 'var(--border-strong)'; }}>Dilis</a>. A mesma estrutura que atende grandes marcas.
        </Reveal>
        <Reveal delay={200} style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
          <CTAButton src="quem">Quero fazer parte</CTAButton>
        </Reveal>
      </div>
      <Reveal delay={140} style={{ marginTop: 48 }}>
        <BrandMarquee />
      </Reveal>
    </Section>
  );
}

/* ====================== FOOTER ====================== */
function Footer() {
  const { Logo } = window.FeedbackORGDesignSystem_591435;
  return (
    <footer style={{ borderTop: '1px solid var(--border)', padding: 'clamp(36px,5vw,56px) clamp(20px,5vw,72px)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Logo variant="horizontal-white-green" height={28} basePath="." />
          <a href="https://dilis.com.br/" target="_blank" rel="noopener noreferrer" className="text-link" style={{ fontSize: 12.5 }}>Powered by Dilis</a>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'clamp(18px,3vw,32px)', alignItems: 'center' }}>
          <CTAButton src="footer" size="sm" variant="primary">Falar com especialista</CTAButton>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Differential, CTAButton, NR01, Modules, Instagram, FinalCTA, SocialProof, Footer });