/* global React, METH_CONTENT */
/*
  METODOLOGIA V3 — "Process Diagram"
  Esquerda: bloco editorial com título e KPI/manifesto. Direita: diagrama orbital DMAIC com letras nas pontas
  de um arco, conectadas por linhas. Faz parecer um processo de engenharia industrial.

  Mobile: empilha (header → diagrama → lista), escala os chips/fontes do diagrama e adiciona respiro
  para os quadradinhos não vazarem para fora do container.
*/

const METH_CONTENT_V3 = window.METH_CONTENT || {
  tag: "Nossa metodologia",
  title: "DMAIC Operacional",
  desc: "Estrutura prática para organizar, medir e melhorar o hotel em tempo real.",
  steps: [
    { l: "D", t: "Definir", d: "Identificamos gargalos reais a partir do comportamento do hóspede." },
    { l: "M", t: "Medir", d: "Capturamos KPIs automaticamente de pedidos e fluxos." },
    { l: "A", t: "Analisar", d: "Identificamos padrões que impactam experiência e resultado." },
    { l: "I", t: "Melhorar", d: "Otimizamos fluxos operacionais com base em dados reais." },
    { l: "C", t: "Controlar", d: "Garantimos consistência com monitoramento contínuo." },
  ],
};

function useMethMobile(breakpoint = 860) {
  const get = () =>
    typeof window !== "undefined" ? window.innerWidth <= breakpoint : false;
  const [isMobile, setIsMobile] = React.useState(get);
  React.useEffect(() => {
    const onResize = () => setIsMobile(get());
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [breakpoint]);
  return isMobile;
}

function MethodologyV3() {
  const t = window.METH_CONTENT || METH_CONTENT_V3;
  const isMobile = useMethMobile();

  /* ---- Header editorial (tag + título + descrição) ---- */
  const header = (
    <div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 14,
          marginBottom: isMobile ? 18 : 28,
        }}
      >
        <div
          style={{
            height: 2,
            width: 36,
            background: "#2f6bff",
            boxShadow: "0 0 12px rgba(47,107,255,0.6)",
          }}
        ></div>
        <span
          style={{
            fontSize: isMobile ? 10 : 11,
            fontWeight: 900,
            color: "#7aa8ff",
            letterSpacing: "0.4em",
            textTransform: "uppercase",
          }}
        >
          {t.tag}
        </span>
      </div>
      <h3
        style={{
          fontSize: isMobile ? 38 : 76,
          fontWeight: 900,
          letterSpacing: "-0.045em",
          lineHeight: 0.95,
          margin: isMobile ? "0 0 16px" : "0 0 26px",
        }}
        className="lh-laser"
      >
        {t.title}
      </h3>
      <p
        style={{
          color: "rgba(255,255,255,0.65)",
          fontSize: isMobile ? 15 : 18,
          fontWeight: 300,
          lineHeight: 1.55,
          margin: isMobile ? "0 0 28px" : "0 0 36px",
          maxWidth: 480,
        }}
      >
        {t.desc}
      </p>
    </div>
  );

  /* ---- Lista de passos (editorial) ---- */
  const stepsList = (
    <div
      className="lh-card"
      style={{
        borderRadius: 24,
        padding: isMobile ? "4px 16px" : "8px 24px",
      }}
    >
      {t.steps.map((s, i) => (
        <div
          key={s.l}
          style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "38px 1fr" : "44px 1fr",
            gap: isMobile ? 14 : 18,
            padding: isMobile ? "16px 0" : "20px 0",
            borderBottom:
              i === t.steps.length - 1
                ? "none"
                : "1px solid rgba(255,255,255,0.06)",
            alignItems: "center",
          }}
        >
          <div
            style={{
              width: isMobile ? 38 : 44,
              height: isMobile ? 38 : 44,
              borderRadius: 12,
              background: "rgba(47,107,255,0.15)",
              border: "1px solid rgba(47,107,255,0.3)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <span
              style={{
                fontSize: isMobile ? 19 : 22,
                fontWeight: 900,
                fontStyle: "italic",
                color: "#7aa8ff",
                letterSpacing: "-0.05em",
              }}
            >
              {s.l}
            </span>
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: isMobile ? "column" : "row",
              alignItems: isMobile ? "flex-start" : "baseline",
              gap: isMobile ? 3 : 16,
            }}
          >
            <h4
              style={{
                fontSize: isMobile ? 16 : 20,
                fontWeight: 900,
                letterSpacing: "-0.02em",
                margin: 0,
                color: "#fff",
                minWidth: isMobile ? 0 : 92,
              }}
            >
              {s.t}
            </h4>
            <p
              style={{
                color: "rgba(255,255,255,0.6)",
                fontSize: isMobile ? 12.5 : 13,
                fontWeight: 300,
                lineHeight: 1.45,
                margin: 0,
                flex: 1,
              }}
            >
              {s.d}
            </p>
          </div>
        </div>
      ))}
    </div>
  );

  /* ---- Diagrama circular ---- */
  const diagram = (
    <div
      style={{
        position: "relative",
        aspectRatio: "1 / 1",
        maxWidth: isMobile ? 360 : 600,
        margin: "0 auto",
        width: "100%",
        /* respiro para os chips não vazarem para fora no mobile */
        padding: isMobile ? "34px 36px 46px" : 0,
        boxSizing: "border-box",
      }}
    >
      <DmaicDiagram steps={t.steps} isMobile={isMobile} />
    </div>
  );

  return (
    <div className="lh-stage">
      <div className="lh-bg">
        <div className="lh-aurora">
          <div className="lh-blob a"></div>
          <div className="lh-blob b"></div>
        </div>
        <div className="lh-hex"></div>
        <div className="lh-hex-glow"></div>
      </div>

      <div
        style={{
          position: "relative",
          zIndex: 2,
          padding: isMobile ? "56px 20px" : "80px 80px 80px",
          maxWidth: 1440,
          margin: "0 auto",
        }}
      >
        {isMobile ? (
          /* MOBILE — empilhado: header → diagrama → lista */
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {header}
            {diagram}
            {stepsList}
          </div>
        ) : (
          /* DESKTOP — duas colunas */
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1.05fr",
              gap: 64,
              alignItems: "center",
            }}
          >
            <div>
              {header}
              {stepsList}
            </div>
            {diagram}
          </div>
        )}
      </div>
    </div>
  );
}

function DmaicDiagram({ steps, isMobile }) {
  // 5 points on a circle, top start, going clockwise
  const radius = 38; // % of svg
  const cx = 50;
  const cy = 50;
  const pts = steps.map((s, i) => {
    const angle = (-Math.PI / 2) + (i * 2 * Math.PI) / steps.length;
    return {
      ...s,
      x: cx + radius * Math.cos(angle),
      y: cy + radius * Math.sin(angle),
      angle,
    };
  });

  // Tamanhos dos chips/fontes escalam no mobile
  const chip = isMobile ? 52 : 72;
  const chipRadius = isMobile ? 15 : 20;
  const letterSize = isMobile ? 27 : 38;
  const labelSize = isMobile ? 8 : 10;
  const labelGap = isMobile ? 7 : 9;

  return (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      {/* Glow background */}
      <div
        style={{
          position: "absolute",
          inset: "10%",
          borderRadius: "50%",
          background:
            "radial-gradient(circle, rgba(47,107,255,0.3) 0%, transparent 65%)",
          filter: "blur(40px)",
        }}
      ></div>

      <svg viewBox="0 0 100 100" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <defs>
          <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="rgba(47,107,255,0.7)" />
            <stop offset="100%" stopColor="rgba(122,168,255,0.2)" />
          </linearGradient>
        </defs>
        {/* Outer ring */}
        <circle cx={cx} cy={cy} r={radius} fill="none" stroke="url(#ringGrad)" strokeWidth="0.5" strokeDasharray="0.4 1.2" />
        {/* Inner subtle ring */}
        <circle cx={cx} cy={cy} r={radius - 8} fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="0.2" />
        {/* Connectors */}
        {pts.map((p, i) => {
          const next = pts[(i + 1) % pts.length];
          return (
            <line
              key={i}
              x1={p.x}
              y1={p.y}
              x2={next.x}
              y2={next.y}
              stroke="rgba(47,107,255,0.35)"
              strokeWidth="0.3"
              strokeDasharray="0.5 0.6"
            />
          );
        })}
        {/* Arrow heads via small circles */}
        {pts.map((p, i) => (
          <g key={`pt-${i}`}>
            <circle cx={p.x} cy={p.y} r={2.3} fill="#0a1f4a" stroke="#2f6bff" strokeWidth="0.5" />
            <circle cx={p.x} cy={p.y} r={0.8} fill="#7aa8ff" />
          </g>
        ))}
      </svg>

      {/* Center hub */}
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: "32%",
          aspectRatio: "1 / 1",
          borderRadius: "50%",
          background:
            "linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)",
          border: "1px solid rgba(255,255,255,0.12)",
          backdropFilter: "blur(8px)",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          padding: isMobile ? 8 : 20,
          boxShadow: "0 0 50px rgba(47,107,255,0.3) inset",
        }}
      >
        <span
          style={{
            fontSize: isMobile ? 7 : 9,
            fontWeight: 900,
            color: "#7aa8ff",
            letterSpacing: "0.3em",
            textTransform: "uppercase",
            marginBottom: isMobile ? 4 : 8,
          }}
        >
          Ciclo
        </span>
        <span
          className="lh-laser"
          style={{
            fontSize: isMobile ? 28 : 44,
            fontWeight: 900,
            letterSpacing: "-0.04em",
            lineHeight: 0.9,
            fontStyle: "italic",
          }}
        >
          DMAIC
        </span>
        <span
          style={{
            fontSize: isMobile ? 7 : 9,
            fontWeight: 600,
            color: "rgba(255,255,255,0.5)",
            letterSpacing: "0.1em",
            marginTop: isMobile ? 4 : 8,
            textTransform: "uppercase",
          }}
        >
          Operacional
        </span>
      </div>

      {/* Step letter chips around the circle */}
      {pts.map((p, i) => {
        // Offset labels outward — bottom chips (A, I) get extra spacing from their dots
        const labelR = radius + (i === 2 || i === 3 ? 20 : 12);
        const lx = cx + labelR * Math.cos(p.angle);
        const ly = cy + labelR * Math.sin(p.angle);
        return (
          <div
            key={p.l}
            style={{
              position: "absolute",
              left: `${lx}%`,
              top: `${ly}%`,
              transform: "translate(-50%, -50%)",
            }}
          >
            <div
              className="lh-card"
              style={{
                position: "relative",
                width: chip,
                height: chip,
                borderRadius: chipRadius,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                boxShadow: "0 12px 30px rgba(0,0,0,0.5), 0 0 30px rgba(47,107,255,0.3)",
              }}
            >
              <span
                style={{
                  fontSize: letterSize,
                  fontWeight: 900,
                  fontStyle: "italic",
                  letterSpacing: "normal",
                  lineHeight: 1,
                  display: "inline-block",
                  padding: "0 4px",
                  background: "linear-gradient(135deg, #ffffff 0%, #9cc0ff 55%, #2f6bff 100%)",
                  WebkitBackgroundClip: "text",
                  backgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  color: "transparent",
                }}
              >
                {p.l}
              </span>
              <span
                style={{
                  position: "absolute",
                  top: `calc(100% + ${labelGap}px)`,
                  left: "50%",
                  transform: "translateX(-50%)",
                  whiteSpace: "nowrap",
                  fontSize: labelSize,
                  fontWeight: 900,
                  color: "#fff",
                  letterSpacing: "0.2em",
                  textTransform: "uppercase",
                  background: "rgba(0,0,0,0.4)",
                  padding: isMobile ? "2px 7px" : "3px 10px",
                  borderRadius: 999,
                  backdropFilter: "blur(8px)",
                  border: "1px solid rgba(255,255,255,0.1)",
                }}
              >
                {p.t}
              </span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.MethodologyV3 = MethodologyV3;