/* global React, Icon, Button, Eyebrow, Badge, Container, Reveal */

const BA = {
  ink: '#111827',
  blue: 'var(--sub-academy-1)',
  sky: 'var(--sub-academy-2)',
  wash: 'var(--sub-academy-bg)',
  lime: '#B6F36B',
  line: 'rgba(35,79,232,0.18)',
  dark: '#101A3A',
};

function BaShell({ children, className = '', style = {} }) {
  return (
    <Container maxW={1180} className={`ba-shell ${className}`} style={style}>
      {children}
    </Container>
  );
}

function BaHero({ onCta }) {
  const modules = [
    ['01', 'Stack IA para marketing', 'Herramientas, criterios y flujos reales'],
    ['02', 'Producción aplicada', 'Texto, imagen, video, voz y automatización'],
    ['03', 'Protocolos del equipo', 'Calidad, prompts, briefs y seguimiento'],
  ];
  return (
    <section className="ba-hero">
      <div className="ba-hero-grid">
        <Reveal dir="left">
          <div className="ba-hero-copy">
            <div className="ba-status">
              <span className="ba-dot" />
              FRSKO Academy · Marketing con IA
            </div>
            <h1>Tu equipo sabe que la IA existe. ¿Sabe usarla para vender más?</h1>
            <p>
              Programas de formación prácticos en marketing con inteligencia artificial.
              No teoría. No demos de herramientas. Ejercicios reales con casos de tu industria.
            </p>
            <div className="ba-actions">
              <Button variant="dark" size="lg" icon="arrow-right" onClick={() => document.getElementById('programas').scrollIntoView({ behavior: 'smooth' })}>
                Ver programas disponibles
              </Button>
              <Button variant="ghost" size="lg" icon="calendar" onClick={onCta}>
                Solicitar programa in-company
              </Button>
            </div>
            <div className="ba-hero-metrics" aria-label="Formatos disponibles">
              <span>1 día intensivo</span>
              <span>2 días bootcamp</span>
              <span>16-32 h universidad</span>
            </div>
          </div>
        </Reveal>
        <Reveal dir="right" delay={1}>
          <div className="ba-board" aria-label="Tablero de módulos de formación">
            <div className="ba-board-top">
              <div>
                <span>training sprint</span>
                <strong>IA aplicada, no decorativa</strong>
              </div>
              <div className="ba-board-live">LIVE</div>
            </div>
            <div className="ba-path">
              {modules.map((m, i) => (
                <div className="ba-path-row" key={m[0]}>
                  <div className="ba-path-number">{m[0]}</div>
                  <div>
                    <strong>{m[1]}</strong>
                    <p>{m[2]}</p>
                  </div>
                  <Icon name={i === 2 ? 'check' : 'arrow-right'} size={18} />
                </div>
              ))}
            </div>
            <div className="ba-lab-card">
              <div>
                <span>Resultado esperado</span>
                <strong>Un sistema común de trabajo</strong>
              </div>
              <p>El equipo sale con prompts, plantillas, criterios de calidad y ejercicios que puede repetir desde el día siguiente.</p>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function BaProblem() {
  return (
    <section className="ba-section ba-problem">
      <BaShell>
        <div className="ba-problem-grid">
          <Reveal>
            <div>
              <Eyebrow color={BA.blue}>El problema</Eyebrow>
              <h2>El 73% de los equipos de marketing en LATAM ya "usan IA". Casi ninguno tiene un proceso.</h2>
            </div>
          </Reveal>
          <Reveal delay={1}>
            <div className="ba-copy-stack">
              <p>
                Alguien descubrió ChatGPT, otro usa Canva Magic, diseño prueba Midjourney.
                Cada quien experimenta por su lado, nadie comparte lo que aprende y no hay estándar de calidad.
              </p>
              <p>
                El resultado es caos productivo: mucho tiempo experimentando, poco tiempo produciendo.
                FRSKO Academy enseña sistemas de trabajo que el equipo puede operar desde el primer día.
              </p>
            </div>
          </Reveal>
        </div>
      </BaShell>
    </section>
  );
}

function BaPrograms({ onCta }) {
  const programs = [
    {
      name: 'In-Company',
      for: 'Equipos de marketing, ventas, comunicación o áreas que producen contenido o gestionan clientes. Desde 8 personas.',
      duration: '1 día intensivo (6-8 h) o 4 sesiones de 2 h',
      price: 'Desde $80,000 MXN por grupo',
      cta: 'Solicitar cotización in-company',
      icon: 'briefcase',
      items: ['Stack IA para marketing', 'Contenido con IA: texto, imagen, video, voz', 'Automatización de reportes, briefs y resúmenes', 'Casos prácticos de tu industria', 'Protocolos de trabajo y control de calidad'],
    },
    {
      name: 'Bootcamp Abierto',
      for: 'Profesionales de marketing, comunicación, ventas, emprendedores y directivos que quieren usar IA de forma sistemática.',
      duration: '2 días (16 h) · CDMX o virtual',
      price: 'Desde $3,500 MXN por persona',
      cta: 'Ver próximas fechas',
      icon: 'calendar',
      items: ['Fundamentos de IA generativa para no técnicos', 'Claude, ChatGPT, Perplexity, Canva AI, ElevenLabs, HeyGen', 'Flujos para contenido, lead gen y análisis', 'Prompts que funcionan', 'Casos por industria: retail, fintech, salud, legal, B2B'],
    },
    {
      name: 'Licencias Universitarias',
      for: 'Universidades, tecnológicos y centros de educación continua que quieren incorporar marketing con IA a su oferta.',
      duration: 'Módulo de 16 a 32 h',
      price: 'Modelo institucional o white-label',
      cta: 'Solicitar información para universidades',
      icon: 'graduation',
      items: ['Materiales, casos, ejercicios y evaluaciones', 'Capacitación a docentes', 'Actualizaciones periódicas', 'Cobertura con tu institución o FRSKO Academy'],
    },
  ];

  return (
    <section id="programas" className="ba-section ba-programs">
      <BaShell>
        <Reveal>
          <div className="ba-section-head">
            <Eyebrow color={BA.blue}>Programas disponibles</Eyebrow>
            <h2>Tres modalidades, un objetivo: que tu equipo trabaje diferente al salir.</h2>
          </div>
        </Reveal>
        <div className="ba-program-grid">
          {programs.map((p, i) => (
            <Reveal key={p.name} delay={Math.min(i + 1, 3)} scale>
              <article className={`ba-program-card ${i === 0 ? 'is-featured' : ''}`}>
                <div className="ba-card-icon"><Icon name={p.icon} size={22} /></div>
                <h3>{p.name}</h3>
                <p className="ba-for">{p.for}</p>
                <div className="ba-program-meta">
                  <span>{p.duration}</span>
                  <strong>{p.price}</strong>
                </div>
                <ul>
                  {p.items.map(item => (
                    <li key={item}><Icon name="check" size={15} />{item}</li>
                  ))}
                </ul>
                <button className="ba-text-cta" onClick={onCta}>
                  {p.cta} <Icon name="arrow-right" size={15} />
                </button>
              </article>
            </Reveal>
          ))}
        </div>
      </BaShell>
    </section>
  );
}

function BaMethod() {
  const steps = [
    ['Diagnóstico', 'Mapeamos el nivel del equipo, herramientas actuales y tareas repetitivas.'],
    ['Entrenamiento', 'Ejercicios reales con productos, audiencias, briefs y problemas de tu industria.'],
    ['Protocolos', 'Definimos prompts, plantillas, revisión de calidad y criterios de uso responsable.'],
    ['Seguimiento', 'WhatsApp por 30 días, comunidad privada y recursos actualizados.'],
  ];
  return (
    <section className="ba-section ba-method">
      <BaShell>
        <div className="ba-method-grid">
          <Reveal dir="left">
            <div>
              <Badge tone="accent">Método FRSKO</Badge>
              <h2>No somos una escuela de cursos. Somos una agencia que vive de lo que enseña.</h2>
              <p>
                Cada herramienta y metodología que enseñamos es la misma que usamos en producción para nuestros clientes.
                Cuando hablamos de producir 60 piezas de contenido al mes con IA, no es teoría: es operación real.
              </p>
            </div>
          </Reveal>
          <div className="ba-method-list">
            {steps.map((step, i) => (
              <Reveal key={step[0]} delay={Math.min(i + 1, 4)} fast>
                <div className="ba-method-row">
                  <span>{String(i + 1).padStart(2, '0')}</span>
                  <div>
                    <strong>{step[0]}</strong>
                    <p>{step[1]}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </BaShell>
    </section>
  );
}

function BaProof() {
  return (
    <section className="ba-section ba-proof">
      <BaShell>
        <div className="ba-proof-grid">
          <Reveal>
            <div className="ba-proof-card">
              <Icon name="quote" size={28} />
              <p>"Los testimonios reales de los primeros talleres piloto se integrarán aquí."</p>
              <span>Formato reservado · Nombre, Cargo, Empresa, Industria</span>
            </div>
          </Reveal>
          <Reveal delay={1}>
            <div className="ba-proof-note">
              <Eyebrow color={BA.blue}>Diferencia clave</Eyebrow>
              <h2>Ejercicios con resultados verificables, no inspiración de aula.</h2>
              <p>
                Los casos son de industrias reales en México y los errores que advertimos son errores que ya cometimos primero operando campañas, contenidos y automatizaciones.
              </p>
            </div>
          </Reveal>
        </div>
      </BaShell>
    </section>
  );
}

function BaFaq() {
  const faqs = [
    ['¿Los programas in-company son presenciales o en línea?', 'Ambos. Presencial tiene más dinámica e interacción. Virtual permite entrenar equipos distribuidos.'],
    ['¿Se puede personalizar el contenido para nuestra industria?', 'Sí. Si eres inmobiliaria, los ejercicios son con leads inmobiliarios. Si eres fintech, con captación de usuarios financieros.'],
    ['¿Necesito conocimientos previos de IA?', 'No. Avanzamos desde lo básico hasta flujos completos para profesionales que hoy usan poco o nada de IA.'],
    ['¿Hay seguimiento después del taller?', 'Sí. Soporte por WhatsApp durante 30 días y acceso a la comunidad privada de FRSKO Academy.'],
    ['¿Emiten constancias o diplomas?', 'Sí, certificado digital de FRSKO Academy con detalle de horas y módulos completados.'],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="ba-section ba-faq">
      <BaShell className="ba-narrow">
        <Reveal>
          <div className="ba-section-head">
            <Eyebrow color={BA.blue}>Preguntas frecuentes</Eyebrow>
            <h2>Lo que normalmente se pregunta antes de capacitar a un equipo.</h2>
          </div>
        </Reveal>
        <Reveal delay={1} scale>
          <div className="ba-faq-box">
            {faqs.map((f, i) => {
              const isOpen = open === i;
              return (
                <div className="ba-faq-item" key={f[0]}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                    <span>{String(i + 1).padStart(2, '0')}</span>
                    <strong>{f[0]}</strong>
                    <Icon name="arrow-right" size={15} style={{ transform: isOpen ? 'rotate(90deg)' : '' }} />
                  </button>
                  {isOpen && <p>{f[1]}</p>}
                </div>
              );
            })}
          </div>
        </Reveal>
      </BaShell>
    </section>
  );
}

function BaFinalCta({ onCta }) {
  return (
    <section className="ba-final">
      <BaShell>
        <Reveal>
          <div className="ba-final-box">
            <div>
              <Eyebrow color={BA.lime}>CTA final</Eyebrow>
              <h2>¿Cuánto vale que tu equipo trabaje 2 veces más rápido con la misma calidad?</h2>
              <p>
                Un día de capacitación puede cambiar cómo trabaja tu equipo los próximos cinco años:
                menos experimentación aislada, más producción con método.
              </p>
            </div>
            <div className="ba-final-actions">
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar programa in-company
              </Button>
              <Button variant="inverse" size="lg" icon="calendar" onClick={() => document.getElementById('programas').scrollIntoView({ behavior: 'smooth' })}>
                Ver próximas fechas
              </Button>
            </div>
          </div>
        </Reveal>
      </BaShell>
    </section>
  );
}

Object.assign(window, { BaHero, BaProblem, BaPrograms, BaMethod, BaProof, BaFaq, BaFinalCta });