/* global React, useReveal, Eyebrow, Container */

function Planos() {
  const list = [
    "Acesso imediato às aulas para iniciar seu treinamento com IA na prática (antes mesmo da imersão)",
    "Duas noites de imersão ao vivo com Carla Dias, 06 e 07 de julho, das 19h às 22h",
    "Noite 1 (06/07), estratégia: Nanoinfluência pra vender com Instagram e como a IA entra no sistema",
    "Noite 2 (07/07), construção: Sistema de Posicionamento no Claude, Reels com IA e Carrossel com roteiro e artes gerados",
    "Acesso à gravação completa da imersão por 30 dias",
    "Online, ao vivo pelo Zoom",
  ];
  return (
    <section
      id="planos"
      className="planos-section"
      style={{ padding: "120px 0", background: "var(--page-bg)" }}
    >
      <Container w={1080}>
        <div
          ref={useReveal()}
          className="reveal"
          style={{
            textAlign: "center",
            maxWidth: 720,
            marginLeft: "auto",
            marginRight: "auto",
            marginBottom: 56,
          }}
        >
          <Eyebrow>Sua vaga</Eyebrow>
          <h2
            className="cdh-display"
            style={{
              fontSize: "clamp(26px, 3vw, 40px)",
              margin: "16px 0",
              color: "var(--on-surface)",
              letterSpacing: "-0.02em",
              lineHeight: 1.2,
            }}
          >
            Duas noites de imersão ao vivo para perder o ranço do Instagram, e
            aprender a usar IA no conteúdo{" "}
            <em
              style={{
                fontStyle: "italic",
                fontWeight: 500,
                color: "var(--accent)",
                fontFamily: "var(--font-serif)",
              }}
            >
              de forma profissional.
            </em>
          </h2>
        </div>

        <div
          ref={useReveal()}
          className="reveal planos-card"
          style={{
            background: "var(--surface)",
            border: "1.5px solid var(--accent)",
            borderRadius: "var(--r-frame)",
            padding: "40px 44px",
            position: "relative",
            boxShadow: "var(--shadow-lg)",
            overflow: "hidden",
          }}
        >
          <div
            style={{
              position: "absolute",
              top: 0,
              right: 0,
              background: "var(--accent)",
              color: "#fff",
              padding: "8px 22px",
              fontSize: 11,
              fontWeight: 700,
              letterSpacing: ".18em",
              textTransform: "uppercase",
              borderBottomLeftRadius: "var(--r-card)",
            }}
          >
            ⚡ 06 e 07 de julho
          </div>

          <div
            className="planos-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "1.1fr 0.9fr",
              gap: 56,
              alignItems: "center",
            }}
          >
            <div>
              <div
                style={{
                  fontSize: 12,
                  fontWeight: 700,
                  letterSpacing: ".18em",
                  textTransform: "uppercase",
                  color: "var(--accent)",
                }}
              >
                Conteúdo Nano
              </div>
              <h3
                className="planos-title"
                style={{
                  fontFamily: "var(--font-serif)",
                  fontWeight: 700,
                  fontSize: 32,
                  color: "var(--on-surface)",
                  margin: "8px 0 24px",
                  letterSpacing: "-0.015em",
                  lineHeight: 1.1,
                }}
              >
                Duas noites de imersão ao vivo para aprender a usar o Instagram
                e a IA juntos.
              </h3>
              <ul
                style={{
                  listStyle: "none",
                  padding: 0,
                  margin: 0,
                  display: "flex",
                  flexDirection: "column",
                  gap: 10,
                }}
              >
                {list.map((s, i) => (
                  <li
                    key={i}
                    style={{
                      display: "flex",
                      gap: 12,
                      fontSize: 14.5,
                      color: "var(--on-surface)",
                      lineHeight: 1.5,
                    }}
                  >
                    <span
                      style={{
                        color: "var(--accent)",
                        flex: "0 0 auto",
                        marginTop: 3,
                      }}
                    >
                      <svg
                        width="14"
                        height="14"
                        viewBox="0 0 12 12"
                        fill="none"
                      >
                        <path
                          d="M1 6.5L4.5 10L11 2"
                          stroke="currentColor"
                          strokeWidth="1.8"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    </span>
                    <span>{s}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div
              className="planos-right"
              style={{
                borderLeft: "1px solid var(--hairline)",
                paddingLeft: 48,
              }}
            >
              <div
                style={{
                  fontSize: 13,
                  color: "var(--on-surface-2)",
                  marginBottom: 6,
                }}
              >
                Investimento
              </div>
              <div
                className="planos-price"
                style={{
                  fontFamily: "var(--font-serif)",
                  fontWeight: 700,
                  fontSize: 64,
                  color: "var(--on-surface)",
                  lineHeight: 1,
                  letterSpacing: "-0.02em",
                }}
              >
                R$<span style={{ fontSize: 48 }}>147</span>
              </div>
              <div
                style={{
                  fontSize: 13,
                  color: "var(--on-surface-2)",
                  margin: "10px 0 0",
                  lineHeight: 1.5,
                }}
              >
                à vista · acesso imediato às aulas gravadas
              </div>
              <a
                href="https://chk.eduzz.com/VWGNEXGR07"
                target="_blank"
                rel="noopener"
                className="btn btn-primary btn-lg"
                style={{
                  width: "100%",
                  justifyContent: "center",
                  marginTop: 28,
                  padding: "20px 24px",
                }}
              >
                Quero minha vaga →
              </a>
              <div
                style={{
                  marginTop: 16,
                  fontSize: 12,
                  color: "var(--on-surface-3)",
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                  justifyContent: "center",
                }}
              >
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                </svg>
                Sem conhecimento técnico prévio necessário
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function FinalCTA() {
  return (
    <section
      style={{
        padding: "120px 0",
        background: "var(--dark-bg)",
        color: "var(--dark-fg)",
        textAlign: "center",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: "auto -10% -50% -10%",
          height: 500,
          background:
            "radial-gradient(ellipse at top, color-mix(in oklab, var(--accent) 40%, transparent), transparent 60%)",
          filter: "blur(40px)",
          pointerEvents: "none",
        }}
      />
      <Container w={880} style={{ position: "relative" }}>
        <div ref={useReveal()} className="reveal">
          <Eyebrow>Última chamada</Eyebrow>
          <h2
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: 700,
              fontSize: "clamp(40px, 5.5vw, 72px)",
              margin: "20px 0 24px",
              color: "var(--dark-fg)",
              letterSpacing: "-0.025em",
              lineHeight: 1.02,
              textWrap: "balance",
            }}
          >
            Você já tem o negócio.
            <br />
            Agora é hora de parar de ser{" "}
            <em
              style={{
                fontStyle: "italic",
                fontWeight: 500,
                color: "var(--accent)",
              }}
            >
              refém do Instagram.
            </em>
          </h2>
          <p
            style={{
              fontSize: 18,
              opacity: 0.78,
              margin: "0 auto 40px",
              maxWidth: 560,
              lineHeight: 1.55,
            }}
          >
            Nessas duas noites, você vai entender por que o Instagram nunca foi
            o problema e sair com um sistema que faz ele trabalhar pelo seu
            negócio, com a IA para trazer inteligência e te tirar da sobrecarga.
          </p>
          <a
            href="https://chk.eduzz.com/VWGNEXGR07"
            target="_blank"
            rel="noopener"
            className="btn btn-primary btn-lg"
            style={{ padding: "20px 36px", fontSize: 17 }}
          >
            Quero minha vaga no Conteúdo Nano →
          </a>
          <p style={{ marginTop: 18, fontSize: 13, opacity: 0.55 }}>
            06 e 07 de julho · Das 19h às 22h, as duas noites · Online ao vivo ·
            R$147
          </p>
        </div>
      </Container>
    </section>
  );
}

function FAQ() {
  const items = [
    {
      q: "Meu Instagram é pequeno. Isso é um problema?",
      a: "É o contrário. Essa imersão foi feita para quem tem poucos seguidores e quer usar o Instagram para trazer clientes, não para crescer audiência. Um perfil pequeno com as pessoas certas converte mais do que um perfil grande e frio.",
    },
    {
      q: "Preciso ter experiência com IA para participar?",
      a: "Não. A imersão foi desenhada para quem está começando agora ou para quem já tentou mas não soube por onde continuar. O ponto de partida é exatamente onde você está.",
    },
    {
      q: "Vou precisar de plano pago de IA?",
      a: "Para a maior parte da imersão, o plano gratuito do Claude ou do ChatGPT é suficiente. Se você quiser gerar as artes do Carrossel direto pela IA, provavelmente vai precisar do plano básico — mas pensa assim: o plano básico do Claude custa R$90 por mês. Um designer cobra em média R$150 por carrossel. Com a IA, você cria quantos quiser, na sua voz, no seu tempo.",
    },
    {
      q: "E se eu não puder participar de uma das noites?",
      a: "Você terá acesso à gravação completa da imersão por 30 dias. Pode acompanhar o que perdeu no seu tempo.",
    },
    {
      q: "O que aprendo aqui fica desatualizado?",
      a: "Não. Você vai aprender a configurar um sistema, não a usar uma ferramenta específica. O sistema funciona no Claude, no ChatGPT, no Gemini e na próxima que surgir. A ferramenta muda. O seu sistema, não.",
    },
    {
      q: "Funciona para qualquer tipo de negócio?",
      a: "Para prestadoras de serviço: sim. Terapeuta, nutricionista, advogada, corretora, consultora, mentora, professora. Para quem vende produto físico ou e-commerce, a metodologia não foi pensada para essa realidade.",
    },
  ];
  return (
    <section
      id="faq"
      style={{ padding: "120px 0", background: "var(--page-bg)" }}
    >
      <Container w={840}>
        <div
          ref={useReveal()}
          className="reveal"
          style={{ textAlign: "center", marginBottom: 56 }}
        >
          <Eyebrow>Perguntas frequentes</Eyebrow>
          <h2
            className="cdh-display"
            style={{
              fontSize: "clamp(32px, 4vw, 48px)",
              margin: "16px 0",
              color: "var(--on-surface)",
              letterSpacing: "-0.02em",
            }}
          >
            Dúvidas que{" "}
            <em
              style={{
                fontStyle: "italic",
                fontWeight: 500,
                color: "var(--accent)",
                fontFamily: "var(--font-serif)",
              }}
            >
              aparecem antes
            </em>{" "}
            de toda decisão.
          </h2>
        </div>
        <div
          ref={useReveal()}
          className="reveal"
          style={{ borderTop: "1px solid var(--hairline)" }}
        >
          {items.map((item, i) => (
            <details key={i} className="faq">
              <summary>
                <span>{item.q}</span>
                <span className="faq-icon">+</span>
              </summary>
              <div className="faq-body">{item.a}</div>
            </details>
          ))}
        </div>
      </Container>
    </section>
  );
}

function SuporteCallout() {
  return (
    <section
      style={{
        padding: "88px 0",
        background: "var(--page-bg-alt)",
        borderTop: "1px solid var(--hairline)",
      }}
    >
      <Container w={760}>
        <div
          ref={useReveal()}
          className="reveal"
          style={{ textAlign: "center" }}
        >
          <h2
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: 700,
              fontSize: "clamp(32px, 4vw, 44px)",
              color: "var(--on-surface)",
              margin: "0 0 18px",
              letterSpacing: "-0.01em",
              lineHeight: 1.15,
            }}
          >
            Ficou com alguma dúvida?
          </h2>
          <p
            style={{
              fontSize: 18,
              color: "var(--on-surface-2)",
              lineHeight: 1.6,
              margin: "0 auto 36px",
              maxWidth: 560,
            }}
          >
            Fale com a Má pelo WhatsApp. Ela está aqui para te ajudar a decidir
            se essa imersão faz sentido para o seu momento.
          </p>
          <a
            href="https://wa.me/5513991445404"
            target="_blank"
            rel="noopener"
            style={{
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 12,
              background: "#22C55E",
              color: "#fff",
              fontFamily: "var(--font-sans)",
              fontWeight: 700,
              fontSize: 18,
              padding: "20px 44px",
              borderRadius: "var(--r-btn)",
              textDecoration: "none",
              boxShadow: "0 8px 22px rgba(34, 197, 94, 0.28)",
              transition:
                "transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "#16A34A";
              e.currentTarget.style.transform = "translateY(-1px)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "#22C55E";
              e.currentTarget.style.transform = "translateY(0)";
            }}
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff">
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
            </svg>
            Falar com a Má do suporte
          </a>
        </div>
      </Container>
    </section>
  );
}

function Footer() {
  return (
    <footer
      style={{
        padding: "48px 0",
        background: "var(--page-bg-alt)",
        borderTop: "1px solid var(--hairline)",
        color: "var(--on-surface-2)",
        fontSize: 13,
      }}
    >
      <Container w={1140}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            flexWrap: "wrap",
            gap: 16,
          }}
        >
          <div
            style={{ display: "inline-flex", alignItems: "baseline", gap: 8 }}
          >
            <span
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 700,
                fontSize: 20,
                color: "var(--on-surface)",
              }}
            >
              Carla
            </span>
            <span
              style={{
                fontFamily: "var(--font-script)",
                fontSize: 20,
                color: "var(--accent)",
              }}
            >
              da Hello
            </span>
          </div>
          <div style={{ fontSize: 12, opacity: 0.8 }}>
            © 2026 Carla Dias · Agência Hello · Todos os direitos reservados
          </div>
          <div style={{ display: "flex", gap: 20, fontSize: 12 }}>
            <a
              href="https://instagram.com/carladahello"
              target="_blank"
              rel="noopener"
              style={{ color: "var(--on-surface-2)", textDecoration: "none" }}
            >
              @carladahello
            </a>
          </div>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Planos, FinalCTA, FAQ, SuporteCallout, Footer });
