Embed

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Oferta de Trabalho</title>
  <style>
    :root {
      --bg: #f3efe6;
      --panel: rgba(255, 252, 246, 0.92);
      --panel-strong: #fffaf1;
      --text: #243127;
      --muted: #677566;
      --line: rgba(36, 49, 39, 0.12);
      --accent: #3d7a57;
      --accent-soft: #dbeedd;
      --accent-soft-2: rgba(61, 122, 87, 0.14);
      --danger: #bb4d3e;
      --danger-soft: #f8e2df;
      --shadow: 0 20px 60px rgba(54, 66, 52, 0.12);
      --radius-lg: 28px;
      --radius-md: 18px;
      --radius-sm: 12px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(99, 151, 115, 0.18), transparent 32%),
        radial-gradient(circle at bottom right, rgba(222, 184, 135, 0.22), transparent 28%),
        linear-gradient(180deg, #f7f3ea 0%, #efe8dd 100%);
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .shell {
      width: min(100%, 560px);
      background: var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.65);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .header {
      padding: 28px 28px 18px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
    }

    .eyebrow {
      margin: 0 0 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .title {
      margin: 0;
      font-size: clamp(28px, 4vw, 36px);
      line-height: 1.05;
    }

    .subtitle {
      margin: 12px 0 0;
      color: var(--muted);
      line-height: 1.5;
      font-size: 15px;
    }

    .content {
      padding: 0 28px 28px;
    }

    .card {
      background: var(--panel-strong);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 22px;
      min-height: 420px;
      display: grid;
      gap: 20px;
    }

    .status-view {
      display: grid;
      align-content: center;
      gap: 14px;
      min-height: 360px;
      text-align: center;
    }

    .status-view h2,
    .success h2 {
      margin: 0;
      font-size: 30px;
    }

    .status-view p,
    .success p {
      margin: 0;
      color: var(--muted);
      line-height: 1.5;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-self: start;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .pill.danger {
      background: var(--danger-soft);
      color: var(--danger);
    }

    .offer-head {
      display: grid;
      gap: 12px;
    }

    .offer-title {
      margin: 0;
      font-size: clamp(24px, 3vw, 32px);
      line-height: 1.12;
    }

    .offer-location {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.4;
    }

    .summary {
      display: grid;
      gap: 12px;
    }

    .summary-item {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 14px 16px;
    }

    .summary-label {
      display: block;
      margin-bottom: 6px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .summary-value {
      font-size: 16px;
      line-height: 1.45;
    }

    .description {
      padding: 18px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(61, 122, 87, 0.08), rgba(61, 122, 87, 0.03));
      border: 1px solid var(--accent-soft-2);
      line-height: 1.55;
    }

    .description-title {
      display: block;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .actions {
      display: grid;
      gap: 12px;
      margin-top: 4px;
    }

    .button-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    button {
      appearance: none;
      border: 0;
      border-radius: 999px;
      padding: 15px 18px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: transform 160ms ease, opacity 160ms ease, background-color 160ms ease;
    }

    button:hover {
      transform: translateY(-1px);
    }

    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .button-primary {
      background: var(--accent);
      color: #fff;
    }

    .button-secondary {
      background: rgba(36, 49, 39, 0.08);
      color: var(--text);
    }

    .feedback {
      min-height: 22px;
      font-size: 14px;
      font-weight: 600;
      color: var(--muted);
    }

    .feedback.error {
      color: var(--danger);
    }

    .feedback.success {
      color: var(--accent);
    }

    .success {
      display: grid;
      gap: 14px;
      align-content: center;
      min-height: 360px;
    }

    .success .pill {
      justify-self: start;
    }

    @media (max-width: 640px) {
      body {
        padding: 0;
      }

      .shell {
        min-height: 100vh;
        width: 100%;
        border-radius: 0;
      }

      .header,
      .content {
        padding-left: 20px;
        padding-right: 20px;
      }

      .card {
        min-height: calc(100vh - 180px);
        border-radius: 20px 20px 0 0;
      }

      .button-row {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <main class="shell">
    <header class="header">
      <p class="eyebrow">Convite de Trabalho</p>
      <h1 class="title">Oferta para cuidadores</h1>
      <p class="subtitle">Veja os detalhes da vaga e nos diga se deseja seguir com esta oportunidade.</p>
    </header>

    <section class="content">
      <div id="app" class="card" aria-live="polite"></div>
    </section>
  </main>

  <script>
    const params = new URLSearchParams(window.location.search);
    const salesId = params.get("salesId") || "mock-sales-id";
    const MOCK_MODE = true;
    const MOCK_OFFER = {
      salesId: "uuid",
      title: "Cuidador de Idoso",
      exclusiveLabel: "vaga exclusiva para mulheres",
      city: "Serra",
      district: "Colina de Laranjeiras",
      startDate: "10/04/2026",
      endDate: "20/04/2026",
      workDays: "De Segunda a Sexta-Feira",
      shiftStart: "07:00",
      shiftEnd: "19:00",
      meiRequired: true,
      description: "Obrigatório MEI (te ajudamos a criar se não possuir)"
    };

    const app = document.getElementById("app");
    const state = {
      loading: true,
      submitting: false,
      submitted: false,
      offer: null,
      feedback: "",
      feedbackType: ""
    };

    function formatDateRange(startDate, endDate) {
      if (startDate && endDate) {
        return `${startDate} até ${endDate}`;
      }

      return startDate || endDate || "A combinar";
    }

    function formatShift(start, end) {
      if (start && end) {
        return `${start} às ${end}`;
      }

      return start || end || "A combinar";
    }

    function renderLoading() {
      app.innerHTML = `
        <div class="status-view">
          <span class="pill">Carregando vaga</span>
          <h2>Buscando os detalhes da oferta</h2>
          <p>Estamos preparando as informações para você.</p>
        </div>
      `;
    }

    function renderError(message) {
      app.innerHTML = `
        <div class="status-view">
          <span class="pill danger">Não foi possível carregar</span>
          <h2>Oferta indisponível</h2>
          <p>${message}</p>
        </div>
      `;
    }

    function renderSuccess(interested) {
      app.innerHTML = `
        <div class="success">
          <span class="pill">${interested ? "Interesse registrado" : "Resposta registrada"}</span>
          <h2>${interested ? "Perfeito, vamos seguir com você" : "Tudo certo, resposta recebida"}</h2>
          <p>${interested
            ? "Seu interesse foi enviado. Nossa equipe deve entrar em contato com os próximos passos."
            : "Registramos que você não tem interesse nesta vaga no momento."}</p>
        </div>
      `;
    }

    function renderOffer() {
      const offer = state.offer;

      if (!offer) {
        renderError("Não encontramos os dados desta vaga.");
        return;
      }

      const feedbackClass = state.feedbackType ? `feedback ${state.feedbackType}` : "feedback";
      const meiLabel = offer.meiRequired ? "Sim, é necessário ter MEI" : "Não, MEI não é obrigatório";

      app.innerHTML = `
        <div class="offer-head">
          ${offer.exclusiveLabel ? `<span class="pill">${offer.exclusiveLabel}</span>` : ""}
          <h2 class="offer-title">${offer.title || "Oferta de trabalho"}</h2>
          <div class="offer-location">${[offer.district, offer.city].filter(Boolean).join(" • ") || "Local a confirmar"}</div>
        </div>

        <div class="summary">
          <div class="summary-item">
            <span class="summary-label">Período</span>
            <div class="summary-value">${formatDateRange(offer.startDate, offer.endDate)}</div>
          </div>
          <div class="summary-item">
            <span class="summary-label">Dias de trabalho</span>
            <div class="summary-value">${offer.workDays || "A combinar"}</div>
          </div>
          <div class="summary-item">
            <span class="summary-label">Horário</span>
            <div class="summary-value">${formatShift(offer.shiftStart, offer.shiftEnd)}</div>
          </div>
          <div class="summary-item">
            <span class="summary-label">MEI</span>
            <div class="summary-value">${meiLabel}</div>
          </div>
        </div>

        <div class="description">
          <span class="description-title">Observações</span>
          <div>${offer.description || "Sem observações adicionais."}</div>
        </div>

        <div class="actions">
          <div id="feedback" class="${feedbackClass}">${state.feedback || ""}</div>
          <div class="button-row">
            <button id="interestButton" class="button-primary" type="button" ${state.submitting ? "disabled" : ""}>Tenho interesse</button>
            <button id="declineButton" class="button-secondary" type="button" ${state.submitting ? "disabled" : ""}>Não tenho interesse</button>
          </div>
        </div>
      `;

      document.getElementById("interestButton").addEventListener("click", () => submitAnswer(true));
      document.getElementById("declineButton").addEventListener("click", () => submitAnswer(false));
    }

    function render() {
      if (state.loading) {
        renderLoading();
        return;
      }

      if (state.submitted) {
        renderSuccess(state.submitted === "interested");
        return;
      }

      renderOffer();
    }

    async function loadOffer() {
      renderLoading();

      try {
        if (MOCK_MODE) {
          await new Promise((resolve) => setTimeout(resolve, 350));
          state.offer = { ...MOCK_OFFER, salesId };
        } else {
          throw new Error("Integração com backend ainda não habilitada.");
        }
        state.loading = false;
        render();
      } catch (error) {
        state.loading = false;
        renderError(error.message || "Erro ao buscar a vaga.");
      }
    }

    async function submitAnswer(interested) {
      if (!state.offer || state.submitting) {
        return;
      }

      state.submitting = true;
      state.feedbackType = "";
      state.feedback = "Enviando sua resposta...";
      render();

      const payload = {
        salesId: state.offer.salesId || salesId,
        interested
      };

      try {
        if (MOCK_MODE) {
          console.log("Mock POST /work-offer/response", payload);
          await new Promise((resolve) => setTimeout(resolve, 300));
        } else {
          throw new Error("Integração com backend ainda não habilitada.");
        }

        state.submitting = false;
        state.submitted = interested ? "interested" : "declined";
        render();
      } catch (error) {
        state.submitting = false;
        state.feedbackType = "error";
        state.feedback = error.message || "Erro ao enviar sua resposta.";
        render();
      }
    }

    loadOffer();
  </script>
</body>
</html>


Vital Assist - Home Care

We offer a new standard in care: we find, train, and empower the best caregivers, supported by a system that records all tasks in real time and generates transparent reports.

All to provide comfort, care, and safety for those receiving care—and peace of mind for those accompanying care.