/* global React */
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

/* ==========================================================================
   SISTEMA — 3 phone frames con conector SVG numerado.
   ========================================================================== */
function Sistema() {
  return (
    <section id="sistema">
      <div className="container">
        <div className="surface sistema-surface" data-reveal>
          {/* Orbes ambientales scoped a la sección */}
          <div className="sec-orb so1"></div>
          <div className="sec-orb so2"></div>

          <div className="sec-head-2">
            <span className="eyebrow"><span className="dot"></span> 03 · Cómo funciona</span>
            <h2>Tres piezas que <em>juntas</em> sí funcionan.</h2>
            <p>Imaginate a una clienta tuya cualquier martes. Así te conoce, decide y te escribe.</p>
          </div>

          {/* Conector SVG entre los 3 phones (desktop only) */}
          <div className="sis-grid">
            <svg className="sis-connector" viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true">
              <defs>
                <linearGradient id="sisline" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.1" />
                  <stop offset="50%" stopColor="var(--accent)" stopOpacity="0.6" />
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.1" />
                </linearGradient>
              </defs>
              <path d="M 200 60 Q 400 20 600 60 T 1000 60" stroke="url(#sisline)" strokeWidth="2" fill="none" strokeDasharray="6 6" className="sis-path" />
            </svg>

            {/* CARD 1 — IG Ad */}
            <div className="sis-card" data-reveal data-reveal-delay="1">
              <div className="sis-step">
                <span className="sis-num">01</span>
                <div>
                  <span className="sis-label">Te conoce</span>
                  <span className="sis-sub">Meta Ads</span>
                </div>
              </div>

              <div className="sis-phone">
                <div className="sis-phone-frame">
                  <div className="sis-phone-notch"></div>
                  <div className="sis-phone-screen">
                    {/* IG status bar */}
                    <div className="sis-status">9:41 · ⏵ ⓘ ⛁</div>
                    {/* IG header */}
                    <div className="sis-ig-head">
                      <div className="sis-ig-av">H</div>
                      <div className="sis-ig-meta">
                        <strong>tumarca.cba</strong>
                        <span>Patrocinado · Córdoba</span>
                      </div>
                      <span className="sis-ig-dots">···</span>
                    </div>
                    {/* IG image */}
                    <div className="sis-ig-image">
                      <div className="sis-ig-overlay">
                        <span className="sis-ig-tag">SIN ESPERA</span>
                        <strong>Esta semana<br/>te atendemos.</strong>
                      </div>
                    </div>
                    {/* IG actions */}
                    <div className="sis-ig-actions">
                      <span>♡</span><span>💬</span><span>↗</span>
                      <span className="sis-ig-bookmark">▢</span>
                    </div>
                    <div className="sis-ig-likes">2.481 me gusta</div>
                    <div className="sis-ig-cta">
                      <span>Agendar turno</span>
                      <span className="sis-arrow">→</span>
                    </div>
                  </div>
                </div>
                <div className="sis-tap sis-tap-1">tap</div>
              </div>

              <div className="sis-bullets">
                <div className="sis-bullet"><span className="sb-dot"></span>Primera vez que ve tu marca</div>
                <div className="sis-bullet"><span className="sb-dot"></span>Le hablamos a ella, no a todos</div>
                <div className="sis-bullet"><span className="sb-dot accent"></span>Algo le hace click. <em>Toca.</em></div>
              </div>
            </div>

            {/* CARD 2 — Landing */}
            <div className="sis-card" data-reveal data-reveal-delay="2">
              <div className="sis-step">
                <span className="sis-num">02</span>
                <div>
                  <span className="sis-label">Se decide</span>
                  <span className="sis-sub">Landing</span>
                </div>
              </div>

              <div className="sis-phone">
                <div className="sis-phone-frame">
                  <div className="sis-phone-notch"></div>
                  <div className="sis-phone-screen sis-screen-light">
                    <div className="sis-status sis-status-light">9:42 · 🔒 tumarca.com.ar</div>
                    <div className="sis-land">
                      <div className="sis-land-eyebrow">◆ Nueva Córdoba · Cupos limitados</div>
                      <div className="sis-land-h">Agendá<br/>tu turno<br/><em>esta semana.</em></div>
                      <div className="sis-land-stars">★★★★★ <span>+47 reseñas reales</span></div>
                      <div className="sis-land-input">
                        <span className="sli-label">Nombre</span>
                        <span className="sli-cursor"></span>
                      </div>
                      <div className="sis-land-input">
                        <span className="sli-label">WhatsApp</span>
                      </div>
                      <div className="sis-land-cta">
                        Reservar turno
                        <span className="sis-arrow">→</span>
                      </div>
                      <div className="sis-land-trust">
                        <span>🛡 Sin tarjeta</span>
                        <span>⚡ Confirmamos en 2hs</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="sis-tap sis-tap-2">tap</div>
              </div>

              <div className="sis-bullets">
                <div className="sis-bullet"><span className="sb-dot"></span>Una sola cosa para hacer</div>
                <div className="sis-bullet"><span className="sb-dot"></span>Lee reseñas reales de gente como ella</div>
                <div className="sis-bullet"><span className="sb-dot accent"></span>Escribe su nombre. <em>Toca.</em></div>
              </div>
            </div>

            {/* CARD 3 — WhatsApp */}
            <div className="sis-card" data-reveal data-reveal-delay="3">
              <div className="sis-step">
                <span className="sis-num">03</span>
                <div>
                  <span className="sis-label">Te escribe</span>
                  <span className="sis-sub">WhatsApp</span>
                </div>
              </div>

              <div className="sis-phone">
                <div className="sis-phone-frame">
                  <div className="sis-phone-notch"></div>
                  <div className="sis-phone-screen sis-screen-wa">
                    <div className="sis-status sis-status-wa">9:43 · WhatsApp</div>
                    <div className="sis-wa-head">
                      <span className="sis-wa-back">‹</span>
                      <div className="sis-wa-av">M</div>
                      <div className="sis-wa-meta">
                        <strong>Mariana G.</strong>
                        <span>en línea ahora</span>
                      </div>
                      <span className="sis-wa-call">📞</span>
                    </div>
                    <div className="sis-wa-body">
                      <div className="sis-wa-day">HOY · 9:43</div>
                      <div className="sis-wa-bub in">Hola! Vi el aviso, tienen turno mañana? 🙂</div>
                      <div className="sis-wa-bub out">¡Hola Mariana! Sí, 11:30 o 16hs ✨</div>
                      <div className="sis-wa-bub in">Perfecto, agendá 16hs 🙌</div>
                      <div className="sis-wa-typing">
                        <span></span><span></span><span></span>
                      </div>
                    </div>
                    <div className="sis-wa-input">
                      <span>Escribir mensaje…</span>
                      <span className="sis-wa-mic">🎤</span>
                    </div>
                  </div>
                </div>
                <div className="sis-tap sis-tap-3 green">+1</div>
              </div>

              <div className="sis-bullets">
                <div className="sis-bullet"><span className="sb-dot green"></span>Ya sabés quién es y qué busca</div>
                <div className="sis-bullet"><span className="sb-dot green"></span>Respondés en minutos, no horas</div>
                <div className="sis-bullet"><span className="sb-dot accent"></span><em>Y ahí, sin apuro, se convierte en cliente.</em></div>
              </div>
            </div>
          </div>

          {/* Closing strip */}
          <div className="sis-closing" data-reveal data-reveal-delay="4">
            <div className="sis-closing-content">
              <span className="sis-closing-eyebrow">◆ El sistema entero</span>
              <div className="sis-closing-text">
                De <em>scroll en el sofá</em> a <em>cliente agendado</em>. En el mismo día.
              </div>
            </div>
            <a href="https://wa.me/5493518692782?text=Hola!%20Quiero%20saber%20m%C3%A1s%20del%20sistema." target="_blank" rel="noopener" className="sis-closing-cta">
              <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
              Hablar por WhatsApp
              <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ==========================================================================
   STATROW — bento 4 stats con sparklines, counters animados, dashboard grid
   ========================================================================== */

function useCountUp(target, duration = 1400, decimals = 0, trigger = true) {
  const [val, setVal] = useState2(0);
  useEffect2(() => {
    if (!trigger) return;
    let raf;
    const start = performance.now();
    const tick = (now) => {
      const t = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - t, 3);
      const v = decimals === 0
        ? Math.round(eased * target)
        : +(eased * target).toFixed(decimals);
      setVal(v);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [trigger, target, duration, decimals]);
  return val;
}

function useInViewport(ref, threshold = 0.2) {
  const [inView, setInView] = useState2(false);
  useEffect2(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); io.disconnect(); }
    }, { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref, threshold]);
  return inView;
}

function StatRow() {
  const sectionRef = useRef2(null);
  const inView = useInViewport(sectionRef, 0.15);

  // Counters
  const leadsPct = useCountUp(140, 1600, 0, inView);
  const cplPct = useCountUp(35, 1400, 0, inView);
  const roas = useCountUp(3.8, 1500, 1, inView);
  const days = useCountUp(7, 1000, 0, inView);

  // Sparkline data (rising)
  const risingPath = "M0,55 L12,52 L24,48 L36,42 L48,38 L60,30 L72,22 L84,15 L96,8 L108,5 L120,3";
  const fallingPath = "M0,5 L12,10 L24,14 L36,22 L48,28 L60,38 L72,45 L84,50 L96,55 L108,58 L120,60";

  return (
    <section id="stats" ref={sectionRef}>
      <div className="container">
        <div className="surface stats-surface" data-reveal>
          {/* Orbes scoped */}
          <div className="sec-orb so1 small"></div>
          <div className="sec-orb so2 small"></div>
          {/* Dashboard grid pattern */}
          <div className="stats-grid-bg" aria-hidden="true"></div>

          <div className="sec-head-2" style={{marginBottom: 32}}>
            <span className="eyebrow"><span className="dot"></span> 04 · Por qué funciona</span>
            <h2>Números que <em>se sostienen.</em></h2>
            <p>Promedios reales de nuestros clientes activos. Sin inflar — preferimos prometer poco y entregar más.</p>
          </div>

          <div className="stats-bento">
            {/* CARD 1 — Leads (BIG, sparkline rising) */}
            <div className="stat-bento sb-leads" data-reveal data-reveal-delay="1">
              <div className="sb-head">
                <span className="sb-tag">◆ Leads / mes</span>
                <span className="sb-pulse"><span className="dot"></span> EN VIVO</span>
              </div>
              <div className="sb-num">+{leadsPct}<span className="sb-pct">%</span></div>
              <div className="sb-spark">
                <svg viewBox="0 0 120 60" preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="sb1" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.5" />
                      <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  <path d={`${risingPath} L120,60 L0,60 Z`} fill="url(#sb1)" />
                  <path d={risingPath} stroke="var(--accent)" strokeWidth="2" fill="none" strokeLinecap="round" className="sb-spark-line" />
                  {[12,24,36,48,60,72,84,96,108].map((x,i) => {
                    const y = [52,48,42,38,30,22,15,8,5][i];
                    return <circle key={i} cx={x} cy={y} r="1.8" fill="var(--accent)" />;
                  })}
                  <circle cx="120" cy="3" r="4" fill="var(--accent)" className="sb-spark-end" />
                </svg>
              </div>
              <div className="sb-foot">
                <span>vs. lo que generaban antes del sistema</span>
                <span className="sb-trend up">↑ creciendo</span>
              </div>
            </div>

            {/* CARD 2 — CPL (bars descendente) */}
            <div className="stat-bento sb-cpl" data-reveal data-reveal-delay="2">
              <div className="sb-head">
                <span className="sb-tag">◆ Costo / lead</span>
                <span className="sb-status green">↓ bajando</span>
              </div>
              <div className="sb-num sb-num-down">−{cplPct}<span className="sb-pct">%</span></div>
              <div className="sb-bars">
                {[80, 72, 65, 55, 48, 42, 35, 30, 25, 20].map((h, i) => (
                  <div key={i} className="sb-bar" style={{height: `${h}%`, animationDelay: `${i * 60}ms`}}></div>
                ))}
              </div>
              <div className="sb-foot">
                <span>tras 60 días de optimización continua</span>
              </div>
            </div>

            {/* CARD 3 — ROAS (gauge) */}
            <div className="stat-bento sb-roas" data-reveal data-reveal-delay="3">
              <div className="sb-head">
                <span className="sb-tag">◆ ROAS típico</span>
                <span className="sb-status">excepcional</span>
              </div>
              <div className="sb-gauge">
                <svg viewBox="0 0 120 70">
                  <path d="M 10 60 A 50 50 0 0 1 110 60" stroke="var(--surface-3)" strokeWidth="6" fill="none" strokeLinecap="round" />
                  <path d="M 10 60 A 50 50 0 0 1 110 60"
                    stroke="var(--accent)" strokeWidth="6" fill="none" strokeLinecap="round"
                    strokeDasharray="157" strokeDashoffset="35"
                    className="sb-gauge-arc" />
                </svg>
                <div className="sb-gauge-num">{roas.toFixed(1)}<span>×</span></div>
              </div>
              <div className="sb-foot">
                <span>retorno por cada $1 invertido en Meta</span>
              </div>
            </div>

            {/* CARD 4 — Días al primer lead (countdown visual) */}
            <div className="stat-bento sb-days" data-reveal data-reveal-delay="4">
              <div className="sb-head">
                <span className="sb-tag">◆ Días al primer lead</span>
                <span className="sb-status">desde firma</span>
              </div>
              <div className="sb-num sb-num-mono">{days}</div>
              <div className="sb-dotsline">
                {Array.from({length: 7}).map((_, i) => (
                  <div key={i} className={`sb-dotline-dot ${inView ? "lit" : ""}`} style={{transitionDelay: `${i * 120}ms`}}></div>
                ))}
              </div>
              <div className="sb-foot">
                <span>desde el día que firmás hasta el primer mensaje</span>
              </div>
            </div>
          </div>

          {/* Bottom strip */}
          <div className="stats-strip" data-reveal data-reveal-delay="5">
            <span>◆ Promedios reales · 47 negocios activos · Argentina · 2025–2026</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ==========================================================================
   DAYTIMELINE — vertical zigzag, central line con dots, mini-mockups por hora
   ========================================================================== */
function DayTimeline() {
  const sectionRef = useRef2(null);
  const inView = useInViewport(sectionRef, 0.1);

  const rows = [
    {
      time: "07:40", meta: "Martes · AM", stat: "+3", side: "left",
      title: "Te despertás con 3 leads.",
      desc: "Llegaron durante la noche mientras Meta Ads corría solo. Ya están en tu WhatsApp esperándote.",
      mock: "wa-multi"
    },
    {
      time: "10:15", meta: "Martes · AM", stat: "90s", side: "right",
      title: "Respondés con plantilla.",
      desc: "Copiás, pegás, adaptás un nombre. 90 segundos. El lead cree que hablás con él en tiempo real.",
      mock: "wa-template"
    },
    {
      time: "14:30", meta: "Martes · PM", stat: "↓ 12%", side: "left",
      title: "Mirás el dashboard.",
      desc: "14 leads del día, 3 ya reservaron, costo por lead bajó 12%. Todo en una pantalla.",
      mock: "dashboard"
    },
    {
      time: "18:00", meta: "Martes · PM", stat: "+4", side: "right",
      title: "Cerraste 4 ventas.",
      desc: "Sin perseguir a nadie. Sin ir a un evento. Sin rezarle al algoritmo de Instagram.",
      mock: "sale"
    },
    {
      time: "22:00", meta: "Martes · PM", stat: "zzz", side: "left",
      title: "Te vas a dormir tranquilo.",
      desc: "Mañana, pasado y la semana que viene, el sistema sigue trabajando. Aunque vos no.",
      mock: "lockscreen"
    },
  ];

  return (
    <section id="dia" ref={sectionRef}>
      <div className="container">
        <div className="surface day-surface" data-reveal>
          <div className="sec-orb so1"></div>
          <div className="sec-orb so2"></div>

          <div className="sec-head-2">
            <span className="eyebrow"><span className="dot"></span> 05 · Un día con el sistema</span>
            <h2>Cómo se siente vivirlo <em>desde adentro.</em></h2>
            <p>No es un embudo en un PDF. Es qué pasa en tu celular un martes cualquiera mientras atendés a otro cliente.</p>
          </div>

          <div className="day-timeline">
            {/* línea central */}
            <div className="dt-line">
              <div className={`dt-line-fill ${inView ? "fill" : ""}`}></div>
            </div>

            {rows.map((r, i) => (
              <div key={i} className={`dt-row dt-${r.side}`} data-reveal data-reveal-delay={i+1}>
                {/* dot central */}
                <div className={`dt-dot ${inView ? "lit" : ""}`} style={{transitionDelay: `${i * 200}ms`}}>
                  <span className="dt-dot-inner"></span>
                  <span className="dt-dot-pulse"></span>
                </div>

                {/* contenido (alterna lado) */}
                <div className="dt-content">
                  <div className="dt-time">
                    <span>{r.time}</span>
                    <small>{r.meta}</small>
                    {r.stat && <span className={`dt-stat ${r.stat === "zzz" ? "zzz" : ""}`}>{r.stat}</span>}
                  </div>
                  <h4>{r.title}</h4>
                  <div className="dt-desc">{r.desc}</div>
                </div>

                {/* mockup mini al lado opuesto */}
                <div className="dt-mock">
                  {r.mock === "wa-multi" && <DayMockWAMulti />}
                  {r.mock === "wa-template" && <DayMockWATemplate />}
                  {r.mock === "dashboard" && <DayMockDashboard />}
                  {r.mock === "sale" && <DayMockSale />}
                  {r.mock === "lockscreen" && <DayMockLock />}
                </div>
              </div>
            ))}
          </div>

          {/* cierre */}
          <div className="dt-closing" data-reveal data-reveal-delay="7">
            <span className="dt-closing-eyebrow">◆ Eso, todos los martes</span>
            <div className="dt-closing-text">Y miércoles. Y jueves. Y los domingos también.</div>
            <a href="https://wa.me/5493518692782?text=Hola!%20Quiero%20que%20mis%20d%C3%ADas%20se%20vean%20as%C3%AD." target="_blank" rel="noopener" className="dt-closing-cta">
              <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
              Quiero esto para mi negocio
              <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* mini-mockups del DayTimeline */
function DayMockWAMulti() {
  return (
    <div className="dm-frame dm-wa">
      <div className="dm-wa-head">
        <span className="dm-wa-back">‹</span>
        <strong>Chats</strong>
        <span className="dm-wa-search">⌕</span>
      </div>
      <div className="dm-wa-list">
        <div className="dm-wa-item">
          <div className="dm-av" style={{background:"#e8a85c"}}>M</div>
          <div className="dm-wa-meta">
            <strong>Mariana G. <span className="dm-new">●</span></strong>
            <span>Hola! Vi el aviso…</span>
          </div>
          <span className="dm-time">07:32</span>
        </div>
        <div className="dm-wa-item">
          <div className="dm-av" style={{background:"#7dd87d"}}>F</div>
          <div className="dm-wa-meta">
            <strong>Florencia R. <span className="dm-new">●</span></strong>
            <span>Quiero turno por favor</span>
          </div>
          <span className="dm-time">06:48</span>
        </div>
        <div className="dm-wa-item">
          <div className="dm-av" style={{background:"#c2473e"}}>D</div>
          <div className="dm-wa-meta">
            <strong>Diego P. <span className="dm-new">●</span></strong>
            <span>Disponible mañana?</span>
          </div>
          <span className="dm-time">02:15</span>
        </div>
      </div>
    </div>
  );
}

function DayMockWATemplate() {
  return (
    <div className="dm-frame dm-wa">
      <div className="dm-wa-head">
        <span className="dm-wa-back">‹</span>
        <div className="dm-av small" style={{background:"#e8a85c"}}>M</div>
        <strong style={{flex:1, textAlign:"left"}}>Mariana G.</strong>
        <span className="dm-wa-call">📞</span>
      </div>
      <div className="dm-wa-thread">
        <div className="dm-bub in">Hola! Vi el aviso, tienen turno mañana?</div>
        <div className="dm-bub out">¡Hola <em>Mariana</em>! Tengo 11:30 o 16hs ✨</div>
        <div className="dm-bub typing"><span></span><span></span><span></span></div>
      </div>
      <div className="dm-wa-tag">PLANTILLA · 90s</div>
    </div>
  );
}

function DayMockDashboard() {
  const bars = [40, 55, 48, 65, 72, 60, 80, 85, 78, 90, 88, 92];
  return (
    <div className="dm-frame dm-dash">
      <div className="dm-dash-head">
        <span>DASHBOARD · HOY</span>
        <span className="dm-dash-live">● LIVE</span>
      </div>
      <div className="dm-dash-stats">
        <div><span>14</span><small>leads</small></div>
        <div><span>3</span><small>reservas</small></div>
        <div className="dm-down"><span>−12%</span><small>CPL</small></div>
      </div>
      <div className="dm-dash-chart">
        {bars.map((h, i) => (
          <div key={i} className="dm-dash-bar" style={{height: `${h}%`}}></div>
        ))}
      </div>
    </div>
  );
}

function DayMockSale() {
  return (
    <div className="dm-frame dm-sale">
      <div className="dm-sale-icon">✓</div>
      <div className="dm-sale-text">
        <strong>+1 venta</strong>
        <span>$38.240 · Mariana G.</span>
      </div>
      <div className="dm-sale-stack">
        <div className="dm-sale-stack-item"></div>
        <div className="dm-sale-stack-item"></div>
        <div className="dm-sale-stack-item"></div>
        <div className="dm-sale-stack-item"></div>
      </div>
      <div className="dm-sale-foot">4ta hoy · ROAS 7.4×</div>
    </div>
  );
}

function DayMockLock() {
  return (
    <div className="dm-frame dm-lock">
      <div className="dm-lock-time">22:00</div>
      <div className="dm-lock-date">Martes 14 · Mayo</div>
      <div className="dm-lock-notif">
        <span className="dm-lock-app">SC · Ads</span>
        <span className="dm-lock-msg">Sistema activo · Mañana a las 6:00</span>
      </div>
      <div className="dm-lock-zzz">zzz</div>
    </div>
  );
}

window.Sistema = Sistema;
window.StatRow = StatRow;
window.DayTimeline = DayTimeline;