// sections-2.jsx — Materials, Courses, Articles, Differentiators, Newsletter, Footer

// ─────────────────────────────────────────────────────────────────────────
// 6. Materials — lead magnet
// ─────────────────────────────────────────────────────────────────────────
const Materials = () => {
  const [email, setEmail] = React.useState("");
  const [picked, setPicked] = React.useState(0);

  const materials = [
    { kind: "Checklist", title: "Uso responsável da IA na advocacia", pages: "8 páginas" },
    { kind: "Guia", title: "Prompts para advogados — 60 fórmulas", pages: "32 páginas" },
    { kind: "Modelo", title: "Fluxo de trabalho jurídico com IA", pages: "Notion + PDF" },
    { kind: "Planilha", title: "Ferramentas úteis para escritórios", pages: "45 ferramentas" },
  ];

  return (
    <section className="section surface-dark" id="materiais" style={{ position: "relative", overflow: "hidden" }}>
      {/* ornamental accent */}
      <div aria-hidden style={{
        position: "absolute", top: -160, right: -120, width: 520, height: 520, borderRadius: "50%",
        background: "radial-gradient(circle, color-mix(in oklab, var(--accent) 20%, transparent), transparent 65%)",
        filter: "blur(40px)",
      }}/>
      <div className="container" style={{ position: "relative" }}>
        <div className="materials-grid" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
          gap: "clamp(40px, 6vw, 80px)",
          alignItems: "flex-start",
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 18, color: "var(--accent)" }}>Materiais gratuitos</Eyebrow>
            <h2 className="h-display" style={{ fontSize: "clamp(32px, 4.5vw, 56px)", margin: 0 }}>
              Conteúdo aplicável. <em style={{ color: "var(--accent)" }}>De graça.</em>
            </h2>
            <p className="lede" style={{ marginTop: 22, color: "#A3ACBF" }}>
              Baixe checklists, guias e modelos prontos para usar amanhã no seu escritório. Você recebe o material no e-mail e entra na lista para os próximos lançamentos.
            </p>
            {/* Form */}
            <form onSubmit={(e) => e.preventDefault()} style={{ marginTop: 32 }}>
              <div style={{
                display: "flex", gap: 8,
                background: "rgba(255,255,255,0.06)",
                border: "1px solid rgba(255,255,255,0.10)",
                borderRadius: 999,
                padding: 6,
                maxWidth: 480,
              }}>
                <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",
                    color: "white",
                    fontSize: 15,
                    fontFamily: "inherit",
                  }}
                />
                <Button variant="accent" iconRight="arrow-right">Baixar material gratuito</Button>
              </div>
              <p style={{ marginTop: 14, fontSize: 12.5, color: "#6B7387" }}>
                Sem spam. Você pode cancelar a qualquer momento.
              </p>
            </form>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {materials.map((m, i) => (
              <button
                key={i}
                onClick={() => setPicked(i)}
                style={{
                  textAlign: "left",
                  background: picked === i ? "rgba(255,255,255,0.06)" : "transparent",
                  border: "1px solid " + (picked === i ? "rgba(6,182,212,0.40)" : "rgba(255,255,255,0.08)"),
                  borderRadius: 14,
                  padding: 18,
                  display: "flex", gap: 16, alignItems: "center",
                  cursor: "pointer",
                  transition: "all .2s ease",
                  color: "inherit",
                }}>
                <div style={{
                  width: 22, height: 22, borderRadius: "50%",
                  border: "1.5px solid " + (picked === i ? "var(--accent)" : "rgba(255,255,255,0.20)"),
                  background: picked === i ? "var(--accent)" : "transparent",
                  display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-950)",
                  flexShrink: 0,
                }}>
                  {picked === i && <Icon name="check" size={13} stroke={2.5}/>}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--accent)", marginBottom: 4 }}>{m.kind}</div>
                  <div style={{ fontSize: 15.5, fontWeight: 540, lineHeight: 1.3 }}>{m.title}</div>
                  <div style={{ fontSize: 12.5, color: "#6B7387", marginTop: 4 }}>{m.pages}</div>
                </div>
                <Icon name="arrow-right" size={16} style={{ color: picked === i ? "var(--accent)" : "#6B7387" }}/>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// 7. Courses — vitrine
// ─────────────────────────────────────────────────────────────────────────
const Courses = () => {
  const courses = [
    { title: "IA para Advogados na Prática", description: "O programa completo. Da escolha das ferramentas à implementação no escritório.", status: "disponivel", statusLabel: "Disponível", modules: 8, hours: "12h30" },
    { title: "Prompts Jurídicos Avançados", description: "Construa sua biblioteca de prompts. Técnicas, padrões e revisão contínua.", status: "lista", statusLabel: "Lista de espera", modules: 6, hours: "8h" },
    { title: "Automação de Escritórios com IA", description: "Fluxos de atendimento, gestão e produtividade que liberam horas por semana.", status: "in-breve", statusLabel: "Em breve", modules: 7, hours: "10h" },
    { title: "IA para Professores de Direito", description: "Pedagogia, materiais didáticos e avaliações com apoio de inteligência artificial.", status: "in-breve", statusLabel: "Em breve", modules: 5, hours: "7h" },
  ];

  return (
    <section className="section" id="cursos">
      <div className="container">
        <SectionHeader
          eyebrow="Cursos"
          title="Programas estruturados,"
          titleAccent="quando você quiser ir além."
          lede="Cursos pagos, focados em aplicação, com aulas gravadas, materiais e comunidade. Entre na lista para condições de pré-lançamento."
          cta={<Button variant="ghost" iconRight="arrow-right">Ver todos os cursos</Button>}
        />
        <div className="course-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
          gap: 18,
        }}>
          {courses.map((c, i) => <CourseCard key={i} {...c}/>)}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// 8. Articles (editorial)
// ─────────────────────────────────────────────────────────────────────────
const Articles = () => {
  const articles = [
    { category: "Análise", title: "Quando a IA acerta na pesquisa jurisprudencial — e quando ainda erra", excerpt: "Um teste prático com seis ferramentas em casos do STJ. Onde economiza tempo de verdade, onde exige o seu olho.", date: "12 mai", readTime: "8 min" },
    { category: "Prática", title: "Modelo de fluxo: triagem de clientes com IA + advogado no comando", excerpt: "Como combinar formulário, classificação automática e revisão humana sem perder qualidade no primeiro contato.", date: "06 mai", readTime: "6 min" },
    { category: "Ética", title: "O que o novo Provimento da OAB significa para o uso de IA na prática", excerpt: "Leitura crítica do texto, riscos de descumprimento e como adaptar seu fluxo de trabalho desde já.", date: "28 abr", readTime: "11 min" },
  ];

  return (
    <section className="section surface-sunken" id="artigos">
      <div className="container">
        <SectionHeader
          eyebrow="Editorial"
          title="Artigos e guias"
          titleAccent="para ir mais fundo."
          lede="Conteúdo escrito, com revisão, exemplos práticos e referências. Para quando 12 minutos de vídeo não bastam."
          cta={<Button variant="ghost" iconRight="arrow-right">Todos os artigos</Button>}
        />
        <div className="article-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 20,
        }}>
          {articles.map((a, i) => <ArticleCard key={i} {...a}/>)}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// 9. Differentiators
// ─────────────────────────────────────────────────────────────────────────
const Differentiators = () => {
  const items = [
    { icon: "workflow", title: "Conteúdo prático", description: "Aulas com aplicação direta — testadas em escritório, não só em laboratório." },
    { icon: "scale", title: "Visão jurídica real", description: "Quem ensina advoga. Os exemplos vêm de casos verdadeiros, não de hipóteses genéricas." },
    { icon: "book", title: "Linguagem acessível", description: "Sem jargão de tecnologia. Conceitos complexos explicados com clareza profissional." },
    { icon: "shield", title: "Aplicação ética", description: "Cada técnica é discutida à luz do CED-OAB, LGPD e responsabilidade profissional." },
    { icon: "doc", title: "Materiais complementares", description: "Checklists, prompts prontos e modelos editáveis acompanham cada vídeo importante." },
    { icon: "bolt", title: "Atualização constante", description: "O cenário muda toda semana. Conteúdo revisado mensalmente para se manter útil." },
  ];

  return (
    <section className="section" id="diferenciais">
      <div className="container">
        <SectionHeader
          eyebrow="Por que aqui"
          title="Diferenciais"
          titleAccent="que mudam a sua rotina."
          align="center"
        />
        <div className="diff-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: "32px 40px",
          marginTop: 32,
        }}>
          {items.map((b, i) => <BenefitTile key={i} {...b}/>)}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// 10. Newsletter
// ─────────────────────────────────────────────────────────────────────────
const Newsletter = () => {
  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section className="section surface-dark" id="newsletter" style={{ position: "relative", overflow: "hidden" }}>
      {/* type ornament */}
      <div aria-hidden style={{
        position: "absolute",
        right: "-3vw", bottom: "-8vw",
        fontFamily: "var(--font-display)",
        fontStyle: "italic",
        fontSize: "clamp(180px, 28vw, 380px)",
        lineHeight: 1,
        color: "rgba(255,255,255,0.025)",
        pointerEvents: "none",
        userSelect: "none",
      }}>ai.</div>
      <div className="container" style={{ position: "relative" }}>
        <div className="newsletter-grid" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)",
          gap: "clamp(40px, 6vw, 80px)",
          alignItems: "center",
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 18, color: "var(--accent)" }}>Newsletter semanal</Eyebrow>
            <h2 className="h-display" style={{ fontSize: "clamp(36px, 5vw, 64px)", margin: 0 }}>
              Receba ideias, prompts, ferramentas e estratégias para aplicar IA na <em style={{ color: "var(--accent)" }}>advocacia.</em>
            </h2>
            <p className="lede" style={{ marginTop: 22, color: "#A3ACBF" }}>
              Um e-mail por semana. Curto, prático, sem promessas mágicas. Cancele a qualquer momento.
            </p>
          </div>
          <div>
            <form onSubmit={(e) => { e.preventDefault(); if (email) setSubmitted(true); }}>
              <div style={{
                background: "rgba(255,255,255,0.04)",
                border: "1px solid rgba(255,255,255,0.10)",
                borderRadius: 18,
                padding: 24,
              }}>
                <label style={{
                  display: "block",
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  textTransform: "uppercase", letterSpacing: "0.12em",
                  color: "var(--accent)",
                  marginBottom: 10,
                }}>Seu e-mail profissional</label>
                <input
                  type="email"
                  required
                  placeholder="nome@escritorio.com.br"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  style={{
                    width: "100%", background: "transparent", border: 0,
                    outline: 0, padding: "8px 0",
                    color: "white",
                    fontSize: 18,
                    fontFamily: "inherit",
                    borderBottom: "1px solid rgba(255,255,255,0.20)",
                  }}
                />
                <Button variant="accent" size="lg" iconRight="arrow-right"
                  style={{ marginTop: 22, width: "100%" }}
                  onClick={(e) => { e.preventDefault(); if (email) setSubmitted(true); }}>
                  {submitted ? "Inscrição confirmada" : "Quero receber"}
                </Button>
                <div style={{ display: "flex", gap: 18, marginTop: 20, fontSize: 12, color: "#6B7387", flexWrap: "wrap" }}>
                  <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><Icon name="check" size={14} stroke={2.5} style={{ color: "var(--accent)" }}/>1× por semana</span>
                  <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><Icon name="check" size={14} stroke={2.5} style={{ color: "var(--accent)" }}/>Sem spam</span>
                  <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><Icon name="check" size={14} stroke={2.5} style={{ color: "var(--accent)" }}/>Cancele em 1 clique</span>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// 11. Footer
// ─────────────────────────────────────────────────────────────────────────
const Footer = () => (
  <footer style={{ background: "var(--ink-950)", color: "#A3ACBF", padding: "clamp(60px, 7vw, 96px) 0 40px", position: "relative", overflow: "hidden" }}>
    <div className="container">
      <div className="footer-grid" style={{
        display: "grid",
        gridTemplateColumns: "1.4fr repeat(3, 1fr)",
        gap: "40px 32px",
      }}>
        <div>
          <Logo size={22}/>
          <p style={{ marginTop: 18, maxWidth: 320, fontSize: 14, lineHeight: 1.6, color: "#6B7387" }}>
            Hub de IA aplicada à advocacia do Dr. Philipe Cardoso — advogado, Prof. IBMEC e fundador do Zoom Digital.
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
            {[
              { name: "youtube", href: "https://www.youtube.com/@cadvph" },
              { name: "linkedin", href: "https://br.linkedin.com/in/cardosoadvogado" },
            ].map(({ name: n, href }) => (
              <a key={n} href={href} target="_blank" rel="noopener noreferrer" style={{
                width: 40, height: 40, borderRadius: 10,
                border: "1px solid rgba(255,255,255,0.10)",
                display: "flex", alignItems: "center", justifyContent: "center",
                color: "#A3ACBF",
                transition: "color .15s, border-color .15s",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; e.currentTarget.style.borderColor = "rgba(6,182,212,0.30)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = "#A3ACBF"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.10)"; }}>
                <Icon name={n} size={18}/>
              </a>
            ))}
          </div>
        </div>
        <FooterCol title="Conteúdo" links={[
          { label: "Conteúdos", href: "#/conteudos" },
          { label: "Cursos", href: "#/cursos" },
          { label: "Materiais Gratuitos", href: "#/materiais" },
          { label: "Ferramentas", href: "#/ferramentas" },
        ]}/>
        <FooterCol title="Plataforma" links={[
          { label: "Sobre", href: "#/sobre" },
          { label: "Contato", href: "#/contato" },
        ]}/>
        <FooterCol title="Institucional" links={[
          { label: "Política de Privacidade", href: "#/privacidade" },
          { label: "Termos de Uso", href: "#/termos" },
        ]}/>
      </div>
      {/* Educational disclaimer */}
      <div style={{
        marginTop: 40, padding: "20px 24px",
        background: "rgba(255,255,255,0.03)",
        border: "1px solid rgba(255,255,255,0.06)",
        borderRadius: 12,
        fontSize: 12.5, lineHeight: 1.6, color: "#6B7387",
      }}>
        <strong style={{ color: "#A3ACBF" }}>Aviso importante:</strong> Todo o conteúdo deste site possui finalidade exclusivamente educacional e informativa. As orientações, materiais e exemplos apresentados não substituem a análise jurídica individualizada realizada por advogado habilitado. A inteligência artificial é uma ferramenta de apoio — a responsabilidade técnica e ética permanece sempre com o profissional.
      </div>
      <div style={{
        marginTop: 32, paddingTop: 32,
        borderTop: "1px solid rgba(255,255,255,0.08)",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
        fontSize: 12.5, color: "#6B7387",
      }}>
        <div>© 2026 Advogado AI · Todos os direitos reservados</div>
        <div style={{ display: "flex", gap: 18 }}>
          <span style={{ fontFamily: "var(--font-mono)" }}>v1.0 · BR</span>
        </div>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, links }) => (
  <div>
    <div style={{
      fontFamily: "var(--font-mono)", fontSize: 10.5,
      letterSpacing: "0.12em", textTransform: "uppercase",
      color: "#6B7387", marginBottom: 18,
    }}>{title}</div>
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
      {links.map(l => (
        <li key={l.label}>
          <a href={l.href} onClick={(e) => { e.preventDefault(); window.location.hash = l.href.replace('#',''); window.scrollTo({ top: 0 }); }} style={{
            fontSize: 14, color: "#C7CDD9",
            transition: "color .15s",
          }} onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
             onMouseLeave={(e) => e.currentTarget.style.color = "#C7CDD9"}>
            {l.label}
          </a>
        </li>
      ))}
    </ul>
  </div>
);

Object.assign(window, { Materials, Courses, Articles, Differentiators, Newsletter, Footer });
