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

function Cronograma() {
  const modules = [
    {
      n: "Influenciadora",
      t: "Vive de Alcance",
      desc: "Quanto mais seguidores, mais engajamento.",
    },
    {
      n: "Empreendedora",
      t: "Depende de Relação",
      desc: "Audiência que confia em você está mais disposta a pagar.",
    },
    {
      n: "Clientes certos",
      t: "Não é sobre número",
      desc: "Um perfil com 800 seguidores certos converte mais do que um com 80.000 seguidores frios.",
    },
    {
      n: "Intenção",
      t: "IA como apoio",
      desc: "Para fazer o trabalho repetitivo, na sua voz, no seu tom, sem te sobrecarregar.",
    },
  ];
  return (
    <section
      id="cronograma"
      className="crono-section"
      style={{ padding: "120px 0", background: "var(--page-bg)" }}
    >
      <Container w={1140}>
        <div
          ref={useReveal()}
          className="reveal"
          style={{
            textAlign: "center",
            maxWidth: 720,
            marginLeft: "auto",
            marginRight: "auto",
            marginBottom: 64,
          }}
        >
          <Eyebrow>A virada de chave</Eyebrow>
          <h2
            className="cdh-display"
            style={{
              fontSize: "clamp(34px, 4vw, 56px)",
              margin: "16px 0",
              color: "var(--on-surface)",
              letterSpacing: "-0.02em",
            }}
          >
            A diferença entre usar o Instagram como influenciadora e usar como{" "}
            <em
              style={{
                fontStyle: "italic",
                fontWeight: 500,
                color: "var(--accent)",
                fontFamily: "var(--font-serif)",
              }}
            >
              empreendedora.
            </em>
          </h2>
          <p
            style={{
              fontSize: 15,
              color: "var(--on-surface-3)",
              margin: "8px auto 0",
              maxWidth: 560,
              lineHeight: 1.6,
            }}
          >
            É aqui que vive a Nanoinfluência.
          </p>
        </div>

        <div
          className="crono-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: 20,
          }}
        >
          {modules.map((m, i) => (
            <article
              key={m.n}
              ref={useReveal()}
              className="reveal hover-card"
              style={{
                background: "var(--surface)",
                border: "1px solid var(--hairline)",
                borderRadius: "var(--r-card)",
                padding: "28px 30px 28px",
                position: "relative",
                transitionDelay: `${i * 70}ms`,
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: 22,
                alignItems: "start",
              }}
            >
              <div
                style={{
                  width: 50,
                  height: 50,
                  borderRadius: "var(--r-btn)",
                  background:
                    "color-mix(in oklab, var(--accent) 10%, transparent)",
                  color: "var(--accent)",
                  fontFamily: "var(--font-serif)",
                  fontWeight: 700,
                  fontSize: 22,
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  letterSpacing: "-0.01em",
                }}
              >
                {String(i + 1).padStart(2, "0")}
              </div>
              <div>
                <div
                  style={{
                    fontSize: 11,
                    fontWeight: 700,
                    letterSpacing: ".18em",
                    textTransform: "uppercase",
                    color: "var(--accent)",
                  }}
                >
                  {m.n}
                </div>
                <h3
                  style={{
                    fontFamily: "var(--font-serif)",
                    fontWeight: 700,
                    fontSize: 22,
                    color: "var(--on-surface)",
                    margin: "6px 0 14px",
                    letterSpacing: "-0.01em",
                  }}
                >
                  {m.t}
                </h3>
                <p
                  style={{
                    fontSize: 14,
                    color: "var(--on-surface-2)",
                    lineHeight: 1.6,
                    margin: 0,
                  }}
                >
                  {m.desc}
                </p>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Depoimentos() {
  const imgs = [
    {
      src: "depoimentos/jussara_ia.png",
      alt: "Depoimento de Jussara sobre a imersão",
    },
    {
      src: "depoimentos/marcelle_ia.png",
      alt: "Depoimento de Marcelle sobre a imersão",
    },
    {
      src: "depoimentos/marielem_ia.png",
      alt: "Depoimento de Marielem sobre a imersão",
    },
    {
      src: "depoimentos/tais_ia.png",
      alt: "Depoimento de Thais sobre a imersão",
    },
  ];
  return (
    <section
      className="depo-section"
      style={{ padding: "120px 0", background: "var(--page-bg-alt)" }}
    >
      <Container w={1140}>
        <div
          ref={useReveal()}
          className="reveal"
          style={{
            textAlign: "center",
            maxWidth: 720,
            marginLeft: "auto",
            marginRight: "auto",
            marginBottom: 64,
          }}
        >
          <Eyebrow>Histórias reais</Eyebrow>
          <h2
            className="cdh-display"
            style={{
              fontSize: "clamp(34px, 4vw, 56px)",
              margin: "16px 0",
              color: "var(--on-surface)",
              letterSpacing: "-0.02em",
            }}
          >
            O que disseram quem{" "}
            <em
              style={{
                fontStyle: "italic",
                fontWeight: 500,
                color: "var(--accent)",
                fontFamily: "var(--font-serif)",
              }}
            >
              viveu a imersão
            </em>{" "}
            anterior.
          </h2>
        </div>
        <div
          className="depo-grid"
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}
        >
          {imgs.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 Programacao() {
  const horarios = [
    { time: "19H00", label: "Início", red: false },
    { time: "20H30", label: "Pausa", red: true },
    { time: "20H45", label: "Retorno", red: false },
    { time: "22H00", label: "Encerramento*", red: true },
  ];
  return (
    <section
      id="programacao"
      className="prog-section"
      style={{ padding: "120px 0", background: "#0e0e10", color: "#fff" }}
    >
      <Container w={1180}>
        <div
          className="prog-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(260px, 0.8fr) 1.3fr",
            gap: 72,
            alignItems: "start",
          }}
        >
          {/* Left: title block */}
          <div ref={useReveal()} className="reveal">
            <div
              style={{
                fontFamily: "var(--font-sans)",
                fontSize: 13,
                fontWeight: 700,
                letterSpacing: ".14em",
                textTransform: "uppercase",
                color: "var(--accent)",
              }}
            >
              06 e 07 de julho&nbsp;&nbsp;|&nbsp;&nbsp;No
              Zoom&nbsp;&nbsp;|&nbsp;&nbsp;Ao vivo
            </div>
            <h2
              style={{
                fontFamily: "var(--font-sans)",
                fontWeight: 800,
                fontSize: "clamp(46px, 6vw, 74px)",
                lineHeight: 0.95,
                letterSpacing: "-0.02em",
                textTransform: "uppercase",
                color: "#fff",
                margin: "22px 0 0",
              }}
            >
              Crono-
              <br />
              grama
            </h2>
            <p
              style={{
                fontSize: 15,
                color: "rgba(255,255,255,0.55)",
                lineHeight: 1.7,
                maxWidth: 320,
                margin: "26px 0 0",
              }}
            >
              *Todo o conteúdo combinado será entregue dentro do horário
              programado. Porém, é possível passar um pouco do horário para
              tirar dúvidas e aprofundar em algum ponto solicitado pelos
              participantes.
            </p>
          </div>

          {/* Right: timeline */}
          <div
            ref={useReveal()}
            className="reveal"
            style={{
              borderTop: "1px solid rgba(255,255,255,0.12)",
              transitionDelay: "100ms",
            }}
          >
            {horarios.map((h, i) => (
              <div
                key={h.time}
                style={{
                  display: "grid",
                  gridTemplateColumns: "auto 1fr auto",
                  alignItems: "center",
                  gap: 28,
                  padding: "30px 0",
                  borderBottom: "1px solid rgba(255,255,255,0.12)",
                }}
              >
                <span
                  style={{
                    fontFamily: "var(--font-sans)",
                    fontWeight: 800,
                    fontSize: "clamp(32px, 4vw, 46px)",
                    letterSpacing: "-0.01em",
                    color: "#fff",
                  }}
                >
                  {h.time}
                </span>
                <span
                  style={{
                    height: h.red ? 2 : 1,
                    background: h.red
                      ? "var(--accent)"
                      : "rgba(255,255,255,0.28)",
                  }}
                />
                <span
                  style={{
                    fontFamily: "var(--font-sans)",
                    fontWeight: 700,
                    fontSize: 13,
                    letterSpacing: ".16em",
                    textTransform: "uppercase",
                    color: "rgba(255,255,255,0.72)",
                    whiteSpace: "nowrap",
                  }}
                >
                  {h.label}
                </span>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Cronograma, Depoimentos, Programacao });