// LinkedClean — Landing sections part 2

// =============================================================================
// CATEGORIES — 5 cards canon do produto
// =============================================================================
function LCCategories() {
  const { LCB, IconPatrocinado, IconEmpresa, IconBait, IconPolitica, IconVideo } = window;
  const cats = [
    {
      key: 'patrocinado',
      title: 'Patrocinado',
      sub: 'Anúncios disfarçados de post orgânico.',
      Icon: IconPatrocinado,
    },
    {
      key: 'empresa',
      title: 'Página de empresa',
      sub: 'Posts publicados por contas de empresa, não por pessoas.',
      Icon: IconEmpresa,
    },
    {
      key: 'bait',
      title: 'Iscas de engajamento',
      sub: 'Posts otimizados pra comentário, não pra ler.',
      Icon: IconBait,
    },
    {
      key: 'politica',
      title: 'Política',
      sub: 'Posts que falam de política, eleições e polarização.',
      Icon: IconPolitica,
    },
    {
      key: 'video',
      title: 'Vídeo',
      sub: 'Vídeos verticais com legenda viral. Você sabe o tipo.',
      Icon: IconVideo,
    },
  ];

  return (
    <section id="categorias" style={{
      padding: '96px 56px',
      background: '#FFFFFF',
      borderTop: `1px solid ${LCB.ink10}`,
    }}>
      <div style={{ maxWidth: 1168, margin: '0 auto' }}>
        <window.LCSectionHeader
          eyebrow="O que é ocultado"
          title="Você no controle"
          sub={'Ligue ou desligue cada categoria. Sem refinar, sem treinar, sem "modelo aprendendo seu gosto". Só liga e desliga.'}
        />

        <div style={{
          marginTop: 64,
          display: 'grid',
          gridTemplateColumns: 'repeat(5, 1fr)',
          gap: 12,
        }}>
          {cats.map((c, i) => (
            <div key={i} style={{
              padding: 24,
              background: LCB.paper,
              border: `1px solid ${LCB.ink10}`,
              borderRadius: LCB.rLg,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: '#FFFFFF',
                border: `1px solid ${LCB.ink10}`,
                color: LCB.ink,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {c.Icon ? <c.Icon size={22} active={true} /> : null}
              </div>
              <div>
                <div style={{
                  fontSize: 15, fontWeight: 600, color: LCB.ink,
                  letterSpacing: '-0.015em', marginBottom: 6,
                }}>{c.title}</div>
                <div style={{
                  fontSize: 13, color: LCB.ink60, lineHeight: 1.5,
                  letterSpacing: '-0.005em',
                }}>{c.sub}</div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}
window.LCCategories = LCCategories;

// =============================================================================
// HOW IT WORKS — 3 passos
// =============================================================================
function LCHowItWorks() {
  const { LCB } = window;
  const steps = [
    {
      n: '01',
      title: 'Instala em 8 segundos',
      sub: 'Adiciona no Chrome. Sem login, sem conta, sem cartão.',
      visual: (
        <div style={{
          height: 200, background: LCB.paper,
          borderRadius: LCB.rMd, border: `1px solid ${LCB.ink10}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            background: '#FFFFFF', borderRadius: 14,
            padding: '14px 18px',
            boxShadow: LCB.shFloat,
            border: `1px solid ${LCB.ink10}`,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <window.LCBIcon size={36} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: LCB.ink, letterSpacing: '-0.005em' }}>
                LinkedClean adicionado
              </div>
              <div style={{ fontSize: 11, color: LCB.ink60, marginTop: 2 }}>
                Pronto. Pode fechar isso.
              </div>
            </div>
          </div>
        </div>
      ),
    },
    {
      n: '02',
      title: 'Define o que quer ocultar',
      sub: 'Cinco categorias no pop-up. Liga, desliga, ajusta quando quiser.',
      visual: (
        <div style={{
          height: 200, background: LCB.paper,
          borderRadius: LCB.rMd, border: `1px solid ${LCB.ink10}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 16,
        }}>
          <div style={{
            background: '#FFFFFF',
            border: `1px solid ${LCB.ink10}`, borderRadius: LCB.rMd,
            padding: '12px 14px', width: 240,
            boxShadow: LCB.shCard,
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div style={{
              fontFamily: LCB.fontMono, fontSize: 9, fontWeight: 600,
              color: LCB.ink40, letterSpacing: '0.12em',
              textTransform: 'uppercase', marginBottom: 2,
            }}>Categorias</div>
            {[
              { label: 'Patrocinado', on: true,  d: 'M20.5 12.5 12.5 20.5a1.5 1.5 0 0 1-2.1 0l-7-7a1 1 0 0 1-.3-.7V4.5A1.5 1.5 0 0 1 4.5 3h8.3a1 1 0 0 1 .7.3l7 7a1.5 1.5 0 0 1 0 2.2Z' },
              { label: 'Página de empresa', on: true,  d: 'M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16M15 21V11a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v10M3 21h18' },
              { label: 'Vídeo', on: false, d: 'M5 7h14v10H5zM10.5 9l4.5 3-4.5 3z' },
            ].map((row, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                  stroke={LCB.ink60} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
                  style={{ flexShrink: 0 }}>
                  <path d={row.d} />
                </svg>
                <div style={{ flex: 1, fontSize: 11, fontWeight: 500, color: LCB.ink, letterSpacing: '-0.005em' }}>{row.label}</div>
                <div style={{
                  width: 24, height: 14, borderRadius: 7,
                  background: row.on ? LCB.ink : LCB.ink20,
                  position: 'relative', flexShrink: 0,
                }}>
                  <div style={{
                    position: 'absolute', top: 2,
                    left: row.on ? 12 : 2,
                    width: 10, height: 10, borderRadius: '50%',
                    background: '#FFFFFF',
                  }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      ),
    },
    {
      n: '03',
      title: 'Navega no LinkedIn como sempre quis',
      sub: 'O feed fica limpo em silêncio. Sem dashboard, sem notificação, sem você ter que fazer mais nada.',
      visual: (
        <div style={{
          height: 200, background: LCB.paper,
          borderRadius: LCB.rMd, border: `1px solid ${LCB.ink10}`,
          padding: 20, display: 'flex', flexDirection: 'column', gap: 8,
        }}>
          {[
            { color: '#FB923C' },
            { color: '#10B981' },
            { color: '#A855F7' },
          ].map((p, i) => (
            <div key={i} style={{
              padding: 12, background: '#FFFFFF',
              border: `1px solid ${LCB.ink10}`, borderRadius: LCB.rSm,
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                background: p.color, flexShrink: 0,
              }} />
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{ height: 6, background: LCB.ink10, borderRadius: 3, width: '60%' }} />
                <div style={{ height: 5, background: LCB.ink05, borderRadius: 3, width: '90%' }} />
              </div>
            </div>
          ))}
        </div>
      ),
    },
  ];

  return (
    <section id="como-funciona" style={{
      padding: '96px 56px',
      background: LCB.paper,
      borderTop: `1px solid ${LCB.ink10}`,
    }}>
      <div style={{ maxWidth: 1168, margin: '0 auto' }}>
        <window.LCSectionHeader
          eyebrow="Como funciona"
          title="Três passos pra um feed limpo"
          sub="Funciona só dentro do LinkedIn. Em qualquer outro site, é como se não existisse."
          maxWidth={900}
        />

        <div style={{
          marginTop: 64,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              background: '#FFFFFF',
              border: `1px solid ${LCB.ink10}`,
              borderRadius: LCB.rLg,
              padding: 28,
              display: 'flex', flexDirection: 'column', gap: 24,
            }}>
              {s.visual}
              <div>
                <div style={{
                  fontFamily: LCB.fontMono, fontSize: 12, color: LCB.ink40,
                  letterSpacing: '0.02em', marginBottom: 10,
                }}>{s.n}</div>
                <div style={{
                  fontSize: 22, fontWeight: 700, color: LCB.ink,
                  letterSpacing: '-0.025em', marginBottom: 8, lineHeight: 1.15,
                }}>{s.title}</div>
                <div style={{
                  fontSize: 14, color: LCB.ink60, lineHeight: 1.5,
                  letterSpacing: '-0.005em',
                }}>{s.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.LCHowItWorks = LCHowItWorks;

// =============================================================================
// POPUP DEMO — mostra o popup como o usuário verá
// =============================================================================
function LCPopupDemo() {
  const { LCB, PopupV2Shell } = window;

  return (
    <section id="popup" style={{
      padding: '96px 56px',
      background: '#FFFFFF',
      borderTop: `1px solid ${LCB.ink10}`,
    }}>
      <div style={{
        maxWidth: 1168, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 380px',
        gap: 80, alignItems: 'center',
      }}>
        <div>
          <window.LCSectionHeader
            eyebrow="Painel"
            title="Um clique, tudo no pop-up"
            sub="Vê o que foi ocultado hoje. Liga ou desliga categoria. Pausa quando quiser. Tudo numa tela só."
            align="left" maxWidth={520}
          />
        </div>

        {/* Popup REAL — usa o componente canônico do produto */}
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PopupV2Shell density="comfortable" />
        </div>
      </div>
    </section>
  );
}
window.LCPopupDemo = LCPopupDemo;

// =============================================================================
// PRIVACY — bloco curto, manda pra página dedicada
// =============================================================================
function LCPrivacy() {
  const { LCB } = window;
  return (
    <section id="privacidade" style={{
      padding: '96px 56px',
      background: LCB.ink,
      color: '#FFFFFF',
    }}>
      <div style={{ maxWidth: 1168, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          <div style={{
            fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.5)',
            textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 16,
          }}>Privacidade</div>
          <h2 style={{
            fontSize: 56, fontWeight: 700, letterSpacing: '-0.035em',
            margin: 0, lineHeight: 1.02, color: '#FFFFFF',
          }}>
            Tudo roda no seu navegador
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.5, color: 'rgba(255,255,255,0.65)',
            margin: '20px auto 0', maxWidth: 580,
            letterSpacing: '-0.005em',
          }}>
            Sem servidor. Sem analytics. Sem dados saindo do navegador.
          </p>
        </div>

        <div style={{ marginTop: 40, textAlign: 'center' }}>
          <a href="/privacidade" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'rgba(255,255,255,0.08)',
            border: '1px solid rgba(255,255,255,0.12)',
            color: '#FFFFFF',
            padding: '12px 22px', borderRadius: 999,
            fontSize: 14, fontWeight: 500,
            letterSpacing: '-0.005em', textDecoration: 'none',
          }}>
            Ler a política completa
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
}
window.LCPrivacy = LCPrivacy;

// =============================================================================
// FAQ — accordion simples
// =============================================================================
function LCFaq() {
  const { LCB } = window;
  const [open, setOpen] = useState(0);
  const qs = [
    {
      q: 'É grátis?',
      a: 'É. Sem plano pago, sem trial, sem limite. Se um dia a gente cobrar, vai ser por algo novo — nunca pelo que já está aqui.',
    },
    {
      q: 'Funciona em qual navegador?',
      a: 'Chrome, Edge, Brave, Arc, Opera — qualquer um baseado em Chromium. Firefox e Safari na fila.',
    },
    {
      q: 'Vocês têm meus dados?',
      a: 'Não. Não tem servidor. Não tem login. Não tem analytics. Tudo roda no seu navegador e o código está no GitHub.',
    },
    {
      q: 'O LinkedIn pode banir minha conta por usar isso?',
      a: 'A extensão só esconde posts no seu navegador. Nada toca a API do LinkedIn, nada automatiza ação nenhuma. É um adblock. Mas a gente não é advogado.',
    },
    {
      q: 'O detector erra. Sempre.',
      a: 'Vai errar. Cada categoria liga e desliga separado no pop-up, cada post oculto tem "Ver post" pro caso de a gente passar do ponto. Se errar muito numa categoria específica, manda no feedback.',
    },
    {
      q: 'O que aparece no lugar do post?',
      a: 'Um cardzinho com a categoria e o motivo. “Patrocinado · Acme Tech”. “Iscas de engajamento · ‘comente AGREE’”. Clica em “Ver post” se quiser ver mesmo assim.',
    },
  ];
  return (
    <section id="faq" style={{
      padding: '96px 56px',
      background: LCB.paper,
      borderTop: `1px solid ${LCB.ink10}`,
    }}>
      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <window.LCSectionHeader
          eyebrow="Perguntas"
          title="Coisas que perguntam"
        />

        <div style={{
          marginTop: 56,
          background: '#FFFFFF',
          border: `1px solid ${LCB.ink10}`,
          borderRadius: LCB.rLg,
          overflow: 'hidden',
        }}>
          {qs.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderBottom: i < qs.length - 1 ? `1px solid ${LCB.ink10}` : 'none',
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', textAlign: 'left',
                    padding: '22px 28px',
                    background: 'transparent', border: 'none',
                    cursor: 'pointer',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    fontFamily: LCB.fontSans, fontSize: 17,
                    fontWeight: 600, color: LCB.ink,
                    letterSpacing: '-0.015em',
                  }}>
                  {item.q}
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%',
                    background: isOpen ? LCB.ink : LCB.ink05,
                    color: isOpen ? '#FFFFFF' : LCB.ink60,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 14, fontWeight: 600,
                    transition: 'all 150ms',
                    flexShrink: 0, marginLeft: 16,
                  }}>{isOpen ? '−' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '0 28px 24px',
                    fontSize: 15, color: LCB.ink60, lineHeight: 1.6,
                    letterSpacing: '-0.005em',
                    maxWidth: 640,
                  }}>{item.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.LCFaq = LCFaq;

// =============================================================================
// FINAL CTA
// =============================================================================
function LCFinalCta() {
  const { LCB, LCBIcon } = window;
  return (
    <section id="install" style={{
      padding: '96px 56px',
      background: '#FFFFFF',
      borderTop: `1px solid ${LCB.ink10}`,
      textAlign: 'center',
    }}>
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 36 }}>
        <LCBIcon size={88} />
      </div>
      <h2 style={{
        fontSize: 76, fontWeight: 700, letterSpacing: '-0.04em',
        margin: 0, color: LCB.ink, lineHeight: 1.02,
      }}>
        Limpe seu feed
      </h2>
      <p style={{
        fontSize: 19, color: LCB.ink60, lineHeight: 1.5,
        margin: '24px auto 40px', maxWidth: 480,
        letterSpacing: '-0.005em',
      }}>
        8 segundos pra instalar. Você pode desativar a qualquer hora.
      </p>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
        <a
          href="https://chromewebstore.google.com/detail/linkedclean/pmbdfbcmlbekpehpafloidglmkgejmon"
          target="_blank"
          rel="noopener noreferrer"
          style={{
          background: LCB.ink, color: '#FFFFFF',
          border: `1px solid ${LCB.ink}`, borderRadius: LCB.rPill,
          padding: '16px 28px',
          fontFamily: LCB.fontSans, fontSize: 16, fontWeight: 600,
          letterSpacing: '-0.005em', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 10,
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" fill="none" />
            <circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="1.5" fill="none" />
            <path d="M8 1v4M14 8h-4M8 15v-4M2 8h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          </svg>
          Adicionar ao Chrome — grátis
        </a>
      </div>
      <div style={{
        marginTop: 40,
        fontFamily: LCB.fontMono, fontSize: 12, color: LCB.ink40,
        letterSpacing: '0',
      }}>
        v{window.LC_VERSION} · Chrome 120+ · Edge · Brave · Arc
      </div>
    </section>
  );
}
window.LCFinalCta = LCFinalCta;