function Services({ setPage }) {
  return (
    <main data-screen-label="Servicos">
      <section style={{ background: "var(--navy-900)", color: "var(--cream-50)", padding: "100px 0 110px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(at 90% 10%, rgba(212, 162, 76, 0.2), transparent 50%)" }}></div>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ maxWidth: 880 }}>
            <div className="h-eyebrow on-dark">
              Nossos serviços
            </div>
            <h1 className="h-display" style={{ fontSize: "clamp(48px, 5.5vw, 78px)", marginTop: 26, color: "var(--cream-50)" }}>
              Soluções <em>completas</em>, ou <em>separadas</em> — você decide.
            </h1>
            <p style={{ fontSize: 19, color: "rgba(251,249,243,0.75)", marginTop: 28, maxWidth: 640, lineHeight: 1.55 }}>
              Oferecemos os quatro pilares da gestão condominial integrados em uma plataforma só.
              Contrate o pacote inteiro ou só o módulo que faz sentido agora.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <ServiceBlock
            num="01"
            icon="users"
            title="Síndico Profissional"
            sub="Gestão técnica, neutra e dedicada"
            desc="Substitui o síndico voluntário — que normalmente está sobrecarregado e sem tempo. Atuamos como representante
                  legal do condomínio, com responsabilidade contratual definida e processos claros."
            items={[
              "Representação legal e administrativa",
              "Condução das assembleias e reuniões",
              "Gestão de fornecedores e contratos",
              "Reunião periódica com o conselho fiscal",
              "Plano anual de manutenção preventiva",
              "Atendimento direto por telefone e WhatsApp"
            ]}
          />

          <ServiceBlock
            num="02"
            icon="building"
            title="Administradora Completa"
            sub="Tudo organizado, do boleto à folha"
            desc="Gestão financeira, contábil e operacional do começo ao fim. Cada documento, cada contrato e cada conta
                  do condomínio sob controle, com tudo registrado e acessível para quem precisa consultar."
            reverse
            items={[
              "Emissão de boletos e cobrança organizada",
              "Conta do condomínio sempre conciliada",
              "Folha de pagamento e gestão de funcionários",
              "Férias, 13º, rescisões e encargos em dia",
              "Balancete mensal até o dia 10",
              "Portal e aplicativo para os condôminos"
            ]}
          />

          <ServiceBlock
            num="03"
            icon="chart"
            title="Gestão Financeira"
            sub="Transparência total, decisão fácil"
            desc="Controle financeiro com relatórios claros e cobrança organizada que reduz a inadimplência. O síndico,
                  o conselho e os condôminos enxergam exatamente para onde cada centavo está indo, todos os meses."
            items={[
              "Relatórios financeiros mensais detalhados",
              "Cobrança escalonada, firme e respeitosa",
              "Notificação dos inadimplentes no momento certo",
              "Prestação de contas pronta para o conselho",
              "Fluxo de caixa projetado e reservas",
              "Comparativo de orçamento vs. realizado"
            ]}
          />

          <ServiceBlock
            num="04"
            icon="scale"
            title="Assessoria Jurídica"
            sub="Da assembleia ao tribunal"
            desc="Advogado condominialista interno — sem terceirização e sem taxa por hora. Da redação de uma notificação
                  simples a uma ação de cobrança completa, com toda a estratégia jurídica integrada à gestão."
            reverse
            items={[
              "Notificação extrajudicial em 24 horas",
              "Redação e revisão da convenção",
              "Revisão do regimento interno",
              "Cobrança judicial de inadimplentes",
              "Pareceres em deliberações complexas",
              "Mediação de conflitos entre condôminos"
            ]}
          />
        </div>
      </section>

      {/* Plans table */}
      <section className="section" style={{ background: "var(--cream-100)" }}>
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <div className="h-eyebrow">Tabela de planos</div>
              <h2 className="h-display">Encontre o plano <em>certo</em> para o seu condomínio.</h2>
              <p>Todos os planos incluem o aplicativo, portal e atendimento humano. Contratos com regras claras e justas para os dois lados.</p>
            </div>
          </div>

          <div style={{ background: "var(--surface)", border: "1px solid var(--border-gold)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
            <table style={{ width: "100%", borderCollapse: "collapse" }}>
              <thead>
                <tr>
                  <th style={{ textAlign: "left", padding: "26px 30px", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent-deep)", background: "var(--cream-50)" }}>O que está incluso</th>
                  <PlanTh name="Essencial" tagline="Para começar a profissionalizar" />
                  <PlanTh name="Profissional" tagline="O carro-chefe" featured />
                  <PlanTh name="Completo" tagline="Respaldo total" />
                </tr>
              </thead>
              <tbody>
                <FeatureRow t="Boletos prontos e em dia" v={[true, true, true]} />
                <FeatureRow t="Balancete mensal até o dia 10" v={[true, true, true]} />
                <FeatureRow t="Folha de pagamento dos funcionários" v={[true, true, true]} />
                <FeatureRow t="Aplicativo e portal para condôminos" v={[true, true, true]} />
                <FeatureRow t="Cobrança organizada e respeitosa" v={[true, true, true]} />
                <FeatureRow t="Síndico profissional dedicado" v={[false, true, true]} />
                <FeatureRow t="Presença real nas reuniões" v={[false, true, true]} />
                <FeatureRow t="Ata pronta no fim da assembleia" v={[false, true, true]} />
                <FeatureRow t="Notificações extrajudiciais" v={["avulso", "5/ano", "ilimitado"]} />
                <FeatureRow t="Cobrança judicial" v={[false, "sob consulta", true]} />
                <FeatureRow t="Revisão de convenção e regimento" v={[false, false, true]} />
                <FeatureRow t="Defesa em ações trabalhistas" v={[false, false, true]} />
                <tr>
                  <td colSpan="4" style={{ padding: 32, textAlign: "center", background: "var(--cream-50)" }}>
                    <a className="btn btn-dark" href="https://wa.me/5522992072619?text=Ol%C3%A1%2C%20tenho%20interesse%20no%20Condominize.%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank">
                      Pedir cotação personalizada
                      <Icon name="arrow" size={16} />
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <p style={{ fontSize: 13, color: "var(--text-soft)", marginTop: 24, textAlign: "center", fontFamily: "var(--font-mono)", letterSpacing: "0.05em" }}>
            Valores de referência por condomínio (não por unidade). Personalizamos conforme tamanho e complexidade.
          </p>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <div className="h-eyebrow">Dúvidas frequentes</div>
              <h2 className="h-display">As perguntas que mais ouvimos.</h2>
            </div>
          </div>
          <FAQList />
        </div>
      </section>
    </main>
  );
}

function ServiceBlock({ num, icon, title, sub, desc, items, reverse }) {
  return (
    <div className="svc-block">
      <div style={{ order: reverse ? 2 : 1 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 22 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--accent-deep)", letterSpacing: "0.15em", fontWeight: 500 }}>{num} —</span>
          <div style={{
            width: 52, height: 52, borderRadius: 14,
            background: "var(--accent-soft)", color: "var(--accent-deep)",
            display: "flex", alignItems: "center", justifyContent: "center",
            border: "1px solid var(--border-gold)"
          }}>
            <Icon name={icon} size={24} />
          </div>
        </div>
        <h2 className="h-display" style={{ fontSize: "clamp(34px, 4vw, 52px)", marginBottom: 10 }}>{title}</h2>
        <div style={{
          fontFamily: "var(--font-display)", fontStyle: "italic",
          fontSize: 22, color: "var(--accent-deep)", marginBottom: 22, fontWeight: 400
        }}>{sub}</div>
        <p style={{ fontSize: 16, color: "var(--text-soft)", lineHeight: 1.65, maxWidth: 560 }}>
          {desc}
        </p>
      </div>
      <div className="svc-block-side" style={{ order: reverse ? 1 : 2 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent-deep)", marginBottom: 22, fontWeight: 500 }}>
          ↳ Inclui
        </div>
        <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 16 }}>
          {items.map((it, i) => (
            <li key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start", fontSize: 15.5 }}>
              <span style={{
                width: 24, height: 24, borderRadius: 7,
                background: "var(--accent)", color: "var(--navy-1000)",
                display: "flex", alignItems: "center", justifyContent: "center",
                flexShrink: 0, marginTop: 1
              }}>
                <Icon name="check" size={14} color="var(--navy-1000)" strokeWidth={2.5} />
              </span>
              <span>{it}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function PlanTh({ name, tagline, featured }) {
  return (
    <th style={{
      textAlign: "left", padding: "30px 26px 24px",
      background: featured ? "var(--navy-900)" : "var(--cream-50)",
      color: featured ? "#fff" : "inherit",
      minWidth: 180,
      borderBottom: featured ? "3px solid var(--gold-500)" : "1px solid var(--border)"
    }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 11,
        letterSpacing: "0.2em", textTransform: "uppercase",
        color: featured ? "var(--gold-500)" : "var(--accent-deep)",
        marginBottom: 8, fontWeight: 500
      }}>{name}</div>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 400,
        fontStyle: "italic", letterSpacing: "-0.015em",
        color: featured ? "var(--cream-50)" : "var(--navy-900)",
        lineHeight: 1.15
      }}>
        {tagline}
      </div>
    </th>
  );
}

function FeatureRow({ t, v }) {
  return (
    <tr style={{ borderTop: "1px solid var(--border)" }}>
      <td style={{ padding: "18px 30px", fontSize: 14.5, fontWeight: 500 }}>{t}</td>
      {v.map((val, i) => (
        <td key={i} style={{ padding: "18px 26px", fontSize: 14 }}>
          {val === true ? <Icon name="check" size={20} color="var(--accent-deep)" strokeWidth={2.5}/> :
           val === false ? <span style={{ color: "var(--text-muted)" }}>—</span> :
           <span style={{ fontSize: 13, fontStyle: "italic", color: "var(--text-soft)" }}>{val}</span>}
        </td>
      ))}
    </tr>
  );
}

function FAQList() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Quanto tempo leva para trocar de administradora?",
      a: "Em média, 30 a 45 dias. Cuidamos do aviso prévio à administradora atual, da migração dos dados, da abertura da nova conta vinculada e da comunicação com os condôminos. O síndico não precisa se preocupar com nada operacional." },
    { q: "Vocês atendem condomínios fora da Região dos Lagos?",
      a: "Hoje atuamos diretamente em Saquarema, Cabo Frio, Maricá, Búzios, Arraial do Cabo, Araruama, São Pedro da Aldeia e Iguaba Grande. Para outras cidades, entre em contato — avaliamos caso a caso." },
    { q: "Como funciona a presença nas reuniões?",
      a: "Nossa equipe está presente fisicamente nas assembleias e reuniões do conselho. Conduzimos a reunião, registramos o que foi decidido e ainda preparamos a ata na hora. Em condomínios mais distantes, mantemos a mesma presença, com agenda combinada." },
    { q: "O contrato tem multa por rescisão?",
      a: "O contrato é anual, com aviso prévio de 45 dias e multa proporcional. É o mesmo modelo das administradoras tradicionais, mas sem taxas escondidas e com cláusulas claras desde o início." },
    { q: "E se eu já tiver uma administradora hoje, vale a pena trocar?",
      a: "Na maioria dos casos, sim — especialmente se há queixas de demora, falta de transparência, inadimplência crescente ou pouca presença nas reuniões. Fazemos um diagnóstico gratuito antes, para você decidir com base no cenário do seu condomínio." },
    { q: "O aplicativo é obrigatório? Tem condômino mais idoso que não usa celular.",
      a: "Não é obrigatório. Quem prefere o boleto impresso continua recebendo o boleto impresso. Quem prefere o e-mail, recebe por e-mail. O aplicativo é uma opção a mais — quem quiser usar, usa; quem não quiser, segue do jeito que sempre fez." }
  ];
  return (
    <div style={{ borderTop: "1px solid var(--border-gold)" }}>
      {items.map((it, i) => (
        <div key={i} style={{ borderBottom: "1px solid var(--border-gold)" }}>
          <button
            onClick={() => setOpen(open === i ? -1 : i)}
            style={{
              width: "100%", textAlign: "left",
              padding: "30px 0", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24
            }}
          >
            <span style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 400, letterSpacing: "-0.015em" }}>{it.q}</span>
            <span style={{
              width: 40, height: 40, borderRadius: "50%",
              background: open === i ? "var(--navy-900)" : "transparent",
              color: open === i ? "#fff" : "var(--text)",
              border: open === i ? "none" : "1px solid var(--border-strong)",
              display: "flex", alignItems: "center", justifyContent: "center",
              flexShrink: 0,
              transform: open === i ? "rotate(45deg)" : "none",
              transition: "all .25s ease",
              fontSize: 18
            }}>+</span>
          </button>
          {open === i && (
            <p style={{ paddingBottom: 32, fontSize: 16, color: "var(--text-soft)", maxWidth: 760, lineHeight: 1.65 }}>
              {it.a}
            </p>
          )}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Services, ServiceBlock, PlanTh, FeatureRow, FAQList });