// Clube da Luz — sections part B: Trilhas, Mentor, Régua, Vozes

const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

/* ============================================================ */
/* Trilhas                                                      */
/* ============================================================ */
const TRILHAS = [
  {
    n: "I",
    titulo: "Jeito Criativo de Ser",
    sub: "Trilha fundadora",
    desc: "A base do círculo. Doze encontros que reorganizam a relação com o tempo, o medo e a coragem de começar.",
    duracao: "12 encontros · 6 meses",
    formato: "Vivo + biblioteca",
    accent: "linear-gradient(135deg, rgba(122,215,232,0.35), rgba(40,144,176,0.08))",
    mood: "abertura",
  },
  {
    n: "II",
    titulo: "Régua Criativa",
    sub: "Diagnóstico em profundidade",
    desc: "Mapeamento das oito dimensões da prática criativa, com devolutiva 1:1 e plano de desenvolvimento por seis meses.",
    duracao: "Diagnóstico vivo",
    formato: "Individual",
    accent: "linear-gradient(135deg, rgba(232,192,121,0.32), rgba(74,184,216,0.12))",
    mood: "leitura",
  },
  {
    n: "III",
    titulo: "Laboratório de Obra",
    sub: "Para projetos em curso",
    desc: "Um espaço para tirar do papel — produto, livro, marca, formação — com acompanhamento semanal do círculo.",
    duracao: "Contínuo · em ondas",
    formato: "Coletivo + 1:1",
    accent: "linear-gradient(135deg, rgba(40,144,176,0.3), rgba(14,20,36,0.6))",
    mood: "execução",
  },
  {
    n: "IV",
    titulo: "Mentoria de Marca",
    sub: "Posicionamento autoral",
    desc: "Para quem quer construir um nome que dure — narrativa, voz, presença pública, monetização do que é seu.",
    duracao: "Sob consulta",
    formato: "1:1 com Adriano",
    accent: "linear-gradient(135deg, rgba(232,192,121,0.28), rgba(201,152,72,0.18))",
    mood: "consagração",
  },
];

function Trilhas() {
  const [hovered, setHovered] = useStateB(null);
  const vw = window.useViewport();
  const isMobile = vw <= 820;

  return (
    <section id="trilhas" style={{ padding: "120px 0", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <window.Reveal>
          <div
            className="stack-mobile"
            style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "flex-end", marginBottom: 64 }}
          >
            <div style={{ maxWidth: 620 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>— 02 · Trilhas selecionadas</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 80px)", lineHeight: 1.05 }}>
                Quatro caminhos.<br />
                <span className="display-italic grad-dual">Um mesmo círculo.</span>
              </h2>
            </div>
            <div className="serial" style={{ maxWidth: 280, textAlign: isMobile ? "left" : "right" }}>
              Cada trilha é viva. A sequência é sua — desenhada na entrevista de aplicação.
            </div>
          </div>
        </window.Reveal>

        <div style={{ borderTop: "1px solid var(--line)" }}>
          {TRILHAS.map((t, i) => (
            <window.Reveal delay={Math.min(i + 1, 4)} key={i}>
              <a
                href="#aplicar"
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
                style={{
                  display: "grid",
                  gridTemplateColumns: isMobile
                    ? "60px 1fr 40px"
                    : "80px 1.4fr 1fr 200px 60px",
                  gap: isMobile ? 16 : 32,
                  padding: isMobile ? "24px 0" : "32px 0",
                  alignItems: "center",
                  borderBottom: "1px solid var(--line)",
                  position: "relative",
                  cursor: "pointer",
                  transition: "all .35s ease",
                }}
              >
                <div style={{
                  position: "absolute",
                  inset: "0 -40px",
                  background: t.accent,
                  opacity: hovered === i ? 1 : 0,
                  transition: "opacity .4s ease",
                  pointerEvents: "none",
                  borderRadius: 4,
                }} />
                <div className="display display-italic" style={{
                  fontSize: isMobile ? 38 : 56,
                  color: hovered === i ? "var(--gold)" : "var(--muted-2)",
                  transition: "color .3s",
                  position: "relative",
                }}>{t.n}</div>

                <div style={{ position: "relative" }}>
                  <div className="display" style={{ fontSize: isMobile ? 22 : 30, marginBottom: 6 }}>{t.titulo}</div>
                  <div className="serial" style={{ marginBottom: isMobile ? 8 : 0 }}>{t.sub} · {t.mood}</div>
                  {isMobile && (
                    <p style={{ fontSize: 13.5, color: "var(--ivory-dim)", lineHeight: 1.55, marginTop: 8 }}>
                      {t.desc}
                    </p>
                  )}
                  {isMobile && (
                    <div style={{ marginTop: 12, fontFamily: "var(--f-mono)", fontSize: 10.5, color: "var(--muted)", letterSpacing: "0.08em" }}>
                      {t.duracao} · {t.formato}
                    </div>
                  )}
                </div>

                {!isMobile && (
                  <div style={{ fontSize: 14.5, color: "var(--ivory-dim)", lineHeight: 1.55, position: "relative" }}>
                    {t.desc}
                  </div>
                )}
                {!isMobile && (
                  <div style={{ position: "relative", fontFamily: "var(--f-mono)", fontSize: 11.5, color: "var(--muted)", letterSpacing: "0.08em" }}>
                    <div>{t.duracao}</div>
                    <div style={{ marginTop: 4, color: "var(--muted-2)" }}>{t.formato}</div>
                  </div>
                )}

                <div style={{ position: "relative", textAlign: "right" }}>
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" style={{
                    transition: "all .35s ease",
                    transform: hovered === i ? "translateX(4px)" : "translateX(0)",
                    color: hovered === i ? "var(--gold)" : "var(--muted)"
                  }}>
                    <circle cx="16" cy="16" r="15" stroke="currentColor" strokeWidth="1" opacity="0.4"/>
                    <path d="M12 16h8M16 12l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
                  </svg>
                </div>
              </a>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
/* Mentor — retrato real do Adriano com tratamento dourado       */
/* ============================================================ */
function Mentor() {
  const tilt = window.useMouseTilt(0.5);
  const [portRef, portOffset] = window.useParallax(0.06);
  const vw = window.useViewport();
  const isMobile = vw <= 820;

  return (
    <section id="mentor" style={{ padding: "120px 0", position: "relative", overflow: "hidden" }}>
      {/* aurora */}
      <div style={{
        position: "absolute",
        right: "-20%", top: "5%",
        width: 800, height: 800,
        background: "radial-gradient(circle, rgba(232,192,121,0.22) 0%, transparent 60%)",
        filter: "blur(40px)",
        pointerEvents: "none",
      }} />
      <div style={{
        position: "absolute",
        left: "-10%", bottom: "-10%",
        width: 600, height: 600,
        background: "radial-gradient(circle, rgba(74,184,216,0.18) 0%, transparent 60%)",
        filter: "blur(40px)",
        pointerEvents: "none",
      }} />

      <div className="wrap">
        <div
          className="stack-mobile scene-3d"
          ref={tilt.ref}
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: isMobile ? 56 : 100,
            alignItems: "center",
          }}
        >
          <div>
            <window.Reveal>
              <div className="eyebrow eyebrow-gold" style={{ marginBottom: 16, color: "var(--gold)" }}>— 03 · Quem conduz</div>
              <h2 className="display" style={{ fontSize: "clamp(48px, 6.5vw, 92px)", lineHeight: 1.0, marginBottom: 28 }}>
                Adriano<br />
                <span className="display-italic grad-gold">Ribeiro</span>.
              </h2>
            </window.Reveal>
            <window.Reveal delay={1}>
              <div style={{ fontSize: 13.5, color: "var(--muted)", fontFamily: "var(--f-mono)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 32 }}>
                Estrategista criativo · Mentor · Autor
              </div>

              <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--ivory-dim)", marginBottom: 24, maxWidth: 520 }}>
                Vinte anos a estudar a engrenagem da criatividade aplicada — em marcas, pessoas e instituições.
                Conduz o círculo com um método próprio, a <span className="gold">Régua Criativa</span>, e uma escuta
                que combina rigor e poesia.
              </p>
              <p style={{ fontSize: 14.5, lineHeight: 1.7, color: "var(--muted)", maxWidth: 520, marginBottom: 40 }}>
                Atua entre Rio de Janeiro, São Paulo e Lisboa. Atendeu mais de 600 mentorados desde 2018.
                O Clube da Luz é o ambiente onde ele opera de forma mais íntima.
              </p>
            </window.Reveal>

            <window.Reveal delay={2}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, borderTop: "1px solid var(--line)", paddingTop: 28 }}>
                <CredItem k="600+" v="mentorados" />
                <CredItem k="18" v="anos de prática" />
                <CredItem k="08" v="dimensões da Régua" />
                <CredItem k="04" v="livros publicados" />
              </div>
            </window.Reveal>
          </div>

          {/* portrait card with real Adriano image */}
          <window.Reveal delay={1} slow>
            <div
              ref={portRef}
              style={{
                position: "relative",
                transform: `translate3d(${tilt.tx * -14}px, ${(tilt.ty * -14) + portOffset}px, 0) rotateY(${tilt.tx * 4}deg) rotateX(${tilt.ty * -4}deg)`,
                transition: "transform .25s cubic-bezier(.2,.7,.2,1)",
                transformStyle: "preserve-3d",
              }}
            >
              <div style={{
                aspectRatio: "726/898",
                borderRadius: 6,
                overflow: "hidden",
                border: "1px solid var(--line-strong)",
                background: "linear-gradient(180deg, #0e1424 0%, #1B2436 100%)",
                position: "relative",
                boxShadow:
                  "0 50px 90px -20px rgba(0,0,0,0.7), " +
                  "0 0 80px -10px rgba(232,192,121,0.28), " +
                  "0 0 0 1px rgba(255,255,255,0.04)",
              }}>
                <img
                  src="assets/adriano.png"
                  alt="Adriano Ribeiro"
                  style={{
                    width: "100%", height: "100%", objectFit: "cover",
                    display: "block",
                    filter: "contrast(1.04) saturate(1.08)",
                  }}
                />
                {/* gold ember overlay */}
                <div style={{
                  position: "absolute", inset: 0,
                  background:
                    "radial-gradient(60% 50% at 25% 35%, rgba(232,192,121,0.22), transparent 70%)," +
                    "linear-gradient(180deg, transparent 65%, rgba(6,9,18,0.6) 100%)",
                  pointerEvents: "none",
                }} />
                {/* corner caption */}
                <div style={{
                  position: "absolute", bottom: 16, left: 18, right: 18,
                  display: "flex", justifyContent: "space-between", alignItems: "flex-end",
                  color: "var(--ivory-dim)", fontFamily: "var(--f-mono)", fontSize: 10.5, letterSpacing: "0.14em",
                  textTransform: "uppercase",
                }}>
                  <span>· Retrato · A. Ribeiro</span>
                  <span>2026 / RJ</span>
                </div>
              </div>

              {/* floating signature card */}
              <div
                style={{
                  position: "absolute",
                  bottom: -26, left: isMobile ? 12 : -28,
                  background: "rgba(14,20,36,0.92)",
                  border: "1px solid var(--line-strong)",
                  padding: "18px 22px",
                  borderRadius: 4,
                  maxWidth: 280,
                  backdropFilter: "blur(10px)",
                  transform: `translate3d(${tilt.tx * 22}px, ${tilt.ty * 22}px, 0)`,
                  transition: "transform .25s cubic-bezier(.2,.7,.2,1)",
                  boxShadow: "0 20px 50px -10px rgba(0,0,0,0.5)",
                }}
              >
                <div className="display display-italic grad-gold" style={{ fontSize: 24, marginBottom: 6 }}>
                  "Trazer à luz."
                </div>
                <div className="serial">∴ Assinatura do círculo</div>
              </div>
            </div>
          </window.Reveal>
        </div>
      </div>
    </section>
  );
}

function CredItem({ k, v }) {
  return (
    <div>
      <div className="display" style={{ fontSize: 34, color: "var(--ivory)", marginBottom: 4 }}>{k}</div>
      <div style={{ fontFamily: "var(--f-mono)", fontSize: 10.5, color: "var(--muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{v}</div>
    </div>
  );
}

/* ============================================================ */
/* Régua Criativa — interactive teaser                          */
/* ============================================================ */
const DIMENSOES = [
  { n: "Escuta", v: 78 },
  { n: "Ritual", v: 64 },
  { n: "Coragem", v: 82 },
  { n: "Forma", v: 55 },
  { n: "Voz", v: 71 },
  { n: "Tempo", v: 48 },
  { n: "Ofício", v: 68 },
  { n: "Legado", v: 60 },
];

function Regua() {
  const [active, setActive] = useStateB(0);
  const [animating, setAnimating] = useStateB(false);
  const vw = window.useViewport();
  const isMobile = vw <= 820;

  useEffectB(() => {
    const t = setInterval(() => {
      setAnimating(true);
      setTimeout(() => {
        setActive(a => (a + 1) % DIMENSOES.length);
        setAnimating(false);
      }, 300);
    }, 2400);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="regua" style={{
      padding: "120px 0",
      borderTop: "1px solid var(--line)",
      background: "linear-gradient(180deg, transparent 0%, rgba(10,15,28,0.6) 50%, transparent 100%)",
    }}>
      <div className="wrap">
        <div
          className="stack-mobile"
          style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: isMobile ? 56 : 100, alignItems: "center" }}
        >
          <div>
            <window.Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>— 04 · Régua Criativa</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 76px)", lineHeight: 1.05, marginBottom: 28 }}>
                Oito dimensões.<br />
                <span className="display-italic grad-aqua">Um retrato vivo</span><br />
                da sua prática.
              </h2>
              <p style={{ fontSize: 15.5, lineHeight: 1.7, color: "var(--ivory-dim)", maxWidth: 480, marginBottom: 40 }}>
                Um diagnóstico que substitui achismo por leitura — para quem já entendeu que ajustar o invisível
                é o que muda o visível. Membros do círculo refazem a Régua a cada seis meses.
              </p>
            </window.Reveal>

            <window.Reveal delay={2}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--line)" }}>
                {DIMENSOES.map((d, i) => (
                  <div
                    key={i}
                    onMouseEnter={() => setActive(i)}
                    style={{
                      padding: "15px 16px",
                      borderBottom: "1px solid var(--line)",
                      borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none",
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      background: active === i ? "rgba(122,215,232,0.06)" : "transparent",
                      transition: "background .25s",
                      cursor: "pointer",
                    }}
                  >
                    <span style={{ fontSize: 14, color: active === i ? "var(--aqua)" : "var(--ivory)" }}>
                      <span className="serial" style={{ marginRight: 10 }}>0{i+1}</span>
                      {d.n}
                    </span>
                    <span className="display" style={{ fontSize: 18, color: active === i ? "var(--aqua)" : "var(--muted)" }}>
                      {d.v}
                    </span>
                  </div>
                ))}
              </div>
            </window.Reveal>
          </div>

          <window.Reveal delay={1} slow>
            <div style={{
              aspectRatio: "1",
              position: "relative",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}>
              <RadarViz active={active} animating={animating} />
            </div>
          </window.Reveal>
        </div>
      </div>
    </section>
  );
}

function RadarViz({ active, animating }) {
  const size = 460;
  const cx = size / 2, cy = size / 2;
  const rMax = size * 0.42;
  const n = DIMENSOES.length;

  const points = DIMENSOES.map((d, i) => {
    const angle = (i / n) * Math.PI * 2 - Math.PI / 2;
    const r = (d.v / 100) * rMax;
    return [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r];
  });

  const labels = DIMENSOES.map((d, i) => {
    const angle = (i / n) * Math.PI * 2 - Math.PI / 2;
    const r = rMax + 28;
    return { x: cx + Math.cos(angle) * r, y: cy + Math.sin(angle) * r, n: d.n };
  });

  const polyPath = points.map(p => `${p[0]},${p[1]}`).join(" ");

  return (
    <svg viewBox={`-30 -20 ${size + 60} ${size + 40}`} width="100%" height="100%" overflow="visible" style={{ overflow: "visible" }}>
      <defs>
        <radialGradient id="radarFill" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(122,215,232,0.35)" />
          <stop offset="100%" stopColor="rgba(232,192,121,0.12)" />
        </radialGradient>
      </defs>

      {[0.25, 0.5, 0.75, 1].map((r, i) => (
        <circle key={i} cx={cx} cy={cy} r={rMax * r} fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
      ))}
      {DIMENSOES.map((d, i) => {
        const angle = (i / n) * Math.PI * 2 - Math.PI / 2;
        return (
          <line key={i} x1={cx} y1={cy}
            x2={cx + Math.cos(angle) * rMax}
            y2={cy + Math.sin(angle) * rMax}
            stroke="rgba(255,255,255,0.06)" strokeWidth="1"
          />
        );
      })}

      <polygon points={polyPath} fill="url(#radarFill)" stroke="var(--aqua)" strokeWidth="1.5"
        style={{ filter: "drop-shadow(0 0 12px rgba(122,215,232,0.5))", transition: "all .4s ease" }} />

      {points.map((p, i) => (
        <g key={i}>
          <circle cx={p[0]} cy={p[1]} r={active === i ? 7 : 4}
            fill={active === i ? "var(--gold)" : "var(--ivory)"}
            style={{ transition: "all .3s ease", filter: active === i ? "drop-shadow(0 0 10px var(--gold))" : "none" }}
          />
        </g>
      ))}

      {labels.map((l, i) => (
        <text key={i}
          x={l.x} y={l.y}
          textAnchor="middle"
          dominantBaseline="middle"
          fontSize="11"
          fontFamily="var(--f-mono)"
          letterSpacing="2"
          fill={active === i ? "var(--gold)" : "var(--muted)"}
          style={{ textTransform: "uppercase", transition: "fill .3s" }}
        >
          {l.n.toUpperCase()}
        </text>
      ))}

      <circle cx={cx} cy={cy} r="3" fill="var(--ivory)" />
      <circle cx={cx} cy={cy} r="22" fill="none" stroke="var(--ivory)" strokeWidth="0.5" opacity="0.4" />
    </svg>
  );
}

/* ============================================================ */
/* Vozes (testimonials)                                         */
/* ============================================================ */
const VOZES = [
  { q: "Não era mais um curso. Era um espelho. Saí do primeiro encontro com a clareza que faltava há cinco anos.", a: "Marina F.", r: "Fundadora, estúdio de design", c: "Edição III" },
  { q: "A Régua mostrou onde minha prática estava muda. Em três meses, escrevi o livro que adiava desde 2019.", a: "Pedro V.", r: "Estrategista de marca", c: "Edição II" },
  { q: "O círculo é raro. Pessoas que se cobram, se elogiam e se sustentam. O método do Adriano é o que segura tudo.", a: "Luísa N.", r: "Diretora criativa", c: "Edição I" },
];

function Vozes() {
  return (
    <section style={{ padding: "120px 0", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <window.Reveal>
          <div
            className="stack-mobile"
            style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "flex-end", marginBottom: 64 }}
          >
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>— 05 · Vozes do círculo</div>
              <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 68px)", lineHeight: 1.05 }}>
                O que dizem<br />
                <span className="display-italic grad-gold">de dentro.</span>
              </h2>
            </div>
            <div className="serial" style={{ maxWidth: 220 }}>
              Coletados após o ciclo completo. Identidades preservadas a pedido.
            </div>
          </div>
        </window.Reveal>

        <div
          className="vozes-grid"
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}
        >
          {VOZES.map((v, i) => (
            <window.Reveal delay={i + 1} key={i}>
              <div style={{
                padding: "32px 28px",
                border: "1px solid var(--line)",
                borderRadius: 6,
                background: "linear-gradient(180deg, rgba(14,20,36,0.6) 0%, rgba(10,15,28,0.3) 100%)",
                position: "relative",
                minHeight: 320,
                display: "flex",
                flexDirection: "column",
                transition: "transform .4s ease, border-color .4s ease",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.borderColor = "rgba(232,192,121,0.3)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.borderColor = "var(--line)"; }}
              >
                <div className="display display-italic grad-gold" style={{ fontSize: 64, lineHeight: 0.5, marginBottom: 20 }}>"</div>
                <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--ivory)", marginBottom: "auto", fontFamily: "var(--f-display)" }}>
                  {v.q}
                </p>
                <div style={{ marginTop: 28, paddingTop: 18, borderTop: "1px solid var(--line)" }}>
                  <div style={{ fontSize: 14, color: "var(--ivory)", marginBottom: 4 }}>{v.a}</div>
                  <div className="serial">{v.r} · {v.c}</div>
                </div>
              </div>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Trilhas, Mentor, Regua, Vozes });