// Animated product mockups

// Helpers d'adaptation pays pour les mockups (DashboardView, CRMMockup, AIMockup, etc.)
const cbMockupCtx = () => {
  const ctx = (typeof useCountry === 'function') ? useCountry() : null;
  const country = (ctx && ctx.country) || 'co';
  const isCo = country === 'co';
  return {
    country,
    isCo,
    apartmentCap: (ctx && ctx.vocab && ctx.vocab.apartmentCap) || (isCo ? 'Apartamento' : 'Departamento'),
    apartmentShort: (ctx && ctx.vocab && ctx.vocab.apartmentShort) || (isCo ? 'Apto' : 'Depto'),
    bedroom: (ctx && ctx.vocab && ctx.vocab.bedroom) || (isCo ? 'habitación' : 'recámara'),
    bedroomPlural: (ctx && ctx.vocab && ctx.vocab.bedroomPlural) || (isCo ? 'habitaciones' : 'recámaras'),
    bedroomShort: (ctx && ctx.vocab && ctx.vocab.bedroomShort) || (isCo ? 'hab' : 'rec'),
    primaryCity: (ctx && ctx.primaryCity) || (isCo ? 'Medellín' : 'CDMX'),
    cityFull: isCo ? 'Medellín' : 'Ciudad de México',
    neighborhood: (ctx && ctx.prestigeNeighborhood) || (isCo ? 'El Poblado' : 'Polanco'),
    neighborhood2: isCo ? 'Laureles' : 'Roma',
    neighborhood3: isCo ? 'Envigado' : 'Condesa',
    iconicView: isCo ? 'las montañas' : 'el Bosque de Chapultepec',
    domain: isCo ? '.co' : '.mx',
    flag: isCo ? '🇨🇴' : '🇲🇽',
    countryName: isCo ? 'Colombia' : 'México',
    currency: isCo ? 'COP' : 'MXN',
    priceShort: isCo ? '$1.250M COP' : '$10.5M MXN',
    priceMid: isCo ? '$2.4M COP' : '$2.4M MXN',
    priceRange: isCo ? '$800M – $1.500M COP' : '$8M – $12M MXN',
  };
};

const DashboardMockup = () => {
  const [activeTab, setActiveTab] = React.useState(0);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setActiveTab(t => (t + 1) % 3);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  React.useEffect(() => {
    let raf;
    const animate = () => {
      setProgress(p => (p + 0.3) % 100);
      raf = requestAnimationFrame(animate);
    };
    raf = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <div style={{
      borderRadius: 16, background: '#fff', border: '1px solid #e5e5e5',
      boxShadow: '0 32px 80px -20px rgba(0,0,0,0.18), 0 8px 24px -8px rgba(0,0,0,0.08)',
      overflow: 'hidden', position: 'relative',
    }}>
      {/* Browser chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', borderBottom: '1px solid #f0f0f0', background: '#fafafa' }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f56' }} />
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#ffbd2e' }} />
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#27c93f' }} />
        </div>
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
          <div className="mono" style={{ fontSize: 11, color: '#a3a3a3', padding: '4px 12px', background: '#fff', borderRadius: 6, border: '1px solid #f0f0f0' }}>
            app.closerbroker.com/dashboard
          </div>
        </div>
      </div>

      {/* App layout */}
      <div style={{ display: 'flex', minHeight: 520 }}>
        {/* Sidebar */}
        <div style={{ width: 200, padding: 16, borderRight: '1px solid #f0f0f0', background: '#fcfcfc' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 24, padding: '4px 8px' }}>
            <div style={{ width: 24, height: 24, borderRadius: 6, background: 'linear-gradient(135deg, #54B5E3, #C69CFF)' }} />
            <div style={{ fontSize: 13, fontWeight: 600 }}>CloserBroker</div>
          </div>
          {[
            { i: 'home', l: 'Dashboard', active: activeTab === 0 },
            { i: 'users', l: 'Prospectos', active: activeTab === 1 },
            { i: 'home', l: 'Propiedades' },
            { i: 'chat', l: 'Conversaciones' },
            { i: 'calendar', l: 'Calendario' },
            { i: 'chart', l: 'Reportes', active: activeTab === 2 },
            { i: 'sparkle', l: 'IA' },
            { i: 'settings', l: 'Configuración' },
          ].map((it, idx) => (
            <div key={idx} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '7px 8px', borderRadius: 6, marginBottom: 2,
              background: it.active ? '#f5f5f5' : 'transparent',
              color: it.active ? '#0a0a0a' : '#737373',
              fontSize: 12.5, fontWeight: it.active ? 500 : 400,
              transition: 'all 0.3s',
            }}>
              <Icon name={it.i} size={14} />
              {it.l}
            </div>
          ))}
        </div>

        {/* Main */}
        <div style={{ flex: 1, padding: 24, position: 'relative' }}>
          {activeTab === 0 && <DashboardView progress={progress} />}
          {activeTab === 1 && <PipelineView />}
          {activeTab === 2 && <ReportsView />}
        </div>
      </div>

      {/* Live indicator */}
      <div style={{
        position: 'absolute', top: 60, right: 24,
        display: 'flex', alignItems: 'center', gap: 6,
        padding: '4px 10px', borderRadius: 999,
        background: 'rgba(34, 197, 94, 0.1)', color: '#16a34a',
        fontSize: 11, fontWeight: 500,
      }}>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#16a34a' }} className="pulse" />
        En vivo
      </div>
    </div>
  );
};

const DashboardView = ({ progress }) => {
  const v = cbMockupCtx();
  return (
  <div style={{ animation: 'slidein 0.4s ease' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
      <div>
        <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 2 }}>Hola, María 👋</div>
        <div style={{ fontSize: 12, color: '#737373' }} className="mono">Lunes 28 de abril · 9:42</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: '#f5f5f5', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="bell" size={13} /></div>
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'linear-gradient(135deg, #54B5E3, #C69CFF)' }} />
      </div>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 16 }}>
      {[
        { l: 'Prospectos nuevos', v: '24', d: '+18%' },
        { l: 'Propiedades activas', v: '147', d: '+3' },
        { l: 'Citas esta semana', v: '12', d: '+5' },
      ].map((s, i) => (
        <div key={i} style={{ padding: 12, borderRadius: 10, border: '1px solid #f0f0f0' }}>
          <div style={{ fontSize: 10, color: '#a3a3a3', textTransform: 'uppercase', letterSpacing: 0.5 }} className="mono">{s.l}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 4 }}>
            <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{s.v}</div>
            <div style={{ fontSize: 10, color: '#16a34a', fontWeight: 500 }}>{s.d}</div>
          </div>
        </div>
      ))}
    </div>

    <div style={{ padding: 14, borderRadius: 10, border: '1px solid #f0f0f0', marginBottom: 12 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
        <div style={{ fontSize: 12, fontWeight: 500 }}>Leads esta semana</div>
        <div style={{ fontSize: 10, color: '#a3a3a3' }} className="mono">L M M J V S D</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 56 }}>
        {[40, 65, 35, 80, 55, 90, 70].map((h, i) => (
          <div key={i} style={{
            flex: 1, height: `${h}%`, borderRadius: 3,
            background: i === 5 ? 'linear-gradient(180deg, #54B5E3, #C69CFF)' : '#e5e5e5',
            transition: 'all 0.5s',
          }} />
        ))}
      </div>
    </div>

    <div style={{ padding: 12, borderRadius: 10, background: 'linear-gradient(135deg, rgba(84,181,227,0.08), rgba(198,156,255,0.08))', border: '1px solid rgba(84,181,227,0.15)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <Icon name="sparkle" size={12} color="#54B5E3" />
        <div style={{ fontSize: 11, fontWeight: 500, color: '#54B5E3' }}>IA — match nuevo</div>
      </div>
      <div style={{ fontSize: 12, color: '#404040', lineHeight: 1.4 }}>
        <strong>Carlos M.</strong> busca {v.apartmentShort.toLowerCase()} 2 {v.bedroomPlural} en {v.neighborhood}. Tienes <strong>3 propiedades</strong> que coinciden.
      </div>
      <div style={{ marginTop: 8, height: 3, borderRadius: 2, background: '#e5e5e5', overflow: 'hidden' }}>
        <div style={{ height: '100%', width: `${progress}%`, background: 'linear-gradient(90deg, #54B5E3, #C69CFF)' }} />
      </div>
    </div>
  </div>
  );
};

const PipelineView = () => {
  const v = cbMockupCtx();
  const propLabels = v.isCo
    ? ['El Poblado · 2 hab.', 'Laureles · 3 hab.', 'Envigado · 1 hab.']
    : ['Polanco · 2 rec.', 'Roma · 3 rec.', 'Condesa · 1 rec.'];
  const cols = [
    { t: 'Nuevo', n: 8, c: '#a3a3a3' },
    { t: 'Calificado', n: 12, c: '#54B5E3' },
    { t: 'Visita', n: 5, c: '#C69CFF' },
    { t: 'Cierre', n: 3, c: '#16a34a' },
  ];
  return (
    <div style={{ animation: 'slidein 0.4s ease' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{ fontSize: 18, fontWeight: 600 }}>Pipeline · Compradores</div>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ padding: '4px 10px', fontSize: 11, borderRadius: 6, border: '1px solid #e5e5e5' }}>Filtrar</div>
          <div style={{ padding: '4px 10px', fontSize: 11, borderRadius: 6, background: '#0a0a0a', color: '#fff' }}>+ Prospecto</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {cols.map((col, ci) => (
          <div key={ci} style={{ padding: 8, background: '#fafafa', borderRadius: 8, minHeight: 360 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, padding: '0 4px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 6, height: 6, borderRadius: '50%', background: col.c }} />
                <div style={{ fontSize: 11, fontWeight: 500 }}>{col.t}</div>
              </div>
              <div style={{ fontSize: 10, color: '#a3a3a3' }} className="mono">{col.n}</div>
            </div>
            {[0, 1, 2].map(i => (
              <div key={i} style={{ padding: 8, background: '#fff', borderRadius: 6, marginBottom: 6, border: '1px solid #f0f0f0', animation: `slidein 0.3s ease ${i * 0.1}s both` }}>
                <div style={{ fontSize: 11, fontWeight: 500, marginBottom: 2 }}>{['Carlos M.', 'Ana R.', 'Luis P.'][i]}</div>
                <div style={{ fontSize: 9, color: '#a3a3a3' }} className="mono">{propLabels[i]}</div>
                <div style={{ display: 'flex', gap: 3, marginTop: 6 }}>
                  {[0, 1, 2, 3, 4].map(s => (
                    <div key={s} style={{ flex: 1, height: 2, borderRadius: 1, background: s < (4 - i) ? col.c : '#e5e5e5' }} />
                  ))}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};

const ReportsView = () => {
  const v = cbMockupCtx();
  return (
  <div style={{ animation: 'slidein 0.4s ease' }}>
    <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>Reportes · Abril 2026</div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
      <div style={{ padding: 14, borderRadius: 10, border: '1px solid #f0f0f0' }}>
        <div style={{ fontSize: 10, color: '#a3a3a3' }} className="mono">VENTAS CERRADAS</div>
        <div style={{ fontSize: 28, fontWeight: 500, marginTop: 4 }}>{v.priceMid.split(' ')[0]} <span style={{ fontSize: 12, color: '#a3a3a3' }} className="mono">{v.currency}</span></div>
        <svg width="100%" height="40" viewBox="0 0 200 40" style={{ marginTop: 8 }}>
          <path d="M0,30 Q40,20 80,22 T160,10 T200,5" stroke="url(#g1)" strokeWidth="2" fill="none" />
          <defs><linearGradient id="g1"><stop offset="0%" stopColor="#54B5E3"/><stop offset="100%" stopColor="#C69CFF"/></linearGradient></defs>
        </svg>
      </div>
      <div style={{ padding: 14, borderRadius: 10, border: '1px solid #f0f0f0' }}>
        <div style={{ fontSize: 10, color: '#a3a3a3' }} className="mono">CONVERSIÓN</div>
        <div style={{ fontSize: 28, fontWeight: 500, marginTop: 4 }}>14.2%</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 40, marginTop: 8 }}>
          {[40, 50, 35, 60, 55, 75, 65, 80].map((h, i) => (
            <div key={i} style={{ flex: 1, height: `${h}%`, background: 'linear-gradient(180deg, #54B5E3, #C69CFF)', borderRadius: 2, opacity: 0.3 + (i / 8) * 0.7 }} />
          ))}
        </div>
      </div>
    </div>
    <div style={{ padding: 14, borderRadius: 10, border: '1px solid #f0f0f0' }}>
      <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 10 }}>Asesores · Top performance</div>
      {[
        { n: 'Sofía Hernández', s: 12, p: 90 },
        { n: 'Diego Ramírez', s: 9, p: 70 },
        { n: 'Valeria Cruz', s: 7, p: 55 },
      ].map((a, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <div style={{ width: 24, height: 24, borderRadius: '50%', background: ['#54B5E3', '#C69CFF', '#fbbf24'][i] }} />
          <div style={{ flex: 1, fontSize: 11 }}>{a.n}</div>
          <div style={{ width: 100, height: 4, borderRadius: 2, background: '#f0f0f0', overflow: 'hidden' }}>
            <div style={{ width: `${a.p}%`, height: '100%', background: 'linear-gradient(90deg, #54B5E3, #C69CFF)' }} />
          </div>
          <div style={{ fontSize: 11, fontWeight: 500, width: 24, textAlign: 'right' }}>{a.s}</div>
        </div>
      ))}
    </div>
  </div>
  );
};

// CRM mockup for feature spotlight 1
const CRMMockup = () => {
  const v = cbMockupCtx();
  const matches = v.isCo
    ? [
        { t: `${v.apartmentShort} en ${v.neighborhood} V`, p: '$1.250M', m: 95 },
        { t: 'Penthouse Laureles',                          p: '$1.420M', m: 88 },
        { t: `${v.apartmentShort} ${v.neighborhood} IV`,    p: '$980M',   m: 82 },
      ]
    : [
        { t: 'Depto en Polanco V',  p: '$10.5M', m: 95 },
        { t: 'Penthouse Anzures',   p: '$11.2M', m: 88 },
        { t: 'Depto Polanco IV',    p: '$9.8M',  m: 82 },
      ];
  return (
  <div style={{ borderRadius: 14, background: '#fff', border: '1px solid #e5e5e5', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
    <div style={{ padding: '14px 18px', borderBottom: '1px solid #f0f0f0', display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg, #54B5E3, #C69CFF)' }} />
      <div>
        <div style={{ fontSize: 14, fontWeight: 600 }}>Carlos Mendoza</div>
        <div style={{ fontSize: 11, color: '#737373' }} className="mono">Lead score: 87 · Caliente 🔥</div>
      </div>
      <div style={{ marginLeft: 'auto', padding: '4px 10px', fontSize: 11, borderRadius: 999, background: 'rgba(84,181,227,0.1)', color: '#54B5E3', fontWeight: 500 }}>Calificado</div>
    </div>
    <div style={{ padding: 18 }}>
      <div style={{ fontSize: 11, color: '#a3a3a3', marginBottom: 6 }} className="mono">CRITERIOS DE BÚSQUEDA</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 16 }}>
        {[v.neighborhood, `2 ${v.bedroomPlural}`, v.priceRange, 'Estacionamiento', 'Nuevo'].map((t, i) => (
          <div key={i} style={{ padding: '4px 10px', fontSize: 11, borderRadius: 6, background: '#f5f5f5' }}>{t}</div>
        ))}
      </div>
      <div style={{ fontSize: 11, color: '#a3a3a3', marginBottom: 8 }} className="mono">3 PROPIEDADES MATCHEAN</div>
      {matches.map((p, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: i < 2 ? '1px solid #f0f0f0' : 'none' }}>
          <div style={{ width: 40, height: 40, borderRadius: 8, background: 'linear-gradient(135deg, #f5f5f5, #e5e5e5)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.03) 4px, rgba(0,0,0,0.03) 8px)' }} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 500 }}>{p.t}</div>
            <div style={{ fontSize: 10, color: '#737373' }} className="mono">{p.p} {v.currency}</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: '#16a34a' }}>{p.m}%</div>
            <div style={{ fontSize: 10, color: '#a3a3a3' }}>match</div>
          </div>
        </div>
      ))}
    </div>
  </div>
  );
};

// Sitio web mockup
const SitioMockup = ({ template = 0 }) => {
  const v = cbMockupCtx();
  const templates = [
    { name: 'Puro', color: '#0a0a0a', accent: '#fff' },
    { name: 'Cielo', color: '#54B5E3', accent: '#fff' },
    { name: 'Horizon', color: '#1a2332', accent: '#C69CFF' },
    { name: 'Elegancia', color: '#3d2914', accent: '#d4a574' },
    { name: 'Transparencia', color: '#fff', accent: '#0a0a0a' },
  ];
  const t = templates[template] || templates[0];
  return (
    <div style={{ borderRadius: 14, background: '#fff', border: '1px solid #e5e5e5', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
      <div style={{ display: 'flex', gap: 6, padding: '10px 14px', borderBottom: '1px solid #f0f0f0' }}>
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#ff5f56' }} />
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#ffbd2e' }} />
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#27c93f' }} />
        <div className="mono" style={{ marginLeft: 'auto', fontSize: 10, color: '#a3a3a3' }}>inmobiliaria-{t.name.toLowerCase()}{v.domain}</div>
      </div>
      <div style={{ background: t.color, color: t.color === '#fff' ? '#0a0a0a' : '#fff', padding: '32px 24px', minHeight: 280, position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 32, fontSize: 11 }}>
          <div style={{ fontWeight: 600 }}>{t.name.toUpperCase()}</div>
          <div style={{ display: 'flex', gap: 16, opacity: 0.7 }}>
            <div>Propiedades</div><div>Nosotros</div><div>Blog</div><div>Contacto</div>
          </div>
        </div>
        <div className="serif" style={{ fontSize: 32, lineHeight: 1.05, letterSpacing: '-0.02em', maxWidth: 280, marginBottom: 12 }}>
          Tu próximo hogar te está esperando.
        </div>
        <div style={{ fontSize: 11, opacity: 0.7, maxWidth: 240, marginBottom: 16 }}>Descubre propiedades exclusivas en las mejores zonas.</div>
        <div style={{ display: 'inline-block', padding: '8px 14px', background: t.accent, color: t.accent === '#fff' ? t.color : '#fff', borderRadius: 999, fontSize: 11, fontWeight: 500 }}>Buscar propiedades →</div>
      </div>
      <div style={{ padding: 12, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{ aspectRatio: '4/3', borderRadius: 6, background: 'linear-gradient(135deg, #f5f5f5, #e5e5e5)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 6px)' }} />
          </div>
        ))}
      </div>
    </div>
  );
};

// AI mockup
const AIMockup = () => {
  const v = cbMockupCtx();
  const [text, setText] = React.useState('');
  const fullText = `Espectacular ${v.apartmentCap.toLowerCase()} de 3 ${v.bedroomPlural} ubicado en el corazón de ${v.neighborhood}, una de las zonas más exclusivas de ${v.cityFull}. Con impresionantes vistas a ${v.iconicView}, este inmueble de 180m² ofrece acabados de lujo, amplios ventanales y una distribución pensada para el confort. A pasos de las mejores boutiques, restaurantes y galerías de arte de la ciudad. Ideal para ejecutivos o familias que buscan un estilo de vida urbano sofisticado…`;

  React.useEffect(() => {
    let i = 0;
    setText('');
    const interval = setInterval(() => {
      if (i <= fullText.length) {
        setText(fullText.slice(0, i));
        i++;
      } else {
        setTimeout(() => { i = 0; setText(''); }, 2000);
      }
    }, 18);
    return () => clearInterval(interval);
  }, [fullText]);

  return (
    <div style={{ borderRadius: 14, background: '#fff', border: '1px solid #e5e5e5', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid #f0f0f0', display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icon name="sparkle" size={14} color="#C69CFF" />
        <div style={{ fontSize: 12, fontWeight: 500 }}>Generador IA · Descripción de propiedad</div>
      </div>
      <div style={{ padding: 18 }}>
        <div style={{ fontSize: 10, color: '#a3a3a3', marginBottom: 6 }} className="mono">PROPIEDAD</div>
        <div style={{ padding: 10, borderRadius: 8, background: '#fafafa', fontSize: 12, marginBottom: 14 }}>
          {v.apartmentShort} · 3 {v.bedroomShort} · {v.neighborhood} · 180m² · {v.isCo ? '$1.450M COP' : '$14.5M MXN'} · vistas a {v.iconicView}
        </div>
        <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
          {[`${v.flag} ${v.countryName}`, 'Tono: Lujo', '180 palabras'].map((t, i) => (
            <div key={i} style={{ padding: '4px 10px', fontSize: 10, borderRadius: 999, border: '1px solid #e5e5e5' }} className="mono">{t}</div>
          ))}
        </div>
        <div style={{ fontSize: 10, color: '#a3a3a3', marginBottom: 6 }} className="mono">RESULTADO</div>
        <div style={{ padding: 12, borderRadius: 8, background: 'linear-gradient(135deg, rgba(84,181,227,0.05), rgba(198,156,255,0.05))', border: '1px solid rgba(198,156,255,0.2)', fontSize: 12.5, lineHeight: 1.55, minHeight: 220 }}>
          {text}<span style={{ display: 'inline-block', width: 1, height: 14, background: '#C69CFF', verticalAlign: 'middle', marginLeft: 1, animation: 'pulse 1s infinite' }} />
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
          <div style={{ padding: '6px 12px', fontSize: 11, borderRadius: 6, background: '#0a0a0a', color: '#fff', display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name="refresh" size={11} /> Regenerar
          </div>
          <div style={{ padding: '6px 12px', fontSize: 11, borderRadius: 6, border: '1px solid #e5e5e5' }}>Copiar</div>
        </div>
      </div>
    </div>
  );
};

// Migration / integrations mockup
const IntegrationCard = ({ name, status, color, logo }) => (
  <div style={{ padding: 24, borderRadius: 16, background: '#fff', border: '1px solid #e5e5e5', boxShadow: 'var(--shadow-sm)', position: 'relative' }} className="card-hover">
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
      <div style={{ width: 56, height: 56, borderRadius: 12, background: color, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600, fontSize: 22 }}>
        {logo}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999, background: 'rgba(34,197,94,0.1)', color: '#16a34a', fontSize: 11, fontWeight: 500 }}>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#16a34a' }} className="pulse" />
        Conectado
      </div>
    </div>
    <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 4 }}>{name}</div>
    <div style={{ fontSize: 13, color: '#737373', marginBottom: 16 }}>Integración nativa · 1 click</div>
    <div style={{ height: 1, background: '#f0f0f0', marginBottom: 14 }} />
    <div style={{ fontSize: 11, color: '#a3a3a3', marginBottom: 8 }} className="mono">PROGRESO DE IMPORTACIÓN</div>
    {[
      { l: 'Propiedades', v: '147 / 147' },
      { l: 'Fotos', v: '2,341 / 2,341' },
      { l: 'Prospectos', v: '892 / 892' },
    ].map((r, i) => (
      <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '5px 0' }}>
        <div style={{ color: '#404040' }}>{r.l}</div>
        <div className="mono" style={{ color: '#16a34a', display: 'flex', alignItems: 'center', gap: 4 }}>
          <Icon name="check" size={11} />{r.v}
        </div>
      </div>
    ))}
  </div>
);

window.DashboardMockup = DashboardMockup;
window.CRMMockup = CRMMockup;
window.SitioMockup = SitioMockup;
window.AIMockup = AIMockup;
window.IntegrationCard = IntegrationCard;