// Áreas de atuação, Sócios, Sindicatos

const AREAS = [
  { n: "01", t: "Concursos, convocação e posse", d: "Defesa do direito de nomeação, convocação e posse de candidatos aprovados em concurso público." },
  { n: "02", t: "Reajustes e revisões", d: "Recomposições salariais, passivos remuneratórios e parcelas atrasadas." },
  { n: "03", t: "Processo Administrativo Disciplinar", d: "Defesa técnica em PADs, sindicâncias e processos de demissão." },
  { n: "04", t: "Gratificações e adicionais", d: "Triênio, quinquênio, abono permanência, sobreaviso, insalubridade, periculosidade, noturno e demais vantagens suprimidas." },
  { n: "05", t: "Progressão funcional", d: "Enquadramento em carreira, estabilidade, estágio probatório e promoções negadas." },
  { n: "06", t: "Saúde do servidor e assédio moral", d: "Readaptação, perícia médica, auxílio-doença, aposentadoria por incapacidade, adoecimento ocupacional e defesa do servidor vítima de assédio moral, institucional e perseguição funcional." },
  { n: "07", t: "Licenças legais", d: "Licença-prêmio, capacitação, saúde, maternidade, adotante, descontos indevidos durante licenças e demais afastamentos previstos em lei." },
  { n: "08", t: "Assessoria sindical", d: "Consultoria jurídica permanente, organização sindical, ações coletivas e negociações com o poder público." },
  { n: "09", t: "Aposentadoria e pensão", d: "Revisão de proventos, contagem de tempo especial, conversão de tempo e reenquadramentos." },
];

const Areas = () => {
  const [hover, setHover] = React.useState(null);
  return (
    <section id="areas" style={{ background: "var(--paper)", padding: "140px 0" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, marginBottom: 72, alignItems: "end" }}>
          <div>
            <Eyebrow>Áreas de atuação</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1,
              letterSpacing: "-0.02em", fontWeight: 400, margin: "20px 0 0",
            }}>
              Uma prática<br/><span style={{ fontStyle: "italic" }}>inteiramente dedicada</span><br/>ao servidor.
            </h2>
          </div>
          <p style={{
            fontSize: 16, lineHeight: 1.7, color: "var(--muted)",
            maxWidth: 520, justifySelf: "end", textWrap: "pretty",
          }}>
            Não somos um escritório generalista. Nossa especialização em direito
            administrativo e estatutário nos permite atuar com profundidade em causas
            que exigem leitura precisa da legislação de cada carreira.
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
          borderTop: "1px solid var(--hairline)", borderLeft: "1px solid var(--hairline)",
        }}>
          {AREAS.map((a, i) => (
            <div key={a.n}
              onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
              style={{
                padding: "44px 36px 48px",
                borderRight: "1px solid var(--hairline)",
                borderBottom: "1px solid var(--hairline)",
                background: hover === i ? "var(--ink)" : "transparent",
                color: hover === i ? "var(--paper)" : "var(--ink)",
                transition: "all .3s ease", cursor: "pointer",
                minHeight: 320, display: "flex", flexDirection: "column",
              }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                <span style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                  letterSpacing: "0.15em", opacity: .6,
                }}>{a.n}</span>
                <span style={{ fontFamily: "serif", fontSize: 18, opacity: hover === i ? 1 : 0, transform: `translateX(${hover === i ? 0 : -8}px)`, transition: "all .3s ease" }}>→</span>
              </div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontSize: 30,
                lineHeight: 1.1, letterSpacing: "-0.015em", fontWeight: 400,
                margin: "28px 0 16px",
              }}>{a.t}</h3>
              <p style={{
                fontSize: 14, lineHeight: 1.6, margin: 0,
                color: hover === i ? "rgba(245,240,230,.75)" : "var(--muted)",
                flex: 1,
              }}>{a.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const PARTNERS = [
  {
    name: "Rafael Meurer",
    role: "Sócio · OAB/SC 54.715",
    photo: "./partner-meurer.jpg",
    bio: "Especialista em Direito do Servidor Público, mestrando em Direito Público na UFSC e professor de Direito Administrativo na Faculdade Inesa.",
    tags: ["Contencioso", "Disciplinar"],
    quote: "A ampla defesa não é formalidade — é a última linha entre o poder e o arbítrio."
  },
  {
    name: "Elaine C. Dias da Costa",
    role: "Sócia · OAB/SC 31.276",
    photo: "./partner-costa.jpg",
    bio: "Especialista em Direito Previdenciário e Trabalhista, atua na defesa dos servidores celetistas e na área previdenciária dos servidores.",
    tags: ["Ações coletivas", "Aposentadoria", "Sindicatos"],
    quote: "Cada processo é, no fundo, uma história de trabalho e de vida."
  },
];

const PartnerCard = ({ p, idx }) => (
  <div style={{ display: "flex", flexDirection: "column" }}>
    <div style={{ position: "relative", marginBottom: 32, aspectRatio: "4/5", overflow: "hidden", background: "var(--ink)" }}>
      <img
        src={p.photo}
        alt={`Retrato de ${p.name}`}
        style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%",
          objectFit: "cover",
          objectPosition: idx === 0 ? "center 22%" : "center 18%",
          display: "block",
          filter: "grayscale(15%) contrast(1.02)",
        }}
      />
      <div style={{
        position: "absolute", top: 20, right: 20,
        background: "var(--ink)", color: "var(--paper)",
        padding: "10px 14px", fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase",
      }}>0{idx + 1} / 0{PARTNERS.length}</div>
    </div>
    <h3 style={{
      fontFamily: "var(--font-display)", fontSize: 34,
      letterSpacing: "-0.015em", fontWeight: 400, margin: "0 0 6px",
    }}>{p.name}</h3>
    <div style={{
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
      letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)",
      marginBottom: 22,
    }}>{p.role}</div>
    <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--ink)", margin: "0 0 24px", textWrap: "pretty" }}>{p.bio}</p>
    <div style={{
      borderLeft: "2px solid var(--accent)", paddingLeft: 20,
      fontFamily: "var(--font-display)", fontSize: 19, lineHeight: 1.4,
      fontStyle: "italic", color: "var(--ink)",
    }}>"{p.quote}"</div>
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 24 }}>
      {p.tags.map(t => (
        <span key={t} style={{
          fontFamily: "'Inter Tight', sans-serif", fontSize: 12,
          padding: "6px 14px", border: "1px solid var(--hairline)",
          borderRadius: 999, color: "var(--ink)",
        }}>{t}</span>
      ))}
    </div>
  </div>
);

const Partners = () => {
  return (
    <section id="socios" style={{ background: "var(--cream)", padding: "140px 0", position: "relative" }}>
      <div className="container">
        <div style={{ marginBottom: 72, maxWidth: 720 }}>
          <Eyebrow>Sócios fundadores</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontSize: "clamp(40px, 5vw, 68px)",
            lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 400, margin: "20px 0 0",
          }}>
            Dois sócios, uma <span style={{ fontStyle: "italic" }}>atuação exclusiva</span> na defesa dos servidores.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          {PARTNERS.map((p, i) => <PartnerCard key={i} p={p} idx={i} />)}
        </div>
      </div>
    </section>
  );
};

const ATUACOES_SINDICAIS = [
  {
    num: "01",
    title: "Fundação e registro",
    desc: "Acompanhamento completo na constituição de novos sindicatos — da redação do estatuto ao registro no Ministério do Trabalho e unicidade sindical.",
  },
  {
    num: "02",
    title: "Assembleias e negociação coletiva",
    desc: "Assessoria técnica em assembleias, mesas de negociação com os governos e elaboração de acordos, termos e pautas de reivindicação.",
  },
  {
    num: "03",
    title: "Atendimento aos filiados",
    desc: "Atendimento jurídico individual dos servidores filiados em todas as matérias que envolvem a relação com a administração pública.",
  },
  {
    num: "04",
    title: "Ações coletivas",
    desc: "Pesquisa, construção da tese e ajuizamento de ações coletivas em nome da categoria — recuperando direitos para todo o grupo de filiados.",
  },
];

const Sindicatos = () => {
  return (
    <section id="sindicatos" style={{ background: "var(--ink)", color: "var(--paper)", padding: "140px 0" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, marginBottom: 80 }}>
          <div>
            <Eyebrow style={{ color: "var(--accent)" }}>Assessoria de sindicatos</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontSize: "clamp(40px, 5vw, 68px)",
              lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 400, margin: "20px 0 0",
            }}>
              Ao lado do sindicato<br/>
              <span style={{ fontStyle: "italic", color: "var(--accent)" }}>em tudo que precisa.</span>
            </h2>
          </div>
          <p style={{
            fontSize: 16, lineHeight: 1.7, color: "rgba(245,240,230,.8)",
            textWrap: "pretty", maxWidth: 480, alignSelf: "end",
          }}>
            Assessoramos sindicatos de servidores em toda a sua rotina institucional —
            da fundação às mesas de negociação, do atendimento individual dos filiados
            à construção de ações coletivas em nome da categoria. Um escritório à
            disposição da entidade e de cada servidor que ela representa.
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0,
          borderTop: "1px solid rgba(255,255,255,.15)",
        }}>
          {ATUACOES_SINDICAIS.map((a, i) => (
            <div key={a.num} style={{
              padding: "48px 40px",
              borderRight: i % 2 === 0 ? "1px solid rgba(255,255,255,.15)" : "none",
              borderBottom: i < 2 ? "1px solid rgba(255,255,255,.15)" : "none",
              display: "flex", flexDirection: "column", gap: 16, minHeight: 220,
            }}>
              <div style={{
                fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                letterSpacing: "0.14em", color: "var(--accent)",
              }}></div>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 30,
                letterSpacing: "-0.015em", fontWeight: 400, lineHeight: 1.15,
              }}>{a.title}</div>
              <div style={{
                fontSize: 15, color: "rgba(245,240,230,.72)", lineHeight: 1.65,
                textWrap: "pretty",
              }}>{a.desc}</div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 64, display: "flex", gap: 32, alignItems: "center",
          justifyContent: "space-between", flexWrap: "wrap",
        }}>
          <p style={{
            fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic",
            maxWidth: 620, margin: 0, lineHeight: 1.4,
          }}>
            Seu sindicato ainda não tem assessoria especializada em direito do servidor?
          </p>
          <Btn variant="gold">Propor parceria</Btn>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Areas, Partners, Sindicatos });