// iPhone drawn as faked isometric 3D using PURE 2D CSS (no preserve-3d).
// Technique: layer a tilted front face over a back/shadow shape offset down-right.
// This renders correctly in html-to-image AND real Chrome.

const { useRef, useEffect: useE, useState: useS } = React;

function IPhoneMobile({ lang }) {
  const t = (de, pl) => lang === 'de' ? de : pl;
  const [stage, setStage] = useS(0); // 0=off, 1=slam-in, 2=power-on, 3=ui-in, 4=idle
  const videoRef = useRef(null);

  useE(() => {
    const ts = [
      setTimeout(() => setStage(1), 250),
      setTimeout(() => setStage(2), 1100),
      setTimeout(() => setStage(3), 1700),
      setTimeout(() => setStage(4), 2400),
      setTimeout(() => { if (videoRef.current) videoRef.current.play().catch(()=>{}); }, 1800),
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  const revealed = stage >= 1;
  const powered  = stage >= 2;
  const uiIn     = stage >= 3;

  const W = 220, H = 448;
  const RADIUS = 48;
  const BEZEL = 10;
  const INNER_RADIUS = RADIUS - BEZEL;

  // The trick: make a "fake depth" by placing multiple copies of the phone
  // offset behind each other with a slight translate, creating a thick-edge look.
  // Then tilt the whole thing slightly with skew for perspective.

  const DEPTH_STACK = 9;    // half of the previous 18 — slimmer phone
  const DEPTH_STEP_X = 0.6; // half of 1.2
  const DEPTH_STEP_Y = -0.2;// half of -0.4

  return (
    <div style={{
      position: 'relative',
      width: W + 120,
      height: H + 80,
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      {/* Gold halo that pulses behind the phone */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%',
        width: W * 1.8, height: H * 1.2,
        transform: 'translate(-50%,-50%)',
        borderRadius: '50%',
        background: 'radial-gradient(ellipse at center, rgba(212,175,55,.18) 0%, rgba(212,175,55,.08) 30%, transparent 65%)',
        filter: 'blur(10px)',
        opacity: revealed ? 1 : 0,
        transition: 'opacity 1.4s .3s',
        animation: revealed ? 'haloPulse 4s ease-in-out infinite' : 'none',
        zIndex: 0
      }}/>

      {/* Shockwave ring — expands once at entry */}
      {revealed && (
        <>
          <div style={{
            position: 'absolute', left: '50%', top: '50%',
            width: 40, height: 40,
            borderRadius: '50%',
            border: '2px solid rgba(212,175,55,.9)',
            transform: 'translate(-50%,-50%)',
            animation: 'shockwave 1.2s cubic-bezier(.2,.9,.3,1) .6s forwards',
            opacity: 0,
            zIndex: 0
          }}/>
          <div style={{
            position: 'absolute', left: '50%', top: '50%',
            width: 40, height: 40,
            borderRadius: '50%',
            border: '1px solid rgba(212,175,55,.6)',
            transform: 'translate(-50%,-50%)',
            animation: 'shockwave 1.5s cubic-bezier(.2,.9,.3,1) .8s forwards',
            opacity: 0,
            zIndex: 0
          }}/>
        </>
      )}

      {/* Gold sparks flying outward during slam */}
      {revealed && [...Array(14)].map((_, i) => {
        const angle = (i / 14) * Math.PI * 2;
        const dist = 180 + (i % 3) * 40;
        return (
          <div key={i} style={{
            position: 'absolute', left: '50%', top: '50%',
            width: 3, height: 3, borderRadius: '50%',
            background: '#D4AF37',
            boxShadow: '0 0 8px rgba(212,175,55,.9)',
            transform: 'translate(-50%,-50%)',
            animation: `sparkFly${i} 1.2s cubic-bezier(.3,.8,.2,1) .5s forwards`,
            opacity: 0,
            zIndex: 1
          }}/>
        );
      })}

      {/* GROUND SHADOW */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 20,
        transform: 'translateX(-40%)',
        width: W * 0.9, height: 36,
        borderRadius: '50%',
        background: 'radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%)',
        filter: 'blur(18px)',
        opacity: revealed ? 1 : 0,
        transition: 'opacity .8s .7s',
        zIndex: 0
      }}/>

      {/* The phone wrapper — dramatic slam-in entrance */}
      <div style={{
        position: 'relative',
        width: W,
        height: H,
        transform: !revealed
          ? 'translateX(120vw) translateY(-40px) rotate(-65deg) scale(.5)'
          : 'translateX(0) translateY(0) rotate(-4deg) scale(1)',
        transition: 'transform 1.1s cubic-bezier(.2,.8,.2,1.05)',
        filter: 'drop-shadow(0 30px 40px rgba(0,0,0,.5))',
        animation: stage >= 4 ? 'phoneFloat 6s ease-in-out infinite' : 'none',
        zIndex: 2
      }}>
        {/* Stacked back layers — each slightly offset — creates visible thickness at edges */}
        {[...Array(DEPTH_STACK)].map((_, i) => {
          const t = i / (DEPTH_STACK - 1); // 0 (deepest) -> 1 (closest to front)
          return (
            <div key={i} style={{
              position: 'absolute',
              top: (DEPTH_STACK - i) * -DEPTH_STEP_Y,
              left: (DEPTH_STACK - i) * DEPTH_STEP_X,
              width: W, height: H,
              borderRadius: RADIUS,
              // Darker deeper; brighter toward front
              background: i === 0
                ? 'linear-gradient(145deg,#1a1a1c,#0a0a0c)'
                : `linear-gradient(135deg,
                    ${shade(0x60 + t*40)} 0%,
                    ${shade(0x30 + t*30)} 30%,
                    ${shade(0x20 + t*20)} 60%,
                    ${shade(0x40 + t*30)} 100%)`,
              boxShadow: i === 0 ? 'inset 0 0 0 1px rgba(255,255,255,.03)' : 'none',
              zIndex: i
            }}/>
          );
        })}

        {/* FRONT FACE — titanium bezel */}
        <div style={{
          position: 'absolute', inset: 0,
          borderRadius: RADIUS,
          background: 'linear-gradient(135deg, #6a6a70 0%, #3a3a3e 25%, #1a1a1c 50%, #3a3a3e 75%, #6a6a70 100%)',
          boxShadow: `
            inset 0 0 0 1px rgba(255,255,255,.18),
            inset 0 2px 4px rgba(255,255,255,.22),
            inset 0 -2px 4px rgba(0,0,0,.55)
          `,
          zIndex: DEPTH_STACK
        }}/>

        {/* Inner black rim */}
        <div style={{
          position: 'absolute', inset: BEZEL - 3, borderRadius: INNER_RADIUS + 3,
          background: '#000',
          boxShadow: 'inset 0 0 0 2px #000, inset 0 0 8px rgba(0,0,0,.95)',
          zIndex: DEPTH_STACK + 1
        }}/>

        {/* LEFT-side physical buttons drawn on the stack thickness */}
        <div style={{
          position: 'absolute',
          left: -1, top: 100,
          width: 4, height: 30,
          background: 'linear-gradient(90deg,#2a2a2c,#5a5a5e,#2a2a2c)',
          borderRadius: '2px 0 0 2px',
          zIndex: DEPTH_STACK - 1,
          boxShadow: '-1px 0 2px rgba(0,0,0,.5)'
        }}/>
        <div style={{
          position: 'absolute', left: -1, top: 148,
          width: 4, height: 52,
          background: 'linear-gradient(90deg,#2a2a2c,#5a5a5e,#2a2a2c)',
          borderRadius: '2px 0 0 2px',
          zIndex: DEPTH_STACK - 1
        }}/>
        <div style={{
          position: 'absolute', left: -1, top: 212,
          width: 4, height: 52,
          background: 'linear-gradient(90deg,#2a2a2c,#5a5a5e,#2a2a2c)',
          borderRadius: '2px 0 0 2px',
          zIndex: DEPTH_STACK - 1
        }}/>
        {/* Right power button on the offset thickness */}
        <div style={{
          position: 'absolute',
          right: DEPTH_STACK * DEPTH_STEP_X - 3,
          top: 180,
          width: 6, height: 80,
          background: 'linear-gradient(270deg,#2a2a2c,#5a5a5e,#2a2a2c)',
          borderRadius: '0 2px 2px 0',
          zIndex: DEPTH_STACK - 2,
          boxShadow: '1px 0 2px rgba(0,0,0,.5)'
        }}/>

        {/* SCREEN */}
        <div style={{
          position: 'absolute', inset: BEZEL, borderRadius: INNER_RADIUS,
          overflow: 'hidden',
          background: 'linear-gradient(180deg,#1a1020,#0a0515)',
          zIndex: DEPTH_STACK + 2
        }}>
          {/* Power-on white flash */}
          {powered && (
            <div style={{
              position: 'absolute', inset: 0, background: '#fff',
              zIndex: 20, pointerEvents: 'none',
              animation: 'powerOnFlash .45s ease-out forwards'
            }}/>
          )}
          {/* Scanline sweep */}
          {powered && (
            <div style={{
              position: 'absolute', left: 0, right: 0,
              height: '40%', zIndex: 19, pointerEvents: 'none',
              background: 'linear-gradient(180deg, transparent, rgba(212,175,55,.4) 50%, transparent)',
              animation: 'scanline .9s ease-out forwards'
            }}/>
          )}
          {/* UI content — fades/slides in after power-on */}
          <div style={{
            position: 'absolute', inset: 0,
            opacity: uiIn ? 1 : 0,
            transform: uiIn ? 'scale(1)' : 'scale(1.06)',
            transition: 'opacity .5s ease-out, transform .7s cubic-bezier(.2,.9,.3,1)'
          }}>
          {/* Looping hero video — plays on repeat, muted, autoplay.
              Poster image renders below as fallback for screenshot tools. */}
          <img src="assets/hero-poster.jpg" alt="" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 1
          }}/>
          <video
            ref={videoRef}
            src="assets/hero-video.mp4"
            poster="assets/hero-poster.jpg"
            muted
            loop
            autoPlay
            playsInline
            preload="auto"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%', objectFit: 'cover', zIndex: 2
            }}
          />

          {/* STATUS BAR */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0,
            height: 44, padding: '14px 24px 0',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontFamily: '-apple-system,SF Pro Display,system-ui', fontSize: 13, fontWeight: 600, color: '#fff',
            zIndex: 10, textShadow: '0 1px 3px rgba(0,0,0,.7)'
          }}>
            <div>9:41</div>
            <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
              <svg width="17" height="11" viewBox="0 0 17 11" fill="#fff">
                <rect x="0" y="7" width="3" height="4" rx=".5"/>
                <rect x="4.5" y="5" width="3" height="6" rx=".5"/>
                <rect x="9" y="3" width="3" height="8" rx=".5"/>
                <rect x="13.5" y="0" width="3" height="11" rx=".5"/>
              </svg>
              <svg width="15" height="11" viewBox="0 0 15 11" fill="#fff"><path d="M7.5 1C4.9 1 2.5 2 .7 3.7c-.2.2-.2.5 0 .7l1.1 1c.2.2.5.2.7 0 1.4-1.3 3.3-2.1 5-2.1s3.6.8 5 2.1c.2.2.5.2.7 0l1.1-1c.2-.2.2-.5 0-.7C12.5 2 10.1 1 7.5 1z"/></svg>
              <div style={{ position: 'relative', width: 24, height: 11, border: '1px solid rgba(255,255,255,.5)', borderRadius: 3, padding: 1 }}>
                <div style={{ width: '80%', height: '100%', background: '#fff', borderRadius: 1 }}/>
              </div>
            </div>
          </div>

          {/* Dynamic Island */}
          <div style={{
            position: 'absolute', top: 10, left: '50%',
            transform: 'translateX(-50%)',
            width: 118, height: 34, borderRadius: 20,
            background: '#000',
            zIndex: 11
          }}/>

          {/* TikTok top tabs */}
          <div style={{
            position: 'absolute', top: 52, left: 0, right: 0,
            display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 22,
            zIndex: 5,
            fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, color: '#fff',
            textShadow: '0 1px 8px rgba(0,0,0,.8)'
          }}>
            <span style={{ color: 'rgba(255,255,255,.7)' }}>{t('Folge ich','Obserwuję')}</span>
            <span style={{ position: 'relative' }}>
              {t('Für dich','Dla ciebie')}
              <span style={{ position: 'absolute', bottom: -6, left: '50%', transform: 'translateX(-50%)', width: 20, height: 3, borderRadius: 2, background: '#fff' }}/>
            </span>
          </div>

          {/* Search */}
          <div style={{ position: 'absolute', top: 52, right: 14, zIndex: 5 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,.7))' }}>
              <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
            </svg>
          </div>

          {/* RIGHT ACTION RAIL */}
          <div style={{
            position: 'absolute', right: 10, bottom: 110,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18,
            zIndex: 6
          }}>
            <div style={{ position: 'relative' }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%',
                border: '2px solid #fff',
                background: 'linear-gradient(135deg,#D4AF37,#8a6f1a)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                overflow: 'hidden',
                boxShadow: '0 2px 8px rgba(0,0,0,.5)'
              }}>
                <img src="assets/jk-media-logo-white.png" alt="" style={{ width: '72%', height: '72%', objectFit: 'contain' }}/>
              </div>
              <div style={{
                position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)',
                width: 20, height: 20, borderRadius: '50%',
                background: '#FE2C55',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontSize: 16, fontWeight: 700, lineHeight: 1,
                boxShadow: '0 2px 6px rgba(254,44,85,.6)'
              }}>+</div>
            </div>
            <TikTokAction icon={<svg width="30" height="30" viewBox="0 0 24 24" fill="#FE2C55" stroke="#fff" strokeWidth=".6"><path d="M12 21s-7-4.5-9.5-9C.8 8.5 2 5 5.5 5c2 0 3.5 1 4.5 2.5C11 6 12.5 5 14.5 5 18 5 19.2 8.5 17.5 12c-2.5 4.5-9.5 9-9.5 9z" transform="translate(2 0)"/></svg>} label="12.4K"/>
            <TikTokAction icon={<svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M12 2C6.5 2 2 6 2 11c0 2.5 1.1 4.7 3 6.3V22l3.8-2.2c1 .3 2.1.5 3.2.5 5.5 0 10-4 10-9s-4.5-9.3-10-9.3z"/></svg>} label="847"/>
            <TikTokAction icon={<svg width="28" height="28" viewBox="0 0 24 24" fill="#FFD700" stroke="#fff" strokeWidth=".5"><path d="M5 3h14v18l-7-4-7 4V3z"/></svg>} label="1.2K"/>
            <TikTokAction icon={<svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M14 3v4l-4 .2C6 7.5 3.5 10.5 3 15c2.5-3 6-4 11-4v4l8-7-8-5z"/></svg>} label="203"/>
            <div style={{
              width: 38, height: 38, borderRadius: '50%',
              background: 'radial-gradient(circle at center, #f0f0f0 8%, #1a1a1a 8%, #1a1a1a 30%, #2a2a2a 70%, #1a1a1a 100%)',
              border: '2px solid #2a2a2a',
              boxShadow: '0 2px 6px rgba(0,0,0,.6)',
              animation: 'spinDisc 3.5s linear infinite',
              backgroundImage: 'repeating-radial-gradient(circle at center, transparent 0 2px, rgba(255,255,255,.04) 2px 3px)'
            }}/>
          </div>

          {/* BOTTOM caption */}
          <div style={{
            position: 'absolute', left: 14, right: 70, bottom: 62,
            zIndex: 5
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 700, color: '#fff', textShadow: '0 1px 6px rgba(0,0,0,.8)', marginBottom: 6 }}>
              @jk_media <span style={{ fontWeight: 500, fontSize: 12, opacity: .9 }}>· {t('folgen','obserwuj')}</span>
            </div>
            <div style={{ fontSize: 12, color: '#fff', lineHeight: 1.35, textShadow: '0 1px 6px rgba(0,0,0,.8)', marginBottom: 8 }}>
              {t('Wie Handwerker in Guben durchstarten 🚀 ','Jak rzemieślnicy w Guben ruszają 🚀 ')}
              <span style={{ fontWeight: 600 }}>#socialmedia</span>{' '}
              <span style={{ fontWeight: 600 }}>#gubin</span>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#fff', textShadow: '0 1px 4px rgba(0,0,0,.8)', fontWeight: 500 }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="#fff"><path d="M9 18V5l12-2v13M9 18c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3zm12-2c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3z"/></svg>
              {t('Original Sound · JK Media','Oryginalny dźwięk · JK Media')}
            </div>
          </div>

          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0, height: 180,
            background: 'linear-gradient(180deg, transparent, rgba(0,0,0,.55))',
            pointerEvents: 'none', zIndex: 4
          }}/>

          {/* TikTok bottom nav */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0, height: 46,
            display: 'flex', alignItems: 'center', justifyContent: 'space-around',
            background: 'rgba(0,0,0,.35)',
            zIndex: 5
          }}>
            {[{n:t('Start','Start'), active:true},{n:t('Freunde','Znajomi')},{plus:true},{n:t('Inbox','Skrzynka')},{n:t('Profil','Profil')}].map((item,i) => (
              <div key={i} style={{ fontSize: 9, fontWeight: 600, color: item.active ? '#fff' : 'rgba(255,255,255,.65)' }}>
                {item.plus ? (
                  <div style={{ width: 36, height: 22, borderRadius: 6, background: 'linear-gradient(90deg,#25F4EE 0%,#fff 50%,#FE2C55 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#000', fontWeight: 800, fontSize: 16 }}>+</div>
                ) : item.n}
              </div>
            ))}
          </div>

          <div style={{
            position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
            width: 120, height: 4, borderRadius: 2, background: '#fff',
            zIndex: 12, opacity: .9
          }}/>
          </div>
        </div>

        {/* Front glare */}
        <div style={{
          position: 'absolute', inset: BEZEL, borderRadius: INNER_RADIUS,
          background: 'linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 25%, transparent 75%, rgba(255,255,255,.08) 100%)',
          pointerEvents: 'none',
          zIndex: DEPTH_STACK + 3
        }}/>
      </div>

      <style>{`
        @keyframes phoneFloat {
          0%,100% { transform: rotate(-4deg) translateY(0); }
          50%     { transform: rotate(-4deg) translateY(-6px); }
        }
        @keyframes spinDisc { to { transform: rotate(360deg); } }
        @keyframes haloPulse {
          0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1); }
          50%     { opacity: 1;  transform: translate(-50%,-50%) scale(1.08); }
        }
        @keyframes shockwave {
          0%   { width: 40px; height: 40px; opacity: 1; border-width: 3px; }
          100% { width: 700px; height: 700px; opacity: 0; border-width: 1px; }
        }
        @keyframes powerOnFlash {
          0%   { opacity: 0; }
          40%  { opacity: 1; }
          100% { opacity: 0; }
        }
        @keyframes scanline {
          0%   { transform: translateY(-100%); opacity: 0; }
          20%  { opacity: 1; }
          100% { transform: translateY(100%); opacity: 0; }
        }
        ${[...Array(14)].map((_,i) => {
          const angle = (i / 14) * Math.PI * 2;
          const dist = 180 + (i % 3) * 40;
          const dx = Math.cos(angle) * dist;
          const dy = Math.sin(angle) * dist;
          return `@keyframes sparkFly${i} {
            0%   { transform: translate(-50%,-50%) scale(.3); opacity: 0; }
            15%  { opacity: 1; }
            100% { transform: translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px)) scale(0); opacity: 0; }
          }`;
        }).join('\n')}
      `}</style>
    </div>
  );
}

// Helper: hex shade
function shade(v) {
  const h = Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2,'0');
  return `#${h}${h}${h}`;
}

function TikTokAction({ icon, label }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
      <div style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,.6))' }}>{icon}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, color: '#fff', textShadow: '0 1px 4px rgba(0,0,0,.8)' }}>{label}</div>
    </div>
  );
}

window.IPhoneMobile = IPhoneMobile;
