// ═══════════════════════════════════════════
// LEFT SIDE — The Competitor: Chaos & Pain
// ═══════════════════════════════════════════

const CL = {
  bg: '#F2F0EC',
  surface: '#FFFFFF',
  border: '#D4D0C8',
  text: '#222',
  textMuted: '#888',
  red: '#E53935',
  orange: '#F57C00',
  wire: '#C8C4BC',
  popup: '#FFFFFF',
};

// Mini browser chrome for left side
function LeftBrowser({ children, url, shake }) {
  return (
    <div style={{
      width: 540, height: 540, borderRadius: 10, overflow: 'hidden',
      background: CL.surface, border: `1px solid ${CL.border}`,
      boxShadow: '0 8px 30px rgba(0,0,0,0.1)',
      animation: shake ? 'shake 0.15s linear infinite' : 'none',
    }}>
      <div style={{
        height: 32, background: '#E8E6E0', display: 'flex', alignItems: 'center',
        padding: '0 10px', gap: 6, borderBottom: `1px solid ${CL.border}`,
      }}>
        <div style={{ display: 'flex', gap: 5 }}>
          {['#FF5F57','#FEBC2E','#28C840'].map((c,i) => (
            <div key={i} style={{ width: 9, height: 9, borderRadius: 5, background: c, opacity: 0.7 }}/>
          ))}
        </div>
        <div style={{
          flex: 1, marginLeft: 10, height: 20, borderRadius: 4,
          background: '#FFF', border: `1px solid ${CL.border}`,
          display: 'flex', alignItems: 'center', padding: '0 8px',
          fontFamily: 'DM Sans', fontSize: 10, color: CL.textMuted,
        }}>{url}</div>
      </div>
      <div style={{ position: 'relative', height: 508, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

// Wireframe layout that changes chaotically
function ChaosWireframe({ variant }) {
  const layouts = [
    // Layout 0: basic
    () => (
      <div style={{ padding: 20 }}>
        <div style={{ height: 10, width: '60%', background: CL.wire, borderRadius: 4, marginBottom: 12 }}/>
        <div style={{ height: 8, width: '40%', background: CL.wire, borderRadius: 4, marginBottom: 24 }}/>
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ flex: 1, height: 80, background: CL.wire, borderRadius: 6, opacity: 0.5 }}/>
          <div style={{ flex: 1, height: 80, background: CL.wire, borderRadius: 6, opacity: 0.5 }}/>
        </div>
        <div style={{ height: 8, width: '80%', background: CL.wire, borderRadius: 4, marginTop: 20 }}/>
      </div>
    ),
    // Layout 1: sidebar
    () => (
      <div style={{ display: 'flex', height: '100%' }}>
        <div style={{ width: 100, background: '#E8E4DC', padding: 12 }}>
          {[50,40,60,35,55].map((w,i) => (
            <div key={i} style={{ height: 7, width: `${w}%`, background: CL.wire, borderRadius: 3, marginBottom: 10 }}/>
          ))}
        </div>
        <div style={{ flex: 1, padding: 16 }}>
          <div style={{ height: 12, width: '70%', background: CL.wire, borderRadius: 4, marginBottom: 16 }}/>
          <div style={{ height: 100, background: CL.wire, borderRadius: 6, opacity: 0.4, marginBottom: 12 }}/>
          <div style={{ height: 8, width: '90%', background: CL.wire, borderRadius: 4, marginBottom: 8 }}/>
          <div style={{ height: 8, width: '65%', background: CL.wire, borderRadius: 4 }}/>
        </div>
      </div>
    ),
    // Layout 2: cards grid
    () => (
      <div style={{ padding: 16 }}>
        <div style={{ height: 10, width: '50%', background: CL.wire, borderRadius: 4, marginBottom: 16 }}/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          {[0,1,2,3,4,5].map(i => (
            <div key={i} style={{ height: 55, background: CL.wire, borderRadius: 5, opacity: 0.45 }}/>
          ))}
        </div>
      </div>
    ),
    // Layout 3: big header
    () => (
      <div>
        <div style={{ height: 120, background: CL.wire, opacity: 0.3 }}/>
        <div style={{ padding: 16 }}>
          <div style={{ height: 11, width: '80%', background: CL.wire, borderRadius: 4, marginBottom: 10 }}/>
          <div style={{ height: 8, width: '50%', background: CL.wire, borderRadius: 4, marginBottom: 16 }}/>
          <div style={{ display: 'flex', gap: 10 }}>
            <div style={{ flex: 2, height: 70, background: CL.wire, borderRadius: 5, opacity: 0.5 }}/>
            <div style={{ flex: 1, height: 70, background: CL.wire, borderRadius: 5, opacity: 0.5 }}/>
          </div>
        </div>
      </div>
    ),
    // Layout 4: messy
    () => (
      <div style={{ padding: 12 }}>
        <div style={{ display:'flex', gap: 8, marginBottom: 14 }}>
          <div style={{ height: 8, width: 60, background: CL.wire, borderRadius: 3 }}/>
          <div style={{ height: 8, width: 50, background: CL.wire, borderRadius: 3 }}/>
          <div style={{ height: 8, width: 70, background: CL.wire, borderRadius: 3 }}/>
          <div style={{ flex:1 }}/>
          <div style={{ height: 8, width: 40, background: CL.wire, borderRadius: 3 }}/>
        </div>
        <div style={{ height: 90, background: CL.wire, borderRadius: 6, opacity: 0.3, marginBottom: 12 }}/>
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{ flex: 1, height: 60, background: CL.wire, borderRadius: 5, opacity: 0.5 }}/>
          <div style={{ flex: 1, height: 60, background: CL.wire, borderRadius: 5, opacity: 0.5 }}/>
          <div style={{ flex: 1, height: 60, background: CL.wire, borderRadius: 5, opacity: 0.5 }}/>
        </div>
        <div style={{ height: 8, width: '70%', background: CL.wire, borderRadius: 4, marginTop: 14 }}/>
        <div style={{ height: 8, width: '45%', background: CL.wire, borderRadius: 4, marginTop: 8 }}/>
      </div>
    ),
  ];
  return layouts[variant % layouts.length]();
}

// Cookie popup
function CookiePopup({ visible }) {
  if (!visible) return null;
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: '#FFF', padding: '14px 16px',
      borderTop: '2px solid #E0DCD4',
      boxShadow: '0 -4px 20px rgba(0,0,0,0.08)',
      display: 'flex', alignItems: 'center', gap: 10,
      animation: 'pulse 1.5s ease infinite',
    }}>
      <span style={{ fontSize: 18 }}>🍪</span>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: 'DM Sans', fontSize: 10, fontWeight: 600, color: CL.text, marginBottom: 2 }}>
          Ce site utilise des cookies
        </div>
        <div style={{ fontFamily: 'DM Sans', fontSize: 8, color: CL.textMuted }}>
          Acceptez-vous les 847 trackers ?
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6 }}>
        <div style={{ padding: '4px 10px', borderRadius: 4, background: '#28A745', fontFamily: 'DM Sans', fontSize: 8, fontWeight: 600, color: '#FFF' }}>Tout accepter</div>
        <div style={{ padding: '4px 10px', borderRadius: 4, border: '1px solid #ccc', fontFamily: 'DM Sans', fontSize: 8, color: CL.textMuted }}>Refuser</div>
      </div>
    </div>
  );
}

// Price tag that inflates
function PriceTag({ price, prev, flash }) {
  return (
    <div style={{
      position: 'absolute', top: 14, right: 14,
      background: flash ? '#FFF3E0' : '#FFF',
      border: `2px solid ${flash ? CL.orange : CL.border}`,
      borderRadius: 8, padding: '8px 14px',
      boxShadow: flash ? '0 0 16px rgba(245,124,0,0.25)' : '0 2px 8px rgba(0,0,0,0.06)',
      textAlign: 'right',
      transition: 'all 0.3s',
    }}>
      {prev && (
        <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: CL.red, textDecoration: 'line-through', marginBottom: 2 }}>
          CHF {prev}.-
        </div>
      )}
      <div style={{ fontFamily: 'DM Sans', fontSize: 20, fontWeight: 800, color: flash ? CL.orange : CL.text }}>
        CHF {price}.-
      </div>
      <div style={{ fontFamily: 'DM Sans', fontSize: 7, color: CL.textMuted }}>
        *hors options & maintenance
      </div>
    </div>
  );
}

// Loading spinner overlay
function LoadingOverlay({ visible, text }) {
  if (!visible) return null;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'rgba(255,255,255,0.85)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12,
    }}>
      <div style={{
        width: 32, height: 32, border: '3px solid #E0DCD4', borderTopColor: CL.orange,
        borderRadius: '50%', animation: 'spin 0.8s linear infinite',
      }}/>
      <div style={{ fontFamily: 'DM Sans', fontSize: 11, color: CL.textMuted }}>{text || 'Chargement...'}</div>
    </div>
  );
}

// Error popup
function ErrorPopup({ visible }) {
  if (!visible) return null;
  return (
    <div style={{
      position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
      background: '#FFF', border: `2px solid ${CL.red}`, borderRadius: 10,
      padding: '16px 20px', boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
      textAlign: 'center', width: 240,
    }}>
      <div style={{ fontSize: 24, marginBottom: 8 }}>⚠️</div>
      <div style={{ fontFamily: 'DM Sans', fontSize: 11, fontWeight: 600, color: CL.red, marginBottom: 4 }}>
        Erreur 500
      </div>
      <div style={{ fontFamily: 'DM Sans', fontSize: 9, color: CL.textMuted, marginBottom: 10 }}>
        Une erreur est survenue. Réessayez plus tard.
      </div>
      <div style={{ padding: '5px 14px', borderRadius: 5, background: CL.red, fontFamily: 'DM Sans', fontSize: 9, fontWeight: 600, color: '#FFF', display: 'inline-block' }}>
        Réessayer
      </div>
    </div>
  );
}

// Notification badge spam
function NotifSpam({ count }) {
  if (count <= 0) return null;
  return (
    <div style={{ position: 'absolute', top: 50, left: 14, display: 'flex', flexDirection: 'column', gap: 4 }}>
      {Array.from({ length: Math.min(count, 4) }).map((_, i) => (
        <div key={i} style={{
          padding: '5px 10px', borderRadius: 6,
          background: i === 0 ? '#FFF3E0' : i === 1 ? '#E3F2FD' : '#FFF',
          border: `1px solid ${i === 0 ? '#FFB74D' : '#CCC'}`,
          fontFamily: 'DM Sans', fontSize: 8, color: CL.textMuted,
          boxShadow: '0 2px 6px rgba(0,0,0,0.06)',
          opacity: 1 - i * 0.15,
        }}>
          {['🔔 Upgrade to Pro!', '📧 Newsletter signup', '💬 Chat avec nous!', '⭐ Laissez un avis'][i]}
        </div>
      ))}
    </div>
  );
}

// ─── LEFT SCENE COMPOSITE ───
function LeftSide({ t, duration }) {
  const p = t / duration; // 0→1

  // Wireframe variant changes rapidly
  const wireVariant = Math.floor(p * 18) % 5;
  const isShaking = (p > 0.15 && p < 0.18) || (p > 0.42 && p < 0.45) || (p > 0.68 && p < 0.72);

  // Price inflation
  let price = 599, prev = null, priceFlash = false;
  if (p > 0.2) { price = 1299; prev = 599; priceFlash = p < 0.24; }
  if (p > 0.4) { price = 1999; prev = 1299; priceFlash = p > 0.4 && p < 0.44; }
  if (p > 0.55) { price = 3499; prev = 1999; priceFlash = p > 0.55 && p < 0.59; }
  if (p > 0.72) { price = 5999; prev = 3499; priceFlash = p > 0.72 && p < 0.76; }
  if (p > 0.85) { price = 7999; prev = 5999; priceFlash = p > 0.85 && p < 0.89; }

  // Cookie popup
  const showCookie = p > 0.08 && p < 0.35;

  // Loading phases
  const showLoading = (p > 0.32 && p < 0.38) || (p > 0.6 && p < 0.66);
  const loadText = p > 0.6 ? 'Mise à jour du devis...' : 'Chargement du template...';

  // Error
  const showError = p > 0.45 && p < 0.52;

  // Notif spam
  const notifCount = p > 0.5 ? Math.min(Math.floor((p - 0.5) * 12), 4) : 0;

  // Final state — "done" but messy
  const finalDone = p > 0.92;

  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'center', background: '#EDEAE4', position: 'relative',
    }}>
      {/* Label */}
      <div style={{
        position: 'absolute', top: 24, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'DM Sans', fontSize: 13, fontWeight: 700, color: '#999',
        textTransform: 'uppercase', letterSpacing: 3,
      }}>
        Le site classique
      </div>

      <LeftBrowser url="https://builder-generique.com" shake={isShaking}>
        <div style={{ position: 'relative', height: '100%' }}>
          <ChaosWireframe variant={wireVariant} />
          <PriceTag price={price} prev={prev} flash={priceFlash} />
          <CookiePopup visible={showCookie} />
          <LoadingOverlay visible={showLoading} text={loadText} />
          <ErrorPopup visible={showError} />
          <NotifSpam count={notifCount} />

          {finalDone && (
            <div style={{
              position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.6)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{
                fontFamily: 'DM Sans', fontSize: 14, fontWeight: 700, color: CL.orange,
                textAlign: 'center', lineHeight: 1.5,
              }}>
                « Terminé »<br/>
                <span style={{ fontSize: 26, color: CL.red, fontWeight: 800 }}>CHF 7'999.-</span><br/>
                <span style={{ fontSize: 9, color: CL.textMuted }}>+ 49.-/mois d'hébergement<br/>+ 99.- nom de domaine<br/>+ frais de maintenance</span>
              </div>
            </div>
          )}
        </div>
      </LeftBrowser>

      {/* Stress indicators */}
      <div style={{
        marginTop: 16, fontFamily: 'JetBrains Mono', fontSize: 11, color: CL.red,
        opacity: p > 0.2 ? 1 : 0, textAlign: 'center',
      }}>
        {p < 0.35 ? '⏱ Temps passé : 1 semaine...' : p < 0.6 ? '⏱ Temps passé : 3 semaines...' : '⏱ Temps passé : 4 mois...'}
      </div>
    </div>
  );
}

window.LeftSide = LeftSide;