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

function Metodo() {
  const [playing, setPlaying] = React.useState(false);
  const sessions = [
    {
      num: "01",
      label: "Noite 1 · 19h às 22h",
      title: "Instagram como canal de vendas.",
      body: "Como trazer o Instagram para a estratégia do seu negócio, como canal de venda. Aprenda a usar a nanoinfluência na prática e construa um sistema de vendas mesmo com poucos seguidores.",
    },
    {
      num: "02",
      label: "Noite 2 · 19h às 22h",
      title: "Construindo o sistema com a IA.",
      body: "Vamos construir sua estratégia de posicionamento e sua operação de conteúdo, usando IAs e mantendo sua voz. Conteúdos e Carrossel com roteiro e artes prontos para publicar.",
    },
  ];

  const lessons = [
    {
      tag: "Aula 01",
      title: "Criando contexto inteligente com a IA",
      dur: "15:18",
    },
    {
      tag: "Aula 02",
      title: "A arquitetura de soluções com a IA",
      dur: "06:55",
    },
    {
      tag: "Aula 03",
      title: "Os PROMPTs adaptáveis para o melhor treinamento",
      dur: "31:05",
    },
    {
      tag: "Aula 04",
      title: "Configurando seu projeto com IA",
      dur: "46:27",
    },
  ];

  return (
    <section
      id="aprender"
      style={{ padding: "120px 0", background: "var(--page-bg-alt)" }}
    >
      <Container w={1180}>
        <div
          ref={useReveal()}
          className="reveal"
          style={{
            textAlign: "center",
            marginBottom: 56,
            maxWidth: 720,
            marginLeft: "auto",
            marginRight: "auto",
          }}
        >
          <Eyebrow>O que você vai aprender</Eyebrow>
          <h2
            className="cdh-display"
            style={{
              fontSize: "clamp(34px, 4vw, 56px)",
              margin: "16px 0 0",
              color: "var(--on-surface)",
              letterSpacing: "-0.02em",
            }}
          >
            Cursos de IA te ensinam a usar a ferramenta. Aqui,{" "}
            <em
              style={{
                fontStyle: "italic",
                fontWeight: 500,
                color: "var(--accent)",
                fontFamily: "var(--font-serif)",
              }}
            >
              a IA aprende a ser e agir como você.
            </em>
          </h2>
        </div>

        <div
          className="metodo-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 28,
            alignItems: "stretch",
          }}
        >
          {/* Featured: Pré-imersão */}
          <div ref={useReveal()} className="reveal">
            <div
              style={{
                background: "#0f1628",
                border: "1px solid rgba(255,255,255,0.1)",
                borderRadius: "var(--r-frame)",
                padding: 18,
                display: "flex",
                flexDirection: "column",
                gap: 18,
                boxShadow: "var(--shadow-lg)",
              }}
            >
              {/* Poster / Vimeo player */}
              <div
                style={{
                  position: "relative",
                  aspectRatio: "16/9",
                  borderRadius: "calc(var(--r-frame) - 6px)",
                  overflow: "hidden",
                  background:
                    "linear-gradient(135deg, #1a1d3f 0%, #0b0e26 70%)",
                }}
              >
                {playing ? (
                  <iframe
                    src="https://player.vimeo.com/video/1183125933?autoplay=1&badge=0&autopause=0&player_id=0&app_id=58479"
                    title="Tudo sobre a plataforma que vamos usar como exemplo prático"
                    allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
                    referrerPolicy="strict-origin-when-cross-origin"
                    frameBorder="0"
                    style={{
                      position: "absolute",
                      top: 0,
                      left: 0,
                      width: "100%",
                      height: "100%",
                      border: 0,
                    }}
                  />
                ) : (
                  <>
                    <img
                      src="assets/aulas-gravadas.jpg"
                      alt="Aula gravada: criando contexto inteligente com a IA"
                      style={{
                        width: "100%",
                        height: "100%",
                        objectFit: "cover",
                      }}
                    />
                    <div
                      style={{
                        position: "absolute",
                        inset: 0,
                        background:
                          "linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6) 100%)",
                      }}
                    />
                    <button
                      aria-label="Reproduzir aula"
                      onClick={() => setPlaying(true)}
                      style={{
                        position: "absolute",
                        left: "50%",
                        top: "50%",
                        transform: "translate(-50%, -50%)",
                        width: 84,
                        height: 84,
                        borderRadius: "50%",
                        background: "var(--accent)",
                        border: 0,
                        cursor: "pointer",
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                        boxShadow: "0 10px 30px rgba(0,0,0,0.4)",
                      }}
                    >
                      <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="#fff"
                      >
                        <path d="M8 5v14l11-7z" />
                      </svg>
                    </button>
                    <div
                      style={{
                        position: "absolute",
                        left: 16,
                        right: 16,
                        bottom: 14,
                      }}
                    >
                      <div
                        style={{
                          height: 4,
                          borderRadius: 2,
                          background: "rgba(255,255,255,0.25)",
                          overflow: "hidden",
                        }}
                      >
                        <div
                          style={{
                            width: "38%",
                            height: "100%",
                            background: "var(--accent)",
                          }}
                        />
                      </div>
                      <div
                        style={{
                          display: "flex",
                          justifyContent: "space-between",
                          marginTop: 8,
                          fontSize: 11,
                          color: "rgba(255,255,255,0.78)",
                          letterSpacing: ".04em",
                        }}
                      >
                        <span>12:08</span>
                        <span>32:00</span>
                      </div>
                    </div>
                    <div
                      style={{
                        position: "absolute",
                        left: 14,
                        top: 14,
                        display: "inline-flex",
                        alignItems: "center",
                        gap: 6,
                        background: "rgba(0,0,0,0.55)",
                        color: "#fff",
                        padding: "5px 10px",
                        borderRadius: 999,
                        fontSize: 11,
                        fontWeight: 600,
                        letterSpacing: ".04em",
                        backdropFilter: "blur(6px)",
                      }}
                    >
                      <span
                        style={{
                          width: 6,
                          height: 6,
                          borderRadius: "50%",
                          background: "var(--accent)",
                        }}
                      />
                      AULA EM DESTAQUE
                    </div>
                  </>
                )}
              </div>

              {/* Featured lesson info */}
              <div>
                <div
                  style={{
                    fontSize: 11,
                    color: "var(--accent)",
                    fontWeight: 700,
                    letterSpacing: ".16em",
                    textTransform: "uppercase",
                  }}
                >
                  Você já chega preparada
                </div>
                <h3
                  style={{
                    fontFamily: "var(--font-serif)",
                    fontWeight: 700,
                    fontSize: 26,
                    margin: "6px 0",
                    color: "#fff",
                    letterSpacing: "-0.01em",
                  }}
                >
                  <a
                    href="https://carladahello.com.br/claude-planos/"
                    target="_blank"
                    rel="noopener"
                    style={{
                      color: "inherit",
                      textDecoration: "underline",
                      textDecorationColor: "var(--accent)",
                      textUnderlineOffset: "4px",
                      textDecorationThickness: "2px",
                    }}
                  >
                    Como se preparar para a imersão
                  </a>
                </h3>
                <p
                  style={{
                    fontSize: 14,
                    color: "rgba(255,255,255,0.68)",
                    margin: 0,
                    lineHeight: 1.5,
                  }}
                >
                  4 aulas gravadas com acesso imediato assim que confirmar sua
                  vaga.
                </p>
              </div>

              {/* Mini list */}
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 8,
                  marginTop: 4,
                }}
              >
                {lessons.map((l) => (
                  <div
                    key={l.tag}
                    className="hover-card"
                    style={{
                      display: "grid",
                      gridTemplateColumns: "auto 1fr auto",
                      gap: 14,
                      alignItems: "center",
                      padding: "12px 14px",
                      borderRadius: "var(--r-btn)",
                      background: "rgba(255,255,255,0.04)",
                      border: "1px solid rgba(255,255,255,0.08)",
                    }}
                  >
                    <span
                      style={{
                        width: 32,
                        height: 32,
                        borderRadius: "50%",
                        background: "var(--accent)",
                        color: "#fff",
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <svg
                        width="12"
                        height="12"
                        viewBox="0 0 24 24"
                        fill="#fff"
                      >
                        <path d="M8 5v14l11-7z" />
                      </svg>
                    </span>
                    <div>
                      <div
                        style={{
                          fontSize: 11,
                          color: "var(--accent)",
                          fontWeight: 700,
                          letterSpacing: ".14em",
                          textTransform: "uppercase",
                        }}
                      >
                        {l.tag}
                      </div>
                      <div
                        style={{
                          fontSize: 14,
                          color: "rgba(255,255,255,0.88)",
                          fontWeight: 500,
                        }}
                      >
                        {l.title}
                      </div>
                    </div>
                    <span
                      style={{
                        fontSize: 12,
                        color: "rgba(255,255,255,0.55)",
                        fontVariantNumeric: "tabular-nums",
                      }}
                    >
                      {l.dur}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right: session cards */}
          <div
            ref={useReveal()}
            className="reveal"
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 16,
              height: "100%",
            }}
          >
            {sessions.map((s, i) => (
              <article
                key={s.num}
                className="sessao-card"
                style={{
                  background: "var(--surface)",
                  border: "1px solid var(--hairline)",
                  borderRadius: "var(--r-card)",
                  padding: "32px 28px",
                  position: "relative",
                  overflow: "hidden",
                  flex: 1,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  transitionDelay: `${i * 80}ms`,
                }}
              >
                <div
                  style={{
                    position: "absolute",
                    inset: "0 0 auto 0",
                    height: 3,
                    background: "var(--accent)",
                  }}
                />
                <div
                  className="sessao-num"
                  style={{
                    fontFamily: "var(--font-serif)",
                    fontWeight: 700,
                    fontSize: 48,
                    color: "var(--accent)",
                    letterSpacing: "-0.03em",
                    lineHeight: 1,
                    opacity: 0.18,
                    position: "absolute",
                    right: 18,
                    top: 12,
                  }}
                >
                  {s.num}
                </div>
                <div
                  className="sessao-label"
                  style={{
                    fontSize: 14,
                    fontWeight: 700,
                    letterSpacing: ".16em",
                    color: "var(--accent)",
                    textTransform: "uppercase",
                    marginBottom: 14,
                  }}
                >
                  {s.label}
                </div>
                <h3
                  className="sessao-title"
                  style={{
                    fontFamily: "var(--font-serif)",
                    fontWeight: 700,
                    fontSize: 34,
                    color: "var(--on-surface)",
                    margin: "0 0 18px",
                    letterSpacing: "-0.01em",
                    lineHeight: 1.2,
                  }}
                >
                  {s.title}
                </h3>
                <p
                  className="sessao-body"
                  style={{
                    fontSize: 19,
                    color: "var(--on-surface-2)",
                    lineHeight: 1.65,
                    margin: 0,
                  }}
                >
                  {s.body}
                </p>
              </article>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

function SobreCarla() {
  return (
    <section
      id="sobre"
      className="sobre-section"
      style={{ padding: "120px 0", background: "var(--page-bg)" }}
    >
      <Container w={1140}>
        <div
          className="sobre-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "0.9fr 1.1fr",
            gap: 80,
            alignItems: "center",
          }}
        >
          <div
            ref={useReveal()}
            className="reveal sobre-foto-wrap"
            style={{ position: "relative" }}
          >
            <div
              className="sobre-foto-inner"
              style={{
                aspectRatio: "4/5",
                borderRadius: "var(--r-frame)",
                overflow: "hidden",
                boxShadow: "var(--shadow-lg)",
                background: "#2a2a2a",
              }}
            >
              <img
                src="assets/2.png"
                alt="Carla Dias"
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                }}
              />
            </div>
            <div
              className="sobre-quote"
              style={{
                position: "absolute",
                left: -16,
                bottom: -22,
                background: "var(--accent)",
                color: "#fff",
                padding: "16px 18px",
                borderRadius: "var(--r-btn)",
                fontSize: 13,
                fontWeight: 600,
                lineHeight: 1.35,
                maxWidth: 260,
                boxShadow: "var(--shadow-md)",
              }}
            >
              <span
                style={{
                  fontFamily: "var(--font-serif)",
                  fontStyle: "italic",
                  fontSize: 16,
                }}
              >
                "Meu trabalho não é te ensinar a ferramenta. É ensinar a
                ferramenta a ser você."
              </span>
            </div>
          </div>

          <div ref={useReveal()} className="reveal sobre-bio-wrap">
            <Eyebrow>Quem vai te ensinar</Eyebrow>
            <h2
              className="cdh-display sobre-title"
              style={{
                fontSize: "clamp(34px, 4vw, 52px)",
                margin: "16px 0 8px",
                color: "var(--on-surface)",
                letterSpacing: "-0.02em",
              }}
            >
              Sou{" "}
              <em
                style={{
                  fontStyle: "italic",
                  fontWeight: 500,
                  color: "var(--accent)",
                  fontFamily: "var(--font-serif)",
                }}
              >
                Carla Dias.
              </em>
            </h2>
            <p
              className="sobre-sub"
              style={{
                fontFamily: "var(--font-script)",
                fontSize: 26,
                color: "var(--on-surface-2)",
                margin: "0 0 24px",
              }}
            >
              (estrategista, não influenciadora)
            </p>
            <p
              className="sobre-bio-text"
              style={{
                fontSize: 16,
                color: "var(--on-surface-2)",
                lineHeight: 1.7,
                margin: "0 0 18px",
                maxWidth: 540,
              }}
            >
              Sou estrategista de marketing para mulheres que empreendem
              sozinhas, com mais de 15 anos de experiência no mercado digital e
              especialista em nanoinfluência.
            </p>
            <p
              className="sobre-bio-text"
              style={{
                fontSize: 16,
                color: "var(--on-surface-2)",
                lineHeight: 1.7,
                margin: "0 0 18px",
                maxWidth: 540,
              }}
            >
              No último ano mergulhei de cabeça em inteligência artificial, não
              para vender curso de ferramenta, mas para entender o que de fato
              funciona para quem opera uma empresa sozinha com recursos
              limitados. O que aprendi de manhã, comecei a ensinar à tarde para
              as minhas alunas.
            </p>
            <p
              className="sobre-bio-text"
              style={{
                fontSize: 16,
                color: "var(--on-surface-2)",
                lineHeight: 1.7,
                margin: "0 0 32px",
                maxWidth: 540,
              }}
            >
              O que eu vejo todo dia? Empreendedoras inteligentes, com negócios
              reais, exaustas de produzir conteúdo por obrigação e sem saber se
              o Instagram está trazendo cliente de verdade.{" "}
              <strong style={{ color: "var(--on-surface)" }}>
                É exatamente isso que a gente vai resolver juntas nessas duas
                noites.
              </strong>
            </p>

            <div
              className="sobre-credits"
              style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 14,
                maxWidth: 480,
              }}
            >
              {[
                "Especialista em nanoinfluência e negócios enxutos",
                "Marketing adaptado para negócios de uma pessoa só",
                "IA aplicada à rotina real de pequenas empresárias",
                "Mais de 15 anos transformando marketing em estrutura",
              ].map((c, i) => (
                <div
                  key={i}
                  style={{
                    display: "flex",
                    gap: 10,
                    fontSize: 13.5,
                    color: "var(--on-surface)",
                    alignItems: "flex-start",
                    lineHeight: 1.5,
                  }}
                >
                  <span style={{ color: "var(--accent)", fontWeight: 800 }}>
                    ✓
                  </span>
                  <span>{c}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Metodo, SobreCarla });