/* Animated scenes for project cards — bot, follow-up, kanban, dashboard, landing */

/* ===== Bot scene: chat bubbles WhatsApp → Instagram → Bot reply → Pedido ===== */
function BotScene({ light }) {
  return (
    <div className="case-scene bot-scene" style={sceneWrap}>
      <div className="cs-bubble cs-b1">
        <span className="cs-avatar" style={{ background: '#22c55e' }}>W</span>
        <span className="cs-text">Quero pedir 🍕</span>
      </div>
      <div className="cs-bubble cs-b2">
        <span className="cs-avatar" style={{ background: '#E1306C' }}>I</span>
        <span className="cs-text">tem cardápio?</span>
      </div>
      <div className="cs-bubble cs-b3">
        <span className="cs-avatar" style={{ background: 'linear-gradient(135deg,#5CE1E6,#2563EB)' }}>AI</span>
        <span className="cs-text">Claro! Aqui vai 👇</span>
      </div>
      <div className="cs-order">
        <span className="cs-order-dot" />
        <span>Pedido #2148 · R$ 187,90</span>
      </div>
      <style>{botCSS}</style>
    </div>
  );
}

/* ===== Follow-up scene: cadence of messages over time ===== */
function FollowupScene({ light }) {
  return (
    <div className="case-scene fup-scene" style={sceneWrap}>
      <div className="fup-track">
        <div className="fup-line" />
        {[0, 1, 2, 3].map(i => (
          <div key={i} className={`fup-step fup-s${i}`}>
            <div className="fup-dot" />
            <div className="fup-msg">
              <div className="fup-msg-h"></div>
              <div className="fup-msg-l"></div>
            </div>
            <div className="fup-day">D+{[0, 1, 3, 7][i]}</div>
          </div>
        ))}
        <div className="fup-pulse" />
      </div>
      <div className="fup-result">
        <CheckCircle /> Cliente respondeu
      </div>
      <style>{fupCSS}</style>
    </div>
  );
}

/* ===== Kanban scene: contact card dragged across columns ===== */
function KanbanScene({ light }) {
  return (
    <div className="case-scene kan-scene" style={sceneWrap}>
      <div className="kan-board">
        {['Novo lead', 'Em consulta', 'Retorno'].map((label, i) => (
          <div key={i} className="kan-col">
            <div className="kan-col-h">{label}</div>
            {i === 0 && <div className="kan-card kan-static"><span className="kan-avatar" style={{ background: '#E1306C' }}>JS</span><div className="kan-lines"><span /><span /></div></div>}
            {i === 1 && <div className="kan-card kan-static"><span className="kan-avatar" style={{ background: '#22c55e' }}>RM</span><div className="kan-lines"><span /><span /></div></div>}
            {i === 2 && <div className="kan-card kan-static kan-soft"><span className="kan-avatar" style={{ background: '#C6A15B' }}>AL</span><div className="kan-lines"><span /><span /></div></div>}
          </div>
        ))}
        {/* moving card */}
        <div className="kan-card kan-moving">
          <span className="kan-avatar" style={{ background: '#2563EB' }}>MS</span>
          <div className="kan-lines"><span /><span /></div>
          <span className="kan-grip">⋮⋮</span>
        </div>
        <div className="kan-cursor">
          <CursorIcon />
        </div>
      </div>
      <style>{kanCSS}</style>
    </div>
  );
}

/* ===== Dashboard scene: page scrolling with metric blocks ===== */
function DashboardScene({ light }) {
  return (
    <div className="case-scene dash-scene" style={sceneWrap}>
      <div className="dash-viewport">
        <div className="dash-strip">
          {/* repeat blocks twice for seamless scroll */}
          {[0, 1].map(rep => (
            <div key={rep} className="dash-page">
              <div className="dash-row">
                <div className="dash-tile dash-tile-a"><span className="dash-num">R$ 14.3k</span><span className="dash-label">Receita</span><div className="dash-spark" /></div>
                <div className="dash-tile dash-tile-b"><span className="dash-num">312</span><span className="dash-label">Leads</span><div className="dash-spark" /></div>
              </div>
              <div className="dash-bars">
                {[40, 70, 55, 88, 62, 95, 72, 80].map((h, i) => (
                  <div key={i} className="dash-bar" style={{ height: `${h}%` }} />
                ))}
              </div>
              <div className="dash-row">
                <div className="dash-tile dash-tile-c"><span className="dash-num">87</span><span className="dash-label">Pedidos</span><div className="dash-spark" /></div>
                <div className="dash-tile dash-tile-d"><span className="dash-num">99.8%</span><span className="dash-label">Uptime</span><div className="dash-spark" /></div>
              </div>
              <div className="dash-bars">
                {[80, 60, 72, 50, 88, 70, 92, 65].map((h, i) => (
                  <div key={i} className="dash-bar" style={{ height: `${h}%` }} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{dashCSS}</style>
    </div>
  );
}

/* ===== Landing scene: cursor clicks form, lead drops in ===== */
function LandingScene({ light }) {
  return (
    <div className="case-scene land-scene" style={sceneWrap}>
      <div className="land-mock">
        <div className="land-bar"><span /><span /><span /></div>
        <div className="land-h"><span /><span style={{ width: '45%' }} /></div>
        <div className="land-form">
          <div className="land-input"><span className="land-caret" /></div>
          <div className="land-btn">Quero falar</div>
        </div>
        <div className="land-cursor"><CursorIcon /></div>
        <div className="land-burst" />
      </div>
      <div className="land-toast">
        <span className="land-toast-dot" /> Novo lead · Marina S.
      </div>
      <style>{landCSS}</style>
    </div>
  );
}

/* ===== Shared helpers ===== */
const sceneWrap = {
  position: 'absolute',
  inset: 0,
  zIndex: 1,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  pointerEvents: 'none',
  overflow: 'hidden'
};

function CheckCircle() {
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" style={{ flexShrink: 0 }}>
      <circle cx="6" cy="6" r="5" fill="#22c55e" />
      <path d="M3.5 6 L5 7.5 L8.5 4" stroke="#fff" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function CursorIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M2 2 L2 14 L6 10 L8 14 L10 13 L8 9 L13 9 Z" fill="#fff" stroke="#0B0F19" strokeWidth="1" strokeLinejoin="round" />
    </svg>
  );
}

/* ===== Scene CSS strings ===== */
const botCSS = `
  .bot-scene { padding: 0; }
  .cs-bubble {
    position: absolute;
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 6px 12px 6px 6px;
    font-size: 11.5px; color: #fff; font-weight: 500;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.4);
    opacity: 0; white-space: nowrap;
    animation: csIn 6s ease-in-out infinite;
  }
  .cs-avatar {
    width: 20px; height: 20px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    font-family: 'Geist Mono', monospace;
  }
  .cs-text { letter-spacing: -0.005em; }
  .cs-b1 { left: 5%; top: 20%; animation-delay: 0s; }
  .cs-b2 { left: 30%; top: 42%; animation-delay: 0.8s; }
  .cs-b3 { left: 12%; top: 64%; animation-delay: 1.6s; }
  .cs-order {
    position: absolute;
    right: 6%; bottom: 14%;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.95);
    color: #0B0F19;
    border-radius: 10px;
    font-size: 11px; font-weight: 600;
    font-family: 'Geist Mono', monospace;
    box-shadow: 0 12px 30px -10px rgba(92,225,230,0.5);
    opacity: 0;
    animation: csOrderIn 6s ease-in-out infinite;
    animation-delay: 2.4s;
  }
  .cs-order-dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
  }
  @keyframes csIn {
    0%, 8% { opacity: 0; transform: translateY(8px); }
    14%, 70% { opacity: 1; transform: translateY(0); }
    80%, 100% { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes csOrderIn {
    0%, 38% { opacity: 0; transform: translateY(8px) scale(0.96); }
    44%, 72% { opacity: 1; transform: translateY(0) scale(1); }
    82%, 100% { opacity: 0; transform: translateY(-4px) scale(0.98); }
  }
`;

const fupCSS = `
  .fup-scene { padding: 0; }
  .fup-track {
    position: relative;
    width: 86%; height: 60px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .fup-line {
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), rgba(255,255,255,0.25), transparent);
  }
  .fup-step {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
  }
  .fup-dot {
    width: 14px; height: 14px; border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.35);
    z-index: 2;
    transition: all .3s ease;
  }
  .fup-s0 .fup-dot { animation: fupActive 6s ease-in-out infinite; animation-delay: 0s; }
  .fup-s1 .fup-dot { animation: fupActive 6s ease-in-out infinite; animation-delay: 1.2s; }
  .fup-s2 .fup-dot { animation: fupActive 6s ease-in-out infinite; animation-delay: 2.4s; }
  .fup-s3 .fup-dot { animation: fupActive 6s ease-in-out infinite; animation-delay: 3.6s; background: #22c55e; border-color: #22c55e; }
  .fup-msg {
    position: absolute; top: -32px;
    width: 44px; padding: 4px 5px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0;
  }
  .fup-s0 .fup-msg { animation: fupMsg 6s ease-in-out infinite; animation-delay: 0s; }
  .fup-s1 .fup-msg { animation: fupMsg 6s ease-in-out infinite; animation-delay: 1.2s; }
  .fup-s2 .fup-msg { animation: fupMsg 6s ease-in-out infinite; animation-delay: 2.4s; }
  .fup-s3 .fup-msg { display: none; }
  .fup-msg span { display: block; height: 2px; background: rgba(255,255,255,0.4); border-radius: 99px; }
  .fup-msg-h { width: 100% !important; }
  .fup-msg-l { width: 60% !important; }
  .fup-day {
    position: absolute; bottom: -22px;
    font-size: 9px; color: rgba(255,255,255,0.5);
    font-family: 'Geist Mono', monospace;
    letter-spacing: 0.06em;
  }
  .fup-result {
    position: absolute;
    bottom: 14%; right: 8%;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.95);
    color: #0B0F19;
    border-radius: 99px;
    font-size: 10.5px; font-weight: 600;
    font-family: 'Geist Mono', monospace;
    box-shadow: 0 8px 20px -6px rgba(34,197,94,0.45);
    opacity: 0;
    animation: fupRes 6s ease-in-out infinite;
    animation-delay: 4s;
  }
  @keyframes fupActive {
    0%, 8% { transform: scale(1); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); }
    12%, 20% { transform: scale(1.5); background: #5CE1E6; border-color: #5CE1E6; box-shadow: 0 0 0 4px rgba(92,225,230,0.3); }
    24%, 100% { transform: scale(1); background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); }
  }
  @keyframes fupMsg {
    0%, 8% { opacity: 0; transform: translateY(4px); }
    14%, 24% { opacity: 1; transform: translateY(0); }
    30%, 100% { opacity: 0.4; transform: translateY(0); }
  }
  @keyframes fupRes {
    0%, 60% { opacity: 0; transform: translateY(6px); }
    68%, 90% { opacity: 1; transform: translateY(0); }
    95%, 100% { opacity: 0; transform: translateY(-4px); }
  }
`;

const kanCSS = `
  .kan-scene { padding: 0; }
  .kan-board {
    position: relative;
    width: 90%;
    height: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .kan-col {
    position: relative;
    background: rgba(11,15,25,0.04);
    border: 1px dashed rgba(11,15,25,0.10);
    border-radius: 8px;
    padding: 8px 6px;
    display: flex; flex-direction: column; gap: 6px;
    min-height: 110px;
  }
  .kan-col-h {
    font-size: 8.5px; color: rgba(11,15,25,0.55);
    font-family: 'Geist Mono', monospace;
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 2px;
  }
  .kan-card {
    background: #fff;
    border: 1px solid rgba(11,15,25,0.08);
    border-radius: 6px;
    padding: 5px 6px;
    display: flex; align-items: center; gap: 5px;
    box-shadow: 0 2px 4px rgba(11,15,25,0.06);
  }
  .kan-card.kan-soft { opacity: 0.6; }
  .kan-avatar {
    width: 16px; height: 16px; border-radius: 999px;
    color: #fff; font-size: 7.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Geist Mono', monospace;
    flex-shrink: 0;
  }
  .kan-lines { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .kan-lines span { display: block; height: 2px; background: rgba(11,15,25,0.18); border-radius: 99px; }
  .kan-lines span:first-child { width: 100%; }
  .kan-lines span:last-child  { width: 60%; }
  .kan-moving {
    position: absolute;
    width: 28%;
    top: 26px;
    left: 4%;
    z-index: 5;
    background: #fff;
    box-shadow: 0 12px 22px -6px rgba(11,15,25,0.20), 0 0 0 2px rgba(37,99,235,0.18);
    animation: kanMove 7s ease-in-out infinite;
  }
  .kan-grip {
    font-size: 8px; color: rgba(11,15,25,0.4); margin-left: 2px;
    letter-spacing: -2px;
  }
  .kan-cursor {
    position: absolute;
    top: 30px; left: 22%;
    z-index: 6;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
    animation: kanCursor 7s ease-in-out infinite;
  }
  @keyframes kanMove {
    0%, 8%   { transform: translateX(0)    translateY(0); }
    18%, 38% { transform: translateX(115%) translateY(0); }
    48%, 70% { transform: translateX(115%) translateY(0); }
    78%, 92% { transform: translateX(232%) translateY(0); }
    100%     { transform: translateX(0)    translateY(0); }
  }
  @keyframes kanCursor {
    0%, 8%   { transform: translateX(0)    translateY(0) scale(1); }
    13%      { transform: translateX(0)    translateY(0) scale(0.85); }
    18%, 38% { transform: translateX(115%) translateY(0) scale(1); }
    43%      { transform: translateX(115%) translateY(0) scale(0.85); }
    48%, 70% { transform: translateX(115%) translateY(0) scale(1); }
    73%      { transform: translateX(115%) translateY(0) scale(0.85); }
    78%, 92% { transform: translateX(232%) translateY(0) scale(1); }
    100%     { transform: translateX(0)    translateY(0) scale(1); }
  }
`;

const dashCSS = `
  .dash-scene { padding: 0; }
  .dash-viewport {
    width: 60%;
    height: 80%;
    max-height: 180px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 16px 40px -10px rgba(0,0,0,0.4);
  }
  .dash-viewport::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    z-index: 5;
  }
  .dash-viewport::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 30px;
    background: linear-gradient(0deg, rgba(11,15,25,0.55), transparent);
    z-index: 5; pointer-events: none;
  }
  .dash-strip {
    display: flex; flex-direction: column;
    animation: dashScroll 8s linear infinite;
    padding-top: 14px;
  }
  .dash-page { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
  .dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .dash-tile {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    padding: 6px 8px;
    display: flex; flex-direction: column; gap: 2px;
    position: relative; overflow: hidden;
  }
  .dash-tile-a::before, .dash-tile-b::before, .dash-tile-c::before, .dash-tile-d::before {
    content: '';
    position: absolute; left: 0; top: 0;
    width: 100%; height: 2px;
  }
  .dash-tile-a::before { background: linear-gradient(90deg, #5CE1E6, transparent); }
  .dash-tile-b::before { background: linear-gradient(90deg, #2563EB, transparent); }
  .dash-tile-c::before { background: linear-gradient(90deg, #C6A15B, transparent); }
  .dash-tile-d::before { background: linear-gradient(90deg, #22c55e, transparent); }
  .dash-num {
    font-size: 11px; font-weight: 600; color: #fff;
    font-family: 'Geist Mono', monospace; letter-spacing: -0.01em;
  }
  .dash-label {
    font-size: 7.5px; color: rgba(255,255,255,0.55);
    font-family: 'Geist Mono', monospace;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .dash-spark {
    position: absolute; right: 6px; top: 6px;
    width: 24px; height: 12px;
    background: linear-gradient(135deg, rgba(92,225,230,0.4), transparent);
    border-radius: 2px;
    clip-path: polygon(0 70%, 25% 50%, 50% 60%, 75% 30%, 100% 40%, 100% 100%, 0 100%);
  }
  .dash-bars {
    display: flex; align-items: flex-end; gap: 3px;
    height: 30px;
    padding: 4px 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
  }
  .dash-bar {
    flex: 1;
    background: linear-gradient(180deg, #5CE1E6, #2563EB);
    border-radius: 1px;
    min-height: 4px;
    opacity: 0.85;
  }
  @keyframes dashScroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }
`;

const landCSS = `
  .land-scene { padding: 0; }
  .land-mock {
    position: relative;
    width: 70%;
    aspect-ratio: 4 / 3;
    max-height: 80%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.18);
    padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
    overflow: hidden;
  }
  .land-bar { display: flex; gap: 4px; }
  .land-bar span { width: 6px; height: 6px; border-radius: 99px; background: rgba(11,15,25,0.18); }
  .land-h { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
  .land-h span { display: block; height: 6px; background: rgba(11,15,25,0.55); border-radius: 4px; }
  .land-h span:first-child { width: 75%; }
  .land-form { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
  .land-input {
    height: 16px;
    background: rgba(11,15,25,0.04);
    border: 1px solid rgba(11,15,25,0.10);
    border-radius: 4px;
    position: relative;
  }
  .land-caret {
    position: absolute; left: 6px; top: 4px; bottom: 4px; width: 1px;
    background: var(--blue);
    animation: caret 1s steps(1) infinite;
  }
  @keyframes caret { 50% { opacity: 0; } }
  .land-btn {
    background: #0B0F19; color: #fff;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 9px; font-weight: 600;
    text-align: center;
    align-self: flex-start;
    animation: landBtn 5s ease-in-out infinite;
  }
  .land-cursor {
    position: absolute;
    z-index: 4;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
    animation: landCursor 5s ease-in-out infinite;
  }
  .land-burst {
    position: absolute;
    width: 20px; height: 20px; border-radius: 999px;
    border: 2px solid var(--blue);
    opacity: 0;
    animation: landBurst 5s ease-out infinite;
  }
  .land-toast {
    position: absolute;
    bottom: 8%; right: 6%;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: rgba(11,15,25,0.92);
    color: #fff;
    border-radius: 99px;
    font-size: 10px; font-weight: 600;
    font-family: 'Geist Mono', monospace;
    opacity: 0;
    animation: landToast 5s ease-in-out infinite;
  }
  .land-toast-dot {
    width: 6px; height: 6px; border-radius: 99px; background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.3);
  }
  @keyframes landCursor {
    0%   { transform: translate(-30px, 30px); }
    50%  { transform: translate(0, 0); }
    55%  { transform: translate(0, 0) scale(0.85); }
    60%  { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, 30px); }
  }
  @keyframes landBtn {
    0%, 50% { transform: translateY(0); background: #0B0F19; }
    55%, 65% { transform: translateY(1px); background: var(--blue); }
    70%, 100% { transform: translateY(0); background: #0B0F19; }
  }
  @keyframes landBurst {
    0%, 50% { opacity: 0; transform: scale(0.5); }
    55% { opacity: 0.8; transform: scale(1); }
    75% { opacity: 0; transform: scale(2.5); }
    100% { opacity: 0; }
  }
  @keyframes landToast {
    0%, 65% { opacity: 0; transform: translateY(8px); }
    72%, 92% { opacity: 1; transform: translateY(0); }
    97%, 100% { opacity: 0; transform: translateY(-4px); }
  }
`;

function CaseScene({ kind, light }) {
  if (kind === 'wa') return <BotScene light={light} />;
  if (kind === 'flow_followup') return <FollowupScene light={light} />;
  if (kind === 'crm') return <KanbanScene light={light} />;
  if (kind === 'dash_scroll') return <DashboardScene light={light} />;
  if (kind === 'land') return <LandingScene light={light} />;
  return null;
}

window.CaseScene = CaseScene;
window.BotScene = BotScene;
window.FollowupScene = FollowupScene;
window.KanbanScene = KanbanScene;
window.DashboardScene = DashboardScene;
window.LandingScene = LandingScene;