// lembra ai — site institucional · mockups WhatsApp

const { useState, useEffect, useRef } = React;

// Todos os CTAs do site caem no formulário Google pra captação organizada.
const CTA_FORM_URL = "https://docs.google.com/forms/d/e/1FAIpQLSdYicma7ugibCPKOpy8gLvFQzuKqMrWmw5R8ilQsMzxM-s1jw/viewform";
const WA_LINK = CTA_FORM_URL;
const WA_LINK_TRIAL = CTA_FORM_URL;

/* ---------- PHONE SHELL ---------- */
const PhoneShell = ({ contactName = "lembra ai", subtitle = "online", children, inputPlaceholder = "Mensagem" }) =>
  <div className="wa-phone">
    <div className="wa-status">
      <span>9:42</span>
      <span>●●●● 4G</span>
    </div>
    <div className="wa-mock-header">
      <span className="back">‹</span>
      <div className="wa-avatar-mock">
        L
        <span className="ai-mini">ai✦</span>
      </div>
      <div className="wa-name">
        <b>{contactName}</b>
        <small>{subtitle}</small>
      </div>
      <span className="wa-call">📞</span>
    </div>
    <div className="wa-chat">{children}</div>
    <div className="wa-input">
      <span className="wa-emoji">😊</span>
      <div className="wa-input-box">{inputPlaceholder}</div>
      <span className="wa-mic">🎤</span>
    </div>
  </div>;

/* ---------- MESSAGE PARTS ---------- */
const Day = ({ children }) => <div className="wa-day">{children}</div>;

const Msg = ({ type = "in", time, children, full = false }) =>
  <div className={"wa-msg " + type} style={full ? { maxWidth: "92%" } : null}>
    {children}
    {time ? <span className="t">{time}</span> : null}
  </div>;

/* Inline italic helper for *bold* asterisk-style markdown used by WhatsApp */
const formatWaText = (text) => {
  if (!text) return null;
  const parts = text.split(/(\*[^*]+\*)/g);
  return parts.map((p, i) => {
    if (p.startsWith("*") && p.endsWith("*")) {
      return <strong key={i}>{p.slice(1, -1)}</strong>;
    }
    return <span key={i}>{p}</span>;
  });
};

const Actions = ({ items }) =>
  <div className="wa-actions">
    {items.map((it, i) =>
      <button key={i} className={"wa-action-btn " + (it.primary ? "primary" : "")} type="button" tabIndex={-1}>
        {it.label}
      </button>
    )}
  </div>;

/* ---------- 5 SCENARIOS ---------- */

// 1 · Lembrete de remédio + botões
const ConvRemedio = () =>
  <PhoneShell>
    <Day>HOJE</Day>
    <Msg time="08:00">Olá José! 😊</Msg>
    <Msg time="08:00">
      Está na hora de tomar <strong>Losartana</strong> 💊
    </Msg>
    <Msg time="08:00">
      Já tomou?
      <Actions items={[
        { label: "Já tomei ✅", primary: true },
        { label: "Vou tomar em breve ⏳" }
      ]} />
    </Msg>
    <Msg type="out" time="08:02 ✓✓">Já tomei ✅</Msg>
    <Msg time="08:02">Ótimo! Anotado 👍 Continue assim, José!</Msg>
  </PhoneShell>;

// 2 · Adiar 15min
const ConvAdiar = () =>
  <PhoneShell>
    <Day>HOJE</Day>
    <Msg time="08:00">Está na hora de tomar <strong>Losartana</strong> 💊 Já tomou?</Msg>
    <Msg type="out" time="08:01 ✓✓">Vou tomar em breve ⏳</Msg>
    <Msg time="08:01">Ok! Vou te lembrar de novo daqui a 15 minutos.</Msg>
    <Day>15 MINUTOS DEPOIS</Day>
    <Msg time="08:16">Olá José! 😊</Msg>
    <Msg time="08:16">
      Passando pra lembrar de novo da <strong>Losartana</strong> 💊 Já conseguiu tomar?
      <Actions items={[
        { label: "Já tomei ✅", primary: true },
        { label: "Vou tomar em breve ⏳" }
      ]} />
    </Msg>
  </PhoneShell>;

// 3 · Consulta médica
const ConvConsulta = () =>
  <PhoneShell>
    <Day>HOJE</Day>
    <Msg time="18:30">Olá José! 😊</Msg>
    <Msg time="18:30">
      Como foi a consulta com <strong>Dr. João</strong>?
      <Actions items={[
        { label: "Compareci ✅", primary: true },
        { label: "Não consegui ir" }
      ]} />
    </Msg>
    <Msg type="out" time="18:34 ✓✓">Compareci ✅</Msg>
    <Msg time="18:34" full>
      Ótimo, José! Fico feliz que você tenha comparecido à consulta com Dr. João 💙
    </Msg>
  </PhoneShell>;

// 4 · Alerta de inatividade (família)
const ConvAlerta = () =>
  <PhoneShell contactName="lembra ai" subtitle="online">
    <Day>HOJE</Day>
    <Msg time="14:00" full>
      Olá Carlos 😊
    </Msg>
    <Msg time="14:00" full>
      O <strong>José</strong> não interage com o lembra ai há mais de <strong>24 horas</strong>.
    </Msg>
    <Msg time="14:00" full>
      Talvez seja bom verificar se está tudo bem 💚
      <Actions items={[
        { label: "Vou ligar agora", primary: true },
        { label: "Já falei com ela" }
      ]} />
    </Msg>
  </PhoneShell>;

// 5 · Resumo semanal família
const ConvResumo = () =>
  <PhoneShell>
    <Day>DOMINGO</Day>
    <Msg time="20:00">Olá Carlos 👋</Msg>
    <Msg time="20:00" full>
      <div style={{ fontWeight: 800, color: "var(--green-deep)", fontSize: 17, marginBottom: 6 }}>
        Resumo semanal do José 💚
      </div>
      <div className="wa-summary">
        <div className="wa-summary-row"><span className="ic">✅</span><span>Medicamentos confirmados: <b>18</b></span></div>
        <div className="wa-summary-row"><span className="ic">⏳</span><span>Lembretes adiados: <b>2</b></span></div>
        <div className="wa-summary-row"><span className="ic">📅</span><span>Consultas realizadas: <b>1</b></span></div>
        <div className="wa-summary-row"><span className="ic">💊</span><span>Acompanhados: <b>Losartana, Rivotril</b></span></div>
      </div>
      <div style={{ marginTop: 8 }}>Tudo parece estar indo bem esta semana 😊</div>
    </Msg>
    <Msg type="out" time="20:08 ✓✓">Que ótimo! Obrigado 💚</Msg>
  </PhoneShell>;

window.Mockups = {
  PhoneShell, Msg, Day, Actions,
  ConvRemedio, ConvAdiar, ConvConsulta, ConvAlerta, ConvResumo,
  WA_LINK, WA_LINK_TRIAL
};