/* ========================================================================
   CRISALAB · HERO
   Animación de crisálida con palabras-manifiesto sincronizadas + ambient words
   ======================================================================== */

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

// Manifest lines per act — pulled from brand spec
const MANIFEST_LINES = {
  I:  { primary: "Antes de mover, <em class='accent'>pensar.</em>",          secondary: "001 · Reposo" },
  II: { primary: "Antes de automatizar, <em class='accent'>ordenar.</em>",   secondary: "002 · Tensión" },
  III:{ primary: "Antes de complicar, <em class='accent'>simplificar.</em>", secondary: "003 · Fisura" },
  IV: { primary: "Pasos pequeños.",                                          secondary: "004 · Despliegue" },
  V:  { primary: "<em class='accent'>Cambios grandes.</em>",                 secondary: "005 · Vuelo" },
};

// Ambient words around the capsule — change in tone per act
// "Faded" = problem state (caos, ruido). "Bright" = solution state (orden, criterio).
const AMBIENT_WORDS_BY_ACT = {
  I:   ["caos", "ruido", "fricción", "atajos", "urgencias", "parches", "exceso", "fuerza", "más herramientas", "automatizar todo"],
  II:  ["mapear", "escuchar", "observar", "diagnóstico", "patrones", "cuellos", "flujos", "fricción", "claridad", "criterio"],
  III: ["estructura", "orden", "decisión", "criterio", "claridad", "intención", "fisura", "luz", "método", "ritmo"],
  IV:  ["simple", "preciso", "lo justo", "elegancia", "método", "ritmo", "criterio", "claridad", "menos", "exactitud"],
  V:   ["transformación", "vuelo", "claridad", "criterio", "método", "simple", "preciso", "ritmo", "cambio", "exactitud"],
};

// Fixed positions (in % of stage) for ambient words — distributed around the capsule but never overlapping
const AMBIENT_POSITIONS = [
  { x: 14, y: 22 }, { x: 86, y: 18 }, { x: 8,  y: 50 }, { x: 92, y: 48 },
  { x: 18, y: 78 }, { x: 82, y: 82 }, { x: 28, y: 12 }, { x: 72, y: 8  },
  { x: 22, y: 88 }, { x: 78, y: 92 },
];

// Manifest line position per act — editorial off-center placement
const MANIFEST_POSITIONS = {
  I:   { top: "16%",  left: "50%",  transform: "translateX(-50%)",        align: "center", size: "clamp(28px, 4.4vw, 64px)" },
  II:  { bottom: "34%", left: "4%", transform: "translateX(0)",            align: "left",  size: "clamp(24px, 3.4vw, 52px)" },
  III: { top: "42%", right: "4%", transform: "translateX(0)",              align: "right", size: "clamp(26px, 3.8vw, 56px)" },
  IV:  { top: "8%",  left: "50%",  transform: "translateX(-50%)",         align: "center", size: "clamp(32px, 5vw, 72px)" },
  V:   { bottom: "22vh", left: "50%", transform: "translateX(-50%)",       align: "center", size: "clamp(30px, 4.8vw, 72px)" },
};

const ease = {
  inOutCubic: t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2,
  outCubic:   t => 1 - Math.pow(1 - t, 3),
  inCubic:    t => t * t * t,
  outQuart:   t => 1 - Math.pow(1 - t, 4),
  outExpo:    t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t),
};
const lerp = (a, b, t) => a + (b - a) * t;
const clamp = (v, mn, mx) => Math.max(mn, Math.min(mx, v));
const range = (v, s, e) => clamp((v - s) / (e - s), 0, 1);

function Hero({ tweaks }) {
  const heroRef = useRef(null);
  const stageRef = useRef(null);
  const [actKey, setActKey] = useState("I");
  const [progress, setProgress] = useState(0);

  // ============== SVG refs ==============
  const refs = {
    grid: useRef(null),
    crosshair: useRef(null),
    vignette: useRef(null),
    toplight: useRef(null),
    dust: useRef(null),
    wordmark: useRef(null),

    capsuleLeft: useRef(null),
    capsuleRight: useRef(null),
    line1: useRef(null),
    line2: useRef(null),
    lightDot: useRef(null),
    fissure: useRef(null),
    haloRing: useRef(null),
    pulseRing: useRef(null),
    butterflyBody: useRef(null),
    wTL: useRef(null), wTR: useRef(null), wBL: useRef(null), wBR: useRef(null),
    internalLines: useRef(null),
    particles: useRef(null),
  };

  // Particles (deterministic seeds)
  const particleSeeds = useMemo(() =>
    Array.from({ length: 14 }, (_, i) => ({
      angle: (i / 14) * Math.PI * 2 + (i * 0.37),
      radius: 4 + (i % 5) * 6,
      freq: 0.3 + ((i * 17) % 100) / 100 * 0.8,
      phase: (i * 1.13) % (Math.PI * 2),
      ampX: 1 + ((i * 23) % 100) / 100 * 3,
      ampY: 1 + ((i * 41) % 100) / 100 * 3,
    })), []);

  // Dust particle seeds
  const dustSeeds = useMemo(() =>
    Array.from({ length: 36 }, (_, i) => ({
      x: (i * 137.5) % 100,
      y: (i * 89.7) % 100,
      size: 1 + ((i * 31) % 100) / 100 * 2,
      freq: 0.15 + ((i * 19) % 100) / 100 * 0.4,
      phase: (i * 1.7) % (Math.PI * 2),
      drift: 8 + ((i * 13) % 100) / 100 * 20,
    })), []);

  // ============== Animation Loop ==============
  useEffect(() => {
    let raf;
    let t0 = performance.now();
    const intensity = tweaks.animationIntensity === "subtle" ? 0.6 :
                      tweaks.animationIntensity === "vivid" ? 1.4 : 1;

    const tick = (now) => {
      const time = (now - t0) / 1000;
      const heroEl = heroRef.current;
      if (!heroEl) { raf = requestAnimationFrame(tick); return; }

      const heroTop = heroEl.offsetTop;
      const heroHeight = heroEl.offsetHeight - window.innerHeight;
      const scrollInHero = clamp(window.scrollY - heroTop, 0, heroHeight);
      const t = clamp(scrollInHero / heroHeight, 0, 1);
      setProgress(t);

      // Acts
      let key;
      if      (t < 0.18) key = "I";
      else if (t < 0.38) key = "II";
      else if (t < 0.58) key = "III";
      else if (t < 0.82) key = "IV";
      else               key = "V";
      setActKey(key);

      // ===== ACT I — REPOSE =====
      const breathScale = 1 + Math.sin(time * 1.2) * 0.012 * intensity;
      const dotPulse = 1 + Math.sin(time * 2) * 0.15;
      const linePulse = 0.85 + Math.sin(time * 1.5) * 0.1;

      // ===== Grid (technical lattice) =====
      let gridOp = 0;
      if (t < 0.15) gridOp = lerp(0, 0.35, range(t, 0.05, 0.15));
      else if (t < 0.55) gridOp = lerp(0.35, 0.7, range(t, 0.15, 0.55));
      else if (t < 0.8) gridOp = lerp(0.7, 0.4, range(t, 0.55, 0.8));
      else gridOp = lerp(0.4, 0.15, range(t, 0.8, 1));
      if (refs.grid.current) refs.grid.current.style.opacity = gridOp;
      if (refs.crosshair.current) refs.crosshair.current.style.opacity = lerp(0, 1, range(t, 0.1, 0.4)) * (t < 0.85 ? 1 : lerp(1, 0, range(t, 0.85, 1)));

      // ===== ACT II — TENSION =====
      const t2 = range(t, 0.18, 0.38);
      const t2e = ease.inOutCubic(t2);
      const lineSpread = lerp(0, 7, t2e);
      const lineWide = lerp(1, 1.4, t2e);
      const line1Y = -30 - lineSpread;
      const line2Y = -16 + lineSpread;

      const dotRadius = lerp(2.2, 4.5, t2e) * dotPulse;
      const vigOp = lerp(0, 0.18, t2e) * intensity;

      // Halo ring (new, inside capsule)
      if (refs.haloRing.current) {
        const haloOp = lerp(0, 0.6, t2e) * (t < 0.55 ? 1 : lerp(1, 0, range(t, 0.55, 0.8)));
        refs.haloRing.current.style.opacity = haloOp;
        const haloScale = 1 + Math.sin(time * 1.3) * 0.08 * intensity;
        refs.haloRing.current.setAttribute("transform", `scale(${haloScale})`);
      }

      // Pulse ring (expanding ring during tension)
      if (refs.pulseRing.current) {
        const pulseT = (time * 0.5) % 1;
        const pulseR = lerp(20, 90, pulseT);
        const pulseOpEnv = lerp(0, 0.5, t2e) * (t < 0.6 ? 1 : lerp(1, 0, range(t, 0.6, 0.8)));
        refs.pulseRing.current.setAttribute("r", pulseR);
        refs.pulseRing.current.style.opacity = pulseOpEnv * (1 - pulseT);
      }

      // ===== ACT III — FISSURE =====
      const t3 = range(t, 0.38, 0.58);
      const t3e = ease.inOutCubic(t3);
      const fissureWidth = lerp(0, 4, ease.outQuart(t3));
      const fissureOpacity = lerp(0, 1, ease.outQuart(t3));
      if (refs.fissure.current) {
        refs.fissure.current.setAttribute("stroke-width", fissureWidth);
        refs.fissure.current.style.opacity = fissureOpacity;
      }
      const splitAngle = lerp(0, 8, t3e);
      const splitX = lerp(0, 18, t3e);
      const linesOp = lerp(linePulse, 0, ease.inCubic(t3));
      const partScale = lerp(1, 1.4, t3e);

      // ===== ACT IV — DEPLOYMENT =====
      const t4 = range(t, 0.58, 0.82);
      const t4e = ease.outQuart(t4);
      const halvesY = lerp(0, 80, ease.inCubic(t4));
      const halvesOp = lerp(1, 0, ease.outQuart(Math.min(t4 * 1.5, 1)));
      const halvesXC = lerp(splitX, splitX + 50, t4e);
      const bodyOp = lerp(0, 1, ease.outCubic(Math.min(t4 * 1.3, 1)));
      const wingDelay = 0.15;
      const tWing = clamp((t4 - wingDelay) / (1 - wingDelay), 0, 1);
      const wingScale = lerp(0, 1, ease.outQuart(tWing));
      const wingOp = lerp(0, 1, ease.outCubic(tWing));
      const partsOutOp = lerp(1, 0, ease.inCubic(t4));
      const partSpread = lerp(partScale, 3.5, t4e);
      if (refs.fissure.current) refs.fissure.current.style.opacity = lerp(fissureOpacity, 0, t4);

      // ===== ACT V — FLIGHT =====
      const t5 = range(t, 0.82, 1.00);
      const t5e = ease.outCubic(t5);
      const flutterFreq = 2.4;
      const flutterAmp = lerp(0, 0.10, t5) * intensity;
      const flTL = Math.sin(time * flutterFreq) * flutterAmp;
      const flTR = Math.sin(time * flutterFreq + 0.05) * flutterAmp;
      const flBL = Math.sin(time * flutterFreq + Math.PI * 0.1) * flutterAmp * 0.7;
      const flBR = Math.sin(time * flutterFreq + Math.PI * 0.1 + 0.05) * flutterAmp * 0.7;

      const topLightOp = lerp(0, 0.45, t5e) * intensity;
      if (refs.toplight.current) refs.toplight.current.style.background = `radial-gradient(ellipse at center top, rgba(217, 183, 137, ${topLightOp}) 0%, transparent 60%)`;

      // Vignette
      if (refs.vignette.current) {
        if (t5 > 0) {
          const vigSoft = lerp(0.18, 0.08, t5e);
          refs.vignette.current.style.background = `radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(180, 123, 63, ${vigSoft * 0.3}) 80%, rgba(20, 39, 31, ${vigSoft}) 100%)`;
        } else {
          refs.vignette.current.style.background = `radial-gradient(ellipse at center, transparent 0%, transparent 40%, rgba(180, 123, 63, ${vigOp * 0.3}) 80%, rgba(20, 39, 31, ${vigOp}) 100%)`;
        }
      }

      // Dust
      if (refs.dust.current) {
        const dustOp = lerp(0, 0.7, range(t, 0.4, 0.95)) * intensity;
        refs.dust.current.style.opacity = dustOp;
        // animate dust nodes
        const nodes = refs.dust.current.querySelectorAll(".dust-particle");
        nodes.forEach((n, i) => {
          const s = dustSeeds[i];
          const dx = Math.sin(time * s.freq + s.phase) * s.drift;
          const dy = Math.cos(time * s.freq * 0.7 + s.phase) * s.drift * 0.6 - time * 4 % 100;
          n.style.transform = `translate(${dx}px, ${dy % 100}px)`;
        });
      }

      // Wordmark
      if (refs.wordmark.current) {
        if (t5 > 0.3) refs.wordmark.current.classList.add("visible");
        else refs.wordmark.current.classList.remove("visible");
      }

      // Apply core SVG transforms
      const overallScale = lerp(breathScale, 0.85, t4) * lerp(1, 0.95, t5);

      if (refs.capsuleLeft.current) {
        refs.capsuleLeft.current.style.transform = `translate(${-splitX - (t4 > 0 ? halvesXC * 0.3 : 0)}px, ${halvesY}px) rotate(${-splitAngle}deg) scale(${overallScale})`;
        refs.capsuleLeft.current.style.opacity = halvesOp;
      }
      if (refs.capsuleRight.current) {
        refs.capsuleRight.current.style.transform = `translate(${splitX + (t4 > 0 ? halvesXC * 0.3 : 0)}px, ${halvesY}px) rotate(${splitAngle}deg) scale(${overallScale})`;
        refs.capsuleRight.current.style.opacity = halvesOp;
      }

      if (refs.line1.current) refs.line1.current.setAttribute("d", `M ${-16 * lineWide} ${line1Y} Q 0 ${line1Y - 4} ${16 * lineWide} ${line1Y}`);
      if (refs.line2.current) refs.line2.current.setAttribute("d", `M ${-17 * lineWide} ${line2Y} Q 0 ${line2Y - 4} ${17 * lineWide} ${line2Y}`);
      if (refs.internalLines.current) refs.internalLines.current.style.opacity = (t < 0.55) ? linesOp : 0;

      // Light dot migration
      let dotY, dotR, dotOp = 1;
      if (t < 0.55) { dotY = -50; dotR = dotRadius; }
      else if (t < 0.82) {
        const tMig = range(t, 0.55, 0.82);
        dotY = lerp(-50, -55, ease.outCubic(tMig));
        dotR = lerp(4.5, 2.5, ease.outCubic(tMig)) * dotPulse;
      } else { dotY = -55; dotR = 2.5 * dotPulse; dotOp = lerp(1, 0.7, t5e); }
      if (refs.lightDot.current) {
        refs.lightDot.current.setAttribute("cy", dotY);
        refs.lightDot.current.setAttribute("r", dotR);
        refs.lightDot.current.style.opacity = dotOp;
      }

      // Particles
      let partOp;
      if (t < 0.18) partOp = 0;
      else if (t < 0.55) partOp = lerp(0, 1, range(t, 0.18, 0.38));
      else if (t < 0.82) partOp = partsOutOp;
      else partOp = lerp(0, 0.35, ease.outCubic(t5));
      if (refs.particles.current) refs.particles.current.style.opacity = partOp;

      const particleEls = refs.particles.current ? refs.particles.current.querySelectorAll(".particle") : [];
      particleEls.forEach((p, i) => {
        const seed = particleSeeds[i % particleSeeds.length];
        const wx = Math.sin(time * seed.freq + seed.phase) * seed.ampX;
        const wy = Math.cos(time * seed.freq * 0.7 + seed.phase) * seed.ampY;
        let sp, ex = 0, ey = 0;
        if (t < 0.55) sp = partScale;
        else if (t < 0.82) sp = partSpread;
        else {
          sp = lerp(2.5, 2, t5);
          const ang = (i / particleEls.length) * Math.PI * 2 + time * 0.15;
          const rad = lerp(0, 35, t5e);
          ex = Math.cos(ang) * rad * 0.6;
          ey = Math.sin(ang) * rad * 0.7;
        }
        p.style.transform = `translate(${wx + ex}px, ${wy + ey}px) scale(${sp})`;
      });

      // Butterfly body & wings
      if (refs.butterflyBody.current) {
        refs.butterflyBody.current.style.opacity = bodyOp;
        refs.butterflyBody.current.style.transform = `scale(${lerp(0.6, 1, ease.outCubic(t4))})`;
      }
      if (refs.wTL.current) { refs.wTL.current.style.opacity = wingOp; refs.wTL.current.setAttribute("transform", `scale(${wingScale}) rotate(${flTL * 180 / Math.PI})`); }
      if (refs.wTR.current) { refs.wTR.current.style.opacity = wingOp; refs.wTR.current.setAttribute("transform", `scale(${wingScale}) rotate(${-flTR * 180 / Math.PI})`); }
      if (refs.wBL.current) { refs.wBL.current.style.opacity = wingOp * 0.95; refs.wBL.current.setAttribute("transform", `scale(${wingScale}) rotate(${flBL * 180 / Math.PI})`); }
      if (refs.wBR.current) { refs.wBR.current.style.opacity = wingOp * 0.95; refs.wBR.current.setAttribute("transform", `scale(${wingScale}) rotate(${-flBR * 180 / Math.PI})`); }

      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [tweaks.animationIntensity]);

  // Density of ambient words
  const densityCount = tweaks.wordsDensity === "minimal" ? 4 :
                       tweaks.wordsDensity === "abundant" ? 10 : 7;

  const ambientWords = AMBIENT_WORDS_BY_ACT[actKey].slice(0, densityCount);
  const positions = AMBIENT_POSITIONS.slice(0, densityCount);

  const manifestPos = MANIFEST_POSITIONS[actKey];
  const manifestLine = MANIFEST_LINES[actKey];

  // Determine word states (faded vs bright vs strike) based on act
  const wordStateForAct = (act, idx) => {
    if (act === "I") return idx < 2 ? "faded strike" : "faded";
    if (act === "II") return idx < 3 ? "faded" : "bright";
    if (act === "III") return idx < 5 ? "bright" : "faded";
    if (act === "IV") return "bright";
    if (act === "V") return idx < 5 ? "bright" : "faded";
    return "faded";
  };

  return (
    <section className="hero" ref={heroRef}>
      <div className={"hero-stage" + (tweaks.darkHero ? " dark" : "")} ref={stageRef}>
        <div className="hero-grid" ref={refs.grid}></div>
        <div className="hero-crosshair" ref={refs.crosshair}></div>
        <div className="hero-vignette" ref={refs.vignette}></div>
        <div className="hero-toplight" ref={refs.toplight}></div>

        {/* Dust layer */}
        <div className="hero-dust" ref={refs.dust}>
          {dustSeeds.map((s, i) => (
            <div key={i}
                 className="dust-particle"
                 style={{
                   position: "absolute",
                   left: s.x + "%",
                   top: s.y + "%",
                   width: s.size + "px",
                   height: s.size + "px",
                   borderRadius: "50%",
                   background: tweaks.darkHero ? "rgba(217,183,137,0.5)" : "rgba(180,123,63,0.4)",
                 }}/>
          ))}
        </div>

        {/* Ambient words around the capsule */}
        <div className="ambient-words">
          {ambientWords.map((word, i) => {
            const pos = positions[i] || positions[0];
            const stateClass = wordStateForAct(actKey, i);
            return (
              <div key={`${actKey}-${i}`}
                   className={`ambient-word ${stateClass}`}
                   style={{
                     left: pos.x + "%",
                     top: pos.y + "%",
                     animation: `ambientFloat ${6 + (i % 3)}s ease-in-out ${i * 0.3}s infinite`,
                     opacity: undefined,
                   }}>
                {word}
              </div>
            );
          })}
        </div>

        {/* Manifest line — la pieza central nueva */}
        <div className="hero-manifest">
          <div
            key={actKey}
            className="manifest-line visible"
            style={{
              ...manifestPos,
              fontSize: manifestPos.size,
              textAlign: manifestPos.align,
              "--target-op": 1,
            }}
            dangerouslySetInnerHTML={{ __html: manifestLine.primary }}
          />
        </div>

        {/* SVG canvas */}
        <div className="hero-canvas">
          <svg viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet">
            {/* Halo ring */}
            <circle cx="0" cy="0" r="48"
                    fill="url(#halo)"
                    ref={refs.haloRing}
                    style={{ opacity: 0, transformOrigin: "center", transformBox: "fill-box" }}/>

            {/* Pulse ring */}
            <circle cx="0" cy="0" r="20"
                    ref={refs.pulseRing}
                    fill="none"
                    stroke="#B47B3F"
                    strokeWidth="0.5"
                    style={{ opacity: 0 }}/>

            {/* Particles */}
            <g ref={refs.particles} style={{ opacity: 0 }}>
              {Array.from({ length: 14 }).map((_, i) => (
                <circle key={i}
                        className="particle"
                        cx={Math.cos((i/14)*Math.PI*2 + i*0.37) * (4 + (i%5)*6)}
                        cy={Math.sin((i/14)*Math.PI*2 + i*0.37) * (4 + (i%5)*6)}
                        r={0.6 + (i % 3) * 0.15}
                        fill={tweaks.darkHero ? "#D9B789" : "#B47B3F"}/>
              ))}
            </g>

            {/* Capsule halves */}
            <path ref={refs.capsuleLeft}
                  d="M 0 -62 C -12 -62, -22 -48, -24 -28 C -26 -10, -25 8, -20 26 C -15 45, -8 58, 0 62 L 0 -62 Z"
                  fill={tweaks.darkHero ? "#1E3A30" : "#1E3A30"}
                  style={{ transformBox: "fill-box" }}/>
            <path ref={refs.capsuleRight}
                  d="M 0 -62 C 12 -62, 22 -48, 24 -28 C 26 -10, 25 8, 20 26 C 15 45, 8 58, 0 62 L 0 -62 Z"
                  fill={tweaks.darkHero ? "#1E3A30" : "#1E3A30"}
                  style={{ transformBox: "fill-box" }}/>

            {/* Wings */}
            <g ref={refs.wTL} opacity="0">
              <path d="M 0 -45 C -18 -58, -42 -62, -62 -52 C -78 -42, -84 -25, -78 -12 C -68 0, -48 4, -28 -2 C -14 -8, -4 -18, 0 -28 Z" fill="#1E3A30"/>
              <path d="M -2 -32 C -18 -38, -38 -42, -56 -36" stroke="#B47B3F" strokeWidth="1.1" fill="none" strokeLinecap="round" opacity="0.9"/>
              <circle cx="-58" cy="-30" r="1.2" fill="#B47B3F"/>
            </g>
            <g ref={refs.wTR} opacity="0">
              <path d="M 0 -45 C 18 -58, 42 -62, 62 -52 C 78 -42, 84 -25, 78 -12 C 68 0, 48 4, 28 -2 C 14 -8, 4 -18, 0 -28 Z" fill="#1E3A30"/>
              <path d="M 2 -32 C 18 -38, 38 -42, 56 -36" stroke="#B47B3F" strokeWidth="1.1" fill="none" strokeLinecap="round" opacity="0.9"/>
              <circle cx="58" cy="-30" r="1.2" fill="#B47B3F"/>
            </g>
            <g ref={refs.wBL} opacity="0">
              <path d="M 0 -2 C -16 0, -36 8, -48 22 C -56 32, -54 42, -42 46 C -28 48, -14 42, -4 32 C 0 26, 2 16, 0 8 Z" fill="#14271F"/>
              <path d="M -2 14 C -14 20, -28 26, -38 32" stroke="#B47B3F" strokeWidth="0.9" fill="none" strokeLinecap="round" opacity="0.7"/>
            </g>
            <g ref={refs.wBR} opacity="0">
              <path d="M 0 -2 C 16 0, 36 8, 48 22 C 56 32, 54 42, 42 46 C 28 48, 14 42, 4 32 C 0 26, -2 16, 0 8 Z" fill="#14271F"/>
              <path d="M 2 14 C 14 20, 28 26, 38 32" stroke="#B47B3F" strokeWidth="0.9" fill="none" strokeLinecap="round" opacity="0.7"/>
            </g>

            <path ref={refs.butterflyBody}
                  d="M 0 -55 C -5 -55, -8 -42, -8 -25 C -8 -8, -7 10, -5 28 C -3 42, -1 52, 0 56 C 1 52, 3 42, 5 28 C 7 10, 8 -8, 8 -25 C 8 -42, 5 -55, 0 -55 Z"
                  fill="#14271F"
                  opacity="0"
                  style={{ transformOrigin: "center", transformBox: "fill-box" }}/>

            <g ref={refs.internalLines}>
              <path ref={refs.line1} d="M -16 -30 Q 0 -34 16 -30" stroke="#B47B3F" strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.95"/>
              <path ref={refs.line2} d="M -17 -16 Q 0 -20 17 -16" stroke="#B47B3F" strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.95"/>
            </g>

            <circle ref={refs.lightDot} cx="0" cy="-50" r="2.2" fill="#B47B3F" filter="url(#glow)"/>
            <line ref={refs.fissure} x1="0" y1="-62" x2="0" y2="62" stroke="#E8C896" strokeWidth="0" opacity="0" filter="url(#bigGlow)"/>
          </svg>
        </div>

        {/* Wordmark final */}
        <div className="hero-wordmark-layer" ref={refs.wordmark}>
          <div className="hero-wordmark">Crisalab</div>
          <div className="hero-tagline">La forma simple del cambio.</div>
        </div>
      </div>

      <style>{`
        @keyframes ambientFloat {
          0%, 100% { transform: translate(-50%, -50%) translateY(0); }
          50% { transform: translate(-50%, -50%) translateY(-8px); }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;
window.MANIFEST_LINES = MANIFEST_LINES;