// ═══════════════════════════════════════════
// RIGHT SIDE — Wiboo: Calm & Confident
// ═══════════════════════════════════════════

const CR = {
  bg: '#0a0a0a',
  surface: '#18181E',
  wire: '#3A3A4A',
  accent: '#6C5CE7',
  accentSoft: '#A29BFE',
  green: '#00D2A0',
  gold: '#B8946A',
  text: '#F0F0F5',
  textMuted: '#8888A0',
  white: '#FFFFFF',
  card: '#1E1E2A',
};

function RightBrowser({ children, url }) {
  return (
    <div style={{
      width: 540, height: 540, borderRadius: 10, overflow: 'hidden',
      background: CR.surface, border: `1px solid ${CR.wire}`,
      boxShadow: '0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04)',
    }}>
      <div style={{
        height: 32, background: CR.bg, display: 'flex', alignItems: 'center',
        padding: '0 10px', gap: 6, borderBottom: `1px solid ${CR.wire}`,
      }}>
        <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: 'rgba(255,255,255,0.06)',
          display: 'flex', alignItems: 'center', padding: '0 8px',
          fontFamily: 'DM Sans', fontSize: 10, color: CR.textMuted,
        }}>{url}</div>
      </div>
      <div style={{ position: 'relative', height: 508, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

// Smooth progress bar
function WibooProgress({ progress }) {
  return (
    <div style={{
      position: 'absolute', bottom: 14, right: 14,
      background: 'rgba(255,255,255,0.04)',
      border: `1px solid ${CR.wire}`,
      borderRadius: 8, padding: '8px 14px', width: 130,
    }}>
      <div style={{ fontFamily: 'DM Sans', fontSize: 8, color: CR.textMuted, marginBottom: 4, textTransform: 'uppercase', letterSpacing: 1 }}>
        Progression
      </div>
      <div style={{ height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.06)', overflow: 'hidden', marginBottom: 6 }}>
        <div style={{
          height: '100%', borderRadius: 2, width: `${progress * 100}%`,
          background: `linear-gradient(90deg, ${CR.accent}, ${CR.green})`,
          transition: 'width 0.5s ease',
        }}/>
      </div>
      <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 600, color: CR.green }}>
        {Math.round(progress * 100)}%
      </div>
    </div>
  );
}

// Fixed price badge
function FixedPrice() {
  return (
    <div style={{
      position: 'absolute', bottom: 14, left: 14,
      background: 'rgba(0,210,160,0.08)',
      border: `1px solid rgba(0,210,160,0.2)`,
      borderRadius: 8, padding: '8px 14px',
    }}>
      <div style={{ fontFamily: 'DM Sans', fontSize: 8, color: CR.green, marginBottom: 2, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 1 }}>
        Prix fixe
      </div>
      <div style={{ fontFamily: 'DM Sans', fontSize: 22, fontWeight: 800, color: CR.white }}>
        CHF 1'900.-
      </div>
      <div style={{ fontFamily: 'DM Sans', fontSize: 7, color: CR.textMuted }}>
        tout inclus, sans surprise
      </div>
    </div>
  );
}

// Wiboo wireframe → design → polished phases
function WibooWireframe({ progress }) {
  const p = progress;
  const fade = (delay, dur = 0.08) => {
    const v = Math.min(Math.max((p - delay) / dur, 0), 1);
    return { opacity: v, transform: `translateY(${(1 - v) * 6}px)` };
  };

  return (
    <div style={{ padding: 16 }}>
      {/* Nav */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, ...fade(0) }}>
        <img src="/assets/wiboo-logo.svg" style={{ height: 16, opacity: 0.9 }} />
        <div style={{ display: 'flex', gap: 14 }}>
          {['Accueil','Services','Projets','Contact'].map((t,i) => (
            <span key={i} style={{ fontFamily:'DM Sans', fontSize: 9, color: CR.textMuted, fontWeight: 500, ...fade(0.02 + i*0.02) }}>{t}</span>
          ))}
        </div>
        <div style={{ padding:'4px 12px', borderRadius: 10, background: CR.accent, fontFamily:'DM Sans', fontSize: 8, fontWeight: 600, color: CR.white, ...fade(0.1) }}>
          Devis gratuit
        </div>
      </div>

      {/* Hero */}
      <div style={{ display: 'flex', gap: 20, marginBottom: 20 }}>
        <div style={{ flex: 1, paddingTop: 8 }}>
          <div style={{ fontFamily:'DM Sans', fontWeight: 700, fontSize: 20, color: CR.text, lineHeight: 1.2, marginBottom: 8, ...fade(0.12) }}>
            Votre site web<br/><span style={{ color: CR.accent }}>sur mesure</span>
          </div>
          <div style={{ fontFamily:'DM Sans', fontSize: 9, color: CR.textMuted, lineHeight: 1.7, marginBottom: 14, ...fade(0.18) }}>
            Des sites performants qui<br/>convertissent vos visiteurs.
          </div>
          <div style={{ display: 'flex', gap: 8, ...fade(0.24) }}>
            <div style={{ padding:'6px 14px', borderRadius: 12, background: CR.accent, fontFamily:'DM Sans', fontSize: 9, fontWeight: 600, color: CR.white }}>
              Voir nos offres
            </div>
            <div style={{ padding:'6px 14px', borderRadius: 12, border: `1px solid ${CR.wire}`, fontFamily:'DM Sans', fontSize: 9, fontWeight: 500, color: CR.textMuted }}>
              En savoir plus
            </div>
          </div>
        </div>
        <div style={{
          width: 200, height: 130, borderRadius: 8,
          background: `linear-gradient(135deg, ${CR.accent}18, ${CR.green}18)`,
          border: `1px solid ${CR.wire}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          ...fade(0.15),
        }}>
          <div style={{ width: 40, height: 40, borderRadius: 20, background: `linear-gradient(135deg, ${CR.accent}, ${CR.green})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><polygon points="5,3 19,12 5,21"/></svg>
          </div>
        </div>
      </div>

      {/* Cards */}
      <div style={{ display: 'flex', gap: 10 }}>
        {[
          { icon: '◈', title: 'Site Vitrine', color: CR.accent },
          { icon: '◇', title: 'E-commerce', color: '#8B5CF6' },
          { icon: '△', title: 'Sur Mesure', color: CR.green },
        ].map((card, i) => (
          <div key={i} style={{
            flex: 1, padding: 12, borderRadius: 8,
            background: 'rgba(255,255,255,0.03)', border: `1px solid ${CR.wire}`,
            ...fade(0.3 + i * 0.04),
          }}>
            <div style={{
              width: 24, height: 24, borderRadius: 6,
              background: `${card.color}15`, display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 8, fontSize: 12, color: card.color,
            }}>{card.icon}</div>
            <div style={{ fontFamily:'DM Sans', fontWeight: 600, fontSize: 10, color: CR.text }}>{card.title}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Calm step indicator
function StepIndicator({ step, total }) {
  return (
    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          width: i < step ? 16 : 6, height: 6, borderRadius: 3,
          background: i < step ? CR.green : CR.wire,
          transition: 'all 0.5s ease',
        }}/>
      ))}
    </div>
  );
}

// ─── RIGHT SCENE COMPOSITE ───
function RightSide({ t, duration }) {
  const p = t / duration;

  // Smooth build progress
  const buildProgress = Math.min(p / 0.88, 1);

  // Steps
  const step = p < 0.25 ? 1 : p < 0.5 ? 2 : p < 0.75 ? 3 : 4;

  // Final
  const finalDone = p > 0.9;

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

      <RightBrowser url="https://wiboo.ch/votre-projet">
        <div style={{ position: 'relative', height: '100%', background: '#0a0a0a' }}>
          <WibooWireframe progress={buildProgress} />
          <FixedPrice />
          <WibooProgress progress={buildProgress} />

          {finalDone && (
            <div style={{
              position: 'absolute', inset: 0,
              background: 'rgba(0,0,0,0.4)',
              backdropFilter: 'blur(4px)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{
                  fontFamily: 'DM Sans', fontSize: 14, fontWeight: 700, color: CR.green,
                  marginBottom: 8, textTransform: 'uppercase', letterSpacing: 2,
                }}>
                  ✓ Site livré
                </div>
                <div style={{ fontFamily: 'DM Sans', fontSize: 28, fontWeight: 800, color: CR.white }}>
                  CHF 1'900.-
                </div>
                <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: CR.green, marginTop: 4 }}>
                  Prix fixe. Résultat garanti.
                </div>
              </div>
            </div>
          )}
        </div>
      </RightBrowser>

      {/* Calm indicators */}
      <div style={{
        marginTop: 16, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <StepIndicator step={step} total={4} />
        <span style={{
          fontFamily: 'JetBrains Mono', fontSize: 11, color: CR.green,
        }}>
          {p < 0.25 ? 'Maquette...' : p < 0.5 ? 'Design...' : p < 0.75 ? 'Développement...' : p < 0.9 ? 'Finalisation...' : 'Livré ✓'}
        </span>
      </div>
    </div>
  );
}

window.RightSide = RightSide;