// pages.jsx — Internal pages for Advogado AI

// ── Sobre ──────────────────────────────────────────────────────────────
const SobrePage = () => (
  <>
    <PageHero eyebrow="Sobre o projeto" title="IA para advogados," titleAccent="sem complicação."
      lede="O Advogado AI é o hub de conteúdo, aulas e materiais do Dr. Philipe Cardoso sobre inteligência artificial aplicada à advocacia — criado por quem une 15+ anos de prática jurídica, background em TI e docência no IBMEC." />
    <section className="section">
      <div className="container">
        <div className="about-grid" style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"clamp(40px,6vw,80px)", alignItems:"center" }}>
          <div>
            <Eyebrow style={{marginBottom:18}}>Quem está por trás</Eyebrow>
            <h2 className="h-display" style={{fontSize:"clamp(28px,3.5vw,44px)",margin:0}}>Dr. Philipe Cardoso — advogado, professor e <em>entusiasta de tecnologia</em> desde sempre.</h2>
            <p className="lede" style={{marginTop:20}}>Sócio fundador da Cardoso Advogados Associados (RJ), com mais de 15 anos de atuação em Direito Civil, Direito Digital e LGPD. Professor de LLM no IBMEC, ex-técnico de informática, fundador do blog Zoom Digital (20 anos no ar) e apresentador do Podcast Zoom Cast. Aparições na mídia incluem SBT Brasil e Balanço Geral. A combinação de prática jurídica real com profundo background tecnológico é o diferencial que orienta cada conteúdo publicado aqui.</p>
          </div>
          <div style={{display:"flex",flexDirection:"column",gap:18}}>
            {[
              {icon:"scale",t:"15+ anos de advocacia",d:"Atuação real em Direito Civil, Direito Digital e LGPD. O que se ensina aqui foi testado em casos verdadeiros."},
              {icon:"book",t:"Professor no IBMEC",d:"Docência no LLM de Direito Digital. A visão acadêmica rigorosa permeia cada análise publicada."},
              {icon:"cpu",t:"Background em TI",d:"Ex-técnico de informática e fundador do Zoom Digital (20 anos). Traduz tecnologia sem jargão."},
              {icon:"shield",t:"Ética e responsabilidade",d:"Todo conteúdo respeita o CED-OAB, a LGPD e o sigilo profissional — sem atalhos."}
            ].map((x,i)=>(
              <div key={i} style={{display:"flex",gap:14,alignItems:"flex-start"}}>
                <div style={{width:40,height:40,borderRadius:10,background:"var(--accent-soft)",color:"var(--brand-800)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}><Icon name={x.icon} size={20}/></div>
                <div><div style={{fontSize:15.5,fontWeight:560}}>{x.t}</div><div style={{fontSize:14,color:"var(--fg-muted)",marginTop:4}}>{x.d}</div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
    <section className="section-tight surface-sunken">
      <div className="container" style={{textAlign:"center",maxWidth:680,margin:"0 auto",padding:"0 var(--gutter)"}}>
        <Eyebrow style={{marginBottom:18}}>Público-alvo</Eyebrow>
        <h2 className="h-display" style={{fontSize:"clamp(28px,3.5vw,40px)",margin:0}}>Para quem é o <em>Advogado AI?</em></h2>
        <p className="lede" style={{marginTop:18,marginLeft:"auto",marginRight:"auto"}}>Advogados autônomos, escritórios de advocacia, professores e estudantes de Direito que querem usar IA com segurança, produtividade e responsabilidade profissional. Não é necessário ter conhecimento técnico prévio — o caminho do Zoom Digital para o IBMEC mostra que todo advogado pode dominar tecnologia.</p>
      </div>
    </section>
  </>
);

// ── Cursos ─────────────────────────────────────────────────────────────
const CursosPage = () => {
  const courses = [
    {title:"Introdução à IA para Advogados",description:"Entenda os conceitos, escolha as ferramentas e dê o primeiro passo seguro.",status:"disponivel",statusLabel:"Disponível",modules:8,hours:"12h30"},
    {title:"Prompts Jurídicos na Prática",description:"Construa sua biblioteca de prompts testados em casos reais.",status:"disponivel",statusLabel:"Disponível",modules:12,hours:"10h"},
    {title:"IA para Petições e Contratos",description:"Acelere a produção de peças jurídicas sem perder técnica e responsabilidade.",status:"lista",statusLabel:"Lista de espera",modules:10,hours:"14h"},
    {title:"Automação de Escritório",description:"Fluxos de atendimento, gestão e produtividade que liberam horas por semana.",status:"in-breve",statusLabel:"Em breve",modules:9,hours:"10h"},
    {title:"Ética, Sigilo e Limites no Uso de IA",description:"CED-OAB, LGPD, responsabilidade profissional e auditoria de entregas.",status:"in-breve",statusLabel:"Em breve",modules:7,hours:"8h"},
    {title:"Marketing Jurídico com IA",description:"Crie conteúdo, posicione seu escritório e atraia clientes com inteligência.",status:"in-breve",statusLabel:"Em breve",modules:6,hours:"7h"},
  ];
  return (
    <>
      <PageHero eyebrow="Cursos e trilhas" title="Programas estruturados," titleAccent="quando você quiser ir além."
        lede="Cursos focados em aplicação prática, com aulas gravadas, materiais complementares e comunidade. Entre na lista para condições de pré-lançamento." />
      <section className="page-content">
        <div className="container">
          <div className="course-grid" style={{display:"grid",gridTemplateColumns:"repeat(3,minmax(0,1fr))",gap:20}}>
            {courses.map((c,i)=><CourseCard key={i} {...c}/>)}
          </div>
        </div>
      </section>
    </>
  );
};

// ── Conteúdos ──────────────────────────────────────────────────────────
const ConteudosPage = () => {
  const [filter,setFilter]=React.useState("Tudo");
  const filters=["Tudo","Produtividade","Petições","Contratos","Atendimento","Marketing Jurídico","Ética","Ferramentas"];
  const items=[
    {type:"Vídeo",cat:"Petições",title:"Como estruturar uma petição inicial usando IA",desc:"Do esqueleto à fundamentação, passo a passo.",date:"12 mai",time:"18 min"},
    {type:"Artigo",cat:"Ética",title:"O que o novo Provimento da OAB significa para o uso de IA",desc:"Leitura crítica do texto e como adaptar seu fluxo de trabalho.",date:"06 mai",time:"11 min"},
    {type:"Vídeo",cat:"Produtividade",title:"Os 12 prompts que uso toda semana no meu escritório",desc:"Prompts testados para rotina jurídica real.",date:"28 abr",time:"14 min"},
    {type:"Aula",cat:"Contratos",title:"Análise de cláusulas contratuais com IA",desc:"Identifique riscos, extraia pontos de atenção e sugira redações.",date:"20 abr",time:"22 min"},
    {type:"Artigo",cat:"Atendimento",title:"Triagem de clientes com IA + advogado no comando",desc:"Como combinar formulário, classificação e revisão humana.",date:"15 abr",time:"6 min"},
    {type:"Vídeo",cat:"Marketing Jurídico",title:"Posicionamento digital para advogados com IA",desc:"Crie conteúdo, defina nicho e construa autoridade online.",date:"10 abr",time:"16 min"},
    {type:"Aula",cat:"Ferramentas",title:"Comparativo: 6 ferramentas de IA para advogados",desc:"Teste prático com prós, contras e quando usar cada uma.",date:"05 abr",time:"20 min"},
    {type:"Artigo",cat:"Produtividade",title:"Resumir jurisprudência em segundos: técnica e cuidados",desc:"Onde economiza tempo e onde exige o seu olho.",date:"01 abr",time:"9 min"},
  ];
  const filtered=filter==="Tudo"?items:items.filter(i=>i.cat===filter);
  return (
    <>
      <PageHero eyebrow="Hub de conteúdo" title="Vídeos, artigos e aulas" titleAccent="para aplicar agora."
        lede="Conteúdo curado por categoria, com foco em aplicação prática no dia a dia do advogado." />
      <section className="page-content">
        <div className="container">
          <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:32}}>
            {filters.map(f=>(
              <button key={f} onClick={()=>setFilter(f)} className="chip" style={{height:34,padding:"0 14px",fontSize:13.5,background:filter===f?"var(--ink-950)":"var(--bg-elev)",color:filter===f?"var(--white)":"var(--fg-muted)",borderColor:filter===f?"var(--ink-950)":"var(--border)",cursor:"pointer"}}>{f}</button>
            ))}
          </div>
          <div className="content-hub-grid" style={{display:"grid",gridTemplateColumns:"repeat(3,minmax(0,1fr))",gap:20}}>
            {filtered.map((item,i)=>(
              <article key={i} className="card card-pad-lg" style={{display:"flex",flexDirection:"column",gap:14}}>
                <div style={{display:"flex",alignItems:"center",gap:10}}>
                  <span className="chip chip-accent">{item.cat}</span>
                  <span className="chip">{item.type}</span>
                  <span style={{fontSize:12,color:"var(--fg-subtle)",marginLeft:"auto"}}>{item.date}</span>
                </div>
                <h3 style={{margin:0,fontSize:19,fontWeight:560,letterSpacing:"-0.01em",lineHeight:1.25,textWrap:"balance"}}>{item.title}</h3>
                <p style={{margin:0,color:"var(--fg-muted)",fontSize:14.5,lineHeight:1.55}}>{item.desc}</p>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:"auto",paddingTop:14,borderTop:"1px solid var(--border)"}}>
                  <span style={{fontSize:12.5,color:"var(--fg-subtle)"}}>{item.time} de {item.type==="Artigo"?"leitura":"conteúdo"}</span>
                  <button className="btn-link" style={{fontSize:13.5}}>{item.type==="Vídeo"?"Assistir":item.type==="Aula"?"Acessar":"Ler"}</button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

// ── Materiais Gratuitos ────────────────────────────────────────────────
const MateriaisPage = () => {
  const [email,setEmail]=React.useState("");
  const materials=[
    {kind:"Checklist",title:"Uso seguro da IA na advocacia",pages:"8 páginas",icon:"shield"},
    {kind:"Modelo",title:"Prompt para análise de processo",pages:"4 páginas",icon:"search"},
    {kind:"Modelo",title:"Prompt para criação de petição inicial",pages:"6 páginas",icon:"doc"},
    {kind:"Modelo",title:"Prompt para atendimento ao cliente",pages:"4 páginas",icon:"chat"},
    {kind:"Guia",title:"Guia rápido de IA para advogados",pages:"24 páginas",icon:"compass"},
    {kind:"Planilha",title:"60 prompts jurídicos prontos para usar",pages:"32 páginas",icon:"spark"},
  ];
  return (
    <>
      <PageHero dark eyebrow="Materiais gratuitos" title="Conteúdo aplicável." titleAccent="De graça."
        lede="Baixe checklists, guias e modelos prontos para usar amanhã no seu escritório. Cadastre seu e-mail e receba o material na hora." />
      <section className="page-content">
        <div className="container">
          <div style={{maxWidth:480,marginBottom:48}}>
            <form onSubmit={e=>e.preventDefault()} style={{display:"flex",gap:8,background:"var(--bg-elev)",border:"1px solid var(--border)",borderRadius:999,padding:6}}>
              <input type="email" placeholder="seu@email.com.br" value={email} onChange={e=>setEmail(e.target.value)} style={{flex:1,background:"transparent",border:0,outline:0,padding:"0 16px",fontSize:15,fontFamily:"inherit"}}/>
              <Button variant="accent" iconRight="arrow-right">Quero receber</Button>
            </form>
            <p style={{marginTop:12,fontSize:12.5,color:"var(--fg-subtle)"}}>Sem spam. Cancele a qualquer momento.</p>
          </div>
          <div className="materials-page-grid" style={{display:"grid",gridTemplateColumns:"repeat(3,minmax(0,1fr))",gap:20}}>
            {materials.map((m,i)=>(
              <article key={i} className="card card-pad-lg" style={{display:"flex",flexDirection:"column",gap:14}}>
                <div style={{width:48,height:48,borderRadius:12,background:"var(--accent-soft)",color:"var(--brand-800)",display:"flex",alignItems:"center",justifyContent:"center"}}><Icon name={m.icon} size={24}/></div>
                <div style={{fontFamily:"var(--font-mono)",fontSize:10.5,textTransform:"uppercase",letterSpacing:"0.12em",color:"var(--accent)"}}>{m.kind}</div>
                <h3 style={{margin:0,fontSize:18,fontWeight:560,letterSpacing:"-0.01em",lineHeight:1.3}}>{m.title}</h3>
                <div style={{fontSize:12.5,color:"var(--fg-subtle)"}}>{m.pages} · gratuito</div>
                <div style={{marginTop:"auto",paddingTop:14,borderTop:"1px solid var(--border)"}}>
                  <Button variant="accent" size="sm" icon="download">Baixar material</Button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

// ── Ferramentas ────────────────────────────────────────────────────────
const FerramentasPage = () => {
  const tools=[
    {icon:"cpu",title:"ChatGPT / GPT-4",description:"Geração de texto, análise de documentos, brainstorming jurídico e criação de prompts.",category:"IA Generativa",status:"disponivel",statusLabel:"Disponível"},
    {icon:"search",title:"Perplexity AI",description:"Pesquisa jurisprudencial com fontes citadas. Útil para pesquisa rápida com referências.",category:"Pesquisa",status:"disponivel",statusLabel:"Disponível"},
    {icon:"doc",title:"Claude (Anthropic)",description:"Análise de documentos longos, contratos e revisão de peças com contexto amplo.",category:"IA Generativa",status:"disponivel",statusLabel:"Disponível"},
    {icon:"workflow",title:"Zapier / Make",description:"Automação de fluxos: triagem de clientes, agendamentos, notificações e integrações.",category:"Automação",status:"disponivel",statusLabel:"Disponível"},
    {icon:"pen",title:"Gamma / Tome",description:"Criação de apresentações e materiais visuais para clientes e tribunais.",category:"Produtividade",status:"disponivel",statusLabel:"Disponível"},
    {icon:"globe",title:"Notion AI",description:"Organização de escritório, gestão de casos, base de conhecimento com IA integrada.",category:"Organização",status:"disponivel",statusLabel:"Disponível"},
    {icon:"shield",title:"Analisador de Contratos IA",description:"Ferramenta dedicada à análise de cláusulas, riscos e conformidade contratual.",category:"Jurídico",status:"in-breve",statusLabel:"Em breve"},
    {icon:"layers",title:"Gerador de Prompts Jurídicos",description:"Crie prompts otimizados para diferentes áreas e tipos de peças jurídicas.",category:"Jurídico",status:"in-breve",statusLabel:"Em breve"},
  ];
  return (
    <>
      <PageHero eyebrow="Ferramentas" title="Tecnologia a favor" titleAccent="da sua advocacia."
        lede="Ferramentas úteis para advogados que querem usar IA com produtividade. Seleção curada com explicação prática de cada uma." />
      <section className="page-content">
        <div className="container">
          <div className="tools-grid" style={{display:"grid",gridTemplateColumns:"repeat(3,minmax(0,1fr))",gap:20}}>
            {tools.map((t,i)=><ToolCardComp key={i} {...t}/>)}
          </div>
        </div>
      </section>
    </>
  );
};

// ── Contato ────────────────────────────────────────────────────────────
const ContatoPage = () => (
  <>
    <PageHero eyebrow="Contato" title="Fale com o" titleAccent="Advogado AI."
      lede="Dúvidas sobre cursos, parcerias, consultorias ou sugestões de conteúdo? Envie sua mensagem." />
    <section className="page-content">
      <div className="container">
        <div className="contact-grid" style={{display:"grid",gridTemplateColumns:"1.2fr 0.8fr",gap:"clamp(40px,6vw,80px)",alignItems:"flex-start"}}>
          <form onSubmit={e=>e.preventDefault()} style={{display:"flex",flexDirection:"column",gap:20}}>
            <div className="form-group"><label className="form-label">Nome completo</label><input className="form-input" placeholder="Seu nome"/></div>
            <div className="form-group"><label className="form-label">E-mail</label><input className="form-input" type="email" placeholder="seu@email.com.br"/></div>
            <div className="form-group"><label className="form-label">Assunto</label>
              <select className="form-select"><option>Dúvida sobre cursos</option><option>Parceria</option><option>Consultoria</option><option>Aulas e palestras</option><option>Sugestão de conteúdo</option><option>Outro</option></select>
            </div>
            <div className="form-group"><label className="form-label">Mensagem</label><textarea className="form-textarea" placeholder="Escreva sua mensagem..."></textarea></div>
            <Button variant="accent" size="lg" iconRight="arrow-right" style={{alignSelf:"flex-start"}}>Enviar mensagem</Button>
          </form>
          <div style={{display:"flex",flexDirection:"column",gap:24}}>
            <div className="card card-pad-lg" style={{display:"flex",flexDirection:"column",gap:16}}>
              <h3 style={{margin:0,fontSize:18,fontWeight:600}}>Outros canais</h3>
              {[{icon:"mail",t:"E-mail",d:"contato@cardosoadv.com.br"},{icon:"youtube",t:"YouTube",d:"youtube.com/@cadvph"},{icon:"globe",t:"Escritório",d:"cardosoadv.com.br"},{icon:"linkedin",t:"LinkedIn",d:"linkedin.com/in/cardosoadvogado"}].map((c,i)=>(
                <div key={i} style={{display:"flex",gap:12,alignItems:"center"}}>
                  <div style={{width:36,height:36,borderRadius:9,background:"var(--accent-soft)",color:"var(--brand-800)",display:"flex",alignItems:"center",justifyContent:"center"}}><Icon name={c.icon} size={18}/></div>
                  <div><div style={{fontSize:13,fontWeight:540}}>{c.t}</div><div style={{fontSize:13,color:"var(--fg-muted)"}}>{c.d}</div></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  </>
);

// ── Privacidade ────────────────────────────────────────────────────────
const PrivacidadePage = () => (
  <>
    <PageHero eyebrow="Institucional" title="Política de" titleAccent="Privacidade." lede="Última atualização: maio de 2026." />
    <section className="page-content"><div className="container" style={{maxWidth:800,margin:"0 auto",padding:"0 var(--gutter)"}}><div className="legal-content">
      <h2>1. Dados coletados</h2><p>Coletamos apenas os dados que você fornece voluntariamente: nome, e-mail e mensagens enviadas por formulários. Não coletamos dados sensíveis, financeiros ou de geolocalização.</p>
      <h2>2. Finalidade</h2><p>Seus dados são utilizados exclusivamente para: envio de newsletters, disponibilização de materiais gratuitos, resposta a contatos e melhoria da experiência na plataforma.</p>
      <h2>3. Compartilhamento</h2><p>Não vendemos, alugamos ou compartilhamos seus dados pessoais com terceiros para fins comerciais. Podemos utilizar ferramentas de e-mail marketing e analytics que processam dados em conformidade com a LGPD.</p>
      <h2>4. Cookies</h2><p>Utilizamos cookies essenciais para funcionamento do site e cookies analíticos para entender o comportamento de navegação. Você pode desativar cookies nas configurações do seu navegador.</p>
      <h2>5. Seus direitos (LGPD)</h2><p>Conforme a Lei Geral de Proteção de Dados, você pode solicitar: acesso, correção, exclusão, portabilidade e revogação do consentimento dos seus dados pessoais. Entre em contato pelo e-mail contato@advogadoai.com.br.</p>
      <h2>6. Segurança</h2><p>Adotamos medidas técnicas e organizacionais para proteger seus dados contra acessos não autorizados, perda ou destruição.</p>
      <h2>7. Contato do encarregado</h2><p>Para questões relacionadas à proteção de dados, entre em contato: <strong>contato@advogadoai.com.br</strong></p>
    </div></div></section>
  </>
);

// ── Termos ──────────────────────────────────────────────────────────────
const TermosPage = () => (
  <>
    <PageHero eyebrow="Institucional" title="Termos de" titleAccent="Uso." lede="Última atualização: maio de 2026." />
    <section className="page-content"><div className="container" style={{maxWidth:800,margin:"0 auto",padding:"0 var(--gutter)"}}><div className="legal-content">
      <h2>1. Aceitação</h2><p>Ao acessar e utilizar o site Advogado AI, você concorda com estes Termos de Uso. Se não concordar, não utilize a plataforma.</p>
      <h2>2. Natureza do conteúdo</h2><p>Todo o conteúdo disponibilizado possui <strong>finalidade exclusivamente educacional e informativa</strong>. Nenhum material, vídeo, curso ou ferramenta substitui a análise jurídica individualizada realizada por advogado habilitado.</p>
      <h2>3. Propriedade intelectual</h2><p>Todo o conteúdo do Advogado AI — incluindo textos, vídeos, materiais, logotipos e design — é protegido por direitos autorais. É proibida a reprodução sem autorização prévia.</p>
      <h2>4. Uso adequado</h2><p>Você se compromete a utilizar o conteúdo de forma ética e responsável, respeitando as normas do CED-OAB, a LGPD e o sigilo profissional.</p>
      <h2>5. Limitação de responsabilidade</h2><p>O Advogado AI não se responsabiliza por resultados obtidos a partir da aplicação das técnicas ensinadas. A responsabilidade técnica e ética permanece sempre com o profissional.</p>
      <h2>6. Modificações</h2><p>Reservamo-nos o direito de alterar estes termos a qualquer momento. As alterações entram em vigor na data de publicação.</p>
      <h2>7. Foro</h2><p>Fica eleito o foro da comarca de São Paulo/SP para dirimir quaisquer questões decorrentes destes Termos.</p>
    </div></div></section>
  </>
);

Object.assign(window, { SobrePage, CursosPage, ConteudosPage, MateriaisPage, FerramentasPage, ContatoPage, PrivacidadePage, TermosPage });