// pages/contato.jsx — Página Contato
function ContactHero({ t, theme }) {
  const email = window.MODRO_EMAIL || t.footer_email || "modroconsultoria@gmail.com";
  const phone = t.footer_phone || "+55 47 9974-7727";
  const whatsappMessage = "Olá, gostaria de conversar com a Modro Consultoria.";

  return (
    <header className="mc-contact-hero" data-screen-label="Contato Hero">
      <div className="mc-contact-hero-inner">
        <div className="mc-contact-hero-copy" data-reveal="left">
          <div className="mc-eyebrow">
            <span className="mc-tick" style={{ background: theme.accent }}></span>
            {t.contact_eyebrow}
          </div>
          <h1>{t.contact_title}</h1>
          <p>{t.contact_lede}</p>
        </div>

        <aside className="mc-contact-direct" data-reveal="up" style={{ borderColor: theme.rule }}>
          <div className="mc-contact-direct-head">
            <span style={{ color: theme.accent }}>{t.contact_direct_title}</span>
            <p>{t.contact_direct_lede}</p>
          </div>

          <div className="mc-contact-direct-list">
            <a className="mc-contact-direct-card is-primary" href={whatsappHref(whatsappMessage)} target="_blank" rel="noopener noreferrer" style={{ background: theme.accent, color: theme.onAccent }}>
              <WhatsIcon />
              <div>
                <strong>{t.contact_whatsapp_label}</strong>
                <span>{phone}</span>
              </div>
            </a>
            <a className="mc-contact-direct-card" href={`mailto:${email}`} style={{ borderColor: theme.rule, color: theme.fg }}>
              <span aria-hidden="true">@</span>
              <div>
                <strong>{t.contact_email_label}</strong>
                <span>{email}</span>
              </div>
            </a>
            <div className="mc-contact-direct-card" style={{ borderColor: theme.rule, color: theme.fg }}>
              <span aria-hidden="true">BR</span>
              <div>
                <strong>{t.contact_base_label}</strong>
                <span>{t.footer_addr}</span>
              </div>
            </div>
          </div>

          <div className="mc-contact-response" style={{ borderColor: theme.rule }}>
            {t.contact_response_label}
          </div>
        </aside>
      </div>
    </header>
  );
}

function ContactSteps({ t, theme }) {
  return (
    <section className="mc-contact-steps-section" data-screen-label="Como funciona">
      <div className="mc-contact-steps-head">
        <div className="mc-eyebrow">
          <span className="mc-tick" style={{ background: theme.accent }}></span>
          {t.contact_steps_eyebrow}
        </div>
        <h2>{t.contact_steps_title}</h2>
      </div>

      <div className="mc-contact-steps-grid">
        {(t.contact_steps || []).map((step) => (
          <article className="mc-contact-step" key={step.n}>
            <span style={{ color: theme.accent }}>{step.n}</span>
            <h3>{step.t}</h3>
            <p>{step.d}</p>
          </article>
        ))}
      </div>

      <div className="mc-contact-highlight" style={{ borderColor: theme.rule }}>
        <strong>{t.contact_highlight_title}</strong>
        <p>{t.contact_highlight_text}</p>
      </div>
    </section>
  );
}

function ContatoPage() {
  return (
    <PageShell current="contato">
      {({ copy: t, theme }) => (
        <>
          <ContactHero t={t} theme={theme} />
          <ContactSteps t={t} theme={theme} />
          <ContactForm t={t} theme={theme} />
        </>
      )}
    </PageShell>
  );
}

renderModroPage(<ContatoPage />);