// Envelope — the reveal moment.
// Scroll progress 0..1 within the envelope scene drives:
//   0.00 - 0.20  envelope grows in from a small point to full size (closed)
//   0.20 - 0.50  HOLD — closed envelope stays full size, wax seal visible
//   0.50 - 0.70  flap peels open, wax seal fades
//   0.65 - 0.75  invitation lifts UP out of envelope and pushes forward in Z
//   0.75 - 0.85  card flips on Y axis to reveal ceremony/reception back
//   0.85 - 0.95  card SETTLES DOWN onto the envelope, bottom-aligned with
//                the envelope's bottom edge (back face on top of envelope)
//   0.95 - 1.00  RSVP button materialises beneath the envelope

function Envelope({ progress = 0, onOpen }) {
  const grow    = Math.min(1, progress / 0.20);
  const flap    = Math.max(0, Math.min(1, (progress - 0.50) / 0.20));
  const lift    = Math.max(0, Math.min(1, (progress - 0.65) / 0.10));
  // Z-forward translation completes BEFORE the flip starts (by progress 0.75)
  // so the invite is fully in front of the envelope before it flips.
  const forward = Math.max(0, Math.min(1, (progress - 0.65) / 0.10));
  const fade    = Math.max(0, Math.min(1, (progress - 0.75) / 0.10));
  // Settle: after the flip, card lands DOWN onto the envelope so its bottom
  // edge sits at the bottom of the envelope (back face visible, on top).
  const settle  = Math.max(0, Math.min(1, (progress - 0.85) / 0.10));
  const reveal  = Math.max(0, Math.min(1, (progress - 0.95) / 0.05));

  const scale  = 0.20 + grow * 0.80;
  // ease curves
  const liftEased    = 1 - Math.pow(1 - lift, 2);
  const forwardEased = 1 - Math.pow(1 - forward, 2);
  // settle is an ease-in-out — gentle drop onto the envelope
  const settleEased  = settle < 0.5
    ? 2 * settle * settle
    : 1 - Math.pow(-2 * settle + 2, 2) / 2;

  return (
    <div className="env-scene" aria-hidden={progress < 0.05}>
      <div className="env-stage" style={{ transform: `scale(${scale})`, opacity: grow }}>

        {/* Envelope back / interior — visible once flap lifts. */}
        <div className="env-back">
          <div className="env-back-paper" />
        </div>

        {/* Envelope front pocket (with V-cut at top) — sits in front of card initially. */}
        <div className="env-front">
          <div className="env-front-paper" />
        </div>

        {/* Flap — pivots from the top edge. Positive rotateX peels the flap OUTWARD
            (toward the viewer), then up and over the top edge — like a real envelope
            being opened from the front, not from behind. */}
        <div className="env-flap" style={{
          transform: `rotateX(${flap * 180}deg)`,
        }}>
          <div className="env-flap-inner" />
        </div>

        {/* Wax seal — sits on the V apex when closed; fades as flap opens.
            Chocolate-brown wax with the cream A&N logo pressed into it. */}
        <div className="env-seal-wrap" style={{
          opacity: 1 - flap * 1.4,
          transform: `translate(-50%, -50%) scale(${1 - flap * 0.2})`,
        }}>
          <img
            className="env-seal-logo"
            src="assets/Logos/A%26N-logo-med-cream.png"
            alt="A & N"
            draggable="false"
          />
        </div>

          {/* Invitation card — lifts UP out of envelope, then FLIPS on the Y axis
              to reveal the ceremony/reception back. */}
          {/* Invitation card —
              1. Lift UP out of envelope (translateY -90%) and push forward in Z
              2. Flip on Y axis to reveal back
              3. Settle DOWN onto envelope (translateY back to 0) with back face showing.
              Net Y = -lift * 90 + settle * 90 → ends at 0 (resting on envelope). */}
          <div className="env-card-track" style={{
            transform: `translate3d(0, ${(-liftEased + settleEased) * 90}%, ${-30 + forwardEased * 200}px) rotateY(${fade * 180}deg)`,
            zIndex: lift > 0.05 ? 20 : 1,
          }}>
            {/* Front: linework portico */}
            <div className="env-card-face env-card-front">
              <img src="assets/invite-front.png" alt="State Library of Victoria" draggable="false" />
            </div>
            {/* Back: brown silhouette with ceremony/reception details */}
            <div className="env-card-face env-card-back">
              <img src="assets/invite-back.png?v=3" alt="Ceremony and Reception details" draggable="false" />
            </div>
          </div>

          {/* RSVP button — sits BELOW the envelope, fades in once the back face is revealed */}
          {reveal > 0.02 && (
            <button
              className="env-rsvp-btn"
              onClick={e => onOpen && onOpen(e.currentTarget)}
              style={{ opacity: reveal, transform: `translate(-50%, ${(1 - reveal) * 12}px)` }}
            >
              <span className="env-rsvp-mark">RSVP</span>
              <span className="env-rsvp-line">Respond by 1 August 2026</span>
            </button>
          )}

      </div>
    </div>
  );
}

window.Envelope = Envelope;