// ─────────────────────────────────────────────────────────────
// Header
// ─────────────────────────────────────────────────────────────
function SiteHeader({ theme, onOpenOnboarding }) {
  return (
    <header className="site" data-screen-label="Header">
      <div className="container inner">
        <a className="brand" href="#top">
          <span className="glyph" />
          <span className="name">{theme.brandName}</span>
        </a>
        <nav className="primary" aria-label="Principal">
          <a href="#como-funciona">Cómo funciona</a>
          <a href="#colaboradores">Colaboradores</a>
          <a href="#casos-uso">Casos de uso</a>
          <a href="#precios">Precios</a>
          <a href="#blog">Blog</a>
        </nav>
        <div className="header-cta">
          <a href="#login" className="login">Iniciar sesión</a>
          <a href="#registro" className="btn btn-primary" style={{ padding: '9px 16px', fontSize: 14 }}>Empieza gratis</a>
        </div>
      </div>
    </header>);

}

// ─────────────────────────────────────────────────────────────
// Hero
// ─────────────────────────────────────────────────────────────
function Hero({ theme, heroVariant }) {
  return (
    <section className="hex-pattern" data-screen-label="Hero" style={{
      paddingTop: 80, paddingBottom: 96, color: '#fff', position: 'relative', overflow: 'hidden'
    }} id="top">
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)', gap: 64, alignItems: 'center'
      }}>
        <div className="reveal in">
          <div className="eyebrow" style={{
            background: 'rgba(255,255,255,.1)', borderColor: 'rgba(255,255,255,.18)',
            color: '#fff'
          }}>
            <span className="dot" /> Operado por nuestros propios colaboradores
          </div>
          <h1 className="h-display" style={{ marginTop: 18, color: '#fff' }}>
            Tu negocio, operado por <span style={{ color: 'var(--brand-accent)' }}>inteligencia artificial</span>. 24/7.
          </h1>
          <p className="lead" style={{ marginTop: 18, color: 'rgba(255,255,255,.78)', maxWidth: '52ch' }}>
            Configura tu empresa una vez. Un equipo de colaboradores IA maneja el marketing, las ventas, la logística y la atención al cliente — mientras tú te enfocas en crecer.
          </p>
          <div className="row" style={{ marginTop: 28, gap: 12 }}>
            <a href="#registro" className="btn btn-primary btn-lg">
              Empieza gratis <Icon.arrow />
            </a>
            <a href="#como-funciona" className="btn btn-ghost btn-lg">
              <Icon.play /> Ver cómo funciona
            </a>
          </div>
          <div style={{
            marginTop: 30, display: 'flex', gap: 28, color: 'rgba(255,255,255,.7)', fontSize: 13, flexWrap: 'wrap'
          }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon.check style={{ color: 'var(--brand-accent)' }} /> Sin tarjeta de crédito
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon.check style={{ color: 'var(--brand-accent)' }} /> Tu primer colaborador en 90 segundos
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon.check style={{ color: 'var(--brand-accent)' }} /> Tienda lista en un día
            </span>
          </div>
        </div>

        {/* Right visual — variant switch */}
        <div style={{ position: 'relative', minHeight: 460 }}>
          {heroVariant === 'voxel' &&
          <div style={{ aspectRatio: '4/3', borderRadius: 22, overflow: 'hidden', boxShadow: '0 30px 80px -20px rgba(0,0,0,.5)' }}>
              <VoxelOffice
              brandPrimary={theme.primary}
              brandSecondary={theme.secondary}
              brandAccent={theme.accent} />
            
            </div>
          }
          {heroVariant === 'chat' &&
          <div style={{ display: 'flex', justifyContent: 'center' }}>
              <ChatWindow brandName={theme.brandName} />
            </div>
          }
          {heroVariant === 'split' &&
          <div style={{ position: 'relative', minHeight: 460 }}>
              <div style={{
              aspectRatio: '4/3', borderRadius: 22, overflow: 'hidden',
              boxShadow: '0 30px 80px -20px rgba(0,0,0,.5)',
              transform: 'translateY(-10px)'
            }}>
                <VoxelOffice
                brandPrimary={theme.primary}
                brandSecondary={theme.secondary}
                brandAccent={theme.accent} />
              
              </div>
              <div style={{ position: 'absolute', right: -10, bottom: -20, width: 320 }}>
                <ActivityDock brandName={theme.brandName} />
              </div>
            </div>
          }
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// Social proof — marquee
// ─────────────────────────────────────────────────────────────
function SocialProof({ theme }) {
  const items = [
  'MODA & ROPA', 'TECNOLOGÍA', 'ALIMENTOS', 'BELLEZA',
  'EDUCACIÓN', 'HOGAR & DECO', 'SERVICIOS', 'SALUD'];

  return (
    <section className="section-tight" data-screen-label="Social Proof" style={{ borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '.12em', fontWeight: 600 }}>
          Empresas que ya automatizan con {theme.brandName}
        </p>
        <div className="marquee">
          <div className="marquee-track">
            {[...items, ...items].map((it, i) =>
            <span key={i} style={{
              fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em',
              color: 'var(--ink-mute)', opacity: .55,
              display: 'inline-flex', alignItems: 'center', gap: 10
            }}>
                <span style={{
                width: 8, height: 8, background: 'var(--brand-primary)',
                clipPath: 'polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)'
              }} />
                {it}
              </span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// Problem
// ─────────────────────────────────────────────────────────────
function Problem() {
  const cards = [
  { icon: <Icon.clock />, title: 'Sin tiempo', copy: 'Haces de todo: community manager, vendedor, soporte, diseñador y logístico. No alcanza el día.' },
  { icon: <Icon.money />, title: 'Sin presupuesto', copy: 'Contratar un equipo completo cuesta más de lo que genera el negocio en sus primeros años.' },
  { icon: <Icon.puzzle />, title: 'Sin integración', copy: 'Tienes 10 herramientas distintas que no se hablan entre sí y tú eres el pegamento.' }];

  return (
    <section className="section" id="problema" data-screen-label="Problema">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow"><span className="dot" /> El problema</div>
          <h2 className="h-section" style={{ marginTop: 14 }}>Dirigir un negocio hoy es agotador.</h2>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
          {cards.map((c, i) =>
          <div key={i} className="card hoverable" style={{
            borderRadius: 18,
            background: '#fff'
          }}>
              <div style={{
              width: 52, height: 52, borderRadius: 14,
              background: 'color-mix(in oklab, var(--brand-secondary), white 88%)',
              color: 'var(--brand-primary)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 16
            }}>{c.icon}</div>
              <h3 className="h-card">{c.title}</h3>
              <p className="text-muted" style={{ marginTop: 8, fontSize: 15 }}>{c.copy}</p>
            </div>
          )}
        </div>
        <p style={{ textAlign: 'center', marginTop: 48, fontSize: 18, color: 'var(--ink-soft)' }}>
          ¿Y si tuvieras un equipo completo que <span style={{ color: 'var(--brand-primary)', fontWeight: 600 }}>trabaja solo</span>?
        </p>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// How it works
// ─────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
  { n: '01', icon: <Icon.building />, title: 'Configura tu negocio', copy: 'Cuéntale a tu Director General de qué va tu negocio, qué vendes y a quién. Solo una vez.' },
  { n: '02', icon: <Icon.team />, title: 'Tu equipo se arma solo', copy: 'Tu Director analiza tu negocio y contrata a los colaboradores que necesitas: marketing, ventas, logística y más.' },
  { n: '03', icon: <Icon.monitor />, title: 'Ellos trabajan, tú supervisas', copy: 'Tus colaboradores operan tu negocio 24/7. Tú ves todo en tiempo real y apruebas solo lo que importa.' }];

  return (
    <section className="section hex-pattern subtle" id="como-funciona" data-screen-label="Cómo funciona">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow"><span className="dot" /> Cómo funciona</div>
          <h2 className="h-section" style={{ marginTop: 14 }}>Tan simple como contratar a tu primer empleado.</h2>
        </div>
        <div style={{ position: 'relative' }}>
          {/* Connector line */}
          <div style={{
            position: 'absolute', top: 56, left: '12%', right: '12%', height: 2,
            background: 'repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px)',
            zIndex: 0
          }} />
          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 32, position: 'relative', zIndex: 1 }}>
            {steps.map((s) =>
            <div key={s.n} style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{
                width: 92, height: 92, borderRadius: 24,
                background: '#fff',
                color: 'var(--brand-primary)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 8px 24px -8px rgba(15,30,60,.16)',
                border: '1px solid var(--line)',
                marginBottom: 18,
                position: 'relative'
              }}>
                  <span style={{
                  position: 'absolute', top: -10, right: -10,
                  background: 'var(--brand-accent)', color: '#fff',
                  width: 32, height: 32, borderRadius: 999,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 13, fontWeight: 700
                }}>{s.n}</span>
                  <span style={{ transform: 'scale(1.4)' }}>{s.icon}</span>
                </div>
                <h3 className="h-card" style={{ fontSize: 20 }}>{s.title}</h3>
                <p className="text-muted" style={{ marginTop: 8, maxWidth: '28ch', fontSize: 15 }}>{s.copy}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// Colaboradores grid
// ─────────────────────────────────────────────────────────────
function Colaboradores() {
  const list = [
  { icon: <Icon.director />, title: 'Director General', copy: 'Tu único punto de contacto. Coordina a todo el equipo.', tag: 'Coordina' },
  { icon: <Icon.brush />, title: 'Marketing & Contenido', copy: 'Crea posts, imágenes y videos para tus redes sociales.', tag: 'Crea' },
  { icon: <Icon.chart />, title: 'Analítica & Métricas', copy: 'Monitorea tus campañas y optimiza tu inversión en ads.', tag: 'Analiza' },
  { icon: <Icon.chat />, title: 'Atención al Cliente', copy: 'Responde dudas y da seguimiento a pedidos, siempre disponible.', tag: 'Responde' },
  { icon: <Icon.truck />, title: 'Logística & Reparto', copy: 'Coordina entregas y mantiene informados a tus clientes.', tag: 'Coordina' },
  { icon: <Icon.box />, title: 'Inventario & Catálogo', copy: 'Enriquece tus productos con descripciones y SEO automático.', tag: 'Cataloga' },
  { icon: <Icon.web />, title: 'Diseño Web', copy: 'Construye y mantiene tu tienda en línea, siempre actualizada.', tag: 'Construye' },
  { icon: <Icon.search />, title: 'Investigación', copy: 'Monitorea a tu competencia y detecta oportunidades de mercado.', tag: 'Investiga' },
  { icon: <Icon.shield />, title: 'Seguridad', copy: 'Protege tu negocio y monitorea amenazas las 24 horas.', tag: 'Protege' }];

  return (
    <section className="section" id="colaboradores" data-screen-label="Colaboradores">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow"><span className="dot" /> Tu plantilla digital</div>
          <h2 className="h-section" style={{ marginTop: 14 }}>Tu empresa, completamente staffeada con colaboradores digitales.</h2>
          <p className="lead" style={{ margin: '14px auto 0' }}>Cada colaborador es un especialista en su área. Se comunican entre ellos como un equipo real.</p>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
          {list.map((c, i) =>
          <div key={i} className="card hoverable" style={{ padding: 22, borderRadius: 16, position: 'relative' }}>
              <span style={{
              position: 'absolute', top: 18, right: 18, display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 11, color: 'var(--success)', fontWeight: 600
            }}>
                <span className="pulse-dot" /> activo
              </span>
              <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: 'color-mix(in oklab, var(--brand-primary), white 90%)',
              color: 'var(--brand-primary)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 14
            }}>{c.icon}</div>
              <h3 className="h-card">{c.title}</h3>
              <p className="text-muted" style={{ marginTop: 6, fontSize: 14 }}>{c.copy}</p>
              <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{
                fontSize: 11, fontWeight: 600, color: 'var(--brand-secondary)',
                background: 'color-mix(in oklab, var(--brand-secondary), white 92%)',
                padding: '3px 8px', borderRadius: 999
              }}>{c.tag}</span>
                <span style={{ fontSize: 12, color: 'var(--ink-mute)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  Ver perfil <Icon.arrow style={{ width: 12, height: 12 }} />
                </span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// Demo Visual — voxel office + chat
// ─────────────────────────────────────────────────────────────
function DemoVisual({ theme }) {
  return (
    <section className="section dark hex-pattern" data-screen-label="Demo visual" id="demo">
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1fr)', gap: 48, alignItems: 'center'
      }}>
        <div>
          <div className="eyebrow" style={{ background: 'rgba(255,255,255,.1)', borderColor: 'rgba(255,255,255,.18)', color: '#fff' }}>
            <span className="dot" /> Vista isométrica de tu equipo
          </div>
          <h2 className="h-section" style={{ marginTop: 14, color: '#fff' }}>
            Mira a tu equipo trabajar en tiempo real.
          </h2>
          <p className="lead" style={{ marginTop: 14, color: 'rgba(255,255,255,.75)' }}>
            Tu oficina digital, dividida por departamentos como una empresa real. Cada colaborador tiene su área, sus tareas y se comunica con los demás a través del chat corporativo.
          </p>
          <ul style={{ marginTop: 20, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
            'Estado en tiempo real de cada colaborador',
            'Tareas con barra de progreso y aprobación',
            'Conversación entre áreas — como Slack pero entre IAs',
            'Notificación push cuando algo necesita tu atención'].
            map((t, i) =>
            <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, color: 'rgba(255,255,255,.85)', fontSize: 15 }}>
                <span style={{ color: 'var(--brand-accent)', flexShrink: 0, marginTop: 2 }}><Icon.check /></span>{t}
              </li>
            )}
          </ul>
          <div style={{ marginTop: 28 }}>
            <a href="#demo" className="btn btn-primary btn-lg">Solicitar demo en vivo <Icon.arrow /></a>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{ aspectRatio: '4/3', minHeight: 380 }}>
            <VoxelOffice brandPrimary={theme.primary} brandSecondary={theme.secondary} brandAccent={theme.accent} />
          </div>
          <div style={{
            position: 'absolute', right: -10, bottom: -34,
            transform: 'translateY(0)'
          }}>
            <ChatWindow compact brandName={theme.brandName} />
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { SiteHeader, Hero, SocialProof, Problem, HowItWorks, Colaboradores, DemoVisual });