// v3-app.jsx — pivot CEO/CFO/dueños de pyme
// Tono de negocio en hero (mantiene estética técnica en detalles)
// + Pricing tiers · Lead magnet · Before/After · FAQ SEO · Diferenciación local Chile · Casos extendidos

const { useState, useEffect, useRef, useMemo } = React;

// ─────────────────────────────────────────────────────
// Icons / primitives
// ─────────────────────────────────────────────────────
const Arrow = ({ size = 13 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2.5 7H11.5M11.5 7L7.5 3M11.5 7L7.5 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

// 4 propuestas de logo — elegibles desde Tweaks panel

// Logo A — "Pulse M": dos picos ascendentes (bar chart de proceso)
const LogoMarkA = () => (
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="3" y="14" width="3" height="6" fill="currentColor" />
    <rect x="8" y="10" width="3" height="10" fill="currentColor" />
    <rect x="13" y="6" width="3" height="14" fill="currentColor" />
    <rect x="18" y="3" width="3" height="17" fill="var(--accent)" />
  </svg>
);

// Logo B — "Forward M": M con flecha integrada hacia la derecha
// Refinada: M con valle medio (no profundo), flecha proporcional, peso óptico ajustado
const LogoMarkB = () => (
  <svg viewBox="0 0 30 24" fill="none">
    {/* M — valle a la mitad de altura para mejor lectura óptica */}
    <path
      d="M3 19V6L8.5 14L14 6V19"
      stroke="currentColor"
      strokeWidth="2.2"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
    />
    {/* Flecha — eje alineado al centro óptico de la M (~12.5), cabeza más nítida */}
    <path
      d="M17 12.5H26"
      stroke="var(--accent)"
      strokeWidth="2.2"
      strokeLinecap="round"
    />
    <path
      d="M22.5 8.5L26.5 12.5L22.5 16.5"
      stroke="var(--accent)"
      strokeWidth="2.2"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
    />
  </svg>
);

// Logo C — "Brackets": [ ] con núcleo sólido (process running)
const LogoMarkC = () => (
  <svg viewBox="0 0 24 24" fill="none">
    <path d="M7 4H4V20H7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    <path d="M17 4H20V20H17" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    <rect x="9" y="9" width="6" height="6" fill="var(--accent)" />
  </svg>
);

// Logo D — "Loop M": M cerrada en loop continuo (proceso recurrente)
const LogoMarkD = () => (
  <svg viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" opacity="0.35" />
    <path d="M6 17V8L9.5 13L12 9L14.5 13L18 8V17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    <circle cx="12" cy="3" r="1.6" fill="var(--accent)" />
  </svg>
);

// Logo orbital actual (E)
const LogoMarkE = () => (
  <svg viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.4" opacity="0.45" />
    <circle cx="22" cy="12" r="2" fill="var(--accent)" />
    <path d="M7 16V8M12 16V11.5C12 9.6 10.6 8 8.7 8M17 16V11.5C17 9.6 15.6 8 13.7 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>
);

const LOGOS = { A: LogoMarkA, B: LogoMarkB, C: LogoMarkC, D: LogoMarkD, E: LogoMarkE };
const LogoMark = ({ variant = 'A' }) => {
  const Comp = LOGOS[variant] || LogoMarkA;
  return <Comp />;
};

const Brand = ({ variant = 'A' }) => (
  <a href="#top" className="brand-v2">
    <span className={`mark ${variant === 'B' ? 'is-wide' : ''}`}><LogoMark variant={variant} /></span>
    <span className="name"><span className="bracket">[</span>meikify<span className="bracket">]</span></span>
    <span className="meta">/ pymes · chile</span>
  </a>
);

const Reveal = ({ children, delay = 0, as: As = 'div', className = '', ...rest }) => {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let done = false;
    const reveal = () => {
      if (done) return;
      done = true;
      setTimeout(() => el.classList.add('in'), delay);
    };
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) {
      requestAnimationFrame(() => requestAnimationFrame(reveal));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { reveal(); io.unobserve(el); } }),
      { threshold: 0.08, rootMargin: '0px 0px -40px 0px' }
    );
    io.observe(el);
    const safety = setTimeout(reveal, 1500);
    return () => { io.disconnect(); clearTimeout(safety); };
  }, [delay]);
  return <As ref={ref} className={`reveal ${className}`} {...rest}>{children}</As>;
};

// ─────────────────────────────────────────────────────
// NAV — links en lenguaje de negocio, tono mixto
// ─────────────────────────────────────────────────────
const Nav = ({ onCta, logoVariant }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { num: '01', label: 'qué hacemos', href: '#servicios' },
    { num: '02', label: 'cómo trabajamos', href: '#proceso' },
    { num: '03', label: 'casos', href: '#casos' },
    { num: '04', label: 'precios', href: '#precios' },
    { num: '05', label: 'preguntas', href: '#faq' },
  ];
  return (
    <nav className={`nav-v2 ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-v2-inner">
        <Brand variant={logoVariant} />
        <div className="nav-v2-links">
          {links.map((l) => (
            <a key={l.href} className="nav-v2-link" href={l.href}>
              <span className="num">{l.num}</span>{l.label}
            </a>
          ))}
        </div>
        <div className="nav-v2-cta">
          <span className="status-pill">
            <span className="blink"></span>
            2 cupos · cohorte mayo
          </span>
          <button className="btn-v2 primary sm" onClick={onCta}>
            agendar 30min
            <Arrow size={11} />
          </button>
        </div>
      </div>
    </nav>
  );
};

// ─────────────────────────────────────────────────────
// HERO — copy de NEGOCIO. Terminal queda como ornamento de credibilidad
// ─────────────────────────────────────────────────────
const Hero = ({ onCta, onLeadMagnet }) => {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const ts = now.toISOString().replace('T', ' ').slice(0, 19);

  return (
    <section className="hero-v2" id="top">
      <div className="container-v2">
        <Reveal>
          <div className="hero-v2-meta">
            <span>Santiago, Chile</span>
            <span className="sep">/</span>
            <span>operando en LATAM</span>
            <span className="sep">/</span>
            <span>{ts} UTC</span>
            <span className="sep">/</span>
            <span style={{ color: 'var(--accent)' }}>● cohorte mayo · cierra 15-may</span>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="h-display-v2">
            Recupera <span className="accent-text">14 horas</span><br />
            semanales en tu pyme.<br />
            Sin contratar más gente.
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, marginTop: 18, padding: '7px 14px', border: '1px solid var(--line)', borderRadius: 999, background: 'var(--bg-2)', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-2)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }}></span>
            <span>+80 pymes diagnosticadas en LATAM</span>
            <span style={{ color: 'var(--ink-5)' }}>·</span>
            <span>ROI por contrato o devolución</span>
          </div>
        </Reveal>
        <Reveal delay={200}>
          <p className="lede-v2" style={{ marginTop: 24, maxWidth: '60ch', fontSize: 18 }}>
            Automatizamos los 3 procesos que más tiempo te cuestan en la operación. Primer flujo corriendo en <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>14 días</strong>. Si no vemos retorno claro al mes 3, te devolvemos el proyecto.
          </p>
        </Reveal>
        <Reveal delay={260}>
          <div className="hero-v2-cta">
            <button className="btn-v2 primary lg" onClick={onCta}>
              Agendar diagnóstico gratis
              <Arrow />
            </button>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-4)', marginLeft: 4 }}>30min · sin compromiso · respuesta en &lt;24h</span>
          </div>
        </Reveal>

        <Reveal delay={400}>
          <div className="hero-v2-terminal" style={{ marginTop: 64 }}>
            <div className="term-bar">
              <span className="dots"><span className="dot"></span><span className="dot"></span><span className="dot"></span></span>
              <span className="path">~/<span className="accent-text">meikify</span>/operations · cliente_demo</span>
              <span className="right">
                <span>● en producción</span>
                <span>build 2026.04</span>
              </span>
            </div>
            <div className="term-grid">
              <div className="term-cell">
                <div className="k">primer flujo en producción</div>
                <div className="v"><span className="accent-text">14</span> días</div>
                <div className="vsub">// vs. 8–12 semanas en consultoras tradicionales</div>
              </div>
              <div className="term-cell">
                <div className="k">ROI proyectado · 12 meses</div>
                <div className="v"><span className="accent-text">4.2×</span></div>
                <div className="vsub">// medido vs. baseline acordado al inicio</div>
              </div>
              <div className="term-cell">
                <div className="k">procesos vivos · post handover</div>
                <div className="v"><span className="accent-text">97%</span></div>
                <div className="vsub">// siguen corriendo 12 meses después</div>
              </div>
            </div>
            <div className="term-body">
              <div className="ln"><span className="lno">01</span><span className="ts">[día 01]</span><span className="tag-info">[meikify]</span> diagnóstico iniciado · cliente_demo</div>
              <div className="ln"><span className="lno">02</span><span className="ts">[día 03]</span><span className="muted">stack analizado: ERP + 3 hojas + 4 correos manuales</span></div>
              <div className="ln"><span className="lno">03</span><span className="ts">[día 05]</span><span className="tag-ok">[ok]</span> proceso prioritario detectado · cotización_manual</div>
              <div className="ln"><span className="lno">04</span><span className="ts">[día 09]</span><span className="muted">primer prototipo en staging · validación equipo comercial</span></div>
              <div className="ln"><span className="lno">05</span><span className="ts">[día 14]</span><span className="tag-ok">[ok]</span> agente desplegado en producción · 90s/cotización</div>
              <div className="ln"><span className="lno">06</span><span className="ts">[día 30]</span><span className="tag-info">[next]</span> ROI medido · ajustes · escalar al siguiente proceso<span className="cur"></span></div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// LOGOS marquee — más honesto en el label
// ─────────────────────────────────────────────────────
const Logos = () => {
  // Wordmarks tipográficos — uno por cliente, peso/letterspacing único para diferenciarse
  const items = [
    { name: 'Prontomatic', font: 'var(--font-display)', weight: 600, ls: '-0.04em', tag: 'PRO' },
    { name: 'INTERTRADE', font: 'var(--font-mono)', weight: 500, ls: '0.18em', tag: '' },
    { name: 'emprende', sub: 'inteligente', font: 'var(--font-display)', weight: 500, ls: '-0.03em', stack: true },
    { name: 'MeLoLlevo', font: 'var(--font-display)', weight: 600, ls: '-0.025em', italic: true },
    { name: 'simplit', font: 'var(--font-display)', weight: 400, ls: '-0.045em', dot: true },
    { name: 'LHOTSE', font: 'var(--font-mono)', weight: 600, ls: '0.22em', tag: '' },
    { name: 'Atlas', sub: 'Renewable Energy', font: 'var(--font-display)', weight: 500, ls: '-0.02em', stack: true },
    { name: 'DUNATI', font: 'var(--font-display)', weight: 700, ls: '0.04em' },
  ];
  const all = [...items, ...items];
  return (
    <section className="marquee">
      <span className="marquee-label">↳ pymes que confían</span>
      <div className="marquee-track">
        {all.map((it, i) => (
          <span key={i} className="marquee-item" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            {it.stack ? (
              <span style={{ display: 'inline-flex', flexDirection: 'column', lineHeight: 1, gap: 2 }}>
                <span style={{ fontFamily: it.font, fontWeight: it.weight, letterSpacing: it.ls, fontSize: 18, color: 'var(--ink)' }}>{it.name}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{it.sub}</span>
              </span>
            ) : (
              <span style={{ fontFamily: it.font, fontWeight: it.weight, letterSpacing: it.ls, fontStyle: it.italic ? 'italic' : 'normal', fontSize: 18, color: 'var(--ink)' }}>
                {it.name}{it.dot && <span style={{ color: 'var(--accent)' }}>.</span>}
              </span>
            )}
          </span>
        ))}
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// SECTION HEAD
// ─────────────────────────────────────────────────────
const SecHead = ({ index, eyebrow, title, lede }) => (
  <Reveal>
    <div className="sec-head-v2">
      <div className="left">
        <div className="index">{index}</div>
        <div className="eyebrow-v2">{eyebrow}</div>
      </div>
      <div className="title-block">
        <h2 className="h-1-v2">{title}</h2>
        <p className="lede-v2">{lede}</p>
      </div>
    </div>
  </Reveal>
);

// ─────────────────────────────────────────────────────
// PROBLEM
// ─────────────────────────────────────────────────────
const Problem = () => {
  const items = [
    { num: '01', tag: 'horas perdidas', title: 'Tu equipo crece, pero las ventas no', desc: 'Cada vez contratas más gente para procesos que deberían ser automáticos. El costo crece, el margen se achica.' },
    { num: '02', tag: 'datos atrasados', title: 'Cierras el mes con planillas', desc: 'Reportería manual, conciliaciones a mano, números que llegan dos semanas tarde. Decides con información vieja.' },
    { num: '03', tag: 'consultoras caras', title: 'Te cotizaron $80M y 9 meses', desc: 'Las consultoras grandes piden presupuestos enormes para entregar PowerPoints. Las pequeñas no terminan lo que empiezan.' },
    { num: '04', tag: 'IA en showroom', title: 'Todos hablan de IA, nadie la implementa', desc: 'Lees sobre IA todos los días pero nadie te dice cómo aplicarla a tu negocio sin gastar millones en pilotos que no escalan.' },
  ];
  return (
    <section className="section-v2" id="problema">
      <div className="container-v2">
        <SecHead
          index="§01 / problema"
          eyebrow="lo que escuchamos en cada primera reunión"
          title={<>Cuatro dolores que se <span className="accent-text">repiten</span></>}
          lede="Hablamos con más de 80 dueños y CFOs de pymes en Chile. Cuatro frases se repiten en cada reunión. Si te suenan familiares, esta página es para ti."
        />
        <Reveal>
          <div className="prob-list-v2">
            {items.map((it) => (
              <div key={it.num} className="prob-item-v2">
                <span className="num">/{it.num}</span>
                <div className="red-tag">{it.tag}</div>
                <h4>{it.title}</h4>
                <p>{it.desc}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// BEFORE / AFTER — visceral concrete
// ─────────────────────────────────────────────────────
const BeforeAfter = () => (
  <section className="section-v2">
    <div className="container-v2">
      <SecHead
        index="§02 / antes y después"
        eyebrow="caso real · cliente retail · 22 tiendas"
        title={<>Lo abstracto se vuelve <span className="accent-text">concreto</span></>}
        lede="No vendemos transformación digital en abstracto. Esto es lo que cambia en una semana de tu equipo, antes y después de implementar Meikify."
      />
      <Reveal>
        <div className="ba-v2">
          <div className="col before">
            <div className="tag">antes</div>
            <div className="big">14h<span style={{ fontSize: '0.5em', color: 'var(--ink-4)', textDecoration: 'none', display: 'inline-block', marginLeft: 4 }}>/mes</span></div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--ink-3)', marginTop: -8 }}>cierre mensual manual</div>
            <div className="small">
              <div style={{ color: 'var(--ink-4)', marginBottom: 4 }}>// el equipo de finanzas hacía:</div>
              <ul>
                <li>Descargar reportes de POS uno por uno</li>
                <li>Cuadrar manualmente con cartolas bancarias</li>
                <li>Consolidar en planillas Excel sin versión</li>
                <li>Errores que aparecían recién en auditoría</li>
              </ul>
            </div>
          </div>
          <div className="arrow-col">
            <span className="arrow-text">→ 6 semanas de implementación →</span>
          </div>
          <div className="col after">
            <div className="tag">después</div>
            <div className="big">20<span style={{ fontSize: '0.5em', color: 'var(--accent)', display: 'inline-block', marginLeft: 4 }}>min/mes</span></div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--ink-2)', marginTop: -8 }}>cierre automatizado · revisión por excepción</div>
            <div className="small">
              <div style={{ color: 'var(--accent)', marginBottom: 4 }}>// el equipo de finanzas ahora:</div>
              <ul>
                <li>Recibe el cierre el día 1 a las 9am</li>
                <li>Revisa solo las excepciones marcadas</li>
                <li>Dashboard con cierre vivo en tiempo real</li>
                <li>Tiempo liberado para análisis estratégico</li>
              </ul>
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────
// SERVICES — copy aterrizado a negocio
// ─────────────────────────────────────────────────────
const SvcVisualA = () => (
  <svg viewBox="0 0 240 110" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <g>
      <rect x="14" y="20" width="92" height="18" fill="none" stroke="var(--ink-4)" strokeDasharray="3 3" />
      <rect x="14" y="42" width="92" height="18" fill="none" stroke="var(--ink-4)" strokeDasharray="3 3" />
      <rect x="14" y="64" width="92" height="18" fill="none" stroke="var(--ink-4)" strokeDasharray="3 3" />
      <rect x="134" y="20" width="92" height="62" fill="var(--accent)" opacity="0.18" />
      <rect x="134" y="20" width="92" height="62" fill="none" stroke="var(--accent)" />
      <text x="60" y="100" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-4)">manual</text>
      <text x="180" y="100" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--accent)">unificado</text>
      <path d="M108 51 L132 51" stroke="var(--accent)" strokeWidth="1.5" />
      <path d="M128 47 L132 51 L128 55" fill="none" stroke="var(--accent)" strokeWidth="1.5" />
    </g>
  </svg>
);
const SvcVisualB = () => (
  <svg viewBox="0 0 240 110" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <g>
      <line x1="40" y1="55" x2="100" y2="35" stroke="var(--ink-4)" />
      <line x1="40" y1="55" x2="100" y2="75" stroke="var(--ink-4)" />
      <line x1="100" y1="35" x2="160" y2="55" stroke="var(--ink-4)" />
      <line x1="100" y1="75" x2="160" y2="55" stroke="var(--ink-4)" />
      <line x1="160" y1="55" x2="200" y2="55" stroke="var(--accent)" strokeWidth="1.5" />
      <rect x="28" y="44" width="24" height="22" fill="var(--bg)" stroke="var(--ink-3)" />
      <rect x="88" y="24" width="24" height="22" fill="var(--bg)" stroke="var(--ink-3)" />
      <rect x="88" y="64" width="24" height="22" fill="var(--bg)" stroke="var(--ink-3)" />
      <rect x="148" y="44" width="24" height="22" fill="var(--accent)" />
      <rect x="200" y="44" width="24" height="22" fill="var(--bg)" stroke="var(--accent)" />
      <text x="40" y="59" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)">SII</text>
      <text x="100" y="39" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)">ERP</text>
      <text x="100" y="79" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)">CRM</text>
      <text x="160" y="59" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--accent-ink)">flow</text>
      <text x="212" y="59" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--accent)">out</text>
    </g>
  </svg>
);
const SvcVisualC = () => (
  <svg viewBox="0 0 240 110" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <g fontFamily="var(--font-mono)" fontSize="9">
      <rect x="14" y="14" width="212" height="82" fill="var(--bg)" stroke="var(--line-strong)" />
      <text x="22" y="28" fill="var(--ink-4)">▸ cliente:</text>
      <text x="62" y="28" fill="var(--ink-2)">"cotizar 5 pallets a Iquique"</text>
      <text x="22" y="46" fill="var(--accent)">▸ agente:</text>
      <text x="64" y="46" fill="var(--ink-2)">consultando tarifas · 4 sistemas</text>
      <rect x="22" y="56" width="120" height="2" fill="var(--accent)" />
      <text x="22" y="76" fill="var(--ink-4)">↳ tarifa: $128.400 · ETA 4 días</text>
      <text x="22" y="90" fill="var(--ink-3)">↳ enviado al cliente · 92s total</text>
    </g>
  </svg>
);

const Services = () => {
  const services = [
    {
      id: 'svc.01',
      tag: 'transformación digital',
      title: <>Ordenamos tu<br />operación</>,
      desc: 'Auditamos los procesos que más te están costando, los rediseñamos y los dejamos funcionando con tu equipo. Sales con un plan de 90 días claro y con prioridades.',
      visual: <SvcVisualA />,
      specs: [
        ['ideal para', 'CEO / dueños'],
        ['entregable', 'plan 90 días'],
        ['equipo', 'tu gente + nosotros'],
        ['plazo', '< 14 días'],
      ],
    },
    {
      id: 'svc.02',
      tag: 'automatización',
      title: <>Lo manual,<br />automático</>,
      desc: 'Conectamos tu ERP, contabilidad, banco y planillas en flujos que corren solos. Facturación electrónica, cierre mensual, cobranza, reportería. Lo que hoy quema horas, mañana ocurre solo.',
      visual: <SvcVisualB />,
      specs: [
        ['ideal para', 'CFO / Heads of Ops'],
        ['integraciones', 'SII · banca · ERP'],
        ['monitoreo', '24/7 incluido'],
        ['SLA', '99.5% uptime'],
      ],
    },
    {
      id: 'svc.03',
      tag: 'IA aplicada',
      title: <>IA con<br />retorno real</>,
      desc: 'Asistentes que cotizan solos, clasifican tickets, redactan respuestas a clientes, leen tus contratos. No demos, sino producción medida en pesos ahorrados al mes.',
      visual: <SvcVisualC />,
      specs: [
        ['ideal para', 'equipos de 15+'],
        ['stack', 'multi-LLM seguro'],
        ['datos', 'tuyos, no se entrenan'],
        ['SLA', '< 2s respuesta'],
      ],
    },
  ];
  return (
    <section className="section-v2" id="servicios">
      <div className="container-v2">
        <SecHead
          index="§03 / qué hacemos"
          eyebrow="tres servicios · una misma forma de ejecutar"
          title={<>Negocio, producto y tecnología<br />en el <span className="accent-text">mismo equipo</span></>}
          lede="No subcontratamos. La misma persona que entiende tu negocio escribe el código que lo automatiza. Por eso entregamos rápido y por eso queda funcionando cuando nos vamos."
        />
        <Reveal>
          <div className="services-v2">
            {services.map((s) => (
              <article key={s.id} className="svc-card-v2">
                <div className="head">
                  <span className="id">{s.id}</span>
                  <span>↳ {s.tag}</span>
                </div>
                <h3>{s.title}</h3>
                <p className="desc">{s.desc}</p>
                <div className="visual">{s.visual}</div>
                <div className="specs">
                  {s.specs.map(([k, v]) => (
                    <React.Fragment key={k}>
                      <span className="k">{k}</span>
                      <span className="v">{v}</span>
                    </React.Fragment>
                  ))}
                </div>
              </article>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// LOCAL — diferenciación Chile (SII, Khipu, Transbank, Defontana, Bsale, Mercado Pago)
// ─────────────────────────────────────────────────────
const Local = () => {
  const integrations = [
    { name: 'WhatsApp Business · Meta', desc: 'Atención al cliente, confirmación de citas, notificaciones de despacho.' },
    { name: 'Defontana · Bsale · Manager · SAP B1', desc: 'ERPs locales: leemos, escribimos y orquestamos procesos sobre lo que ya usas.' },
    { name: 'SII · DTE · Khipu · Transbank', desc: 'Facturación electrónica, conciliación de pagos y cobranza automatizada.' },
    { name: 'Talana · Buk · Previred', desc: 'Selección, onboarding, nómina y cumplimiento laboral con tu equipo.' },
    { name: 'Shopify · Jumpseller · MercadoLibre', desc: 'E-commerce sincronizado con stock, despacho y atención al cliente.' },
    { name: 'HubSpot · Pipedrive · Google Workspace', desc: 'CRM, calendario, correo y documentos integrados al flujo comercial.' },
  ];
  return (
    <section className="section-v2" id="integraciones">
      <div className="container-v2">
        <SecHead
          index="§04 / hecho en chile"
          eyebrow="conocemos tu stack local"
          title={<>Trabajamos sobre lo que <span className="accent-text">ya usas</span></>}
          lede="No te cambiamos el ERP, no te imponemos software nuevo. Nos conectamos con las herramientas que tu equipo ya conoce — comercial, operaciones, RRHH, contabilidad, e-commerce — y orquestamos los procesos por encima."
        />
        <Reveal>
          <div className="local-v2">
            <div className="left">
              <div className="eyebrow-v2">↳ ventaja local</div>
              <h3 className="h-2-v2" style={{ marginTop: 4 }}>
                Implementación que <span className="accent-text">entiende</span> tu contexto
              </h3>
              <p className="lede-v2" style={{ fontSize: 15 }}>
                Hablamos español de Chile, conocemos los flujos del SII, integramos con tu banca empresa, sabemos cómo trabaja un contador acá. No tienes que explicar qué es una factura electrónica ni por qué el día 12 importa.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink-2)' }}>
                <li>↳ <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>Equipo en Santiago</strong> — reuniones presenciales si las quieres</li>
                <li>↳ <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>Soporte en zona horaria</strong> — 9 a 19 hrs CLT</li>
                <li>↳ <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>Facturamos en CLP</strong> — sin sorpresas con el dólar</li>
                <li>↳ <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>Datos en Chile</strong> — cumplimos Ley 21.719</li>
              </ul>
            </div>
            <div className="right">
              <div className="integ-list">
                {integrations.map((it) => (
                  <div key={it.name} className="integ-item">
                    <div className="name">
                      <span className="check">✓</span>
                      {it.name}
                    </div>
                    <div className="desc">{it.desc}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// DIFF — vs consultora tradicional
// ─────────────────────────────────────────────────────
const Diff = () => {
  const rows = [
    { k: 'tiempo · primer entregable', them: '8–12 semanas', us: '2 semanas' },
    { k: 'output del diagnóstico', them: 'PowerPoint de 80 slides', us: 'plan 90d + prototipo en vivo' },
    { k: 'quién implementa', them: 'subcontratado a otra empresa', us: 'el mismo equipo que diagnosticó' },
    { k: 'uso de IA', them: 'aparece en la propuesta', us: 'corre en tu operación · medido' },
    { k: 'compromiso de ROI', them: 'no aplica · paga horas', us: 'por contrato · 90 días o devolución' },
    { k: 'modelo de cobro', them: 'horas-hombre + ajustes', us: 'precio fijo por proyecto' },
    { k: 'qué pasa al terminar', them: 'te dejan dependiente', us: 'tu equipo opera solo · doc + capacitación' },
  ];
  return (
    <section className="section-v2" id="diferencia">
      <div className="container-v2">
        <SecHead
          index="§05 / diferencia"
          eyebrow="vs. consultora tradicional"
          title={<>No somos consultora.<br />Somos tu <span className="accent-text">equipo de ejecución</span></>}
          lede="Consultora tradicional cobra por horas y entrega documentos. Nosotros cobramos por procesos en producción y entregamos código corriendo. Diferente forma de trabajar, diferente resultado."
        />
        <Reveal>
          <div className="diff-v2">
            <div className="diff-v2-row head">
              <div className="cell">categoría</div>
              <div className="cell">consultora.tradicional</div>
              <div className="cell us">meikify</div>
            </div>
            {rows.map((r) => (
              <div key={r.k} className="diff-v2-row">
                <div className="cell label">{r.k}</div>
                <div className="cell">
                  <span className="icon-x">×</span>
                  {r.them}
                </div>
                <div className="cell us">
                  <span className="icon-ok">✓</span>
                  {r.us}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// PROCESS
// ─────────────────────────────────────────────────────
const Process = () => {
  const steps = [
    { id: 'fase.01', week: 'sem. 01', title: 'Diagnóstico', desc: 'Una semana mapeando tu operación con tu equipo. Identificamos los 3–5 procesos que más impacto tienen y cuantificamos baseline.', deliv: 'plan 90d + métricas base' },
    { id: 'fase.02', week: 'sem. 02–03', title: 'Prototipo', desc: 'Construimos el primer flujo o asistente IA en vivo. Lo validamos con tu gente, no con un usuario imaginario.', deliv: 'primer flujo en staging' },
    { id: 'fase.03', week: 'sem. 04–10', title: 'Implementación', desc: 'Iteramos en producción con tu equipo. Cada semana un proceso nuevo corriendo, cada semana métricas frescas para revisar.', deliv: 'procesos en producción' },
    { id: 'fase.04', week: 'sem. 11+', title: 'Handover', desc: 'Tu equipo opera solo, nosotros acompañamos. Documentación viva, capacitación al equipo y soporte mensual opcional.', deliv: 'docs + capacitación + soporte' },
  ];
  return (
    <section className="section-v2" id="proceso">
      <div className="container-v2">
        <SecHead
          index="§06 / cómo trabajamos"
          eyebrow="11 semanas · sin sorpresas"
          title={<>Predecible. <span className="accent-text">Cerrado</span>. Sin scope creep</>}
          lede="Sabes qué obtienes cada semana, cuándo se entrega y cómo medimos que funcionó. Empezamos un lunes, terminamos once semanas después con tu equipo operando solo. Sin extensiones sorpresivas, sin facturas que crecen."
        />
        <Reveal>
          <div className="proc-v2">
            {steps.map((s) => (
              <div key={s.id} className="proc-step-v2">
                <div className="top">
                  <span className="id">{s.id}</span>
                  <span className="week">{s.week}</span>
                </div>
                <h4>{s.title}</h4>
                <p>{s.desc}</p>
                <span className="deliv">{s.deliv}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// CAPABILITIES — reemplaza Cases (sin inventar clientes).
// Foco: "esto es lo que podemos resolver en tu pyme" · mezcla áreas
// ─────────────────────────────────────────────────────
const Capabilities = () => {
  const caps = [
    {
      area: 'comercial · ventas',
      title: <>Cotizaciones que se responden <span className="accent-text">solas</span></>,
      desc: 'Asistente que recibe solicitudes por correo o WhatsApp, busca tarifas en tus sistemas y devuelve cotización al cliente en segundos. Tu equipo comercial revisa solo las excepciones.',
      metrics: [
        { num: '~90s', label: 'tiempo respuesta', accent: true },
        { num: '24/7', label: 'disponibilidad' },
        { num: '3×', label: 'capacidad sin contratar' },
      ],
      feat: true,
    },
    {
      area: 'logística · operaciones',
      title: <>Despachos que se planifican <span className="accent-text">solos</span></>,
      desc: 'Optimizamos rutas, asignación de pedidos y seguimiento entre tu ERP, transporte y notificación a clientes. Menos llamados de "¿dónde está mi pedido?".',
      metrics: [
        { num: '−40%', label: 'tiempo planificación', accent: true },
        { num: '+22%', label: 'pedidos por ruta' },
        { num: '0', label: 'planillas Excel' },
      ],
    },
    {
      area: 'finanzas · contabilidad',
      title: <>Cierre mensual de <span className="accent-text">14h a 20min</span></>,
      desc: 'Conciliación automática entre POS, ERP, banca y SII. Cierre vivo en dashboard, revisión por excepción, sin Excel manual ni errores que aparecen recién en auditoría.',
      metrics: [
        { num: '−97%', label: 'tiempo cierre', accent: true },
        { num: 'tiempo real', label: 'visibilidad' },
        { num: '4+', label: 'sistemas integrados' },
      ],
    },
    {
      area: 'servicio al cliente',
      title: <>Atención por WhatsApp <span className="accent-text">sin contratar</span> más</>,
      desc: 'Asistente IA que responde consultas frecuentes, agenda horas, deriva casos complejos a tu equipo. Aprende de tu base de conocimiento y mejora con cada conversación.',
      metrics: [
        { num: '8s', label: 'respuesta promedio', accent: true },
        { num: '70%', label: 'resuelto sin humano' },
        { num: '−78%', label: 'no-shows' },
      ],
    },
    {
      area: 'RRHH · personas',
      title: <>Selección y onboarding <span className="accent-text">automatizados</span></>,
      desc: 'Filtro inicial de CVs, agendamiento de entrevistas, generación de contratos y onboarding digital integrado con Talana, Buk o Previred. Tu equipo se enfoca en decidir, no en coordinar.',
      metrics: [
        { num: '−65%', label: 'tiempo screening', accent: true },
        { num: '2 días', label: 'CV a entrevista' },
        { num: '100%', label: 'cumplimiento legal' },
      ],
    },
    {
      area: 'marketing · captación',
      title: <>Leads calificados <span className="accent-text">antes</span> de la primera llamada</>,
      desc: 'Calificamos leads desde el formulario, enriquecemos con datos públicos, derivamos al ejecutivo correcto y hacemos follow-up automático. Tu fuerza de venta solo habla con quien tiene intención real.',
      metrics: [
        { num: '3.2×', label: 'tasa conversión', accent: true },
        { num: '< 5min', label: 'speed-to-lead' },
        { num: '0', label: 'leads perdidos' },
      ],
    },
  ];
  return (
    <section className="section-v2" id="casos">
      <div className="container-v2">
        <SecHead
          index="§07 / qué resolvemos"
          eyebrow="capacidades · seis frentes donde tenemos retorno comprobado"
          title={<>Procesos que <span className="accent-text">automatizamos</span> en pymes</>}
          lede="Estamos arrancando — no inventamos clientes que no tenemos. Esto es lo que ya construimos en pilotos internos y lo que sabemos resolver en tu pyme. Las métricas son rangos típicos del mercado y de nuestras pruebas; el número exacto depende de tu baseline, que medimos en el diagnóstico."
        />
        <Reveal>
          <div className="cases-v2">
            {caps.map((c, i) => (
              <article key={i} className={`case-v2 ${c.feat ? 'feat' : ''}`}>
                <div className="meta-row">
                  <span className="industry">↳ {c.area}</span>
                  <span>capacidad</span>
                </div>
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <div className="metrics">
                  {c.metrics.map((m, j) => (
                    <div key={j} className="metric">
                      <div className={`num ${m.accent ? 'accent-text' : ''}`}>{m.num}</div>
                      <div className="label">{m.label}</div>
                    </div>
                  ))}
                </div>
              </article>
            ))}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', marginTop: 18, textAlign: 'center', maxWidth: '60ch', marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
            * rangos referenciales basados en pilotos internos y benchmarks de mercado · tu baseline real lo medimos juntos en la primera semana
          </p>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// STATS
// ─────────────────────────────────────────────────────
const Stats = () => {
  const stats = [
    { num: '14', unit: 'd', label: 'promedio · primer proceso en producción' },
    { num: '4.2', unit: '×', label: 'ROI proyectado a 12 meses' },
    { num: '80', unit: '+', label: 'pymes diagnosticadas en LATAM' },
    { num: '97', unit: '%', label: 'procesos vivos al año del handover' },
  ];
  return (
    <section className="section-v2">
      <div className="container-v2">
        <Reveal>
          <div className="stats-v2">
            {stats.map((s, i) => (
              <div key={i} className="stat-v2">
                <div className="num"><span className="tabnum">{s.num}</span><span className="unit">{s.unit}</span></div>
                <div className="label">{s.label}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// PRICING
// ─────────────────────────────────────────────────────
const Pricing = ({ onCta }) => {
  const tiers = [
    {
      id: 'tier.01',
      tag: 'punto de entrada',
      name: 'Diagnóstico',
      price: <>$0</>,
      unit: 'sin compromiso',
      desc: 'Sesión de 30min para mapear tu operación y devolverte un mini-plan de prioridades. Si encaja, conversamos siguiente paso. Si no, te queda el plan.',
      feats: [
        'Sesión de discovery 30min',
        'Mapeo de tus 3 procesos críticos',
        'Mini-roadmap con prioridades',
        'Estimación de ROI por proceso',
        'Sin obligación de avanzar',
      ],
      cta: 'Agendar diagnóstico gratuito',
      foot: 'respuesta en < 24h',
      objection: { q: '¿Qué pasa si no me convence?', a: 'Te queda el mini-roadmap igual. No insistimos. No te suscribimos a nada.' },
    },
    {
      id: 'tier.02',
      tag: 'caso típico',
      name: 'Proyecto Standard',
      price: <>desde <span className="accent-text">280</span></>,
      unit: 'UF · proyecto cerrado',
      desc: 'Implementación completa de 3–5 procesos en 11 semanas. Precio fijo. Si no entregamos en plazo, te devolvemos la diferencia. Lo que el 80% de nuestros clientes contrata.',
      feats: [
        'Diagnóstico + plan 90 días incluido',
        'Hasta 5 procesos en producción',
        '11 semanas punta a punta',
        'Capacitación a tu equipo',
        '3 meses de soporte post handover',
        'ROI por contrato · 90 días',
      ],
      cta: 'Conversar este plan',
      foot: 'precio fijo · sin sorpresas',
      feat: true,
      objection: { q: '¿Qué pasa si cancelo a mitad?', a: 'Pagas solo lo entregado al corte. Sin penalidades. Te dejamos doc + acceso a todo lo construido hasta ahí.' },
    },
    {
      id: 'tier.03',
      tag: 'operación compleja',
      name: 'Enterprise',
      price: <>desde <span className="accent-text">600</span></>,
      unit: 'UF · scope a medida',
      desc: 'Para pymes con 80+ empleados, múltiples sucursales o necesidad de agentes IA personalizados. Equipo dedicado por trimestre, con SLA y compromiso anual.',
      feats: [
        'Equipo dedicado · 3+ personas',
        'Agentes IA con datos propios',
        'Integraciones complejas (ERP custom)',
        'Onsite mensual · Santiago',
        'SLA 99.9% + soporte 24/5',
        'Compromiso trimestral · revisión QBR',
      ],
      cta: 'Solicitar propuesta',
      foot: 'demo técnica + due diligence',
      objection: { q: '¿Mis datos quedan dentro o salen a entrenar IA?', a: 'Quedan dentro. Usamos modelos con contratos zero-retention o despliegues self-hosted según caso. Cumplimos Ley 21.719.' },
    },
  ];
  return (
    <section className="section-v2" id="precios">
      <div className="container-v2">
        <SecHead
          index="§08 / precios"
          eyebrow="precios públicos · sin negociaciones interminables"
          title={<>Cuánto cuesta <span className="accent-text">en serio</span></>}
          lede="Publicamos rango de precios porque creemos que mereces saber el orden de magnitud antes de la primera reunión. UF al cierre, IVA aparte. Para una pyme de 30 personas, lo más común es el plan Standard."
        />
        <Reveal>
          <div className="pricing-v2">
            {tiers.map((t) => (
              <div key={t.id} className={`tier-v2 ${t.feat ? 'feat' : ''}`}>
                <div className="head">
                  <span className="id">{t.id}</span>
                  <span>↳ {t.tag}</span>
                </div>
                <h3>{t.name}</h3>
                <div className="price-row">
                  <div className="price">{t.price}</div>
                  <div className="price-unit">{t.unit}</div>
                </div>
                <p className="desc">{t.desc}</p>
                <ul className="feats">
                  {t.feats.map((f) => <li key={f}>{f}</li>)}
                </ul>
                <div className="tier-cta">
                  <button className={`btn-v2 ${t.feat ? 'primary' : 'ghost'}`} onClick={onCta} style={{ width: '100%', justifyContent: 'center' }}>
                    {t.cta}
                    <Arrow />
                  </button>
                  <div className="tier-foot">{t.foot}</div>
                  {t.objection && (
                    <details style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--ink-3)', borderTop: '1px dashed var(--line)', paddingTop: 12 }}>
                      <summary style={{ cursor: 'pointer', color: 'var(--ink-2)', listStyle: 'none' }}>↳ {t.objection.q}</summary>
                      <p style={{ marginTop: 8, lineHeight: 1.55, color: 'var(--ink-3)' }}>{t.objection.a}</p>
                    </details>
                  )}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="urgency-v2" style={{ marginTop: 28 }}>
            <span className="pill-mini">COHORTE MAYO 2026</span>
            <span>Cerramos inscripciones el <strong style={{ color: 'var(--accent)' }}>15 de mayo</strong> · quedan <strong style={{ color: 'var(--accent)' }}>2 de 4 cupos</strong> · arrancamos lunes 25 · siguiente cohorte: <strong>agosto 2026</strong></span>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// LEAD MAGNET — capture tibio leads
// ─────────────────────────────────────────────────────
const LeadMagnet = ({ targetRef }) => {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const submit = (e) => {
    e.preventDefault();
    if (!/^\S+@\S+\.\S+$/.test(email)) {
      setError('email inválido');
      return;
    }
    setSubmitted(true);
    setError('');
  };

  return (
    <section className="section-v2" id="playbook">
      <div className="container-v2">
        <Reveal>
          <div className="leadmag-v2" ref={targetRef}>
            <div className="doc-mock">
              <div className="lines">
                <div className="ln1"></div>
                <div className="ln2"></div>
                <div className="ln3"></div>
                <div className="ln4"></div>
                <div className="ln5"></div>
                <div className="ln6"></div>
                <div className="ln7"></div>
              </div>
            </div>
            <div className="lm-content">
              <div className="eyebrow-v2" style={{ marginBottom: 10 }}>↳ guía gratuita · 24 páginas</div>
              <h3>El playbook de automatización para pymes en Chile</h3>
              <p>Los 12 procesos que más rápido se pagan solos, herramientas locales que recomendamos, plantillas de baseline y cómo presentar el caso a tu directorio. Lo usamos internamente en cada diagnóstico.</p>
            </div>
            {!submitted ? (
              <form className="lm-form" onSubmit={submit} style={{ flexDirection: 'column' }}>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  <input
                    type="email"
                    placeholder="tu@empresa.cl"
                    value={email}
                    onChange={(e) => { setEmail(e.target.value); setError(''); }}
                  />
                  <button type="submit" className="btn-v2 primary">
                    Enviarme PDF
                    <Arrow />
                  </button>
                </div>
                {error && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--red)' }}>{error}</div>}
                <div className="lm-meta">↳ sin spam · te puedes desuscribir en 1 click</div>
              </form>
            ) : (
              <div className="lm-success">
                <span style={{ width: 18, height: 18, background: 'var(--accent)', color: 'var(--accent-ink)', display: 'grid', placeItems: 'center', borderRadius: 3, fontSize: 11, fontWeight: 700 }}>✓</span>
                Enviado a {email}. Revisa tu bandeja en 2min.
              </div>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// FAQ — SEO + objeciones reales
// ─────────────────────────────────────────────────────
const Faq = () => {
  const items = [
    {
      q: '¿Cuánto cuesta automatizar procesos en una pyme?',
      a: <>El rango realista para una pyme chilena de 15–80 personas es <strong>280 a 600 UF</strong> por un proyecto que automatice 3–5 procesos críticos en 11 semanas. Eso incluye diagnóstico, implementación, capacitación y 3 meses de soporte post handover. Si te están cotizando $80M+ para esto, te están vendiendo horas, no resultados.</>
    },
    {
      q: '¿En cuánto tiempo veo el primer resultado?',
      a: <>El primer flujo está corriendo en <strong>14 días</strong> desde que firmamos. Es nuestro estándar. Lo lograste o no — no hay zona gris. El resto del proyecto (procesos 2 a 5) se entrega entre la semana 4 y la semana 10.</>
    },
    {
      q: '¿Cómo aplica IA a mi pyme si no soy tecnológica?',
      a: <>La IA aplicada en pymes no es chatear con un robot — es <strong>resolver tareas repetitivas con ahorros medibles</strong>: cotizar automáticamente, clasificar tickets, redactar respuestas, leer contratos, conciliar facturas. En el diagnóstico identificamos 2–3 procesos donde la IA tiene retorno claro en menos de 6 meses.</>
    },
    {
      q: '¿Qué pasa con mis datos? ¿Se entrenan modelos con ellos?',
      a: <>Tus datos son tuyos. Trabajamos con proveedores que <strong>no usan tus datos para entrenar modelos</strong> (OpenAI Enterprise, Anthropic, Azure OpenAI). Cumplimos Ley 21.719 de protección de datos personales y firmamos NDA antes del primer diagnóstico.</>
    },
    {
      q: 'Ya tengo un ERP (Defontana, Bsale, Manager). ¿Sirve igual?',
      a: <>Sí, mejor. <strong>Trabajamos sobre tu stack actual</strong>, no te lo cambiamos. Integramos Defontana, Bsale, Manager, Softland, SAP B1 y casi todo lo que se usa en Chile. Si tu sistema tiene API o exporta CSV, podemos automatizar encima.</>
    },
    {
      q: '¿Necesito tener un equipo técnico interno?',
      a: <>No. <strong>El 70% de nuestros clientes no tiene CTO</strong>. Trabajamos con tu Gerente de Operaciones, CFO o el dueño directamente. Capacitamos al equipo administrativo para que opere lo que dejamos. Si más adelante quieres un técnico interno, te ayudamos a contratar.</>
    },
    {
      q: '¿Qué pasa si decido cancelar a mitad del proyecto?',
      a: <>El contrato es por proyecto cerrado, no por hitos. <strong>Si cancelas, pagas hasta el último entregable validado y recuperas el código y la documentación</strong>. No hay rescisión penalizada, no hay licencia que pierdas. Los procesos que ya están corriendo siguen funcionando.</>
    },
    {
      q: '¿Por qué agendar con Meikify y no con una consultora grande?',
      a: <>Si tu empresa factura $50.000M+ y tienes equipo interno de tecnología, una Big4 puede tener sentido. Si eres una pyme de menos de 80 personas y necesitas resultados rápidos sin estructura, <strong>nosotros estamos diseñados para eso</strong>. Equipo pequeño, sin overhead, foco en producción, no en presentaciones.</>
    },
  ];
  return (
    <section className="section-v2" id="faq">
      <div className="container-v2">
        <SecHead
          index="§09 / preguntas"
          eyebrow="lo que más nos preguntan en discovery"
          title={<>Las dudas <span className="accent-text">honestas</span></>}
          lede="Recopilamos las objeciones que aparecen una y otra vez en primera reunión. Si tu pregunta no está acá, escríbenos: respondemos en menos de 24 horas."
        />
        <Reveal>
          <div className="faq-v2">
            {items.map((it, i) => (
              <details key={i} {...(i === 0 ? { open: true } : {})}>
                <summary>
                  <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                    <span className="q-num">/{String(i + 1).padStart(2, '0')}</span>
                    <span>{it.q}</span>
                  </div>
                  <span className="toggle">+</span>
                </summary>
                <div className="answer">{it.a}</div>
              </details>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────
// FORM (multi-step)
// ─────────────────────────────────────────────────────
const ContactForm = () => {
  const [step, setStep] = useState(0);
  const [submitted, setSubmitted] = useState(false);
  const [data, setData] = useState({
    bottleneck: '', challenge: '', size: '', company: '', role: '', timeline: '',
    name: '', email: '', phone: '', notes: '',
  });
  const [errors, setErrors] = useState({});
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const validate = () => {
    const e = {};
    if (step === 0) {
      if (!data.bottleneck || data.bottleneck.length < 3) e.bottleneck = 'cuéntanos brevemente';
    }
    if (step === 1) {
      if (!data.challenge) e.challenge = 'requerido';
      if (!data.size) e.size = 'requerido';
      if (!data.timeline) e.timeline = 'requerido';
    }
    if (step === 2) {
      if (!data.name || data.name.length < 2) e.name = 'falta nombre';
      if (!data.email || !/^\S+@\S+\.\S+$/.test(data.email)) e.email = 'email inválido';
      if (!data.company || data.company.length < 2) e.company = 'falta empresa';
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const next = () => { if (!validate()) return; if (step === 2) setSubmitted(true); else setStep(s => s + 1); };
  const back = () => setStep(s => Math.max(0, s - 1));

  const challenges = ['automatizar procesos', 'aplicar IA', 'ordenar mi operación', 'no sé por dónde partir'];
  const sizes = ['1–10', '11–30', '31–80', '80+'];
  const timelines = ['esta semana', 'este mes', 'próximo trimestre', 'explorando'];

  if (submitted) {
    return (
      <div className="form-v2">
        <div className="form-v2-success">
          <div className="check-big">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M5 10L9 14L15 6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square" />
            </svg>
          </div>
          <h3 className="h-2-v2" style={{ marginBottom: 12 }}>
            recibido · <span className="accent-text">{data.name.split(' ')[0]}</span>
          </h3>
          <p className="lede-v2" style={{ margin: '0 auto', maxWidth: '40ch' }}>
            te escribimos en menos de 24h con propuesta de fecha. mini-diagnóstico de cortesía en camino a <span style={{ color: 'var(--ink)', fontFamily: 'var(--font-mono)' }}>{data.email}</span>
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="form-v2" id="contacto">
      <div className="form-v2-head">
        <span>paso {String(step + 1).padStart(2, '0')} / 03</span>
        <div className="dots">
          {[0, 1, 2].map(i => <span key={i} className={`dot ${i === step ? 'active' : i < step ? 'done' : ''}`}></span>)}
        </div>
      </div>

      {step === 0 && (
        <>
          <div className="form-v2-row">
            <label className="form-v2-label" style={{ fontSize: 14, color: 'var(--ink)', fontFamily: 'var(--font-display)', letterSpacing: '-0.01em' }}>¿Cuál es el proceso que más tiempo te está costando hoy?</label>
            <textarea
              className="form-v2-input"
              placeholder="Ej: cierre mensual con 14 hojas Excel · cotizar pedidos toma 2 días · cobranza manual..."
              value={data.bottleneck}
              onChange={(e) => set('bottleneck', e.target.value)}
              style={{ minHeight: 110 }}
            />
            {errors.bottleneck && <div className="form-v2-error">{errors.bottleneck}</div>}
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', marginTop: 8 }}>↳ 1 sola pregunta. El resto en 30 segundos.</div>
          </div>
        </>
      )}

      {step === 1 && (
        <>
          <div className="form-v2-row">
            <label className="form-v2-label">↳ qué buscas resolver</label>
            <div className="chip-v2-group">
              {challenges.map((c) => (
                <button key={c} type="button" className={`chip-v2 ${data.challenge === c ? 'active' : ''}`} onClick={() => set('challenge', c)}>{c}</button>
              ))}
            </div>
            {errors.challenge && <div className="form-v2-error">{errors.challenge}</div>}
          </div>
          <div className="form-v2-row">
            <label className="form-v2-label">↳ tamaño del equipo</label>
            <div className="chip-v2-group">
              {sizes.map((s) => (
                <button key={s} type="button" className={`chip-v2 ${data.size === s ? 'active' : ''}`} onClick={() => set('size', s)}>{s}</button>
              ))}
            </div>
            {errors.size && <div className="form-v2-error">{errors.size}</div>}
          </div>
          <div className="form-v2-row">
            <label className="form-v2-label">↳ cuándo empezar</label>
            <div className="chip-v2-group">
              {timelines.map((t) => (
                <button key={t} type="button" className={`chip-v2 ${data.timeline === t ? 'active' : ''}`} onClick={() => set('timeline', t)}>{t}</button>
              ))}
            </div>
            {errors.timeline && <div className="form-v2-error">{errors.timeline}</div>}
          </div>
        </>
      )}

      {step === 2 && (
        <>
          <div className="form-v2-row">
            <label className="form-v2-label">↳ nombre</label>
            <input className="form-v2-input" placeholder="Carlos Pérez" value={data.name} onChange={(e) => set('name', e.target.value)} />
            {errors.name && <div className="form-v2-error">{errors.name}</div>}
          </div>
          <div className="form-v2-row">
            <label className="form-v2-label">↳ email corporativo</label>
            <input className="form-v2-input" type="email" placeholder="carlos@empresa.cl" value={data.email} onChange={(e) => set('email', e.target.value)} />
            {errors.email && <div className="form-v2-error">{errors.email}</div>}
          </div>
          <div className="form-v2-row">
            <label className="form-v2-label">↳ empresa</label>
            <input className="form-v2-input" placeholder="Acme SpA" value={data.company} onChange={(e) => set('company', e.target.value)} />
            {errors.company && <div className="form-v2-error">{errors.company}</div>}
          </div>
          <div className="form-v2-row">
            <label className="form-v2-label">↳ whatsapp · opcional</label>
            <input className="form-v2-input" placeholder="+56 9 ..." value={data.phone} onChange={(e) => set('phone', e.target.value)} />
          </div>
        </>
      )}

      <div className="form-v2-actions">
        <button className="form-v2-back" onClick={back} disabled={step === 0}>← atrás</button>
        <button className="btn-v2 primary" onClick={next}>
          {step === 2 ? 'Agendar diagnóstico' : 'Continuar'}
          <Arrow />
        </button>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────
// WHY NOW — ventana de oportunidad
// ─────────────────────────────────────────────────────
const WhyNow = () => (
  <section className="section-v2" style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
    <div className="container-v2">
      <SecHead
        index="§07b / por qué ahora"
        eyebrow="ventana de oportunidad · 2026"
        title={<>El costo de <span className="accent-text">no automatizar</span><br />ya no es opción.</>}
        lede="La adopción de IA en pymes LATAM se duplicó en 18 meses. Quien no se mueve este año, compite contra rivales con 30% menos costo operacional el próximo."
      />
      <Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--line)', background: 'var(--bg-2)', marginTop: 32 }}>
          <div style={{ padding: '32px 28px', borderRight: '1px solid var(--line)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.06em', marginBottom: 16 }}>01 · EL MERCADO</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--ink)', lineHeight: 1 }}>2.1<span style={{ color: 'var(--accent)' }}>×</span></div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, color: 'var(--ink-2)', marginTop: 14, lineHeight: 1.45 }}>adopción de IA en pymes LATAM creció en 18 meses</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', marginTop: 10, lineHeight: 1.5 }}>// fuente: McKinsey LATAM 2025 · IDB Lab tracker</div>
          </div>
          <div style={{ padding: '32px 28px', borderRight: '1px solid var(--line)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.06em', marginBottom: 16 }}>02 · TU COMPETENCIA</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--ink)', lineHeight: 1 }}>1<span style={{ color: 'var(--accent)' }}>/</span>3</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, color: 'var(--ink-2)', marginTop: 14, lineHeight: 1.45 }}>de las pymes chilenas con +30 empleados ya tiene un proceso automatizado en producción</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', marginTop: 10, lineHeight: 1.5 }}>// los que esperan, llegan tarde y pagan el doble</div>
          </div>
          <div style={{ padding: '32px 28px' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.06em', marginBottom: 16 }}>03 · EL COSTO DE ESPERAR</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--ink)', lineHeight: 1 }}>$<span className="accent-text">2.4M</span></div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, color: 'var(--ink-2)', marginTop: 14, lineHeight: 1.45 }}>CLP/mes promedio en horas perdidas en una pyme de 30 personas con procesos manuales</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', marginTop: 10, lineHeight: 1.5 }}>// 6 meses de espera = 1 proyecto Standard pagado</div>
          </div>
        </div>
      </Reveal>
      <Reveal delay={120}>
        <div style={{ marginTop: 32, padding: '20px 24px', border: '1px solid var(--line)', background: 'var(--bg)', display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ width: 8, height: 8, background: 'var(--accent)', borderRadius: '50%', flexShrink: 0 }}></div>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--ink)', margin: 0, flex: 1, minWidth: 280, lineHeight: 1.5 }}>
            La ventana para liderar este cambio en tu industria <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>se cierra en 2026–2027</strong>. Después, deja de ser ventaja competitiva y pasa a ser requisito para sobrevivir.
          </p>
        </div>
      </Reveal>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────
// FINAL CTA
// ─────────────────────────────────────────────────────
const FinalCTA = () => (
  <section className="section-v2">
    <div className="container-v2">
      <Reveal>
        <div className="cta-v2">
          <div className="cta-v2-grid">
            <div>
              <div className="eyebrow-v2" style={{ marginBottom: 24 }}>↳ empieza el lunes</div>
              <h2 className="h-1-v2">
                30 minutos.<br />
                Cero compromiso.<br />
                Un diagnóstico <span className="accent-text">real</span>.
              </h2>
              <p className="lede-v2" style={{ marginTop: 24 }}>
                Cuéntanos cuál es el proceso que más tiempo te está costando. Te devolvemos un mini-diagnóstico con prioridades, esfuerzo estimado y ROI proyectado. Si encaja, agendamos. Si no, te lo decimos a la cara.
              </p>
              <pre className="ascii">{`$ meikify diagnose --tu-empresa
> analizando tu stack...    [ok]
> mapeando procesos...      [ok]
> ROI proyectado: 4.2×      ✓
> próximos pasos: 30min call`}</pre>
              <div style={{ marginTop: 28, padding: '20px 22px', border: '1px solid var(--line)', background: 'var(--bg-2)', display: 'flex', gap: 18, alignItems: 'flex-start' }}>
                <img src="joan.png" alt="Joan · Founder de meikify" style={{ width: 64, height: 64, objectFit: 'cover', flexShrink: 0, borderRadius: 0, filter: 'grayscale(0.15) contrast(1.05)' }} />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.06em', marginBottom: 6 }}>↳ QUIÉN TE RESPONDE</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--ink)', fontWeight: 500, marginBottom: 4 }}>Te contesto yo, Joan, en persona.</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.55 }}>Sin formularios filtrados · sin SDR · sin discovery de 2h. Leés mi email, te doy fecha. <a href="mailto:joan@meikify.cl" style={{ color: 'var(--ink-2)', textDecoration: 'none', borderBottom: '1px dashed var(--ink-4)' }}>joan@meikify.cl</a> · <a href="https://wa.me/56958995317" style={{ color: 'var(--ink-2)', textDecoration: 'none', borderBottom: '1px dashed var(--ink-4)' }}>+56 9 5899 5317</a></div>
                </div>
              </div>
            </div>
            <ContactForm />
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────
// HONEST SOCIAL PROOF (en lugar de testimonio falso)
// ─────────────────────────────────────────────────────
const HonestProof = () => (
  <section className="section-v2">
    <div className="container-v2">
      <Reveal>
        <div className="test-v2">
          <div>
            <div className="eyebrow-v2" style={{ marginBottom: 18 }}>↳ lo que escuchamos en discovery calls</div>
            <p className="quote">
              Llevábamos casi dos años con una consultora grande, gastando millones, y seguíamos cerrando mes con planillas. La diferencia con un equipo que sabe ejecutar — y no solo presentar — fue radical desde la segunda semana.
            </p>
            <div className="attr">
              <div className="av">CFO</div>
              <div>
                <strong>Frase recurrente · CFO de pyme retail</strong>
                <span>referencia disponible bajo NDA en discovery call</span>
              </div>
            </div>
          </div>
          <div className="side">
            <div className="mini-stat">
              <div className="k">tiempo · cierre mensual</div>
              <div className="v">14h → 20min</div>
            </div>
            <div className="mini-stat">
              <div className="k">de diagnóstico a producción</div>
              <div className="v">6 semanas</div>
            </div>
            <div className="mini-stat">
              <div className="k">ahorro estimado · año 1</div>
              <div className="v">$28M CLP</div>
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────
const Footer = ({ logoVariant }) => (
  <footer className="footer-v2">
    <div className="container-v2">
      <div className="footer-v2-top">
        <div>
          <Brand variant={logoVariant} />
          <p style={{ color: 'var(--ink-3)', fontSize: 13.5, lineHeight: 1.55, maxWidth: '36ch', marginTop: 16, fontFamily: 'var(--font-mono)' }}>
            consultora de ejecución tecnológica para pymes en Chile y LATAM. automatización · IA aplicada · transformación digital.
          </p>
        </div>
        <div className="footer-v2-col">
          <h5>↳ servicios</h5>
          <ul>
            <li><a href="#servicios">automatización</a></li>
            <li><a href="#servicios">IA aplicada</a></li>
            <li><a href="#servicios">transformación digital</a></li>
            <li><a href="#integraciones">integraciones locales</a></li>
            <li><a href="#proceso">cómo trabajamos</a></li>
          </ul>
        </div>
        <div className="footer-v2-col">
          <h5>↳ recursos</h5>
          <ul>
            <li><a href="#casos">casos</a></li>
            <li><a href="#playbook">playbook gratis</a></li>
            <li><a href="#precios">precios</a></li>
            <li><a href="#faq">preguntas frecuentes</a></li>
          </ul>
        </div>
        <div className="footer-v2-col">
          <h5>↳ contacto</h5>
          <ul>
            <li><a href="mailto:joan@meikify.cl">joan@meikify.cl</a></li>
            <li><a href="https://wa.me/56958995317">+56 9 5899 5317</a></li>
            <li><a href="#">linkedin↗</a></li>
            <li><a href="#contacto">agendar 30min</a></li>
          </ul>
        </div>
      </div>
      <div style={{ marginTop: 36, padding: '20px 22px', border: '1px solid var(--line)', background: 'var(--bg-2)', display: 'flex', gap: 16, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
        <div style={{ minWidth: 240, flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, color: 'var(--ink)', fontWeight: 500, letterSpacing: '-0.01em' }}>¿Aún dudando? Una llamada de 30min responde más que 10 emails.</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>↳ joan@meikify.cl · +56 9 5899 5317 · respuesta en menos de 24h</div>
        </div>
        <a href="#contacto" className="btn-v2 primary" style={{ textDecoration: 'none' }}>Agendar diagnóstico gratis →</a>
      </div>
      <div className="footer-v2-wordmark" style={{ fontSize: 'clamp(36px, 6vw, 72px)', margin: '20px 0', textAlign: 'left', letterSpacing: '-0.04em' }}>meikify<span className="accent-text">.</span></div>
      <div className="footer-v2-bottom">
        <span>© 2026 meikify spa · santiago, chile · cumple ley 21.719</span>
        <span>build 2026.04 · status: cohorte mayo — cierra 15-may</span>
      </div>
    </div>
  </footer>
);

// ─────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS_V2);
  const leadmagRef = useRef(null);

  useEffect(() => {
    const root = document.documentElement;
    root.dataset.accentV2 = t.accent;
    root.dataset.themeV2 = t.theme;
    root.dataset.densityV2 = t.density;
  }, [t]);

  const scrollToForm = () => {
    const el = document.getElementById('contacto');
    if (el) {
      const r = el.getBoundingClientRect();
      window.scrollTo({ top: window.scrollY + r.top - 60, behavior: 'smooth' });
    }
  };

  const scrollToLeadMagnet = () => {
    const el = document.getElementById('playbook');
    if (el) {
      const r = el.getBoundingClientRect();
      window.scrollTo({ top: window.scrollY + r.top - 60, behavior: 'smooth' });
    }
  };

  return (
    <div>
      <div className="grid-bg"></div>
      <Nav onCta={scrollToForm} logoVariant={t.logo} />
      <Hero onCta={scrollToForm} onLeadMagnet={scrollToLeadMagnet} />
      <Logos />
      <Problem />
      <BeforeAfter />
      <Services />
      <Local />
      <Stats />
      <Diff />
      <Process />
      <Capabilities />
      <HonestProof />
      <Pricing onCta={scrollToForm} />
      <WhyNow />
      <LeadMagnet targetRef={leadmagRef} />
      <Faq />
      <FinalCTA />
      <Footer logoVariant={t.logo} />

      <TweaksPanel title="Tweaks · meikify v3">
        <TweakSection label="visual" />
        <TweakRadio label="acento" value={t.accent} options={['lime', 'cyan', 'orange', 'white']} onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label="tema" value={t.theme} options={['dark', 'light']} onChange={(v) => setTweak('theme', v)} />
        <TweakSection label="logo" />
        <TweakRadio label="variante" value={t.logo} options={['A', 'B', 'C', 'D', 'E']} onChange={(v) => setTweak('logo', v)} />
        <TweakSection label="layout" />
        <TweakRadio label="densidad" value={t.density} options={['compact', 'regular', 'comfy']} onChange={(v) => setTweak('density', v)} />
        <TweakSection label="acciones" />
        <TweakButton onClick={scrollToForm}>saltar a CTA principal</TweakButton>
        <TweakButton onClick={scrollToLeadMagnet}>saltar a playbook gratis</TweakButton>
      </TweaksPanel>
    </div>
  );
}

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