// Nosso time — standalone page app

const ACCENT = { base: "#25D366", deep: "#0B7A53", ink: "#052e1a", tint: "#DCFBE7" };

const TeamNav = () => (
  <div className="nav-shell">
    <nav className="nav-pill" role="navigation" aria-label="Principal">
      <a href="index.html" style={{ display: "inline-flex" }}><Logo size={22} /></a>
      <span style={{ width: 8 }} />
      <a className="nav-link hide-sm" href="index.html#como-funciona">Como funciona</a>
      <a className="nav-link hide-sm" href="index.html#beneficios">Benefícios</a>
      <a className="nav-link hide-sm" href="index.html#planos">Planos</a>
      <a className="nav-link hide-sm" href="nosso-time.html" aria-current="page" style={{ color: "var(--ink)" }}>Nosso time</a>
      <a className="nav-link hide-sm" href="index.html#faq">FAQ</a>
      <a className="btn btn-dark btn-sm" href="index.html#cta">Assine agora</a>
    </nav>
  </div>
);

// ─── Reasons to hire + client gains ───
const REASONS = [
  { glyph: "Clock",    t: "Atende 24 horas, 7 dias por semana", d: "Nenhuma mensagem fica sem resposta. Madrugada, fim de semana ou feriado: o paciente é atendido na hora e você não perde para quem respondeu primeiro." },
  { glyph: "Calendar", t: "No-show despenca", d: "Confirmação automática 24h antes com link pra remarcar em 1 clique. Hora vaga vira hora ocupada, sem ligação manual." },
  { glyph: "Repeat",   t: "Sua base antiga volta a render", d: "Quem sumiu há 3, 6 ou 12 meses recebe uma mensagem natural e volta a agendar. Receita nova de quem você já conquistou." },
  { glyph: "Bolt",     t: "Economia de uma secretária CLT", d: "O atendimento de uma profissional dedicada, sem salário, encargos, férias ou rotatividade. Por uma fração do custo mensal." },
  { glyph: "Heart",    t: "Atendimento humano de verdade", d: "Sempre educado e profissional, com respostas humanizadas. A maioria dos pacientes não percebe que é IA." },
  { glyph: "Spark",    t: "No ar essa semana", d: "Não é projeto de meses com consultoria. Em até 48h a sua secretária digital já está conversando pelo WhatsApp da clínica." },
];

const Reasons = () => (
  <section className="section" style={{ paddingTop: 0 }}>
    <div className="container">
      <SectionHead
        eyebrow="Por que contratar"
        title={<>O que você ganha<br/>com a Allora Agent.</>}
        lede="Não é mais uma ferramenta. É uma secretária que trabalha sem parar para encher a sua agenda e devolver o seu tempo."
        maxWidth={720}
      />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 18 }}>
        {REASONS.map((r, i) => {
          const Glyph = G[r.glyph] || G.Bolt;
          return (
            <div key={i} className="card" style={{ padding: "30px 28px", display: "flex", flexDirection: "column", gap: 14 }}>
              <span style={{ width: 46, height: 46, borderRadius: 14, background: "var(--accent-tint)", color: "var(--accent-deep)", display: "grid", placeItems: "center" }}>
                <Glyph width={22} height={22} strokeWidth={2.2} />
              </span>
              <h3 style={{ margin: 0, fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 20, letterSpacing: "-0.01em", color: "var(--ink)" }}>{r.t}</h3>
              <p className="body" style={{ margin: 0, fontSize: 15, color: "var(--ink-2)", lineHeight: 1.5 }}>{r.d}</p>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

const TeamPage = () => {
  React.useEffect(() => {
    const html = document.documentElement;
    html.style.setProperty("--accent", ACCENT.base);
    html.style.setProperty("--accent-deep", ACCENT.deep);
    html.style.setProperty("--accent-ink", ACCENT.ink);
    html.style.setProperty("--accent-tint", ACCENT.tint);
  }, []);

  return (
    <React.Fragment>
      <TeamNav />
      <main>
        {/* HERO */}
        <section style={{
          position: "relative", overflow: "hidden",
          minHeight: "calc(100vh - 64px)",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          textAlign: "center",
          padding: "80px 24px 96px",
        }}>
          <div aria-hidden="true" style={{
            position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)",
            width: "140%", height: "70%",
            background: "radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent-deep) 38%, transparent) 28%, transparent 70%)",
            pointerEvents: "none",
          }} />

          <div style={{ position: "relative", zIndex: 1, maxWidth: 1040, display: "flex", flexDirection: "column", alignItems: "center", gap: 28 }}>
            <div className="chip-tiny accent">
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
              Nosso time
            </div>

            <h1 className="display display-lg" style={{
              margin: 0, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.04,
              color: "var(--ink)", maxWidth: "16ch", textWrap: "balance",
            }}>
              Feita por pessoas, com uma ajuda da <span style={{ color: "var(--accent-deep)" }}>Inteligência Artificial</span>.
            </h1>

          </div>
        </section>

        {/* FULL-WIDTH PROMINENT STATEMENT — the former gray sentence, now the centerpiece */}
        <section className="section" style={{ paddingBlock: "clamp(24px, 4vw, 56px) clamp(64px, 10vw, 140px)" }}>
          <div className="container">
            <p style={{
              margin: "0 auto", maxWidth: "100%", textAlign: "center",
              fontFamily: "Bricolage Grotesque", fontWeight: 400,
              fontSize: "clamp(24px, 3vw, 40px)", lineHeight: 1.22, letterSpacing: "-0.015em",
              color: "var(--ink)", textWrap: "pretty",
            }}>
              A Allora Agent nasceu do processo criativo de profissionais do mercado financeiro que uniram duas paixões: <span style={{ color: "var(--accent-deep)" }}>programar e vender</span>. Em um mercado cada vez mais competitivo, atender bem deixou de ser um diferencial e virou o mínimo e é por isso que a Allora existe: para ser a melhor secretária digital no atendimento aos seus pacientes e clientes. Nossa ambição é construir a maior operação de secretárias online do país, com nomes e segmentos personalizados para cada cliente.
            </p>
          </div>
        </section>

        {/* REASONS / GAINS */}

        {/* CONTACT — same layout as the home page */}
        <Contact />

        <Footer />
      </main>
    </React.Fragment>
  );
};

const teamRoot = ReactDOM.createRoot(document.getElementById("root"));
teamRoot.render(<TeamPage />);