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

function StatBand() {
  const depoimentos = [
    {
      src: "depoimentos/1.png",
      alt: "Depoimento: cheguei nos 7.000 reais de faturamento, a agenda começando a lotar",
    },
    {
      src: "depoimentos/3.png",
      alt: "Depoimento: faturei quase o mesmo do meu serviço de assessoria",
    },
    {
      src: "depoimentos/2.png",
      alt: "Depoimento: dobrei minha renda de CLT, com 02 mentorias pagas em 03 semanas",
    },
  ];
  return (
    <section
      style={{
        background: "var(--page-bg-alt)",
        padding: "72px 0",
        borderTop: "1px solid var(--hairline)",
        borderBottom: "1px solid var(--hairline)",
      }}
    >
      <Container w={1180}>
        <div
          ref={useReveal()}
          className="reveal"
          style={{ textAlign: "center", marginBottom: 48 }}
        >
          <Eyebrow>Nanoinfluência</Eyebrow>
          <h2
            className="cdh-display"
            style={{
              fontSize: "clamp(20px, 2.4vw, 30px)",
              margin: "12px 0 0",
              color: "var(--on-surface)",
              letterSpacing: "-0.015em",
              maxWidth: 680,
              marginLeft: "auto",
              marginRight: "auto",
              lineHeight: 1.4,
            }}
          >
            85,1% das empresárias no Instagram têm menos de 10 mil seguidores:{" "}
            <em
              style={{
                fontStyle: "italic",
                fontWeight: 500,
                color: "var(--accent)",
                fontFamily: "var(--font-serif)",
              }}
            >
              Elas não são pequenas. São a maioria.
            </em>
          </h2>
        </div>
        <div
          className="depo-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 20,
            maxWidth: 920,
            marginLeft: "auto",
            marginRight: "auto",
          }}
        >
          {depoimentos.map((img, i) => (
            <div
              key={i}
              ref={useReveal()}
              className="reveal"
              style={{
                background: "var(--surface)",
                border: "1px solid var(--hairline)",
                borderRadius: "var(--r-card)",
                overflow: "hidden",
                boxShadow: "var(--shadow-md)",
                transitionDelay: `${i * 80}ms`,
              }}
            >
              <img
                src={img.src}
                alt={img.alt}
                style={{ width: "100%", height: "auto", display: "block" }}
                loading="lazy"
              />
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Marquee() {
  const phrases = [
    "Instagram como canal, não como obrigação",
    "Audiência pequena, conversão alta",
    "Nanoinfluência como estratégia de negócio",
    "IA que fala com a sua voz",
    "Proximidade converte mais que alcance",
    "Conteúdo com intenção, não por volume",
    "Menos seguidores, mais clientes",
  ];
  const items = [...phrases, ...phrases];
  return (
    <section
      style={{
        padding: "28px 0",
        background: "var(--dark-bg)",
        color: "var(--dark-fg)",
        overflow: "hidden",
        borderTop: "1px solid var(--hairline)",
        borderBottom: "1px solid var(--hairline)",
      }}
    >
      <div
        className="marquee-track"
        style={{
          fontFamily: "var(--font-serif)",
          fontSize: 32,
          fontStyle: "italic",
          letterSpacing: "-0.01em",
        }}
      >
        {items.map((p, i) => (
          <React.Fragment key={i}>
            <span style={{ color: "var(--dark-fg)" }}>{p}</span>
            <span
              style={{
                width: 8,
                height: 8,
                borderRadius: "50%",
                background: "var(--accent)",
                display: "inline-block",
              }}
            />
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function ParaQuemE() {
  const fits = [
    "Você tem um negócio de serviço e usa o Instagram, mas não sabe se ele está de fato trazendo cliente.",
    "Você posta mas não tem previsibilidade: tem mês bom e mês ruim, sem entender de onde vem o resultado.",
    "Você quer parar de produzir conteúdo por obrigação e começar a usar o Instagram com intenção.",
    "Você já tentou usar IA para criar conteúdo mas o resultado saiu genérico, parecia qualquer pessoa menos você.",
    "Você quer sair com algo concreto funcionando, não com mais teoria para aplicar sozinha depois.",
  ];
  const nots = [
    "Você quer se tornar influenciadora: o foco aqui é usar o Instagram para vender serviço, não para crescer audiência.",
    "Você ainda não tem negócio definido: sem clareza de público e oferta, o sistema não tem base para ser construído.",
    "Você vende produto físico ou e-commerce: a metodologia foi pensada para prestadoras de serviço.",
    "Você já tem sistema de conteúdo funcionando e quer só automação técnica avançada.",
  ];
  return (
    <section style={{ padding: "120px 0", background: "var(--page-bg)" }}>
      <Container w={1080}>
        <div
          ref={useReveal()}
          className="reveal"
          style={{ textAlign: "center", marginBottom: 56 }}
        >
          <Eyebrow>Para quem é</Eyebrow>
          <h2
            className="cdh-display"
            style={{
              fontSize: "clamp(34px, 4vw, 56px)",
              margin: "16px auto 0",
              maxWidth: 760,
              color: "var(--on-surface)",
              letterSpacing: "-0.02em",
            }}
          >
            Essa imersão foi feita pra quem quer usar o Instagram{" "}
            <em
              style={{
                fontStyle: "italic",
                fontWeight: 500,
                color: "var(--accent)",
                fontFamily: "var(--font-serif)",
              }}
            >
              para vender,
            </em>{" "}
            não para se tornar influenciadora.
          </h2>
        </div>

        <div
          className="paraquem-grid"
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}
        >
          <div ref={useReveal()} className="reveal">
            <h3
              style={{
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: ".18em",
                textTransform: "uppercase",
                color: "var(--accent)",
                margin: 0,
                paddingBottom: 14,
                borderBottom: "1.5px solid var(--accent)",
              }}
            >
              É pra você se…
            </h3>
            <ul
              style={{
                listStyle: "none",
                padding: 0,
                margin: "24px 0 0",
                display: "flex",
                flexDirection: "column",
                gap: 16,
              }}
            >
              {fits.map((s, i) => (
                <li
                  key={i}
                  style={{
                    display: "flex",
                    gap: 14,
                    fontSize: 15.5,
                    lineHeight: 1.55,
                    color: "var(--on-surface)",
                  }}
                >
                  <span
                    style={{
                      color: "var(--accent)",
                      fontWeight: 800,
                      fontSize: 18,
                      flex: "0 0 18px",
                      lineHeight: "24px",
                    }}
                  >
                    ✓
                  </span>
                  <span>{s}</span>
                </li>
              ))}
            </ul>
          </div>
          <div
            ref={useReveal()}
            className="reveal"
            style={{ transitionDelay: "120ms" }}
          >
            <h3
              style={{
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: ".18em",
                textTransform: "uppercase",
                color: "var(--on-surface-3)",
                margin: 0,
                paddingBottom: 14,
                borderBottom: "1.5px solid var(--hairline-strong)",
              }}
            >
              Não é pra você se…
            </h3>
            <ul
              style={{
                listStyle: "none",
                padding: 0,
                margin: "24px 0 0",
                display: "flex",
                flexDirection: "column",
                gap: 16,
              }}
            >
              {nots.map((s, i) => (
                <li
                  key={i}
                  style={{
                    display: "flex",
                    gap: 14,
                    fontSize: 15.5,
                    lineHeight: 1.55,
                    color: "var(--on-surface-2)",
                  }}
                >
                  <span
                    style={{
                      color: "var(--on-surface-3)",
                      fontWeight: 700,
                      fontSize: 18,
                      flex: "0 0 18px",
                      lineHeight: "24px",
                    }}
                  >
                    ×
                  </span>
                  <span>{s}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { StatBand, Marquee, ParaQuemE });
