/* sections-ryan.jsx — Ryan block (dark), Video modal, Method rings */

/* Global video modal — listens for window event "ff:video" */
function VideoModal() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    const open = (e) => setData(e.detail || { title: "Vídeo", subtitle: "" });
    window.addEventListener("ff:video", open);
    const esc = (e) => { if (e.key === "Escape") setData(null); };
    window.addEventListener("keydown", esc);
    return () => { window.removeEventListener("ff:video", open); window.removeEventListener("keydown", esc); };
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = data ? "hidden" : "";
  }, [data]);
  if (!data) return null;
  return (
    <div className="modal-back" onClick={() => setData(null)}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={() => setData(null)}><Icon name="x" /></button>
        <div className="mvid">
          <VideoPlaceholder dark note={data.note || "drop video"} />
          <div style={{ position: "relative", zIndex: 2, textAlign: "center", color: "var(--on-dark-muted)" }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--amber)", display: "grid", placeItems: "center", margin: "0 auto 14px" }}>
              <Icon name="play" style={{ width: 22, height: 22, color: "#fff" }} />
            </div>
            <div style={{ fontSize: 13.5, letterSpacing: ".03em" }}>O vídeo entra aqui</div>
          </div>
        </div>
        <div className="mbar">
          <div className="mt">{data.title}</div>
          <div className="ms">{data.subtitle}</div>
        </div>
      </div>
    </div>
  );
}

function playVideo(detail) { window.dispatchEvent(new CustomEvent("ff:video", { detail })); }

function RyanBlock() {
  return (
    <section className="section section-dark" id="ryan">
      <div className="container">
        <div className="ryan-grid">
          <div className="ryan-photo reveal">
            <div className="frame">
              <img src="assets/ryan.jpg" alt="Ryan" />
              <button className="ryan-play" onClick={() => playVideo({ title: "Ryan ensinando", subtitle: "90 segundos · inglês com legendas PT-BR", note: "video ryan 90s" })}>
                <span className="pico"><Icon name="play" /></span>
                Ver Ryan ensinando · 90s
              </button>
            </div>
          </div>

          <div className="ryan-copy reveal">
            <span className="eyebrow">Quem é o Ryan</span>
            <h2>No 1:1, o instrutor é o produto. Então conheça o seu.</h2>
            <div className="ryan-quote">
              <p className="lead-line">
                Sou Ryan. Há mais de cinco anos preparo profissionais sêniores para
                operar em inglês no mesmo nível em que operam em português.
              </p>
              <p>
                Já trabalhei com mais de <b>500 executivos</b> — CEOs, diretores,
                superintendentes, gerentes — em tecnologia, finanças, serviços e
                indústria. Hoje atendo exclusivamente online, em formato 1:1.
              </p>
              <p>
                Formado pela <b>Universidade de Cambridge</b> e pela <b>University College London</b>,
                sou <b>CELTA holder</b> e especializado nas metodologias TBL e Dogme — abordagens
                que substituem o ensino tradicional pelo trabalho com situações reais do seu contexto.
              </p>
              <p className="punch">
                Você não aprende inglês comigo. Você trabalha o seu business — em inglês.
              </p>
            </div>
            <div className="ryan-credrow">
              <span>Cambridge</span><span>UCL</span><span>CELTA holder</span><span>TBL · Dogme</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const METHOD_ORBITAL = [
  {
    id: 1, step: "Camada 01", icon: "search", energy: 100,
    label: "Pesquisa de setor", relatedIds: [2],
  },
  {
    id: 2, step: "Camada 02", icon: "target", energy: 75,
    label: "Trabalho real", relatedIds: [1, 3],
  },
  {
    id: 3, step: "Camada 03", icon: "star", energy: 50,
    label: "Fluência executiva", relatedIds: [2],
  },
];

function Method() {
  const [angle, setAngle] = React.useState(0);
  const [auto, setAuto] = React.useState(true);
  const [activeId, setActiveId] = React.useState(null);
  const containerRef = React.useRef(null);
  const orbitRef = React.useRef(null);

  React.useEffect(() => {
    if (!auto) return;
    const id = setInterval(() => setAngle((a) => +(((a + 0.3) % 360).toFixed(3))), 50);
    return () => clearInterval(id);
  }, [auto]);

  const onBackdropClick = (e) => {
    if (e.target === containerRef.current || e.target === orbitRef.current) {
      setActiveId(null); setAuto(true);
    }
  };

  const toggle = (id) => {
    setActiveId((prev) => {
      if (prev === id) { setAuto(true); return null; }
      setAuto(false);
      const nodeIndex = METHOD_ORBITAL.findIndex((n) => n.id === id);
      const target = (nodeIndex / METHOD_ORBITAL.length) * 360;
      setAngle(270 - target);
      return id;
    });
  };

  const total = METHOD_ORBITAL.length;
  const radius = 200;

  const getPos = (i) => {
    const a = ((i / total) * 360 + angle) % 360;
    const rad = (a * Math.PI) / 180;
    const x = radius * Math.cos(rad);
    const y = radius * Math.sin(rad);
    const z = Math.round(100 + 50 * Math.cos(rad));
    const opacity = Math.max(0.45, Math.min(1, 0.45 + 0.55 * ((1 + Math.sin(rad)) / 2)));
    return { x, y, z, opacity };
  };

  const activeNode = METHOD_ORBITAL.find((n) => n.id === activeId);
  const isRelated = (id) => activeNode ? activeNode.relatedIds.includes(id) : false;
  const m = METHOD.find((_, i) => i === (activeId ? activeId - 1 : 0)) || METHOD[0];

  return (
    <section className="section section-method" id="metodo">
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: "center", margin: "0 auto" }}>
          <span className="eyebrow">O método</span>
          <h2 className="section-title">Três camadas. Uma diferença que nenhum concorrente entrega.</h2>
          <p className="section-lede">Clique em qualquer camada para ver como ela se conecta com as outras.</p>
        </div>

        <div className="orbital reveal" ref={containerRef} onClick={onBackdropClick}>
          <div className="orbital-stage" ref={orbitRef}>
            <div className="orbital-core">
              <div className="orbital-core__ping orbital-core__ping--1" />
              <div className="orbital-core__ping orbital-core__ping--2" />
              <div className="orbital-core__inner" />
            </div>
            <div className="orbital-track" />

            {METHOD_ORBITAL.map((n, i) => {
              const p = getPos(i);
              const isActive = activeId === n.id;
              const rel = isRelated(n.id);
              const meta = METHOD[i];
              return (
                <div
                  key={n.id}
                  className={"orbital-node" + (isActive ? " is-active" : "") + (rel ? " is-related" : "")}
                  style={{
                    transform: `translate(${p.x}px, ${p.y}px)`,
                    zIndex: isActive ? 200 : p.z,
                    opacity: isActive ? 1 : p.opacity,
                  }}
                  onClick={(e) => { e.stopPropagation(); toggle(n.id); }}
                >
                  <div className="orbital-node__halo" />
                  <div className="orbital-node__dot">
                    <Icon name={n.icon} />
                  </div>
                  <div className="orbital-node__title">{n.label}</div>

                  {isActive && (
                    <div className="orbital-card" onClick={(e) => e.stopPropagation()}>
                      <div className="orbital-card__stem" />
                      <div className="orbital-card__head">
                        <span className="orbital-card__step">{n.step}</span>
                        <span className="orbital-card__id">#{String(n.id).padStart(2, "0")}</span>
                      </div>
                      <h3 className="orbital-card__title">{meta.h}</h3>
                      <p className="orbital-card__body">{meta.p}</p>
                      <div className="orbital-card__hi">
                        <Icon name="spark" />
                        <span>{meta.highlight}</span>
                      </div>
                      <div className="orbital-card__energy">
                        <div className="lab">
                          <span><Icon name="spark" /> Profundidade</span>
                          <span className="val">{n.energy}%</span>
                        </div>
                        <div className="bar"><div style={{ width: n.energy + "%" }} /></div>
                      </div>
                      {n.relatedIds.length > 0 && (
                        <div className="orbital-card__rel">
                          <div className="lab">Camadas conectadas</div>
                          <div className="chips">
                            {n.relatedIds.map((rid) => {
                              const r = METHOD_ORBITAL.find((x) => x.id === rid);
                              return (
                                <button key={rid} className="chip" onClick={(e) => { e.stopPropagation(); toggle(rid); }}>
                                  {r.label} <Icon name="arrow" />
                                </button>
                              );
                            })}
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VideoModal, RyanBlock, Method, playVideo });