window.EnvelopeIntro = function EnvelopeIntro({ onOpen, onComplete }) {
  const [phase, setPhase] = React.useState('idle');
  // idle → cracking → opening → exit

  // Bloqueia scroll enquanto o envelope estiver visível
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  React.useEffect(() => {
    if (phase === 'cracking') {
      // jolt breve → abas abrem
      const t = setTimeout(() => setPhase('opening'), 260);
      return () => clearTimeout(t);
    }
    if (phase === 'opening') {
      // abas abertas → zoom + desce
      const t1 = setTimeout(() => {
        setPhase('exit');
        onOpen && onOpen();
      }, 980);
      return () => clearTimeout(t1);
    }
    if (phase === 'exit') {
      const t = setTimeout(onComplete, 900);
      return () => clearTimeout(t);
    }
  }, [phase]);

  function handleClick() {
    if (phase !== 'idle') return;
    setPhase('cracking');
  }

  const isOpened  = phase === 'opening' || phase === 'exit';
  const isCracking = phase === 'cracking';
  const isExit    = phase === 'exit';

  return (
    <div className={`env-stage${isExit ? ' env-stage--exit' : ''}`}
         onClick={handleClick}
         role={phase === 'idle' ? 'button' : undefined}
         tabIndex={phase === 'idle' ? 0 : -1}
         onKeyDown={e => phase === 'idle' && (e.key === 'Enter' || e.key === ' ') && handleClick()}
         aria-label="Abrir convite">

      <div className={`env-scene${isCracking ? ' is-cracking' : ''}${isOpened ? ' is-opened' : ''}${isExit ? ' is-zooming' : ''}`}>

        {/* Interior escuro */}
        <div className="env-pocket" />

        {/* Corpo fixo — triângulos superior + inferior (bowtie) */}
        <div className="env-body" />

        {/* Aba ESQUERDA */}
        <div className={`env-flap-wrap env-flap-wrap--left`}>
          <div className="env-flap-back" />
          <div className="env-flap" />
          <div className="env-seal-half" />
        </div>

        {/* Aba DIREITA */}
        <div className={`env-flap-wrap env-flap-wrap--right`}>
          <div className="env-flap-back" />
          <div className="env-flap" />
          <div className="env-seal-half" />
        </div>

      </div>

      {phase === 'idle' && (
        <p className="env-hint">
          toque para abrir
          <span className="env-hint-dot" />
        </p>
      )}

      <style>{`
        /* === Fundo escuro dramático === */
        .env-stage {
          position: fixed;
          inset: 0;
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #711312;
          perspective: 2400px;
          perspective-origin: 50% 40%;
          cursor: pointer;
          overflow: hidden;
          transition: transform 0.88s cubic-bezier(0.76, 0, 0.24, 1);
        }
        .env-stage--exit {
          transform: translateY(105%);
          pointer-events: none;
        }

        /* Grain de filme */
        .env-stage::before {
          content: "";
          position: absolute; inset: 0;
          pointer-events: none;
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
          opacity: 0.55;
          mix-blend-mode: overlay;
          z-index: 10;
        }

        /* === Cena do envelope === */
        .env-scene {
          position: relative;
          width: min(82vw, 46vh);
          aspect-ratio: 941 / 1672;
          transform-style: preserve-3d;
          transition: transform 1.4s cubic-bezier(.5,0,.2,1);
          z-index: 20;
        }


        /* Jolt ao rachar */
        @keyframes env-jolt {
          0%   { transform: translate(0,0) rotate(0deg); }
          25%  { transform: translate(-0.5%,0.3%) rotate(-0.3deg); }
          55%  { transform: translate(0.5%,-0.3%) rotate(0.3deg); }
          80%  { transform: translate(-0.2%,0.1%) rotate(-0.1deg); }
          100% { transform: translate(0,0) rotate(0deg); }
        }
        .env-scene.is-cracking {
          animation: env-jolt 0.26s ease both;
        }

        /* Zoom ao abrir + desce junto com o stage */
        @keyframes env-zoom {
          from { transform: scale(1); }
          to   { transform: scale(10); }
        }
        .env-scene.is-zooming {
          animation: env-zoom 0.52s cubic-bezier(0.4, 0, 1, 1) forwards;
        }

        /* === Interior — textura_fundo === */
        .env-pocket {
          position: absolute; inset: 0;
          background: url("assets/textura_fundo.png") center / cover no-repeat;
          z-index: 1;
        }

        /* === Corpo — triângulos superior + inferior (bowtie) === */
        .env-body {
          position: absolute; inset: 0;
          background-image: url("assets/envelopebranco.png");
          background-size: 100% 100%;
          clip-path: polygon(31% 0%, 69% 0%, 50% 43%, 69% 100%, 31% 100%, 50% 43%);
          z-index: 3;
          filter: brightness(1.02) contrast(1.02);
          transition: opacity 0.3s ease;
        }
        /* Esconde os triângulos quando o envelope abre — interior limpo */
        .env-scene.is-opened .env-body {
          opacity: 0;
        }

        /* === Abas laterais === */
        .env-flap-wrap {
          position: absolute; inset: 0;
          transform-style: preserve-3d;
          transition: transform 1.25s cubic-bezier(.55,.05,.25,1) 0.5s;
          z-index: 5;
        }
        .env-flap-wrap--left  { transform-origin: 0% 50%;   transform: rotateY(0deg); }
        .env-flap-wrap--right { transform-origin: 100% 50%; transform: rotateY(0deg); }

        .env-scene.is-opened .env-flap-wrap--left  { transform: rotateY(-158deg); }
        .env-scene.is-opened .env-flap-wrap--right { transform: rotateY( 158deg); }

        .env-flap, .env-flap-back {
          position: absolute; inset: 0;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
        }
        .env-flap {
          background-image: url("assets/envelopebranco.png");
          background-size: 100% 100%;
          filter: brightness(1.0) contrast(1.02);
        }
        .env-flap-back {
          background: radial-gradient(ellipse at 50% 50%, #ffffff, #f2ede6 95%, #e8e0d4 100%);
          transform: rotateY(180deg);
        }

        /* Triângulos esquerd/direito */
        .env-flap-wrap--left  .env-flap,
        .env-flap-wrap--left  .env-flap-back { clip-path: polygon(0% 0%, 31% 0%, 50% 43%, 31% 100%, 0% 100%); }
        .env-flap-wrap--right .env-flap,
        .env-flap-wrap--right .env-flap-back { clip-path: polygon(69% 0%, 100% 0%, 100% 100%, 69% 100%, 50% 43%); }

        /* Sombra nos vincos */
        .env-flap-wrap--left  .env-flap::after,
        .env-flap-wrap--right .env-flap::after {
          content: ""; position: absolute; inset: 0; pointer-events: none;
        }
        .env-flap-wrap--left .env-flap::after {
          background: linear-gradient(90deg, transparent 60%, rgba(0,0,0,0.12) 100%);
          clip-path: polygon(0% 0%, 50% 50%, 0% 100%);
        }
        .env-flap-wrap--right .env-flap::after {
          background: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, transparent 40%);
          clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
        }

        /* === Selo — dividido em duas metades === */
        .env-seal-half {
          position: absolute;
          left: 50%; top: 50%;
          width: 38%; aspect-ratio: 1;
          transform: translate(-50%, -50%);
          pointer-events: none;
          z-index: 2;
          background-image: url("assets/selo.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          transition: transform 0.3s ease-out, opacity 0.5s ease 0.85s;
        }
        /* Sombra leve — aplicada em cada metade na direção oposta ao corte
           para que juntas formem uma sombra suave e contínua */
        .env-flap-wrap--left  .env-seal-half { filter: drop-shadow(-1px 2px 5px rgba(0,0,0,0.15)); }
        .env-flap-wrap--right .env-seal-half { filter: drop-shadow( 1px 2px 5px rgba(0,0,0,0.15)); }
        .env-flap-wrap--left  .env-seal-half { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
        .env-flap-wrap--right .env-seal-half { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }

        /* Fenda ao rachar */
        .env-scene.is-cracking .env-flap-wrap--left  .env-seal-half { transform: translate(-50.9%, -50%); }
        .env-scene.is-cracking .env-flap-wrap--right .env-seal-half { transform: translate(-49.1%, -50%); }

        /* Após abrir: metades se afastam levemente */
        .env-scene.is-opened .env-flap-wrap--left  .env-seal-half { transform: translate(-52%, -50%); opacity: 0.9; }
        .env-scene.is-opened .env-flap-wrap--right .env-seal-half { transform: translate(-48%, -50%); opacity: 0.9; }

        /* === Hint === */
        .env-hint {
          position: fixed;
          left: 50%; bottom: 6vh;
          transform: translateX(-50%);
          color: rgba(241,230,208,0.7);
          font-family: 'Cormorant Garamond', serif;
          font-style: italic;
          font-size: clamp(13px, 1.8vh, 17px);
          letter-spacing: 0.18em;
          text-transform: lowercase;
          pointer-events: none;
          z-index: 200;
          animation: env-breathe 2.6s ease-in-out infinite;
          margin: 0;
        }
        .env-hint-dot {
          display: inline-block;
          width: 4px; height: 4px;
          border-radius: 50%;
          background: rgba(241,230,208,0.6);
          vertical-align: middle;
          margin: 0 0.8em 3px;
        }
        @keyframes env-breathe {
          0%, 100% { opacity: 0.45; }
          50%       { opacity: 0.9; }
        }

        @media (max-width: 520px) {
          .env-scene { width: min(90vw, 52vh); }
        }
      `}</style>
    </div>
  );
};