// Two iPhone mockups for the hero — Piece "Premium Glass" style.
// LEFT: Recording — "Sam, take the floor" with live waveform.
// RIGHT: Weak Points — final round summary with editorial cards.

var __T = window.__LANDING_T || {};

function MockStatusBar({ dark = false }) {
  const color = dark ? '#FFFBF2' : '#2A2520';
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '14px 24px 6px', color, fontSize: 13, fontWeight: 600,
      fontFamily: '-apple-system, "Inter Tight", system-ui',
    }}>
      <span>9:41</span>
      <div style={{ display: 'flex', gap: 5, alignItems: 'center', opacity: 0.9 }}>
        <svg width="15" height="10" viewBox="0 0 19 12"><rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill={color}/><rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill={color}/><rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill={color}/><rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill={color}/></svg>
        <svg width="18" height="10" viewBox="0 0 27 13"><rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={color} strokeOpacity="0.5" fill="none"/><rect x="2" y="2" width="18" height="9" rx="2" fill={color}/></svg>
      </div>
    </div>
  );
}

function PhoneFrame({ children, width = 292, height = 602, tilt = 0, style = {} }) {
  return (
    <div style={{
      width, height, borderRadius: 44, position: 'relative',
      background: '#1a1510',
      boxShadow: `
        0 2px 6px rgba(43, 28, 38, 0.08),
        0 40px 80px rgba(120, 90, 40, 0.22),
        0 0 0 1.2px rgba(255,255,255,0.12),
        0 0 0 9px #1e1812,
        0 0 0 10px rgba(168,120,56,0.18)
      `,
      transform: `rotate(${tilt}deg)`,
      ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 4, borderRadius: 40, overflow: 'hidden',
      }}>
        {/* dynamic island */}
        <div style={{
          position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
          width: 90, height: 26, borderRadius: 16, background: '#000', zIndex: 50,
        }} />
        <div style={{ position: 'relative', zIndex: 10, height: '100%' }}>
          {children}
        </div>
        {/* home indicator */}
        <div style={{
          position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
          width: 110, height: 4, borderRadius: 2, background: 'rgba(42,37,32,0.25)', zIndex: 60,
        }} />
      </div>
    </div>
  );
}

// ─────────── LEFT: Recording ───────────
function PhoneA() {
  const stageBg = `
    radial-gradient(120% 70% at 20% 0%,   #EBD9B4 0%, transparent 55%),
    radial-gradient(100% 60% at 100% 100%, #DEE2CB 0%, transparent 55%),
    #F3EBDB
  `;

  // Live waveform bars — wide, gold, varying heights
  const bars = Array.from({ length: 78 }, (_, i) => {
    const v = Math.abs(
      Math.sin(i * 0.34) * 0.55 +
      Math.sin(i * 1.21 + 0.7) * 0.32 +
      Math.cos(i * 0.18 + 1.4) * 0.28
    );
    return Math.max(0.08, Math.min(1, v));
  });

  return (
    <PhoneFrame tilt={-3.2}>
      <div style={{ height: '100%', background: stageBg, display: 'flex', flexDirection: 'column' }}>
        <MockStatusBar />

        {/* Brand bar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 18px 0' }}>
          <button style={{
            width: 32, height: 32, borderRadius: 16, border: 'none',
            background: 'rgba(255,251,242,0.85)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.9), 0 4px 10px rgba(120,90,40,0.10)',
            cursor: 'pointer',
          }}>
            <svg width="9" height="11" viewBox="0 0 9 11" fill="none">
              <path d="M6 2L2 5.5l4 3.5" stroke="#2A2520" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
            </svg>
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <img src="assets/olive-branch-transparent.png" alt="" style={{ width: 16, height: 16, objectFit: 'contain' }} />
            <span style={{
              fontFamily: 'Fraunces, serif', fontSize: 17, color: '#2A2520',
              fontVariationSettings: '"opsz" 28, "SOFT" 60, "wght" 500', letterSpacing: -0.2,
            }}>
              Piece
            </span>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 4,
            padding: '4px 10px 4px 6px', borderRadius: 14,
            background: 'rgba(255,251,242,0.72)',
            backdropFilter: 'blur(22px) saturate(170%)',
            border: '0.5px solid rgba(255,255,255,0.80)',
            boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.9)',
          }}>
            <img src="assets/olive-branch-transparent.png" alt="" style={{ width: 12, height: 12, objectFit: 'contain' }} />
            <span style={{
              fontFamily: 'Inter Tight, sans-serif', fontSize: 11, fontWeight: 600, color: '#2A2520',
            }}>3</span>
          </div>
        </div>

        {/* S avatar */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
          <div style={{
            width: 88, height: 88, borderRadius: 44,
            background: 'rgba(255,251,242,0.95)',
            border: '0.5px solid rgba(168,120,56,0.18)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.9), 0 18px 36px rgba(120,90,40,0.18)',
          }}>
            <span style={{
              fontFamily: 'Fraunces, serif', fontStyle: 'italic',
              fontSize: 38, color: '#A87838',
              fontVariationSettings: '"opsz" 56, "SOFT" 100, "wght" 500',
            }}>S</span>
          </div>
        </div>

        {/* Headline */}
        <div style={{ textAlign: 'center', marginTop: 22, padding: '0 18px' }}>
          <div style={{
            fontFamily: 'Fraunces, serif', fontSize: 26, lineHeight: 1.1,
            letterSpacing: -0.7, color: '#2A2520',
            fontVariationSettings: '"opsz" 56, "SOFT" 50, "wght" 400',
          }}>
            <em style={{
              fontStyle: 'italic', color: '#A87838',
              fontVariationSettings: '"opsz" 56, "SOFT" 100, "wght" 400',
            }}>{__T.takeTheFloorName || 'Sam,'}</em> {__T.takeTheFloor || 'take the floor'}
          </div>
          <div style={{
            marginTop: 8,
            fontFamily: 'Inter Tight, sans-serif', fontSize: 12, color: '#6B6055',
          }}>
            <em style={{ fontStyle: 'italic', color: '#2A2520', fontWeight: 500 }}>0:06</em>{' '}{__T.recorded || 'recorded'}
          </div>
        </div>

        {/* Waveform */}
        <div style={{ padding: '32px 22px 0' }}>
          <svg viewBox="0 0 280 60" preserveAspectRatio="none" style={{ width: '100%', height: 56, display: 'block' }}>
            {bars.map((v, i) => {
              const x = (i / bars.length) * 280;
              const h = Math.max(2, v * 50);
              return (
                <rect key={i} x={x} y={30 - h / 2} width={1.7} height={h} rx={0.85}
                  fill="#A87838" opacity={0.85}/>
              );
            })}
          </svg>
        </div>

        {/* Coming up chip */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 28 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            padding: '7px 14px 7px 12px', borderRadius: 9999,
            background: 'rgba(138,150,99,0.18)',
            border: '0.5px solid rgba(138,150,99,0.28)',
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 3, background: '#556241' }} />
            <span style={{
              fontFamily: 'Fraunces, serif', fontStyle: 'italic',
              fontSize: 12, color: '#556241', letterSpacing: -0.1,
              fontVariationSettings: '"opsz" 24, "SOFT" 80, "wght" 500',
            }}>{__T.comingUpName || 'Morgan,'} {__T.comingUp || 'coming up'}</span>
          </div>
        </div>

        <div style={{ flex: 1 }} />

        {/* Bottom controls */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 28px 28px',
        }}>
          {/* restart */}
          <button style={{
            width: 38, height: 38, borderRadius: 19, border: 'none',
            background: 'rgba(255,251,242,0.55)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.7)',
            cursor: 'pointer',
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M11.5 7a4.5 4.5 0 1 1-1.32-3.18" stroke="#6B6055" strokeWidth="1.4" strokeLinecap="round" fill="none"/>
              <path d="M11 1.5v3h-3" stroke="#6B6055" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
            </svg>
          </button>

          {/* stop button */}
          <div style={{
            width: 64, height: 64, borderRadius: 32,
            background: '#A44A3E',
            boxShadow: '0 12px 32px rgba(164, 74, 62, 0.40), inset 1px 1px 0 rgba(255,255,255,0.20)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{ width: 18, height: 18, borderRadius: 4, background: '#FFFBF2' }} />
          </div>

          {/* send */}
          <button style={{
            width: 38, height: 38, borderRadius: 19, border: 'none',
            background: 'rgba(255,251,242,0.55)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.7)',
            cursor: 'pointer',
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2.5 2.5l9 4.5-9 4.5 1.6-4.5L2.5 2.5z" fill="#6B6055"/>
            </svg>
          </button>
        </div>
      </div>
    </PhoneFrame>
  );
}

// ─────────── RIGHT: Weak Points ───────────
function PhoneB() {
  const stageBg = `
    radial-gradient(120% 70% at 80% 0%, #EBD9B4 0%, transparent 55%),
    radial-gradient(100% 60% at 0% 100%, #DEE2CB 0%, transparent 55%),
    #F3EBDB
  `;

  const weakPoints = [
    { quote: __T.weakPoint1Quote || 'my phone died.', detail: __T.weakPoint1Detail || 'Tragic battery loss; communication also flatlined.' },
    { quote: __T.weakPoint2Quote || 'I literally could not leave.', detail: __T.weakPoint2Detail || 'Couldn\'t leave, yet couldn\'t borrow a phone—Schrödinger\'s workplace.' },
  ];

  return (
    <PhoneFrame tilt={3.2}>
      <div style={{ height: '100%', background: stageBg, display: 'flex', flexDirection: 'column' }}>
        <MockStatusBar />

        {/* Brand bar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 18px 0' }}>
          <div style={{ width: 32 }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <img src="assets/olive-branch-transparent.png" alt="" style={{ width: 16, height: 16, objectFit: 'contain' }} />
            <span style={{
              fontFamily: 'Fraunces, serif', fontSize: 17, color: '#2A2520',
              fontVariationSettings: '"opsz" 28, "SOFT" 60, "wght" 500', letterSpacing: -0.2,
            }}>
              Piece
            </span>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 4,
            padding: '4px 10px 4px 6px', borderRadius: 14,
            background: 'rgba(255,251,242,0.72)',
            backdropFilter: 'blur(22px) saturate(170%)',
            border: '0.5px solid rgba(255,255,255,0.80)',
            boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.9)',
          }}>
            <img src="assets/olive-branch-transparent.png" alt="" style={{ width: 12, height: 12, objectFit: 'contain' }} />
            <span style={{
              fontFamily: 'Inter Tight, sans-serif', fontSize: 11, fontWeight: 600, color: '#2A2520',
            }}>3</span>
          </div>
        </div>

        {/* Progress segments */}
        <div style={{ display: 'flex', gap: 8, padding: '14px 22px 0' }}>
          {[0, 1, 2, 3].map(i => (
            <div key={i} style={{
              flex: 1, height: 2, borderRadius: 2,
              background: '#2A2520',
            }} />
          ))}
        </div>

        {/* Avatar + Weak points chip */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '20px 22px 0' }}>
          <div style={{
            width: 40, height: 40, borderRadius: 20,
            background: 'rgba(255,251,242,0.85)',
            border: '1px solid rgba(168,120,56,0.35)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.9), 0 4px 10px rgba(120,90,40,0.10)',
          }}>
            <span style={{
              fontFamily: 'Fraunces, serif', fontSize: 16, color: '#2A2520',
              fontVariationSettings: '"opsz" 24, "SOFT" 80, "wght" 500',
            }}>M</span>
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            padding: '6px 12px 6px 10px', borderRadius: 9999,
            background: 'rgba(164,74,62,0.12)',
            border: '0.5px solid rgba(164,74,62,0.22)',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: '#A44A3E' }} />
            <span style={{
              fontFamily: 'Inter Tight, sans-serif', fontSize: 9.5, fontWeight: 700,
              letterSpacing: 1.4, textTransform: 'uppercase', color: '#A44A3E',
            }}>{__T.weakPoints || 'Weak points'}</span>
          </div>
        </div>

        {/* Round label */}
        <div style={{
          padding: '14px 22px 0', textAlign: 'left',
          fontFamily: 'Inter Tight, sans-serif', fontSize: 10.5, fontWeight: 500,
          color: '#6B6055', letterSpacing: 0.1,
        }}>
          {__T.roundLabel || 'Round 4 of 4 · Weak points'}
        </div>

        {/* Editorial headline */}
        <div style={{ padding: '6px 22px 0' }}>
          <div style={{
            fontFamily: 'Fraunces, serif', fontSize: 28, lineHeight: 1.05,
            letterSpacing: -0.8, color: '#2A2520', textAlign: 'left',
            fontVariationSettings: '"opsz" 56, "SOFT" 50, "wght" 400',
          }}>
            {__T.notAllHeadline || 'But that\'s not all,'}<br/>
            <em style={{
              fontStyle: 'italic', color: '#A44A3E',
              fontVariationSettings: '"opsz" 56, "SOFT" 100, "wght" 400',
            }}>{__T.notAllName || 'Michael'}</em>
          </div>
        </div>

        {/* Weak point cards */}
        <div style={{ padding: '18px 18px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {weakPoints.map((wp, i) => (
            <div key={i} style={{
              display: 'flex', gap: 10, alignItems: 'flex-start',
              padding: '12px 14px',
              background: 'rgba(255,251,242,0.72)',
              backdropFilter: 'blur(22px) saturate(170%)',
              border: '0.5px solid rgba(255,255,255,0.80)',
              borderRadius: 14,
              boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.9), 0 6px 18px rgba(120,90,40,0.08)',
            }}>
              <div style={{
                width: 18, height: 18, borderRadius: 9, flexShrink: 0,
                background: '#A44A3E', color: '#FFFBF2',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Inter Tight, sans-serif', fontSize: 12, fontWeight: 700,
                marginTop: 1,
              }}>!</div>
              <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
                <div style={{
                  fontFamily: 'Fraunces, serif', fontStyle: 'italic',
                  fontSize: 13.5, lineHeight: 1.25, color: '#2A2520',
                  fontVariationSettings: '"opsz" 24, "SOFT" 80, "wght" 500',
                  marginBottom: 4, textAlign: 'left',
                }}>
                  &ldquo;{wp.quote}&rdquo;
                </div>
                <div style={{
                  fontFamily: 'Inter Tight, sans-serif',
                  fontSize: 11, lineHeight: 1.4, color: '#6B6055',
                  textAlign: 'left',
                }}>
                  {wp.detail}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ flex: 1 }} />

        {/* Go to verdict CTA */}
        <div style={{ padding: '0 18px 8px' }}>
          <button style={{
            width: '100%', padding: '14px 18px', borderRadius: 16, border: 'none',
            background: '#A87838', color: '#FFFBF2',
            fontFamily: 'Fraunces, serif', fontSize: 15, fontWeight: 500,
            fontVariationSettings: '"opsz" 24, "SOFT" 80, "wght" 500',
            letterSpacing: -0.1, position: 'relative',
            boxShadow: '0 12px 32px rgba(168, 120, 56, 0.40)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
          }}>
            <span>{__T.goToVerdict || 'Go to verdict'}</span>
            <span style={{
              position: 'absolute', right: 14,
              width: 22, height: 22, borderRadius: 11,
              background: 'rgba(255,251,242,0.18)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                <path d="M2 5h6m0 0L5 2m3 3L5 8" stroke="#FFFBF2" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
          </button>
        </div>

        {/* Replay the round */}
        <div style={{
          textAlign: 'center', padding: '10px 0 22px',
          fontFamily: 'Inter Tight, sans-serif', fontSize: 9.5, fontWeight: 600,
          letterSpacing: 1.6, textTransform: 'uppercase', color: '#6B6055',
        }}>
          {__T.replayTheRound || 'Replay the round'}
        </div>
      </div>
    </PhoneFrame>
  );
}

window.PhoneA = PhoneA;
window.PhoneB = PhoneB;