const processStyles = {
  wrap: { padding: "120px 40px", background: "#000", color: "var(--cream-50)", position: "relative", overflow: "hidden" },
  inner: { maxWidth: 1280, margin: "0 auto", position: "relative", zIndex: 2 },
  header: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", marginBottom: 72 },
  label: { fontSize: 13, color: "rgba(255,255,255,0.7)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 16, fontWeight: 500 },
  title: {
    fontFamily: "'Outfit', sans-serif", fontSize: "clamp(34px, 4.5vw, 54px)",
    lineHeight: 1.05, letterSpacing: "-0.02em", fontWeight: 400, textWrap: "balance",
    maxWidth: 720, marginBottom: 20, color: "white"
  },
  sub: { fontSize: 17, color: "rgba(255,255,255,0.75)", maxWidth: 580, lineHeight: 1.55 },
  steps: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, position: "relative" },
  step: { position: "relative", padding: 4, textAlign: "center" },
  stepNum: {
    fontFamily: "'Outfit', sans-serif", fontSize: 60, fontWeight: 300,
    color: "#e8324a", letterSpacing: "-0.03em",
    lineHeight: 1, marginBottom: 20
  },
  stepTitle: { fontFamily: "'Outfit', sans-serif", fontSize: 24, fontWeight: 400, letterSpacing: "-0.01em", marginBottom: 12, color: "white" },
  stepDesc: { fontSize: 15, lineHeight: 1.55, color: "rgba(255,255,255,0.75)" },
  whatsappBtn: {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "14px 28px", borderRadius: 999,
    background: "#1A9E4A", color: "white",
    fontSize: 15, fontWeight: 500, marginTop: 56,
    transition: "transform 0.2s, background 0.2s"
  }
};

const steps = [
  { n: "01", t: "Anamnese estratégica inicial", d: "Entendemos profundamente seu histórico, rotina, objetivos e dificuldades.", icon: <IconTarget size={28} color="#e8324a" stroke={1.5} /> },
  { n: "02", t: "Avaliação clínica + análise de exames", d: "Identificamos o que está travando sua evolução com análise laboratorial completa.", icon: <IconSparkles size={28} color="#e8324a" stroke={1.5} /> },
  { n: "03", t: "Entrega do planejamento individualizado", d: "Você recebe seu plano alimentar + treino personalizado no app com vídeos e progressão estratégica montado pela equipe.", icon: <IconCheck size={28} color="#e8324a" stroke={1.5} /> },
  { n: "04", t: "Suporte VIP individual", d: "Acompanhamento diário, ajustes contínuos e orientação durante todo o processo.", icon: <IconUsers size={28} color="#e8324a" stroke={1.5} /> }
];

const Process = ({ onWhatsApp }) => (
  <section className="process-wrap" id="processo" style={processStyles.wrap}>
    <div aria-hidden style={{
      position: "absolute", top: "-20%", left: "-10%",
      width: 500, height: 500, borderRadius: "50%",
      background: "radial-gradient(closest-side, rgba(126,3,32,0.15), transparent)"
    }} />
    <div aria-hidden style={{
      position: "absolute", bottom: "-30%", right: "-15%",
      width: 600, height: 600, borderRadius: "50%",
      background: "radial-gradient(closest-side, rgba(126,3,32,0.15), transparent)"
    }} />

    <div style={processStyles.inner}>
      <div data-anim style={processStyles.header}>
        <div style={processStyles.label}>Como funciona</div>
        <h2 style={processStyles.title}>Como funciona o acompanhamento.</h2>
        <p style={processStyles.sub}>Você não recebe um plano engessado. Você recebe um acompanhamento estratégico para evoluir com segurança, clareza e direção.</p>
      </div>

      <div className="process-steps" style={processStyles.steps}>
        {steps.map((s, i) => (
          <div key={i} data-anim data-delay={String(i + 1)} style={processStyles.step}>
            <div style={{ marginBottom: 10, display: "grid", placeItems: "center" }}>{s.icon}</div>
            <div className="step-num" style={processStyles.stepNum}>{s.n}</div>
            <h3 style={processStyles.stepTitle}>{s.t}</h3>
            <p style={processStyles.stepDesc}>{s.d}</p>
          </div>
        ))}
      </div>

      <div style={{ textAlign: "center" }}>
        <button
          style={processStyles.whatsappBtn}
          onClick={onWhatsApp}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.background = "#157A3A"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.background = "#1A9E4A"; }}
        >
          Quero entrar para o time
        </button>
      </div>
    </div>
    <style>{`
      @media (max-width: 960px) { .process-steps { grid-template-columns: 1fr 1fr !important; gap: 40px !important; } }
      @media (max-width: 560px) {
        .process-wrap { padding: 60px 20px !important; }
        .process-steps { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        .process-steps .step-num { font-size: 40px !important; margin-bottom: 12px !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { Process });