/* eslint-disable */
/* =========================================================================
   Helix Pyramid — the centerpiece graphic.
   Truncated pyramid (slightly flat top) so every band carries its title
   INSIDE. Color fades light (apex / AI Enablement) -> dark (base / Capture).
   Hover expands & highlights a band; supports scroll-driven active + reveal.
   ========================================================================= */

const { useEffect, useRef, useState, useMemo } = React;

const LAYERS = [
{ id: "capture", label: "Data Capture", short: "Know every data source you have before building anything.", long: "Source inventory, data profiling, architecture decisions, historical baselines." },
{ id: "infrastructure", label: "Data Infrastructure", short: "Centralize and connect your data into one reliable environment.", long: "Centralized data environment (Snowflake / Databricks), RBAC, source integrations, orchestration." },
{ id: "governance", label: "Data Governance", short: "Make your data trusted, not just available.", long: "Data catalog and lineage, sensitive field handling, audit-ready logs." },
{ id: "intelligence", label: "Data Intelligence", short: "Turn clean data into dashboards and decisions.", long: "BI tooling (Power BI / Tableau), semantic layer, role-based dashboards, self-serve analytics." },
{ id: "ai", label: "AI Enablement", short: "Now the intelligence becomes predictive.", long: "Readiness assessment, use case identification, model development, continuous improvement loop." }];

window.LAYERS = LAYERS;

// Color ramp, indexed bottom (0) -> top (4): DARK base -> LIGHT apex.
const RAMP = ["#0a1f3d", "#1d3f6e", "#3a5d8a", "#8aa6c8", "#c9d8ea"];
window.HELIX_RAMP = RAMP;

// Geometry (viewBox space)
const PY = { W: 560, H: 480, topY: 44, botY: 436, hwTop: 0, hwBot: 250 };
PY.sliceH = (PY.botY - PY.topY) / 5;
PY.hwAt = (y) => PY.hwBot + (PY.hwTop - PY.hwBot) * (PY.botY - y) / (PY.botY - PY.topY);

// ----------------------------------------------------------------------------
function HelixPyramid({
  mode = "facet", orientation = "up", active = null, onLayerClick,
  revealed = 5, revealDir = "top", labelsInside = false, showLabels = true,
  interactive = false, emphasizeActive = false
}) {
  const { W, H, topY, botY, sliceH } = PY;
  const [hovered, setHovered] = useState(null);

  const bands = [];
  for (let i = 0; i < 5; i++) {
    const yBottom = botY - i * sliceH;
    const yTop = botY - (i + 1) * sliceH;
    const cx = W / 2;
    bands.push({
      idx: i, layer: LAYERS[i],
      yBottom, yTop, hBot: PY.hwAt(yBottom), hTop: PY.hwAt(yTop), cx,
      points: [
      [cx - PY.hwAt(yBottom), yBottom],
      [cx + PY.hwAt(yBottom), yBottom],
      [cx + PY.hwAt(yTop), yTop],
      [cx - PY.hwAt(yTop), yTop]],

      midY: (yBottom + yTop) / 2
    });
  }

  const focus = interactive && hovered || active; // current highlighted id

  const enter = (id) => interactive && setHovered(id);
  const leave = () => interactive && setHovered(null);

  return (
    <div
      className={`pyramid-shell ${labelsInside ? "has-inside-labels" : ""} ${interactive ? "is-interactive" : ""}`}
      style={{ transform: orientation === "down" ? "scaleY(-1)" : "none", transition: "transform 1.4s cubic-bezier(.7,.05,.2,1)" }}>
      
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" style={{ overflow: "visible" }}>
        {bands.map((B, i) => {
          const topDownIdx = 4 - i;
          const shown = revealDir === "bottom" ? i < revealed : topDownIdx < revealed;
          const fillSolid = RAMP[i];
          const pointsStr = B.points.map((p) => p.join(",")).join(" ");
          const cx = B.cx;
          const leftPoints = [B.points[0], [cx, B.yBottom], [cx, B.yTop], B.points[3]].map((p) => p.join(",")).join(" ");
          const rightPoints = [[cx, B.yBottom], B.points[1], B.points[2], [cx, B.yTop]].map((p) => p.join(",")).join(" ");
          const lightShade = mixHex(fillSolid, "#ffffff", 0.16);
          const darkShade = mixHex(fillSolid, "#000000", 0.18);
          const isFocus = focus === B.layer.id;

          let scale = shown ? 1 : 0.95;
          if (shown && interactive && hovered === B.layer.id) scale = 1.045;
          if (shown && emphasizeActive && active === B.layer.id) scale = 1.07;
          let opacity = shown ? 1 : 0;
          if (shown && focus && !isFocus) opacity = 0.4;

          const style = {
            transition: "opacity .55s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease",
            opacity, transformBox: "fill-box", transformOrigin: "center",
            transform: `scale(${scale})`,
            cursor: onLayerClick ? "pointer" : "default",
            filter: isFocus && (emphasizeActive || interactive && hovered === B.layer.id) ?
            "drop-shadow(0 16px 34px rgba(14,42,78,.30)) brightness(1.05)" : "none"
          };

          return (
            <g key={B.layer.id} style={style}
            onClick={onLayerClick ? () => onLayerClick(B.layer.id) : undefined}
            onMouseEnter={() => enter(B.layer.id)} onMouseLeave={leave}
            data-layer={B.layer.id}>
              {mode === "facet" ?
              <>
                  <polygon points={leftPoints} fill={lightShade} />
                  <polygon points={rightPoints} fill={darkShade} />
                  <polygon points={pointsStr} fill="none" stroke="rgba(255,255,255,.4)" strokeWidth="0.6" />
                </> :

              <>
                  <polygon points={pointsStr} fill={fillSolid} />
                  <polygon points={pointsStr} fill="none" stroke="rgba(255,255,255,.5)" strokeWidth="0.8" />
                </>
              }
            </g>);

        })}
      </svg>

      {labelsInside &&
      <div className="pyramid-inside-labels" style={{ transform: orientation === "down" ? "scaleY(-1)" : "none" }}>
          {bands.map((B, i) => {
          const topDownIdx = 4 - i;
          const shown = revealDir === "bottom" ? i < revealed : topDownIdx < revealed;
          const isFocus = focus === B.layer.id;
          const lightText = i <= 2; // darker (lower) bands -> light text
          const topPct = B.midY / H * 100;
          return (
            <button
              key={B.layer.id}
              type="button"
              className={`pyramid-inside-label ${shown ? "is-shown" : ""} ${isFocus ? "is-focus" : ""} ${focus && !isFocus ? "is-dim" : ""} ${lightText ? "on-dark" : "on-light"}`}
              style={{ top: `${topPct}%`, transitionDelay: `${(revealDir === "bottom" ? i : topDownIdx) * 80}ms`, maxWidth: `${Math.max(20, (B.hTop + B.hBot) / W * 80)}%` }}
              onClick={onLayerClick ? () => onLayerClick(B.layer.id) : undefined}
              onMouseEnter={() => enter(B.layer.id)} onMouseLeave={leave}>
              
                <span className="pil-name">
                  {B.layer.id === "ai"
                    ? B.layer.label.split(" ").map((word, wi) => <span key={wi} style={{ display: "block" }}>{word}</span>)
                    : B.layer.label}
                </span>
              </button>);

        })}
        </div>
      }

      {!labelsInside && showLabels &&
      <PyramidLabels orientation={orientation} active={focus} revealed={revealed} revealDir={revealDir} onLayerClick={onLayerClick} />
      }
    </div>);

}

function PyramidLabels({ orientation, active, revealed, revealDir, onLayerClick }) {
  const { H, botY, sliceH } = PY;
  return (
    <div className="pyramid-labels">
      {LAYERS.map((layer, i) => {
        const yBot = botY - i * sliceH;
        const yTop = botY - (i + 1) * sliceH;
        const midY = (yBot + yTop) / 2;
        const displayY = orientation === "down" ? H - midY : midY;
        const topPct = displayY / H * 100;
        const topDownIdx = 4 - i;
        const shown = revealDir === "bottom" ? i < revealed : topDownIdx < revealed;
        const isActive = active === layer.id;
        return (
          <button
            key={layer.id}
            type="button"
            className={`pyramid-label ${isActive ? "is-active" : ""} ${shown ? "is-shown" : ""}`}
            style={{ top: `${topPct}%` }}
            onClick={onLayerClick ? () => onLayerClick(layer.id) : undefined}>
            
            <span className="pyramid-label-line" />
            <span className="pyramid-label-content">
              <span className="pyramid-label-name">{layer.label}</span>
            </span>
          </button>);

      })}
    </div>);

}

function mixHex(a, b, t) {
  const pa = parseInt(a.slice(1), 16);
  const pb = parseInt(b.slice(1), 16);
  const ar = pa >> 16 & 255,ag = pa >> 8 & 255,ab = pa & 255;
  const br = pb >> 16 & 255,bg = pb >> 8 & 255,bb = pb & 255;
  const r = Math.round(ar + (br - ar) * t);
  const g = Math.round(ag + (bg - ag) * t);
  const bl = Math.round(ab + (bb - ab) * t);
  return "#" + [r, g, bl].map((v) => v.toString(16).padStart(2, "0")).join("");
}

window.HelixPyramid = HelixPyramid;
window.mixHex = mixHex;