// OKentra Website — Home (single scrolling page reflecting the real architecture)

// ---- Data ----
const SOLUCIONES = [
  { key: 'ERP', icon: 'layout-dashboard', tag: 'Núcleo', href: 'erp.html', desc: 'Toda tu empresa en Odoo by OKentra: todo el potencial de Odoo multiplicado por OKentra, con facturación electrónica.', primary: true },
  { key: 'Evolución RRHH', icon: 'users', tag: 'Recursos humanos', href: 'rrhh.html', desc: 'Asistencia, acceso, prenómina y nómina — todo el ciclo del colaborador.' },
  { key: 'Campus', icon: 'graduation-cap', tag: 'Educación', href: 'campus.html', desc: 'Admisión, académico, familias y finanzas en un solo ERP educativo.' },
  { key: 'PreObra', icon: 'hard-hat', tag: 'Construcción', href: 'preobra.html', desc: 'Presupuestación, planificación, control y seguimiento de obra.' },
  { key: 'Pagos', icon: 'credit-card', tag: 'Comercio · POS', href: 'pagos.html', desc: 'Cobros Tap to Phone (NFC), terminales POS, recibos y fidelidad.' },
  { key: 'Sensor', icon: 'thermometer-snowflake', tag: 'IoT · cadena de frío', href: 'sensor.html', desc: 'Monitoreo de heladeras de farmacia y ambientes críticos, con alertas.' },
];

const RRHH_INFRA = [
  { name: 'Wall', icon: 'scan-face', desc: 'El centro físico de registro. Reloj tablet y facial, compatible con hardware líder.' },
  { name: 'Prenómina', icon: 'calculator', desc: 'El motor de cálculo: novedades, horas extras, faltas e incidencias antes del pago.' },
  { name: 'Nómina', icon: 'receipt', desc: 'Gestión financiera del talento: liquidación, recibos digitales y control salarial.' },
  { name: 'Acceso', icon: 'shield-check', desc: 'Seguridad activa. Control de ingreso automatizado del personal a las instalaciones.' },
];
const RRHH_APPS = [
  { name: 'Reclutamiento', icon: 'user-plus' }, { name: 'Evaluaciones', icon: 'bar-chart-3' },
  { name: 'Firma electrónica', icon: 'pen-line' }, { name: 'Gastos', icon: 'wallet' },
  { name: 'Vacaciones', icon: 'palmtree' }, { name: 'Habilidades', icon: 'brain' },
];

const INDUSTRIAS = [
  { name: 'Educación', prod: 'OKentra Campus', icon: 'graduation-cap', href: 'campus.html', points: ['Gestión académica', 'Administrativa y financiera', 'Experiencia del estudiante'] },
  { name: 'Construcción', prod: 'OKentra PreObra', icon: 'hard-hat', points: ['Presupuestos y planificación', 'Control y seguimiento de obra', 'Rentabilidad de proyectos'] },
  { name: 'Empresa', prod: 'OKentra ERP', icon: 'building-2', points: ['Procesos integrados', 'Visión 360° del negocio', 'Decisiones basadas en datos'] },
  { name: 'Farmacia · Cadena de frío', prod: 'OKentra Sens', icon: 'thermometer-snowflake', href: 'sensor.html', points: ['Monitoreo de heladeras de medicamentos', 'Alertas y trazabilidad', 'Cumplimiento para auditorías'] },
  { name: 'Comercio · POS', prod: 'OKentra Tap', icon: 'credit-card', href: 'pagos.html', points: ['Facturación electrónica', 'Kioscos de autoservicio', 'Pagos NFC y conciliación'] },
  { name: 'Empresas Públicas', prod: 'OKentra ERP', icon: 'landmark', points: ['Gestión de compras y expedientes', 'Trazabilidad y transparencia', 'Control presupuestal y auditoría'] },
];

// ---- Sections ----
function Hero({ onDemo, onNav }) {
  const { Button } = window.OKENTRADesignSystem_9c3390;
  const [chipHover, setChipHover] = React.useState(null);
  const chips = [
    { label: 'ERP', href: 'erp.html' },
    { label: 'Evolución RRHH', href: 'rrhh.html' },
    { label: 'Campus', href: 'campus.html' },
    { label: 'PreObra', href: 'preobra.html' },
    { label: 'Tap', href: 'pagos.html' },
    { label: 'Sens', href: 'sensor.html' },
  ];
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--navy-600)', color: '#fff' }}>
      <div style={{ position: 'absolute', top: -160, right: -120, width: 560, height: 560, borderRadius: '50%', background: 'radial-gradient(circle, rgba(104,75,255,0.55), rgba(104,75,255,0) 68%)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '86px 28px 92px', position: 'relative', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
        <div>
          <img src="../../assets/brand/okentra-banner-navy.png" alt="OKentra · Transformamos procesos, potenciamos resultados" style={{ width: '100%', maxWidth: 520, borderRadius: 14, display: 'block', boxShadow: '0 12px 40px rgba(0,0,0,0.35)' }} />
          <p style={{ margin: '24px 0 0', fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,0.82)', maxWidth: 520 }}>
            Soluciones especializadas basadas en Odoo y desarrollos propios para cada industria.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 30 }}>
            <Button variant="primary" size="lg" onClick={() => onNav('soluciones')}>Conocer soluciones</Button>
            <Button variant="secondary" size="lg" onClick={onDemo} style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>Agendar demo</Button>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 30, flexWrap: 'wrap' }}>
            {chips.map((c) => {
              const on = chipHover === c.label;
              return (
                <a key={c.label} href={c.href}
                  onMouseEnter={() => setChipHover(c.label)} onMouseLeave={() => setChipHover(null)}
                  style={{ fontSize: 12.5, fontWeight: 600, textDecoration: 'none', cursor: 'pointer',
                    color: on ? 'var(--violet-200)' : 'rgba(255,255,255,0.7)',
                    background: on ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.06)',
                    border: `1px solid ${on ? 'rgba(255,255,255,0.28)' : 'rgba(255,255,255,0.12)'}`,
                    padding: '5px 12px', borderRadius: 999, transition: 'background 0.15s ease, color 0.15s ease, border-color 0.15s ease' }}>{c.label}</a>
              );
            })}
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <h3 style={{ margin: '0 0 18px', textAlign: 'center', fontFamily: "'Caveat', cursive", fontWeight: 700, fontSize: 42, lineHeight: 1.05, color: '#fff' }}>
            <span style={{ position: 'relative', display: 'inline-block' }}>
              Mejora
              <span style={{ position: 'absolute', left: -4, right: -4, bottom: 4, height: 8, background: 'var(--violet-400)', borderRadius: 999, opacity: 0.9, zIndex: -1 }} />
            </span>{' '}la calidad de tu{' '}
            <span style={{ position: 'relative', display: 'inline-block' }}>
              trabajo
              <span style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 4, background: '#3fd1c7', borderRadius: 999 }} />
            </span>
          </h3>
          <div style={{ background: '#fff', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)', overflow: 'hidden' }}>
            <div style={{ height: 42, background: 'var(--neutral-50)', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 7, padding: '0 16px' }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#e2649b' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#e6b95a' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#62b87a' }} />
              <span style={{ marginLeft: 10, fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>app.okentra.com</span>
            </div>
            <video
              src="../../assets/media/okentra-erp-demo-es.mp4"
              controls
              controlsList="nodownload noplaybackrate"
              disablePictureInPicture
              autoPlay
              loop
              muted
              playsInline
              style={{ display: 'block', width: '100%', height: 'auto', background: 'var(--neutral-50)' }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustBar() {
  const items = ['Odoo', 'ANTEL', 'ZKTeco', 'Dahua', 'Hikvision', 'Landi', 'Honeywell'];
  return (
    <div style={{ borderBottom: '1px solid var(--border-subtle)', background: '#fff' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '22px 28px', display: 'flex', alignItems: 'center', gap: 36, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-muted)' }}>Tecnología y alianzas</span>
        {items.map((i) => (
          <span key={i} style={{ fontSize: 18, fontWeight: 800, color: 'var(--neutral-400)', letterSpacing: '-0.01em' }}>{i}</span>
        ))}
      </div>
    </div>
  );
}

function SectionHead({ eyebrow, title, sub }) {
  return (
    <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
      <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--violet-600)', margin: '0 0 12px' }}>{eyebrow}</p>
      <h2 style={{ margin: 0, fontSize: 38, fontWeight: 800, color: 'var(--text-strong)', letterSpacing: '-0.02em' }}>{title}</h2>
      {sub && <p style={{ margin: '14px 0 0', fontSize: 17, color: 'var(--text-muted)', lineHeight: 1.6 }}>{sub}</p>}
    </div>
  );
}

function Soluciones({ innerRef, onNav }) {
  const { Card } = window.OKENTRADesignSystem_9c3390;
  return (
    <section ref={innerRef} style={{ maxWidth: 1240, margin: '0 auto', padding: '88px 28px' }}>
      <SectionHead eyebrow="Ecosistema" title="Todo nuestro ecosistema, potenciado por Odoo" sub="Construido sobre Odoo, uno de los ERP más sólidos del mundo, y especializado para tu industria: cada solución integrada, escalable y lista para crecer con vos." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {SOLUCIONES.map((v) => (
          <Card key={v.key} padding="md" interactive onClick={() => { if (v.href) window.location.href = v.href; }} style={v.primary ? { borderColor: 'var(--violet-200)', background: 'var(--violet-50)' } : {}}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 12 }}>
              <div style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: v.primary ? 'var(--violet-500)' : 'var(--violet-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <SiteIcon name={v.icon} size={23} color={v.primary ? '#fff' : 'var(--violet-600)'} />
              </div>
              <div>
                <h3 style={{ margin: 0, fontSize: 17, fontWeight: 800, color: 'var(--navy-600)' }}>OKentra {v.key}</h3>
                <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)' }}>{v.tag}</div>
              </div>
              {v.primary && <img src="../../assets/logos/odoo-logo.png" alt="Odoo" title="Sobre Odoo" style={{ height: 18, display: 'block', marginLeft: 'auto', flexShrink: 0 }} />}
            </div>
            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-muted)' }}>{v.desc}</p>
          </Card>
        ))}
      </div>
    </section>
  );
}

function RRHHSection({ innerRef, onDemo }) {
  const { Button } = window.OKENTRADesignSystem_9c3390;
  return (
    <section ref={innerRef} style={{ background: 'var(--navy-700)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -140, left: -100, width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(104,75,255,0.35), rgba(104,75,255,0) 70%)' }} />
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '88px 28px', position: 'relative' }}>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 44px' }}>
          <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--violet-300)', margin: '0 0 12px' }}>Recursos humanos</p>
          <h2 style={{ margin: 0, fontSize: 42, fontWeight: 800, letterSpacing: '-0.02em' }}>OKentra <span style={{ color: 'var(--violet-300)' }}>Evolución RRHH</span></h2>
          <p style={{ margin: '14px 0 0', fontSize: 18, color: 'rgba(255,255,255,0.75)', lineHeight: 1.6 }}>La suite definitiva para la gestión del colaborador. Conectado, automatizado y en tiempo real — sobre una infraestructura única con IA.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 34 }}>
          {RRHH_INFRA.map((m) => (
            <div key={m.name} style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 'var(--radius-lg)', padding: 22 }}>
              <div style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'rgba(104,75,255,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                <SiteIcon name={m.icon} size={22} color="var(--violet-200)" />
              </div>
              <h4 style={{ margin: '0 0 6px', fontSize: 17, fontWeight: 800 }}>OKentra {m.name}</h4>
              <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: 'rgba(255,255,255,0.68)' }}>{m.desc}</p>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', justifyContent: 'center', marginBottom: 32 }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.6)' }}>Una app para cada necesidad:</span>
          {RRHH_APPS.map((a) => (
            <span key={a.name} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, fontWeight: 600, color: '#fff', background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.14)', padding: '7px 13px', borderRadius: 999 }}>
              <SiteIcon name={a.icon} size={15} color="var(--violet-200)" /> {a.name}
            </span>
          ))}
        </div>
        <div style={{ textAlign: 'center' }}>
          <Button variant="primary" size="lg" onClick={() => { window.location.href = 'rrhh.html'; }}>Ver Evolución RRHH completa</Button>
        </div>
      </div>
    </section>
  );
}

function Industrias({ innerRef }) {
  return (
    <section ref={innerRef} style={{ background: 'var(--neutral-50)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '88px 28px' }}>
      <SectionHead eyebrow="Industrias" title="Soluciones especializadas por industria" sub="Experiencia que entiende tus desafíos, con soluciones aplicadas a cada sector." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {INDUSTRIAS.map((ind) => (
          <div key={ind.name} onClick={() => ind.href && (window.location.href = ind.href)} style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', background: '#fff', cursor: ind.href ? 'pointer' : 'default' }}>
            <div style={{ height: 120, background: 'var(--gradient-brand)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <SiteIcon name={ind.icon} size={44} color="#fff" strokeWidth={1.5} />
            </div>
            <div style={{ padding: 24 }}>
              <h3 style={{ margin: '0 0 3px', fontSize: 20, fontWeight: 800, color: 'var(--navy-600)' }}>{ind.name}</h3>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--violet-600)', marginBottom: 14 }}>{ind.prod}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {ind.points.map((p) => (
                  <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 14, color: 'var(--text-body)' }}>
                    <SiteIcon name="check" size={16} color="var(--success-500)" strokeWidth={2.4} /> {p}
                  </div>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', border: '1px solid var(--border-subtle)' }}>
        <img src="../../assets/media/industrias-odoo-banner.png" alt="Odoo by OKentra — Libera tu potencial de crecimiento" style={{ display: 'block', width: '100%', height: 'auto' }} />
      </div>
      </div>
    </section>
  );
}

function OdooSection({ innerRef, onDemo }) {
  const { Button } = window.OKENTRADesignSystem_9c3390;
  const cols = [
    { t: 'Odoo Enterprise', pts: ['Funcionalidades avanzadas', 'Soporte oficial Odoo', 'Actualizaciones garantizadas'], tone: '#1f9d6b' },
    { t: 'Odoo Community', pts: ['Código abierto y libre', 'Comunidad global', 'Sin costos de licencia'], tone: 'var(--violet-600)' },
  ];
  return (
    <section ref={innerRef} style={{ background: 'var(--neutral-50)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '88px 28px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--violet-600)', margin: '0 0 12px' }}>El ERP que impulsa OKentra</p>
          <h2 style={{ margin: 0, fontSize: 36, fontWeight: 800, color: 'var(--text-strong)', letterSpacing: '-0.02em' }}>Odoo, el ERP líder, flexible y escalable</h2>
          <p style={{ margin: '16px 0 22px', fontSize: 17, color: 'var(--text-muted)', lineHeight: 1.6 }}>OKentra combina la potencia de Odoo Enterprise y Community con desarrollos propios para crear soluciones ágiles, seguras y preparadas para crecer contigo.</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 24 }}>
            {cols.map((c) => (
              <div key={c.t} style={{ background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 18, boxShadow: 'var(--shadow-sm)' }}>
                <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--navy-600)', marginBottom: 12 }}>{c.t}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                  {c.pts.map((p) => (
                    <div key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 12.5, color: 'var(--text-body)', lineHeight: 1.4 }}>
                      <SiteIcon name="check-circle-2" size={15} color={c.tone} /> {p}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <Button variant="primary" onClick={onDemo}>Hablar con un experto</Button>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ background: '#fff', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)', overflow: 'hidden' }}>
            <div style={{ height: 42, background: 'var(--neutral-50)', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 7, padding: '0 16px' }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#e2649b' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#e6b95a' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#62b87a' }} />
              <span style={{ marginLeft: 10, fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>¿Qué es Odoo?</span>
            </div>
            <video src="../../assets/media/que-es-odoo-1min.mp4" controls controlsList="nodownload noplaybackrate" disablePictureInPicture autoPlay muted loop playsInline style={{ display: 'block', width: '100%', height: 'auto', background: '#000' }} />
          </div>
        </div>
      </div>
    </section>
  );
}

function ComunidadOdoo({ onDemo }) {
  const { Button } = window.OKENTRADesignSystem_9c3390;
  const photos = [
    { src: '../../assets/team/com1.jpg', shape: 'rounded', radius: 14 },
    { src: '../../assets/team/com2.jpg', shape: 'circle' },
    { src: '../../assets/team/com3.jpg', shape: 'rounded', radius: 22 },
    { src: '../../assets/team/com4.jpg', shape: 'circle' },
    { src: '../../assets/team/com5.jpg', shape: 'rounded', radius: 18 },
    { src: '../../assets/team/com6.jpg', shape: 'circle' },
  ];
  const S = 72;
  return (
    <section style={{ background: 'var(--navy-700)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -160, right: -120, width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(104,75,255,0.30), rgba(104,75,255,0) 70%)' }} />
      <div style={{ position: 'absolute', bottom: -180, left: -120, width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(104,75,255,0.20), rgba(104,75,255,0) 70%)' }} />
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '84px 28px', position: 'relative', textAlign: 'center' }}>
        <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--violet-300)', margin: '0 0 18px' }}>Comunidad global</p>
        <h2 style={{ margin: 0, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.05 }}>
          <span style={{ display: 'block', fontFamily: "'Caveat', cursive", fontWeight: 700, fontSize: 62 }}>
            Sumate a los <span style={{ color: 'var(--violet-300)' }}>28 millones</span>
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 16, fontSize: 44, marginTop: 4 }}>
            que crecen con <img src="../../assets/logos/odoo-logo-white.png" alt="Odoo" style={{ height: 42, display: 'block' }} />
          </span>
        </h2>
        <p style={{ margin: '18px auto 0', fontSize: 18, color: 'rgba(255,255,255,0.75)', maxWidth: 620, lineHeight: 1.55 }}>
          Hacé crecer tu negocio sobre el ERP que ya usan millones de empresas en todo el mundo — potenciado por OKentra y especializado para tu industria.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 14, margin: '34px 0 26px' }}>
          {photos.map((p, i) => (
            <div key={i} style={{ width: S, height: S, borderRadius: p.shape === 'circle' ? '50%' : p.radius, overflow: 'hidden', boxShadow: '0 4px 14px rgba(0,0,0,0.28)', border: '2px solid rgba(255,255,255,0.85)' }}>
              <img src={p.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
          ))}
        </div>
        <div style={{ position: 'relative', display: 'inline-block', margin: '0 auto 34px', padding: '0 30px' }}>
          <div style={{ position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 7, alignItems: 'flex-end', height: 22 }}>
            {[10, 16, 22, 16, 10].map((h, i) => (
              <span key={i} style={{ width: 3, height: h, borderRadius: 2, background: i % 2 ? 'var(--violet-300)' : '#F0B94A', transform: 'rotate(' + (i * 18 - 36) + 'deg)', transformOrigin: 'bottom', display: 'block' }} />
            ))}
          </div>
          <p style={{ margin: 0, fontFamily: "'Caveat', cursive", fontWeight: 700, lineHeight: 1, textAlign: 'center' }}>
            <span style={{ display: 'block', fontSize: 60, color: '#fff' }}>Liberá</span>
            <span style={{ display: 'block', fontSize: 44, color: 'var(--violet-300)', marginTop: 2 }}>tu potencial de crecimiento</span>
          </p>
        </div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
          <Button variant="primary" size="lg" onClick={onDemo}>Agendá tu demo</Button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'rgba(255,255,255,0.7)', fontSize: 13, fontWeight: 600 }}>
            <span>Partner de</span>
            <img src="../../assets/logos/odoo-logo-white.png" alt="Odoo" style={{ height: 22, display: 'block' }} />
          </div>
        </div>
      </div>
    </section>
  );
}

function Casos({ innerRef }) {
  const { Avatar } = window.OKENTRADesignSystem_9c3390;
  const casos = [
    { sol: 'OKentra Campus', sector: 'Educación', icon: 'graduation-cap', bg: 'var(--navy-600)', glow: 'rgba(104,75,255,0.35)', accent: 'var(--violet-300)',
      quote: 'OKentra Campus nos permitió centralizar toda la información y enfocarnos en lo que realmente importa: nuestros estudiantes.',
      role: 'Director Administrativo', org: 'Colegio San José', ini: 'CSJ',
      kpis: [['+35%', 'Eficiencia administrativa'], ['-28%', 'Tiempo en procesos'], ['+100%', 'Visibilidad en tiempo real']] },
    { sol: 'OKentra Evolución RRHH', sector: 'Recursos Humanos', icon: 'users', bg: '#141B54', glow: 'rgba(167,134,250,0.35)', accent: 'var(--violet-200)',
      quote: 'Unificamos asistencia, prenómina y nómina en una sola plataforma. La liquidación pasó de días a horas.',
      role: 'Gerenta de Personas', org: 'Grupo Industrial Sur', ini: 'GIS',
      kpis: [['-70%', 'Tiempo de liquidación'], ['0', 'Errores de marcación'], ['+40%', 'Productividad de RRHH']] },
    { sol: 'OKentra PreObra', sector: 'Construcción', icon: 'hard-hat', bg: '#1E256D', glow: 'rgba(240,116,58,0.30)', accent: '#F5A03A',
      quote: 'Por primera vez vemos el costo real de cada obra en tiempo real y controlamos los desvíos antes de que sean un problema.',
      role: 'Director de Obras', org: 'Constructora del Este', ini: 'CDE',
      kpis: [['-18%', 'Desvíos de presupuesto'], ['+30%', 'Rentabilidad por obra'], ['100%', 'Trazabilidad de costos']] },
    { sol: 'OKentra Tap', sector: 'Comercio · POS', icon: 'credit-card', bg: '#101A4D', glow: 'rgba(104,75,255,0.4)', accent: 'var(--violet-300)',
      quote: 'Cobrar con el celular nos sacó filas de encima. La conciliación con Odoo es automática y sin errores.',
      role: 'Dueña', org: 'Cafetería Central', ini: 'CC',
      kpis: [['-45%', 'Tiempo de cobro'], ['+22%', 'Ticket promedio'], ['100%', 'Ventas conciliadas']] },
    { sol: 'OKentra Sens', sector: 'Farmacia · Cadena de frío', icon: 'thermometer-snowflake', bg: '#122A54', glow: 'rgba(31,191,168,0.30)', accent: '#3FD9C0',
      quote: 'Monitoreamos las heladeras de medicamentos las 24 horas. Ante cualquier desvío recibimos la alerta al instante.',
      role: 'Química Farmacéutica', org: 'Farmacia Los Andes', ini: 'FLA',
      kpis: [['24/7', 'Monitoreo de temperatura'], ['-90%', 'Riesgo de pérdida'], ['100%', 'Registro auditable']] },
    { sol: 'OKentra ERP', sector: 'Gestión integral', icon: 'layout-dashboard', bg: '#0E1746', glow: 'rgba(167,134,250,0.32)', accent: 'var(--violet-200)',
      quote: 'Toda la empresa en un solo sistema, con facturación electrónica incluida. Dejamos atrás las planillas dispersas.',
      role: 'Gerente General', org: 'Distribuidora Norte', ini: 'DN',
      kpis: [['-50%', 'Tareas manuales'], ['+1', 'Fuente única de datos'], ['100%', 'Facturación electrónica']] },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % casos.length), 6000);
    return () => clearInterval(id);
  }, []);
  const c = casos[idx];
  return (
    <section ref={innerRef} style={{ maxWidth: 1240, margin: '0 auto', padding: '88px 28px' }}>
      <SectionHead eyebrow="Casos de éxito" title="Historias reales, resultados reales" sub="Una solución para cada industria, con impacto medible." />
      <div style={{ background: c.bg, borderRadius: 'var(--radius-xl)', padding: '40px 44px', color: '#fff', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40, alignItems: 'center', position: 'relative', overflow: 'hidden', transition: 'background 0.5s ease', minHeight: 300 }}>
        <div style={{ position: 'absolute', top: -120, right: -80, width: 360, height: 360, borderRadius: '50%', background: 'radial-gradient(circle, ' + c.glow + ', rgba(0,0,0,0) 70%)', transition: 'background 0.5s ease' }} />
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.16)', padding: '8px 14px', borderRadius: 999, marginBottom: 20 }}>
            <SiteIcon name={c.icon} size={16} color={c.accent} /> <span style={{ fontSize: 13, fontWeight: 700 }}>{c.sol} · {c.sector}</span>
          </div>
          <p style={{ fontSize: 22, fontWeight: 600, lineHeight: 1.45, margin: '0 0 22px', letterSpacing: '-0.01em' }}>
            "{c.quote}"
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12.5, fontWeight: 800, color: '#fff', flexShrink: 0 }}>{c.ini}</span>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>{c.role}</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>{c.org}</div>
            </div>
          </div>
        </div>
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {c.kpis.map(([n, l]) => (
            <div key={l} style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 'var(--radius-lg)', padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ fontSize: 32, fontWeight: 800, color: c.accent, letterSpacing: '-0.02em', minWidth: 90 }}>{n}</span>
              <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)' }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 22 }}>
        {casos.map((cc, i) => (
          <button key={i} onClick={() => setIdx(i)} aria-label={cc.sol} style={{ width: i === idx ? 28 : 10, height: 10, borderRadius: 999, border: 'none', cursor: 'pointer', padding: 0, background: i === idx ? 'var(--violet-500)' : 'var(--neutral-300)', transition: 'all 0.3s ease' }} />
        ))}
      </div>
    </section>
  );
}

function CTASection({ onDemo }) {
  const { Button } = window.OKENTRADesignSystem_9c3390;
  return (
    <section style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 28px 88px' }}>
      <div style={{ background: 'var(--gradient-brand)', borderRadius: 'var(--radius-2xl)', padding: '56px 48px', position: 'relative', overflow: 'hidden', textAlign: 'center', color: '#fff' }}>
        <div style={{ position: 'absolute', bottom: -120, left: -80, width: 380, height: 380, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0) 70%)' }} />
        <h2 style={{ margin: 0, fontSize: 34, fontWeight: 800, letterSpacing: '-0.02em', position: 'relative' }}>¿Listos para transformar tu empresa?</h2>
        <p style={{ margin: '14px auto 28px', fontSize: 17, color: 'rgba(255,255,255,0.85)', maxWidth: 560, position: 'relative' }}>Integramos tecnología con procesos reales de negocio. Hablemos de tu próximo proyecto.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', position: 'relative' }}>
          <Button variant="secondary" size="lg" onClick={onDemo} style={{ background: '#fff', color: 'var(--navy-600)', borderColor: '#fff' }}>Solicitar demo</Button>
        </div>
      </div>
    </section>
  );
}

function SiteFooter({ onNav }) {
  const cols = [
    ['Soluciones', ['OKentra ERP', 'Evolución RRHH', 'Campus', 'PreObra', 'Pagos', 'Sensor']],
    ['Empresa', ['Nosotros', 'Servicios', 'Hardware', 'Casos de éxito', 'Contacto']],
    ['Odoo', ['Partner Oficial', 'Enterprise', 'Community', 'OKentra Labs']],
  ];
  return (
    <footer style={{ background: 'var(--navy-800)', color: 'rgba(255,255,255,0.7)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '56px 28px 28px', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <img src="../../assets/logos/okentra-logo-white.png" alt="OKentra" style={{ height: 34, display: 'block', marginBottom: 16 }} />
          <p style={{ margin: '0 0 16px', fontSize: 13.5, lineHeight: 1.5, color: 'rgba(255,255,255,0.6)', maxWidth: 300 }}>Transformamos procesos, potenciamos resultados.</p>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 999, padding: '7px 14px' }}>
            <img src="../../assets/logos/odoo-logo-white.png" alt="Odoo" style={{ height: 15, display: 'block' }} />
            <span style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.7)' }}>Partner Odoo</span>
          </div>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 14 }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {items.map((it) => {
                const map = { 'OKentra ERP': 'erp.html', 'Evolución RRHH': 'rrhh.html', 'Campus': 'campus.html', 'PreObra': 'preobra.html', 'Pagos': 'pagos.html', 'Sensor': 'sensor.html', 'Servicios': 'servicios.html', 'Hardware': 'hardware.html' };
                const href = map[it] || '#';
                return <a key={it} href={href} style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.65)', textDecoration: 'none' }}>{it}</a>;
              })}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '18px 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12.5, color: 'rgba(255,255,255,0.5)' }}>
          <span>© 2026 InflexiumLabs - OKentra</span>
          <span style={{ display: 'flex', gap: 16 }}><a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacidad</a><a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Términos</a></span>
        </div>
      </div>
    </footer>
  );
}

function Nosotros({ innerRef }) {
  const stats = [['+150', 'Proyectos exitosos', 'rocket'], ['+100', 'Clientes satisfechos', 'smile'], ['+9', 'Años de experiencia', 'calendar-check'], ['9', 'Soluciones especializadas', 'layers']];
  return (
    <section ref={innerRef} style={{ background: 'var(--navy-600)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -140, right: -100, width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(104,75,255,0.32), rgba(104,75,255,0) 70%)' }} />
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '88px 28px', position: 'relative' }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
          <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--violet-300)', margin: '0 0 12px' }}>Sobre nosotros</p>
          <h2 style={{ margin: 0, fontSize: 40, fontWeight: 800, letterSpacing: '-0.02em' }}>Somos OKentra</h2>
          <p style={{ margin: '14px 0 0', fontSize: 18, color: 'rgba(255,255,255,0.75)', lineHeight: 1.6 }}>Un equipo de profesionales apasionados por la tecnología y las personas. Implementamos Odoo Enterprise y Community para llevar tu empresa al siguiente nivel.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 40, alignItems: 'center', marginBottom: 48 }}>
          <div>
            <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--violet-300)', margin: '0 0 14px' }}>Acerca de OKentra</p>
            <p style={{ margin: '0 0 16px', fontSize: 16.5, color: 'rgba(255,255,255,0.82)', lineHeight: 1.65 }}>
              Somos <strong style={{ color: '#fff' }}>OKentra</strong>, <strong style={{ color: '#fff' }}>Partner Oficial de Odoo en Uruguay</strong>. Ayudamos a pymes y organizaciones en crecimiento a ordenar, integrar y automatizar procesos reales —incluso cuando la operativa es compleja. No instalamos software: convertimos Odoo en una herramienta útil, adoptada por los equipos.
            </p>
            <p style={{ margin: '0 0 16px', fontSize: 16.5, color: 'rgba(255,255,255,0.72)', lineHeight: 1.65 }}>
              Nuestra escala es una ventaja: un equipo cercano, ágil y comprometido, sin capas ni intermediarios. Las mismas personas que participan en el diagnóstico acompañan la configuración, la puesta en producción, el soporte y la evolución posterior.
            </p>
            <p style={{ margin: '0 0 16px', fontSize: 16.5, color: 'rgba(255,255,255,0.72)', lineHeight: 1.65 }}>
              Trabajamos bajo una estrategia <strong style={{ color: '#fff' }}>Odoo First</strong>: aprovechamos primero lo nativo de la plataforma y, cuando el negocio lo requiere, desarrollamos extensiones en Python respetando su arquitectura —sin comprometer la mantenibilidad ni la evolución futura.
            </p>
            <p style={{ margin: 0, fontSize: 16.5, color: 'rgba(255,255,255,0.72)', lineHeight: 1.65 }}>
              Con equipo local en <strong style={{ color: '#fff' }}>Montevideo (Punta Carretas – Golf)</strong> y acompañamiento directo, nos involucramos en cada proyecto con visión de largo plazo. <strong style={{ color: 'var(--violet-200)' }}>Transformamos procesos, potenciamos resultados.</strong>
            </p>
            <div style={{ display: 'flex', gap: 22, marginTop: 24, flexWrap: 'wrap' }}>
              {[['pin', 'Montevideo · Punta Carretas–Golf'], ['users', 'Equipo cercano'], ['badge-check', 'Partner Oficial Odoo']].map(([ic, t]) => (
                <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 13.5, fontWeight: 600, color: 'rgba(255,255,255,0.82)' }}><SiteIcon name={ic === 'pin' ? 'map-pin' : ic} size={17} color="var(--violet-200)" /> {t}</span>
              ))}
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '160px 160px', gap: 12 }}>
            <img src="../../assets/brand/oficina-recepcion.png" alt="Recepción OKentra" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--radius-lg)', gridColumn: '1 / 3', boxShadow: 'var(--shadow-lg)' }} />
            <img src="../../assets/brand/oficina-sala-reuniones.png" alt="Sala de reuniones OKentra" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)' }} />
            <img src="../../assets/brand/oficina-fachada.png" alt="Fachada OKentra" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)' }} />
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 34 }}>
          {stats.map(([n, l, ic]) => (
            <div key={l} style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 'var(--radius-lg)', padding: 24, textAlign: 'center' }}>
              <div style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'rgba(104,75,255,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' }}>
                <SiteIcon name={ic} size={22} color="var(--violet-200)" />
              </div>
              <div style={{ fontSize: 40, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>{l}</div>
            </div>
          ))}
        </div>
        <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 'var(--radius-xl)', padding: '28px 32px', display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: 260 }}>
            <div style={{ fontSize: 20, fontWeight: 800, marginBottom: 6 }}>Partner Oficial Odoo</div>
            <p style={{ margin: 0, fontSize: 14.5, color: 'rgba(255,255,255,0.72)', lineHeight: 1.55 }}>Implementamos Odoo Enterprise y Community con desarrollos propios, integraciones y apps especializadas — OKentra Labs.</p>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 700, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.18)', padding: '9px 15px', borderRadius: 999 }}><SiteIcon name="badge-check" size={16} color="var(--violet-200)" /> Silver Partner</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 700, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.18)', padding: '9px 15px', borderRadius: 999 }}>Enterprise + Community</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Blog({ innerRef }) {
  const [sel, setSel] = React.useState(null);
  const posts = [
    { cat: 'Evento', icon: 'calendar-check', color: '#684BFF', date: '12 Ago 2026', read: 'Antel Arena', title: 'OKentra en el Antel Summit 2026', desc: 'Nos sumamos al Antel Summit — "Soberanía en tiempo real" — el 12 de agosto en el Antel Arena. Escribinos para coordinar tu atención preferencial y una reunión 1:1.', img: '../../assets/media/servicios-equipo.jpg', body: ['OKentra estará presente en el <strong>Antel Summit 2026</strong>, el encuentro de tecnología e innovación más importante del año en Uruguay, que se realizará el <strong>12 de agosto en el Antel Arena</strong> de Montevideo bajo el lema “Soberanía en tiempo real”.', 'Como Partner Oficial de Odoo, vamos a mostrar cómo nuestro ecosistema de soluciones — ERP, Evolución RRHH, Campus, PreObra, Tap y Sens — ayuda a las organizaciones a ordenar, integrar y automatizar sus procesos sobre una base sólida y escalable.', 'Coordinamos <strong>atención preferencial</strong> para nuestros clientes e invitados: acceso prioritario, una reunión 1:1 con nuestro equipo y un lugar en la zona de networking. Escribinos para reservar tu cupo antes del evento.'], img2: '../../assets/media/antel-summit.png' },
    { cat: 'Odoo', icon: 'sparkles', color: '#684BFF', date: '12 Jul 2026', read: '5 min', title: 'Qué trae Odoo 19 para las pymes de Uruguay', desc: 'Las novedades más relevantes de la nueva versión y cómo aprovecharlas en tu operación.', img: '../../assets/media/servicios-capacidades.png', body: ['Odoo 19 llega con mejoras significativas en rendimiento, experiencia de usuario e inteligencia artificial integrada, consolidándose como uno de los ERP más completos del mundo.', 'Para las pymes uruguayas, esto significa procesos más ágiles, tableros en tiempo real y automatizaciones que reducen el trabajo manual — todo sobre una plataforma modular que crece con el negocio.', 'En OKentra implementamos Odoo 19 bajo una estrategia Odoo First: aprovechamos primero lo nativo de la plataforma y desarrollamos a medida solo lo que realmente diferencia a tu empresa.'] },
    { cat: 'RRHH', icon: 'users', color: '#8F69DF', date: '28 Jun 2026', read: '4 min', title: 'Del reloj de fichar a la nómina: un flujo sin planillas', desc: 'Cómo OKentra Evolución RRHH conecta asistencia, prenómina y nómina en un solo lugar.', img: '../../assets/media/rrhh-ecosistema-crop.png', body: ['La gestión de personas suele quedar dispersa entre relojes de asistencia, planillas de Excel y sistemas de nómina que no se hablan entre sí.', 'OKentra Evolución RRHH une todo el ciclo en un mismo ecosistema: la marcación en OKentra Wall alimenta la prenómina, que a su vez prepara la liquidación en nómina — sin re-tipear datos ni errores.', 'El resultado: liquidaciones que pasan de días a horas, cero errores de marcación y visibilidad total del área de personas.'] },
    { cat: 'Cadena de frío', icon: 'thermometer-snowflake', color: '#12A594', date: '15 Jun 2026', read: '6 min', title: 'Control de heladeras en farmacia: qué exige la normativa', desc: 'Monitoreo de temperatura, alertas y trazabilidad para cumplir con las auditorías.', img: '../../assets/media/sens-hero.png', body: ['Las farmacias que conservan vacunas y medicamentos termolábiles deben mantener la cadena de frío dentro del rango 2–8 °C y demostrarlo ante las inspecciones sanitarias.', 'OKentra Sens monitorea la temperatura de heladeras y cámaras las 24 horas, envía alertas inmediatas ante cualquier desvío y guarda un registro histórico auditable.', 'Así se reduce el riesgo de pérdida de producto y se cumple con la normativa sin depender de controles manuales.'] },
  ];
  return (
    <React.Fragment>
    <section ref={innerRef} style={{ maxWidth: 1240, margin: '0 auto', padding: '88px 28px' }}>
      <SectionHead eyebrow="Blog" title="Ideas, novedades y buenas prácticas" sub="Aprendé cómo sacarle el máximo a Odoo y a cada solución de OKentra." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {posts.map((p) => (
          <article key={p.title} onClick={() => setSel(p)} style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', background: '#fff', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}>
            <div style={{ height: 128, background: 'linear-gradient(140deg, ' + p.color + ', var(--navy-600))', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 70% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%)' }} />
              <SiteIcon name={p.icon} size={40} color="#fff" strokeWidth={1.5} />
              <span style={{ position: 'absolute', top: 12, left: 12, fontSize: 11, fontWeight: 700, color: '#fff', background: 'rgba(0,0,0,0.28)', border: '1px solid rgba(255,255,255,0.25)', padding: '4px 10px', borderRadius: 999 }}>{p.cat}</span>
            </div>
            <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--text-muted)', marginBottom: 10 }}>
                <span>{p.date}</span><span>·</span><span>{p.read}</span>
              </div>
              <h3 style={{ margin: '0 0 8px', fontSize: 18, fontWeight: 800, color: 'var(--navy-600)', lineHeight: 1.25 }}>{p.title}</h3>
              <p style={{ margin: '0 0 16px', fontSize: 13.5, lineHeight: 1.55, color: 'var(--text-muted)' }}>{p.desc}</p>
              <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13.5, fontWeight: 700, color: 'var(--violet-600)' }}>Leer más <SiteIcon name="arrow-right" size={15} color="var(--violet-600)" /></span>
            </div>
          </article>
        ))}
      </div>
    </section>
    {sel && (
      <div onClick={() => setSel(null)} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(5,8,28,0.6)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', overflowY: 'auto', padding: '40px 20px' }}>
        <article onClick={(e) => e.stopPropagation()} style={{ background: '#fff', borderRadius: 'var(--radius-xl)', maxWidth: 720, width: '100%', overflow: 'hidden', boxShadow: '0 30px 80px rgba(5,8,28,0.5)' }}>
          <div style={{ position: 'relative', height: 240, overflow: 'hidden' }}>
            <img src={sel.img} alt={sel.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            <button onClick={() => setSel(null)} aria-label="Cerrar" style={{ position: 'absolute', top: 14, right: 14, width: 36, height: 36, borderRadius: '50%', border: 'none', background: 'rgba(5,8,28,0.55)', color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><SiteIcon name="x" size={18} color="#fff" /></button>
            <span style={{ position: 'absolute', top: 14, left: 14, fontSize: 11, fontWeight: 700, color: '#fff', background: 'rgba(0,0,0,0.32)', border: '1px solid rgba(255,255,255,0.25)', padding: '4px 10px', borderRadius: 999 }}>{sel.cat}</span>
          </div>
          <div style={{ padding: '30px 34px 36px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: 'var(--text-muted)', marginBottom: 12 }}>
              <span>{sel.date}</span><span>·</span><span>{sel.read}</span>
            </div>
            <h2 style={{ margin: '0 0 18px', fontSize: 28, fontWeight: 800, color: 'var(--navy-600)', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{sel.title}</h2>
            {sel.body.map((par, i) => (
              <p key={i} style={{ margin: '0 0 16px', fontSize: 15.5, lineHeight: 1.7, color: 'var(--text-body)' }} dangerouslySetInnerHTML={{ __html: par }} />
            ))}
            {sel.img2 && (
              <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', marginTop: 6, border: '1px solid var(--border-subtle)' }}>
                <img src={sel.img2} alt={sel.title} style={{ display: 'block', width: '100%', height: 'auto' }} />
              </div>
            )}
          </div>
        </article>
      </div>
    )}
    </React.Fragment>
  );
}

const WEB3FORMS_ACCESS_KEY = 'REEMPLAZAR_CON_TU_ACCESS_KEY';

function Contacto({ innerRef }) {
  const { Button, Input, Select } = window.OKENTRADesignSystem_9c3390;
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [form, setForm] = React.useState({ name: '', company: '', email: '', phone: '', solution: '' });
  const setField = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.value }));
  const rows = [
    { icon: 'calendar', t: 'Agenda una reunión', d: 'Coordinemos una demo personalizada.' },
    { icon: 'message-circle', t: 'WhatsApp', d: '+598 97 574 400' },
    { icon: 'mail', t: 'Correo', d: 'hola@okentra.com' },
    { icon: 'map-pin', t: 'Ubicación', d: 'Torre OKentra, Piso 5 · Oficina 501' },
  ];
  const submit = async () => {
    setError(null);
    if (!form.name.trim() || !form.email.trim()) {
      setError('Completá tu nombre y correo electrónico.');
      return;
    }
    setSending(true);
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          access_key: WEB3FORMS_ACCESS_KEY,
          subject: 'Nuevo contacto desde OKENTRA Web',
          from_name: 'OKENTRA Web',
          replyto: form.email,
          name: form.name,
          email: form.email,
          empresa: form.company,
          telefono: form.phone,
          solucion: form.solution,
        }),
      });
      const data = await res.json();
      if (!res.ok || !data.success) {
        throw new Error(data.message || 'No se pudo enviar el mensaje.');
      }
      setSent(true);
    } catch (e) {
      setError('No se pudo enviar el mensaje. Intentá nuevamente.');
    } finally {
      setSending(false);
    }
  };
  return (
    <section ref={innerRef} style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(../../assets/brand/oficina-sala-reuniones.png)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(244,245,249,0.88)' }} />
      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '88px 28px' }}>
      <SectionHead eyebrow="Contacto" title="Hablemos de tu próximo proyecto" sub="Estamos listos para ayudarte a transformar tu empresa." />
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 28, alignItems: 'stretch' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {rows.map((r) => (
            <div key={r.t} style={{ display: 'flex', alignItems: 'center', gap: 16, background: 'var(--neutral-50)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '18px 20px' }}>
              <div style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--violet-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <SiteIcon name={r.icon} size={22} color="var(--violet-600)" />
              </div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--navy-600)' }}>{r.t}</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-muted)' }}>{r.d}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-md)', padding: 28 }}>
          {sent ? (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <div style={{ width: 56, height: 56, margin: '0 auto 16px', borderRadius: '50%', background: 'var(--success-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <SiteIcon name="check" size={28} color="#15734f" strokeWidth={2.4} />
              </div>
              <h3 style={{ margin: '0 0 6px', fontSize: 20, fontWeight: 700, color: 'var(--text-strong)' }}>¡Mensaje enviado!</h3>
              <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 14 }}>Te contactaremos a la brevedad.</p>
            </div>
          ) : (
            <React.Fragment>
              <h3 style={{ margin: '0 0 18px', fontSize: 20, fontWeight: 800, color: 'var(--text-strong)' }}>Enviar mensaje</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <Input label="Nombre completo" placeholder="Tu nombre" value={form.name} onChange={setField('name')} />
                  <Input label="Empresa" placeholder="Tu empresa" value={form.company} onChange={setField('company')} />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <Input label="Correo electrónico" placeholder="nombre@empresa.com" type="email" value={form.email} onChange={setField('email')} />
                  <Input label="Teléfono" placeholder="+598 97 574 400" value={form.phone} onChange={setField('phone')} />
                </div>
                <Select label="¿En qué podemos ayudarte?" placeholder="Seleccionar solución…" options={['OKentra ERP', 'OKentra Evolución RRHH', 'OKentra Campus', 'OKentra PreObra', 'OKentra Pagos', 'OKentra Sensor', 'Otra']} value={form.solution} onChange={setField('solution')} />
                {error && <p style={{ margin: 0, fontSize: 13.5, color: 'var(--danger-500)' }}>{error}</p>}
                <Button variant="primary" fullWidth disabled={sending} onClick={submit}>{sending ? 'Enviando…' : 'Enviar mensaje'}</Button>
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
      </div>
    </section>
  );
}

function HomePage() {
  const [demo, setDemo] = React.useState(false);
  const openDemo = () => setDemo(true);
  const refs = {
    soluciones: React.useRef(null), rrhh: React.useRef(null), industrias: React.useRef(null),
    odoo: React.useRef(null), casos: React.useRef(null), nosotros: React.useRef(null), blog: React.useRef(null), contacto: React.useRef(null),
  };
  const [active, setActive] = React.useState('home');
  const nav = (id) => {
    setActive(id);
    if (id === 'servicios') { window.location.href = 'servicios.html'; return; }
    if (id === 'hardware') { window.location.href = 'hardware.html'; return; }
    if (id === 'home') { window.scrollTo(0, 0); try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch (e) {} return; }
    const target = refs[id];
    if (target && target.current) {
      const top = target.current.offsetTop - 70;
      window.scrollTo(0, top);
      try { window.scrollTo({ top, behavior: 'smooth' }); } catch (e) {}
    }
  };
  return (
    <React.Fragment>
      <SiteHeader onDemo={openDemo} active={active} onNav={nav} />
      <Hero onDemo={openDemo} onNav={nav} />
      <TrustBar />
      <Soluciones innerRef={refs.soluciones} onNav={nav} />
      <Industrias innerRef={refs.industrias} />
      <RRHHSection innerRef={refs.rrhh} onDemo={openDemo} />
      <OdooSection innerRef={refs.odoo} onDemo={openDemo} />
      <ComunidadOdoo onDemo={openDemo} />
      <Casos innerRef={refs.casos} />
      <Nosotros innerRef={refs.nosotros} />
      <Blog innerRef={refs.blog} />
      <Contacto innerRef={refs.contacto} />
      <CTASection onDemo={openDemo} />
      <SiteFooter onNav={nav} />
      <DemoModal open={demo} onClose={() => setDemo(false)} />
    </React.Fragment>
  );
}

Object.assign(window, { HomePage });