const servicesStyles = {
  wrap: { padding: "120px 40px", background: "var(--warm-900)" },
  inner: { maxWidth: 1280, margin: "0 auto" },
  header: { display: "flex", justifyContent: "space-between", alignItems: "end", gap: 40, marginBottom: 64, flexWrap: "wrap" },
  label: { fontSize: 13, color: "var(--sage-700)", 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: 640, color: "white" },
  sub: { fontSize: 17, color: "rgba(255,255,255,0.7)", maxWidth: 360, lineHeight: 1.5 },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 },
  card: {
    background: "var(--warm-700)",
    border: "1px solid rgba(255,255,255,0.1)",
    borderRadius: 20, padding: 32,
    display: "flex", flexDirection: "column",
    transition: "transform 0.25s, box-shadow 0.25s, border-color 0.25s",
    minHeight: 0
  },
  cardFeatured: {
    background: "var(--sage-700)", color: "white",
    border: "1px solid rgba(255,255,255,0.15)",
    boxShadow: "0 0 0 1px rgba(139,163,132,0.3), 0 24px 60px -20px rgba(139,163,132,0.25)"
  },
  cardHeader: { display: "flex", alignItems: "center", gap: 14, marginBottom: 20 },
  iconWrap: {
    width: 44, height: 44, borderRadius: 12,
    background: "rgba(126,3,32,0.18)", color: "#e8324a",
    display: "flex", alignItems: "center", justifyContent: "center",
    flexShrink: 0
  },
  cardTitle: {
    fontFamily: "'Outfit', sans-serif", fontSize: 20, lineHeight: 1.2, letterSpacing: "-0.01em", fontWeight: 600,
    color: "white",
    textShadow: "0 0 20px rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.3)"
  },
  cardDesc: { fontSize: 15, lineHeight: 1.55, color: "rgba(255,255,255,0.8)", marginBottom: 28 },
  cardDescLight: { color: "rgba(255,255,255,0.85)" },
  featureList: { listStyle: "none", display: "flex", flexDirection: "column", gap: 10, marginBottom: 0 },
  feature: { display: "flex", alignItems: "start", gap: 10, fontSize: 14, lineHeight: 1.5, color: "rgba(255,255,255,0.85)" },
  cardCta: {
    marginTop: "auto",
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
    padding: "14px 20px", borderRadius: 12,
    background: "white", color: "var(--warm-900)",
    fontSize: 14, fontWeight: 500,
    transition: "background 0.2s"
  },
  cardCtaLight: { background: "rgba(255,255,255,0.15)", color: "white" }
};

const services = [
  {
    icon: <IconTarget size={18} />,
    title: "1. Diagnóstico estratégico profundo",
    intro: "Antes de qualquer prescrição, realizamos uma análise completa da sua realidade física, metabólica e comportamental.",
    features: [
      "Composição corporal",
      "Rotina",
      "Histórico alimentar",
      "Dificuldades de adesão",
      "Fatores que estão travando sua evolução"
    ],
    closing: "Isso permite atacar a raiz do problema, e não apenas os sintomas. Seu plano nasce da sua necessidade real.",
    featured: false
  },
  {
    icon: <IconSparkles size={18} />,
    title: "2. Planejamento de alta precisão",
    intro: "Seu protocolo é construído de forma estratégica pensando no corpo feminino. Você recebe:",
    features: [
      "Estratégia nutricional individualizada",
      "Distribuição inteligente de refeições",
      "Suplementação direcionada quando necessário",
      "Ajustes de acordo com a evolução"
    ],
    closing: "Cada detalhe tem função estratégica para acelerar sua definição e construção muscular.",
    featured: true
  },
  {
    icon: <IconUsers size={18} />,
    title: "3. Acompanhamento diário e ajustes constantes.",
    intro: "Resultado não depende só de prescrição. DEPENDE DE MONITORAMENTO INTELIGENTE. Durante todo o processo, analisamos:",
    features: [
      "Resposta física",
      "Evolução visual",
      "Medidas",
      "Adesão",
      "Feedbacks"
    ],
    closing: "Seu plano evolui junto com seu corpo. É isso que gera consistência e resultados sustentáveis.",
    featured: false
  }
];

const Services = ({ onWhatsApp }) => (
  <section className="services-wrap" id="servicos" style={servicesStyles.wrap}>
    <div style={servicesStyles.inner}>
      <div data-anim style={servicesStyles.header}>
        <div>
          <div style={servicesStyles.label}>O Método</div>
          <h2 style={servicesStyles.title}>O que torna a consultoria Shape Blindado diferente?</h2>
        </div>
      </div>
      <div className="services-grid" style={servicesStyles.grid}>
        {services.map((s, i) => {
          const isF = s.featured;
          return (
            <div
              key={i}
              data-anim data-delay={String(i + 1)}
              style={{ ...servicesStyles.card, ...(isF ? servicesStyles.cardFeatured : {}), position: "relative" }}
              onMouseEnter={e => {
                e.currentTarget.style.transform = "translateY(-4px)";
                e.currentTarget.style.boxShadow = "0 20px 40px -16px rgba(42,37,32,0.18)";
                if (!isF) e.currentTarget.style.borderColor = "var(--sage-400)";
              }}
              onMouseLeave={e => {
                e.currentTarget.style.transform = "translateY(0)";
                e.currentTarget.style.boxShadow = "none";
                if (!isF) e.currentTarget.style.borderColor = "rgba(42,37,32,0.08)";
              }}
            >
              {s.badge && (
                <span style={{
                  position: "absolute", top: 16, right: 16,
                  background: "white", color: "var(--sage-800, #1e3a20)",
                  padding: "5px 14px", borderRadius: 999,
                  fontSize: 11, fontWeight: 700, letterSpacing: "0.06em",
                  textTransform: "uppercase",
                  display: "inline-flex", alignItems: "center", justifyContent: "center"
                }}>{s.badge}</span>
              )}
              <div style={servicesStyles.cardHeader}>
                <div style={{ ...servicesStyles.iconWrap, ...(isF ? { background: "rgba(255,255,255,0.2)", color: "white" } : {}) }}>
                  {s.icon}
                </div>
                <h3 style={servicesStyles.cardTitle}>{s.title}</h3>
              </div>
              {s.intro && (
                <p style={{ ...servicesStyles.cardDesc, ...(isF ? servicesStyles.cardDescLight : {}), marginBottom: 18 }}>{s.intro}</p>
              )}
              {s.body && (
                <p style={{ ...servicesStyles.cardDesc, ...(isF ? servicesStyles.cardDescLight : {}), marginBottom: 18 }}>{s.body}</p>
              )}
              {s.features && s.features.length > 0 && (
                <ul style={servicesStyles.featureList}>
                  {s.features.map((f, j) => (
                    <li key={j} style={servicesStyles.feature}>
                      <IconCheck size={16} stroke={2} style={{ flexShrink: 0, marginTop: 2, color: isF ? "#a8d5a2" : "#e8324a" }} />
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              )}
              {s.closing && (
                <p style={{ ...servicesStyles.cardDesc, ...(isF ? servicesStyles.cardDescLight : {}), marginTop: 18, marginBottom: 0 }}>{s.closing}</p>
              )}
            </div>
          );
        })}
      </div>
      <div style={{ textAlign: "center", marginTop: 40 }}>
        <button
          style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "16px 32px", borderRadius: 999,
            background: "#1A9E4A", color: "white",
            fontSize: 16, fontWeight: 500,
            transition: "transform 0.2s, background 0.2s"
          }}
          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 começar agora
        </button>
      </div>
    </div>
    <style>{`
      @media (max-width: 1040px) {
        .services-grid { grid-template-columns: 1fr 1fr !important; }
      }
      @media (max-width: 720px) {
        .services-grid { grid-template-columns: 1fr !important; }
      }
      @media (max-width: 560px) {
        .services-wrap { padding: 60px 20px !important; }
        .cardHeader { flex-direction: row !important; align-items: center !important; gap: 12px !important; }
        .cardTitle { font-size: 20px !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { Services });