// BEAKEN — Agency (es la HOME en /)

const Agency = () => {
  const dolores = [
    "Tus empleados preguntan lo mismo 10 veces al día.",
    "Si te vas 3 días, algo se rompe.",
    "Hay meses buenos y meses malos. Sin patrón, sin sistema.",
    "Invertiste en software que nadie usa.",
    "Todo depende de la memoria de una sola persona.",
    "Sabes que la IA puede ayudarte, pero no sabes por dónde empezar."
  ];

  const metodo = [
    { n: "01", t: "Diagnóstico", d: "2 horas. Entendemos tu operación real, sin teoría." },
    { n: "02", t: "Blueprint", d: "Mapa de procesos, tecnología, roles y prioridades." },
    { n: "03", t: "Sprint", d: "Primer entregable funcionando. No PowerPoint." },
    { n: "04", t: "Evidencia", d: "Medimos adopción real. ¿Lo está usando tu equipo?" },
    { n: "05", t: "Adopción", d: "Tu equipo lo opera sin nosotros. Salimos." }
  ];

  const paquetes = [
    { n: "01", t: "Orden Operativo", p: "De el caos a procesos claros." },
    { n: "02", t: "Ventas con Sistema", p: "Pipeline claro, seguimiento real." },
    { n: "03", t: "Primer Empleado Digital", p: "IA que trabaja para ti desde el lunes." },
    { n: "04", t: "Arranque RH", p: "Estructura de equipo sin departamento de RH." },
    { n: "05", t: "Control Financiero", p: "Cuánto entra, sale y queda. Con claridad." },
    { n: "06", t: "Sistema de Gestión", p: "Tu operación entera en un solo sistema." },
    { n: "07", t: "Transformación Integral", p: "Rediseño completo de toda tu operación." },
  ];

  return (
    <div className="page-in">
      {/* HERO */}
      <section className="hero">
        <div className="grid-bg"></div>
        <div className="container" style={{ position: 'relative' }}>
          <div className="hero-split">
            <div>
              <Reveal>
                <span className="tag electrico" style={{ marginBottom: 24, display: 'inline-flex' }}>
                  <span className="dot"></span> INTELIGENCIA DE NEGOCIOS APLICADA
                </span>
              </Reveal>
              <Reveal delay={1}>
                <h1 className="hero-head">
                  Tu operación,<br/>
                  funcionando<br/>
                  <span className="accent">sin que estés tú.</span>
                </h1>
              </Reveal>
              <Reveal delay={2}>
                <p className="hero-sub">
                  Transformamos el caos operativo de tu PyME en sistemas que tu equipo opera solo. Diagnóstico en 2 horas, soluciones que usas el lunes siguiente.
                </p>
              </Reveal>
              <Reveal delay={3} style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="btn btn-primary">
                  Agenda llamada de 15 min <Arr />
                </a>
                <a href="#calificador" className="btn btn-secondary">
                  ¿Cuál es tu situación?
                </a>
              </Reveal>
              <Reveal delay={4}>
                <div className="hero-meta">
                  <div><div className="k">Diagnóstico</div><div className="v">2H</div></div>
                  <div><div className="k">PyMEs</div><div className="v">+50</div></div>
                  <div><div className="k">Adopción</div><div className="v"><span className="accent">94%</span></div></div>
                  <div><div className="k">Cobertura</div><div className="v">LATAM</div></div>
                </div>
              </Reveal>
            </div>
            <Reveal delay={2} className="image">
              <ImgBlock
                src="https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop"
                caption={'"Primero orden. Después tecnología."'}
                code="BK-001" label="AGENCY · HERO"
              />
            </Reveal>
          </div>
        </div>
      </section>

      {/* CALIFICADOR 3 VÍAS */}
      <section className="sec" id="calificador">
        <div className="container">
          <SecHead
            num="SECCIÓN 01 / RUTA"
            title="¿Qué describe<br/>mejor <span class='blue'>tu situación?</span>"
            sub="Tres rutas distintas según dónde estés. Elige la tuya — cada una te lleva a una propuesta diferente."
          />
          <Reveal className="qualifier" delay={1}>
            <a className="qualifier-card" href="#paquetes" onClick={(e)=>{e.preventDefault();document.getElementById('paquetes').scrollIntoView({behavior:'smooth'});}}>
              <div className="icon">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M6 34 L6 10 L24 10 L24 34"/>
                  <path d="M24 18 L34 18 L34 34"/>
                  <path d="M2 34 L38 34"/>
                  <path d="M11 16 L11 18 M16 16 L16 18 M11 22 L11 24 M16 22 L16 24 M11 28 L11 30 M16 28 L16 30"/>
                  <path d="M28 24 L28 26 M28 30 L28 32"/>
                </svg>
              </div>
              <div className="label">RUTA — AGENCY</div>
              <div className="text">Soy dueño o director de una PyME con caos operativo.</div>
              <div className="arr-link">Ver paquetes <ArrRight /></div>
            </a>
            <a className="qualifier-card" href="#/lab" onClick={(e)=>{e.preventDefault();navigate('/lab');}}>
              <div className="icon">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M16 4 L24 4"/>
                  <path d="M17 4 L17 16 L8 32 Q7 35 10 35 L30 35 Q33 35 32 32 L23 16 L23 4"/>
                  <path d="M13 24 L27 24"/>
                  <circle cx="16" cy="29" r="1"/>
                  <circle cx="22" cy="28" r="1.2"/>
                </svg>
              </div>
              <div className="label">RUTA — LAB</div>
              <div className="text">Tengo una idea o proyecto y quiero validarlo.</div>
              <div className="arr-link">Conoce el Lab <ArrRight /></div>
            </a>
            <a className="qualifier-card" href="#/academy" onClick={(e)=>{e.preventDefault();navigate('/academy');}}>
              <div className="icon">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M2 16 L20 8 L38 16 L20 24 Z"/>
                  <path d="M10 19 L10 28 Q10 32 20 32 Q30 32 30 28 L30 19"/>
                  <path d="M35 17 L35 26"/>
                </svg>
              </div>
              <div className="label">RUTA — ACADEMY</div>
              <div className="text">Tengo un equipo que necesito capacitar en IA.</div>
              <div className="arr-link">Ver talleres <ArrRight /></div>
            </a>
          </Reveal>
        </div>
      </section>

      {/* DOLORES */}
      <section className="sec alt">
        <div className="container">
          <SecHead
            num="SECCIÓN 02 / DIAGNÓSTICO"
            title="¿Te suena<br/>familiar?"
            sub="Si reconoces dos o más de estos síntomas, tu operación te está costando dinero todos los días en silencio. Ahí entramos."
          />
          <div className="problem-grid">
            {dolores.map((p, i) => (
              <Reveal delay={Math.min(i+1, 5)} className="card" key={i}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="n">SÍNTOMA — 0{i+1}</span>
                  <Cross />
                </div>
                <p>{p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* MÉTODO BLUEPRINT + SPRINT */}
      <section className="sec" id="metodo">
        <div className="container">
          <SecHead
            num="SECCIÓN 03 / METODOLOGÍA"
            title="Blueprint<br/>+ <span class='blue'>Sprint.</span>"
            sub="No vendemos horas. Vendemos ciclos cortos con entregable que tu equipo usa el lunes siguiente — y evidencia de que lo está usando."
          />
          <div className="process-strip">
            {metodo.map((s, i) => (
              <Reveal delay={Math.min(i+1, 5)} className="step" key={i}>
                <span className="step-num">PASO {s.n}</span>
                <div className="step-line"></div>
                <h3 className="step-title">{s.t}</h3>
                <p className="step-desc">{s.d}</p>
              </Reveal>
            ))}
          </div>

          {/* Comparativa */}
          <Reveal delay={5} style={{ marginTop: 56 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--border)' }}>
              <div style={{ padding: 32, background: 'var(--gris-claro)', borderRight: '1px solid var(--border)' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--caption)', marginBottom: 16, fontWeight: 600 }}>CONSULTORÍA TRADICIONAL</div>
                <ul style={{ listStyle: 'none', display: 'grid', gap: 12 }}>
                  {["Cobra por horas","Informes largos sin ejecución","Se va y no vuelve","PowerPoints en un cajón","Capital humano · holístico · sinergias"].map((t,i)=>(
                    <li key={i} style={{ display: 'flex', gap: 10, fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--body)' }}>
                      <span style={{ color: 'var(--caption)' }}>✗</span> {t}
                    </li>
                  ))}
                </ul>
              </div>
              <div style={{ padding: 32, background: 'var(--paper)' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--rosa)', marginBottom: 16, fontWeight: 600 }}>SISTEMA BEAKEN</div>
                <ul style={{ listStyle: 'none', display: 'grid', gap: 12 }}>
                  {["Ciclos cortos con entregable","Sistemas que corren en tu operación","Adopción verificada con evidencia","Tu equipo lo opera solo","Tú · diagnóstico · resolver · medir"].map((t,i)=>(
                    <li key={i} style={{ display: 'flex', gap: 10, fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--marino)', fontWeight: 500 }}>
                      <span style={{ color: 'var(--rosa)' }}>✓</span> {t}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* TRES UNIDADES */}
      <section className="sec dark">
        <div className="grid-bg"></div>
        <div className="container" style={{ position: 'relative' }}>
          <img src="assets/logo.png" alt="Beaken" className="dark-logo-corner" />
          <div className="sec-head" style={{ marginBottom: 56 }}>
            <Reveal className="sec-num">SECCIÓN 04 / UNIDADES</Reveal>
            <Reveal delay={1}>
              <h2 className="sec-title" style={{ maxWidth: 1000 }}>
                Una marca.<br/>
                <span className="blue">Tres unidades.</span><br/>
                Un objetivo.
              </h2>
            </Reveal>
          </div>
          <div className="lines">
            {[
              {
                k: '01 — AGENCY', to: '/', stat: 'TRANSFORMACIÓN OPERATIVA',
                t: 'Agency',
                p: 'Diagnóstico, Blueprint y Sprints para PyMEs con caos operativo. 7 paquetes productizados con alcance fijo.',
                sub: ['Blueprint + Sprints', '7 paquetes productizados', 'Consultorio PyME', 'Adopción verificada']
              },
              {
                k: '02 — LAB', to: '/lab', stat: 'INCUBADORA + AI LAB',
                t: 'Lab',
                p: 'De la idea a la primera venta. Incubadora de negocios + Laboratorio de IA aplicada para emprendedores y áreas de innovación.',
                sub: ['Incubadora · Flash, Sprint, Community', 'AI Lab · Construcción de agentes', 'Club Beaken Lab', 'Becas disponibles']
              },
              {
                k: '03 — ACADEMY', to: '/academy', stat: 'TALLERES IA + CAPACITACIONES',
                t: 'Academy',
                p: 'Tu equipo domina la IA en 1 día. Talleres prácticos con casos reales — salen con algo que pueden usar mañana.',
                sub: ['Taller IA Aplicada', 'Sesión 1:1 IA', 'Cursos PyME', 'Procesos · Lean · Liderazgo']
              }
            ].map((l, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={l.k}>
                <a href={`#${l.to}`} onClick={(e)=>{e.preventDefault();navigate(l.to);}} className="line-card">
                  <div className="lbl">
                    <span className="num">{l.k}</span>
                    <span className="stat">{l.stat}</span>
                  </div>
                  <h3>{l.t}</h3>
                  <p>{l.p}</p>
                  <ul className="sublist">
                    {l.sub.map((s, j) => <li key={j}>{s}</li>)}
                  </ul>
                  <div className="cta">Conocer {l.t.toLowerCase()} <ArrRight /></div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PAQUETES PRODUCTIZADOS (foco AGENCY) */}
      <section className="sec" id="paquetes">
        <div className="container">
          <SecHead
            num="SECCIÓN 05 / AGENCY"
            title="7 paquetes<br/>productizados."
            sub="Alcance fijo, entregables definidos, contenido modular. Cada paquete con 3 niveles: Esencial · Completo · Premium. Session Zero y Session 1 siempre gratuitas."
          />
          <Reveal>
            <div className="pkg-grid">
              {paquetes.map((p, i) => (
                <Reveal key={p.n} delay={Math.min(i+1,5)} className="pkg-card">
                  <div className="num">{p.n}</div>
                  <div className="body">
                    <h4>{p.t}</h4>
                    <div className="pain">{p.p}</div>
                  </div>
                  <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="price-link">Cotizar →</a>
                </Reveal>
              ))}
            </div>
          </Reveal>

          {/* Servicios base */}
          <Reveal delay={3} style={{ marginTop: 48 }}>
            <div style={{ background: 'var(--crema)', borderLeft: '3px solid var(--rosa)', padding: '32px 36px' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--rosa)', fontWeight: 700, marginBottom: 16 }}>EMPIEZA AQUÍ</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 800, color: 'var(--marino)', letterSpacing: '-0.02em', marginBottom: 20 }}>Servicios de entrada — sin compromiso de paquete</h3>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 24 }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--marino)', marginBottom: 6 }}>Llamada de descubrimiento</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 800, color: 'var(--rosa)' }}>Gratis · 15 min</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--marino)', marginBottom: 6 }}>Consultorio PyME</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 800, color: 'var(--rosa)', marginBottom: 6 }}>$1,000 MXN</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--body)', lineHeight: 1.4 }}>Diagnóstico exprés + 3 acciones concretas para esta semana.</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--marino)', marginBottom: 6 }}>Taller Blueprint</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--body)', lineHeight: 1.4 }}>Mapeo completo de tu operación + roadmap priorizado.</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* POR QUÉ BEAKEN */}
      <section className="sec alt">
        <div className="container">
          <SecHead
            num="SECCIÓN 06 / DIFERENCIAL"
            title="Por qué<br/>Beaken."
            sub="No somos otra agencia. Somos el socio operativo que llega cuando ya intentaste y no funcionó."
          />
          <div className="why-grid">
            <Reveal className="why-list">
              {[
                { n: '01', t: 'Diagnosticamos antes de cotizar', d: 'No existe la propuesta genérica. Cada plan parte de tu operación real, en 2 horas.' },
                { n: '02', t: 'Ejecutamos, no solo asesoramos', d: 'Salimos del PowerPoint y llegamos al sistema funcionando con tu equipo.' },
                { n: '03', t: 'Adopción verificada', d: 'No nos vamos hasta que tu equipo lo está usando. Con evidencia, no con buena fe.' },
                { n: '04', t: 'Precio cerrado', d: 'Paquetes productizados con alcance, tiempo y precio definidos. Sin sorpresas.' },
              ].map(w => (
                <div key={w.n}>
                  <div className="num">{w.n} /</div>
                  <div>
                    <h4>{w.t}</h4>
                    <p>{w.d}</p>
                  </div>
                </div>
              ))}
            </Reveal>
            <Reveal delay={2}>
              <div className="stat-grid">
                <div className="stat"><div className="val accent">+50</div><div className="lbl">PyMEs transformadas</div></div>
                <div className="stat"><div className="val blue">2H</div><div className="lbl">Diagnóstico inicial</div></div>
                <div className="stat"><div className="val">94%</div><div className="lbl">Tasa de adopción</div></div>
                <div className="stat dark">
                  <div className="lbl">EMPEZAR</div>
                  <p>15 minutos. Sin compromiso. Sin PDFs.</p>
                  <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}}>
                    Agendar llamada <ArrRight />
                  </a>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <BigCTA
        eyebrow="LLAMADA DE 15 MIN · GRATIS"
        title="¿Listo para dejar de ser el cuello de botella?"
        sub="Agenda 15 minutos. Salimos con un siguiente paso claro o te decimos honestamente que no encajamos."
        cta="Agenda tu llamada"
      />
    </div>
  );
};

window.Agency = Agency;