/* global React */
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

/* ============================================
   Problem
   ============================================ */
function Problem() {
  const cards = [
    { n: "01", q: "Sé que mi negocio puede crecer más, pero no sé por dónde empezar." },
    { n: "02", q: "Decido por intuición, sin método y sin números en la mano." },
    { n: "03", q: "Todo depende de mí. El negocio no camina sin el dueño." },
    { n: "04", q: "La fe y el trabajo parecen vivir en mundos separados." }
  ];
  return (
    <section className="section section--light" id="problema">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--light">01 / Problema</span>
          <h2 className="title">
            No estás perdido.<br/>
            Estás <em>sin gobierno</em>.
          </h2>
          <p className="lede lede--light">
            La mayoría de los emprendedores no falla por falta de ideas.
            Falla por falta de plan, ritmo y constancia. ¿Te suena familiar?
          </p>
        </div>
        <div className="problem-grid">
          {cards.map((c) => (
            <div key={c.n} className="problem-card">
              <span className="problem-card__num">{c.n}</span>
              <p className="problem-card__quote">{c.q}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Solution / Manifesto
   ============================================ */
function Solution() {
  return (
    <section className="section section--dark" id="solucao">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">02 / Solución</span>
          <p className="manifesto__big">
            No necesitas más <span className="strike">contenido</span>.<br/>
            Necesitas <span className="gold">dirección, ejecución y gobierno.</span>
          </p>
        </div>

        <div className="manifesto__pillars">
          <div className="pillar">
            <span className="pillar__num">→ DIRECCIÓN</span>
            <h3 className="pillar__title">Sabes hacia dónde ir.</h3>
            <p className="pillar__body">
              Diagnóstico del negocio en minutos. Un mapa claro de lo que está frenando el crecimiento, y de lo que viene primero.
            </p>
          </div>
          <div className="pillar">
            <span className="pillar__num">→ EJECUCIÓN</span>
            <h3 className="pillar__title">Sabes qué hacer.</h3>
            <p className="pillar__body">
              Plan de acción de 24 semanas con tareas semanales. Sin ambigüedad. Listo para abrir y ejecutar.
            </p>
          </div>
          <div className="pillar">
            <span className="pillar__num">→ GOBIERNO</span>
            <h3 className="pillar__title">Mantienes el ritmo.</h3>
            <p className="pillar__body">
              Check-ins inteligentes, metas medibles y principios bíblicos aplicados a las decisiones, todos los días.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   How It Works
   ============================================ */
function HowItWorks() {
  const steps = [
    { n: "i", t: "Diagnóstico", b: "En 7 minutos respondes la entrevista de Jethro. Él entiende tu modelo, fase, dolor y meta.", tag: "Etapa 01 · 7 min" },
    { n: "ii", t: "Plan", b: "Recibes el plan de 24 semanas. Tareas semanales, prioridades claras, métricas que importan.", tag: "Etapa 02 · 1 día" },
    { n: "iii", t: "Ejecución", b: "Cada mañana, Jethro te entrega lo que importa hoy. Sin ruido. Sin 200 pestañas abiertas.", tag: "Etapa 03 · diario" },
    { n: "iv", t: "Gobierno", b: "Check-in semanal, ajuste de rumbo, principios bíblicos aplicados a las decisiones difíciles.", tag: "Etapa 04 · continuo" }
  ];
  return (
    <section className="section section--ice" id="como">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--light">03 / Cómo funciona</span>
          <h2 className="title">Cuatro pasos. <em>Sin complejidad.</em></h2>
          <p className="lede lede--light">
            Un flujo simple, repetido con disciplina. Eso es lo que separa a la empresa que crece de la empresa que se arrastra.
          </p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div key={i} className="step">
              <div className="step__num">{s.n}</div>
              <h3 className="step__title">{s.t}</h3>
              <p className="step__body">{s.b}</p>
              <span className="step__tag">{s.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Features (bento grid)
   ============================================ */
function Features() {
  return (
    <section className="section section--dark" id="recursos">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">04 / Funciones</span>
          <h2 className="title">Un producto. <em>Todo lo que falta para ejecutar.</em></h2>
        </div>

        <div className="features">
          <div className="feature feature--span2">
            <span className="feature__label">→ Mentor con memoria</span>
            <h3 className="feature__title">Una conversación que responde como mentor, no como chatbot.</h3>
            <p className="feature__body">
              No es una IA genérica. Está especializada en el emprendedor cristiano y en el Método PBN: conoce tu negocio, recuerda lo que acordaron y retoma contigo en la próxima conversación.
            </p>
            <div className="chat">
              <div className="chat__bubble chat__bubble--user">Estoy perdiendo clientes frente a competidores más baratos. ¿Qué hago?</div>
              <div className="chat__bubble chat__bubble--bot">Antes de bajar el precio: revisa tu oferta. La mayoría de las veces el problema es la percepción de valor, no la lista de precios. ¿Auditamos tu propuesta ahora?</div>
            </div>
          </div>

          <div className="feature feature--tall">
            <span className="feature__label">→ Plan de 24 semanas</span>
            <h3 className="feature__title">Tareas que cambian la empresa, no la hoja de cálculo.</h3>
            <p className="feature__body">Prioridades claras por semana. Sin ambigüedad.</p>
            <div className="mock">
              <div className="mock__row">
                <span className="mock__dot mock__dot--done"></span>
                <span className="mock__text mock__text--strike">Definir oferta ancla</span>
                <span className="mock__time">LUN</span>
              </div>
              <div className="mock__row">
                <span className="mock__dot mock__dot--done"></span>
                <span className="mock__text mock__text--strike">Guion de calificación</span>
                <span className="mock__time">MAR</span>
              </div>
              <div className="mock__row">
                <span className="mock__dot"></span>
                <span className="mock__text">Auditar embudo de ventas</span>
                <span className="mock__time">MIÉ</span>
              </div>
              <div className="mock__row">
                <span className="mock__dot mock__dot--idle"></span>
                <span className="mock__text">Definir KPI mensual</span>
                <span className="mock__time">JUE</span>
              </div>
              <div className="mock__row">
                <span className="mock__dot mock__dot--idle"></span>
                <span className="mock__text">Reunión de gobierno</span>
                <span className="mock__time">VIE</span>
              </div>
            </div>
          </div>

          <div className="feature">
            <span className="feature__label">→ Diagnóstico</span>
            <h3 className="feature__title">Radiografía del negocio en 7 minutos.</h3>
            <p className="feature__body">Clasifica tu negocio en uno de 9 perfiles y señala la causa raíz que frena el crecimiento.</p>
          </div>

          <div className="feature">
            <span className="feature__label">→ Biblioteca</span>
            <h3 className="feature__title">Guías, plantillas y modelos.</h3>
            <p className="feature__body">Las herramientas correctas en la semana correcta, según tu perfil y tu fase.</p>
          </div>

          <div className="feature feature--span2">
            <span className="feature__label">→ Principios + Check-in</span>
            <h3 className="feature__title">Sabiduría que decide. Ritmo que se mantiene.</h3>
            <p className="feature__body">
              Principios bíblicos aplicados al negocio con claridad empresarial. Check-ins semanales que te mantienen en el juego, incluso en las semanas en que todo quiere sacarte.
            </p>
          </div>

          <div className="feature">
            <span className="feature__label">→ Artículos con prompt</span>
            <h3 className="feature__title">Lecturas cortas que se convierten en acción.</h3>
            <p className="feature__body">Temas prácticos y actuales. Cada artículo abre el Mentor ya en el tema, con un prompt listo para aplicar a tu negocio.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Problem, Solution, HowItWorks, Features });