// Mid sections: Pain (Dor), How it works, Mechanism (Não é chatbot), Benefits

// ─── Section 5: Identificação da dor ───
const PainSection = () => {
  const bullets = [
    { icon: "Clock",   txt: "Mensagem chega 22h. Você responde 8h da manhã. Paciente já foi pra outra clínica." },
    { icon: "Calendar",txt: "Agenda confirmada por SMS, paciente esquece, no-show. Lá se vai a hora cheia." },
    { icon: "Repeat",  txt: "Mesma pergunta 15 vezes por dia: \u201cquanto custa?\u201d, \u201catende convênio?\u201d, \u201ctem horário sexta?\u201d." },
    { icon: "User",    txt: "Paciente que sumiu há 6 meses ninguém liga, porque não tem tempo. Receita perdida." },
    { icon: "Bolt",    txt: "Você compete com clínica que tem secretária respondendo na hora, mas R$ 2.500/mês de CLT não cabe." },
    { icon: "Moon",    txt: "Domingo de manhã não é descanso, é \u201cvou só dar uma olhada na agenda da semana\u201d." },
  ];
  return (
    <section className="section" id="dor">
      <div className="container">
        <SectionHead
          eyebrow="A dor de quem atende sozinho"
          title={<>O WhatsApp da clínica<br/>não dorme. <span style={{ color: "var(--muted)" }}>E você também não.</span></>}
          lede="Não é falta de paciente. É falta de tempo pra responder, confirmar e reativar quem sumiu, enquanto você ainda atende."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 20 }}>
          {bullets.map((b, i) => {
            const Icon = G[b.icon];
            return (
              <div key={i} className="tile" style={{ padding: "26px 26px 28px", display: "flex", flexDirection: "column", gap: 16, minHeight: 180 }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--bg)", display: "grid", placeItems: "center", color: "var(--ink)" }}>
                  <Icon width={22} height={22} />
                </div>
                <p className="body" style={{ margin: 0, color: "var(--ink)", fontWeight: 500, fontSize: 16.5, lineHeight: 1.45 }}>{b.txt}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ─── Section 6: Como funciona ───
const HowItWorks = () => {
  const steps = [
    {
      n: "01", t: "Configura em 30 minutos",
      d: "Você responde um questionário curto sobre sua clínica: especialidades, horários, valores, regras de cancelamento. O tom é sempre educado e próximo, com respostas humanizadas. Pronto.",
      mock: <ConfigMock />,
    },
    {
      n: "02", t: "A gente sobe em 48h",
      d: "Conectamos o número do WhatsApp da sua clínica e as consultas marcadas poderão ser sincronizadas com a sua agenda do Google ou Hotmail. Você testa. Aprova. Vai pro ar.",
      mock: <DeployMock />,
    },
    {
      n: "03", t: "Ela trabalha, você atende",
      d: "Paciente novo manda mensagem? A Allora responde, qualifica, oferece horário e agenda. Paciente antigo? Confirma 24h antes. Sumiu há 3 meses? Reativa com mensagem certeira.",
      mock: <WorkingMock />,
    },
  ];
  return (
    <section className="section" id="como-funciona">
      <div className="container">
        <SectionHead
          eyebrow="Como funciona"
          title={<>Três passos.<br/>Esta semana no ar.</>}
          lede="Não é projeto de 3 meses com consultoria. Você gasta meia hora; o resto é com a gente."
        />
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          {steps.map((s, i) => (
            <div key={i} className="card" style={{ padding: "clamp(28px, 4vw, 48px)", display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 32, alignItems: "center" }}>
              <div style={{ gridColumn: "span 6", minWidth: 0 }}>
                <div className="eyebrow" style={{ color: "var(--accent-deep)", marginBottom: 12 }}>Passo {s.n}</div>
                <h3 className="display display-sm" style={{ margin: "0 0 16px", fontWeight: 700 }}>{s.t}</h3>
                <p className="body" style={{ margin: 0, maxWidth: "48ch" }}>{s.d}</p>
              </div>
              <div style={{ gridColumn: "span 6", minWidth: 0 }}>{s.mock}</div>
            </div>
          ))}
        </div>

        <MechanismCallout />
      </div>
    </section>
  );
};

// step 1 mock — configurator
const ConfigMock = () => (
  <div className="tile" style={{ padding: 22, background: "var(--bg)", border: "1px dashed var(--line-strong)" }}>
    <div className="small" style={{ fontFamily: "JetBrains Mono, monospace", color: "var(--muted)", marginBottom: 12 }}>configuração inicial · 7/8</div>
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <FieldRow label="Nome do profissional" value="Dra. Júlia Ferraz" />
      <FieldRow label="Nome da clínica" value="Espaço Viva Psicologia" />
      <FieldRow label="Nome da secretária" value="Sofia" />
      <FieldRow label="Especialidades" value="Psicologia, Avaliação neuropsicológica" />
      <FieldRow label="Sessão padrão" value="50 min · R$ 280" />
      <FieldRow label="Cancelamento" value="Sem cobrança até 24h antes" highlight />
    </div>
    <div style={{ height: 4, background: "var(--bg-card)", borderRadius: 999, marginTop: 18, overflow: "hidden" }}>
      <div style={{ width: "88%", height: "100%", background: "var(--accent)" }} />
    </div>
  </div>
);
const FieldRow = ({ label, value, highlight }) => (
  <div style={{
    display: "flex", justifyContent: "space-between", alignItems: "center",
    padding: "10px 14px", background: "var(--bg-card)", borderRadius: 10,
    border: highlight ? "1px solid var(--accent)" : "1px solid var(--line)",
    fontSize: 13,
  }}>
    <span style={{ color: "var(--muted)" }}>{label}</span>
    <span style={{ color: "var(--ink)", fontWeight: 500, textAlign: "right", maxWidth: "60%" }}>{value}</span>
  </div>
);

// step 2 mock — integrations
const DeployMock = () => {
  const integ = [
    { t: "WhatsApp Business", st: "Conectado", ok: true },
    { t: "Agenda Allora", st: "Sincronizando", ok: true },
    { t: "Calendário Google", st: "Sincronizando", ok: true },
    { t: "Calendário Hotmail", st: "Sincronizando", ok: true },
  ];
  return (
    <div className="tile" style={{ padding: 22, background: "var(--bg)" }}>
      <div className="small" style={{ fontFamily: "JetBrains Mono, monospace", color: "var(--muted)", marginBottom: 12 }}>implantação · 41h 22min restantes</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {integ.map((it, i) => (
          <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 14px", background: "var(--bg-card)", borderRadius: 10, border: "1px solid var(--line)", fontSize: 13 }}>
            <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 18, height: 18, borderRadius: "50%", background: "var(--accent-tint)", color: "var(--accent-deep)", display: "grid", placeItems: "center" }}>
                <G.Check width={12} height={12} strokeWidth={3} />
              </span>
              {it.t}
            </span>
            <span style={{ color: "var(--muted)", fontSize: 12 }}>{it.st}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// step 3 mock — live activity
const WorkingMock = () => {
  const events = [
    { type: "agendou", txt: "Camila B. · sex 16h30", t: "agora" },
    { type: "confirmou", txt: "Ricardo M. · qui 09h00", t: "1 min" },
    { type: "reativou", txt: "Marina S. · sumiu há 4 meses", t: "8 min" },
    { type: "transferiu", txt: "Caso clínico · passou pra você", t: "12 min" },
  ];
  const tag = {
    agendou:   { c: "var(--accent-deep)", b: "var(--accent-tint)" },
    confirmou: { c: "#1e40af", b: "#dbeafe" },
    reativou:  { c: "#92400e", b: "#fef3c7" },
    transferiu:{ c: "#6b21a8", b: "#ede9fe" },
  };
  return (
    <div className="tile" style={{ padding: 22, background: "var(--bg)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
        <div className="small" style={{ fontFamily: "JetBrains Mono, monospace", color: "var(--muted)" }}>atividade ao vivo · últimas 24h</div>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5 }}>
          <span className="pulse-dot" /> ativo
        </span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {events.map((e, i) => (
          <div key={i} style={{ display: "flex", gap: 12, alignItems: "center", padding: "12px 14px", background: "var(--bg-card)", borderRadius: 10, border: "1px solid var(--line)", fontSize: 13 }}>
            <span style={{
              padding: "3px 8px", borderRadius: 6, fontSize: 11, fontWeight: 600,
              color: tag[e.type].c, background: tag[e.type].b,
              fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.04em", textTransform: "uppercase",
            }}>{e.type}</span>
            <span style={{ flex: 1, color: "var(--ink)" }}>{e.txt}</span>
            <span style={{ color: "var(--muted)", fontSize: 11.5 }}>{e.t}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── Mechanism callout ("não é mais um chatbot") ───
const MechanismCallout = () => (
  <div id="mecanismo" style={{ marginTop: 32 }}>
    <div className="card reveal" style={{
      padding: "clamp(32px, 5vw, 64px)",
      background: "var(--bg-cream, #F6F1E7)",
      border: "1px solid var(--line-strong)",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 32, alignItems: "center" }}>
        <div style={{ gridColumn: "span 7", minWidth: 0 }}>
          <div className="eyebrow" style={{ color: "var(--brand-green)", marginBottom: 16 }}>Por que não é mais um chatbot</div>
          <h3 className="display display-md" style={{ margin: 0, color: "var(--ink)" }}>
            Chatbot trava no <em style={{ fontStyle: "italic", color: "var(--brand-green)" }}>"e se eu chegar 10 minutos atrasado?"</em>
          </h3>
          <p className="body" style={{ color: "var(--ink-2)", marginTop: 22, maxWidth: "52ch" }}>
            A Allora é conversacional. Entende contexto, improvisa <em style={{ color: "var(--ink)" }}>dentro das regras que você definiu</em> e te passa a conversa quando precisa de decisão humana. Paciente não percebe que é IA. Você não perde controle.
          </p>
        </div>
        <div style={{ gridColumn: "span 5", minWidth: 0 }}>
          <ComparisonTable />
        </div>
      </div>
    </div>
  </div>
);

const ComparisonTable = () => {
  const rows = [
    ["Pergunta fora do roteiro", "Trava ou repete", "Improvisa nas regras"],
    ["Tom de voz", "\u201cDigite 1 pra agendar\u201d", "Conversa como gente"],
    ["Decisão difícil", "Insiste no fluxo", "Passa pra você"],
    ["Edição de regra", "Refazer fluxograma", "Você escreve e ela aplica"],
  ];
  return (
    <div style={{
      background: "var(--bg-card)",
      borderRadius: 16, padding: 8,
      border: "1px solid var(--line)",
      boxShadow: "var(--shadow-sm)",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr", gap: 1, fontSize: 11, fontFamily: "JetBrains Mono, monospace", color: "var(--muted)", padding: "10px 14px", textTransform: "uppercase", letterSpacing: "0.08em" }}>
        <div></div><div>Chatbot</div><div style={{ color: "var(--brand-green)" }}>Allora</div>
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr",
          padding: "14px",
          borderTop: "1px solid var(--line)",
          alignItems: "center",
          fontSize: 13,
        }}>
          <div style={{ color: "var(--ink-2)" }}>{r[0]}</div>
          <div style={{ color: "var(--muted)", textDecoration: "line-through" }}>{r[1]}</div>
          <div style={{ color: "var(--ink)", fontWeight: 500 }}>{r[2]}</div>
        </div>
      ))}
    </div>
  );
};

// ─── Section 7: Benefícios ───
const Benefits = () => {
  const items = [
    { t: "Você dorme. Ela responde.", d: "Mensagem das 23h vira agendamento confirmado pra terça, sem você abrir o celular.", glyph: "Moon", tint: "#1d1f3a" },
    { t: "No-show despenca.", d: "Confirmação 24h antes com link pra remarcar em 1 clique. Hora vaga vira hora ocupada.", glyph: "Calendar", tint: "#7a3a12" },
    { t: "Sua base antiga volta a render.", d: "Quem sumiu há 3, 6, 12 meses recebe uma mensagem natural. Quem precisa, volta.", glyph: "Repeat", tint: "#5a2e7a" },
    { t: "Zero agendamento duplicado.", d: "Agenda integrada de verdade, não planilha. Dois pacientes nunca caem no mesmo horário.", glyph: "Check", tint: "#0e5a32" },
    { t: "Atendimento humano de verdade.", d: "Sempre educado e próximo, com respostas humanizadas, sem \u201cdigite 1 pra agendar\u201d. Quem chega já chega bem atendido.", glyph: "Heart", tint: "#7a1d3a" },
    { t: "Economia de uma secretária CLT.", d: "Sem perder qualidade. Por menos do que custa um almoço da equipe por mês.", glyph: "Bolt", tint: "#7a5a00" },
    { t: "No ar esta semana.", d: "Não é projeto de 3 meses com consultoria. É 48h e tá rodando.", glyph: "Spark", tint: "#1a4a6e" },
    { t: "Cancela quando quiser.", d: "Sem fidelidade, sem multa, sem ligar pra cancelar. Botão no painel.", glyph: "Shield", tint: "#2a3a1a" },
  ];
  return (
    <section className="section" id="beneficios">
      <div className="container">
        <SectionHead
          eyebrow="Benefícios"
          title={<>O que muda<br/>na <em style={{ fontStyle: "italic" }}>segunda-feira</em>.</>}
          lede="Não vendemos features. Vendemos o que aparece na sua rotina assim que a Allora entra no ar."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
          {items.map((it, i) => {
            const Icon = G[it.glyph];
            return (
              <div key={i} className="tile" style={{ padding: "26px 26px 28px", display: "flex", flexDirection: "column", gap: 16, minHeight: 220 }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 14,
                  background: `color-mix(in srgb, ${it.tint} 12%, var(--bg-card))`,
                  color: it.tint,
                  display: "grid", placeItems: "center",
                  border: `1px solid color-mix(in srgb, ${it.tint} 24%, transparent)`,
                }}>
                  <Icon width={22} height={22} />
                </div>
                <h4 className="display" style={{ fontSize: 20, fontWeight: 700, margin: 0, lineHeight: 1.15 }}>{it.t}</h4>
                <p className="body" style={{ margin: 0, fontSize: 14.5, color: "var(--ink-2)" }}>{it.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PainSection, HowItWorks, Benefits });