// Insights / Notícias + Process + Contact + Footer

const PROCESS = [
  { n: "01", t: "Análise do caso", d: "Reunião inicial, leitura de contracheques, diagnóstico jurídico e parecer escrito.", time: "" },
  { n: "02", t: "Estratégia", d: "Definição da tese, escolha da via (administrativa ou judicial) e dimensionamento do passivo.", time: "" },
  { n: "03", t: "Ajuizamento", d: "Protocolo da ação, acompanhamento processual e comunicação mensal com o cliente.", time: "" },
  { n: "04", t: "Execução", d: "Expedição do precatório ou RPV, habilitação e recebimento dos valores.", time: "" },
];

const Processo = () => (
  <section style={{ background: "var(--paper)", padding: "140px 0" }}>
    <div className="container">
      <div style={{ maxWidth: 720, marginBottom: 72 }}>
        <Eyebrow>Como atuamos</Eyebrow>
        <h2 style={{
          fontFamily: "var(--font-display)", fontSize: "clamp(40px, 5vw, 68px)",
          lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 400, margin: "20px 0 0",
        }}>
          Do primeiro contato<br/>ao <span style={{ fontStyle: "italic" }}>recebimento</span>.
        </h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
        {PROCESS.map((p, i) => (
          <div key={p.n} style={{
            padding: "36px 28px 36px 0",
            borderTop: "2px solid var(--ink)",
            position: "relative",
            marginRight: i < 3 ? 24 : 0,
          }}>
            <div style={{
              position: "absolute", top: -7, left: 0,
              width: 12, height: 12, background: "var(--accent)",
              borderRadius: "50%",
            }} />
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
              letterSpacing: "0.15em", color: "var(--muted)", marginBottom: 20,
            }}>FASE {p.n}</div>
            <h3 style={{
              fontFamily: "var(--font-display)", fontSize: 26,
              letterSpacing: "-0.01em", fontWeight: 400, margin: "0 0 14px",
            }}>{p.t}</h3>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--muted)", margin: 0 }}>{p.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const INSIGHTS = [
  { tag: "Jurisprudência", date: "14 abr 2026", title: "STF fixa tese sobre incidência de IR em férias não gozadas — o que muda para o servidor", read: "6 min" },
  { tag: "Análise", date: "02 abr 2026", title: "A reforma da previdência após 6 anos: passivos ainda pendentes de revisão", read: "12 min" },
  { tag: "Guia prático", date: "28 mar 2026", title: "Como calcular corretamente a GDPGPE retroativa: um passo-a-passo para o servidor", read: "8 min" },
];

const Insights = () => (
  <section id="insights" style={{ background: "var(--cream)", padding: "140px 0" }}>
    <div className="container">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 72 }}>
        <div>
          <Eyebrow>Blog jurídico</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontSize: "clamp(40px, 5vw, 68px)",
            lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 400, margin: "20px 0 0",
          }}>
            Da redação<br/>do <span style={{ fontStyle: "italic" }}>escritório.</span>
          </h2>
        </div>
        <a href="#" style={{
          fontFamily: "'Inter Tight', sans-serif", fontSize: 14,
          color: "var(--ink)", textDecoration: "none", borderBottom: "1px solid var(--ink)",
          paddingBottom: 4,
        }}>Ver todos os artigos →</a>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 32 }}>
        {INSIGHTS.map((a, i) => (
          <article key={i} style={{ cursor: "pointer" }}
            onMouseEnter={(e) => e.currentTarget.querySelector('.arrow').style.transform = 'translateX(6px)'}
            onMouseLeave={(e) => e.currentTarget.querySelector('.arrow').style.transform = 'translateX(0)'}>
            <Placeholder label={a.tag.toLowerCase()} ratio={i === 0 ? "16/10" : "4/3"} tone={i === 0 ? "navy" : i === 1 ? "paper" : "graphite"} />
            <div style={{ marginTop: 24 }}>
              <div style={{
                display: "flex", gap: 12, fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
                color: "var(--muted)", marginBottom: 14,
              }}>
                <span style={{ color: "var(--accent-dark)" }}>{a.tag}</span>
                <span style={{ opacity: .4 }}>·</span>
                <span>{a.date}</span>
                <span style={{ opacity: .4 }}>·</span>
                <span>{a.read}</span>
              </div>
              <h3 style={{
                fontFamily: "var(--font-display)",
                fontSize: i === 0 ? 32 : 22,
                lineHeight: 1.15, letterSpacing: "-0.01em", fontWeight: 400,
                margin: 0, textWrap: "balance",
              }}>{a.title}</h3>
              <div className="arrow" style={{
                marginTop: 16, fontFamily: "serif", fontSize: 18,
                transition: "transform .25s ease", display: "inline-block",
              }}>→</div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Contato = () => {
  const [tipo, setTipo] = React.useState("Servidor individual");
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ nome: "", email: "", tel: "", msg: "" });
  const submit = (e) => { e.preventDefault(); setSubmitted(true); };

  return (
    <section id="contato" style={{ background: "var(--ink)", color: "var(--paper)", padding: "140px 0" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 100 }}>
          <div>
            <Eyebrow style={{ color: "var(--accent)" }}>Primeira consulta</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontSize: "clamp(44px, 5.5vw, 76px)",
              lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 400, margin: "20px 0 48px",
            }}>
              Converse com<br/>um <span style={{ fontStyle: "italic", color: "var(--accent)" }}>advogado</span>.
            </h2>
            <p style={{
              fontSize: 16, lineHeight: 1.7, color: "rgba(245,240,230,.75)",
              maxWidth: 440, textWrap: "pretty",
            }}>
              Analisamos sua situação
              funcional, identificamos eventuais direitos e apresentamos as opções em
              linguagem simples — antes de qualquer contratação.
            </p>

            <div style={{ marginTop: 60, display: "grid", gap: 28 }}>
              {[
                ["Endereço", "Rua Dona Francisca, 260, sala 1305\nCentro, Joinville — SC"],
                ["Telefone", "47 99112-1386 (WhatsApp)"],
                ["E-mail", "contato@costaemeurer.adv.br"],
              ].map(([l, v]) => (
                <div key={l} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 24, alignItems: "start" }}>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                    letterSpacing: "0.1em", textTransform: "uppercase",
                    color: "rgba(245,240,230,.5)", paddingTop: 4,
                  }}>{l}</div>
                  <div style={{ fontSize: 18, lineHeight: 1.6, whiteSpace: "pre-line" }}>{v}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            {submitted ? (
              <div style={{
                padding: "48px 40px", border: "1px solid var(--accent)",
                background: "rgba(201, 162, 74, 0.06)",
              }}>
                <Eyebrow style={{ color: "var(--accent)" }}>Mensagem recebida</Eyebrow>
                <h3 style={{
                  fontFamily: "var(--font-display)", fontSize: 36,
                  letterSpacing: "-0.015em", fontWeight: 400, margin: "16px 0 18px",
                }}>Obrigado, {form.nome.split(" ")[0] || "colega"}.</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: "rgba(245,240,230,.75)" }}>
                  Um de nossos advogados retornará em até 24 horas úteis, no canal
                  de sua preferência. Para casos urgentes, ligue diretamente.
                </p>
                <button onClick={() => { setSubmitted(false); setForm({ nome: "", email: "", tel: "", msg: "" }); }}
                  style={{
                    marginTop: 32, background: "transparent", color: "var(--accent)",
                    border: "none", padding: 0, cursor: "pointer",
                    fontFamily: "'Inter Tight', sans-serif", fontSize: 14,
                    borderBottom: "1px solid var(--accent)", paddingBottom: 4,
                  }}>Enviar outra mensagem ↺</button>
              </div>
            ) : (
              <form onSubmit={submit} style={{
                background: "rgba(255,255,255,.03)", border: "1px solid rgba(255,255,255,.1)",
                padding: "40px 40px 44px",
              }}>
                <div style={{ marginBottom: 32 }}>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                    letterSpacing: "0.15em", textTransform: "uppercase",
                    color: "rgba(245,240,230,.5)", marginBottom: 14,
                  }}>Sou</div>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {["Servidor individual", "Dirigente sindical", "Outro"].map(t => (
                      <button key={t} type="button" onClick={() => setTipo(t)}
                        style={{
                          padding: "10px 16px", fontSize: 12,
                          fontFamily: "'Inter Tight', sans-serif",
                          border: `1px solid ${tipo === t ? "var(--accent)" : "rgba(255,255,255,.2)"}`,
                          background: tipo === t ? "var(--accent)" : "transparent",
                          color: tipo === t ? "var(--ink)" : "var(--paper)",
                          cursor: "pointer", transition: "all .2s ease",
                        }}>{t}</button>
                    ))}
                  </div>
                </div>

                {[
                  { k: "nome", l: "Nome completo", type: "text" },
                  { k: "email", l: "E-mail", type: "email" },
                  { k: "tel", l: "Telefone / WhatsApp", type: "tel" },
                ].map(f => (
                  <div key={f.k} style={{ marginBottom: 24 }}>
                    <label style={{
                      display: "block",
                      fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                      letterSpacing: "0.15em", textTransform: "uppercase",
                      color: "rgba(245,240,230,.5)", marginBottom: 8,
                    }}>{f.l}</label>
                    <input type={f.type} required value={form[f.k]}
                      onChange={e => setForm({ ...form, [f.k]: e.target.value })}
                      style={{
                        width: "100%", background: "transparent",
                        border: "none", borderBottom: "1px solid rgba(255,255,255,.2)",
                        padding: "10px 0", color: "var(--paper)", fontSize: 15,
                        fontFamily: "'Inter Tight', sans-serif", outline: "none",
                        transition: "border-color .2s",
                      }}
                      onFocus={e => e.target.style.borderBottomColor = "var(--accent)"}
                      onBlur={e => e.target.style.borderBottomColor = "rgba(255,255,255,.2)"}
                    />
                  </div>
                ))}
                <div style={{ marginBottom: 32 }}>
                  <label style={{
                    display: "block",
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                    letterSpacing: "0.15em", textTransform: "uppercase",
                    color: "rgba(245,240,230,.5)", marginBottom: 8,
                  }}>Descreva brevemente sua situação</label>
                  <textarea rows={4} required value={form.msg}
                    onChange={e => setForm({ ...form, msg: e.target.value })}
                    style={{
                      width: "100%", background: "transparent",
                      border: "none", borderBottom: "1px solid rgba(255,255,255,.2)",
                      padding: "10px 0", color: "var(--paper)", fontSize: 15,
                      fontFamily: "'Inter Tight', sans-serif", outline: "none",
                      resize: "vertical",
                    }}
                    onFocus={e => e.target.style.borderBottomColor = "var(--accent)"}
                    onBlur={e => e.target.style.borderBottomColor = "rgba(255,255,255,.2)"}
                  />
                </div>
                <Btn variant="gold" icon={true}>Solicitar primeira consulta</Btn>
                <p style={{
                  fontSize: 11, color: "rgba(245,240,230,.45)", lineHeight: 1.5,
                  marginTop: 20, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.02em",
                }}>
                  Seus dados são tratados conforme a LGPD. Não compartilhamos informações
                  com terceiros.
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const social = [
    {
      name: "Facebook",
      href: "#",
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3 0-1.25-.1-2.35-.1-2.3 0-3.85 1.4-3.85 4v2.4H7.8V13h2.7v8h3z"/>
        </svg>
      ),
    },
    {
      name: "Instagram",
      href: "#",
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
          <rect x="3" y="3" width="18" height="18" rx="5"/>
          <circle cx="12" cy="12" r="4"/>
          <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
        </svg>
      ),
    },
  ];
  const iconStyle = {
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    width: 56, height: 56, borderRadius: 999,
    border: "1px solid rgba(255,255,255,.3)",
    color: "#fff", textDecoration: "none",
    transition: "background .2s ease, border-color .2s ease, transform .2s ease",
  };
  return (
    <footer style={{ background: "var(--ink)", color: "rgba(245,240,230,.7)", padding: "72px 0 48px", borderTop: "1px solid rgba(255,255,255,.1)" }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr auto 1fr",
          alignItems: "center", gap: 40,
          paddingBottom: 48,
          borderBottom: "1px solid rgba(255,255,255,.12)",
        }}>
          {/* LEFT: logo */}
          <div style={{ justifySelf: "start" }}>
            <img src="./logo.png" alt="Costa & Meurer Advocacia" style={{ height: 72, width: "auto", display: "block" }} />
          </div>

          {/* CENTER: site */}
          <div style={{ justifySelf: "center", textAlign: "center" }}>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
              letterSpacing: "0.2em", textTransform: "uppercase",
              color: "rgba(245,240,230,.55)", marginBottom: 8,
            }}>Site</div>
            <a href="https://www.costaemeurer.adv.br" style={{
              fontFamily: "var(--font-display)", fontSize: 24,
              color: "#fff", letterSpacing: "-0.01em", textDecoration: "none",
            }}>
              www.costaemeurer.adv.br
            </a>
          </div>

          {/* RIGHT: social */}
          <div style={{ justifySelf: "end", display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-end" }}>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
              letterSpacing: "0.2em", textTransform: "uppercase",
              color: "rgba(245,240,230,.55)",
            }}>Acompanhe</div>
            <div style={{ display: "flex", gap: 14 }}>
              {social.map(s => (
                <a
                  key={s.name} href={s.href} aria-label={s.name} style={iconStyle}
                  onMouseEnter={e => {
                    e.currentTarget.style.background = "var(--accent)";
                    e.currentTarget.style.borderColor = "var(--accent)";
                    e.currentTarget.style.color = "var(--ink)";
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.background = "transparent";
                    e.currentTarget.style.borderColor = "rgba(255,255,255,.3)";
                    e.currentTarget.style.color = "#fff";
                  }}
                >
                  {React.cloneElement(s.icon, { width: 26, height: 26 })}
                </a>
              ))}
            </div>
          </div>
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 24, flexWrap: "wrap", paddingTop: 28,
          fontSize: 12, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.05em",
        }}>
          <div>© 2026 · Sociedade de Advogados inscrita na OAB/SC sob n° 0000</div>
          <a href="#" style={{ color: "inherit", textDecoration: "none", fontFamily: "'Inter Tight', sans-serif", fontSize: 13 }}>Política de privacidade</a>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Processo, Insights, Contato, Footer });