// pages/servicos.jsx — Página Serviços
function ServicesPageHero({ t, theme }) {
  return (
    <header className="mc-services-page-hero" data-screen-label="Servicos Hero">
      <div className="mc-services-page-hero-inner">
        <div className="mc-services-page-hero-copy" data-reveal="left">
          <div className="mc-eyebrow">
            <span className="mc-tick" style={{ background: theme.accent }}></span>
            {t.services_eyebrow}
          </div>
          <h1>{t.services_title}</h1>
          <p>{t.services_page_lede}</p>
        </div>
        <div className="mc-services-page-metrics" data-reveal="up">
          {(t.services_page_metrics || []).map(([value, label]) => (
            <div key={value}>
              <strong style={{ color: theme.accent }}>{value}</strong>
              <span>{label}</span>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

function ServicesCards({ t, theme }) {
  return (
    <Section id="servicos" theme={theme} eyebrow={t.services_eyebrow} title={t.services_title} label="Servicos">
      <div className="mc-services-page-grid">
        {t.services.map((service) => (
          <article className="mc-services-page-card" key={service.code}>
            <div className="mc-services-page-card-top">
              <span style={{ color: theme.accent }}>{service.code}</span>
              <div className="mc-services-page-card-rule" style={{ background: theme.rule }}></div>
            </div>
            <h3>{service.t}</h3>
            <p>{service.d}</p>
            <ul>
              {service.deliverables.map((item) => (
                <li key={item}>
                  <span className="mc-bullet" style={{ background: theme.accent }}></span>
                  {item}
                </li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </Section>
  );
}

function ProgramIcon({ type }) {
  if (type === "plus") {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 5v14M5 12h14" />
      </svg>
    );
  }
  if (type === "chart") {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M5 17h14M7 14l3-4 3 3 4-6M7 14l3 0M13 13l4 0" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M8 7h8M8 12h8M8 17h6" />
    </svg>
  );
}

function ServicesPrograms({ t, theme }) {
  const [open, setOpen] = React.useState(() => (t.services_programs || []).map((_, index) => index));
  const toggleScope = (index) => {
    setOpen((current) =>
      current.includes(index)
        ? current.filter((item) => item !== index)
        : [...current, index]
    );
  };

  return (
    <section className="mc-programs" data-screen-label="Programas">
      <div className="mc-programs-inner">
        <div className="mc-programs-head">
          <div className="mc-eyebrow">
            <span className="mc-tick" style={{ background: theme.accent }}></span>
            {t.services_programs_eyebrow}
          </div>
          <h2>{t.services_programs_title}</h2>
          <p>{t.services_programs_lede}</p>
        </div>
        <div className="mc-programs-grid">
          {(t.services_programs || []).map((program, index) => {
            const isOpen = open.includes(index);
            return (
            <article className={`mc-program-card ${isOpen ? "scope-open" : "scope-closed"}`} key={program.t}>
              <div className="mc-program-top">
                <div className="mc-program-icon" style={{ color: theme.accent, borderColor: theme.rule }}>
                  <ProgramIcon type={program.icon} />
                </div>
                <div>
                  <h3>{program.t}</h3>
                  <p>{program.d}</p>
                </div>
              </div>
              <div className="mc-program-tags">
                {program.tags.map((tag) => <span key={tag}>{tag}</span>)}
              </div>
              <div className="mc-program-actions">
                <a href={linkTo("contato", "contato.html")} className="mc-program-primary" style={{ background: theme.accent, color: theme.onAccent }}>
                  {t.services_programs_cta}
                </a>
                <button
                  type="button"
                  className="mc-program-secondary"
                  onClick={() => toggleScope(index)}
                  aria-expanded={isOpen}
                  style={{ borderColor: theme.rule }}
                >
                  {isOpen ? t.services_programs_scope_cta : t.services_programs_scope_open_cta}
                </button>
              </div>
              {isOpen && <div className="mc-program-scope">
                <strong>{t.services_programs_scope_label}</strong>
                <ul>
                  {program.scope.map((item) => <li key={item}>{item}</li>)}
                </ul>
              </div>}
            </article>
          );})}
        </div>
      </div>
    </section>
  );
}

function ServicesFit({ t, theme }) {
  return (
    <Section id="quando-chamar" theme={theme} eyebrow={t.services_fit_eyebrow} title={t.services_fit_title} label="Quando chamar">
      <div className="mc-services-fit">
        {t.problems.map((problem) => (
          <article className="mc-services-fit-item" key={problem.n}>
            <span style={{ color: theme.accent }}>{problem.n}</span>
            <h3>{problem.t}</h3>
            <p>{problem.d}</p>
          </article>
        ))}
      </div>
    </Section>
  );
}

function ServicesMethod({ t, theme }) {
  return (
    <Section id="metodo" theme={theme} eyebrow={t.services_method_eyebrow} title={t.services_method_title} label="Metodo">
      <div className="mc-services-method">
        {(t.services_method_steps || []).map((step) => (
          <article className="mc-services-method-step" key={step.n}>
            <div className="mc-services-method-num" style={{ color: theme.accent }}>{step.n}</div>
            <h3>{step.t}</h3>
            <p>{step.d}</p>
          </article>
        ))}
      </div>
    </Section>
  );
}

function ServicosPage() {
  return (
    <PageShell current="servicos">
      {({ copy: t, theme }) => (
        <>
          <ServicesPageHero t={t} theme={theme} />
          <ServicesPrograms t={t} theme={theme} />
          <ServicesCards t={t} theme={theme} />
          <ServicesFit t={t} theme={theme} />
          <ServicesMethod t={t} theme={theme} />
          <FinalCTA t={t} theme={theme} />
        </>
      )}
    </PageShell>
  );
}
renderModroPage(<ServicosPage />);