// End sections: FAQ, Final CTA / PS, Contact form, Footer

// ─── Section 12: Urgência (REMOVED) ───
const Urgency = () => null;

const _WeekCapacity_unused = () => {
  const days = [
    { d: "Seg", taken: 2, slots: 1 },
    { d: "Ter", taken: 1, slots: 0 },
    { d: "Qua", taken: 1, slots: 0 },
    { d: "Qui", taken: 0, slots: 1 },
  ];
  const totalTaken = days.reduce((s, x) => s + x.taken, 0);
  const totalSlots = 2;
  return (
    <div className="tile" style={{ padding: 22, background: "var(--bg)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
        <div className="small" style={{ fontFamily: "JetBrains Mono, monospace", textTransform: "uppercase", letterSpacing: "0.06em" }}>semana de 25/05</div>
        <div className="small"><strong style={{ color: "var(--ink)" }}>{totalSlots}</strong> vagas abertas</div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {days.map((day, i) => {
          const filled = day.taken;
          const available = day.slots;
          return (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{ width: 40, fontSize: 13, fontFamily: "JetBrains Mono, monospace", color: "var(--muted)" }}>{day.d}</div>
              <div style={{ flex: 1, display: "flex", gap: 4 }}>
                {Array.from({ length: filled }).map((_, j) => (
                  <div key={`f${j}`} style={{ flex: 1, height: 28, borderRadius: 6, background: "var(--ink)", display: "grid", placeItems: "center", color: "var(--bg-card)", fontSize: 10, fontFamily: "JetBrains Mono, monospace" }}>•</div>
                ))}
                {Array.from({ length: available }).map((_, j) => (
                  <div key={`a${j}`} style={{ flex: 1, height: 28, borderRadius: 6, background: "var(--accent-tint)", border: "1px dashed var(--accent-deep)", display: "grid", placeItems: "center", color: "var(--accent-deep)", fontSize: 10, fontFamily: "JetBrains Mono, monospace" }}>aberta</div>
                ))}
                {Array.from({ length: 3 - filled - available }).map((_, j) => (
                  <div key={`e${j}`} style={{ flex: 1, height: 28, borderRadius: 6, background: "var(--bg-card)", border: "1px solid var(--line)" }} />
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ─── Section 13: FAQ ───
const Faq = () => {
  const items = [
    {
      q: "Quanto tempo leva pra estar funcionando?",
      a: "Você gasta 30 minutos no questionário inicial. A gente sobe em até 48 horas. Total: começa esta semana.",
    },
    {
      q: "Serve pra quem atende sozinho? E pra clínica com 5 profissionais?",
      a: "Sim pros dois. Starter pra quem atende sozinho. Pro pra quem tem 2+ profissionais. Premium pra quem quer dashboard e dado de gestão.",
    },
    {
      q: "E se eu não gostar?",
      a: "Cancela com 1 clique no painel, sem multa e sem precisar ligar. Além disso, o Código de Defesa do Consumidor prevê o direito de arrependimento, e nós estendemos esse prazo para 30 dias: se desistir nesse período, você recebe o valor de volta.",
    },
    {
      q: "Como é o atendimento? Parece robô?",
      a: "Não. É conversacional, sempre educado e próximo, com respostas humanizadas. A maioria dos pacientes não percebe que é IA. Você pode ouvir e ler todas as conversas no painel.",
    },
    {
      q: "Funciona com o número de WhatsApp que eu já uso?",
      a: "Sim. A gente integra com o WhatsApp da sua clínica. Não muda número, paciente continua usando o mesmo contato.",
    },
    {
      q: "E se a IA não souber responder?",
      a: "Ela te passa a conversa. Você responde manualmente pelo seu WhatsApp normal. A Allora aprende com a resposta pra próxima vez.",
    },
    {
      q: "Integra com o meu calendário?",
      a: "Sim. As consultas marcadas poderão ser sincronizadas com a sua agenda do Google ou Hotmail, automaticamente.",
    },
    {
      q: "Quais formas de pagamento?",
      a: "Cartão de crédito (mensal recorrente) ou Pix (anual, com desconto). Boleto pra plano Premium, mediante combinação.",
    },
    {
      q: "Meus dados e os dos meus pacientes ficam seguros? E a LGPD?",
      a: "Sim. Servidores no Brasil, dados criptografados em trânsito e em repouso, sem compartilhamento com terceiros. Estamos em conformidade com a LGPD. Política completa em /privacidade.",
    },
  ];

  return (
    <section className="section" id="faq">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 48 }}>
          <div style={{ gridColumn: "span 4", minWidth: 0, position: "sticky", top: 100, alignSelf: "flex-start" }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Perguntas frequentes</div>
            <h2 className="display display-md" style={{ margin: "0 0 22px", fontWeight: 700 }}>
              Tudo o que perguntam<br/>na primeira ligação.
            </h2>
            <p className="body" style={{ marginBottom: 22, color: "var(--ink-2)" }}>
              Não achou sua dúvida? Escreve pra gente.
            </p>
            <a className="btn btn-ghost" href="#contato">Falar com o nosso time →</a>
          </div>
          <div style={{ gridColumn: "span 8", minWidth: 0 }}>
            {items.map((it, i) => (
              <details key={i} className="faq" {...(i === 0 ? { open: true } : {})}>
                <summary>
                  <span>{it.q}</span>
                  <span className="toggle">+</span>
                </summary>
                <div className="answer">{it.a}</div>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Section 14 + 15: CTA final + PS ───
const FinalCta = ({ onCta }) => (
  <section className="section" id="cta">
    <div className="container">
      <div className="card reveal" style={{
        padding: "clamp(48px, 7vw, 96px) clamp(28px, 4vw, 64px)",
        background: "var(--bg-cream, #F6F1E7)",
        color: "var(--ink)",
        textAlign: "center",
        display: "flex", flexDirection: "column", gap: 28, alignItems: "center",
        position: "relative", overflow: "hidden",
        border: "1px solid var(--line-strong)",
      }}>
        {/* decorative glow */}
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%)", pointerEvents: "none" }} />

        <h2 className="display display-lg" style={{ margin: 0, color: "var(--ink)", maxWidth: "18ch", position: "relative", zIndex: 1 }}>
          Sua agenda da semana que vem pode estar cheia <em style={{ fontStyle: "italic", color: "var(--brand-green)" }}>sem você responder uma mensagem sequer</em>.
        </h2>
        <p className="lede" style={{ margin: 0, color: "var(--ink-2)", maxWidth: 580, position: "relative", zIndex: 1 }}>
          No ar em 48h. Cancela com 1 clique se não for o que você esperava.
        </p>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center", position: "relative", zIndex: 1 }}>
          <a className="btn btn-primary btn-lg" href="#contato" onClick={onCta}>Assine agora →</a>
          <a className="btn btn-ghost btn-lg" href="#contato">Conversar com o time</a>
        </div>
        <div className="small" style={{ color: "var(--muted)", position: "relative", zIndex: 1 }}>
          Cancela com 1 clique no painel, sem multa.
        </div>
      </div>

      {/* PS block */}
      <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 24 }}>
        <div className="reveal" style={{ gridColumn: "span 12", padding: "28px 32px", border: "1px dashed var(--line-strong)", borderRadius: 18 }}>
          <p className="body" style={{ margin: 0, fontSize: 15.5, color: "var(--ink-2)" }}>
            <strong style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, color: "var(--ink)", fontStyle: "italic" }}>PS: </strong>
            A diferença entre psicólogo que vive cheio de paciente e psicólogo que vive correndo atrás raramente é técnica. É operação. Quem responde mais rápido, confirma com antecedência e mantém a base aquecida ganha. Você pode continuar fazendo isso no braço, ou deixar pra quem trabalha 24h sem cansar.
          </p>
        </div>
      </div>
    </div>
  </section>
);

// ─── Contact section ───
const Contact = () => {
  const [state, setState] = React.useState({ name: "", email: "", clinic: "", msg: "", lgpd: false });
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };
  return (
    <section className="section" id="contato">
      <div className="container">
        <div className="card" style={{
          padding: "clamp(36px, 5vw, 64px)",
          display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 48, alignItems: "flex-start",
          background: "var(--bg-elev)",
        }}>
          <div style={{ gridColumn: "span 5", minWidth: 0 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Conversar com a gente</div>
            <h3 className="display display-md" style={{ margin: "0 0 16px", fontWeight: 700 }}>
              Mande sua mensagem que nosso time entrará em contato com você.
            </h3>
            <p className="body" style={{ marginBottom: 22, color: "var(--ink-2)" }}>
              Se preferir, escreve direto pra:
            </p>
            <a href="mailto:allora.agent@gmail.com" style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              padding: "14px 20px", borderRadius: 14,
              background: "var(--bg-card)", border: "1px solid var(--line)",
              color: "var(--ink)", textDecoration: "none",
              fontFamily: "JetBrains Mono, monospace", fontSize: 14,
              boxShadow: "var(--shadow-sm)",
            }}>
              <span style={{ width: 32, height: 32, borderRadius: 10, background: "var(--accent-tint)", color: "var(--accent-deep)", display: "grid", placeItems: "center" }}>
                <G.Chat width={16} height={16}/>
              </span>
              allora.agent@gmail.com
              <span style={{ marginLeft: 8, color: "var(--muted)" }}>→</span>
            </a>
            <div className="small" style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 6 }}>
              <span><span className="kbd">SEG–SEX</span> · 9h às 19h (BRT)</span>
              <span>Resposta em até 4h em horário comercial.</span>
            </div>
          </div>
          <form style={{ gridColumn: "span 7", minWidth: 0, display: "flex", flexDirection: "column", gap: 14 }} onSubmit={submit}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Field label="Seu nome" value={state.name} onChange={v => setState(s => ({ ...s, name: v }))} placeholder="Carolina Mendes" />
              <Field label="E-mail" value={state.email} onChange={v => setState(s => ({ ...s, email: v }))} placeholder="voce@clinica.com" type="email" />
            </div>
            <Field label="Assunto" value={state.clinic} onChange={v => setState(s => ({ ...s, clinic: v }))} placeholder="Sobre o que você quer falar" />
            <Field label="Envie sua mensagem" value={state.msg} onChange={v => setState(s => ({ ...s, msg: v }))} placeholder="Ex: quero entender como funciona a reativação de base" multiline />

            <label style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--ink-2)", cursor: "pointer", marginTop: 6 }}>
              <input type="checkbox" checked={state.lgpd} onChange={e => setState(s => ({ ...s, lgpd: e.target.checked }))} style={{ marginTop: 3, accentColor: "var(--accent-deep)" }} />
              <span>Concordo com o tratamento dos meus dados conforme a <a href="#privacidade" style={{ color: "var(--ink)" }}>Política de Privacidade</a> e a LGPD.</span>
            </label>

            <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 8 }}>
              <button type="submit" className="btn btn-primary btn-lg" disabled={!state.lgpd}>
                {sent ? "Enviado ✓" : "Enviar mensagem"} {!sent && <span style={{ marginLeft: 4 }}>→</span>}
              </button>
              <span className="small">Sem spam. Sem ligação chata.</span>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
};

const Field = ({ label, value, onChange, placeholder, type = "text", multiline = false }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
    <span className="small" style={{ fontWeight: 500, color: "var(--ink-2)" }}>{label}</span>
    {multiline ? (
      <textarea
        rows={3}
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          padding: "12px 14px", borderRadius: 12,
          border: "1px solid var(--line-strong)",
          background: "var(--bg-card)", color: "var(--ink)",
          font: "inherit", fontSize: 14.5,
          resize: "vertical", outline: "none",
        }}
      />
    ) : (
      <input
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          padding: "12px 14px", borderRadius: 12,
          border: "1px solid var(--line-strong)",
          background: "var(--bg-card)", color: "var(--ink)",
          font: "inherit", fontSize: 14.5, outline: "none",
        }}
      />
    )}
  </label>
);

// ─── Footer ───
const Footer = () => (
  <footer className="section" style={{ paddingBottom: 0 }}>
    <div className="container">
      <div className="card" style={{ padding: "clamp(40px, 5vw, 64px)", background: "var(--bg-elev)", overflow: "hidden", position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 32, marginBottom: 56 }}>
          <div style={{ gridColumn: "span 5", minWidth: 0 }}>
            <Logo />
            <p className="body" style={{ marginTop: 18, maxWidth: "32ch", color: "var(--ink-2)" }}>
              A secretária 24h que atende, agenda e reativa pelo WhatsApp da sua clínica, sem você apertar um botão.
            </p>
          </div>
          <FootCol title="Produto" links={["Como funciona", "Benefícios", "Planos", "Casos de uso"]} />
          <FootCol title="Empresa" links={["Sobre", "Privacidade", "Termos", "LGPD"]} />
          <FootCol title="Recursos" links={["Guia da clínica", "Calculadora de no-show", "Blog", "Status"]} />
          <FootCol title="Contato" links={["allora.agent@gmail.com", "WhatsApp suporte", "Imprensa"]} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, borderTop: "1px solid var(--line)" }}>
          <div className="small">© 2026 Allora · CNPJ 00.000.000/0001-00</div>
          <div style={{ display: "flex", gap: 8 }}>
            <SocialBtn label="Instagram" />
            <SocialBtn label="LinkedIn" />
            <SocialBtn label="WhatsApp" />
          </div>
        </div>
        {/* giant wordmark */}
        <div style={{ marginTop: 32, marginInline: "calc(-1 * clamp(24px, 4vw, 64px))", overflow: "hidden" }}>
          <div className="giant-wordmark">allora</div>
        </div>
      </div>
    </div>
  </footer>
);

const FootCol = ({ title, links }) => (
  <div style={{ gridColumn: "span 2", minWidth: 0 }}>
    <div className="eyebrow" style={{ marginBottom: 12 }}>{title}</div>
    <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
      {links.map((l, i) => (
        <li key={i}><a href="#" style={{ color: "var(--ink-2)", textDecoration: "none", fontSize: 14 }}>{l}</a></li>
      ))}
    </ul>
  </div>
);

const SocialBtn = ({ label }) => (
  <a href="#" aria-label={label} style={{
    width: 36, height: 36, borderRadius: 10,
    border: "1px solid var(--line)",
    background: "var(--bg-card)",
    display: "grid", placeItems: "center",
    color: "var(--ink)", textDecoration: "none",
    fontSize: 11, fontFamily: "JetBrains Mono, monospace",
  }}>{label[0]}</a>
);

Object.assign(window, { Urgency, Faq, FinalCta, Contact, Footer });