// sections-1.jsx — Header, Hero, Authority, Videos, Trails sections

// ─────────────────────────────────────────────────────────────────────────
// 1. Header
// ─────────────────────────────────────────────────────────────────────────
const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const nav = [
    { label: "Início", href: "#/" },
    { label: "Conteúdos", href: "#/conteudos" },
    { label: "Cursos", href: "#/cursos" },
    { label: "Materiais", href: "#/materiais" },
    { label: "Ferramentas", href: "#/ferramentas" },
    { label: "Sobre", href: "#/sobre" },
    { label: "Contato", href: "#/contato" },
  ];

  const navigate = (href) => {
    window.location.hash = href.replace('#','');
    setMobileOpen(false);
    window.scrollTo({ top: 0 });
  };

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 100,
      background: scrolled ? "rgba(246,247,250,0.85)" : "transparent",
      backdropFilter: scrolled ? "saturate(160%) blur(14px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(160%) blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent",
      transition: "background .25s ease, border-color .25s ease",
    }}>
      <div className="container" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 72, gap: 24,
      }}>
        <a href="#/" onClick={(e) => { e.preventDefault(); navigate('#/'); }} style={{ display: "flex" }}><Logo size={20}/></a>
        <nav className="desktop-nav" style={{
          display: "flex", alignItems: "center", gap: 28,
        }}>
          {nav.map((item, i) => (
            <a key={item.label} href={item.href} onClick={(e) => { e.preventDefault(); navigate(item.href); }} style={{
              fontSize: 14, color: i === 0 ? "var(--fg)" : "var(--fg-muted)",
              fontWeight: i === 0 ? 540 : 460,
              transition: "color .15s ease",
            }} onMouseEnter={(e) => e.currentTarget.style.color = "var(--fg)"}
               onMouseLeave={(e) => e.currentTarget.style.color = i === 0 ? "var(--fg)" : "var(--fg-muted)"}>
              {item.label}
            </a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Button variant="accent" iconRight="arrow-right" size="sm" onClick={() => navigate('#/cursos')}>Comece por aqui</Button>
          <button className="mobile-toggle" style={{
            display: "none", width: 40, height: 40, borderRadius: 10,
            border: "1px solid var(--border)", color: "var(--fg)",
          }} onClick={() => setMobileOpen(!mobileOpen)}>
            <Icon name={mobileOpen ? "x" : "menu"} size={20} style={{ margin: "auto" }}/>
          </button>
        </div>
      </div>
      {mobileOpen && (
        <div className="mobile-menu" style={{
          padding: "16px var(--gutter) 24px", borderTop: "1px solid var(--border)",
          background: "var(--bg-elev)",
        }}>
          <nav style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {nav.map((item) => (
              <a key={item.label} href={item.href} onClick={(e) => { e.preventDefault(); navigate(item.href); }} style={{ fontSize: 16 }}>{item.label}</a>
            ))}
          </nav>
        </div>
      )}
    </header>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// 2. Hero
// ─────────────────────────────────────────────────────────────────────────
const Hero = ({ dark }) => {
  return (
    <section className={`section hero ${dark ? "surface-dark" : ""}`} style={{
      position: "relative", overflow: "hidden",
      paddingTop: dark ? "clamp(60px, 8vw, 110px)" : "clamp(40px, 5vw, 80px)",
      paddingBottom: "clamp(60px, 7vw, 100px)",
    }}>
      {/* Background ornament */}
      <HeroBackdrop dark={dark}/>
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        {/* Top status row */}
        <div style={{
          display: "flex", alignItems: "center", gap: 12, marginBottom: 32,
          flexWrap: "wrap",
        }}>
          <div className="chip" style={{ height: 30, paddingLeft: 8 }}>
            <span className="live-dot" style={{ width: 6, height: 6, boxShadow: "0 0 0 3px rgba(6,182,212,0.18)" }}/>
            Novo vídeo · IA na petição inicial
          </div>
          <div style={{ fontSize: 12.5, color: "var(--fg-subtle)" }}>+12.000 advogados acompanham</div>
        </div>

        <div className="hero-grid" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
          gap: "clamp(40px, 6vw, 80px)",
          alignItems: "center",
        }}>
          {/* Left: copy */}
          <div>
            <h1 className="h-display" style={{
              fontSize: "clamp(34px, 4.4vw, 60px)",
              margin: 0,
              lineHeight: 1.05,
              textWrap: "balance",
            }}>
              Inteligência Artificial aplicada à <em>advocacia</em>, de forma prática, ética e estratégica.
            </h1>
            <p className="lede" style={{ marginTop: 28, fontSize: "clamp(16px, 1.4vw, 19px)", maxWidth: 580 }}>
              Aprenda a usar IA para produzir melhor, estudar melhor, atender melhor e transformar sua rotina jurídica — sem perder técnica, responsabilidade e visão profissional.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <Button variant="accent" size="lg" icon="play">Assistir vídeos gratuitos</Button>
              <Button variant="ghost" size="lg" iconRight="arrow-right">Receber materiais exclusivos</Button>
            </div>
            {/* Trust row */}
            <div style={{
              display: "flex", gap: "clamp(20px, 3vw, 36px)", marginTop: 48,
              paddingTop: 28, borderTop: "1px solid var(--border)",
              flexWrap: "wrap",
            }}>
              <Stat label="Vídeos publicados" value="80+"/>
              <Stat label="Inscritos no canal" value="42k"/>
              <Stat label="Materiais gratuitos" value="14"/>
              <Stat label="Trilhas práticas" value="6"/>
            </div>
          </div>

          {/* Right: workflow composition */}
          <div style={{ position: "relative" }}>
            <HeroComposition dark={dark}/>
          </div>
        </div>
      </div>
    </section>
  );
};

const Stat = ({ label, value }) => (
  <div>
    <div className="h-display" style={{ fontSize: 28, lineHeight: 1, margin: 0 }}>{value}</div>
    <div style={{ fontSize: 12, color: "var(--fg-subtle)", marginTop: 6, letterSpacing: 0.2 }}>{label}</div>
  </div>
);

// Decorative SVG grid behind hero
const HeroBackdrop = ({ dark }) => (
  <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none", zIndex: 1 }}>
    <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: dark ? 0.18 : 0.32 }}>
      <defs>
        <pattern id="hero-grid" width="56" height="56" patternUnits="userSpaceOnUse">
          <path d="M56 0 L0 0 0 56" fill="none" stroke={dark ? "rgba(255,255,255,0.15)" : "rgba(11,37,69,0.07)"} strokeWidth="1"/>
        </pattern>
        <radialGradient id="hero-fade" cx="50%" cy="0%" r="80%">
          <stop offset="0%" stopColor={dark ? "#0E1424" : "#F6F7FA"} stopOpacity="0"/>
          <stop offset="100%" stopColor={dark ? "#0E1424" : "#F6F7FA"} stopOpacity="1"/>
        </radialGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#hero-grid)"/>
      <rect width="100%" height="100%" fill="url(#hero-fade)"/>
    </svg>
    {/* glow blobs */}
    <div style={{
      position: "absolute", top: -120, right: -120, width: 480, height: 480,
      borderRadius: "50%",
      background: "radial-gradient(circle, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%)",
      filter: "blur(40px)",
    }}/>
  </div>
);

// Hero workflow mockup
const HeroComposition = ({ dark }) => (
  <div style={{
    position: "relative",
    minHeight: 480,
    width: "100%",
  }}>
    {/* Main card — workflow mockup */}
    <div className="hero-mockup-main" style={{
      background: dark ? "#111A2F" : "var(--white)",
      borderRadius: 18,
      border: dark ? "1px solid rgba(255,255,255,0.10)" : "1px solid var(--border)",
      boxShadow: "0 30px 60px -20px rgba(11,37,69,0.25), 0 12px 24px -12px rgba(11,37,69,0.10)",
      overflow: "hidden",
      position: "relative",
      zIndex: 2,
    }}>
      {/* Window chrome */}
      <div style={{
        display: "flex", alignItems: "center", gap: 8, padding: "12px 16px",
        borderBottom: "1px solid " + (dark ? "rgba(255,255,255,0.08)" : "var(--border)"),
      }}>
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: dark ? "#2A3447" : "#E4E7EE" }}/>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: dark ? "#2A3447" : "#E4E7EE" }}/>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: dark ? "#2A3447" : "#E4E7EE" }}/>
        </div>
        <div style={{
          marginLeft: 12,
          fontFamily: "var(--font-mono)", fontSize: 11, color: dark ? "#A3ACBF" : "var(--graphite-400)",
        }}>fluxo · análise-contratual.ai</div>
      </div>
      {/* Body */}
      <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.12em", color: "var(--accent)", textTransform: "uppercase" }}>
          ↳ Fluxo de análise
        </div>
        <WorkflowStep n="01" label="Upload do contrato" detail="contrato_locacao.pdf · 14 págs" done dark={dark}/>
        <WorkflowStep n="02" label="Extração de cláusulas" detail="32 cláusulas identificadas" done dark={dark}/>
        <WorkflowStep n="03" label="Verificação de riscos" detail="3 pontos de atenção · LGPD, multa, foro" active dark={dark}/>
        <WorkflowStep n="04" label="Sugestões de redação" detail="aguardando análise" dark={dark}/>
        <WorkflowStep n="05" label="Revisão final do advogado" detail="—" dark={dark}/>
      </div>
    </div>

    {/* Floating card — video */}
    <div className="hero-mockup-video" style={{
      position: "absolute",
      bottom: -28,
      left: -28,
      width: 240,
      background: dark ? "#0A0F1C" : "var(--white)",
      borderRadius: 14,
      overflow: "hidden",
      boxShadow: "0 20px 40px -16px rgba(11,37,69,0.25)",
      border: dark ? "1px solid rgba(255,255,255,0.10)" : "1px solid var(--border)",
      zIndex: 3,
      animation: "float 5s ease-in-out infinite",
    }}>
      <div style={{
        aspectRatio: "16/10",
        background: "linear-gradient(135deg, #11315F 0%, #0B2545 50%, #0A0F1C 100%)",
        position: "relative",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: "50%", background: "rgba(255,255,255,0.95)",
          display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-950)",
        }}><Icon name="play" size={18}/></div>
        <div style={{ position: "absolute", right: 8, bottom: 8, fontFamily: "var(--font-mono)", fontSize: 10, background: "rgba(0,0,0,0.7)", color: "white", padding: "2px 6px", borderRadius: 4 }}>12:38</div>
      </div>
      <div style={{ padding: "10px 14px 12px" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--accent)", textTransform: "uppercase", letterSpacing: "0.1em" }}>IA para petições</div>
        <div style={{ fontSize: 12.5, fontWeight: 540, marginTop: 4, lineHeight: 1.3 }}>Como estruturar uma petição inicial com IA</div>
      </div>
    </div>

    {/* Floating chip — prompt */}
    <div className="hero-mockup-prompt" style={{
      position: "absolute",
      top: 32,
      right: -24,
      background: dark ? "#0A0F1C" : "var(--white)",
      borderRadius: 12,
      padding: "14px 16px",
      maxWidth: 220,
      boxShadow: "0 16px 32px -12px rgba(11,37,69,0.20)",
      border: dark ? "1px solid rgba(255,255,255,0.10)" : "1px solid var(--border)",
      zIndex: 3,
      animation: "float 6s ease-in-out 0.5s infinite",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <div style={{
          width: 22, height: 22, borderRadius: 6,
          background: "var(--accent)", color: "var(--ink-950)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}><Icon name="spark" size={13}/></div>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-subtle)" }}>Prompt salvo</span>
      </div>
      <div style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--fg-muted)", fontFamily: "var(--font-mono)" }}>
        "Aja como advogado experiente em direito do trabalho..."
      </div>
    </div>
  </div>
);

const WorkflowStep = ({ n, label, detail, done, active, dark }) => (
  <div style={{
    display: "flex", alignItems: "center", gap: 12,
    padding: "12px 14px",
    background: active ? (dark ? "rgba(6,182,212,0.08)" : "var(--accent-soft)") : (dark ? "rgba(255,255,255,0.03)" : "var(--bg-sunken)"),
    border: active ? "1px solid color-mix(in oklab, var(--accent) 35%, transparent)" : "1px solid transparent",
    borderRadius: 10,
  }}>
    <div style={{
      width: 28, height: 28, borderRadius: 7,
      background: done ? "var(--accent)" : active ? "transparent" : (dark ? "rgba(255,255,255,0.06)" : "var(--white)"),
      border: done ? "none" : active ? "1.5px solid var(--accent)" : "1px solid " + (dark ? "rgba(255,255,255,0.10)" : "var(--border)"),
      color: done ? "var(--ink-950)" : active ? "var(--accent)" : "var(--fg-subtle)",
      fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 600,
      display: "flex", alignItems: "center", justifyContent: "center",
      flexShrink: 0,
    }}>
      {done ? <Icon name="check" size={14} stroke={2.5}/> : n}
    </div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13.5, fontWeight: 540, lineHeight: 1.2 }}>{label}</div>
      <div style={{ fontSize: 11.5, color: "var(--fg-subtle)", marginTop: 3 }}>{detail}</div>
    </div>
    {active && <div className="live-dot" style={{ width: 6, height: 6 }}/>}
  </div>
);

// ─────────────────────────────────────────────────────────────────────────
// 3. Authority section — about the creator
// ─────────────────────────────────────────────────────────────────────────
const Authority = () => (
  <section className="section section-tight" id="sobre" style={{ background: "var(--bg-elev)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
    <div className="container">
      <div className="authority-grid" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 0.9fr) minmax(0, 1.1fr)",
        gap: "clamp(40px, 6vw, 80px)",
        alignItems: "center",
      }}>
        {/* Portrait placeholder */}
        <div style={{ position: "relative" }}>
          <div style={{
            aspectRatio: "4/5",
            background: "linear-gradient(165deg, #11315F, #0A0F1C 70%)",
            borderRadius: 16,
            position: "relative",
            overflow: "hidden",
            border: "1px solid var(--border)",
          }}>
            {/* abstract portrait */}
            <svg viewBox="0 0 400 500" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
              <defs>
                <radialGradient id="port-light" cx="40%" cy="35%">
                  <stop offset="0%" stopColor="rgba(255,255,255,0.18)"/>
                  <stop offset="100%" stopColor="rgba(255,255,255,0)"/>
                </radialGradient>
              </defs>
              <rect width="400" height="500" fill="url(#port-light)"/>
              {/* silhouette */}
              <ellipse cx="200" cy="190" rx="68" ry="80" fill="#1E2638"/>
              <path d="M 80 500 L 80 420 Q 80 340 200 320 Q 320 340 320 420 L 320 500 Z" fill="#1E2638"/>
              {/* accent triangle */}
              <path d="M 30 470 L 80 380 L 80 470 Z" fill="var(--accent)" opacity="0.9"/>
            </svg>
            {/* credenciais flutuantes */}
            <div style={{
              position: "absolute", top: 16, left: 16,
              background: "rgba(10,15,28,0.75)", backdropFilter: "blur(10px)",
              borderRadius: 10, padding: "8px 12px",
              border: "1px solid rgba(255,255,255,0.10)",
              color: "white",
            }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--accent)", textTransform: "uppercase", letterSpacing: "0.1em" }}>Prof. LLM</div>
              <div style={{ fontSize: 12, fontWeight: 560, marginTop: 2 }}>IBMEC</div>
            </div>
            <div style={{
              position: "absolute", bottom: 16, left: 16, right: 16,
              background: "rgba(10,15,28,0.75)", backdropFilter: "blur(12px)",
              borderRadius: 12, padding: "12px 14px",
              border: "1px solid rgba(255,255,255,0.10)",
              color: "white",
            }}>
              <div style={{ fontSize: 14.5, fontWeight: 600 }}>Dr. Philipe Cardoso</div>
              <div style={{ fontSize: 12, opacity: 0.7, marginTop: 2 }}>Sócio Fundador · Prof. IBMEC · OAB/RJ</div>
            </div>
          </div>
        </div>

        {/* Copy */}
        <div>
          <Eyebrow style={{ marginBottom: 18 }}>Quem está por trás</Eyebrow>
          <h2 className="h-display" style={{ fontSize: "clamp(28px, 3.8vw, 44px)", margin: 0 }}>
            Advocacia real, background em TI e <em>docência no IBMEC</em> — tudo convergindo para IA jurídica de verdade.
          </h2>
          <p className="lede" style={{ marginTop: 22 }}>
            Sócio fundador da Cardoso Advogados Associados 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 <strong>Zoom Digital</strong> (20 anos no ar) e apresentador do <strong>Podcast Zoom Cast</strong>. O portal nasceu para traduzir o que funciona na advocacia com IA — sem hype, sem promessas vazias.
          </p>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
            gap: 18, marginTop: 32, paddingTop: 28, borderTop: "1px solid var(--border)",
          }}>
            <Credential icon="scale" label="15+ anos" sub="de prática advocatícia"/>
            <Credential icon="book" label="Prof. LLM IBMEC" sub="Direito Digital"/>
            <Credential icon="cpu" label="Zoom Digital" sub="fundador · 20 anos no ar"/>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Credential = ({ icon, label, sub }) => (
  <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
    <div style={{ color: "var(--accent)", marginTop: 2 }}><Icon name={icon} size={20}/></div>
    <div>
      <div style={{ fontSize: 14.5, fontWeight: 560 }}>{label}</div>
      <div style={{ fontSize: 12.5, color: "var(--fg-subtle)", marginTop: 2 }}>{sub}</div>
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────────────────
// 4. Videos section
// ─────────────────────────────────────────────────────────────────────────
const Videos = () => {
  const [filter, setFilter] = React.useState("Tudo");
  const filters = ["Tudo", "IA na prática", "IA para escritórios", "Ferramentas IA", "Ética e limites", "LGPD e IA"];
  const videos = [
    { title: "Nova Ferramenta da OpenAI que vai Mudar a Advocacia! ChatGPT Agente em Ação no Direito", category: "IA para escritórios", youtubeId: "_we8BNOYk10", variant: 0 },
    { title: "ChatGPT Investigador para Advogados: Como Usar na Prática Jurídica!", category: "Ferramentas IA", youtubeId: "rsfwAlLG9Dg", variant: 1 },
    { title: "ChatGPT faz mal ao advogado? A Verdade Sobre IA na Advocacia!", category: "Ética e limites", youtubeId: "MMzMF4eoNJ8", variant: 2 },
    { title: "ChatGPT PARA ADVOGADOS! Inteligência Artificial na Advocacia", category: "IA na prática", youtubeId: "fsyjI6pQkUQ", variant: 3 },
    { title: "Advogado 4.0: ALCANCE O SUCESSO NA ERA DIGITAL — Introdução ao Curso", category: "IA para escritórios", youtubeId: "BHbq0H4tb8g", variant: 4 },
  ];

  const filtered = filter === "Tudo" ? videos : videos.filter(v => v.category === filter);

  return (
    <section className="section" id="vídeos">
      <div className="container">
        <SectionHeader
          eyebrow="Biblioteca de vídeos"
          title="Aprenda assistindo."
          titleAccent="Novos vídeos toda semana."
          lede="Conteúdo gratuito no YouTube com curadoria por categoria. Exemplos reais e foco em aplicação prática no dia a dia do advogado."
          cta={<Button variant="ghost" iconRight="arrow-up-right" href="https://www.youtube.com/@cadvph" onClick={(e) => { window.open("https://www.youtube.com/@cadvph", "_blank"); e.preventDefault(); }}>Ver canal no YouTube</Button>}
        />
        {/* Filter chips */}
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 32, overflowX: "auto" }}>
          {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>
        {/* Grid */}
        <div className="video-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 22,
        }}>
          {filtered.length > 0 && <VideoCard {...filtered[0]} featured/>}
          {filtered.slice(1).map((v, i) => <VideoCard key={i} {...v}/>)}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// 5. Trails section
// ─────────────────────────────────────────────────────────────────────────
const Trails = () => {
  const trails = [
    { number: "01", icon: "compass", title: "Primeiros passos com IA na advocacia", description: "Entenda os conceitos, escolha as ferramentas certas e dê o primeiro passo seguro.", modules: 8, level: "Iniciante" },
    { number: "02", icon: "spark", title: "Prompts para advogados", description: "Biblioteca prática de prompts testados em casos reais, prontos para adaptar.", modules: 12, level: "Iniciante · Intermediário" },
    { number: "03", icon: "doc", title: "IA na produção de peças jurídicas", description: "Como usar IA para acelerar petições sem perder técnica, voz e responsabilidade.", modules: 10, level: "Intermediário" },
    { number: "04", icon: "workflow", title: "IA para atendimento e gestão de escritório", description: "Triagem de clientes, agenda, follow-up e automações que liberam horas por semana.", modules: 9, level: "Intermediário" },
    { number: "05", icon: "shield", title: "IA, ética e responsabilidade profissional", description: "Limites do CED-OAB, LGPD, sigilo profissional e como auditar suas próprias entregas.", modules: 7, level: "Todos os níveis" },
    { number: "06", icon: "book", title: "IA para professores e estudantes de Direito", description: "Estudar mais rápido, preparar aulas e construir referências com método.", modules: 8, level: "Iniciante" },
  ];
  return (
    <section className="section surface-sunken" id="trilhas">
      <div className="container">
        <SectionHeader
          eyebrow="Trilhas de aprendizado"
          title="Comece por uma trilha."
          titleAccent="Termine com método."
          lede="Em vez de vídeos avulsos, percorra um caminho organizado. Cada trilha combina aulas, materiais, prompts e exercícios."
        />
        <div className="trail-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 18,
        }}>
          {trails.map((t, i) => <TrailCard key={i} {...t}/>)}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// 5b. Audience — Para quem é
// ─────────────────────────────────────────────────────────────────────────
const Audience = () => {
  const items = [
    { icon: "briefcase", title: "Advogados autônomos", desc: "Que precisam produzir mais com menos tempo e sem equipe grande." },
    { icon: "users", title: "Escritórios de advocacia", desc: "Que buscam escalar a operação, padronizar processos e atender melhor." },
    { icon: "book", title: "Professores de Direito", desc: "Que querem integrar IA na didática, nas pesquisas e na preparação de aulas." },
    { icon: "compass", title: "Estudantes de Direito", desc: "Que desejam se preparar para o mercado usando ferramentas modernas desde cedo." },
  ];
  return (
    <section className="section surface-sunken" id="para-quem">
      <div className="container">
        <SectionHeader
          eyebrow="Para quem é"
          title="Feito para quem"
          titleAccent="vive o Direito."
          lede="O Advogado AI é para profissionais e estudantes que querem aplicar inteligência artificial de forma prática — sem precisar ser especialista em tecnologia."
          align="center"
        />
        <div className="audience-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
          gap: 20,
        }}>
          {items.map((item, i) => (
            <article key={i} className="card card-pad-lg" style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
              <div style={{
                width: 56, height: 56, borderRadius: 14,
                background: "var(--accent-soft)", color: "var(--brand-800)",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name={item.icon} size={26}/>
              </div>
              <h3 style={{ margin: 0, fontSize: 18, fontWeight: 560, letterSpacing: "-0.01em" }}>{item.title}</h3>
              <p style={{ margin: 0, color: "var(--fg-muted)", fontSize: 14.5, lineHeight: 1.55 }}>{item.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// 5c. Benefits — Benefícios práticos
// ─────────────────────────────────────────────────────────────────────────
const Benefits = () => {
  const items = [
    { icon: "bolt", title: "Produtividade real", desc: "Reduza horas de trabalho repetitivo com prompts e fluxos inteligentes." },
    { icon: "workflow", title: "Automação de tarefas", desc: "Automatize triagem, agenda, follow-up e processos internos do escritório." },
    { icon: "doc", title: "Criação de peças", desc: "Produza petições, contratos e pareceres com apoio de IA — sempre com revisão humana." },
    { icon: "search", title: "Análise de documentos", desc: "Extraia cláusulas, identifique riscos e resuma jurisprudência em minutos." },
    { icon: "chat", title: "Atendimento ao cliente", desc: "Melhore a triagem, a comunicação e o primeiro contato com potenciais clientes." },
    { icon: "grid", title: "Organização de escritório", desc: "Implemente fluxos de gestão, controle de prazos e organização com IA." },
    { icon: "book", title: "Estudo jurídico", desc: "Aprenda mais rápido, organize referências e prepare materiais com método." },
  ];
  return (
    <section className="section" id="beneficios">
      <div className="container">
        <SectionHeader
          eyebrow="Benefícios"
          title="O que a IA pode fazer"
          titleAccent="pela sua advocacia."
          lede="Não se trata de substituir o advogado — é sobre amplificar a sua capacidade de produção, análise e atendimento."
          align="center"
        />
        <div className="benefits-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
          gap: "24px 20px",
        }}>
          {items.map((b, i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column", gap: 12, padding: "24px 20px", borderRadius: 16, border: "1px solid var(--border)", background: "var(--bg-elev)", transition: "box-shadow .2s ease, border-color .2s ease" }}
              onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-md)"; e.currentTarget.style.borderColor = "var(--border-strong)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "var(--border)"; }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--accent-soft)", color: "var(--brand-800)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={b.icon} size={20}/>
              </div>
              <h4 style={{ margin: 0, fontSize: 16, fontWeight: 560, letterSpacing: "-0.01em" }}>{b.title}</h4>
              <p style={{ margin: 0, color: "var(--fg-muted)", fontSize: 14, lineHeight: 1.5 }}>{b.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Header, Hero, Authority, Videos, Trails, Audience, Benefits });
