/* PRODUCTO SAAS — página individual (template compartido) */
const { useState: useStateD, useEffect: useEffectD } = React;

/* ===== Explorador de módulos interactivo (demo funcional · datos hardcodeados) ===== */
const MOD_ICONS = {
  cart: <><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></>,
  box: <><path d="M21 8l-9 4-9-4 9-4z"/><path d="M3 8v9l9 4 9-4V8"/></>,
  tag: <><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><circle cx="7" cy="7" r="1"/></>,
  cash: <><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></>,
  users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></>,
  user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
  truck: <><rect x="1" y="3" width="15" height="13"/><path d="M16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></>,
  chart: <><path d="M3 3v18h18"/><polyline points="7 14 11 10 14 13 21 6"/></>,
  gear: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
  calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
  bed: <><path d="M2 4v16"/><path d="M2 8h18a2 2 0 0 1 2 2v10"/><path d="M2 17h20"/><path d="M6 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></>,
  bell: <><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></>,
  broom: <><path d="M19.4 4.6l-7 7"/><path d="M13 6l5 5"/><path d="M11 13l-6 6 3 1 4-4"/><path d="M8 16l3 3"/></>,
  food: <><path d="M3 2v7a2 2 0 0 0 4 0V2"/><path d="M5 2v20"/><path d="M17 2c-1.7 0-3 1.8-3 4.5S15.3 11 17 11v11"/></>,
  receipt: <><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1V2l-2 1-2-1-2 1-2-1-2 1-2-1z"/><path d="M8 7h8M8 11h8M8 15h5"/></>,
  folder: <><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></>,
  cross: <><path d="M19 14H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2zM12 7v4M10 9h4"/></>,
  flask: <><path d="M9 2v6l-5 9a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-5-9V2"/><path d="M8 2h8M6.5 15h11"/></>,
  pill: <><path d="M10.5 20.5a5 5 0 0 1-7-7l6-6a5 5 0 0 1 7 7z"/><line x1="8.5" y1="8.5" x2="15.5" y2="15.5"/></>,
};
const ModIcon = ({ name }) => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    {MOD_ICONS[name] || <rect x="4" y="4" width="16" height="16" rx="3"/>}
  </svg>
);

const useTickerD = (interval = 2400) => {
  const [t, setT] = useStateD(0);
  useEffectD(() => { const id = setInterval(() => setT(x => x + 1), interval); return () => clearInterval(id); }, [interval]);
  return t;
};

const useIsMobileD = () => {
  const [m, setM] = useStateD(false);
  useEffectD(() => {
    const mq = window.matchMedia('(max-width: 880px)');
    const on = () => setM(mq.matches);
    on();
    if (mq.addEventListener) mq.addEventListener('change', on); else mq.addListener(on);
    return () => { if (mq.removeEventListener) mq.removeEventListener('change', on); else mq.removeListener(on); };
  }, []);
  return m;
};

const AnimatedValue = ({ text }) => {
  const str = String(text);
  const match = str.match(/^([^\d]*)([\d.,]+)(.*)$/);
  const target = match ? parseFloat(match[2].replace(/,/g, '')) : null;
  const [v, setV] = useStateD(target || 0);
  useEffectD(() => {
    if (target === null) return;
    let raf; const start = performance.now(); const dur = 850;
    const step = (now) => {
      const t = Math.min(1, (now - start) / dur);
      const eased = 1 - Math.pow(1 - t, 3);
      setV(target * eased);
      if (t < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [text]);
  if (target === null) return <>{text}</>;
  const decimals = (match[2].split('.')[1] || '').length;
  const shown = target >= 1000 ? Math.round(v).toLocaleString('es-MX') : v.toFixed(decimals);
  return <>{match[1]}{shown}{match[3]}</>;
};

const DemoChart = ({ title, legend }) => {
  const tick = useTickerD(2400);
  const uid = (React.useId ? React.useId() : 'demo').replace(/[^a-zA-Z0-9]/g, '');
  const W = 600, H = 120, P = 4;
  const gen = (base) => { let y = base; const out = []; for (let i = 0; i < 26; i++) { y += (Math.random() - 0.45) * 14; y = Math.max(18, Math.min(94, y)); out.push(y); } return out; };
  const a = React.useMemo(() => gen(55), [tick]);
  const b = React.useMemo(() => a.map(y => Math.max(12, y - 14 - Math.random() * 10)), [a]);
  const line = (arr) => arr.map((y, i) => { const x = P + (i / (arr.length - 1)) * (W - P * 2); const yy = H - P - (y / 100) * (H - P * 2); return `${i ? 'L' : 'M'} ${x.toFixed(1)} ${yy.toFixed(1)}`; }).join(' ');
  const fill = (arr) => line(arr) + ` L ${W - P} ${H - P} L ${P} ${H - P} Z`;
  return (
    <div className="dash-chart" style={{ marginBottom: 16 }}>
      <div className="dash-chart-head">
        <span className="t">{title}</span>
        {legend && <span className="legend">{legend.map((l, i) => <span key={i}><i style={{ background: l.c }} /> {l.l}</span>)}</span>}
      </div>
      <div style={{ position: 'absolute', left: 14, right: 14, top: 36, bottom: 14 }}>
        <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
          <defs>
            <linearGradient id={`fa${uid}`} x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#22c55e" stopOpacity="0.4" /><stop offset="1" stopColor="#22c55e" stopOpacity="0" /></linearGradient>
            <linearGradient id={`fb${uid}`} x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#06b6d4" stopOpacity="0.3" /><stop offset="1" stopColor="#06b6d4" stopOpacity="0" /></linearGradient>
            <linearGradient id={`fl${uid}`} x1="0" y1="0" x2="1" y2="0"><stop offset="0" stopColor="#22c55e" /><stop offset="1" stopColor="#06b6d4" /></linearGradient>
          </defs>
          {[0, 1, 2, 3].map(i => <line key={i} x1={P} x2={W - P} y1={P + ((H - P * 2) * i) / 3} y2={P + ((H - P * 2) * i) / 3} stroke="rgba(255,255,255,0.05)" strokeDasharray="2 4" />)}
          <path d={fill(b)} fill={`url(#fb${uid})`} style={{ transition: 'd 1s ease' }} />
          <path d={line(b)} fill="none" stroke="#06b6d4" strokeWidth="1.2" opacity="0.55" style={{ transition: 'd 1s ease' }} />
          <path d={fill(a)} fill={`url(#fa${uid})`} style={{ transition: 'd 1s ease' }} />
          <path d={line(a)} fill="none" stroke={`url(#fl${uid})`} strokeWidth="1.6" style={{ transition: 'd 1s ease' }} />
        </svg>
      </div>
    </div>
  );
};

const classifyStatus = (v) => {
  if (/^↓/.test(v) || /-\d/.test(v)) return 'warn';
  if (/^↑/.test(v)) return '';
  const WARN = ['Bajo', 'Crítico', 'Inactivo', 'Pendiente', 'Ausente', 'Falta firma', 'Por confirmar', 'Anulada'];
  const INFO = ['En proceso', 'En consulta', 'Nuevo', 'Recordatorio enviado', 'Crédito'];
  if (WARN.includes(v)) return 'warn';
  if (INFO.includes(v)) return 'info';
  return '';
};

const ROOM_COLORS = { free: ['#22c55e', 'Libre'], busy: ['#06b6d4', 'Ocupada'], clean: ['#f59e0b', 'Limpieza'], maint: ['#ef4444', 'Mantenim.'] };

const DemoBlock = ({ b }) => {
  if (b.type === 'chart') return <DemoChart title={b.t} legend={b.legend} />;
  if (b.type === 'table') return (
    <div className="dash-table" style={{ marginBottom: 16 }}>
      <div className="dash-table-head">{b.cols.map((c, i) => <span key={i}>{c}</span>)}</div>
      <div className="dash-table-body">
        {b.rows.map((r, ri) => (
          <div className="dash-table-row" key={ri}>
            {r.map((cell, ci) => {
              if (ci === r.length - 1 && b.status) return <span key={ci} className={`st ${classifyStatus(cell)}`} style={{ justifySelf: 'start' }}>{cell}</span>;
              return <span key={ci} className={ci === 0 ? 'nm' : 'ag'} style={ci === 0 ? { color: 'rgba(255,255,255,0.9)' } : { color: 'rgba(255,255,255,0.6)' }}>{cell}</span>;
            })}
          </div>
        ))}
      </div>
    </div>
  );
  if (b.type === 'rows') return (
    <div className="dash-rows">
      {b.items.map((it, i) => (
        <div className="dash-row" key={i}>
          <span className="av">{it.a}</span>
          <div><div className="nm">{it.n}</div></div>
          <span className="ag">{it.t}</span>
          <span className={`st ${it.st === 'warn' ? 'warn' : it.st === 'info' ? 'info' : ''}`}>{it.s}</span>
        </div>
      ))}
    </div>
  );
  if (b.type === 'grid') return (
    <div>
      <div style={{ display: 'flex', gap: 16, marginBottom: 12, flexWrap: 'wrap' }}>
        {Object.keys(ROOM_COLORS).map(k => (
          <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'rgba(255,255,255,0.6)' }}>
            <i style={{ width: 8, height: 8, borderRadius: 2, background: ROOM_COLORS[k][0], display: 'inline-block' }} /> {ROOM_COLORS[k][1]}
          </span>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))', gap: 10 }}>
        {b.items.map((it, i) => {
          const c = (ROOM_COLORS[it.s] || ROOM_COLORS.free)[0];
          return (
            <div key={i} style={{ padding: '12px 10px', borderRadius: 10, background: `${c}1f`, border: `1px solid ${c}55`, textAlign: 'center' }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: '#fff' }}>{it.t}</div>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: c, margin: '7px auto 0' }} />
            </div>
          );
        })}
      </div>
    </div>
  );
  return null;
};

const DemoKpis = ({ items }) => (
  <div className="dash-kpi-row">
    {items.map((k, i) => (
      <div className="dash-kpi" key={i}>
        <div className="l">{k.l}</div>
        <div className="v"><AnimatedValue text={k.v} /></div>
        <div className={`d ${k.down ? 'down' : ''}`}>{k.down ? '↓' : '↑'} {k.d}</div>
      </div>
    ))}
  </div>
);

const ModuleExplorer = ({ product, slug }) => {
  const allDemos = (window.MartzProducts.moduleDemos && window.MartzProducts.moduleDemos[slug]) || {};
  const mods = product.modules.filter(m => allDemos[m]);
  const [active, setActive] = useStateD(mods[0]);
  const isMobile = useIsMobileD();
  const demo = allDemos[active] || { kpis: [], blocks: [] };
  const app = slug === 'martz-pos' ? 'mi-tienda' : slug === 'martz-hospitality' ? 'mi-hotel' : 'mi-clinica';
  const tabStyle = (on) => ({ flex: '0 0 auto', padding: '8px 14px', borderRadius: 8, border: '1px solid ' + (on ? 'rgba(34,197,94,0.4)' : 'rgba(255,255,255,0.1)'), background: on ? 'rgba(34,197,94,0.12)' : 'rgba(255,255,255,0.03)', color: on ? '#4ade80' : 'rgba(255,255,255,0.7)', fontSize: 12.5, fontWeight: on ? 600 : 500, cursor: 'pointer', whiteSpace: 'nowrap', fontFamily: 'inherit' });

  return (
    <div className="dash-wrap" style={{ marginTop: 32 }}>
      <div className="dash-bar">
        <span className="dash-dot r" /><span className="dash-dot y" /><span className="dash-dot g" />
        <span className="dash-url">app.martzlab.com/{app}</span>
      </div>
      {isMobile && (
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', padding: '12px 12px 4px', borderBottom: '1px solid rgba(255,255,255,0.06)', background: 'rgba(255,255,255,0.02)' }}>
          {mods.map(m => <button key={m} type="button" onClick={() => setActive(m)} style={tabStyle(m === active)}>{m}</button>)}
        </div>
      )}
      <div className="dash-body" style={isMobile ? { gridTemplateColumns: '1fr' } : null}>
        {!isMobile && (
          <aside className="dash-side">
            <div className="dash-logo-row"><div className="dash-logo-mark">M</div><div className="dash-logo-name">{product.name}</div></div>
            <div className="dash-section-label">Módulos</div>
            {mods.map(m => (
              <div key={m} className={`dash-nav-item ${m === active ? 'active' : ''}`} onClick={() => setActive(m)}>
                <ModIcon name={allDemos[m].ic} /> {m}
              </div>
            ))}
          </aside>
        )}
        <main className="dash-main">
          <div className="dash-head">
            <h3>{active}</h3>
            <div className="dash-head-meta" style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)', boxShadow: '0 0 8px var(--green)', animation: 'pulse 1.6s infinite', display: 'inline-block' }} />
              En vivo · datos de demostración
            </div>
          </div>
          <div key={active} style={{ animation: 'fadeInUp 0.4s ease both' }}>
            {demo.kpis && demo.kpis.length > 0 && <DemoKpis items={demo.kpis} />}
            {(demo.blocks || []).map((b, i) => <DemoBlock key={i} b={b} />)}
          </div>
        </main>
      </div>
    </div>
  );
};

const ScreenshotPlaceholder = ({ label, src }) => (
  <div style={{ borderRadius: 16, border: '1px solid var(--border)', background: 'var(--bg-soft)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
    <div style={{ height: 36, background: 'var(--navy, #0b0f19)', display: 'flex', alignItems: 'center', padding: '0 14px', gap: 6 }}>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ef4444' }} />
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#f59e0b' }} />
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#22c55e' }} />
      <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', fontFamily: 'JetBrains Mono, monospace', marginLeft: 8 }}>{label}</span>
    </div>
    {src ? (
      <img src={src} alt={label} style={{ width: '100%', height: 'auto', display: 'block' }} loading="lazy" />
    ) : (
      <div style={{ padding: 32, minHeight: 220, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--fg-muted)', opacity: 0.4 }}>
          <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
        </svg>
        <span style={{ fontSize: 13, color: 'var(--fg-muted)' }}>Captura de pantalla · próximamente</span>
      </div>
    )}
  </div>
);

const DetailFaq = ({ items }) => {
  const [open, setOpen] = useStateD(0);
  return (
    <div style={{ maxWidth: 760, margin: '0 auto', padding: '8px 28px', borderRadius: 16, background: 'var(--bg)', border: '1px solid var(--border)' }}>
      {items.map((f, i) => (
        <div key={i} style={{ borderBottom: '1px solid var(--border)', padding: '18px 0' }}>
          <button
            type="button"
            onClick={() => setOpen(open === i ? -1 : i)}
            style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', padding: 0 }}
          >
            <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg)' }}>{f.q}</span>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, transform: open === i ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', color: 'var(--fg-muted)' }}>
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
          {open === i && <p style={{ fontSize: 14.5, color: 'var(--fg-soft)', lineHeight: 1.6, margin: '12px 0 0' }}>{f.a}</p>}
        </div>
      ))}
    </div>
  );
};

const ProductoDetailApp = () => {
  const slug = window.PRODUCT_SLUG;
  const product = window.MartzProducts.details[slug];
  if (!product) return <div style={{ padding: 40, textAlign: 'center' }}>Producto no encontrado.</div>;

  const summary = window.MartzProducts.list.find(p => p.slug === slug);
  const isLive = product.status === 'Disponible';
  const hasDetailedPlans = product.plans && product.plans.some(plan => plan.includes);

  return (
    <>
      <SiteNav current="productos" />
      <section className="page-hero">
        <div className="page-hero-bg" />
        <div className="container">
          <div className="crumb">
            <a href="../../index.html">Inicio</a><span className="sep">/</span>
            <a href="../productos.html">Productos SaaS</a><span className="sep">/</span>
            <span>{product.name}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-block', padding: '6px 14px', borderRadius: 100, background: isLive ? 'rgba(34,197,94,0.1)' : 'rgba(6,182,212,0.1)', color: isLive ? '#22c55e' : 'var(--cyan)', fontSize: 12, fontWeight: 600 }}>
              {product.status}
            </span>
            {product.caseLink && (
              <a href={product.caseLink.href} style={{ fontSize: 13, color: 'var(--cyan)', fontWeight: 500 }}>{product.caseLink.text} →</a>
            )}
          </div>
          <h1>{product.name}</h1>
          <p className="svc-tag" style={{ fontSize: 17, marginBottom: 12 }}>{product.tag}</p>
          <p className="lede" style={{ maxWidth: 680 }}>{product.heroDesc}</p>
          <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
            {isLive ? (
              <>
                <a href="../contacto.html" className="btn btn-primary">Solicitar demo</a>
                <a href="#planes" className="btn btn-secondary">Ver planes</a>
              </>
            ) : (
              <a href="../contacto.html" className="btn btn-primary">Conocer más</a>
            )}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }} className="sol-detail-grid">
            <div>
              <div className="section-eyebrow">Descripción</div>
              <h2 style={{ fontSize: 'clamp(24px, 3vw, 32px)', fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 16px', lineHeight: 1.2 }}>Hecho para {product.audiences.slice(0, 3).join(', ').toLowerCase()} y más.</h2>
              <p style={{ fontSize: 16, color: 'var(--fg-soft)', lineHeight: 1.65, marginBottom: 24 }}>{product.intro}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {product.audiences.map(a => (
                  <span key={a} style={{ padding: '6px 12px', borderRadius: 100, background: 'var(--bg-soft)', border: '1px solid var(--border)', fontSize: 12.5, color: 'var(--fg-soft)' }}>{a}</span>
                ))}
              </div>
            </div>
            <ScreenshotPlaceholder label={`${product.name.toLowerCase()}.dashboard`} src={slug === 'martz-pos' ? '../../assets/martz_pos/dashboard.png' : null} />
          </div>
        </div>
      </section>

      <section className="section section-soft">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Características</div>
            <h2 className="section-title">Lo que incluye {product.name}.</h2>
          </div>
          <div className="features">
            {product.features.map(f => (
              <div key={f.t} className="feature">
                <div className="feature-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <h4>{f.t}</h4>
                <p>{f.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Módulos</div>
            <h2 className="section-title">Todo lo que necesitas, integrado.</h2>
            <p className="section-sub">Explora cada módulo como si estuvieras dentro del sistema. Haz clic para navegar — los datos son de demostración.</p>
          </div>
          <ModuleExplorer product={product} slug={slug} />
        </div>
      </section>

      <section className="section section-soft">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Beneficios</div>
            <h2 className="section-title">Impacto medible en tu operación.</h2>
          </div>
          <div className="problem-grid">
            {product.benefits.map(b => (
              <div key={b.t} className="problem-card">
                <div className="problem-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                </div>
                <h3>{b.t}</h3>
                <p>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Vista previa</div>
            <h2 className="section-title">Así se ve {product.name}.</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="sol-detail-grid">
            {slug === 'martz-pos' ? (
              <>
                <ScreenshotPlaceholder label={`${product.name.toLowerCase()}.punto_de_venta`} src="../../assets/martz_pos/punto de venta .png" />
                <ScreenshotPlaceholder label={`${product.name.toLowerCase()}.inventario`} src="../../assets/martz_pos/inventario.png" />
              </>
            ) : (
              <>
                <ScreenshotPlaceholder label={`${product.name.toLowerCase()}.ventas`} />
                <ScreenshotPlaceholder label={`${product.name.toLowerCase()}.reportes`} />
              </>
            )}
          </div>
        </div>
      </section>

      <section className="section section-soft" id="planes">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">{product.plansEyebrow || 'Planes'}</div>
            <h2 className="section-title">{product.plansTitle || (isLive ? 'Planes simples para empezar y crecer.' : 'Próximamente con precios accesibles.')}</h2>
            {(product.plansSubtitle || isLive) && <p className="section-sub">{product.plansSubtitle || 'Elige el nivel de operación que mejor se adapta a tu negocio. Puedes empezar pequeño y crecer sin cambiar de sistema.'}</p>}
          </div>
          <div className={`svc-grid ${hasDetailedPlans ? 'pos-plan-grid' : ''}`} style={{ gridTemplateColumns: product.plans.length === 1 ? '1fr' : undefined, maxWidth: product.plans.length === 1 ? 420 : undefined, margin: product.plans.length === 1 ? '0 auto' : undefined }}>
            {product.plans.map(plan => (
              <div key={plan.name} className={`svc-card ${hasDetailedPlans ? 'pos-plan-card' : ''} ${plan.featured ? 'featured' : ''}`}>
                {plan.featured && <span className="svc-pop">{plan.featuredLabel || (isLive ? 'Recomendado' : 'Lista de espera')}</span>}
                <h3>{plan.name}</h3>
                {plan.value && <p className="pos-plan-value">{plan.value}</p>}
                <div className="svc-price-box" style={plan.featured ? { background: 'rgba(34,197,94,0.06)', borderColor: 'rgba(34,197,94,0.2)' } : null}>
                  <div className="lbl">Precio</div>
                  <div className={`price ${plan.featured ? 'grad' : ''}`} style={{ fontSize: plan.price === 'Próximamente' ? 26 : 32 }}>{plan.price}<span style={{ fontSize: 16, opacity: 0.7 }}>{plan.unit}</span></div>
                  <div className="unit">{plan.capacity || plan.note}</div>
                  {plan.priceNote && <div className="note">{plan.priceNote}</div>}
                </div>
                {plan.includes && (
                  <ul className="pos-plan-list">
                    {plan.includes.map(item => (
                      <li key={item}>
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                )}
                {plan.idealFor && <p className="pos-plan-ideal"><strong>Ideal para:</strong> {plan.idealFor}</p>}
                <a href="../contacto.html" className="svc-cta">{plan.cta} →</a>
              </div>
            ))}
          </div>
          {product.plansNote && (
            <div className="pos-plan-note">
              <h3>{product.plansNote.title}</h3>
              <p>{product.plansNote.text}</p>
            </div>
          )}
          {(product.launchNote || product.waitlistNote) && (
            <div className="pos-launch-notes">
              {product.launchNote && <p>{product.launchNote}</p>}
              {product.waitlistNote && <p>{product.waitlistNote}</p>}
            </div>
          )}
          {product.addOns && (
            <div className="pos-addons">
              <div className="section-head" style={{ marginBottom: 22 }}>
                <h3>{product.addOns.title}</h3>
                <p>{product.addOns.text}</p>
              </div>
              <div className="pos-addon-grid">
                {product.addOns.items.map(item => <span key={item}>{item}</span>)}
              </div>
            </div>
          )}
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Preguntas frecuentes</div>
            <h2 className="section-title">Dudas sobre {product.name}.</h2>
          </div>
          <DetailFaq items={product.faq} />
        </div>
      </section>

      <section className="big-cta">
        <div className="container">
          <h2>{isLive ? <>Empieza con <span className="grad">{product.name}</span> hoy.</> : <>Sé de los primeros en probar <span className="grad">{product.name}</span>.</>}</h2>
          <p>{isLive ? 'Demo en vivo de 30 minutos. Sin compromiso, sin tarjeta de crédito.' : 'Únete a la lista de espera y recibe acceso anticipado con precio preferencial.'}</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="../contacto.html" className="btn btn-primary">{isLive ? 'Solicitar demo' : 'Conocer más'}</a>
            <a href="../productos.html" className="btn btn-secondary" style={{ background: 'rgba(255,255,255,0.06)', color: '#fff', borderColor: 'rgba(255,255,255,0.14)' }}>Ver todos los productos</a>
          </div>
        </div>
      </section>

      <SiteFooter />
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<ProductoDetailApp />);