/* global React, Eyebrow, Arr, Reveal, waLink */
const { useState } = React;

const MODULES = [
  {
    id: "iniciacion", num: "01", name: "Iniciación al tejido precolombino",
    level: "Desde cero", duration: "4 sesiones", hours: "12 h", spots: "6",
    price: "320.000", active: true,
    learn: "Patrón base lineal, montaje sobre marco, lectura del dibujo precolombino. Partimos de cero.",
    take: "Tu primer respaldo tejido — un taburete pequeño que te llevas a casa.",
    accent: "var(--accent, #C13B1F)",
  },
  {
    id: "diamante", num: "02", name: "Patrón Diamante",
    level: "Intermedio", duration: "6 sesiones", hours: "18 h", spots: "4",
    price: "480.000", active: false,
    learn: "Tensión avanzada, escalado del diamante, transiciones de color y combinación con patrón lineal.",
    take: "Una pieza completa estilo Acapulco con tejido diamante.",
    accent: "var(--mostaza, #E3A724)",
  },
  {
    id: "restauracion", num: "03", name: "Restauración de tejido",
    level: "Intensivo", duration: "1 sesión", hours: "8 h", spots: "5",
    price: "240.000", active: false,
    learn: "Diagnóstico de la pieza, desarme controlado, reposición de hilo respetando el dibujo original.",
    take: "Tu propia silla restaurada — la traes el primer día.",
    accent: "var(--verde-deep, #4B6E5A)",
  },
  {
    id: "patron-libre", num: "04", name: "Patrón libre",
    level: "Avanzado", duration: "8 sesiones", hours: "24 h", spots: "3",
    price: "780.000", active: false,
    learn: "Diseño de patrón propio, combinación de hilos, paso a producción. Requiere módulo previo.",
    take: "Una pieza única, hecha desde tu propio dibujo.",
    accent: "var(--ink, #1A1714)",
  },
];

const FAQS = [
  { q: "¿Necesito saber tejer?", a: "No para Iniciación — partimos de cero. Para intermedios y avanzados pedimos haber tomado el de Iniciación o experiencia equivalente." },
  { q: "¿Qué tengo que traer?", a: "Solo ropa cómoda. Hilo, marco, herramientas y estructura base las pone DAVA'S." },
  { q: "¿Dónde se dictan?", a: "Showroom de Bogotá — Cra 21 #49-13. Barranquilla se programa con mínimo 4 personas confirmadas." },
  { q: "¿Puedo regalar un cupo?", a: "Sí. Escríbenos por WhatsApp y te enviamos tarjeta digital con código de reserva." },
  { q: "¿Política de cancelación?", a: "Reservas con depósito. Cancelando con 7+ días se reagenda; más cerca se pierde el depósito." },
  { q: "¿Edad mínima?", a: "13 años con acompañante adulto. Desde los 15 entran solos." },
];

function Cursos({ setPage }) {
  const goHome = () => window.__davasRoute?.setPage("home");
  const [openFaq, setOpenFaq] = useState(0);
  return (
    <>
      {/* ════ HERO ════ */}
      <section className="cursos-hero-v2">
        <div className="crumb"><a onClick={goHome} style={{ cursor: "pointer" }}>Inicio</a>  ·  Cursos</div>
        <div className="cursos-hero-grid">
          <div className="cursos-hero-photo">
            <img src="assets/casas/artesano-tejiendo-closeup.jpg" alt="Artesano DAVA'S tejiendo a mano" />
            <div className="cursos-hero-badge">
              <span className="big">12</span>
              <span className="small">horas<br/>para tejer<br/>tu primera<br/>pieza</span>
            </div>
          </div>
          <div className="cursos-hero-text">
            <Eyebrow accent="var(--terracota)">Cursos · 2026</Eyebrow>
            <h1>Aprende a<br /><em>tejer</em> con<br />nosotros.</h1>
            <p>
              Cuatro módulos, cupos pequeños, en el mismo taller que produce el catálogo.
              Empiezas desde cero y te llevas tu pieza terminada.
            </p>
            <div className="cursos-hero-stats">
              <div><span className="v">4</span><span className="k">módulos</span></div>
              <div><span className="v">62</span><span className="k">horas totales</span></div>
              <div><span className="v">3—6</span><span className="k">personas / grupo</span></div>
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
              <a className="btn solid" href={waLink("Hola DAVA'S, quiero info sobre los cursos de tejido.")} target="_blank" rel="noopener">
                Preguntar por fechas <Arr />
              </a>
              <a className="btn line" href="#modulos">Ver módulos ↓</a>
            </div>
          </div>
        </div>
      </section>

      {/* ════ MÓDULOS ════ */}
      <Reveal as="section" className="cursos-modulos" id="modulos">
        <div className="cursos-mod-head">
          <Eyebrow>Módulos</Eyebrow>
          <h2>Cuatro <em>niveles</em>.</h2>
          <p>Las fechas se confirman por WhatsApp cuando se cierran los grupos.</p>
        </div>

        <div className="cursos-mod-list">
          {MODULES.map((m) => (
            <div key={m.id} className={`cursos-mod ${m.active ? "is-active" : ""}`}>
              <div className="cursos-mod-num" style={{ color: m.accent }}>{m.num}</div>
              <div className="cursos-mod-body">
                <div className="cursos-mod-top">
                  <h3>{m.name}</h3>
                  {m.active ? <span className="cursos-mod-pill">Cupos abiertos</span> : null}
                </div>
                <div className="cursos-mod-meta">
                  <span>{m.level}</span>
                  <span>{m.duration} · {m.hours}</span>
                  <span>Máx. {m.spots} personas</span>
                </div>
                <div className="cursos-mod-detail">
                  <div>
                    <div className="cursos-mod-label">Aprendes</div>
                    <p>{m.learn}</p>
                  </div>
                  <div>
                    <div className="cursos-mod-label">Te llevas</div>
                    <p>{m.take}</p>
                  </div>
                </div>
              </div>
              <div className="cursos-mod-action">
                <div className="cursos-mod-price">$ {m.price}</div>
                <a className="btn wa sm" href={waLink("Hola DAVA'S, me interesa el curso \"" + m.name + "\".")} target="_blank" rel="noopener">
                  {m.active ? "Reservar" : "Avísame"} <Arr />
                </a>
              </div>
            </div>
          ))}
        </div>
      </Reveal>

      {/* ════ FAQS ════ */}
      <Reveal as="section" className="cursos-faq">
        <div className="head">
          <div>
            <Eyebrow onDark accent="var(--mostaza)">Preguntas frecuentes</Eyebrow>
            <h2><em>Antes</em> de reservar.</h2>
          </div>
        </div>
        <div className="list">
          {FAQS.map((f, i) => (
            <details key={i} open={i === openFaq} onClick={(e) => { e.preventDefault(); setOpenFaq(openFaq === i ? -1 : i); }}>
              <summary>{f.q}</summary>
              {openFaq === i ? <p>{f.a}</p> : null}
            </details>
          ))}
        </div>
      </Reveal>
    </>
  );
}

window.Cursos = Cursos;