// Münster Mind — sitio ejecutivo
// Paleta: navy profundo + crema cálida + oro mate.
// Brand DNA extraído de los pantallazos del sitio actual.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F59E0B",
  "typeset": "bricolage",
  "hero": "stack",
  "animate": true
}/*EDITMODE-END*/;

const TYPE_SETS = {
  bricolage: {
    display: '"Bricolage Grotesque", "Archivo", sans-serif',
    body: '"Bricolage Grotesque", system-ui, sans-serif',
    serif: '"Cormorant Garamond", "Times New Roman", serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
    displayWeight: 700,
    displayTracking: "-0.035em",
    displayLeading: 0.94,
  },
  fraunces: {
    display: '"Cormorant Garamond", "Times New Roman", serif',
    body: '"Manrope", system-ui, sans-serif',
    serif: '"Cormorant Garamond", "Times New Roman", serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
    displayWeight: 500,
    displayTracking: "-0.02em",
    displayLeading: 0.98,
  },
  manrope: {
    display: '"Manrope", system-ui, sans-serif',
    body: '"Manrope", system-ui, sans-serif',
    serif: '"Cormorant Garamond", "Times New Roman", serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
    displayWeight: 800,
    displayTracking: "-0.04em",
    displayLeading: 0.92,
  },
};

const ACCENTS = ["#F59E0B", "#204380", "#872874", "#E2E8F0"];

/* ─────────── LOGO MARK (SVG líneas) ─────────── */

function Mark({ size = 44, color = "currentColor", stroke = 2 }) {
  // Recreación geométrica de la runa Münster:
  // dos diagonales largas cruzando arriba + Y central corta.
  return (
    <svg
      width={size}
      height={size * 1.35}
      viewBox="0 0 100 135"
      fill="none"
      stroke={color}
      strokeWidth={stroke}
      strokeLinecap="square"
      aria-hidden="true"
    >
      {/* Diagonales que se cruzan arriba */}
      <line x1="8" y1="125" x2="62" y2="8" />
      <line x1="92" y1="125" x2="38" y2="8" />
      {/* Y central */}
      <line x1="50" y1="110" x2="50" y2="62" />
      <line x1="50" y1="62" x2="34" y2="46" />
      <line x1="50" y1="62" x2="66" y2="46" />
    </svg>
  );
}

function Wordmark({ size = "small" }) {
  return (
    <span className={`mm-word mm-word--${size}`}>
      <span className="mm-word-1">MÜNSTER</span>
      <span className="mm-word-2">MIND</span>
    </span>
  );
}

/* ─────────── INTRO CHART (amCharts 5, port del login de la app) ─────────── */

let _introChartCounter = 0;

function IntroChart() {
  const idRef = React.useRef(`introchart-${_introChartCounter++}`);

  React.useEffect(() => {
    let root;
    let selectCountryInterval;
    let cancelled = false;

    const labels = {
      Reclutamiento: "Talent Match",
      Personas: "Talent Growth",
      Desarrollo: "People Signals",
    };

    const continents = ["europe", "asia", "northAmerica", "southAmerica", "oceania", "africa"];
    const continentNames = {
      europe: "Europa",
      asia: "Asia",
      northAmerica: "América del Norte",
      southAmerica: "América del Sur",
      oceania: "Oceanía",
      africa: "África",
    };

    const continentsData = [
      { name: "Europa", id: "europe", count: 20 },
      { name: "Asia", id: "asia", count: 30 },
      { name: "América del Norte", id: "northAmerica", count: 10 },
      { name: "América del Sur", id: "southAmerica", count: 15 },
      { name: "Oceanía", id: "oceania", count: 10 },
      { name: "África", id: "africa", count: 25 },
    ];

    const start = () => {
      if (cancelled) return;
      if (!window.am5 || !window.am5xy || !window.am5radar || !window.am5percent || !window.am5map || !window.am5geodata_continentsLow) {
        setTimeout(start, 100);
        return;
      }

      const am5 = window.am5;
      const am5xy = window.am5xy;
      const am5radar = window.am5radar;
      const am5percent = window.am5percent;
      const am5map = window.am5map;
      const am5geodata_continentsLow = window.am5geodata_continentsLow;

      let previousSelectedId;
      let currentIndex = -1;
      const lineSeries = {};
      const radarRangeFills = {};
      const continentStartCategory = {};
      const continentEndCategory = {};
      let polygonSeries;
      let mapChart;
      let gaugeSeries;
      let radarGauge;
      let globeContainer;
      let categoryAxis;

      const isMobile = window.matchMedia("(max-width: 640px)").matches;

      root = am5.Root.new(idRef.current);
      root.container.set("minWidth", isMobile ? 280 : 400);
      if (root._logo) root._logo.dispose();

      const myTheme = am5.Theme.new(root);
      myTheme.rule("Label").setAll({ fontSize: 9 });
      myTheme.rule("InterfaceColors").setAll({
        stroke: am5.Color.fromHex(0x1e293b),
        alternativeBackground: am5.Color.fromHex(0xffffff),
        fill: am5.Color.fromHex(0x1e293b),
        grid: am5.Color.fromHex(0xbbbbbb),
        text: am5.Color.fromHex(0xffffff),
        alternativeText: am5.Color.fromHex(0x1e293b),
      });
      myTheme.rule("Component").setAll({ interpolationDuration: 600 });
      myTheme.rule("Entity").setAll({ stateAnimationDuration: 600 });
      root.setThemes([myTheme]);

      const colorSet = am5.ColorSet.new(root, {});
      const colors = {
        europe: colorSet.next(),
        asia: colorSet.next(),
        northAmerica: colorSet.next(),
        southAmerica: colorSet.next(),
        oceania: colorSet.next(),
        africa: colorSet.next(),
        antarctica: am5.color(0x444444),
      };

      /* ── Line series chart (fondo) ── */
      const makeLineSeriesChart = () => {
        const lineSeriesChart = root.container.children.push(am5xy.XYChart.new(root, {}));

        const data = [
          { year: "1930", europe: 0, asia: 0, northAmerica: 0, southAmerica: 0, oceania: 0, africa: 0 },
          { year: "1934", europe: 0, asia: 0, northAmerica: 0, southAmerica: 0, oceania: 0, africa: 0 },
          { year: "1938", europe: 1, asia: 0, northAmerica: -1, southAmerica: 1.5, oceania: 1.5, africa: -2 },
          { year: "1950", europe: 3, asia: -4, northAmerica: 1, southAmerica: -3, oceania: -1.5, africa: 0.5 },
          { year: "1954", europe: -1, asia: 1, northAmerica: -2, southAmerica: 4, oceania: 0.5, africa: -2.5 },
          { year: "1958", europe: 2, asia: -4, northAmerica: 3, southAmerica: -3.5, oceania: -2, africa: 5 },
          { year: "1962", europe: -2, asia: 4, northAmerica: -5, southAmerica: 6, oceania: 1, africa: -4.5 },
          { year: "1966", europe: 2, asia: -1, northAmerica: 3, southAmerica: -3.5, oceania: -2, africa: 4 },
          { year: "1970", europe: -1, asia: 1.5, northAmerica: -2.5, southAmerica: 2, oceania: 0.5, africa: -2 },
          { year: "1978", europe: 0, asia: 0, northAmerica: 0, southAmerica: 0, oceania: 0, africa: 0 },
          { year: "1982", europe: 0, asia: 0, northAmerica: 0, southAmerica: 0, oceania: 0, africa: 0 },
        ];

        const xRenderer = am5xy.AxisRendererX.new(root, { inside: true });
        xRenderer.labels.template.setAll({ forceHidden: true });
        xRenderer.grid.template.setAll({
          strokeGradient: am5.LinearGradient.new(root, {
            stops: [
              { color: am5.color(0xffffff), opacity: 0 },
              { color: am5.color(0xffffff), opacity: 0.1 },
              { color: am5.color(0xffffff), opacity: 0 },
            ],
          }),
        });

        const xAxis = lineSeriesChart.xAxes.push(am5xy.CategoryAxis.new(root, {
          startLocation: 0.6,
          endLocation: 0.4,
          categoryField: "year",
          renderer: xRenderer,
          tooltip: am5.Tooltip.new(root, {}),
        }));
        xAxis.data.setAll(data);

        const yRenderer = am5xy.AxisRendererY.new(root, {});
        yRenderer.labels.template.setAll({ forceHidden: true });
        yRenderer.grid.template.setAll({ forceHidden: true });

        const yAxis = lineSeriesChart.yAxes.push(am5xy.ValueAxis.new(root, {
          maxPrecision: 0,
          strictMinMax: true,
          min: -9,
          max: 9,
          renderer: yRenderer,
        }));

        const createSeries = (id) => {
          const series = lineSeriesChart.series.push(am5xy.SmoothedXLineSeries.new(root, {
            name: id,
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: id,
            categoryXField: "year",
            tooltip: am5.Tooltip.new(root, {
              pointerOrientation: "horizontal",
              labelText: "[bold]{name}[/]\n{categoryX}: {valueY}",
            }),
            opacity: 0.5,
          }));
          lineSeries[id] = series;

          const gradient = am5.LinearGradient.new(root, {
            stops: [
              { color: series.get("fill"), opacity: 0 },
              { color: series.get("fill"), opacity: 0.7 },
              { color: series.get("fill"), opacity: 0.96 },
              { color: series.get("fill"), opacity: 0 },
            ],
          });
          gradient.set("rotation", 0);

          series.strokes.template.setAll({
            strokeOpacity: 1,
            strokeWidth: 1.3,
            strokeGradient: gradient,
          });

          series.states.create("default", { opacity: 0.6 });
          series.states.create("highlight", { opacity: 1 });
          series.states.create("dimm", { opacity: 0.3 });

          series.data.setAll(data);
          series.appear(1000 + Math.random() * 500, Math.random() * 1000);
        };

        continents.forEach(createSeries);
      };

      makeLineSeriesChart();

      const mainContainer = root.container.children.push(am5.Container.new(root, {
        height: am5.p100,
        width: am5.p100,
        layout: isMobile ? root.verticalLayout : root.horizontalLayout,
      }));

      mainContainer.events.on("boundschanged", () => {
        const width = mainContainer.width();
        if (width < 1000) {
          if (radarGauge) radarGauge.hide();
          if (width < 400) {
            if (globeContainer) globeContainer.hide(0);
          } else {
            if (globeContainer && globeContainer.isHidden()) globeContainer.show(0);
          }
        } else {
          if (radarGauge && radarGauge.isHidden()) radarGauge.show();
        }
      });

      const navContainer = mainContainer.children.push(am5.Container.new(root, isMobile ? {
        height: 150,
        width: am5.p100,
        layout: root.horizontalLayout,
      } : {
        height: am5.p100,
        width: am5.p100,
        minWidth: 400,
        centerY: am5.p50,
        y: am5.p50,
        layout: root.horizontalLayout,
      }));

      const navChartsContainer = navContainer.children.push(am5.Container.new(root, {
        height: am5.p100,
        centerY: am5.p50,
        y: am5.p50,
        centerX: am5.p50,
        x: am5.p50,
        layout: root.horizontalLayout,
      }));

      const container = mainContainer.children.push(am5.Container.new(root, {
        height: am5.p100,
        width: am5.p100,
        layout: isMobile ? root.verticalLayout : root.horizontalLayout,
      }));

      /* ── Pie/donut charts (Reclutamiento, Personas, Desarrollo) ── */
      const makePieChart = (name, index) => {
        const startAngle = Math.random() * 360;
        const chart = navChartsContainer.children.push(am5percent.PieChart.new(root, {
          width: 120,
          innerRadius: am5.percent(70),
        }));

        chart.seriesContainer.children.push(am5.Slice.new(root, {
          radius: 49,
          startAngle: 0,
          arc: 360,
          innerRadius: 33,
          fillOpacity: 0.1,
          fill: am5.color(0xffffff),
        }));

        const series = chart.series.push(am5percent.PieSeries.new(root, {
          valueField: "value",
          categoryField: "category",
          startAngle: startAngle,
          endAngle: startAngle + 360,
        }));

        series.ticks.template.setAll({ forceHidden: true });
        series.slices.template.setAll({
          templateField: "settings",
          cornerRadius: 10,
          strokeOpacity: 0,
          tooltipText: undefined,
          interactive: false,
        });
        series.labels.template.setAll({ forceHidden: true });

        const value1 = Math.random();
        let value2 = Math.random();
        value2 = Math.max(Math.min(value1 * 4, value2), value1 / 4);

        series.data.setAll([
          { value: value1, category: "One", settings: { fill: colorSet.getIndex(index * 2) } },
          { value: value2, category: "Two", settings: { fill: am5.color(0xffffff), fillOpacity: 0 } },
        ]);

        series.appear(500 + Math.random() * 600, Math.random() * 500);

        chart.seriesContainer.children.push(am5.Label.new(root, {
          text: name,
          fontSize: 12,
          centerX: am5.p50,
          centerY: am5.p50,
        }));

        const link = chart.seriesContainer.children.push(am5.Circle.new(root, {
          radius: 60,
          fillOpacity: 0,
          cursorOverStyle: "pointer",
          fill: am5.color(0xffffff),
        }));

        link.events.on("pointerover", () => {
          series.animate({ key: "scale", to: 1.2, duration: 300, easing: am5.ease.out(am5.ease.cubic) });
          series.dataItems[1].animate({ key: "valueWorking", to: value2 * 0.0001, duration: 300, easing: am5.ease.out(am5.ease.cubic) });
        });
        link.events.on("pointerout", () => {
          series.animate({ key: "scale", to: 1, duration: 300, easing: am5.ease.out(am5.ease.cubic) });
          series.dataItems[1].animate({ key: "valueWorking", to: value2, duration: 300, easing: am5.ease.out(am5.ease.cubic) });
        });
      };

      makePieChart(labels.Reclutamiento, 0);
      makePieChart(labels.Personas, 1);
      makePieChart(labels.Desarrollo, 2);

      /* ── Radar gauge (barras circulares con porcentajes) ── */
      const makeRadarGauge = () => {
        radarGauge = container.children.push(am5radar.RadarChart.new(root, {
          width: 250,
          panX: false,
          panY: false,
          wheelX: "none",
          wheelY: "none",
          innerRadius: am5.percent(20),
          startAngle: -90,
          endAngle: 180,
          paddingRight: 50,
          paddingTop: 0,
          paddingBottom: 0,
          paddingLeft: 20,
        }));

        radarGauge.states.create("hidden", { width: 1, opacity: 0, visible: false });

        const data = [];
        continents.forEach((id) => {
          data.push({
            category: continentNames[id],
            value: Math.round(Math.random() * 70) + 20,
            full: 100,
            id: id,
            settings: { fill: colors[id] },
          });
        });

        const xRenderer = am5radar.AxisRendererCircular.new(root, { minGridDistance: 20 });
        xRenderer.labels.template.setAll({ radius: 10, opacity: 0.3 });
        xRenderer.grid.template.setAll({ forceHidden: true });

        const xAxis = radarGauge.xAxes.push(am5xy.ValueAxis.new(root, {
          renderer: xRenderer,
          min: 0,
          max: 100,
          strictMinMax: true,
          numberFormat: "#'%'",
        }));

        const yRenderer = am5radar.AxisRendererRadial.new(root, { minGridDistance: 20 });
        yRenderer.labels.template.setAll({ forceHidden: true });
        yRenderer.grid.template.setAll({ forceHidden: true });

        const yAxis = radarGauge.yAxes.push(am5xy.CategoryAxis.new(root, {
          categoryField: "category",
          renderer: yRenderer,
        }));
        yAxis.data.setAll(data);

        const series1 = radarGauge.series.push(am5radar.RadarColumnSeries.new(root, {
          xAxis: xAxis,
          yAxis: yAxis,
          clustered: false,
          valueXField: "full",
          categoryYField: "category",
          fill: root.interfaceColors.get("alternativeBackground"),
        }));
        series1.columns.template.setAll({ width: am5.p100, fillOpacity: 0.1, strokeOpacity: 0, cornerRadius: 20 });
        series1.data.setAll(data);

        gaugeSeries = radarGauge.series.push(am5radar.RadarColumnSeries.new(root, {
          xAxis: xAxis,
          yAxis: yAxis,
          clustered: false,
          valueXField: "value",
          categoryYField: "category",
        }));
        gaugeSeries.columns.template.setAll({
          width: am5.p100,
          strokeOpacity: 0,
          cornerRadius: 20,
          templateField: "settings",
          cursorOverStyle: "pointer",
        });
        gaugeSeries.columns.template.states.create("dimm", { opacity: 0.4 });

        gaugeSeries.columns.template.events.on("pointerover", (event) => {
          hoverCountry(event.target.dataItem.dataContext.id, true);
        });
        gaugeSeries.columns.template.events.on("pointerout", (event) => {
          unhoverCountry(event.target.dataItem.dataContext.id);
        });
        gaugeSeries.columns.template.events.on("click", (event) => {
          clearInterval(selectCountryInterval);
          const id = event.target.dataItem.dataContext.id;
          if (previousSelectedId === id) {
            unselectContinent();
          } else {
            selectContinent(id);
          }
        });

        gaugeSeries.data.setAll(data);
        gaugeSeries.appear(1000, 2000);
      };

      /* ── Radar chart (anillo alrededor del globo) ── */
      const makeRadarChart = () => {
        globeContainer = container.children.push(am5.Container.new(root, isMobile ? {
          height: 280,
          width: 280,
          centerX: am5.p50,
          x: am5.p50,
          marginTop: 10,
        } : {
          height: 280,
          width: 280,
          marginRight: 100,
          marginLeft: 50,
          centerY: am5.p50,
          y: am5.p50,
        }));

        const chart = globeContainer.children.push(am5radar.RadarChart.new(root, {
          panX: false,
          panY: false,
          innerRadius: 171,
          radius: 220,
        }));

        chart.radarContainer.children.setIndex(0, am5.Circle.new(root, {
          radius: 170,
          fillOpacity: 1,
          fill: am5.color(0x1e293b),
        }));
        chart.zoomOutButton.set("forceHidden", true);

        const xRenderer = am5radar.AxisRendererCircular.new(root, { strokeOpacity: 0 });
        xRenderer.labels.template.setAll({ forceHidden: true });
        xRenderer.grid.template.setAll({ forceHidden: true });

        const yRenderer = am5radar.AxisRendererRadial.new(root, { strokeOpacity: 0 });
        yRenderer.labels.template.setAll({ forceHidden: true });
        yRenderer.grid.template.setAll({ forceHidden: true });

        categoryAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
          maxDeviation: 0,
          categoryField: "category",
          renderer: xRenderer,
        }));

        const valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: yRenderer }));

        const series = chart.series.push(am5radar.RadarColumnSeries.new(root, {
          xAxis: categoryAxis,
          yAxis: valueAxis,
          stroke: am5.color(0xffffff),
          fill: am5.color(0xffffff),
          valueYField: "value",
          categoryXField: "category",
        }));
        series.columns.template.setAll({ fillOpacity: 0.1, strokeOpacity: 0, cornerRadius: 5 });

        const radarLineSeries = chart.series.push(am5radar.RadarLineSeries.new(root, {
          xAxis: categoryAxis,
          yAxis: valueAxis,
          valueYField: "value2",
          categoryXField: "category",
        }));
        radarLineSeries.strokes.template.setAll({ forceHidden: true });
        radarLineSeries.bullets.push(() => {
          const sprite = am5.Circle.new(root, {
            radius: 4 * Math.random(),
            fill: radarLineSeries.get("stroke"),
          });
          return am5.Bullet.new(root, { sprite });
        });

        const data = [];
        let c = 0;
        let i = 0;
        continentsData.forEach((obj) => {
          const first = c;
          for (let j = 0; j < obj.count; j++) {
            data.push({ category: "c" + c, value: Math.random(), value2: Math.random() * 0.5 + 0.2 });
            c++;
          }
          createRange(chart, obj.id, "c" + first, "c" + (c - 1), i);
          i++;
        });

        series.data.setAll(data);
        radarLineSeries.data.setAll(data);
        categoryAxis.data.setAll(data);

        series.appear(2000);
        radarLineSeries.appear(2000);
      };

      const createRange = (chart, id, startCategory, endCategory, colorIndex) => {
        const axisRange = categoryAxis.createAxisRange(categoryAxis.makeDataItem({ above: true }));
        axisRange.set("category", startCategory);
        axisRange.set("endCategory", endCategory);

        const fill = axisRange.get("axisFill");
        fill.setAll({
          toggleKey: "active",
          cursorOverStyle: "pointer",
          fill: chart.get("colors").getIndex(colorIndex),
          stroke: am5.color(0x000000),
          strokeOpacity: 0,
          visible: true,
          fillOpacity: 0.8,
        });
        fill.set("innerRadius", 155);
        fill.set("radius", 170);

        radarRangeFills[id] = fill;
        continentStartCategory[id] = startCategory;
        continentEndCategory[id] = endCategory;

        axisRange.get("grid").set("visible", false);

        const label = axisRange.get("label");
        label.setAll({
          forceHidden: false,
          fontSize: 9,
          fill: am5.color(0xffffff),
          opacity: 0.8,
          radius: -62,
          text: continentNames[id],
          interactive: false,
        });
        label.set("textType", "circular");

        fill.states.create("hover", { fillOpacity: 1 });
        fill.states.lookup("hover").set("innerRadius", 148);

        fill.events.on("pointerover", () => hoverCountry(id));
        fill.events.on("pointerout", () => unhoverCountry(id));
        fill.events.on("click", () => {
          clearInterval(selectCountryInterval);
          if (previousSelectedId === id) {
            unselectContinent();
          } else {
            selectContinent(id);
          }
        });
      };

      /* ── Globo (mapa orthographic) ── */
      const makeMapChart = () => {
        mapChart = globeContainer.children.push(am5map.MapChart.new(root, {
          panX: "rotateX",
          panY: "rotateY",
          wheelX: "none",
          wheelY: "none",
          height: 280,
          width: 280,
          centerY: am5.p50,
          y: am5.p50,
          projection: am5map.geoOrthographic(),
          paddingBottom: 0,
          paddingTop: 0,
          paddingLeft: 0,
          paddingRight: 0,
        }));

        mapChart.chartContainer.set("background", am5.Circle.new(root, {
          themeTags: ["map", "background"],
          fill: am5.color(0x1e293b),
          fillOpacity: 0,
          radius: 155,
          dx: 140,
          dy: 140,
        }));

        const graticuleSeries = mapChart.series.push(am5map.GraticuleSeries.new(root, {}));
        graticuleSeries.mapLines.template.setAll({
          stroke: root.interfaceColors.get("alternativeBackground"),
          strokeOpacity: 0.04,
        });

        polygonSeries = mapChart.series.push(am5map.MapPolygonSeries.new(root, {
          geoJSON: am5geodata_continentsLow,
        }));

        polygonSeries.mapPolygons.template.setAll({
          toggleKey: "active",
          interactive: true,
          fillOpacity: 0.7,
          strokeOpacity: 0,
          cursorOverStyle: "pointer",
        });

        polygonSeries.mapPolygons.template.adapters.add("fill", (fill, target) => {
          if (target.dataItem) {
            const color = colors[target.dataItem.dataContext.id];
            target.set("stroke", color);
            return color;
          }
          return fill;
        });

        polygonSeries.mapPolygons.template.states.create("hover", { fillOpacity: 1 });
        polygonSeries.mapPolygons.template.states.create("active", { fillOpacity: 1 });
        polygonSeries.mapPolygons.template.states.create("dimm", { fillOpacity: 0.5 });

        polygonSeries.mapPolygons.template.events.on("pointerover", (e) => {
          hoverCountry(e.target.dataItem.dataContext.id);
        });
        polygonSeries.mapPolygons.template.events.on("pointerout", (e) => {
          unhoverCountry(e.target.dataItem.dataContext.id);
        });

        let previousPolygon;
        polygonSeries.mapPolygons.template.on("active", (active, target) => {
          const id = target.dataItem.dataContext.id;
          if (id !== "antarctica") {
            clearInterval(selectCountryInterval);
            if (previousPolygon && previousPolygon !== target) {
              previousPolygon.set("active", false);
            }
            if (target.get("active")) {
              selectContinent(id);
            } else {
              unselectContinent();
            }
            previousPolygon = target;
          }
        });

        mapChart.appear(1000, 1000);
      };

      const selectContinent = (id) => {
        if (previousSelectedId) unhoverCountry(previousSelectedId);
        hoverCountry(id, true);

        const dataItem = polygonSeries.getDataItemById(id);
        const target = dataItem && dataItem.get("mapPolygon");
        if (target) {
          const centroid = target.geoCentroid();
          if (centroid) {
            mapChart.animate({ key: "rotationX", to: -centroid.longitude, duration: 1500, easing: am5.ease.inOut(am5.ease.cubic) });
            mapChart.animate({ key: "rotationY", to: -centroid.latitude, duration: 1500, easing: am5.ease.inOut(am5.ease.cubic) });
          }
        }

        polygonSeries.dataItems.forEach((di) => {
          if (di.dataContext.id !== id) {
            di.get("mapPolygon").states.applyAnimate("dimm");
          } else {
            di.get("mapPolygon").states.applyAnimate("active");
          }
        });

        if (previousSelectedId && radarRangeFills[previousSelectedId]) {
          radarRangeFills[previousSelectedId].set("active", false);
        }
        categoryAxis.zoomToCategories(continentStartCategory[id], continentEndCategory[id]);
        currentIndex = continents.indexOf(id);
        previousSelectedId = id;
      };

      const unselectContinent = () => {
        categoryAxis.zoom(0, 1);
        if (previousSelectedId) {
          if (radarRangeFills[previousSelectedId]) radarRangeFills[previousSelectedId].set("active", false);
          unhoverCountry(previousSelectedId);
          polygonSeries.dataItems.forEach((di) => {
            di.get("mapPolygon").states.applyAnimate("default");
            di.get("mapPolygon").set("active", false);
          });
        }
        previousSelectedId = undefined;
      };

      const hoverCountry = (id, fake) => {
        const series = lineSeries[id];
        if (!series) return;
        series.states.applyAnimate("highlight");
        series.dataItems.forEach((di) => {
          const v = di.get("valueYWorking");
          di.animate({ key: "valueYWorking", to: v * -1, duration: 700, easing: am5.ease.out(am5.ease.cubic) });
        });
        Object.keys(lineSeries).forEach((key) => {
          if (lineSeries[key] !== series) lineSeries[key].states.applyAnimate("dimm");
        });
        if (!fake && radarRangeFills[id]) radarRangeFills[id].hover();
        if (gaugeSeries) {
          gaugeSeries.dataItems.forEach((di) => {
            if (di.dataContext.id !== id) {
              const g = di.get("graphics");
              if (g) g.states.applyAnimate("dimm");
            }
          });
        }
      };

      const unhoverCountry = (id) => {
        const series = lineSeries[id];
        if (!series) return;
        if (radarRangeFills[id]) radarRangeFills[id].unhover();
        series.dataItems.forEach((di) => {
          di.animate({ key: "valueYWorking", to: di.get("valueY"), duration: 600, easing: am5.ease.out(am5.ease.cubic) });
        });
        Object.keys(lineSeries).forEach((key) => {
          lineSeries[key].states.applyAnimate("default");
        });
        if (gaugeSeries) {
          gaugeSeries.dataItems.forEach((di) => {
            if (di.dataContext.id !== id) {
              const g = di.get("graphics");
              if (g) g.states.applyAnimate("default");
            }
          });
        }
      };

      if (!isMobile) makeRadarGauge();
      makeRadarChart();
      makeMapChart();

      selectCountryInterval = setInterval(() => {
        currentIndex++;
        if (currentIndex >= continents.length) {
          clearInterval(selectCountryInterval);
          setTimeout(() => {
            const animation = mapChart.animate({
              key: "rotationX",
              to: 0,
              duration: 3000,
              easing: am5.ease.cubic,
            });
            animation.events.on("stopped", () => {
              mapChart.animate({
                key: "rotationX",
                to: 360,
                from: 0,
                duration: 30000,
                loops: Infinity,
              });
            });
          }, 1000);
          unselectContinent();
        } else {
          selectContinent(continents[currentIndex]);
        }
      }, 4000);
    };

    start();

    return () => {
      cancelled = true;
      clearInterval(selectCountryInterval);
      if (root) {
        root.dispose();
        root = null;
      }
    };
  }, []);

  return <div id={idRef.current} className="mm-hero-chart-canvas" />;
}

/* ─────────── APP ─────────── */

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const ts = TYPE_SETS[t.typeset] || TYPE_SETS.bricolage;

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--font-display", ts.display);
    r.style.setProperty("--font-body", ts.body);
    r.style.setProperty("--font-serif", ts.serif);
    r.style.setProperty("--font-mono", ts.mono);
    r.style.setProperty("--disp-weight", ts.displayWeight);
    r.style.setProperty("--disp-track", ts.displayTracking);
    r.style.setProperty("--disp-lead", ts.displayLeading);
  }, [t.accent, t.typeset, ts]);

  React.useEffect(() => {
    if (!t.animate) return;
    const els = document.querySelectorAll(".mm-reveal");
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-visible");
            obs.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, [t.animate]);

  return (
    <div className={`mm-root ${t.animate ? "" : "no-anim"}`}>
      <Nav />
      <Hero variant={t.hero} animate={t.animate} />
      <Plataforma />
      <Datos />
      <Fundadores />
      <Planes />
      <Cierre />
      <Footer />
      <Panel t={t} setTweak={setTweak} />
    </div>
  );
}

/* ─────────── NAV ─────────── */

function Nav() {
  return (
    <header className="mm-nav">
      <a href="#top" className="mm-logo" aria-label="Münster Mind">
        <img
          src="assets/images/logo_con_nombre_blanco.png"
          alt="Münster Mind"
          className="mm-logo-img"
        />
      </a>
      <nav className="mm-nav-links">
        <a href="#plataforma">Plataforma</a>
        <a href="#fundadores">Fundadores</a>
        <a href="#planes">Planes</a>
        <a href="#contacto">Contacto</a>
      </nav>
      <a href="#contacto" className="mm-nav-cta">
        Hablar con ventas
      </a>
    </header>
  );
}

/* ─────────── HERO ─────────── */

function Hero({ variant, animate }) {
  if (variant === "manifest") return <HeroManifest animate={animate} />;
  if (variant === "wordmark") return <HeroWordmark animate={animate} />;
  return <HeroStack animate={animate} />;
}

function HeroStack({ animate }) {
  return (
    <section className="mm-hero mm-hero--stack" id="top" data-screen-label="Hero">
      <div className="mm-hero-meta">
        <span className="mm-eyebrow">
          <span className="mm-dot" />
          Inteligencia de talento — IA nativa
        </span>
        <span className="mm-eyebrow mm-eyebrow--r">
          Para Líderes, CEOs y comités de dirección
        </span>
      </div>

      <h1 className={`mm-display ${animate ? "is-anim" : ""}`}>
        <span>Tecnología</span>
        <span>
          que <em>entiende</em>
        </span>
        <span>
          el talento<span className="mm-accent-dot">.</span>
        </span>
      </h1>

      <div className="mm-hero-foot">
        <p className="mm-lede">
          La gestión del talento exige más que intuición: requiere{" "}
          <em>evidencia, contexto y capacidad de acción</em>. Münster Mind
          integra inteligencia artificial para convertir información humana en
          decisiones organizacionales más precisas.
        </p>
        <div className="mm-cta-row">
          <a className="mm-btn mm-btn--solid" href="#contacto">
            Hablar con ventas
          </a>
          <a className="mm-btn mm-btn--ghost" href="#plataforma">
            Ver la plataforma
          </a>
        </div>

        <div className="mm-cta-row mm-cta-row--secondary">
          <a
            className="mm-btn mm-btn--ghost mm-btn--ingresar"
            href="https://app.munstermind.io/"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img
              src="assets/images/logo_solo_blanco.png"
              alt=""
              className="mm-btn-ingresar-icon"
              aria-hidden="true"
            />
            Ingresar a la plataforma
            <span aria-hidden="true">↗</span>
          </a>
          <a
            className="mm-store-btn"
            href="https://play.google.com/store/apps/details?id=io.munstermind.app"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Descargar en Google Play"
          >
            <svg className="mm-store-icon" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="#EA4335" d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .609-.92z"/>
              <path fill="#FBBC04" d="M16.802 8.99L6.864 2.658l8.635 8.635 2.302-2.302z" opacity=".95"/>
              <path fill="#34A853" d="M16.802 15.011l-2.302-2.302-8.635 8.635 10.937-6.333z" opacity=".95"/>
              <path fill="#4285F4" d="M17.698 9.49l2.808 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.045 12l2.653-2.51z"/>
            </svg>
            <span className="mm-store-text">
              <small>Descargar en</small>
              <strong>Google Play</strong>
            </span>
          </a>
          <a
            className="mm-store-btn"
            href="https://apps.apple.com/mx/app/m%C3%BCnster-mind/id6753265535"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Disponible en App Store"
          >
            <svg className="mm-store-icon" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="currentColor" d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
            </svg>
            <span className="mm-store-text">
              <small>Disponible en</small>
              <strong>App Store</strong>
            </span>
          </a>
        </div>
      </div>

      <div className="mm-hero-watermark" aria-hidden="true">
        <Mark size={280} stroke={1} color="rgba(135,40,116,0.14)" />
      </div>

      <div className="mm-hero-chart">
        <IntroChart />
      </div>
    </section>
  );
}

function HeroManifest({ animate }) {
  return (
    <section className="mm-hero mm-hero--manifest" id="top" data-screen-label="Hero">
      <div className="mm-manifest-side">
        <Mark size={56} stroke={1.4} color="var(--accent)" />
        <span className="mm-eyebrow">2026 · Bogotá · CDMX · Madrid</span>
      </div>
      <div className="mm-manifest-main">
        <h1 className={`mm-display mm-display--editorial ${animate ? "is-anim" : ""}`}>
          Convertimos <em>información humana</em> en decisiones organizacionales
          más precisas<span className="mm-accent-dot">.</span>
        </h1>
        <div className="mm-hero-foot">
          <p className="mm-lede">
            Inteligencia de talento con IA-nativa. Construida para quienes
            deciden, no para quienes reportan.
          </p>
          <div className="mm-cta-row">
            <a className="mm-btn mm-btn--solid" href="#contacto">
              Solicitar demo
            </a>
            <a className="mm-btn mm-btn--ghost" href="#fundadores">
              Conocer a los fundadores
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroWordmark({ animate }) {
  return (
    <section className="mm-hero mm-hero--word" id="top" data-screen-label="Hero">
      <div className="mm-hero-meta">
        <span className="mm-eyebrow">
          <span className="mm-dot" />
          Talento + IA — en armonía
        </span>
        <span className="mm-eyebrow mm-eyebrow--r">Edición 2026</span>
      </div>
      <div className="mm-word-stage">
        <Mark size={120} stroke={1.4} />
        <h1 className={`mm-display mm-display--word ${animate ? "is-anim" : ""}`}>
          Münster Mind
        </h1>
        <p className="mm-word-sub">Tecnología que entiende el talento.</p>
      </div>
      <div className="mm-hero-foot mm-hero-foot--center">
        <p className="mm-lede mm-lede--center">
          La gestión del talento exige más que intuición. Integramos IA para
          convertir información humana en decisiones organizacionales más
          precisas.
        </p>
        <div className="mm-cta-row mm-cta-row--center">
          <a className="mm-btn mm-btn--solid" href="#contacto">
            Hablar con ventas
          </a>
          <a className="mm-btn mm-btn--ghost" href="#plataforma">
            Ver plataforma
          </a>
        </div>
      </div>
    </section>
  );
}

/* ─────────── PLATAFORMA (4 Intelligence) ─────────── */

const MODULES = [
  {
    id: "match",
    code: "01",
    name: "Talent Match",
    sub: "Reclutamiento y selección con IA",
    body: "Optimiza el reclutamiento y la selección con IA para encontrar a las personas correctas en menos tiempo. Münster Mind analiza perfiles, CVs, entrevistas y criterios de compatibilidad para que cada decisión sea más ágil, objetiva y alineada con las necesidades reales de cada posición.",
    chips: ["CVs · Perfiles", "Compatibilidad", "Entrevistas IA"],
  },
  {
    id: "growth",
    code: "02",
    name: "Talent Growth",
    sub: "Desempeño y desarrollo continuo",
    body: "Convierte el desempeño en crecimiento. Münster Mind identifica habilidades, brechas, objetivos y oportunidades de desarrollo para cada colaborador, generando recomendaciones y planes de acción que conectan el crecimiento individual con los objetivos de la empresa.",
    chips: ["Habilidades", "Brechas", "Planes 1:1"],
  },
  {
    id: "signals",
    code: "03",
    name: "People Signals",
    sub: "Clima y cultura en tiempo real",
    body: "Transforma la voz de los colaboradores en inteligencia organizacional. A través de análisis con IA, Münster Mind detecta patrones, tendencias, riesgos, percepciones y señales clave sobre clima, cultura y pulso interno — permitiendo actuar con rapidez y precisión.",
    chips: ["Pulso interno", "Patrones", "Riesgos"],
  },
  {
    id: "insight",
    code: "04",
    name: "Business Insight",
    sub: "Diagnóstico y análisis organizacional",
    body: "Convierte formularios, diagnósticos y datos organizacionales en insights accionables. Münster Mind analiza respuestas, identifica patrones, extrae métricas relevantes y genera recomendaciones que ayudan a comprender la realidad del negocio y tomar mejores decisiones.",
    chips: ["Diagnósticos", "Métricas", "Recomendaciones"],
  },
];

function Plataforma() {
  const [active, setActive] = React.useState(0);
  const m = MODULES[active];
  return (
    <section id="plataforma" className="mm-section mm-plataforma mm-reveal" data-screen-label="Plataforma">
      <div className="mm-section-head">
        <span className="mm-eyebrow">— Pensado para líderes</span>
      </div>

      <h2 className="mm-h2">
        Inteligencia estratégica.
        <br />
        <em>Una plataforma.</em>
      </h2>
      <p className="mm-sub">Soluciones IA-nativa para gestión moderna.</p>

      <div className="mm-mod-stage">
        <aside className="mm-mod-list" role="tablist">
          {MODULES.map((mod, i) => (
            <button
              key={mod.id}
              role="tab"
              aria-selected={i === active}
              onClick={() => setActive(i)}
              className={`mm-mod-item ${i === active ? "is-active" : ""}`}
            >
              <span className="mm-mod-code">{mod.code}</span>
              <span className="mm-mod-name">{mod.name}</span>
              <span className="mm-mod-sub">{mod.sub}</span>
            </button>
          ))}
        </aside>

        <article className="mm-mod-panel" key={m.id}>
          <header className="mm-mod-panel-head">
            <span className="mm-mod-panel-code">{m.code}</span>
            <span className="mm-mod-panel-tag">Módulo</span>
          </header>
          <h3 className="mm-mod-panel-name">{m.name} Intelligence</h3>
          <p className="mm-mod-panel-sub">{m.sub}</p>
          <p className="mm-mod-panel-body">{m.body}</p>
          <ul className="mm-chips">
            {m.chips.map((c) => (
              <li key={c}>{c}</li>
            ))}
          </ul>
          <a className="mm-mod-panel-link" href="#contacto">
            Solicitar demo de {m.name}{" "}
            <span aria-hidden="true">↗</span>
          </a>
        </article>
      </div>
    </section>
  );
}

/* ─────────── DATOS ─────────── */

function Datos() {
  const cards = [
    {
      n: "I.",
      t: "Logra cosas extraordinarias",
      s: "De la teoría a la realidad",
      b: "Precisión y agilidad garantizadas en cada decisión que involucra a tu gente.",
    },
    {
      n: "II.",
      t: "Estrategia al alcance de tus manos",
      s: "Finalmente, una realidad",
      b: "Escalabilidad y confianza total: del comité de dirección al líder de equipo.",
    },
  ];
  return (
    <section className="mm-section mm-datos mm-reveal" data-screen-label="Datos">
      <div className="mm-datos-grid">
        <div className="mm-datos-head">
          <h2 className="mm-h2 mm-h2--tight">
            Datos que <em>transforman</em> gestión.
          </h2>
          <p className="mm-sub">Métricas clave para líderes que no negocian con el ruido.</p>
        </div>
        <div className="mm-datos-cards">
          {cards.map((c) => (
            <article key={c.n} className="mm-datos-card mm-reveal">
              <span className="mm-datos-n">{c.n}</span>
              <h3>{c.t}</h3>
              <span className="mm-datos-s">{c.s}</span>
              <p>{c.b}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── FUNDADORES ─────────── */

function Fundadores() {
  const founders = [
    {
      name: "Efraín Zaldumbide",
      role: "CEO · Co-Founder",
      quote:
          "Hoy podemos lograr mucho más: convertir en realidad lo que antes solo vivía en nuestra imaginación. Creamos Münster Mind para ayudar a las empresas a ingresar a la era de la inteligencia artificial — de la teoría, por fin, a la práctica.",
        photo: "assets/images/Efra.png",
        linkedin: "https://www.linkedin.com/in/efrain-zaldumbide/",
    },
    {
      name: "Joseph Arrieta",
      role: "CTO · Co-Founder",
      quote:
          "En Münster Mind diseñamos la arquitectura que convierte señales humanas — voz, lenguaje, comportamiento — en inteligencia accionable. Damos el salto de lo operativo a lo estratégico, y cada día seguimos empujando sus límites.",
      photo: "assets/images/Joseph.png",
      linkedin: "https://www.linkedin.com/in/joseph-arrieta-chilberry/",
    },
  ];
  return (
    <section id="fundadores" className="mm-section mm-fundadores mm-reveal" data-screen-label="Fundadores">
      <div className="mm-section-head">
        <span className="mm-eyebrow">— Fundadores</span>
      </div>
      <div className="mm-fund-grid">
        {founders.map((f) => (
          <article key={f.name} className="mm-fund-card mm-reveal">
            <header className="mm-fund-head">
              <span className="mm-fund-avatar" aria-hidden="true">
                <img src={f.photo} alt="" className="mm-fund-avatar-img" />
              </span>
              <span className="mm-fund-info">
                <span className="mm-fund-name">{f.name}</span>
                <span className="mm-fund-role">{f.role}</span>
              </span>
              <a
                className="mm-fund-linkedin"
                href={f.linkedin}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={"LinkedIn de " + f.name}
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 1 1 8.3 6.5a1.78 1.78 0 0 1-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0 0 13 14.19a.66.66 0 0 0 0 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 0 1 2.7-1.4c1.55 0 3.36.86 3.36 3.66V19z"/>
                </svg>
              </a>
            </header>
            <blockquote className="mm-fund-quote">
              <span className="mm-quote-mark" aria-hidden="true">“</span>
              {f.quote}
            </blockquote>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ─────────── PLANES ─────────── */

function Planes() {
  const features = [
    "Módulos individuales o suite completa",
    "Onboarding acompañado por el equipo fundador",
    "Sin tarifas por colaborador en pilotos",
    "Integraciones con tu HRIS y data existente",
    "Soporte directo a comité ejecutivo",
  ];
  return (
    <section id="planes" className="mm-section mm-planes mm-reveal" data-screen-label="Planes">
      <div className="mm-section-head">
        <span className="mm-eyebrow">— Planes y precios</span>
      </div>
      <div className="mm-planes-body">
        <div className="mm-planes-left">
          <h2 className="mm-h2 mm-h2--tight">
            Tu plan es <em>modular</em>.
          </h2>
          <p className="mm-sub mm-sub--lg">
            Solo pagas por lo que usas. Empezamos por el módulo que más impacto
            tiene en tu organización y crecemos desde ahí.
          </p>
          <a className="mm-btn mm-btn--solid mm-btn--lg" href="#contacto">
            Diseñar mi plan
          </a>
        </div>
        <ul className="mm-planes-list">
          {features.map((f, i) => (
            <li key={i}>
              <span className="mm-planes-bullet" aria-hidden="true">→</span>
              {f}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ─────────── CIERRE ─────────── */

function ContactForm() {
  const [form, setForm] = React.useState({
    name: "",
    company: "",
    email: "",
    message: "",
  });
  const [sent, setSent] = React.useState(false);

  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const handleSubmit = (e) => {
    e.preventDefault();
    const subject = `Münster Mind — Contacto desde la web · ${form.company || form.name}`;
    const body =
      `Nombre: ${form.name}\n` +
      `Empresa: ${form.company}\n` +
      `Email: ${form.email}\n\n` +
      `${form.message}`;
    const href = `mailto:info@munstermind.io?subject=${encodeURIComponent(
      subject
    )}&body=${encodeURIComponent(body)}`;
    window.location.href = href;
    setSent(true);
  };

  return (
    <form className="mm-form" onSubmit={handleSubmit} noValidate>
      <div className="mm-field">
        <label htmlFor="cf-name">Nombre</label>
        <input
          id="cf-name"
          type="text"
          required
          value={form.name}
          onChange={update("name")}
          placeholder="Tu nombre"
          autoComplete="name"
        />
      </div>
      <div className="mm-field">
        <label htmlFor="cf-company">Empresa</label>
        <input
          id="cf-company"
          type="text"
          value={form.company}
          onChange={update("company")}
          placeholder="Nombre de la empresa"
          autoComplete="organization"
        />
      </div>
      <div className="mm-field">
        <label htmlFor="cf-email">Email corporativo</label>
        <input
          id="cf-email"
          type="email"
          required
          value={form.email}
          onChange={update("email")}
          placeholder="tu@empresa.com"
          autoComplete="email"
        />
      </div>
      <div className="mm-field">
        <label htmlFor="cf-msg">Mensaje</label>
        <textarea
          id="cf-msg"
          rows="4"
          required
          value={form.message}
          onChange={update("message")}
          placeholder="Cuéntanos brevemente qué te trae aquí..."
        />
      </div>
      <button type="submit" className="mm-btn mm-btn--solid mm-btn--lg mm-form-submit">
        Enviar mensaje <span aria-hidden="true">→</span>
      </button>
      {sent && (
        <span className="mm-form-note">
          Se abrió tu cliente de correo con el mensaje listo para enviar.
        </span>
      )}
    </form>
  );
}

function Cierre() {
  return (
    <section id="contacto" className="mm-section mm-cierre mm-reveal" data-screen-label="Contacto">
      <div className="mm-cierre-inner">
        <span className="mm-eyebrow mm-eyebrow--accent">— Contacto directo</span>
        <h2 className="mm-cierre-h">
          Si lideras una compañía y todavía decides sobre tu gente con datos del
          trimestre pasado, <em>tenemos una conversación pendiente</em>.
        </h2>
        <div className="mm-cierre-row">
          <ContactForm />
          <aside className="mm-cierre-aside">
            <span className="mm-cierre-aside-label">— O escríbenos directamente</span>
            <a className="mm-btn mm-btn--xl mm-btn--gold" href="mailto:info@munstermind.io">
                info@munstermind.io
            </a>
            <div className="mm-cierre-meta">
              <span>Respuesta directa</span>
              <span>en menos de 24 horas hábiles.</span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ─────────── FOOTER ─────────── */

function Footer() {
  return (
    <footer className="mm-footer mm-reveal">
      <div className="mm-footer-top">
        <div className="mm-footer-brand">
          <img
            src="assets/images/logo_con_nombre_slogan_vertical_blanco.png"
            alt="Münster Mind — Talento + IA en armonía"
            className="mm-footer-logo-img"
          />
        </div>
        <div className="mm-footer-cols">
          <div className="mm-footer-col">
            <span className="mm-footer-h">Compañía</span>
            <a href="#plataforma">Plataforma</a>
            <a href="#fundadores">Fundadores</a>
            <a href="#planes">Planes</a>
          </div>
          <div className="mm-footer-col">
            <span className="mm-footer-h">Recursos</span>
            <a href="#">Contacto</a>
            <a
              href="https://wa.me/59396278453"
              target="_blank"
              rel="noopener noreferrer"
            >
              Soporte
            </a>
            <a href="#">Política de privacidad</a>
          </div>
          <div className="mm-footer-col">
            <span className="mm-footer-h">Síguenos</span>
            <a
              className="mm-footer-link"
              href="https://www.linkedin.com/company/munstermind"
              target="_blank"
              rel="noopener noreferrer"
            >
              <svg className="mm-footer-icon" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="currentColor" d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14M8.34 18v-8.21H5.67V18h2.67M7 8.6a1.55 1.55 0 1 0 0-3.1 1.55 1.55 0 0 0 0 3.1m11 9.4v-4.5c0-2.5-1.35-3.66-3.16-3.66-1.46 0-2.11.8-2.48 1.36V9.79H9.7V18h2.66v-4.55c0-.4.03-.8.15-1.08.33-.79 1.06-1.61 2.29-1.61 1.6 0 2.24 1.22 2.24 3.01V18H18Z"/>
              </svg>
              LinkedIn
            </a>
            <a
              className="mm-footer-link"
              href="https://www.instagram.com/musnermind.ia/"
              target="_blank"
              rel="noopener noreferrer"
            >
              <svg className="mm-footer-icon" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="currentColor" d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.81 3.81 0 0 1-1.38-.9 3.81 3.81 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.34 4.14.63a5.97 5.97 0 0 0-2.16 1.41A5.97 5.97 0 0 0 .57 4.2c-.3.76-.5 1.64-.56 2.91C-.05 8.4 0 8.81 0 12s.01 3.6.07 4.88c.06 1.27.27 2.15.56 2.91a5.97 5.97 0 0 0 1.41 2.16 5.97 5.97 0 0 0 2.16 1.41c.76.3 1.64.5 2.91.56 1.28.06 1.69.07 4.95.07s3.6-.01 4.88-.07c1.27-.06 2.15-.27 2.91-.56a5.97 5.97 0 0 0 2.16-1.41 5.97 5.97 0 0 0 1.41-2.16c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.6-.07-4.88c-.06-1.27-.27-2.15-.56-2.91a5.97 5.97 0 0 0-1.41-2.16A5.97 5.97 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.6.01 15.19 0 12 0Zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32Zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88Z"/>
              </svg>
              Instagram
            </a>
            <a
              className="mm-footer-link"
              href="https://apps.apple.com/mx/app/m%C3%BCnster-mind/id6753265535"
              target="_blank"
              rel="noopener noreferrer"
            >
              <svg className="mm-footer-icon" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="currentColor" d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
              </svg>
              App Store
            </a>
            <a
              className="mm-footer-link"
              href="https://play.google.com/store/apps/details?id=io.munstermind.app"
              target="_blank"
              rel="noopener noreferrer"
            >
              <svg className="mm-footer-icon" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="currentColor" d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.046 12l2.652-2.49zM5.864 2.658L16.802 8.99l-2.302 2.302L5.864 2.658z"/>
              </svg>
              Play Store
            </a>
          </div>
        </div>
      </div>
      <div className="mm-footer-bottom">
        <span>© 2026 Münster Mind · Lateral Business Thinking SAS</span>
        <span>Bogotá · Ciudad de México · Madrid</span>
      </div>
    </footer>
  );
}

/* ─────────── PANEL ─────────── */

function Panel({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakRadio
        label="Estilo"
        value={t.hero}
        options={[
          { value: "stack", label: "Stack" },
          { value: "manifest", label: "Editorial" },
          { value: "wordmark", label: "Marca" },
        ]}
        onChange={(v) => setTweak("hero", v)}
      />
      <TweakSection label="Tipografía" />
      <TweakRadio
        label="Set"
        value={t.typeset}
        options={[
          { value: "bricolage", label: "Sans" },
          { value: "fraunces", label: "Serif" },
          { value: "manrope", label: "Mono" },
        ]}
        onChange={(v) => setTweak("typeset", v)}
      />
      <TweakSection label="Acento" />
      <TweakColor
        label="Color"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Movimiento" />
      <TweakToggle
        label="Animaciones"
        value={t.animate}
        onChange={(v) => setTweak("animate", v)}
      />
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);