// === Nav + Drawer =========================================================
const { useState, useEffect, useRef } = React;

/**
 * Kaiko-style CTA button
 * Structure: [●→] LABEL   → on hover morphs to  LABEL [●→]
 * Primary: navy/blue body · white circle · arrow in brand blue
 * Hover: fills teal/light-blue · circle stays
 */
/** Abre Gmail compose en el browser (más predecible que mailto: en desktop). */
const GMAIL_SALES =
  'https://mail.google.com/mail/?view=cm&fs=1&to=hola@pymestudio.xyz&su=' +
  encodeURIComponent('Consulta PymeStudio — ventas');

function BtnK({ href = '#', children, variant = '', size = '', className = '', onClick, target, rel }) {
  const cls = ['btnk', variant && `btnk--${variant}`, size && `btnk--${size}`, className]
    .filter(Boolean).join(' ');
  return (
    <a href={href} className={cls} onClick={onClick} target={target} rel={rel}>
      {/* idle layer: icon left + label */}
      <span className="btnk__idle">
        <span className="btnk__dot" aria-hidden="true">
          <IconArrowRight size={14} />
        </span>
        <span className="btnk__txt">{children}</span>
      </span>
      {/* hover layer: label left + icon right (Kaiko morph) */}
      <span className="btnk__fly" aria-hidden="true">
        <span className="btnk__txt">{children}</span>
        <span className="btnk__dot">
          <IconArrowRight size={14} />
        </span>
      </span>
    </a>
  );
}

function Nav({ onOpenMenu, scrolled, onLogin, onSignup }) {
  const openLogin = (e) => {
    if (onLogin) { e.preventDefault(); onLogin(); }
  };
  const openSignup = (e) => {
    if (onSignup) { e.preventDefault(); onSignup(); }
  };
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav__inner">
        <a href="index.html" className="nav__logo">
          {/* Dark hero → white mono · Scrolled light menu → brand color */}
          <SumaWordmark
            size={32}
            variant={scrolled ? "color" : "light"}
            fontSize={18}
          />
        </a>
        <nav className="nav__links">
          <div className="nav__item">
            <a href="index.html#productos">Productos ▾</a>
            <div className="nav__dropdown">
              <a className="nav__dropdown-item" href="factura-facil.html">
                <span className="nav__dropdown-icon"><IconFactura size={18}/></span>
                <span>
                  <div className="nav__dropdown-title">FacturaFácil</div>
                  <div className="nav__dropdown-desc">Facturación ARCA con CAE real · Mono y RI</div>
                </span>
              </a>
              <a className="nav__dropdown-item" href="dashboard-bi.html">
                <span className="nav__dropdown-icon"><IconChart size={18}/></span>
                <span>
                  <div className="nav__dropdown-title">Dashboard BI</div>
                  <div className="nav__dropdown-desc">Visibilidad financiera + asesor IA</div>
                </span>
              </a>
              <a className="nav__dropdown-item" href="retail.html">
                <span className="nav__dropdown-icon"><IconCard size={18}/></span>
                <span>
                  <div className="nav__dropdown-title">Retail</div>
                  <div className="nav__dropdown-desc">POS + retail + stock para comercios</div>
                </span>
              </a>
              <a className="nav__dropdown-item" href="agropecuario.html">
                <span className="nav__dropdown-icon"><IconBox size={18}/></span>
                <span>
                  <div className="nav__dropdown-title">Agropecuario</div>
                  <div className="nav__dropdown-desc">Gestión de campo, hacienda y costos</div>
                </span>
              </a>
              <a className="nav__dropdown-item" href="ecommerce.html">
                <span className="nav__dropdown-icon"><IconGlobe size={18}/></span>
                <span>
                  <div className="nav__dropdown-title">Commerce</div>
                  <div className="nav__dropdown-desc">Headless · omnichannel · storefronts</div>
                </span>
              </a>
            </div>
          </div>
          <a href="index.html#como-funciona">Cómo funciona</a>
          <a href="index.html#servicios">Servicios</a>
          <a href="index.html#precios">Precios</a>
          <a href="index.html#recursos">Recursos</a>
          <a href="index.html#contacto">Soporte</a>
        </nav>
        <div className="nav__cta">
          <a href="/portal" className="nav__login" onClick={openLogin}>Ingresar</a>
          <BtnK href="#contacto" size="sm" variant="frost" onClick={openSignup}>Probar gratis</BtnK>
        </div>
        <button type="button" className="nav__menu-btn" aria-label="Abrir menú" onClick={onOpenMenu}>
          <IconMenu size={20} />
        </button>
      </div>
    </header>
  );
}

function Drawer({ open, onClose, onLogin, onSignup }) {
  const openLogin = (e) => {
    if (onLogin) { e.preventDefault(); onClose(); onLogin(); }
  };
  const openSignup = (e) => {
    if (onSignup) { e.preventDefault(); onClose(); onSignup(); }
  };
  return (
    <div className={"drawer" + (open ? " open" : "")}>
      <div className="container" style={{display:'flex', flexDirection:'column', flex:1}}>
        <div className="drawer__head">
          <a href="index.html" className="nav__logo">
            <SumaWordmark size={38} variant="color" fontSize={22} />
          </a>
          <button className="nav__menu-btn" style={{display:'inline-flex'}} onClick={onClose} aria-label="Cerrar menú">
            <IconClose size={20} />
          </button>
        </div>
        <nav className="drawer__links">
          <a onClick={onClose} href="factura-facil.html">FacturaFácil</a>
          <a onClick={onClose} href="dashboard-bi.html">Dashboard BI</a>
          <a onClick={onClose} href="retail.html">Retail</a>
          <a onClick={onClose} href="agropecuario.html">Agropecuario</a>
          <a onClick={onClose} href="ecommerce.html">Commerce</a>
          <a onClick={onClose} href="index.html#como-funciona">Cómo funciona</a>
          <a onClick={onClose} href="index.html#servicios">Servicios</a>
          <a onClick={onClose} href="index.html#precios">Precios</a>
          <a onClick={onClose} href="index.html#recursos">Recursos</a>
          <a onClick={onClose} href="index.html#contacto">Soporte</a>
        </nav>
        <div className="drawer__cta" style={{flexDirection:'column'}}>
          <BtnK href="#contacto" onClick={openSignup}>Probar gratis</BtnK>
          <a href="/portal" className="btn btn--ghost" style={{width:'100%'}} onClick={openLogin}>Ingresar</a>
        </div>
      </div>
    </div>
  );
}

// === Auth modals (login / signup) ===========================================
/** Demo = full access a todos los servicios (así se evalúa la plataforma). */
function seedDemoSession(email, nombre) {
  const e = (email || '').trim();
  const n = (nombre || e.split('@')[0] || 'Demo').trim();
  localStorage.setItem('ps_token', 'demo-' + btoa(e || 'demo@pymestudio.xyz'));
  localStorage.setItem('ps_email', e || 'demo@pymestudio.xyz');
  localStorage.setItem('ps_nombre', n);
  localStorage.setItem('ps_plan', 'demo');
  localStorage.setItem('ps_plan_status', 'active');
  const trialEnd = new Date();
  trialEnd.setDate(trialEnd.getDate() + 14);
  localStorage.setItem('ps_trial_ends', trialEnd.toISOString());
}

function AuthModal({ open, onClose, children }) {
  useEffect(() => {
    if (!open) return;
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="auth-overlay" role="dialog" aria-modal="true">
      <div className="auth-overlay__bg" onClick={onClose} />
      <div className="auth-modal" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="auth-modal__close" onClick={onClose} aria-label="Cerrar">
          <IconClose size={18} />
        </button>
        {children}
      </div>
    </div>
  );
}

function LoginModal({ open, onClose, onSwitch }) {
  const [email, setEmail] = useState('');
  const [pass, setPass] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [mode, setMode] = useState('login'); // login | forgot
  const [forgotMsg, setForgotMsg] = useState('');

  useEffect(() => {
    if (!open) {
      setEmail(''); setPass(''); setLoading(false); setError(''); setMode('login'); setForgotMsg('');
    }
  }, [open]);

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    if (!email || !pass) { setError('Completá email y contraseña.'); return; }
    setLoading(true);
    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim(), password: pass }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        // Local / no API: demo full access (todos los módulos)
        if (res.status === 404 || res.status === 0 || res.status >= 500) {
          if (pass.length >= 4) {
            seedDemoSession(email.trim());
            window.location.href = 'portal.html';
            return;
          }
        }
        throw new Error(data.error || 'Credenciales incorrectas');
      }
      localStorage.setItem('ps_token', data.token);
      localStorage.setItem('ps_email', email.trim());
      if (data.razonSocial) localStorage.setItem('ps_nombre', data.razonSocial);
      else localStorage.setItem('ps_nombre', email.trim().split('@')[0]);
      // cuenta real: no forzar plan demo
      window.location.href = 'portal.html';
    } catch (err) {
      // Offline / static server: demo full access
      if (err.message === 'Failed to fetch' || err.name === 'TypeError') {
        if (pass.length >= 4) {
          seedDemoSession(email.trim());
          window.location.href = 'portal.html';
          return;
        }
      }
      setError(err.message || 'No se pudo ingresar. Intentá de nuevo.');
      setLoading(false);
    }
  };

  const submitForgot = async (e) => {
    e.preventDefault();
    setForgotMsg('');
    if (!email) { setError('Ingresá tu email.'); return; }
    setLoading(true);
    setError('');
    // Soft UX: no backend required for reset UI
    await new Promise((r) => setTimeout(r, 700));
    setForgotMsg('Si existe una cuenta con ese email, te enviamos un link de recuperación.');
    setLoading(false);
  };

  return (
    <AuthModal open={open} onClose={onClose}>
      <div className="auth-modal__brand">
        <SumaWordmark size={32} variant="color" fontSize={18} />
      </div>
      {mode === 'login' ? (
        <React.Fragment>
          <h2 className="auth-modal__title">Ingresá a tu cuenta</h2>
          <p className="auth-modal__sub">Gestioná suscripción, módulos y soporte desde tu portal.</p>
          <form onSubmit={submit}>
            <div className="auth-field">
              <label htmlFor="login-email">Email</label>
              <input id="login-email" type="email" autoComplete="email" required
                value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="vos@empresa.com" />
            </div>
            <div className="auth-field">
              <label htmlFor="login-pass">Contraseña</label>
              <input id="login-pass" type="password" autoComplete="current-password" required
                value={pass} onChange={(e) => setPass(e.target.value)}
                placeholder="••••••••" />
            </div>
            <button type="button" className="auth-link" onClick={() => { setMode('forgot'); setError(''); }}>
              ¿Olvidaste tu contraseña?
            </button>
            {error && <div className="auth-error">{error}</div>}
            <button type="submit" className="auth-submit" disabled={loading}>
              {loading ? 'Ingresando…' : 'Ingresar'}
            </button>
          </form>
          <p className="auth-switch">
            ¿No tenés cuenta?{' '}
            <button type="button" onClick={onSwitch}>Probá gratis 14 días</button>
          </p>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <h2 className="auth-modal__title">Recuperar contraseña</h2>
          <p className="auth-modal__sub">Te enviamos un link para crear una nueva.</p>
          <form onSubmit={submitForgot}>
            <div className="auth-field">
              <label htmlFor="forgot-email">Email de tu cuenta</label>
              <input id="forgot-email" type="email" required
                value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="vos@empresa.com" />
            </div>
            {error && <div className="auth-error">{error}</div>}
            {forgotMsg && (
              <div className="auth-error" style={{background:'#E8F5EE',color:'#1E7A4A'}}>{forgotMsg}</div>
            )}
            <button type="submit" className="auth-submit" disabled={loading}>
              {loading ? 'Enviando…' : 'Enviar link'}
            </button>
          </form>
          <p className="auth-switch">
            <button type="button" onClick={() => { setMode('login'); setForgotMsg(''); setError(''); }}>
              ← Volver al login
            </button>
          </p>
        </React.Fragment>
      )}
    </AuthModal>
  );
}

function SignupModal({ open, onClose, onSwitch }) {
  const [form, setForm] = useState({ nombre: '', email: '', empresa: '', tel: '', password: '' });
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);
  const [error, setError] = useState('');
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  useEffect(() => {
    if (!open) {
      const t = setTimeout(() => {
        setDone(false); setError('');
        setForm({ nombre: '', email: '', empresa: '', tel: '', password: '' });
      }, 280);
      return () => clearTimeout(t);
    }
  }, [open]);

  const submit = async (e) => {
    e.preventDefault();
    if (form.password.length < 6) {
      setError('La contraseña debe tener al menos 6 caracteres.');
      return;
    }
    setLoading(true);
    setError('');
    try {
      // Signup local = demo full access (todos los módulos)
      seedDemoSession(form.email, form.nombre);
      if (form.empresa.trim()) localStorage.setItem('ps_empresa', form.empresa.trim());
      setDone(true);
    } catch (err) {
      setError(err.message || 'No se pudo crear la cuenta.');
    } finally {
      setLoading(false);
    }
  };

  const fields = [
    { k: 'nombre', label: 'Nombre completo', type: 'text', ph: 'Juan García' },
    { k: 'email', label: 'Email de trabajo', type: 'email', ph: 'vos@empresa.com' },
    { k: 'password', label: 'Contraseña', type: 'password', ph: 'Mínimo 6 caracteres' },
    { k: 'empresa', label: 'Empresa', type: 'text', ph: 'Mi PyME S.A.' },
    { k: 'tel', label: 'Teléfono (opcional)', type: 'tel', ph: '+54 11 1234-5678' },
  ];

  return (
    <AuthModal open={open} onClose={onClose}>
      {done ? (
        <div className="auth-success">
          <div className="auth-success__icon">✓</div>
          <h2>¡Listo, {form.nombre.split(' ')[0] || 'equipo'}!</h2>
          <p>
            Tu prueba de 14 días está lista. Entrá al portal y activá los módulos que necesites.
          </p>
          <button type="button" className="auth-submit" onClick={() => { window.location.href = 'portal.html'; }}>
            Ir a mi cuenta
          </button>
        </div>
      ) : (
        <React.Fragment>
          <div className="auth-modal__brand">
            <SumaWordmark size={32} variant="color" fontSize={18} />
          </div>
          <h2 className="auth-modal__title">Probá gratis 14 días</h2>
          <p className="auth-modal__sub">Sin tarjeta. Sin compromisos. Cancelás cuando querés.</p>
          <form onSubmit={submit}>
            {fields.map(({ k, label, type, ph }) => (
              <div className="auth-field" key={k}>
                <label htmlFor={'signup-' + k}>{label}</label>
                <input
                  id={'signup-' + k}
                  type={type}
                  required={k !== 'tel'}
                  value={form[k]}
                  onChange={set(k)}
                  placeholder={ph}
                  autoComplete={k === 'password' ? 'new-password' : k === 'email' ? 'email' : 'off'}
                />
              </div>
            ))}
            {error && <div className="auth-error">{error}</div>}
            <button type="submit" className="auth-submit" disabled={loading}>
              {loading ? 'Creando cuenta…' : (
                <React.Fragment>Empezar prueba gratis <IconArrowRight size={16} /></React.Fragment>
              )}
            </button>
          </form>
          <p className="auth-switch">
            ¿Ya tenés cuenta?{' '}
            <button type="button" onClick={onSwitch}>Ingresá acá</button>
          </p>
        </React.Fragment>
      )}
    </AuthModal>
  );
}

// === Reveal-on-scroll hook ================================================
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    // Failsafe: elements already in view (or IO flaky) become visible
    const show = (el) => el.classList.add('in');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          show(e.target);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '40px 0px 0px 0px' });
    els.forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.95 && r.bottom > 0) show(el);
      else io.observe(el);
    });
    // Second pass after layout settles (product pages / Babel)
    const t = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 1.1) show(el);
      });
    }, 120);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
}

// === Hero (Kaiko-style: centered copy on atmospheric bg) ==================
const AVATARS = [
  "https://i.pravatar.cc/96?img=12",
  "https://i.pravatar.cc/96?img=47",
  "https://i.pravatar.cc/96?img=33",
  "https://i.pravatar.cc/96?img=15",
];

function AvatarStack() {
  return (
    <div className="hero__avatars">
      <div className="hero__avatar-stack">
        {AVATARS.map((src, i) => (
          <div key={i} className="hero__avatar" style={{ backgroundImage: `url(${src})` }} />
        ))}
      </div>
      <div>
        <div style={{fontSize:14, fontWeight:500, fontFamily:'var(--font-display)'}}>+100 PyMEs activas</div>
        <div style={{fontSize:12.5, color:'var(--muted)'}}>Facturando con ARCA cada día</div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container hero__center">
        <h1 className="hero__title">
          Diagnóstico e<br/>
          <em>implementación.</em><br/>
          Acompañamiento<br className="show-mobile"/> <em>real.</em>
        </h1>
        <p className="hero__sub">
          No vendemos solo una plataforma: diagnosticamos, implementamos y acompañamos con datos reales de <em>tu PyME</em>.
        </p>

        <div className="hero__avatars" style={{marginTop: 24, animation:'heroUp .8s ease-out .28s both'}}>
          <div className="hero__avatar-stack">
            {['#CCE2BD','#E9E4CE','#4CB8EA','#fff'].map((c, i) => (
              <div key={i} className="hero__avatar" style={{ background: c, borderColor: '#17335E' }} />
            ))}
          </div>
          <div style={{textAlign:'left'}}>
            <div style={{fontSize:13, fontWeight:600, color:'#fff'}}>+100 PyMEs activas</div>
            <div style={{fontSize:12, color:'rgba(255,255,255,.75)'}}>Facturando con ARCA cada día</div>
          </div>
        </div>

        <div className="hero__ctas">
          <BtnK href={GMAIL_SALES} target="_blank" rel="noopener noreferrer">Hablar con el equipo</BtnK>
          <BtnK href="#productos" variant="ghost">Ver cómo funciona</BtnK>
        </div>

        <div className="hero__trustline">
          <span><IconCheck size={14}/> Sin tarjeta</span>
          <span><IconCheck size={14}/> Migración asistida</span>
          <span><IconCheck size={14}/> Soporte humano en español</span>
        </div>
      </div>
    </section>
  );
}

// In-hero ambient dashboard loop
function HeroDashboardLoop({ wide }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 1800);
    return () => clearInterval(t);
  }, []);
  const rows = ['Lacteos del Sur SA', 'Distribuidora Norte', 'Estudio Garcia & Asoc.', 'Pizzeria La Esquina', 'Taller Mecanico JR'];
  return (
    <div style={{
      position:'absolute', inset: wide ? '60px 80px' : '60px 36px',
      display:'flex', flexDirection:'column', gap:14,
    }}>
      <div style={{display:'flex', gap:14, flexWrap:'wrap'}}>
        <MiniStat label="Facturado hoy" value="$ 184.500" trend="+8%" />
        <MiniStat label="Por cobrar" value="$ 62.300" trend="−3%" neg />
        <MiniStat label="Stock crítico" value="2 items" trend="" />
      </div>
      <div style={{
        flex:1, background:'rgba(250,250,250,.06)',
        border:'1px solid rgba(250,250,250,.10)',
        borderRadius:14, padding:14, color:'#FAFAFA', fontSize:12.5,
        display:'flex', flexDirection:'column', gap:10, overflow:'hidden'
      }}>
        <div style={{display:'flex', justifyContent:'space-between', opacity:.7, fontSize:11, letterSpacing:'.05em', textTransform:'uppercase', fontFamily:'var(--font-display)'}}>
          <span>Facturas recientes</span>
          <span>CAE</span>
        </div>
        {rows.map((r, i) => {
          const cae = (700000000000 + tick * 17 + i * 31).toString().slice(0, 14);
          return (
            <div key={i} style={{
              display:'flex', justifyContent:'space-between',
              padding:'8px 0', borderTop: i===0?'none':'1px solid rgba(250,250,250,.08)',
              opacity: 1 - i*.08, fontVariantNumeric:'tabular-nums'
            }}>
              <span>{r}</span>
              <span style={{fontFamily:'var(--font-mono)', opacity:.65}}>{cae}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}
function MiniStat({ label, value, trend, neg }) {
  return (
    <div style={{
      flex:1, minWidth:140,
      background:'rgba(250,250,250,.08)',
      border:'1px solid rgba(250,250,250,.10)',
      borderRadius:12, padding:'12px 14px', color:'#FAFAFA'
    }}>
      <div style={{fontSize:11, opacity:.6, letterSpacing:'.05em', textTransform:'uppercase', fontFamily:'var(--font-display)'}}>{label}</div>
      <div style={{fontSize:20, marginTop:4, fontWeight:500, letterSpacing:'-0.02em', fontFamily:'var(--font-display)'}}>{value}</div>
      {trend && (
        <div style={{
          fontSize:11.5, marginTop:6,
          color: neg ? '#FFC5A7' : '#86D6D2'
        }}>{trend} vs ayer</div>
      )}
    </div>
  );
}

// === Marquee ==============================================================
const LOGOS = [
  { name: "ARCA", sub: "AFIP" },
  { name: "Mercado Pago" },
  { name: "Modo" },
  { name: "Banco Galicia" },
  { name: "Tiendanube" },
  { name: "Andreani" },
  { name: "Naranja X" },
  { name: "Santander" },
  { name: "Mercado Libre" },
];
function Marquee() {
  const items = [...LOGOS, ...LOGOS];
  return (
    <div className="marquee">
      <div className="container" style={{marginBottom:20, display:'flex', justifyContent:'center'}}>
        <span className="eyebrow">Integrado con tus herramientas</span>
      </div>
      <div className="marquee__track">
        {items.map((l, i) => (
          <div className="marquee__item" key={i}>
            <span style={{color:'var(--blue)'}}>✶</span>
            <span>{l.name}</span>
            {l.sub && <span style={{fontSize:12, color:'var(--muted)'}}>· {l.sub}</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

// === Stats ================================================================
function Stats() {
  const items = [
    { num: "+100", label: "PyMEs ya facturan con PymeStudio cada mes" },
    { num: "99.9%", label: "Uptime promedio, monitoreado 24/7" },
    { num: "<2", em: "min", label: "Para emitir tu primera factura electrónica" },
    { num: "100%", label: "Argentino · soporte humano en español" },
  ];
  return (
    <section style={{padding:'80px 0 96px'}}>
      <div className="container">
        <div className="reveal" style={{marginBottom: 48, maxWidth: 720}}>
          <span className="eyebrow">Números reales</span>
          <h2 className="section-title">
            En gestión PyME, la escala nace de la <em>profundidad.</em>
          </h2>
          <p className="lede">
            Productos construidos, validados y probados con empresas reales en el día a día argentino.
          </p>
        </div>
        <div className="stats reveal">
          {items.map((s, i) => (
            <div className="stats__item" key={i}>
              <p className="stats__num">{s.num}{s.em ? <em> {s.em}</em> : null}</p>
              <p className="stats__label">{s.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Capas del sistema (accordion + rich stage mocks) =====================
function StageFactura() {
  return (
    <div className="stage-mock stage-mock--factura">
      <div className="stage-mock__bar">
        <span className="stage-mock__dot" />
        <span className="stage-mock__bar-title">Factura A · 0001-00000128</span>
        <span className="stage-mock__pill stage-mock__pill--ok">CAE OK</span>
      </div>
      <div className="stage-mock__body">
        <div className="stage-mock__row">
          <div>
            <div className="stage-mock__label">Cliente</div>
            <div className="stage-mock__value">Lácteos del Sur S.A.</div>
            <div className="stage-mock__muted">CUIT 30-71234567-8</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div className="stage-mock__label">Total</div>
            <div className="stage-mock__value stage-mock__value--lg">$ 84.250</div>
          </div>
        </div>
        <div className="stage-mock__divider" />
        <div className="stage-mock__meta">
          <div><span className="stage-mock__label">CAE</span><div className="stage-mock__mono">70123456789012</div></div>
          <div><span className="stage-mock__label">Vto.</span><div className="stage-mock__mono">19/06/2026</div></div>
          <div><span className="stage-mock__label">ARCA</span><div className="stage-mock__mono" style={{color:'#7EE0A8'}}>~1.2s</div></div>
        </div>
        <div className="stage-mock__actions">
          <span className="stage-mock__chip">PDF enviado</span>
          <span className="stage-mock__chip">Mail cliente</span>
          <span className="stage-mock__chip">IVA 21%</span>
        </div>
      </div>
    </div>
  );
}

function StageWorkspace() {
  return (
    <div className="stage-mock stage-mock--workspace">
      <div className="stage-mock__bar">
        <span className="stage-mock__dot" />
        <span className="stage-mock__bar-title">Dashboard BI · Mayo 2026</span>
        <span className="stage-mock__pill">En vivo</span>
      </div>
      <div className="stage-mock__body">
        <div className="stage-mock__kpis">
          <div className="stage-mock__kpi">
            <div className="stage-mock__label">Facturado</div>
            <div className="stage-mock__value stage-mock__value--lg">$ 428k</div>
            <div className="stage-mock__trend">↑ +8,2%</div>
          </div>
          <div className="stage-mock__kpi">
            <div className="stage-mock__label">Margen</div>
            <div className="stage-mock__value stage-mock__value--lg">32%</div>
            <div className="stage-mock__trend">↑ +1,4%</div>
          </div>
          <div className="stage-mock__kpi">
            <div className="stage-mock__label">Por cobrar</div>
            <div className="stage-mock__value stage-mock__value--lg">$ 62k</div>
            <div className="stage-mock__trend stage-mock__trend--neg">3 vencidas</div>
          </div>
        </div>
        <div className="stage-mock__ai">
          <div className="stage-mock__ai-badge">Asesor IA</div>
          <p>Tu CMV subió 2 pts en lácteos. Revisá el top 3 de proveedores con más concentración.</p>
        </div>
      </div>
    </div>
  );
}

function StageFlujos() {
  const nodes = [
    { t: 'Factura', s: 'ARCA' },
    { t: 'Commerce', s: 'Headless' },
    { t: 'POS', s: 'Retail' },
    { t: 'Campo', s: 'Agro' },
  ];
  return (
    <div className="stage-mock stage-mock--flujos">
      <div className="stage-mock__bar">
        <span className="stage-mock__dot" />
        <span className="stage-mock__bar-title">Flujos conectados</span>
        <span className="stage-mock__pill">Suite</span>
      </div>
      <div className="stage-mock__body">
        <div className="stage-mock__flow">
          {nodes.map((n, i) => (
            <React.Fragment key={n.t}>
              <div className="stage-mock__node">
                <div className="stage-mock__node-t">{n.t}</div>
                <div className="stage-mock__node-s">{n.s}</div>
              </div>
              {i < nodes.length - 1 && <div className="stage-mock__arrow">→</div>}
            </React.Fragment>
          ))}
        </div>
        <div className="stage-mock__divider" />
        <div className="stage-mock__sync">
          <span className="stage-mock__pulse" />
          Datos compartidos entre módulos · sin doble carga
        </div>
        <div className="stage-mock__actions">
          <span className="stage-mock__chip">POS</span>
          <span className="stage-mock__chip">Compras</span>
          <span className="stage-mock__chip">SENASA</span>
          <span className="stage-mock__chip">API</span>
        </div>
      </div>
    </div>
  );
}

function Pillars() {
  const items = [
    {
      title: 'La facturación',
      body: 'CAE real con ARCA en segundos. Factura A, B y C, padrón A4, envío por email y lote desde Mercado Pago. Sin trámites ni errores de formato.',
      cta: 'Ver FacturaFácil',
      href: 'factura-facil.html',
      stageTitle: 'CAE en segundos',
      stageDesc: 'Conexión nativa con ARCA. Emitís, el CAE llega y el PDF sale solo al cliente.',
      stageLabel: '#01 Facturación',
      visual: <StageFactura />,
    },
    {
      title: 'El workspace',
      body: 'Dashboard contable con ventas, CMV, márgenes y asesor IA. Un solo lugar para ver la salud del negocio y actuar.',
      cta: 'Ver Dashboard BI',
      href: 'dashboard-bi.html',
      stageTitle: 'Todo en una pantalla',
      stageDesc: 'KPIs en vivo, alertas y recomendaciones con los números de tu empresa — no genéricos.',
      stageLabel: '#02 Workspace',
      visual: <StageWorkspace />,
    },
    {
      title: 'Los flujos de trabajo',
      body: 'Retail, commerce headless, agro y POS se enchufan cuando los necesitás. Stock unificado, OMS y campo sin cambiar de plataforma.',
      cta: 'Ver módulos',
      href: '#productos',
      stageTitle: 'Crece sin fricción',
      stageDesc: 'Sumá módulos a tu ritmo. Los datos se comparten entre facturación, stock, e-commerce y contabilidad.',
      stageLabel: '#03 Flujos',
      visual: <StageFlujos />,
    },
  ];
  const [active, setActive] = useState(0);

  return (
    <section id="capas" style={{paddingTop: 40}}>
      <div className="container">
        <div className="section-head reveal">
          {/* Antes: Plataforma · opciones: Ecosistema | Capas del sistema | Cómo se conecta */}
          <span className="eyebrow">Capas del sistema</span>
          <h2 className="section-title">
            Tres capas # una sola <em>operación.</em>
          </h2>
          <p className="lede">
            PymeStudio corre encima de lo que ya usás — ARCA, Mercado Pago, Drive —
            y conecta facturación, números y operaciones del día a día.
          </p>
        </div>
        <div className="pillars reveal">
          <div className="pillars__list">
            {items.map((item, i) => (
              <div
                key={item.title}
                className={'pillar' + (i === active ? ' active' : '')}
                onClick={() => setActive(i)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setActive(i); }}
              >
                <h3 className="pillar__title">
                  <span className="pillar__num">#{String(i + 1).padStart(2, '0')}</span>
                  {item.title}
                </h3>
                <div className="pillar__body">
                  <div className="pillar__inner">
                    <p>{item.body}</p>
                    <a href={item.href} className="btn btn--ghost pillar__cta" style={{height:40, fontSize:13.5}}>
                      {item.cta} <IconArrowRight size={14}/>
                    </a>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="pillars__stage">
            {items.map((item, i) => (
              <div key={item.title} className={'pillars__stage-panel' + (i === active ? ' active' : '')}>
                <div className="pillars__stage-label">{item.stageLabel}</div>
                <h4 className="pillars__stage-title">{item.stageTitle}</h4>
                <p className="pillars__stage-desc">{item.stageDesc}</p>
                <div className="pillars__stage-visual">
                  {item.visual}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// === Productos — bento con mock por módulo =================================
function ProdVisualFactura() {
  return (
    <div className="prod-viz prod-viz--dark">
      <div className="prod-viz__row">
        <div>
          <div className="prod-viz__label">Factura A</div>
          <div className="prod-viz__main">0001-00000128</div>
        </div>
        <div className="prod-viz__badge prod-viz__badge--ok">CAE</div>
      </div>
      <div className="prod-viz__row prod-viz__row--bottom">
        <div>
          <div className="prod-viz__label">Cliente</div>
          <div className="prod-viz__sub">Lácteos del Sur</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="prod-viz__label">Total</div>
          <div className="prod-viz__price">$ 84.250</div>
        </div>
      </div>
    </div>
  );
}
function ProdVisualBI() {
  return (
    <div className="prod-viz">
      <div className="prod-viz__kpis">
        <div><div className="prod-viz__label">Ventas</div><div className="prod-viz__kpi">$ 428k</div></div>
        <div><div className="prod-viz__label">Margen</div><div className="prod-viz__kpi">32%</div></div>
        <div><div className="prod-viz__label">CMV</div><div className="prod-viz__kpi prod-viz__kpi--warn">68%</div></div>
      </div>
      <div className="prod-viz__bars">
        {[40,65,45,80,55,90,70].map((h,i) => (
          <span key={i} style={{height: h + '%'}} />
        ))}
      </div>
    </div>
  );
}
function ProdVisualRetail() {
  return (
    <div className="prod-viz">
      <div className="prod-viz__pos">
        <div className="prod-viz__pos-line"><span>Café cortado</span><span>$ 2.800</span></div>
        <div className="prod-viz__pos-line"><span>Medialunas x2</span><span>$ 3.200</span></div>
        <div className="prod-viz__pos-line prod-viz__pos-line--total"><span>Total</span><span>$ 6.000</span></div>
      </div>
      <div className="prod-viz__pos-foot">
        <span className="prod-viz__chip">QR MODO</span>
        <span className="prod-viz__chip">MP</span>
      </div>
    </div>
  );
}
function ProdVisualAgro() {
  const pts = [48, 42, 44, 36, 40, 28, 32, 22, 26, 16, 20, 12];
  const w = 100, h = 48;
  const step = w / (pts.length - 1);
  const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${(i * step).toFixed(1)} ${p}`).join(' ');
  const area = `${d} L ${w} ${h} L 0 ${h} Z`;
  return (
    <div className="prod-viz prod-viz--agro">
      <div className="prod-viz__row">
        <div>
          <div className="prod-viz__label">Costo / ha</div>
          <div className="prod-viz__kpi">$ 412k</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="prod-viz__label">Campaña</div>
          <div className="prod-viz__sub">Soja 25/26</div>
        </div>
      </div>
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" className="prod-viz__chart">
        <defs>
          <linearGradient id="agroG" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#4CB8EA" stopOpacity=".4"/>
            <stop offset="100%" stopColor="#4CB8EA" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d={area} fill="url(#agroG)"/>
        <path d={d} fill="none" stroke="#4CB8EA" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

function ProdVisualCommerce() {
  return (
    <div className="prod-viz prod-viz--commerce">
      <div className="prod-viz__row">
        <div>
          <div className="prod-viz__label">Canales</div>
          <div className="prod-viz__sub">Web · App · Marketplaces</div>
        </div>
        <div className="prod-viz__badge prod-viz__badge--ok" style={{color:'#5B4EE5', background:'rgba(91,78,229,.12)'}}>Headless</div>
      </div>
      <div className="prod-viz__channels">
        <span>Storefront</span>
        <span className="prod-viz__ch-arrow">→</span>
        <span>API</span>
        <span className="prod-viz__ch-arrow">→</span>
        <span>OMS</span>
        <span className="prod-viz__ch-arrow">→</span>
        <span>Fulfillment</span>
      </div>
      <div className="prod-viz__pos-foot">
        <span className="prod-viz__chip">Shopify-ready</span>
        <span className="prod-viz__chip">Stock unificado</span>
      </div>
    </div>
  );
}

function Modules() {
  const products = [
    {
      id: 'factura',
      href: 'factura-facil.html',
      num: '#01',
      status: 'live',
      statusLabel: 'Disponible',
      icon: <IconFactura />,
      name: 'FacturaFácil',
      tagline: 'Facturación electrónica con CAE real de ARCA.',
      desc: 'Mono y RI, padrón A4, lote desde Mercado Pago e impuestos con forecast.',
      chips: ['CAE real', 'Padrón A4', 'CCMA', 'IIBB'],
      visual: <ProdVisualFactura />,
      featured: true,
    },
    {
      id: 'bi',
      href: 'dashboard-bi.html',
      num: '#02',
      status: 'live',
      statusLabel: 'Disponible',
      icon: <IconChart />,
      name: 'Dashboard BI',
      tagline: 'Números en vivo + asesor IA.',
      desc: 'Ventas, CMV, márgenes y proveedores. Sync con Google Drive.',
      chips: ['Asesor IA', 'Forecast', 'Pareto'],
      visual: <ProdVisualBI />,
    },
    {
      id: 'retail',
      href: 'retail.html',
      num: '#03',
      status: 'beta',
      statusLabel: 'Beta',
      icon: <IconCard />,
      name: 'Retail',
      tagline: 'POS, stock y fidelización.',
      desc: 'Comercios y gastronomía. MODO, Mercado Pago, cuotas y backoffice.',
      chips: ['POS tablet', 'MODO QR', 'Cuotas'],
      visual: <ProdVisualRetail />,
    },
    {
      id: 'commerce',
      href: 'ecommerce.html',
      num: '#04',
      status: 'live',
      statusLabel: 'Disponible',
      icon: <IconGlobe />,
      name: 'Commerce',
      tagline: 'Headless e-commerce + omnichannel.',
      desc: 'Storefronts, OMS y stock unificado. Como en Autonex, Shine Bright y Basket Bliss.',
      chips: ['Headless', 'OMS', 'Multi-canal'],
      visual: <ProdVisualCommerce />,
      featured: true,
    },
    {
      id: 'agro',
      href: 'agropecuario.html',
      num: '#05',
      status: 'beta',
      statusLabel: 'Beta',
      icon: <IconBox />,
      name: 'Agropecuario',
      tagline: 'Campo, hacienda y costos por ha.',
      desc: 'Lotes, SENASA DT-e, liquidaciones y modo offline en el campo.',
      chips: ['SENASA', 'Offline', 'Trazabilidad'],
      visual: <ProdVisualAgro />,
    },
  ];

  return (
    <section id="productos">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Productos</span>
          <h2 className="section-title">
            Cinco módulos # una sola <em>suite.</em>
          </h2>
          <p className="lede">
            Empezá por el que te aprieta hoy. Los datos se enchufan solos cuando sumes el resto —
            facturación, BI, retail, commerce y agro en el mismo ecosistema.
          </p>
        </div>

        <div className="prod-grid reveal">
          {products.map((p) => (
            <a
              key={p.id}
              href={p.href}
              className={'prod-card' + (p.featured ? ' prod-card--featured' : '')}
            >
              <div className="prod-card__top">
                <span className="prod-card__num">{p.num}</span>
              </div>

              <div className="prod-card__viz">{p.visual}</div>

              <div className="prod-card__body">
                <div className="prod-card__icon">{p.icon}</div>
                <h3 className="prod-card__name">{p.name}</h3>
                <p className="prod-card__tagline">{p.tagline}</p>
                <p className="prod-card__desc">{p.desc}</p>
                <div className="prod-card__chips">
                  {p.chips.map((c) => (
                    <span key={c} className="prod-card__chip">{c}</span>
                  ))}
                </div>
                <span className="prod-card__cta">
                  Ver producto <IconArrowUpRight size={16} />
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Dashboard mock section ==============================================
const DASH_TABS = [
  { key: 'Facturas', label: 'Facturas', desc: 'Emitidas en el mes, con CAE y vencimientos' },
  { key: 'Caja',     label: 'Caja',     desc: 'Flujo de ingresos y egresos en vivo' },
  { key: 'Stock',    label: 'Stock',    desc: 'Inventario por depósito con alertas' },
  { key: 'Equipo',   label: 'Equipo',   desc: 'Sueldos liquidados y F.931 listos' },
];

const DASH_FEATURES = [
  { icon: <IconBolt/>, title: 'Datos en tiempo real',
    desc: 'Lo que vendés, cobrás y gastás se sincroniza al instante entre módulos.' },
  { icon: <IconPlug/>, title: 'Sin doble carga',
    desc: 'Cada factura mueve stock, asiento contable y caja. No tipeás nada dos veces.' },
  { icon: <IconShield/>, title: 'Tu contador adentro',
    desc: 'Libros IVA, F.931 e integra con tu ERP sin salir del sistema.' },
];

function Dashboard() {
  const [tab, setTab] = useState(0);
  return (
    <section id="producto-en-accion">
      <div className="container">
        {/* Product visual moved from hero — better as a suite stage */}
        <div className="product-stage reveal">
          <div className="product-stage__copy">
            <span className="eyebrow">Facturación ARCA</span>
            <h2 className="section-title" style={{fontSize:'clamp(28px,3.6vw,44px)'}}>
              CAE real en segundos. <em>Sin fricción.</em>
            </h2>
            <p className="lede" style={{marginTop:14}}>
              El mock en vivo que antes estaba en el hero ahora muestra el producto
              donde corresponde: en la suite, listo para profundizar en FacturaFácil.
            </p>
            <div style={{display:'flex', gap:12, flexWrap:'wrap', marginTop:22, alignItems:'center'}}>
              <BtnK href="factura-facil.html">Ver FacturaFácil</BtnK>
              <BtnK href="#contacto" variant="ghost-light">Probar 14 días</BtnK>
            </div>
          </div>
          <div className="hero__visual hero__visual--video product-stage__visual">
            <div className="hero__visual-tag">ARCA conectado</div>
            <HeroDashboardLoop wide />
          </div>
        </div>

        <div className="dashboard reveal">
          <div className="dashboard__left">
            <span className="eyebrow" style={{color:'rgba(250,250,250,.55)'}}>El producto en acción</span>
            <h2 className="dashboard__title">
              Todo lo que pasa en tu PyME,<br/><em>en una sola pantalla.</em>
            </h2>
            <p className="dashboard__desc">
              Cambiá entre módulos sin perder el contexto. Los números cruzan entre
              facturación, banco, stock y sueldos —sin exportar Excels ni esperar al mes que viene.
            </p>
            <div className="dashboard__kpis">
              <div className="dashboard__kpi">
                <div className="dashboard__kpi-label">Facturado mes</div>
                <div className="dashboard__kpi-value">$ 428k</div>
                <div className="dashboard__kpi-trend">↑ +8,2% vs abril</div>
              </div>
              <div className="dashboard__kpi">
                <div className="dashboard__kpi-label">Caja del día</div>
                <div className="dashboard__kpi-value">$ 47k</div>
                <div className="dashboard__kpi-trend">↑ +12% vs ayer</div>
              </div>
              <div className="dashboard__kpi">
                <div className="dashboard__kpi-label">Por cobrar</div>
                <div className="dashboard__kpi-value">$ 18k</div>
                <div className="dashboard__kpi-trend dashboard__kpi-trend--neg">3 vencidas</div>
              </div>
            </div>
            <div className="dashboard__features">
              {DASH_FEATURES.map((f, i) => (
                <div key={i} className="dashboard__feature">
                  {f.icon}
                  <span><strong>{f.title}.</strong> {f.desc}</span>
                </div>
              ))}
            </div>
            <div className="dashboard__tabs">
              {DASH_TABS.map((t, i) => (
                <button key={t.key} className={"dashboard__tab" + (i === tab ? " active" : "")} onClick={() => setTab(i)}>
                  {t.label}
                </button>
              ))}
            </div>
            <div style={{fontSize:13.5, color:'rgba(250,250,250,.55)', marginBottom:24, minHeight:'1.4em'}}>
              {DASH_TABS[tab].desc}
            </div>
            <div style={{display:'flex', gap:12, flexWrap:'wrap', alignItems:'center'}}>
              <BtnK href="#contacto" variant="light">Ver demo guiada</BtnK>
              <BtnK href="#contacto" variant="ghost">Empezar gratis</BtnK>
            </div>
          </div>
          <div style={{display:'flex', alignItems:'center'}}>
            {tab === 0 && <UIFacturas/>}
            {tab === 1 && <UICaja/>}
            {tab === 2 && <UIStock/>}
            {tab === 3 && <UIEquipo/>}
          </div>
        </div>
      </div>
    </section>
  );
}

function UIShell({ title, children, badge }) {
  return (
    <div className="ui-mock">
      <div className="ui-mock__head">
        <div className="ui-mock__head-left">
          <span style={{width:10,height:10,borderRadius:'50%',background:'#387DD5',display:'inline-block'}}/>
          {title}
        </div>
        {badge && <span style={{fontSize:11.5, color:'var(--muted)', fontFamily:'var(--font-mono)'}}>{badge}</span>}
      </div>
      <div className="ui-mock__body">{children}</div>
    </div>
  );
}

function UIFacturas() {
  const rows = [
    ['00000128', 'Lácteos del Sur SA', 'A', '$ 84.250', 'CAE', 'ok'],
    ['00000127', 'Distribuidora Norte', 'B', '$ 32.400', 'CAE', 'ok'],
    ['00000126', 'Estudio García', 'A', '$ 28.600', 'Pendiente', 'pend'],
    ['00000125', 'Pizzería La Esquina', 'C', '$ 12.800', 'CAE', 'ok'],
    ['00000124', 'Taller Mec. JR', 'B', '$ 46.500', 'CAE', 'ok'],
  ];
  return (
    <UIShell title="Facturas emitidas" badge="MAY 2026">
      <div style={{display:'grid', gridTemplateColumns:'1fr auto auto auto', gap:'8px 14px', fontSize:12.5}}>
        <div style={{color:'var(--muted)', fontSize:11, letterSpacing:'.04em', textTransform:'uppercase'}}>Cliente</div>
        <div style={{color:'var(--muted)', fontSize:11, letterSpacing:'.04em', textTransform:'uppercase', textAlign:'right'}}>N°</div>
        <div style={{color:'var(--muted)', fontSize:11, letterSpacing:'.04em', textTransform:'uppercase', textAlign:'right'}}>Importe</div>
        <div style={{color:'var(--muted)', fontSize:11, letterSpacing:'.04em', textTransform:'uppercase'}}>Estado</div>
        {rows.map((r, i) => (
          <React.Fragment key={i}>
            <div style={{borderTop:'1px solid var(--line)', paddingTop:8}}>{r[1]} <span style={{color:'var(--muted)'}}>· {r[2]}</span></div>
            <div style={{borderTop:'1px solid var(--line)', paddingTop:8, textAlign:'right', fontFamily:'var(--font-mono)', color:'var(--muted)'}}>{r[0]}</div>
            <div style={{borderTop:'1px solid var(--line)', paddingTop:8, textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{r[3]}</div>
            <div style={{borderTop:'1px solid var(--line)', paddingTop:8}}>
              <span style={{
                display:'inline-flex', gap:6, alignItems:'center', fontSize:11.5,
                padding:'3px 8px', borderRadius:999,
                background: r[5]==='ok' ? '#E8F0DA' : '#FCE9DA',
                color: r[5]==='ok' ? '#3F5142' : '#A6431C'
              }}>
                <span style={{width:6,height:6,borderRadius:'50%',background:'currentColor'}}/>
                {r[4]}
              </span>
            </div>
          </React.Fragment>
        ))}
      </div>
    </UIShell>
  );
}

function UICaja() {
  return (
    <UIShell title="Flujo de caja" badge="ÚLTIMOS 30 DÍAS">
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:18}}>
        <div style={{padding:14, background:'var(--bg-2)', borderRadius:10}}>
          <div style={{fontSize:11, color:'var(--muted)', letterSpacing:'.04em', textTransform:'uppercase'}}>Ingresos</div>
          <div style={{fontSize:22, marginTop:6, fontWeight:500, letterSpacing:'-0.02em'}}>$ 428.000</div>
          <div style={{fontSize:12, color:'#3F5142', marginTop:2}}>+8,2% vs mes anterior</div>
        </div>
        <div style={{padding:14, background:'var(--bg-2)', borderRadius:10}}>
          <div style={{fontSize:11, color:'var(--muted)', letterSpacing:'.04em', textTransform:'uppercase'}}>Egresos</div>
          <div style={{fontSize:22, marginTop:6, fontWeight:500, letterSpacing:'-0.02em'}}>$ 312.000</div>
          <div style={{fontSize:12, color:'#A6431C', marginTop:2}}>+2,4% vs mes anterior</div>
        </div>
      </div>
      <svg viewBox="0 0 300 90" style={{width:'100%', height:110}}>
        <defs>
          <linearGradient id="ga" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#387DD5" stopOpacity=".28"/>
            <stop offset="100%" stopColor="#86D6D2" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d="M0 60 L30 50 L60 56 L90 40 L120 44 L150 30 L180 36 L210 22 L240 28 L270 14 L300 18 L300 90 L0 90 Z" fill="url(#ga)"/>
        <path d="M0 60 L30 50 L60 56 L90 40 L120 44 L150 30 L180 36 L210 22 L240 28 L270 14 L300 18" fill="none" stroke="#387DD5" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M0 75 L30 72 L60 68 L90 66 L120 62 L150 60 L180 58 L210 55 L240 56 L270 52 L300 50" fill="none" stroke="#86D6D2" strokeOpacity=".55" strokeWidth="1.2" strokeDasharray="3 3"/>
      </svg>
      <div style={{display:'flex', gap:16, marginTop:8, fontSize:11.5, color:'var(--muted)'}}>
        <span style={{display:'inline-flex', alignItems:'center', gap:6}}><span style={{width:10,height:2,background:'#387DD5'}}/> Ingresos</span>
        <span style={{display:'inline-flex', alignItems:'center', gap:6}}><span style={{width:10,height:2,background:'#86D6D2',opacity:.7}}/> Egresos</span>
      </div>
    </UIShell>
  );
}

function UIStock() {
  const items = [
    ['Yerba Mate 1kg', 124, 'OK', 'ok'],
    ['Aceite Girasol 900ml', 18, 'Bajo', 'warn'],
    ['Café Molido 500g', 3, 'Crítico', 'crit'],
    ['Azúcar 1kg', 87, 'OK', 'ok'],
    ['Harina 000 1kg', 12, 'Bajo', 'warn'],
  ];
  return (
    <UIShell title="Stock por depósito" badge="DEPÓSITO CENTRAL">
      <div style={{display:'flex', flexDirection:'column', gap:0}}>
        {items.map((it, i) => (
          <div key={i} style={{display:'grid', gridTemplateColumns:'1fr auto auto', gap:14, padding:'10px 0', borderTop: i===0?'none':'1px solid var(--line)', alignItems:'center'}}>
            <div>{it[0]}</div>
            <div style={{fontFamily:'var(--font-mono)', color:'var(--muted)', fontSize:12}}>{it[1]} u.</div>
            <span style={{
              fontSize:11, padding:'3px 8px', borderRadius:999,
              background: it[3]==='ok'?'#E8F0DA': it[3]==='warn'?'#FCE9DA':'#F9D7CB',
              color:    it[3]==='ok'?'#3F5142': it[3]==='warn'?'#A6431C':'#7A2A0E'
            }}>{it[2]}</span>
          </div>
        ))}
      </div>
    </UIShell>
  );
}

function UIEquipo() {
  const people = [
    ['Camila R.', 'Administración', '$ 380.000', 'al día'],
    ['Martín L.', 'Ventas', '$ 420.000 + comisión', 'al día'],
    ['Sofía B.', 'Operaciones', '$ 360.000', 'al día'],
  ];
  return (
    <UIShell title="Liquidación de sueldos" badge="MAYO 2026 · F.931 LISTO">
      <div style={{display:'flex', flexDirection:'column'}}>
        {people.map((p, i) => (
          <div key={i} style={{display:'grid', gridTemplateColumns:'auto 1fr auto auto', gap:14, padding:'12px 0', borderTop: i===0?'none':'1px solid var(--line)', alignItems:'center'}}>
            <div style={{width:32, height:32, borderRadius:'50%', background:'var(--bg-2)', display:'grid', placeItems:'center', fontSize:12, fontWeight:500}}>
              {p[0].split(' ').map(x=>x[0]).join('')}
            </div>
            <div>
              <div style={{fontSize:13.5}}>{p[0]}</div>
              <div style={{fontSize:11.5, color:'var(--muted)'}}>{p[1]}</div>
            </div>
            <div style={{fontSize:12.5, color:'var(--muted)'}}>{p[2]}</div>
            <span style={{fontSize:11, padding:'3px 8px', borderRadius:999, background:'#E8F0DA', color:'#3F5142'}}>{p[3]}</span>
          </div>
        ))}
      </div>
    </UIShell>
  );
}

// === Steps ================================================================
function Steps() {
  const steps = [
    { num: '001', title: 'Migración asistida', desc: 'Subís tu Excel, planilla o exportás desde tu sistema viejo. Te ayudamos sin costo.' , icon: <IconArrowUpRight/> },
    { num: '002', title: 'Conectá ARCA', desc: 'Asociás tu CUIT en 2 minutos. Validamos punto de venta y certificados.' , icon: <IconShield/> },
    { num: '003', title: 'Primera factura', desc: 'Emití factura A, B o C con CAE en menos de 2 minutos.' , icon: <IconFactura/> },
    { num: '004', title: 'Cobrás y conciliás', desc: 'Mandás link de pago. El cobro entra y se concilia solo con tu banco.' , icon: <IconCard/> },
    { num: '005', title: 'Crecés con datos', desc: 'Reportes vivos te dicen qué clientes y productos te hacen ganar.' , icon: <IconChart/> },
  ];
  return (
    <section id="como-funciona">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Cómo funciona</span>
          <h2 className="section-title">
            De caos a control <em>en cinco pasos.</em>
          </h2>
          <p className="lede">
            Onboarding humano con migración asistida. La mayoría de las PyMEs
            facturan en su primer día.
          </p>
        </div>
        <div className="steps reveal">
          {steps.map((s) => (
            <div key={s.num} className="step">
              <div className="step__icon">{s.icon}</div>
              <span className="step__num">{s.num}</span>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Testimonials (Kaiko carousel band + cards) ===========================
function Testimonials() {
  const items = [
    {
      quote: "Pasamos de 3 sistemas distintos a uno solo. La facturación con ARCA dejó de ser un dolor de cabeza.",
      name: "Mariana Pérez", role: "Dueña, Distribuidora Sur",
      img: "https://i.pravatar.cc/120?img=5"
    },
    {
      quote: "Mi contador entra a PymeStudio y trabaja directo. Ahorramos *dos días* al mes de exportar Excels.",
      name: "Ezequiel Romero", role: "CEO, Romero Indumentaria",
      img: "https://i.pravatar.cc/120?img=14"
    },
    {
      quote: "El reporte de flujo de caja proyectado me salvó un mes complicado. Sabía antes que se venía el bache.",
      name: "Lucía Fernández", role: "Co-founder, Estudio Núcleo",
      img: "https://i.pravatar.cc/120?img=20"
    },
    {
      quote: "En 10 minutos estaba emitiendo mi primera factura con CAE real. No necesité llamar a nadie.",
      name: "Martín R.", role: "Servicios profesionales, CABA",
      img: "https://i.pravatar.cc/120?img=32"
    },
  ];
  const [idx, setIdx] = useState(0);
  const featured = items[idx];
  const parts = featured.quote.split(/(\*[^*]+\*)/g);

  return (
    <section>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Construido con y para PyMEs</span>
          <h2 className="section-title">
            Validado en el día a día, no en un <em>demo.</em>
          </h2>
        </div>

        <div className="tband reveal" style={{marginBottom: 28}}>
          <div>
            <p className="tband__quote">
              "{parts.map((p, j) =>
                p.startsWith('*') ? <em key={j}>{p.slice(1,-1)}</em> : <React.Fragment key={j}>{p}</React.Fragment>
              )}"
            </p>
            <div className="tband__meta">
              <div className="testimonial__avatar" style={{backgroundImage:`url(${featured.img})`}}/>
              <div>
                <div className="testimonial__name">{featured.name}</div>
                <div className="testimonial__role">{featured.role}</div>
              </div>
            </div>
          </div>
          <div className="tband__nav">
            <div className="tband__count">
              {String(idx + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}
            </div>
            <div className="tband__btns">
              <button
                className="tband__btn"
                aria-label="Anterior"
                onClick={() => setIdx((idx - 1 + items.length) % items.length)}
              >
                <span style={{display:'inline-flex', transform:'rotate(180deg)'}}><IconArrowRight size={16}/></span>
              </button>
              <button
                className="tband__btn"
                aria-label="Siguiente"
                onClick={() => setIdx((idx + 1) % items.length)}
              >
                <IconArrowRight size={16}/>
              </button>
            </div>
          </div>
        </div>

        <div className="testimonials reveal">
          {items.slice(0, 3).map((t, i) => {
            const q = t.quote.split(/(\*[^*]+\*)/g);
            return (
              <article key={i} className="testimonial">
                <div className="testimonial__stars">
                  {Array.from({length:5}).map((_,j) => <IconStar key={j} size={14}/>)}
                </div>
                <p className="testimonial__quote">
                  "{q.map((p, j) =>
                    p.startsWith('*') ? <em key={j}>{p.slice(1,-1)}</em> : <React.Fragment key={j}>{p}</React.Fragment>
                  )}"
                </p>
                <div className="testimonial__author">
                  <div className="testimonial__avatar" style={{backgroundImage:`url(${t.img})`}}/>
                  <div>
                    <div className="testimonial__name">{t.name}</div>
                    <div className="testimonial__role">{t.role}</div>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// === Trust (Kaiko "Proven, not promised") =================================
function Trust() {
  const cards = [
    {
      icon: <IconShield size={22}/>,
      title: 'Datos bajo tu control',
      desc: 'Servidores en Argentina y respaldo en AWS São Paulo. Cifrado en tránsito y en reposo. Cumplimos Ley 25.326.',
    },
    {
      icon: <IconCheck size={22}/>,
      title: 'CAE real, no simulado',
      desc: 'Conexión directa con ARCA. El comprobante es válido ante AFIP. Si ARCA cae, reintentamos y te avisamos.',
    },
    {
      icon: <IconChat size={22}/>,
      title: 'La decisión es tuya',
      desc: 'El asesor IA recomienda con tus números; vos decidís. Soporte humano en español, sin bots en el camino crítico.',
    },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Confianza</span>
          <h2 className="section-title">
            Probado, no <em>prometido.</em>
          </h2>
          <p className="lede">
            Independencia fiscal, seguridad y control humano en cada flujo.
          </p>
        </div>
        <div className="trust reveal">
          {cards.map((c) => (
            <article key={c.title} className="trust__card">
              <div className="trust__icon">{c.icon}</div>
              <h3 className="trust__title">{c.title}</h3>
              <p className="trust__desc">{c.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Pricing ==============================================================
const PLANS = [
  {
    name: 'Inicial',
    desc: 'Para monotributistas y emprendedores que recién empiezan a facturar.',
    monthly: 25000,
    yearly: 20000,
    featured: false,
    contact: false,
    features: [
      'Facturas A, B, C, M ilimitadas',
      'Conexión ARCA y AFIP',
      'Cobros con Mercado Pago',
      '1 usuario incluido',
      'Soporte por chat (lun-vie)',
    ],
  },
  {
    name: 'Negocio',
    desc: 'Para PyMEs en crecimiento que ya tienen empleados y contador.',
    monthly: 70000,
    yearly: 56000,
    featured: true,
    contact: false,
    features: [
      'Todo lo del plan Inicial',
      'Contabilidad + Libro IVA',
      'Hasta 3 usuarios + contador gratis',
      'Reportes en vivo',
      'Soporte prioritario',
    ],
  },
  {
    name: 'Estudio',
    desc: 'Para contadores y estudios que gestionan varias empresas. Armamos la propuesta a tu medida.',
    monthly: null,
    yearly: null,
    featured: false,
    contact: true,
    features: [
      'ERP · POS · CRM · BI',
      'AI compliance assistant',
      'Multi-CUIT / multi-estudio',
      'Usuarios ilimitados',
      'API + integraciones a medida',
      'Onboarding white-glove',
      'Soporte dedicado',
    ],
  },
];

function Pricing() {
  const [yearly, setYearly] = useState(true);
  const trackRef = useRef(null);
  const [slider, setSlider] = useState({ left: 4, width: 100 });

  useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    const btn = track.querySelector(yearly ? '[data-key="yearly"]' : '[data-key="monthly"]');
    if (btn) {
      setSlider({ left: btn.offsetLeft, width: btn.offsetWidth });
    }
  }, [yearly]);

  return (
    <section id="precios">
      <div className="container">
        <div className="section-head section-head--center reveal">
          <span className="eyebrow">Precios</span>
          <h2 className="section-title">Planes simples, <em>sin sorpresas.</em></h2>
          <p className="lede">Empezá desde $ 25.000. Escalás cuando el negocio lo pida.</p>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div className="pricing-toggle" ref={trackRef}>
            <div className="pricing-toggle__slider" style={{ left: slider.left, width: slider.width }} />
            <button
              className={'pricing-toggle__btn' + (!yearly ? ' active' : '')}
              data-key="monthly"
              onClick={() => setYearly(false)}
            >
              Mensual
            </button>
            <button
              className={'pricing-toggle__btn' + (yearly ? ' active' : '')}
              data-key="yearly"
              onClick={() => setYearly(true)}
            >
              Anual <span className="pricing-toggle__badge">−20%</span>
            </button>
          </div>
        </div>
        <div className="pricing reveal">
          {PLANS.map((p) => (
            <article key={p.name} className={'plan' + (p.featured ? ' plan--featured' : '')}>
              {p.featured && <span className="plan__badge">Más elegido</span>}
              <h3 className="plan__name">{p.name}</h3>
              <div>
                {p.contact ? (
                  <React.Fragment>
                    <span className="plan__price" style={{ fontSize: 28, letterSpacing: '-.02em' }}>
                      Propuesta personalizada
                    </span>
                    <div className="plan__price-old" style={{ textDecoration: 'none', marginTop: 8 }}>
                      A medida de tu estudio
                    </div>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <span className="plan__price">
                      $ {(yearly ? p.yearly : p.monthly).toLocaleString('es-AR')}
                      <span className="plan__price-period"> /mes</span>
                    </span>
                    {yearly && (
                      <div className="plan__price-old">
                        $ {p.monthly.toLocaleString('es-AR')} si pagás mensual
                      </div>
                    )}
                  </React.Fragment>
                )}
              </div>
              <p className="plan__desc">{p.desc}</p>
              <ul className="plan__features">
                {p.features.map((f) => (
                  <li key={f} className="plan__feature">
                    <IconCheck size={16} /> <span>{f}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 'auto', paddingTop: 8 }}>
                {p.contact ? (
                  <BtnK href="#contacto" variant={p.featured ? 'light' : 'ghost-light'}>
                    Contactar
                  </BtnK>
                ) : (
                  <BtnK href="#contacto" variant={p.featured ? 'light' : ''}>
                    Empezar gratis
                  </BtnK>
                )}
              </div>
            </article>
          ))}
        </div>
        <p style={{ textAlign: 'center', marginTop: 32, fontSize: 13.5, color: 'var(--muted)' }}>
          Precios en pesos argentinos. IVA incluido.{' '}
          <a href="#contacto" style={{ color: 'var(--blue)', textDecoration: 'underline' }}>
            Hablá con el equipo
          </a>
          .
        </p>
      </div>
    </section>
  );
}

// === Blog =================================================================
function Blog() {
  const posts = [
    { date: '12 mayo 2026', tag: 'ARCA', slug: 'arca-guia-pymes', title: 'Qué cambia con ARCA: la guía para PyMEs argentinas',
      img: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=600&q=70' },
    { date: '04 mayo 2026', tag: 'Contabilidad', slug: 'balance-trimestral', title: 'Cómo cerrar tu balance trimestral sin pánico',
      img: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600&q=70' },
    { date: '21 abril 2026', tag: 'Crecimiento', slug: '7-indicadores-pyme', title: '7 indicadores para entender la salud de tu negocio',
      img: 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=600&q=70' },
  ];
  return (
    <section id="recursos">
      <div className="container">
        <div className="section-head reveal" style={{maxWidth:'none', display:'flex', flexDirection:'row', justifyContent:'space-between', alignItems:'flex-end', gap:32, flexWrap:'wrap'}}>
          <div>
            <span className="eyebrow">Recursos</span>
            <h2 className="section-title">Aprendé a llevar tu PyME, <em>con criterio.</em></h2>
          </div>
          <a href="blog.html" className="btn btn--ghost">Ir al blog <IconArrowUpRight size={16}/></a>
        </div>
        <div className="blog-grid reveal">
          {posts.map((p, i) => (
            <a className="post" key={i} href={`blog.html#${p.slug}`}>
              <div className="post__img" style={{backgroundImage:`url(${p.img})`, backgroundSize:'cover', backgroundPosition:'center'}}/>
              <div className="post__meta">{p.date} · {p.tag}</div>
              <h3 className="post__title">{p.title}</h3>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// === FAQ ==================================================================
const FAQS = [
  { q: '¿Sirve si soy monotributista?', a: 'Sí. Podés emitir factura C o E desde el plan Inicial. Si más adelante pasás a Responsable Inscripto, cambiás el tipo de facturación con un click —no migrás de plataforma.' },
  { q: '¿Cómo es la conexión con ARCA / AFIP?', a: 'Asociamos tu CUIT vía clave fiscal y delegación de servicios. El proceso lo guiamos paso a paso y suele tardar 2-3 minutos. Soportamos punto de venta web y controlado.' },
  { q: '¿Mi contador puede entrar al sistema?', a: 'Sí —y sin costo extra. Tu contador tiene un usuario propio con acceso a libros IVA, balances, y exportación a SIAP / Tango / Bejerman / cualquier ERP que use.' },
  { q: '¿Puedo migrar desde mi sistema actual?', a: 'Te ayudamos a migrar desde Tango, Bejerman, Holistor, Colppy, Xubio, Contabilium y planillas de Excel. La migración asistida es gratis hasta 24 meses de histórico.' },
  { q: '¿Qué pasa si crece mi PyME?', a: 'Cambiás de plan en línea, sin recontratar nada. Los datos no se mueven —solo se desbloquean módulos y usuarios adicionales.' },
  { q: '¿Mi información está segura?', a: 'Servidores en Argentina y respaldo en AWS São Paulo. Cifrado en tránsito y en reposo, 2FA en todos los usuarios, y exportación de tus datos cuando quieras. ISO 27001 en proceso.' },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section>
      <div className="container">
        <div className="section-head section-head--center reveal">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2 className="section-title">Lo que la gente nos <em>pregunta antes</em> de probarlo.</h2>
        </div>
        <div className="faq reveal">
          {FAQS.map((f, i) => {
            const isOpen = i === open;
            return (
              <div key={i} className={"faq__item" + (isOpen ? ' open' : '')}>
                <button className="faq__btn" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{f.q}</span>
                  <span className="faq__toggle"><IconPlus size={14}/></span>
                </button>
                <div className="faq__panel" style={{maxHeight: isOpen ? 200 : 0}}>
                  <p className="faq__answer">{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// === Services (external services banner) ==================================
function Services() {
  const services = [
    {
      brand: 'SAS',
      brandItalic: 'rápido',
      url: 'https://saspyme.vercel.app/',
      tagline: 'Constituí tu SAS en 24 horas.',
      desc: 'IA + firma digital + portal del cliente. Estatuto generado al instante, sin escribano, sin papeleo. Ley 27.349.',
      bullets: [
        'Estatuto redactado por IA en segundos',
        'Firma digital remota — sin presencia física',
        'Portal personalizado para cada cliente',
        'Presentación y CUIT incluidos',
      ],
      cta: 'Empezar trámite',
      stat: { num: '24', unit: 'hs', label: 'Inscripción típica en CABA' },
      visual: 'sas',
    },
    {
      brand: 'RIMI',
      brandItalic: ' Agent',
      url: 'https://pymerimi.vercel.app/',
      tagline: '¿Tu PyME califica al RIMI 2026?',
      desc: 'Diagnóstico fiscal con IA: RIMI, Economía del Conocimiento, capacitación, exportación. 8+ incentivos analizados en 60 segundos.',
      bullets: [
        'Análisis IA en 60 segundos',
        '8+ incentivos del marco PyME 2026',
        'Checklist documental personalizado',
        'Sin registro, sin CUIT, anónimo',
      ],
      cta: 'Hacer diagnóstico',
      stat: { num: '21', unit: '%', label: 'IVA devuelto anticipado · Dec. 242/26' },
      visual: 'rimi',
    },
  ];

  return (
    <section id="servicios" className="services">
      <div className="container">
        <div className="services__head reveal">
          <div>
            <span className="eyebrow">Empresa · partners</span>
            <h2 className="section-title">Más allá de <em>PymeStudio.</em></h2>
            <p className="lede" style={{marginTop:14}}>
              Herramientas de partners para constituir una sociedad o aprovechar incentivos fiscales —
              integradas al día a día de tu PyME en <em>Argentina</em>.
            </p>
          </div>
        </div>

        <div className="services__grid reveal">
          {services.map((s, i) => (
            <a key={i} className="service-card" href={s.url} target="_blank" rel="noopener noreferrer">
              <div className={"service-card__visual service-card__visual--" + s.visual}>
                {s.visual === 'sas' ? <ServiceVisualSAS/> : <ServiceVisualRIMI/>}
              </div>
              <div className="service-card__body">
                <div className="service-card__brand">
                  {s.brand}<em>{s.brandItalic}</em>
                </div>
                <h3 className="service-card__tagline">{s.tagline}</h3>
                <p className="service-card__desc">{s.desc}</p>
                <ul className="service-card__bullets">
                  {s.bullets.map((b, j) => (
                    <li key={j}><IconCheck size={14}/> {b}</li>
                  ))}
                </ul>
                <div className="service-card__foot">
                  <div className="service-card__stat">
                    <div className="service-card__stat-num">
                      {s.stat.num}<span>{s.stat.unit}</span>
                    </div>
                    <div className="service-card__stat-label">{s.stat.label}</div>
                  </div>
                  <span className="service-card__cta">
                    {s.cta} <IconArrowUpRight size={16}/>
                  </span>
                </div>
              </div>
            </a>
          ))}
        </div>

        <p className="services__note reveal">
          Servicios provistos por partners de PymeStudio. Se abren en una nueva pestaña.
        </p>
      </div>
    </section>
  );
}

// SVG visuals embedded inside each card — iconographic mocks
function ServiceVisualSAS() {
  return (
    <svg viewBox="0 0 400 220" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="sas-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#1E4538"/>
          <stop offset="1" stopColor="#2A6450"/>
        </linearGradient>
      </defs>
      <rect width="400" height="220" fill="url(#sas-bg)"/>
      {/* Document card */}
      <g transform="translate(120,30)">
        <rect width="160" height="170" rx="10" fill="#FBF8F1"/>
        <rect x="20" y="22" width="80" height="6" rx="3" fill="#1E4538"/>
        <rect x="20" y="38" width="120" height="3" rx="1.5" fill="#1E4538" opacity=".4"/>
        <rect x="20" y="46" width="100" height="3" rx="1.5" fill="#1E4538" opacity=".4"/>
        <rect x="20" y="54" width="115" height="3" rx="1.5" fill="#1E4538" opacity=".4"/>
        <rect x="20" y="62" width="80" height="3" rx="1.5" fill="#1E4538" opacity=".4"/>
        <rect x="20" y="80" width="120" height="3" rx="1.5" fill="#1E4538" opacity=".4"/>
        <rect x="20" y="88" width="100" height="3" rx="1.5" fill="#1E4538" opacity=".4"/>
        <rect x="20" y="96" width="115" height="3" rx="1.5" fill="#1E4538" opacity=".4"/>
        {/* Signature line */}
        <path d="M 28 130 Q 40 120 55 130 T 90 130" stroke="#1E4538" strokeWidth="2" fill="none" strokeLinecap="round"/>
        <rect x="20" y="142" width="60" height="2" rx="1" fill="#1E4538" opacity=".25"/>
        {/* Check stamp */}
        <circle cx="125" cy="135" r="18" fill="#CCE2BD"/>
        <path d="M 117 135 l 6 6 l 11 -11" stroke="#1E4538" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      </g>
      {/* 24hr badge */}
      <g transform="translate(40,80)">
        <circle cx="0" cy="0" r="34" fill="#CCE2BD"/>
        <text x="0" y="2" textAnchor="middle" fontFamily="Space Grotesk, DM Sans, sans-serif" fontSize="22" fontWeight="600" fill="#1E4538">24</text>
        <text x="0" y="18" textAnchor="middle" fontFamily="Space Grotesk, DM Sans, sans-serif" fontSize="9" fontWeight="500" fill="#1E4538" letterSpacing="1.5">HORAS</text>
      </g>
      {/* Floating tag */}
      <g transform="translate(310,150)">
        <rect x="-46" y="-12" width="92" height="24" rx="12" fill="#CCE2BD"/>
        <text x="0" y="4" textAnchor="middle" fontFamily="Space Grotesk, DM Sans, sans-serif" fontSize="10" fontWeight="500" fill="#1E4538">Firma digital ✓</text>
      </g>
    </svg>
  );
}

function ServiceVisualRIMI() {
  return (
    <svg viewBox="0 0 400 220" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="rimi-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#CCE2BD"/>
          <stop offset="1" stopColor="#B8D3A6"/>
        </linearGradient>
      </defs>
      <rect width="400" height="220" fill="url(#rimi-bg)"/>
      {/* Dashboard card */}
      <g transform="translate(60,28)">
        <rect width="280" height="164" rx="12" fill="#FBF8F1"/>
        {/* Header */}
        <rect x="18" y="18" width="100" height="6" rx="3" fill="#1E4538"/>
        <rect x="18" y="30" width="160" height="3" rx="1.5" fill="#1E4538" opacity=".4"/>
        {/* Big number stat */}
        <text x="18" y="78" fontFamily="Space Grotesk, DM Sans, sans-serif" fontSize="38" fontWeight="600" fill="#1E4538" letterSpacing="-1">$ 142k</text>
        <text x="18" y="96" fontFamily="Space Grotesk, DM Sans, sans-serif" fontSize="9" fontWeight="500" fill="#1E4538" opacity=".6" letterSpacing="1">BENEFICIO ESTIMADO</text>
        {/* Bar chart */}
        <g transform="translate(18,108)">
          <rect x="0" y="22" width="36" height="20" rx="3" fill="#1E4538" opacity=".25"/>
          <rect x="44" y="14" width="36" height="28" rx="3" fill="#1E4538" opacity=".4"/>
          <rect x="88" y="6" width="36" height="36" rx="3" fill="#1E4538" opacity=".6"/>
          <rect x="132" y="0" width="36" height="42" rx="3" fill="#1E4538"/>
        </g>
        {/* Check list right */}
        <g transform="translate(190,52)">
          <g transform="translate(0,0)">
            <circle cx="6" cy="6" r="6" fill="#1E4538"/>
            <path d="M 3 6 l 2 2 l 4 -4" stroke="#FBF8F1" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <rect x="18" y="3" width="58" height="3" rx="1.5" fill="#1E4538" opacity=".6"/>
            <rect x="18" y="9" width="40" height="3" rx="1.5" fill="#1E4538" opacity=".3"/>
          </g>
          <g transform="translate(0,22)">
            <circle cx="6" cy="6" r="6" fill="#1E4538"/>
            <path d="M 3 6 l 2 2 l 4 -4" stroke="#FBF8F1" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <rect x="18" y="3" width="50" height="3" rx="1.5" fill="#1E4538" opacity=".6"/>
            <rect x="18" y="9" width="60" height="3" rx="1.5" fill="#1E4538" opacity=".3"/>
          </g>
          <g transform="translate(0,44)">
            <circle cx="6" cy="6" r="6" fill="#1E4538"/>
            <path d="M 3 6 l 2 2 l 4 -4" stroke="#FBF8F1" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <rect x="18" y="3" width="62" height="3" rx="1.5" fill="#1E4538" opacity=".6"/>
            <rect x="18" y="9" width="44" height="3" rx="1.5" fill="#1E4538" opacity=".3"/>
          </g>
        </g>
      </g>
      {/* IA chip */}
      <g transform="translate(38,180)">
        <rect x="0" y="0" width="78" height="22" rx="11" fill="#1E4538"/>
        <text x="39" y="14" textAnchor="middle" fontFamily="Space Grotesk, DM Sans, sans-serif" fontSize="10" fontWeight="500" fill="#CCE2BD">✦ IA · 60 seg</text>
      </g>
    </svg>
  );
}

// === Closing CTA ==========================================================
function Closing({ onSignup }) {
  const openSignup = (e) => {
    if (onSignup) { e.preventDefault(); onSignup(); }
  };
  return (
    <section id="contacto">
      <div className="container">
        <div className="closing reveal">
          <div>
            <span className="eyebrow" style={{color:'rgba(250,250,250,.55)'}}>Empezá hoy</span>
            <h2 className="closing__title">Diagnóstico e <em>implementación.</em><br/>Acompañamiento <em>real.</em></h2>
            <p className="closing__desc">
              Empezá a facturar o explorá la suite completa. Trabajamos con PyMEs en Córdoba,
              CABA y todo el país que quieren orden real.
            </p>
            <div style={{display:'flex', gap:12, flexWrap:'wrap', alignItems:'center'}}>
              <BtnK href="#probar" variant="light" onClick={openSignup}>Probar gratis</BtnK>
              <BtnK href={GMAIL_SALES} variant="ghost" target="_blank" rel="noopener noreferrer">Hablar con ventas</BtnK>
            </div>
            <div style={{marginTop:32, display:'flex', alignItems:'center', gap:14}}>
              <div className="hero__avatar-stack">
                {AVATARS.slice(0,3).map((src, i) => (
                  <div key={i} className="hero__avatar" style={{ backgroundImage: `url(${src})`, borderColor:'#0C1058' }}/>
                ))}
              </div>
              <span style={{fontSize:13.5, color:'rgba(250,250,250,.75)'}}>
                +100 PyMEs eligen PymeStudio
              </span>
            </div>
          </div>
          <div className="closing__img" style={{
            display:'grid', placeItems:'center', padding:32,
            background:'linear-gradient(145deg, rgba(56,125,213,.2), rgba(134,214,210,.12))'
          }}>
            <div style={{textAlign:'center'}}>
              <div style={{
                fontFamily:'var(--font-display)', fontSize:clampTitle(),
                fontWeight:500, letterSpacing:'-.03em', lineHeight:1.05, marginBottom:12
              }}>
                14 días<br/><span style={{
                  background:'linear-gradient(91deg,#387DD5,#86D6D2)',
                  WebkitBackgroundClip:'text', backgroundClip:'text',
                  WebkitTextFillColor:'transparent'
                }}>gratis</span>
              </div>
              <div style={{fontSize:14, color:'rgba(250,250,250,.65)', maxWidth:240, margin:'0 auto', lineHeight:1.5}}>
                Sin tarjeta. Migración asistida. Soporte en español.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
function clampTitle() {
  return 'clamp(36px, 4vw, 52px)';
}

// === Footer ===============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__col footer__about">
            <a href="index.html" className="nav__logo">
              <SumaWordmark size={36} variant="color" fontSize={22} />
            </a>
            <p>Base en Córdoba. Facturación ARCA e implementación real para PyMEs de toda Argentina.</p>
            <div style={{display:'flex', gap:10, marginTop:20}}>
              <a href="https://x.com/pymestudioarg" target="_blank" rel="noopener noreferrer" aria-label="X / Twitter" className="footer__social"><IconX size={18}/></a>
              <a href="https://www.instagram.com/pymestudioarg/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="footer__social"><IconInstagram size={18}/></a>
            </div>
            <div style={{display:'flex', gap:10, marginTop:16, flexWrap:'wrap'}}>
              <span className="chip"><IconGlobe size={14}/> ES — AR · Córdoba</span>
            </div>
          </div>
          <div className="footer__col">
            <h4>Producto</h4>
            <ul>
              <li><a href="factura-facil.html">FacturaFácil</a></li>
              <li><a href="dashboard-bi.html">Dashboard BI</a></li>
              <li><a href="retail.html">Retail</a></li>
              <li><a href="ecommerce.html">Commerce</a></li>
              <li><a href="agropecuario.html">Agropecuario</a></li>
              <li><a href="index.html#precios">Precios</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Empresa</h4>
            <ul>
              <li><a href="index.html#contacto">Sobre nosotros</a></li>
              <li><a href={GMAIL_SALES} target="_blank" rel="noopener noreferrer">Contacto</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="portal.html">Mi cuenta</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Soporte</h4>
            <ul>
              <li><a href="index.html#contacto">Centro de ayuda</a></li>
              <li><a href="index.html#contacto">Migración asistida</a></li>
              <li><a href={GMAIL_SALES} target="_blank" rel="noopener noreferrer">hola@pymestudio.xyz</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 PymeStudio · Hecho en Argentina</span>
          <span>Córdoba · CABA · Todo el país</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Drawer, BtnK, Hero, Marquee, Stats, Pillars, Modules, Dashboard,
  Steps, Testimonials, Trust, Pricing, Blog, FAQ, Services, Closing, Footer,
  useReveal, SumaLogo, SumaWordmark,
  AuthModal, LoginModal, SignupModal,
  GMAIL_SALES,
});